gradientUnits - SVG: Scalable Vector Graphics
the gradientunits attribute defines the coordinate system used for attributes specified on the gradient elements. two elements are using this attribute: <lineargradient> and <radialgradient> lineargradient for <lineargradient>, gradientunits defines the coordinate system used for the attributes x1, y1, x2, and y2. ...
...s defines the coordinate system used for the attributes x1, y1, x2, and y2. value userspaceonuse | objectboundingbox default value objectboundingbox animatable yes userspaceonuse this value indicates that the attributes represent values in the coordinate system that results from taking the current user coordinate system in place at the time when the gradient element is referenced (i.e., the user coordinate system for the element referencing the gradient element via a fill or stroke property) and then applying the transform specified by attribute gradienttransform. percentages represent values relative to the current svg viewport. objectboundingbox this value indicates that the user coordinate system for the attributes is established using the ...
... coordinate system for the element referencing the gradient element via a fill or stroke property) and then applying the transform specified by attribute gradienttransform. percentages represent values relative to the current svg viewport. objectboundingbox this value indicates that the user coordinate system for the attributes is established using the bounding box of the element to which the gradient is applied and then applying the transform specified by attribute gradienttransform. percentages represent values relative to the bounding box for the object. ...
...And 12 more matches

gradientTransform - SVG: Scalable Vector Graphics
the gradienttransform attribute contains the definition of an optional additional transformation from the gradient coordinate system onto the target coordinate system (i.e., userspaceonuse or objectboundingbox). this allows for things such as skewing the gradient. this additional transformation matrix is post-multiplied to (i.e., inserted to the right of) any previously defined transformations, including the implicit transformation necessary to convert from object bounding box units to user space. ...
...ordinate system (i.e., userspaceonuse or objectboundingbox). this allows for things such as skewing the gradient. this additional transformation matrix is post-multiplied to (i.e., inserted to the right of) any previously defined transformations, including the implicit transformation necessary to convert from object bounding box units to user space. ...
...m (i.e., userspaceonuse or objectboundingbox). this allows for things such as skewing the gradient. this additional transformation matrix is post-multiplied to (i.e., inserted to the right of) any previously defined transformations, including the implicit transformation necessary to convert from object bounding box units to user space. ...
...And 11 more matches

CanvasRenderingContext2D.createLinearGradient() - Web APIs
parameters x0 the x-axis coordinate of the start point. ...
... parameters x0 the x-axis coordinate of the start point. ...
... parameters x0 the x-axis coordinate of the start point. ...
...And 10 more matches

-moz-outline-radius - CSS: Cascading Style Sheets
in mozilla applications like firefox, the -moz-outline-radius css shorthand property can be used to give an element's outline rounded corners. /* one value */ -moz-outline-radius: 25px; /* two values */ -moz-outline-radius: 25px 1em; /* three values */ -moz-outline-radius: 25px 1em 12%; /* four values */ -moz-outline-radius: 25px 1em 12% 4mm; /* global values */ -moz-outline-radius: inherit; -moz-outline-radius: initial; -moz-outline-radius: unset; constituent properties this property is a shorthand for the following css properties: -moz-outline-radius-bottomleft -moz-outline-radius-bottomright -moz-outline-radius-topleft -moz-outline-radius-topright syntax values elliptical outlines and <percentage> values follow the syntax described in border-radius. one, two, ...
... if a single value is set, it applies to all 4 corners. if two values are set, the first one applies to the top-left and bottom-right corners and the second one to the top-right and bottom-left corners. ...
... if a single value is set, it applies to all 4 corners. if two values are set, the first one applies to the top-left and bottom-right corners and the second one to the top-right and bottom-left corners. ...
...And 10 more matches

border-bottom-left-radius - CSS: Cascading Style Sheets
the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. the rounding can be a circle or an ellipse, or if one of the value is 0 no rounding is done and the corner is square. a background, being an image or a color, is clipped at the border, even a rounded one; the exact location of the clipping is defined by the value of the background-clip property. ...
...e-examples and send us a pull request. the rounding can be a circle or an ellipse, or if one of the value is 0 no rounding is done and the corner is square. a background, being an image or a color, is clipped at the border, even a rounded one; the exact location of the clipping is defined by the value of the background-clip property. ...
... if one of the value is 0 no rounding is done and the corner is square. a background, being an image or a color, is clipped at the border, even a rounded one; the exact location of the clipping is defined by the value of the background-clip property. ...
...And 10 more matches

border-bottom-right-radius - CSS: Cascading Style Sheets
the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. the rounding can be a circle or an ellipse, or if one of the value is 0 no rounding is done and the corner is square. a background, being an image or a color, is clipped at the border, even a rounded one; the exact location of the clipping is defined by the value of the background-clip property. ...
...e-examples and send us a pull request. the rounding can be a circle or an ellipse, or if one of the value is 0 no rounding is done and the corner is square. a background, being an image or a color, is clipped at the border, even a rounded one; the exact location of the clipping is defined by the value of the background-clip property. ...
...if one of the value is 0 no rounding is done and the corner is square. a background, being an image or a color, is clipped at the border, even a rounded one; the exact location of the clipping is defined by the value of the background-clip property. ...
...And 10 more matches

Protocol upgrade mechanism - HTTP
the http/1.1 protocol provides a special mechanism that can be used to upgrade an already established connection to a different protocol, using the upgrade header field. this mechanism is optional; it cannot be used to insist on a protocol change. implementations can choose not to take advantage of an upgrade even if they support the new protocol, and in practice, this mechanism is used mostly to bootstrap a websockets connection. note also that http/2 explicitly disallows the use of this mechanism; it is specific to http/1.1. upgrading http/1.1 connections the upgrade header field is used by clients to invite the server to switch to one of the listed protocols, in descending preference order. ...
... they support the new protocol, and in practice, this mechanism is used mostly to bootstrap a websockets connection. note also that http/2 explicitly disallows the use of this mechanism; it is specific to http/1.1. upgrading http/1.1 connections the upgrade header field is used by clients to invite the server to switch to one of the listed protocols, in descending preference order. because upgrade is a hop-by-hop header, it also needs to be listed in the connection header field. ...
... explicitly disallows the use of this mechanism; it is specific to http/1.1. upgrading http/1.1 connections the upgrade header field is used by clients to invite the server to switch to one of the listed protocols, in descending preference order. because upgrade is a hop-by-hop header, it also needs to be listed in the connection header field. ...
...And 9 more matches

Upgrade - HTTP
the http 1.1 (only) upgrade header can be used to upgrade an already established client/server connection to a different protocol (over the same transport protocol). for example, it can be used by a client to upgrade a connection from http 1.1 to http 2.0, or an http or https connection into a websocket. http/2 explicitly disallows the use of this mechanism/header; it is specific to http/1.1. header type request header, response header forbidden header name yes overview the upgrade header field may be used by clients to invite a server to switch to one (or more) of the listed protocols, in descending preference order. for example, the client might send a get request as shown, listing the preferred protocols to switch to (in this case "example/1" and "foo/...
...dden header name yes overview the upgrade header field may be used by clients to invite a server to switch to one (or more) of the listed protocols, in descending preference order. for example, the client might send a get request as shown, listing the preferred protocols to switch to (in this case "example/1" and "foo/2"): get /index.html http/1.1 host: www.example.com connection: upgrade upgrade: example/1, foo/2 note: connection: upgrade must be set whenever upgrade is sent. the server can choose to ignore the request, for any reason, in which case it should just respond as though the upgrade header had not been sent (for example, with a  200 ok). ...
...case "example/1" and "foo/2"): get /index.html http/1.1 host: www.example.com connection: upgrade upgrade: example/1, foo/2 note: connection: upgrade must be set whenever upgrade is sent. the server can choose to ignore the request, for any reason, in which case it should just respond as though the upgrade header had not been sent (for example, with a  200 ok). if the server decides to upgrade the connection, it must: send back a 101 switching protocols response status with an upgrade header that specifies the protocol(s) being switched to. for example: http/1.1 101 switching protocols upgrade: foo/2 connection: upgrade send a response to the original request using the new protocol (the server may only switch to a protocol with which it can complete the original request). ...
...And 8 more matches

<linearGradient> - SVG: Scalable Vector Graphics
the <lineargradient> element lets authors define linear gradients that can be applied to fill or stroke of graphical elements. don't be confused with css linear-gradient() as css gradients can only apply to html elements where svg gradient can only apply to svg elements. ...
...s define linear gradients that can be applied to fill or stroke of graphical elements. don't be confused with css linear-gradient() as css gradients can only apply to html elements where svg gradient can only apply to svg elements. ...
... gradients that can be applied to fill or stroke of graphical elements. don't be confused with css linear-gradient() as css gradients can only apply to html elements where svg gradient can only apply to svg elements. ...
...And 8 more matches

<gradient> - CSS: Cascading Style Sheets
the <gradient> css data type is a special 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. ...
...insic 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 progressively from a center point (origin). they are generated with the radial-gradient() function. ...
... 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 progressively from a center point (origin). they are generated with the radial-gradient() function. repeating gradient repeating gradients duplicate a gradient as much as necessary to fill a given area. they are generated with the repeating-linear-gradient() and repeating-radial-gradient() functions. conic gradient conic gradients transition colors progressively around a circle. they are generated with the conic-gradient() function. ...
...And 7 more matches

Using the radio role - Accessibility
description this technique demonstrates how to use the radio role and describes the effect it has on browsers and assistive technology. possible effects on user agents and assistive technology note: opinons may differ on how assistive technology should handle this technique. the information provided above is one of those opinions and therefore not normative. examples example 1: example from the basic form hints mdn page. ...
... effect it has on browsers and assistive technology. possible effects on user agents and assistive technology note: opinons may differ on how assistive technology should handle this technique. the information provided above is one of those opinions and therefore not normative. examples example 1: example from the basic form hints mdn page. ...
...and assistive technology. possible effects on user agents and assistive technology note: opinons may differ on how assistive technology should handle this technique. the information provided above is one of those opinions and therefore not normative. examples example 1: example from the basic form hints mdn page. ...
...And 5 more matches

border-top-right-radius - CSS: Cascading Style Sheets
the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. the rounding can be a circle or an ellipse, or if one of the value is 0 no rounding is done and the corner is square. a background, being an image or a color, is clipped at the border, even a rounded one; the exact location of the clipping is defined by the value of the background-clip property. ...
...e-examples and send us a pull request. the rounding can be a circle or an ellipse, or if one of the value is 0 no rounding is done and the corner is square. a background, being an image or a color, is clipped at the border, even a rounded one; the exact location of the clipping is defined by the value of the background-clip property. ...
...or if one of the value is 0 no rounding is done and the corner is square. a background, being an image or a color, is clipped at the border, even a rounded one; the exact location of the clipping is defined by the value of the background-clip property. ...
...And 5 more matches

CSP: upgrade-insecure-requests - HTTP
the http content-security-policy (csp) upgrade-insecure-requests directive instructs user agents to treat all of a site's insecure urls (those served over http) as though they have been replaced with secure urls (those served over https). this directive is intended for web sites with large numbers of insecure legacy urls that need to be rewritten. the upgrade-insecure-requests directive is evaluated before block-all-mixed-content and if it is set, the latter is effectively a no-op. it is recommended to set either directive, but not both, unless you want to force https on older browsers that do not force it after a redirect to http. ...
...tive is intended for web sites with large numbers of insecure legacy urls that need to be rewritten. the upgrade-insecure-requests directive is evaluated before block-all-mixed-content and if it is set, the latter is effectively a no-op. it is recommended to set either directive, but not both, unless you want to force https on older browsers that do not force it after a redirect to http. ...
...e-requests directive is evaluated before block-all-mixed-content and if it is set, the latter is effectively a no-op. it is recommended to set either directive, but not both, unless you want to force https on older browsers that do not force it after a redirect to http. ...
...And 5 more matches

nsIRadioInterfaceLayer
dom/system/gonk/nsiradiointerfacelayer.idlscriptable used to implement the interface between the telephony api and the radio hardware in a telephone. 1.0 66 introduced gecko 12.0 inherits from: nsisupports last changed in gecko 14.0 (firefox 14.0 / thunderbird 14.0 / seamonkey 2.11) implemented by: @mozilla.org/telephony/system-worker-manager;1. ...
...gonk/nsiradiointerfacelayer.idlscriptable used to implement the interface between the telephony api and the radio hardware in a telephone. 1.0 66 introduced gecko 12.0 inherits from: nsisupports last changed in gecko 14.0 (firefox 14.0 / thunderbird 14.0 / seamonkey 2.11) implemented by: @mozilla.org/telephony/system-worker-manager;1. ...
...gecko 14.0 (firefox 14.0 / thunderbird 14.0 / seamonkey 2.11) implemented by: @mozilla.org/telephony/system-worker-manager;1. ...
...And 4 more matches

border-top-left-radius - CSS: Cascading Style Sheets
the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. the rounding can be a circle or an ellipse, or if one of the value is 0,no rounding is done and the corner is square. a background, being an image or a color, is clipped at the border, even a rounded one; the exact location of the clipping is defined by the value of the background-clip property. ...
...e-examples and send us a pull request. the rounding can be a circle or an ellipse, or if one of the value is 0,no rounding is done and the corner is square. a background, being an image or a color, is clipped at the border, even a rounded one; the exact location of the clipping is defined by the value of the background-clip property. ...
... or if one of the value is 0,no rounding is done and the corner is square. a background, being an image or a color, is clipped at the border, even a rounded one; the exact location of the clipping is defined by the value of the background-clip property. ...
...And 4 more matches

Inner-browsing extending the browser navigation paradigm - Archive of obsolete content
data from the presentation can give your web applications new continuity, precision and control. this model is also interesting because is optimized to access contextual data instead reloading full web pages. this article discusses the concept of inner-browsing and possible approaches for its implementation. it also provides two implementation examples using the model. the first one looks like a traditional dhtml ticker application and uses hidden iframes and javascript to provide updates inside the webpage's ticker headlines section. this sample was made using iframes to illustrate a possible implementation. an implementation can also use other transport technologies such as soap-based remote procedure calls, xmlhttprequest interfaces, or dom 3 load. the second example shows a tabbed menu th...
...ker headlines section. this sample was made using iframes to illustrate a possible implementation. an implementation can also use other transport technologies such as soap-based remote procedure calls, xmlhttprequest interfaces, or dom 3 load. the second example shows a tabbed menu that dynamically loads news headlines into the current web page. this implementation uses xmlhttprequest. extending traditional hypertext navigation the hypertext approach to developing web pages, in which developers format text layouts into pages and link those pages to related content, is analogous to a book or a magazine: readers view pages, go to other pages for more information, and view resources listed as references on that page. html and web standards have evolved and now offer flexible and fine-grained con...
...ources to different browsers. despite all the evolution, we still see the underpinnings of the original model in modern web sites. we still connect through a set of links that mostly drive us to a new page, and we still occasionally lose track of where we are. also, on the server side, the server often has to rebuild all of the context of the user interface with each new request. of course, this traditional approach is useful and easy to implement, which is why it is still so widely used. but the real showcase for new browser features and web standards like html 4.0 and dom level 2, and xml are models like inner-browsing, where these technologies can begin to be used in the way that they were envisioned. many of the new web technologies in the html 4.0 specification, xml 1.0, dom level 3 were...
...And 3 more matches

radio - Archive of obsolete content
« xul reference home [ examples | attributes | properties | methods | related ] an element that can be turned on and off. radio buttons are almost always listed together in groups. only one radio button within the same radiogroup may be selected at a time. the user can switch which radio button is turned on by selecting it with the mouse or keyboard. other radio buttons in the same group are turned off. a label, specified with the label attribute may be added beside the radio button. more information is available in the xul tutorial. ...
...the mouse or keyboard. other radio buttons in the same group are turned off. a label, specified with the label attribute may be added beside the radio button. more information is available in the xul tutorial. attributes accesskey, command, crop, disabled, focused, group, image, label, selected, tabindex, value properties accesskey, accessibletype, control, crop, disabled, image, label, radiogroup, selected, tabindex, value examples <radiogroup> <radio id="orange" label="red" accesskey="r"/> <radio id="violet" label="green" accesskey="g" selected="true"/> <radio id="yellow" label="blue" accesskey="b" disabled="true"/> </radiogroup> attributes accesskey type: character this should be set to a character that is used as a shortcut key. this should be one of th...
... respond to mouse events. to enable the element, leave this attribute out entirely. visible controls have a disabled property which, except for menus and menuitems, is normally preferred to use of the attribute, as it may need to update additional state. focused type: boolean this attribute is true if the element is focused. group type: string group name buttons with type="radio" and the same value for their group attribute are put into the same group. only one button from each group can be checked at a time. if the user selects one the buttons, the others in the group are unchecked. 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 o...
...And 3 more matches

radiogroup - Archive of obsolete content
« xul reference home [ examples | attributes | properties | methods | related ] a group of radio buttons. only one radio button inside the group can be selected at a time. the radio buttons may either direct children of the radiogroup or descendants. place the radiogroup inside a groupbox if you would like a border or caption for the group. the radiogroup defaults to vertical orientation. more information is available in the xul tutorial. ...
...if this attribute is set, the element is disabled. disabled elements are usually drawn with grayed-out text. ...
...roup defaults to vertical orientation. more information is available in the xul tutorial. attributes disabled, focused, preference, tabindex, value properties accessibletype, disabled, focuseditem, itemcount, selectedindex, selecteditem, tabindex, value methods appenditem, checkadjacentelement, getindexofitem, getitematindex, insertitemat, removeitemat examples <radiogroup> <radio id="orange" label="red"/> <radio id="violet" label="green" selected="true"/> <radio id="yellow" label="blue"/> </radiogroup> attributes 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, it does not respond to user actions,...
...And 3 more matches

SVGGradientElement - Web APIs
the svggradient interface is a base interface used by svglineargradientelement and svgradialgradientelement. <div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4...
...naco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svggradientelement" target="_top"><rect x="301" y="65" width="180" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="391" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svggradientelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} constants ...
...e or to attempt to switch an existing value to this type. svg_spreadmethod_pad 1 corresponds to value pad. svg_spreadmethod_reflect 2 corresponds to value reflect. svg_spreadmethod_repeat 3 corresponds to value repeat. properties this interface also inherits properties from its parent, svgelement, and implements those of svgurireference. ...
...And 3 more matches

SVGLinearGradientElement - Web APIs
the svglineargradientelement interface corresponds to the <lineargradient> element. <div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line ...
...naco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svggradientelement" target="_top"><rect x="301" y="65" width="180" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="391" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svggradientelement</text></a><polyline points="301,89 291,84 291,94 301,89" stroke="#d4dde4" fill="none"/><line x1="291"...
... stroke="#d4dde4" stroke-width="2px" /><text x="391" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svggradientelement</text></a><polyline points="301,89 291,84 291,94 301,89" stroke="#d4dde4" fill="none"/><line x1="291" y1="89" x2="261" y2="89" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svglineargradientelement" target="_top"><rect x="21" y="65" width="240" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="141" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svglineargradientelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties ...
...And 3 more matches

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. ...
...d 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 xradius the x radius of the ellipse that most closely circumscribes the area of contact with the touch surface. example this example illustrates using the touch interface's touch.radiusx, touch.radiusx and touch.rotationangle properties. the touch.radiusx property is the radius of the ellipse which most closely circumscribes the touching area (e.g. fi...
...cumscribes the area of contact with the touch surface. example this example illustrates using the touch interface's touch.radiusx, touch.radiusx and touch.rotationangle properties. the touch.radiusx property is the radius of the ellipse which most closely circumscribes the touching area (e.g. finger, stylus) along the axis indicated by the touch point's touch.rotationangle. likewise, the touch.radiusy property is the radius of the ellipse which most closely circumscribes the touching area (e.g. finger, stylus) along the axis perpendicular to that indicated by touch.rotationangle. the touch.rotationangle is the angle (in degrees) that the ellipse described by radiusx and radiusy is rotated clockwise about its center. the following simple code snippet, registers a single handler for the tou...
...And 3 more matches

border-end-end-radius - CSS: Cascading Style Sheets
the border-end-end-radius css property defines a logical border radius on an element, which maps to a physical border radius that depends on on the element's writing-mode, direction, and text-orientation. this is useful when building styles to work regardless of the text orientation and writing mode. /* <length> values */ /* with one value the corner will be a circle */ border-end-end-radius: 10px; border-end-end-radius: 1em; /* with two values the corner will be an ellipse */ border-end-end-radius: 1em 2em; /* global values */ border-end-end-radius: inherit; border-end-end-radius: initial; border-end-end-radius: unset; for instance, in a horizontal-tb writing mode this property corresponds to the border-bottom-right-radius property. syntax values <length-percentage> denotes the s...
...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. ...
... collapse. the behavior on internal table elements is undefined for the moment.. ...
...And 3 more matches

border-end-start-radius - CSS: Cascading Style Sheets
the border-end-start-radius css property defines a logical border radius on an element, which maps to a physical border radius depending on the element's writing-mode, direction, and text-orientation. this is useful when building styles to work regardless of the text orientation and writing mode. /* <length> values */ /* with one value the corner will be a circle */ border-end-start-radius: 10px; border-end-start-radius: 1em; /* with two values the corner will be an ellipse */ border-end-start-radius: 1em 2em; /* global values */ border-end-start-radius: inherit; border-end-start-radius: initial; border-end-start-radius: unset; for instance, in a horizontal-tb writing mode this property corresponds to the border-top-right-radius property. syntax values <length-percentage> denotes ...
...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. ...
... collapse. the behavior on internal table elements is undefined for the moment.. ...
...And 3 more matches

border-start-end-radius - CSS: Cascading Style Sheets
the border-start-end-radius css property defines a logical border radius on an element, which maps to a physical border radius depending on the element's writing-mode, direction, and text-orientation. this is useful when building styles to work regardless of the text orientation and writing mode. /* <length> values */ /* with one value the corner will be a circle */ border-start-end-radius: 10px; border-start-end-radius: 1em; /* with two values the corner will be an ellipse */ border-start-end-radius: 1em 2em; /* global values */ border-start-end-radius: inherit; border-start-end-radius: initial; border-start-end-radius: unset; for instance, in a horizontal-tb writing mode this property corresponds to the border-bottom-left-radius property. syntax values <length-percentage> denote...
...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. ...
... collapse. the behavior on internal table elements is undefined for the moment.. ...
...And 3 more matches

border-start-start-radius - CSS: Cascading Style Sheets
the border-start-start-radius css property defines a logical border radius on an element, which maps to a physical border radius that depends on the element's writing-mode, direction, and text-orientation. this is useful when building styles to work regardless of the text orientation and writing mode. /* <length> values */ /* with one value the corner will be a circle */ border-start-start-radius: 10px; border-start-start-radius: 1em; /* with two values the corner will be an ellipse */ border-start-start-radius: 1em 2em; /* global values */ border-start-start-radius: inherit; border-start-start-radius: initial; border-start-start-radius: unset; for instance, in a horizontal-tb writing mode this property corresponds to the border-top-left-radius property. syntax values <length-perce...
...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. ...
... collapse. the behavior on internal table elements is undefined for the moment.. ...
...And 3 more matches

426 Upgrade Required - HTTP
the http 426 upgrade required client error response code indicates that the server refuses to perform the request using the current protocol but might be willing to do so after the client upgrades to a different protocol. the server sends an upgrade header with this response to indicate the required protocol(s). ...
... the http 426 upgrade required client error response code indicates that the server refuses to perform the request using the current protocol but might be willing to do so after the client upgrades to a different protocol. the server sends an upgrade header with this response to indicate the required protocol(s). ...
... the http 426 upgrade required client error response code indicates that the server refuses to perform the request using the current protocol but might be willing to do so after the client upgrades to a different protocol. the server sends an upgrade header with this response to indicate the required protocol(s). ...
...And 3 more matches

IDBOpenDBRequest.onupgradeneeded - Web APIs
the onupgradeneeded property of the idbopendbrequest interface is the event handler for the upgradeneeded event, triggered when a database of a bigger version number than the existing stored database is loaded. the event passed to the listener is an idbversionchangeevent. inside the event handler function you can include code to upgrade the database structure, as shown in the example below. note: this feature is available in web workers. syntax idbopendbrequest.onupgradeneeded = function(event) { ... }; example in the following example you can see the onupgradeneeded handler being used to update the database structure if a database with a higher version number is loaded. for a full working example, see our to-do notifications app (view example live.) var db; // request version 3 o...
...example, see our to-do notifications app (view example live.) var db; // request version 3 of the database. var request = window.indexeddb.open("library", 3); // this event handles the event whereby a new version of the // database needs to be created. either one has not been created // before, or a new version number has been submitted via the // window.indexeddb.open line above. request.onupgradeneeded = function(event) { db = request.result; db.onerror = function(errorevent) { note.innerhtml += '<li>error loading database.</li>'; }; if (event.oldversion < 1) { // version 1 is the first version of the database. var store = db.createobjectstore("books", {keypath: "isbn"}); var titleindex = store.createindex("by_title", "title", {unique: true}); var authorinde...
... recommendation 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 requ...
...And 2 more matches

RadioNodeList.value - Web APIs
if the underlying element collection contains radio buttons, the radionodelist.value property represents the checked radio button. on retrieving the value property, the value of the currently checked radio button is returned as a string. if the collection does not contain any radio buttons or none of the radio buttons in the collection is in checked state, the empty string is returned. on setting the value property, the first radio button input element whose value property is equal to the new value will be set to checked. ...
...the value property, the value of the currently checked radio button is returned as a string. if the collection does not contain any radio buttons or none of the radio buttons in the collection is in checked state, the empty string is returned. on setting the value property, the first radio button input element whose value property is equal to the new value will be set to checked. ...
...he value of the currently checked radio button is returned as a string. if the collection does not contain any radio buttons or none of the radio buttons in the collection is in checked state, the empty string is returned. on setting the value property, the first radio button input element whose value property is equal to the new value will be set to checked. ...
...And 2 more matches

RangeError: radix must be an integer - JavaScript
its value must be an integer (a number) between 2 and 36, specifying the base of the number system to be used for representing numeric values. ...
...its value must be an integer (a number) between 2 and 36, specifying the base of the number system to be used for representing numeric values. ...
...its value must be an integer (a number) between 2 and 36, specifying the base of the number system to be used for representing numeric values. ...
...And 2 more matches

IDBOpenDBRequest: upgradeneeded event - Web APIs
the upgradeneeded event is fired when an attempt was made to open a database with a version number higher than its current version. bubbles no cancelable no interface event event handler onupgradeneeded examples this example opens a database and handles the upgradeneeded event by making any necessary updates to the object store. ...
...than its current version. bubbles no cancelable no interface event event handler onupgradeneeded examples this example opens a database and handles the upgradeneeded event by making any necessary updates to the object store. ...
... interface event event handler onupgradeneeded examples this example opens a database and handles the upgradeneeded event by making any necessary updates to the object store. ...
...ems the objectstore will contain objectstore.createindex('hours', 'hours', { unique: false }); objectstore.createindex('minutes', 'minutes', { unique: false }); objectstore.createindex('day', 'day', { unique: false }); objectstore.createindex('month', 'month', { unique: false }); objectstore.createindex('year', 'year', { unique: false }); }); this is the same example, but uses the onupgradeneeded event handler property. // open the database const dbopenrequest = window.indexeddb.open('todolist', 4); dbopenrequest.onupgradeneeded = event => { const db = event.target.result; console.log(`upgrading to version ${db.version}`); // create an objectstore for this database var objectstore = db.createobjectstore('todolist', { keypath: 'tasktitle' }); // define what data items ...

RadioNodeList - Web APIs
the radionodelist interface represents a collection of radio elements in a <form> or a <fieldset> element. <div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/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="no...
...0" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="41" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">nodelist</text></a><polyline points="81,25 91,20 91,30 81,25" stroke="#d4dde4" fill="none"/><line x1="91" y1="25" x2="121" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/radionodelist" target="_top"><rect x="121" y="1" width="130" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="186" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">radionodelist</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties the radiono...
... height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="186" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">radionodelist</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties the radionodelist interface inherits the properties of nodelist. radionodelist.value if the underlying element collection contains radio buttons, the value property represents the checked radio button. on retrieving the value property, the value of the currently checked radio button is returned as a string. if the collection does not contain any radio buttons or none of the radio buttons in the collection is in checked state, the empty string is returned. on sett...
...g element collection contains radio buttons, the value property represents the checked radio button. on retrieving the value property, the value of the currently checked radio button is returned as a string. if the collection does not contain any radio buttons or none of the radio buttons in the collection is in checked state, the empty string is returned. on setting the value property, the first radio button input element whose value property is equal to the new value will be set to checked. methods the radionodelist interface inherits the methods of nodelist. specifications specification status comments html living standardthe definition of 'radionodelist' in that specification. living standard initial definition ...

radio.control - Archive of obsolete content
...
... ...
... ...

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

nsIHttpUpgradeListener
netwerk/protocol/http/nsihttpchannelinternal.idlscriptable the callback interface for nsihttpchannelinternal.httpupgrade; this is called when an http protocol upgrade is finished. 1.0 66 introduced gecko 6.0 inherits from: nsisupports last changed in gecko 6.0 (firefox 6.0 / thunderbird 6.0 / seamonkey 2.3) this is used, for example, by websockets in order to upgrade an http channel to use the websocket protocol. ...
...nged in gecko 6.0 (firefox 6.0 / thunderbird 6.0 / seamonkey 2.3) this is used, for example, by websockets in order to upgrade an http channel to use the websocket protocol. method overview void ontransportavailable(in nsisockettransport atransport, in nsiasyncinputstream asocketin, in nsiasyncoutputstream asocketout); methods ontransportavailable() called when an http protocol upgrade attempt is completed, passing in the information needed by the protocol handler to take over the channel that is no longer being used by http. note: to begin a protocol upgrade, call nsihttpchannelinternal.httpupgrade(). void ontransportavailable( in nsisockettransport atransport, in nsiasyncinputstream asocketin, in nsiasyncoutputstream asocketout ); parameters atransport the ...

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 = docu...
.... 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 = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); let gradient = ctx.createlineargradient(0, 0, 200, 0); gradient.addcolorstop(0, 'green'); gradient.addcolorstop(.7, 'white'); gradient.addcolorstop(1, 'pink'); ctx.fillstyle = gradient; ctx.fillrect(10, 10, 200, 100); result specifications specification status comment html living standardthe definition of 'canvasgradient.addcolorstop' in that specification. living standard...

CustomElementRegistry.upgrade() - Web APIs
the upgrade() method of the customelementregistry interface upgrades all shadow-containing custom elements in a node subtree, even before they are connected to the main document. syntax customelements.upgrade(root); parameters root a node instance with shadow-containing descendant elements that are to be upgraded. if there are no descendant elements that can be upgraded, no error is thrown. return value void. ...
...th shadow-containing descendant elements that are to be upgraded. if there are no descendant elements that can be upgraded, no error is thrown. return value void. examples taken from the html spec: const el = document.createelement("spider-man"); class spiderman extends htmlelement {} customelements.define("spider-man", spiderman); console.assert(!(el instanceof spiderman)); // not yet upgraded customelements.upgrade(el); console.assert(el instanceof spiderman); // upgraded! specifications specification status comment html living standardthe definition of 'customelements.upgrade()' in that specification. living standard initial definition. ...

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. ...
... 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 y radius of the ellipse that most closely circumscribes the area of contact with the screen. example the touch.radiusx example includes an example of this property's usage. specifications specification status comment touch events – level 2 draft non-stable version. ...

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

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

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

Upgrade-Insecure-Requests - HTTP
the http upgrade-insecure-requests request header sends a signal to the server expressing the client’s preference for an encrypted and authenticated response, and that it can successfully handle the upgrade-insecure-requests csp directive. header type request header forbidden header name no syntax upgrade-insecure-requests: 1 examples a client's request signals to the server that it supports the upgrade mechanisms of upgrade-insecure-requests: get / http/1.1 host: example.com upgrade-insecure-requests: 1 the server can now redirect to a secure version of the site. a vary header can be used so that the site isn't served by caches to clients that don’t support the upgrade mechanism. ...
... a client's request signals to the server that it supports the upgrade mechanisms of upgrade-insecure-requests: get / http/1.1 host: example.com upgrade-insecure-requests: 1 the server can now redirect to a secure version of the site. a vary header can be used so that the site isn't served by caches to clients that don’t support the upgrade mechanism. location: https://example.com/ vary: upgrade-insecure-requests specifications specification status comment upgrade insecure requeststhe definition of 'upgrade-insecure-requests' in that specification. candidate recommendation initial definition. ...

radius - SVG: Scalable Vector Graphics
the radius attribute represents the radius (or radii) for the operation on a given <femorphology> filter primitive. if two numbers are provided, the first number represents the x-radius and the second one the y-radius. if one number is provided, then that value is used for both x and y. the values are in the coordinate system established by the primitiveunits attribute on the <filter> element. a negative or zero value disables the effect of the given filter primitive (i.e., the result is the filter input image). usage notes value <number-optional-number> default value 0 animatable yes specifications specification status comment filter effects module level 1the definition of 'radius' in that specification. working ...
...ilter input image). usage notes value <number-optional-number> default value 0 animatable yes specifications specification status comment filter effects module level 1the definition of 'radius' in that specification. working draft no change scalable vector graphics (svg) 1.1 (second edition)the definition of 'radius' in that specification. recommendation initial definition ...

RadioStateChange - Archive of obsolete content
this event is used mainly for an accessibility purpose. general info specification xul interface event bubbles yes cancelable yes target element 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. ...

radioGroup - Archive of obsolete content
« xul reference radiogroup type: radiogroup element equivalent to the control property. ...

Graceful degradation - MDN Web Docs Glossary: Definitions of Web-related terms
polyfills can be used to build in missing features with javascript, but acceptable alternatives to features like styling and layout should be provided where possible, for example by using the css cascade, or html fallback behaviour. some good examples can be found in handling common html and css problems. it is a useful technique that allows web developers to focus on developing the best possible websites, given that those websites are accessed by multiple unknown user-agents. ...

PRAddrInfo
a structure containing an array of prnetaddr structures. typically, a praddrinfo object will be found via pr_getaddrinfobyname, iterated through using pr_enumerateaddrinfo, and finally freed with pr_freeaddrinfo. to get the canonical hostname of a praddrinfo object, use pr_getcanonnamefromaddrinfo. ...

CanvasGradient - Web APIs
the canvasgradient interface represents an opaque object describing a gradient. it is returned by the methods canvasrenderingcontext2d.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 ...

Applying styles and colors - Web APIs
« previousnext » in the chapter about drawing shapes, we used only the default line and fill styles. here we will explore the canvas options we have at our disposal to make our drawings a little more attractive. you will learn how to add different colors, line styles, gradients, patterns and shadows to your drawings. colors up until now we have only seen methods of the drawing context. if we want to apply colors to a shape, there are two important properties we can use: fillstyle and strokestyle. fillstyle = color sets the style used when filling shapes. strokestyle = color sets the style for shapes' outlines. color is a string representing a css <color>, a gradient object, or a pattern object. we'll look at gradient and pattern objects later. by default, the st...
...lid range is again between 0.0 (fully transparent) and 1.0 (fully opaque). a globalalpha example in this example, we'll draw a background of four different colored squares. on top of these, we'll draw a set of semi-transparent circles. the globalalpha property is set at 0.2 which will be used for all shapes from that point on. every step in the for loop draws a set of circles with an increasing radius. the final result is a radial gradient. by overlaying ever more circles on top of each other, we effectively reduce the transparency of the circles that have already been drawn. by increasing the step count and in effect drawing more circles, the background would completely disappear from the center of the image. function draw() { var ctx = document.getelementbyid('canvas').getcontext('2d')...
...e lines, each with a different value for the linecap property. i also added two guides to see the exact differences between the three. each of these lines starts and ends exactly on these guides. the line on the left uses the default butt option. you'll notice that it's drawn completely flush with the guides. the second is set to use the round option. this adds a semicircle to the end that has a radius half the width of the line. the line on the right uses the square option. this adds a box with an equal width and half the height of the line thickness. function draw() { var ctx = document.getelementbyid('canvas').getcontext('2d'); var linecap = ['butt', 'round', 'square']; // draw guides ctx.strokestyle = '#09f'; ctx.beginpath(); ctx.moveto(10, 10); ctx.lineto(140, 10); ctx...
...And 40 more matches

Index - Web APIs
property, reference, web audio api, minvalue the minvalue read-only property of the audioparam interface represents the minimum possible value for the parameter's nominal (effective) range. 174 audioparam.settargetattime() api, audioparam, method, reference, web audio api, settargetattime the settargetattime() method of the audioparam interface schedules the start of a gradual change to the audioparam value. this is useful for decay or release portions of adsr envelopes. 175 audioparam.setvalueattime() api, audioparam, method, reference, web audio api, setvalueattime the setvalueattime() method of the audioparam interface schedules an instant change to the audioparam value at a precise time, as measured against audiocontext.currenttime. the new ...
...ty returns the htmlcanvaselement from which frames are being captured. 536 canvascapturemediastreamtrack.requestframe() canvas, canvascapturemediastream, dom, experimental, frame capture, media, method, reference, requestframe the canvascapturemediastreamtrack method requestframe() requests that a frame be captured from the canvas and sent to the stream. ...
... from which frames are being captured. 536 canvascapturemediastreamtrack.requestframe() canvas, canvascapturemediastream, dom, experimental, frame capture, media, method, reference, requestframe the canvascapturemediastreamtrack method requestframe() requests that a frame be captured from the canvas and sent to the stream. ...
...And 35 more matches

SVG documentation index - SVG: Scalable Vector Graphics
o use for the contents of the <clippath> element. 44 color svg, svg attribute the color attribute is used to provide a potential indirect value, currentcolor, for the fill, stroke, stop-color, flood-color, and lighting-color attributes. 45 color-interpolation needsexample, svg, svg attribute the color-interpolation attribute specifies the color space for gradient interpolations, color animations, and alpha compositing. 46 color-interpolation-filters needsexample, svg, svg attribute the color-interpolation-filters attribute specifies the color space for imaging operations performed via filter effects. 47 color-profile deprecated, needsexample, svg, svg attribute the color-profile attribute is used to define whi...
... the externalresourcesrequired attribute specifies whether referenced resources that are not part of the current document are required for proper rendering of the given container or graphics element. 71 fill svg, svg attribute the fill attribute has two different meanings. for shapes and text it's a presentation attribute that defines the color (or any svg paint servers like gradients or patterns) used to paint the element; for animation it defines the final state of the animation. 72 fill-opacity svg, svg attribute the fill-opacity attribute is a presentation attribute defining the opacity of the paint server (color, gradient, pattern, etc) applied to a shape. 73 fill-rule svg, svg attribute the fill-rule attribute is a presentat...
... 85 font-weight svg, svg attribute the font-weight attribute refers to the boldness or lightness of the glyphs used to render the text, relative to other fonts in the same font family. 86 format deprecated, svg, svg attribute the format attribute indicates the format of the given font. 87 fr svg, svg attribute the fr attribute defines the radius of the focal point for the radial gradient. 88 from svg, svg attribute the from attribute indicates the initial value of the attribute that will be modified during the animation. 89 fx svg, svg attribute the fx attribute defines the x-axis coordinate of the focal point for a radial gradient. 90 fy svg, svg attribute the fy attribut...
...And 23 more matches

UI pseudo-classes - Learn web development
valid/invalid according to form validation constraints set on them, or in-range/out-of-range. :enabled and :disabled, and :read-only and :read-write: target enabled or disabled form controls (e.g. with the disabled html attribute set), and read-write or read-only form controls (e.g. with the readonly html attribute set). :checked, :indeterminate, and :default: respectively target checkboxes and radio buttons that are checked, in an indeterminate state (neither checked or not checked), and the default selected option when the page loads (e.g. an <input type="checkbox"> with the checked attribute set, or an <option> element with the selected attribute set). there are many others too, but the ones listed above are the most obviously useful. some of the others are aimed at solving very specif...
...n question. in the next section, we'll look at a better example of indicating required fields using :required, which also digs into using generated content. note: you'll probably not find yourself using the :optional pseudo-class very often. form controls are optional by default, so you could just do your optional styling by default, and add styles on top for required controls. note: if one radio button in a same-named group of radio buttons has the required attribute, all the radio buttons will be invalid until one is selected, but only the one with the attribute assigned will actually match :required. using generated content with pseudo-classes in previous articles, we've seen the usage of generated content, but we thought now would be a good time to talk about it in a bit more det...
...nt is not added to the dom, so is invisible to screenreaders; it is part of the document's styles. because it is a pseudo element, it can be targetted with styles in the same way that any actual dom node can. this is really useful when you want to add a visual indicator to an element, such as a label or icon, but don't want it to be picked up by assistive technologies. ...
...And 22 more matches

Box-shadow generator - CSS: Cascading Style Sheets
<div id="obj-before"> </div> <div id="obj-after"> </div> </div> </div> </div> </div> <div id="controls" class="group section"> <div class="wrap-left"> <div class="colorpicker category"> <div class="title"> </div> <div id="colorpicker" class="group"> <div id="gradient" class="gradient"> <div id="gradient_picker"> </div> </div> <div id="hue" data-topic="hue" class="hue"> <div id="hue_selector"> </div> </div> <div class="info"> <div class="input" data-topic="hue" data-title='h:' data-action="hsv"></div> ...
... data-type="add"></div> <div class="ui-slider-input" data-topic="height" data-unit="px"></div> </div> </div> </div> <div id="output" class="category"> <div id="menu" class="menu"></div> <div class="title"> css code </div> <div class="group" style="border-top-left-radius: 0;"> <div class="output" data-topic="element" data-name="element" data-prop="width height background-color position=[relative] box-shadow"> </div> <div class="output" data-topic="before" data-name="element:before" data-prop="content=[&quot;&quot;] position=[absolute] width height top le...
...rowsers except ie6 and lower */ /* * ui slider */ .slidergroup { height: 20px; margin: 10px 0; font-family: "segoe ui", arial, helvetica, sans-serif; -moz-user-select: none; user-select: none; } .slidergroup * { float: left; height: 100%; line-height: 100%; } /* slider */ .ui-slider { height: 10px; width: 200px; margin: 4px 10px; display: block; border: 1px solid #999; border-radius: 3px; background: #eee; } .ui-slider:hover { cursor: pointer; } .ui-slider-name { width: 90px; padding: 0 10px 0 0; text-align: right; text-transform: lowercase; } .ui-slider-pointer { width: 13px; height: 13px; background-color: #eee; border: 1px solid #2c9fc9; border-radius: 3px; position: relative; top: -3px; left: 0%; } .ui-slider-btn-set { width: 25px; background-color...
...And 22 more matches

spreadMethod - SVG: Scalable Vector Graphics
the spreadmethod attribute determines how a shape is filled beyond the defined edges of a gradient. two elements are using this attribute: <lineargradient> and <radialgradient> context notes value pad | reflect | repeat initial value pad animatable yes pad this value indicates that the final color of the gradient 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. ...
...ue 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. ...
...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. ...
...And 21 more matches

shape-outside - CSS: Cascading Style Sheets
the float area determines the shape around which inline content (float elements) wrap.
...the float area determines the shape around which inline content (float elements) wrap. values none the float area is unaff...
...ch inline content (float elements) wrap. values none the float area is unaffected. inline content wraps around the element's margin box, like usual. <shape-box> the float area is computed according to the shape of a float element's edges (as defined by the css box model). this can be margin-box, border-box, padding-box, or content-box. the shape includes any curvature created by the border-radius property (behavior which is similar to background-clip). margin-box defines the shape enclosed by the outside margin edge. the corner radii of this shape are determined by the corresponding border-radius and margin values. if the border-radius / margin ratio is 1 or more, then the margin box corner radius is border-radius + margin. if the ratio is less than 1, then the margin box corne...
...And 20 more matches

<input>: The Input (Form Input) element - HTML: Hypertext Markup Language
a control for entering a number. displays a spinner and adds default validation when supported. displays a numeric keypad in some devices with dynamic keypads. <input type="number" name="number"/> html5 password a single-line text field whose value is obscured. will alert user if site is not secure. <input type="password" name="password"/> radio a radio button, allowing a single value to be selected out of multiple choices with the same name value. <input type="radio" name="radio"/> range a control for entering a number whose exact value is not important. displays as a range widget defaulting to the middle value. used in conjunction min and max to define the range of acceptable values. <input type...
... file hint for expected file type in file upload controls alt image alt attribute for the image type. ...
...email addresses in an email input field. see values in the html autocomplete attribute for permitted values. the autocomplete attribute is valid on hidden, text, search, url, tel, email, date, month, week, time, datetime-local, number, range, color, and password. this attribute has no effect on input types that do not return numeric or text data, being valid for all input types except checkbox, radio, file, or any of the button types. see the html autocomplete attribute for additional information, including information on password security and how autocomplete is slightly different for hidden than for other input types. autofocus a boolean attribute which, if present, indicates that the input should automatically have focus when the page has finished loading (or when the <dialog> co...
...And 19 more matches

Relationship of grid layout to other layout methods - CSS: Cascading Style Sheets
. i have five child items in my container, and i have given the flex properties values so that they can grow and shrink from a flex-basis of 150 pixels. i have also set the flex-wrap property to wrap, so that if the space in the container becomes too narrow to maintain the flex basis, items will wrap onto a new row. ...
...can grow and shrink from a flex-basis of 150 pixels. i have also set the flex-wrap property to wrap, so that if the space in the container becomes too narrow to maintain the flex basis, items will wrap onto a new row. * {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>three</div> <div>four</div> <div>five</div> </div> .wrapper { width: 500px; display: flex; flex-wrap: wrap; } .wrapper > div { flex: 1 1 150px; } in the image, you can see that two items have wrapped onto a new line. these items are sharing...
...same layout using grid. this time we have three 1fr column tracks. we do not need to set anything on the items themselves; they will lay themselves out one into each cell of the created grid. as you can see they stay in a strict grid, lining up in rows and columns. with five items, we get a gap on the end of row two. ...
...And 17 more matches

Line-based placement with CSS Grid - CSS: Cascading Style Sheets
ch dimension. inside our grid container i have four child elements. if we do not place these on to the grid in any way they will lay out according to the auto-placement rules, one item in each of the first four cells. if you use the firefox grid highlighter you can see how the grid has defined columns and rows. ...
...id in any way they will lay out according to the auto-placement rules, one item in each of the first four cells. if you use the firefox grid highlighter you can see how the grid has defined columns and rows. ...
...e can place all four items spanning row and column tracks. note that we can leave cells empty if we wish. one of the very nice things about grid layout is this ability to have white space in our designs without having to push things around using margins to prevent floats from rising up into the space we have left. ...
...And 15 more matches

Using IndexedDB - Web APIs
eturn an idbrequest object with the result or error. the result for the open function is an instance of an idbdatabase. the second parameter to the open method is the version of the database. the version of the database determines the database schema — the object stores in the database and their structure. if the database doesn't already exist, it is created by the open operation, then an onupgradeneeded event is triggered and you create the database schema in the handler for this event. if the database does exist but you are specifying an upgraded version number, an onupgradeneeded event is triggered straight away, allowing you to provide an updated schema in its handler. more on this later in updating the version of the database below, and the idbfactory.open reference page. important...
...n updated schema in its handler. more on this later in updating the version of the database below, and the idbfactory.open reference page. important: the version number is an unsigned long long number, which means that it can be a very big integer. it also means that you can't use a float, otherwise it will be converted to the closest lower integer and the transaction may not start, nor the upgradeneeded event trigger. so for example, don't use 2.4 as a version number: var request = indexeddb.open("mytestdatabase", 2.4); // don't do this, as the version will be rounded to 2 generating handlers the first thing you'll want to do with almost all of the requests you generate is to add success and error handlers: request.onerror = function(event) { // do something with request.errorcode!
...of the database stored on the disk is greater than the version that you are trying to open. this is an error case that must always be handled by the error handler. ...
...And 14 more matches

Color picker tool - CSS: Cascading Style Sheets
-area { width: 198px; height: 198px; margin: 5px; border: 1px solid #ddd; position: relative; float: left; display: table; } .ui-color-picker .picking-area:hover { cursor: default; } /* hsv format - hue-saturation-value(brightness) */ .ui-color-picker .picking-area { background: url('https://mdn.mozillademos.org/files/5707/picker_mask_200.png') center center; background: -moz-linear-gradient(bottom, #000 0%, rgba(0, 0, 0, 0) 100%), -moz-linear-gradient(left, #fff 0%, rgba(255, 255, 255, 0) 100%); background: -webkit-linear-gradient(bottom, #000 0%, rgba(0, 0, 0, 0) 100%), -webkit-linear-gradient(left, #fff 0%, rgba(255, 255, 255, 0) 100%); background: -ms-linear-gradient(bottom, #000 0%, rgba(0, 0, 0, 0) 100%), -ms-linear-gradient(left, #fff 0%, rgba(255, 255, 255, ...
..., 0) 100%), -moz-linear-gradient(left, #fff 0%, rgba(255, 255, 255, 0) 100%); background: -webkit-linear-gradient(bottom, #000 0%, rgba(0, 0, 0, 0) 100%), -webkit-linear-gradient(left, #fff 0%, rgba(255, 255, 255, 0) 100%); background: -ms-linear-gradient(bottom, #000 0%, rgba(0, 0, 0, 0) 100%), -ms-linear-gradient(left, #fff 0%, rgba(255, 255, 255, 0) 100%); background: -o-linear-gradient(bottom, #000 0%, rgba(0, 0, 0, 0) 100%), -o-linear-gradient(left, #fff 0%, rgba(255, 255, 255, 0) 100%); background-color: #f00; } /* hsl format - hue-saturation-lightness */ .ui-color-picker[data-mode='hsl'] .picking-area { background: -moz-linear-gradient(top, hsl(0, 0%, 100%) 0%, hsla(0, 0%, 100%, 0) 50%, hsla(0, 0%, 0%, 0) 50%, hsl(0, 0%, 0%) 100%), -moz-linear-gradie...
...gba(255, 255, 255, 0) 100%); background-color: #f00; } /* hsl format - hue-saturation-lightness */ .ui-color-picker[data-mode='hsl'] .picking-area { background: -moz-linear-gradient(top, hsl(0, 0%, 100%) 0%, hsla(0, 0%, 100%, 0) 50%, hsla(0, 0%, 0%, 0) 50%, hsl(0, 0%, 0%) 100%), -moz-linear-gradient(left, hsl(0, 0%, 50%) 0%, hsla(0, 0%, 50%, 0) 100%); background: -webkit-linear-gradient(top, hsl(0, 0%, 100%) 0%, hsla(0, 0%, 100%, 0) 50%, hsla(0, 0%, 0%, 0) 50%, hsl(0, 0%, 0%) 100%), -webkit-linear-gradient(left, hsl(0, 0%, 50%) 0%, hsla(0, 0%, 50%, 0) 100%); background: -ms-linear-gradient(top, hsl(0, 0%, 100%) 0%, hsla(0, 0%, 100%, 0) 50%, hsla(0, 0%, 0%, 0) 50%, hsl(0, 0%, 0%) 100%), -ms-linear-gradient(left, hsl(0, 0%, 50%) 0%, hsla(0, 0%, 50%, ...
...And 14 more matches

r - SVG: Scalable Vector Graphics
the r attribute defines the radius of a circle. ...
... the r attribute defines the radius of a circle. ...
... the r attribute defines the radius of a circle. ...
...And 14 more matches

Index - Archive of obsolete content
found 3833 pages: # page tags and summary 1 archive of obsolete content archive, landing here at mdn, we try to avoid outright deleting content that might be useful to people targeting legacy platforms, operating systems, and browsers. perhaps your target audience is people that are using older hardware, for example, and can't upgrade to the latest and greatest browsers. or for "reasons," your company is required to use very old software and you need to build web content that runs on that software. or perhaps you're just curious about the history of an obsolete feature or api, and how it worked. 2 .htaccess ( hypertext access ) 301 redirect, cache control, custom error pages, htaccess, permanent redirect, redirect file accessing : hta...
...ation's components/ directory, but beginning with firefox 3.6, this is no longer permitted. components added in this way are invisible to users and cannot be managed through the firefox add-ons manager. what's worse, though, is that these components don't have a mechanism for specifying the versions of firefox with which they are compatible, leading to poor integration and instability as users upgrade their firefox installations. 254 multiple item extension packaging add-ons, obsolete, toolkit api, install. rdf a multiple item package provides the ability to package multiple installable bundles which can then be downloaded and installed by a user, or provided pre-packaged with an application or by an external program. every multiple item package must provide an install.rd...
...nts is available through the devedge page. 608 prism prism prism is a simple xulrunner-based browser that hosts web applications without the normal web browser user interface. prism is based on a concept called site-specific browsers (ssb). an ssb is designed to work exclusively with a single web application. it doesn’t have the menus, toolbars and other accoutrements of a traditional web browser. an ssb also offers tighter integration with the operating system and desktop than a typical web application running through a web browser. applications running in an ssb are therefore able to benefit from many of the advantages of the desktop and of the web at the same time. 609 blogposts prism just browsing: mozilla prism update thanscorner: mozilla prism...
...And 13 more matches

create fancy boxes - Learn web development
::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.. ...
...e 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; /* let's avoid our text touching the border. as our text will still flow in a square, it looks nicer that way, giving the feeling that it's a "r...
... /* within a circle, centered text looks prettier. */ text-align : center; /* let's avoid our text touching the border. as our text will still flow in a square, it looks nicer that way, giving the feeling that it's a "real" circle. */ padding : 1em; /* the border will make the circle visible. you could also use a background, as backgrounds are clipped by border radius */ border : 0.5em solid black; /* let's make sure we have a square. if it's not a square, we'll get an ellipsis rather than a circle ;) */ width : 4em; height : 4em; /* and let's turn the square into a circle */ border-radius: 100%; } yes, we get a circle: backgrounds when we talk about a fancy box, the core properties to handle that are background-* properties. w...
...And 13 more matches

CanvasRenderingContext2D.arcTo() - Web APIs
the canvasrenderingcontext2d.arcto() method of the canvas 2d api adds a circular arc to the current sub-path, using the given control points and radius. the arc is automatically connected to the path's latest point with a straight line, if necessary for the specified parameters. this method is commonly used for making rounded corners. note: be aware that you may get unexpected results when using a relatively large radius: the arc's connecting line will go in whatever direction it must to meet the specified radius. syntax void ctx.arcto(x1, y1, x2, y2, radius); parameters x1 the x-axis coordinate of the first control point. y1 the y-axis coordinate of the first control point. x2 the x-axis coordinate of the second control point. y2 the y-axis coordinate of the second control...
...must be non-negative. examples how arcto works one way to think about arcto() is to imagine two straight segments: one from the starting point to a first control point, and another from there to a second control point. without arcto(), these two segments would form a sharp corner: arcto() creates a circular arc that fits this corner and smooths is out. ...
...must be non-negative. examples how arcto works one way to think about arcto() is to imagine two straight segments: one from the starting point to a first control point, and another from there to a second control point. ...
...And 13 more matches

Auto-placement in CSS Grid Layout - CSS: Cascading Style Sheets
ules that control what happens when you create a grid and do not place some or all of the child items. you can see auto-placement in action in the simplest of ways by creating a grid on a set of items. if you give the items no placement information they will position themselves on the grid, one in each grid cell. ...
... can see auto-placement in action in the simplest of ways by creating a grid on a set of items. if you give the items no placement information they will position themselves on the grid, one in each grid cell. ...
...ally 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. ...
...And 13 more matches

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

Box alignment in CSS Grid Layout - CSS: Cascading Style Sheets
the item within the grid area you have placed it. in the following example, i have four grid areas within my grid. ...
... my grid. ...
... by using align-self on a grid item. in this next example, i am using the align-self property, to demonstrate the different alignment values. the first area, is showing the default behavior of align-self, which is to stretch. the second item, has an align-self value of start, the third end and the fourth center. ...
...And 13 more matches

fx - SVG: Scalable Vector Graphics
the fx attribute defines the x-axis coordinate of the focal point for a radial gradient. ...
... the fx attribute defines the x-axis coordinate of the focal point for a radial gradient. ...
... the fx attribute defines the x-axis coordinate of the focal point for a radial gradient. ...
...And 13 more matches

fy - SVG: Scalable Vector Graphics
the fy attribute defines the y-axis coordinate of the focal point for a radial gradient. ...
... the fy attribute defines the y-axis coordinate of the focal point for a radial gradient. ...
... the fy attribute defines the y-axis coordinate of the focal point for a radial gradient. ...
...And 13 more matches

CSS property compatibility table for form controls - Learn web development
be careful when you use them. line-height this property is supported inconsistently across browsers and you should avoid it. text-decoration this property is not supported by opera on form widgets. text-overflow opera, safari, and ie9 do not support this property on ...
... border and background background partial[1] yes webkit browsers (mostly on mac osx and ios) use the native look & feel for the search fields. therefore, it's required to use -webkit-appearance:none to be able to apply this property to search fields. on windows 7, internet explorer 9 does not apply the border unless background:none is applied. ...
... box-shadow no partial[1] ie9 does not support this property. buttons see the button, submit, and reset input types and the <button> element. ...
...And 12 more matches

xlink:href - SVG: Scalable Vector Graphics
i. the exact meaning of that link depends on the context of each element using it. note: svg 2 removed the need for the xlink namespace, so instead of xlink:href you should use href. 22 elements are using this attribute: <a>, <altglyph>, <animate>, <animatecolor>, <animatemotion>, <animatetransform>, <color-profile>, <cursor>, <feimage>, <filter>, <font-face-uri>, <glyphref>, <image>, <lineargradient>, <mpath>, <pattern>, <radialgradient>, <script>, <set>, <textpath>, <tref>, and <use>} html, body, svg { height: 100%; } <svg viewbox="0 0 160 40" xmlns="http://www.w3.org/2000/svg"> <a xlink:href="https://developer.mozilla.org/"><text x="10" y="25">mdn web docs</text></a> </svg> a for <a>, xlink:href defines the location of the referenced object. value <iri> ...
...lyphref>, xlink:href defines to a <glyph> element in an svg document fragment. the referenced <glyph> is rendered as an alternate glyph. value <iri> default value none animatable no image for <image>, xlink:href defines the location of the referenced image. ...
...defines to a <glyph> element in an svg document fragment. the referenced <glyph> is rendered as an alternate glyph. value <iri> default value none animatable no image for <image>, xlink:href defines the location of the referenced image. ...
...And 12 more matches

Patterns - SVG: Scalable Vector Graphics
« previousnext » patterns patterns are arguably one of the more confusing fill types to use in svg. they're also very powerful, so they're worth talking about and getting at least a fundamental grasp on. like gradients, the <pattern> element should be put in the <defs> section of your svg file. ...
... « previousnext » patterns patterns are arguably one of the more confusing fill types to use in svg. they're also very powerful, so they're worth talking about and getting at least a fundamental grasp on. like gradients, the <pattern> element should be put in the <defs> section of your svg file. ...
...previousnext » patterns patterns are arguably one of the more confusing fill types to use in svg. they're also very powerful, so they're worth talking about and getting at least a fundamental grasp on. like gradients, the <pattern> element should be put in the <defs> section of your svg file. ...
...And 12 more matches

-ms-filter - Archive of obsolete content
pt"> let filterimg = document.queryselector('#filterfrom'); filterimg.addeventlistener('click', dofilter); function dofilter () { filterfrom.filters.item(0).apply(); // 12 is the dissolve filter. ...
...r('#filterfrom'); filterimg.addeventlistener('click', dofilter); function dofilter () { filterfrom.filters.item(0).apply(); // 12 is the dissolve filter. ...
... { filterfrom.filters.item(0).apply(); // 12 is the dissolve filter. filterfrom.filters.item(0).transition=12; imagefrom.style.visibility = "hidden"; filterto.style.visibility = ""; filterfrom.filters.item(0).play(14); } </script> </body> gradient progid:dximagetransform.microsoft.gradient( <properties> ) where <properties> = [ <enabled> | <endcolor> | <endcolorstr> | <gradienttype> | <startcolor> | <startcolorstr> ]# where <enabled> = 'enabled=' [ true | false ] <endcolor> = 'startcolor=' <color> <endcolorstr> = 'startcolorstr=' <color> <gradienttype> = 'gradienttype=' <integer> <startcolor> = 'startcolor=' <color> <startcolorstr> = 'startcolorstr=' <color> enabled default: true set to false to disable. endcolor the end color, supports only opaque colors in...
...And 11 more matches

3D collision detection - Game development
ntity they are wrapping is actually spherical, the wrapping is usually not a good fit (i.e. wrapping a person with a bounding sphere will cause a lot of false positives, whereas an aabb would be a better match). point vs. sphere to check whether a sphere contains a point we need to calculate the distance between the point and the sphere's center. ...
...ance between the point and the sphere's center. if this distance is smaller than or equal to the radius of the sphere, the point is inside the sphere. taking into account that the euclidean distance between two points a and b is (ax-bx)2)+(ay-by)2+(az-bz)\sqrt{(a_x - b_x) ^ 2) + (a_y - b_y)^2 + (a_z - b_z)} , our formula for point vs. ...
.... if this distance is smaller than or equal to the radius of the sphere, the point is inside the sphere. taking into account that the euclidean distance between two points a and b is (ax-bx)2)+(ay-by)2+(az-bz)\sqrt{(a_x - b_x) ^ 2) + (a_y - b_y)^2 + (a_z - b_z)} , our formula for point vs. ...
...And 11 more matches

Border-image generator - CSS: Cascading Style Sheets
und: url("https://mdn.mozillademos.org/files/5679/arrows.png") center left no-repeat; } .ui-input-slider-right { background: url("https://mdn.mozillademos.org/files/5679/arrows.png") center right no-repeat; } .ui-input-slider-name { width: 90px; padding: 0 10px 0 0; text-align: right; text-transform: lowercase; } .ui-input-slider-btn-set { width: 25px; background-color: #2c9fc9; border-radius: 5px; color: #fff; font-weight: bold; line-height: 14px; text-align: center; } .ui-input-slider-btn-set:hover { background-color: #379b4a; cursor: pointer; } /*************************************************************************************/ /*************************************************************************************/ /* * ui dropdown */ /* dropdown */ .ui-dropdown {...
...dropdown-list { left: -100%; top: 0; } .ui-dropdown[data-position='right'] .ui-dropdown-list { left: 100%; top: 0; } .ui-dropdown-list > div { width: 100%; height: 1.6em; margin: 0.3em 0; padding: 0.3em; line-height: 1em; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } .ui-dropdown-list > div:hover { background: #3490d2; color:#fff; border-radius: 2px; cursor: pointer; } /*************************************************************************************/ /*************************************************************************************/ /* * ui button */ /* checkbox */ .ui-checkbox { text-align: center; font-size: 16px; font-family: "segoe ui", arial, helvetica, sans-serif; line-height: 1.5em; color: #fff; -moz-us...
...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("https://mdn.mozillademos.org/files/5683/disabled.png"); background-position: center center; background-repeat: no-repeat; color: #fff; border-radius: 2px; font-weight: bold; float: left; } .ui-checkbox .text { padding-left: 34px; background-position: center left 10px; } .ui-checkbox .left { padding-right: 34px; padding-left: 1.666em; background-position: center right 10px; } .ui-checkbox > label:hover { cursor: pointer; } .ui-checkbox > input:checked + label { background-image: url("https://mdn.mozillademos.org/files/5681/chec...
...And 11 more matches

content - CSS: Cascading Style Sheets
the content css property replaces an element with a generated value. objects inserted using the content property are anonymous replaced elements. ...
...ues none the pseudo-element is not generated. normal computes to none for the ::before and ::after pseudo-elements. <string> specifies the "alt text" for the element. this value can be any number of text characters. non-latin characters must be encoded using their unicode escape sequences: for example, \000a9 represents the copyright symbol. <image> an <image>, denoted by the <url> or <gradient> data type, or part of the webpage, defined by the element() function, denoting the content to display. <counter>() the value of a css counter, generally a number. it can be displayed using either the counter() or counters() function. the counter() function has two forms: 'counter(name)' or 'counter(name, style)'. the generated text is the value of the innermost counter of the given name...
...)<image-set()> = image-set( <image-set-option># )<element()> = element( <id-selector> )<paint()> = paint( <ident>, <declaration-value>? )<cross-fade()> = c...
...And 11 more matches

cross-fade() - CSS: Cascading Style Sheets
syntax important: the specification and current implementations have different syntaxes. the specification syntax is explained first. ...
... syntax important: the specification and current implementations have different syntaxes. the specification syntax is explained first. ...
... if the images is missing. ...
...And 11 more matches

Bootstrapped extensions - Archive of obsolete content
while this makes creating extensions that add to the application's user interface relatively easy, it means that updating, installing, or disabling an extension requires an application restart. gecko 2.0 (firefox 4 / thunderbird 3.3 / seamonkey 2.1) introduces bootstrapped extensions. these are special extensions that, instead of using overlays to apply their user interface to the application, programmatically insert themselves into the application. this is done using a special script file that's included in the extension that contains functions the browser calls to command the extension to install, uninstall, start up, and shut down. ...
...rue</em:bootstrap> then you need to add a bootstrap.js file that contains the required functions; this should be alongside the install.rdf file in the extension's package. backward compatibility because older versions of firefox don't know about the bootstrap property or bootstrap.js file, it's not overly difficult to create an xpi that will work on both as a bootstrappable extension and as a traditional extension. create your extension as a bootstrappable extension, then add the traditional overlays as well. newer versions of firefox will use the bootstrap.js script, ignoring the components and overlays, while older versions will use the overlays. bootstrap entry points the bootstrap.js script should contain several specific functions, which are called by the browser to manage the exten...
...ed many times during the lifetime of the application. this is when your add-on should inject its ui, start up any tasks it may need running and so forth. void startup( data, reason ); parameters data a bootstrap data structure. reason one of the reason constants, indicating why the extension is being started up. this will be one of app_startup, addon_disable, addon_install, addon_upgrade, or addon_downgrade. shutdown called when the extensidisableon needs to shut itself down, such as when the application is quitting or when the extension is about to be upgraded or disabled. any user interface that has been injected must be removed, tasks shut down, and objects disposed of. void shutdown( data, reason ); parameters data a bootstrap data structure. reason one of th...
...And 10 more matches

Enhanced Extension Installation - Archive of obsolete content
in different places on the user's disk - some vendors wish to keep all of their installed content within c:\program files\foo\ for example. there is no clean uninstall procedure, as the -install-global-extension flag was designed only as a means to install items for all user profiles, not as a means for third party installers to register their components. ...
... items that are installed must be visible in the extension manager user interface, even if the extension type is just an integration hook that has no meaningful ui presence. ...
...extensions-startup.manifest -all items this file contains a tab delimited set of lines, one per item. this is a list of all installed items, disabled or not, keyed first by install location name, then by guid. the following information is stored for each entry: the persistent descriptor of the path where the item lives. ...
...And 10 more matches

toolbarbutton - Archive of obsolete content
this should be one o...
...this should be one of the characters that appears in the label attribute f...
...this should be one of the characters that appears in the label attribute for the element.
...And 10 more matches

How to build custom form controls - Learn web development
if the content overflow...
... value in this context */ font-family : verdana, arial, sans-serif; box-sizing : border-box; /* we need extra room for the down arrow we will add */ padding : .1em 2.5em .2em .5em; width : 10em; /* 100px */ border : .2em solid #000; border-radius : .4em; box-shadow : 0 .1em .2em rgba(0,0,0,.45); /* the first declaration is for browsers that do not support linear gradients. */ background : #f0f0f0; background : linear-gradient(0deg, #e3e3e3, #fcfcfc 50%, #f0f0f0); } .select .value { /* because the value can be wider than our control, we have to make sure it will not change the control's width. if the content overflows, we display an ellipsis */ display : inline-block; width : 100%; overflow : hidden; white-space : nowrap; text-overflo...
...ss. ...
...And 10 more matches

Drawing graphics - Learn web development
strokestyle with paths as well as rectangles. a typical, simple path-drawing operation would look something like so: ctx.fillstyle = 'rgb(255, 0, 0)'; ctx.beginpath(); ctx.moveto(50, 50); // draw your path ctx.fill(); drawing lines let's draw an equilateral triangle on the canvas. first of all, add the following helper function to the bottom of your code. ...
...ctx.fillstyle = 'rgb(255, 0, 0)'; ctx.beginpath(); ctx.moveto(50, 50); // draw your path ctx.fill(); drawing lines let's draw an equilateral triangle on the canvas. first of all, add the following helper function to the bottom of your code. this converts degree values to radians, which is useful because whenever you need to provide an angle value in javascript, it will nearly always be in radians, but humans usually think in degrees. function degtorad(degrees) { return degrees * math.pi / 180; }; next, start off your path by adding the following below your previous addition; here we set a color for our triangle, start drawing a path, and then move the pen to (50, 50) without drawing anything. that's where we'll start drawing our triangle. ctx.fillstyle = 'rgb(255, 0, 0)'...
...owing below your previous addition; here we set a color for our triangle, start drawing a path, and then move the pen to (50, 50) without drawing anything. that's where we'll start drawing our triangle. ctx.fillstyle = 'rgb(255, 0, 0)'; ctx.beginpath(); ctx.moveto(50, 50); now add the following lines at the bottom of your script: ctx.lineto(150, 50); let triheight = 50 * math.tan(degtorad(60)); ctx.lineto(100, 50+triheight); ctx.lineto(50, 50); ctx.fill(); let's run through this in order: first we draw a line across to (150, 50) — our path now goes 100 pixels to the right along the x axis. second, we work out the height of our equalateral triangle, using a bit of simple trigonometry. basically, we are drawing the triangle pointing downwards. the angles in an equalateral...
...And 10 more matches

Drawing shapes with canvas - Web APIs
ple you'll notice the difference between the filled and stroked triangle. this is, as mentioned above, because shapes are automatically closed when a path is filled, but not when they are stroked. if we left out the closepath() for the stroked triangle, only two lines would have been drawn, not a complete triangle. arcs to draw arcs or circles, we use the arc() or arcto() methods. arc(x, y, radius, startangle, endangle, anticlockwise) draws an arc which is centered at (x, y) position with radius r starting at startangle and ending at endangle going in the given direction indicated by anticlockwise (defaulting to clockwise). arcto(x1, y1, x2, y2, radius) draws an arc with the given control points and radius, connected to the previous point by a straight line. let's have a more detai...
...dangle going in the given direction indicated by anticlockwise (defaulting to clockwise). arcto(x1, y1, x2, y2, radius) draws an arc with the given control points and radius, connected to the previous point by a straight line. let's have a more detailed look at the arc method, which takes six parameters: x and y are the coordinates of the center of the circle on which the arc should be drawn. radius is self-explanatory. the startangle and endangle parameters define the start and end points of the arc in radians, along the curve of the circle. these are measured from the x axis. the anticlockwise parameter is a boolean value which, when true, draws the arc anticlockwise; otherwise, the arc is drawn clockwise. note: angles in the arc function are measured in radians, not degrees. to conve...
... the following example is a little more complex than the ones we've seen above. it draws 12 different arcs all with different angles and fills. the two for loops are for looping through the rows and columns of arcs. ...
...And 10 more matches

parseInt() - JavaScript
the parseint() function parses a string argument and returns an integer of the specified radix (the base in mathematical numeral systems). 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 parseint(string [, radix]) parameters string the value to parse. if this argument is not a string, then it is converted to one using the tostring abstract operation. leading whitespace in this argument is ignored. radix optional an integer between 2 and 36 that represents the radix (the base in mathematical numeral systems) of the string. be careful—this does not default to 10! the description below explains in mo...
...alue to parse. if this argument is not a string, then it is converted to one using the tostring abstract operation. leading whitespace in this argument is ignored. radix optional an integer between 2 and 36 that represents the radix (the base in mathematical numeral systems) of the string. be careful—this does not default to 10! the description below explains in more detail what happens when radix is not provided. return value an integer parsed from the given string. or nan when the radix is smaller than 2 or bigger than 36, or the first non-whitespace character cannot be converted to a number. description the parseint function converts its first argument to a string, parses that string, then returns an integer or nan. if not nan, the return value will be the integer that is ...
...from the given string. or nan when the radix is smaller than 2 or bigger than 36, or the first non-whitespace character cannot be converted to a number. description the parseint function converts its first argument to a string, parses that string, then returns an integer or nan. if not nan, the return value will be the integer that is the first argument taken as a number in the specified radix. (for example, a radix of 10 converts from a decimal number, 8 converts from octal, 16 from hexadecimal, and so on.) for radices above 10, letters of the english alphabet indicate numerals greater than 9. for example, for hexadecimal numbers (base 16), a through f are used. ...
...And 10 more matches

Backgrounds and borders - Learn web development
prerequisites: basic computer literacy, basic software installed, basic knowledge of working with files, html basics (study introduction to html), and an idea of how css works (study css first steps.) objective: to learn how to style the background and border of boxes. ...
... to learn how to style the background and border of boxes. styling backgrounds in css the css background property is a shorthand for a number of background longhand properties that we will meet in this lesson. if you discover a complex background property in a stylesheet, it might seem a little hard to understand as so many values can be passed in at once. .box { background: linear-gradient(105deg, rgba(255,255,255,.2) 39%, rgba(51,56,57,1) 96%) center center / 400px 200px no-repeat, url(big-star.png) center no-repeat, rebeccapurple; } we'll return to how the shorthand works later in the tutorial, but first let's have a look at the different things you can do with backgrounds in css, by looking at the individual background properties. background colors the background-colo...
... right: .box { background-image: url(star.png); background-repeat: no-repeat; background-position: top 20px right 10px; } use the example below to play around with these values and move the star around inside the box. note: background-position is a shorthand for background-position-x and background-position-y, which allow you to set the different axis position values individually. ...
...And 9 more matches

Advanced form styling - Learn web development
isites: basic computer literacy, and a basic understanding of html and css. objective: to understand what parts of forms are hard to style, and why; to learn what can be done to customize them. to recap what we said in the previous article, we have: the bad: some elements are more difficult to style, requiring more complex css or some more specific tricks: checkboxes and radio buttons <input type="search"> the ugly: some elements can't be styled thoroughly using css. these include: elements involved in creating dropdown widgets, including <select>, <option>, <optgroup> and <datalist>. <input type="color"> date-related controls such as <input type="datetime-local"> <input type="range"> <input type="file"> <progress> and <meter> let's first talk about the ...
...f using css. for example, let's take the following controls: <form> <p> <label for="search">search: </label> <input id="search" name="search" type="search"> </p> <p> <label for="text">text: </label> <input id="text" name="text" type="text"> </p> <p> <label for="date">date: </label> <input id="date" name="date" type="datetime-local"> </p> <p> <label for="radio">radio: </label> <input id="radio" name="radio" type="radio"> </p> <p> <label for="checkbox">checkbox: </label> <input id="checkbox" name="checkbox" type="checkbox"> </p> <p><input type="submit" value="submit"></p> <p><input type="button" value="button"></p> </form> applying the following css to them removes system-level styling. input { -webkit-appearance: none; app...
...g against such an eventuality. the following live example shows you what they look like in your system — default on the left, and with the above css applied on the right (find it here also if you want to test it on other systems). in most cases, the effect is to remove the stylized border, which makes css styling a bit easier, but isn't really essential. in a couple of cases — search and radio buttons/checkboxes, it becomes way more useful. we'll look at those now. taming search boxes <input type="search"> is basically just a text input, so why is appearance: none; useful here? the answer is that in chromium-based browsers on macos, search boxes have some styling restrictions — you can't adjust their height or font-size freely, for example. this is because non-macos chrome browse...
...And 9 more matches

nsIMsgHeaderParser
/mime/public/nsimsgheaderparser.idlscriptable ??? add brief description of interface ??? ...
... description of interface ??? ...
...in gecko 1.9 (firefox 3) to create an instance, use: var msgheaderparser = components.classes["@mozilla.org/messenger/headerparser;1"] .createinstance(components.interfaces.nsimsgheaderparser); method overview string extractheaderaddressmailboxes(in string line); void extractheaderaddressname(in string line, out string name); void extractheaderaddressnames(in string line, out string usernames); astring makefulladdress(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 pruin...
...And 9 more matches

CSS grids, logical values, and writing modes - CSS: Cascading Style Sheets
nd the world. again, for full details of these see jen’s article. as a simple example, i have two paragraphs below. the first uses the default horizontal-tb, and the second uses vertical-rl. in the mode text still runs left to right, however the direction of the text is vertical - inline text now runs down the page, from top to bottom. ...
...nd two row tracks. this means there are three tracks running down the block axis. in default writing mode, grid auto-places items starting at the top left, moving along to the right, filling up the three cells on the inline axis. ...
... grid auto-places items starting at the top left, moving along to the right, filling up the three cells on the inline axis. ...
...And 9 more matches

box-shadow - CSS: Cascading Style Sheets
the box-shadow css property adds shadow effects around an element's frame. you can set multiple effects separated by commas. a box shadow is described by x and y offsets relative to the element, blur and spread radius, and color. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. the box-shadow property enables you to cast a drop shadow from the frame of almost any element. if a border-radius is specified on the element with a box shadow, the box shadow takes on the same rounded corners. the z-ordering of multiple box shadows is the same as multiple text shadows (the first specified shadow is on top). box-shadow gene...
...hadow, the box shadow takes on the same rounded corners. the z-ordering of multiple box shadows is the same as multiple text shadows (the first specified shadow is on top). box-shadow generator is an interactive tool allowing you to generate a box-shadow. ...
...le box shadows is the same as multiple text shadows (the first specified shadow is on top). box-shadow generator is an interactive tool allowing you to generate a box-shadow. ...
...And 9 more matches

font - CSS: Cascading Style Sheets
or default value (if no parent element present). set the font family to sans-serif */ p { font: 80% sans-serif } /* set the font weight to bold, the font-style to italic, the font size to large, and the font family to serif. ...
...he font family to serif. */ p { font: bold italic large serif } /* use the same font as the status bar of the window */ p { font: status-bar } live sample html <p> change the radio buttons below to see the generated shorthand and it's effect. ...
... html <p> change the radio buttons below to see the generated shorthand and it's effect. ...
...And 9 more matches

cx - SVG: Scalable Vector Graphics
the cx attribute define the x-axis coordinate of a center point. three elements are using this attribute: <circle>, <ellipse>, and <radialgradient> html,body,svg { height:100% } <svg viewbox="0 0 300 100" xmlns="http://www.w3.org/2000/svg"> <radialgradient cx="25%" id="mygradient"> <stop offset="0" stop-color="white" /> <stop offset="100%" stop-color="black" /> </radialgradient> <circle cx="50" cy="50" r="45"/> <ellipse cx="150" cy="50" rx="45" ry="25" /> <rect x="205" y="5" width="90" height="90" fill="url(#mygradient)" /> </svg> circle for <circle>, cx defines the x-axis coordinate of the center of the shape. value <length-percentage> default value 0 animatable yes note: starting with svg2 cx, is a geometry proper...
... geometry property, meaning this attribute can also be used as css property for circles. ellipse for <ellipse>, cx defines the x-axis coordinate of the center of the shape. value <length-percentage> default value 0 animatable yes note: starting with svg2 cx, is a geometry property, meaning this attribute can also be used as css property for ellipses. ...
...ry property, meaning this attribute can also be used as css property for circles. ellipse for <ellipse>, cx defines the x-axis coordinate of the center of the shape. value <length-percentage> default value 0 animatable yes note: starting with svg2 cx, is a geometry property, meaning this attribute can also be used as css property for ellipses. ...
...And 9 more matches

cy - SVG: Scalable Vector Graphics
the cy attribute define the y-axis coordinate of a center point. three elements are using this attribute: <circle>, <ellipse>, and <radialgradient> html,body,svg { height:100% } <svg viewbox="0 0 100 300" xmlns="http://www.w3.org/2000/svg"> <radialgradient cy="25%" id="mygradient"> <stop offset="0" stop-color="white" /> <stop offset="100%" stop-color="black" /> </radialgradient> <circle cy="50" cx="50" r="45"/> <ellipse cy="150" cx="50" rx="45" ry="25" /> <rect x="5" y="205" width="90" height="90" fill="url(#mygradient)" /> </svg> circle for <circle>, cy defines the y-axis coordinate of the center of the shape. value <length> | <percentage> default value 0 animatable yes note: starting with svg2, cy is a geometry ...
...try property meaning this attribute can also be used as a css property for circles. ellipse for <ellipse>, cy defines the y-axis coordinate of the center of the shape. value <length> | <percentage> default value 0 animatable yes note: starting with svg2, cy is a geometry property meaning this attribute can also be used as a css property for ellipses. ...
...perty meaning this attribute can also be used as a css property for circles. ellipse for <ellipse>, cy defines the y-axis coordinate of the center of the shape. value <length> | <percentage> default value 0 animatable yes note: starting with svg2, cy is a geometry property meaning this attribute can also be used as a css property for ellipses. ...
...And 9 more matches

Index - MDN Web Docs Glossary: Definitions of Web-related terms
nt of time. it is usually measured in multiples of bits-per-second (bps), for example megabits-per-second (mbps) or gigabits-per-second (gbps). 27 base64 advanced, base64, javascript, typed arrays, uri, url, unicode problem, atob(), btoa() base64 is a group of similar binary-to-text encoding schemes that represent binary data in an ascii string format by translating it into a radix-64 representation. the term base64 originates from a specific mime content transfer encoding. 28 baseline css, glossary, svg, alignment, typography the baseline is a term used in european and west asian typography meaning an imaginary line upon which the characters of a font rest. 29 bidi accessibility, glossary bidi (bidirectional) refers to a document...
...plication security project, xss was the seventh most common web app vulnerability in 2017. 96 cryptanalysis cryptography, glossary, privacy, security cryptanalysis is the branch of cryptography that studies how to break codes and cryptosystems. cryptanalysis creates techniques to break ciphers, in particular by methods more efficient than a brute-force search. in addition to traditional methods like frequency 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 transform...
...enefits of datagram protocols, too; in particular, the lower overhead and reduced latency. 104 dtmf (dual-tone multi-frequency signaling) dtmf, glossary, webrtc dual-tone multi-frequency (dtmf) signaling is a system by which audible tones are used to represent buttons being pressed on a keypad. frequently referred to in the united states as "touch tone" (after the touch-tone trademark used when the transition from pulse dialing to dtmf began), dtmf makes it possible to signal the digits 0-9 as well as the letters "a" through "d" and the symbols "#" and "*". few telephone keypads include the letters, which are typically used for control signaling by the telephone network. 105 data structure codingscripting, data structure, glossary data structure is a ...
...And 8 more matches

Basic native form controls - Learn web development
html. objective: to understand in detail the original set of native form widgets available in browsers for collecting data, and how to implement them using html. you've already met some form elements, including <form>, <fieldset>, <legend>, <textarea>, <label>, <button>, and <input>. this article covers: the common input types button, checkbox, file, hidden, image, password, radio, reset, submit, and text. some of the attributes that are common to all form controls. note: the features discussed in this article are supported in all browsers, which is not the case for all form controls. we cover newer form controls added in html5 in the next two articles. if you want a more advanced reference, you should consult our html forms element reference, and in particular our e...
...x). 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 widgets including single line text fields, time and date controls, controls without text input like checkboxes, radio buttons, and color pickers, and buttons. single line text fields a single line text field is created using an <input> element whose type attribute value is set to text, or by omitting the type attribute altogether (text is the default value). the value text for this attribute is also the fallback value if the value you specify for the type attribute is unknown by the browser (for example if...
...ame="timestamp" value="1286705410"> if you create such an element, it's required to set its name and value attributes. the value can be dynamically set via javascript. the hidden input type should not have an associated label. other text input types, like search, url, and tel, were added with html5. those will be covered in the next tutorial, html5 input types. checkable items: checkboxes and radio buttons checkable items are controls whose state you can change by clicking on them or their associated labels. there are two kinds of checkable item: the check box and the radio button. both use the checked attribute to indicate whether the widget is checked by default or not. it's worth noting that these widgets do not behave exactly like other form widgets. for most form widgets, once the ...
...And 8 more matches

Strategies for carrying out testing - Learn web development
ny, and new ones appear all the time. instead, you should try to make sure your site works on the most important target browsers and devices, and then code defensively to give your site the widest support reach it can be expected to have. ...
...he site will be able to downgrade to something less exciting that still provides an acceptable user experience — the core information is still accessible, for example, even if it doesn't look quite as nice. the aim is to build up a chart of browsers/devices you can refer to as you test. you can make this as simple or as complex as you like — for example a common approach is to have multiple grades of support level, something like: a grade: common/modern browsers — known to be capable. test thoroughly and provide full support. b grade: older/less capable browsers — known not to be capable. test, and provide a more basic experience that gives full access to core information and services. c grade: rare/unknown browsers — don't test, but assume they are capable. serve the full sit...
... educated guesses you could call these "assumptions", or "gut feelings". this is not an accurate, scientific approach, but as someone who has experience with the web industry you'll have a pretty good idea of at least some of the browsers you should test. ...
...And 8 more matches

Advanced animations - Web APIs
t ball onto the canvas. the following code will set us up. <canvas id="canvas" width="600" height="300"></canvas> as usual, we need a drawing context first. to draw the ball, we will create a ball object which contains properties and a draw() method to paint it on the canvas. var canvas = document.getelementbyid('canvas'); var ctx = canvas.getcontext('2d'); var ball = { x: 100, y: 100, radius: 25, color: 'blue', draw: function() { ctx.beginpath(); ctx.arc(this.x, this.y, this.radius, 0, math.pi * 2, true); ctx.closepath(); ctx.fillstyle = this.color; ctx.fill(); } }; ball.draw(); nothing special here, the ball is actually a simple circle and gets drawn with the help of the arc() method. adding velocity now that we have a ball, we are ready to add a bas...
... last chapter of this tutorial. again, window.requestanimationframe() helps us to control the animation. the ball gets moving by adding a velocity vector to the position. for each frame, we also clear the canvas to remove old circles from prior frames. ...
... the ball gets moving by adding a velocity vector to the position. for each frame, we also clear the canvas to remove old circles from prior frames. ...
...And 8 more matches

background-image - CSS: Cascading Style Sheets
mstances, web developers should always specify a background-color. if the images cannot be loaded—for instance, when the network is down—the background color will be used as a fallback. syntax each background image is specified either as the keyword none or as an <image> value. to specify multiple background images, supply multiple values, separated by a comma: background-image: linear-gradient(to bottom, rgba(255,255,0,0.5), rgba(0,0,255,0.5)), url('https://mdn.mozillademos.org/files/7693/catfront.png'); values none is a keyword denoting the absence of images. <image> is an <image> denoting the image to display. there can be several of them, separated by commas, as multiple backgrounds are supported. accessibility concerns browsers do not provide any special information...
...1.1 | w3c understanding wcag 2.0 formal definition initial valuenoneapplies toall elements. ...
...[ <image-src>? , <color>? ]! ...
...And 8 more matches

<basic-shape> - CSS: Cascading Style Sheets
reference box, with the x-axis running to the right and the y-axis running downwards. all the lengths expressed in percentages are resolved from the used dimensions of the reference box. shape functions the following shapes are supported. all <basic-shape> values use functional notation and are defined here using the value definition syntax. ...
...ound <border-radius>]? ...
...arguments are supplied they represent the top, right, bottom and left offsets from the reference box inward that define the positions of the edges of the inset rectangle. these arguments follow the syntax of the margin shorthand, that let you set all four insets with one, two or four values. the optional <border-radius> argument(s) define rounded corners for the inset rectangle using the border-radius shorthand syntax. a pair of insets in either dimension that add up to more than the used dimension (such as left and right insets of 75% apiece) define a shape enclosing no area. for this specification, this results in an empty float area. circle() circle( [<shape-radius>]? [at <position>]? ) the <shape-radius> argument represents r, the radius of the circle. negative values are inva...
...And 8 more matches

border-image-source - CSS: Cascading Style Sheets
eractive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. the border-image-slice property is used to divide the source image into regions, which are then dynamically applied to the final border image. syntax /* keyword value */ border-image-source: none; /* <image> values */ border-image-source: url(image.jpg); border-image-source: linear-gradient(to top, red, yellow); /* global values */ border-image-source: inherit; border-image-source: initial; border-image-source: unset; values none no border image is used. the appearance defined by border-style is displayed instead. <image> image reference to use for the border. formal definition initial valuenoneapplies toall elements, except internal table elements when border-collap...
...use for the border. formal definition initial valuenoneapplies toall elements, except internal table elements when border-collapse is collapse. ...
...[ <image-src>? , <color>? ]! ...
...And 8 more matches

mask-border-source - CSS: Cascading Style Sheets
the mask-border-source css property sets the source image used to create an element's mask border. the mask-border-slice property is used to divide the source image into regions, which are then dynamically applied to the final mask border. syntax /* keyword value */ mask-border-source: none; /* <image> values */ mask-border-source: url(image.jpg); mask-border-source: linear-gradient(to top, red, yellow); /* global values */ mask-border-source: inherit; mask-border-source: initial; mask-border-source: unset; values none no mask border is used. <image> image reference to use for the mask border. formal definition initial valuenoneapplies toall elements; in svg, it applies to container elements excluding the defs element and all graphics elementsinheritednocomputed valueas speci...
...for the mask border. ...
...[ <image-src>? , <color>? ]! ...
...And 8 more matches

fr - SVG: Scalable Vector Graphics
the fr attribute defines the radius of the focal point for the radial gradient. ...
... the fr attribute defines the radius of the focal point for the radial gradient. ...
... the fr attribute defines the radius of the focal point for the radial gradient. ...
...And 8 more matches

Accessibility/XUL Accessibility Reference - Archive of obsolete content
see popupset popupset be careful regarding keyboard access of popups. i don't see a means of accessing a popup brought up via the popup attribute. using context="popupid" allows access via shift+f10 on windows and linux. ...
...t popupset be careful regarding keyboard access of popups. i don't see a means of accessing a popup brought up via the popup attribute. using context="popupid" allows access via shift+f10 on windows and linux. ...
... be careful regarding keyboard access of popups. i don't see a means of accessing a popup brought up via the popup attribute. using context="popupid" allows access via shift+f10 on windows and linux. ...
...And 7 more matches

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

Introduction to CSS layout - Learn web development
allest item, because the initial value of the align-items property set on their parent is stretch. this means that the items stretch to the height of the flex container, which in this case is defined by the tallest item. the items all line up at the start of the container, leaving any extra space at the end of the row. flexbox example 1 * {box-sizing: border-box;} .wrapper > div { border-radius: 5px; background-color: rgb(207,232,220); padding: 1em; } .wrapper { display: flex; } <div class="wrapper"> <div class="box1">one</div> <div class="box2">two</div> <div class="box3">three</div> </div> in addition to the above properties that can be applied to the flex container, there are properties that can be applied to the flex items. these properties, among ot...
...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. ...
...ining some row and column tracks on the parent using the grid-template-rows and grid-template-columns properties respectively. we've defined three columns each of 1fr and two rows of 100px. i don’t need to put any rules on the child elements; they are automatically placed into the cells our grid has created. ...
...And 7 more matches

How to structure a web form - Learn web development
ide. 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. ...
... 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. here is a little example: <form> <fieldset> <legend>fruit juice size</legend> <p> <input type="radio" name="size" id="size_1" value="small"> <label for="size_1">small</label> </p> <p> <input type="radio" name="size" id="size_2" value="medium"> <label for="size_2">medium</label> </p> <p> <input type="radio" name="size" id="size_3" value="large"> <label for="size_3">large</label> </p> </fieldset> </form> note: you can find this example in fieldset-legend.html (see it live also). when reading the above form, a screen reader will speak "fruit juice size small" f...
...rge</label> </p> </fieldset> </form> note: you can find this example in fieldset-legend.html (see it live also). when reading the above form, a screen reader will speak "fruit juice size small" for the first widget, "fruit juice size medium" for the second, and "fruit juice size large" for the third. the use case in this example is one of the most important. each time you have a set of radio buttons, you should nest them inside a <fieldset> element. there are other use cases, and in general the <fieldset> element can also be used to section a form. ideally, long forms should be spread across multiple pages, but if a form is getting long and must be on a single page, putting the different related sections inside different fieldsets improves usability. because of its influence over ...
...And 7 more matches

Index
d client and server applications. applications built with nss can support ssl v3, tls, pkcs #5, pkcs #7, pkcs #11, pkcs #12, s/mime, x.509 v3 certificates, and other security standards. 2 an overview of nss internals api, intermediate, intro, nss, tools a high-level overview to the internals of network security services (nss) software developed by the mozilla.org projects traditionally used its own implementation of security protocols and cryptographic algorithms, originally called netscape security services, nowadays called network security services (nss). nss is a library written in the c programming language. it's free and open source software, and many other software projects have decided to use it. in order to support multiple operating systems (os), it is based o...
...modules or print a single named module. -v check the validity of a certificate and its attributes. -w change the password to a key database. --merge merge a source database into the target database. this is used to merge legacy nss databases (cert8.db and key3.db) into the newer sqlite databases (cert9.db and key4.db). --upgrade-merge upgrade an old database and merge it into a new database. this is used to migrate legacy nss databases (cert8.db and key3.db) into the newer sqlite databases (cert9.db and key4.db). arguments option arguments modify an action and are lowercase. -a use ascii format or allow the use of ascii format for input or output. this...
...n rfc 5280. --extia add the inhibit any policy access extension to the certificate. x.509 certificate extensions are described in rfc 5280. --extskid add the subject key id extension to the certificate. x.509 certificate extensions are described in rfc 5280. --source-dir certdir identify the certificate database directory to upgrade. --source-prefix certdir give the prefix of the certificate and key databases to upgrade. --upgrade-id uniqueid give the unique id of the database to upgrade. --upgrade-token-name name set the name of the token to use while it is being upgraded. -@ pwfile give the name of a password file to use for the database being upgr...
...And 7 more matches

NSS tools : certutil
ficate and add it to a certificate database. -t reset the key database or token. -u list all available modules or print a single named module. -v check the validity of a certificate and its attributes. -w change the password to a key database. --merge merge two databases into one. --upgrade-merge upgrade an old database and merge it into a new database. this is used to migrate legacy nss databases (cert8.db and key3.db) into the newer sqlite databases (cert9.db and key4.db). arguments arguments modify a command option and are usually lower case, numbers, or symbols. -a use ascii format or allow the use of asci...
... --extia add the inhibit any policy access extension to the certificate. x.509 certificate extensions are described in rfc 5280. --extskid add the subject key id extension to the certificate. x.509 certificate extensions are described in rfc 5280. --source-dir certdir identify the certificate database directory to upgrade. --source-prefix certdir give the prefix of the certificate and key databases to upgrade. --upgrade-id uniqueid give the unique id of the database to upgrade. --upgrade-token-name name set the name of the token to use while it is being upgraded. -@ pwfile give the name of a password file to use for the data...
... usage and examples most of the command options in the examples listed here have more arguments available. the arguments included in these examples are the most common ones or are used to illustrate a specific scenario. ...
...And 7 more matches

Pointer Lock API - Web APIs
imationframe() call has previously been made, and if so, calls it again as required, and calls the canvasdraw() function that updates the canvas scene. a tracker is also set up to write out the x and y values to the screen, for reference. ...
... has previously been made, and if so, calls it again as required, and calls the canvasdraw() function that updates the canvas scene. a tracker is also set up to write out the x and y values to the screen, for reference. ...
...calls it again as required, and calls the canvasdraw() function that updates the canvas scene. a tracker is also set up to write out the x and y values to the screen, for reference. ...
...And 7 more matches

additive-symbols - CSS: Cascading Style Sheets
scriptor is cyclic, numeric, alphabetic, symbolic, or fixed, use the symbols descriptor instead of additive-symbols. ...
...[ <image-src>? , <color>? ]! ...
...[ <image-src>? , <color>? ]! ...
...And 7 more matches

negative - CSS: Cascading Style Sheets
ptor is specified for other systems that don't support negative counter values, then the descriptor is ignored. ...
...[ <image-src>? , <color>? ]! ...
...[ <image-src>? , <color>? ]! ...
...And 7 more matches

pad - CSS: Cascading Style Sheets
riptor is when you need your list to start numbering from 01 and go through 02, 03 and so on, instead of just 1, 2, 3... ...
...[ <image-src>? , <color>? ]! ...
...[ <image-src>? , <color>? ]! ...
...And 7 more matches

prefix - CSS: Cascading Style Sheets
ifies a <symbol> that is prepended to the marker representation. it may be a <string>, <image>, or <custom-ident>. ...
...[ <image-src>? , <color>? ]! ...
...[ <image-src>? , <color>? ]! ...
...And 7 more matches

suffix - CSS: Cascading Style Sheets
ol> that is appended to the marker representation. it may be a <string>, <image>, or <custom-ident>. formal definition related at-rule@counter-styleinitial value". ...
...[ <image-src>? , <color>? ]! ...
...[ <image-src>? , <color>? ]! ...
...And 7 more matches

symbols - CSS: Cascading Style Sheets
alphabetic, symbolic, or fixed. when the additive system is used, use the additive-symbols descriptor instead to specify the symbols. ...
...[ <image-src>? , <color>? ]! ...
...[ <image-src>? , <color>? ]! ...
...And 7 more matches

Grid template areas - CSS: Cascading Style Sheets
hole layout on the grid container. ...
...; grid-template-areas: "hd hd hd hd hd hd hd hd hd" "sd sd sd main main main main main main" "ft ft ft ft ft ft ft ft ft"; } * {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; border-radius: 5px; background-color: #fff4e6; max-width: 940px; margin: 0 auto; } .wrapper > div { border: 2px solid #ffa94d; border-radius: 5px; background-color: #ffd8a8; padding: 1em; color: #d9480f; } <div class="wrapper"> <div class="header">header</div> <div class="sidebar">sidebar</div> <div class="content">content</div> <div class="footer">footer</div> </div> using this method we do not need to specify anything at all on the individual grid items, everything happens on our grid containe...
...e a cell empty use the full stop character, '.'. if i want to only display the footer directly under the main content i would need to leave the three cells underneath the sidebar empty. ...
...And 7 more matches

appearance (-moz-appearance, -webkit-appearance) - CSS: Cascading Style Sheets
r in the newest browsers. ...
... searchfield div { color: black; -moz-appearance: searchfield; -webkit-appearance: searchfield; } <div>lorem</div> ...
... searchfield div { color: black; -moz-appearance: searchfield; -webkit-appearance: searchfield; } <div>lorem</div> firefox chrome safari edge slider-horizo...
...And 7 more matches

mask - CSS: Cascading Style Sheets
ngth-percentage> | auto ]{1,2} | cover | contain<repeat-style> = repeat-x | repeat-y | [ repeat | space | round | no-repeat ]{1,2}<geometry-box> = <shape-box> | fill-box | stroke-box | view-box<compositing-operator> = add | subtract | intersect | exclude<masking-mode> = alpha | luminance | match-sourcewhere <image> = <url> | <image()> | <image-set()> | <element()> | <paint()> | <cross-fade()> | <gradient><mask-source> = <url><length-percentage> = <length> | <percentage><shape-box> = <box> | margin-boxwhere <image()> = image( <image-tags>? [ <image-src>? , <color>? ]! )<image-set()> = image-set( <image-set-option># )<element()> = element( <id-selector> )<paint()> = paint( <ident>, <declaration-value>? )<cross-fade()> = cross-fade( <cf-mixing-image> , <cf-final-image>? )<gradient> = <linear-gra...
...gth-percentage> = <length> | <percentage><shape-box> = <box> | margin-boxwhere <image()> = image( <image-tags>? [ <image-src>? , <color>? ]! ...
...> = <length> | <percentage><shape-box> = <box> | margin-boxwhere <image()> = image( <image-tags>? [ <image-src>? , <color>? ]! ...
...And 7 more matches

Input Controls - Archive of obsolete content
buttons we created in the last section. if you open this window, you will see something much like that shown in the image. notice that the label and the text input field have now appeared in the window. the textbox is fully functional and you can type into it and select text. note that the control attribute has been used so that the textbox is selected when the label is clicked. checkboxes and radio buttons two additional elements are used for creating check boxes and radio buttons. they are variations of buttons. the checkbox element is used for options that can be enabled or disabled. radio buttons can be used for a similar purpose when there are a set of them and only one can be selected at once. you can use most of the same attributes on checkboxes and radio buttons as with buttons. ...
...when the user clicks the checkbox, it switches between checked and unchecked. ...
...when the user clicks the checkbox, it switches between checked and unchecked. the checked attribute can be used to indicate the default state. ...
...And 6 more matches

certutil
modules or print a single named module. -v check the validity of a certificate and its attributes. -w change the password to a key database. --merge merge a source database into the target database. this is used to merge legacy nss databases (cert8.db and key3.db) into the newer sqlite databases (cert9.db and key4.db). --upgrade-merge upgrade an old database and merge it into a new database. this is used to migrate legacy nss databases (cert8.db and key3.db) into the newer sqlite databases (cert9.db and key4.db). arguments option arguments modify an action and are lowercase. -a use ascii format or allow the use of ascii format for input or output. this...
...n rfc 5280. --extia add the inhibit any policy access extension to the certificate. x.509 certificate extensions are described in rfc 5280. --extskid add the subject key id extension to the certificate. x.509 certificate extensions are described in rfc 5280. --source-dir certdir identify the certificate database directory to upgrade. --source-prefix certdir give the prefix of the certificate and key databases to upgrade. --upgrade-id uniqueid give the unique id of the database to upgrade. --upgrade-token-name name set the name of the token to use while it is being upgraded. -@ pwfile give the name of a password file to use for the database being upgr...
...is no external token used, the default value is internal. certutil -t -d [sql:]directory -h token-name -0 security-officer-password many networks have dedicated personnel who handle changes to security tokens (the security officer). this person must supply the password to access the specified token. ...
...And 6 more matches

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

y1 - SVG: Scalable Vector Graphics
the y1 attribute is used to specify the first y-coordinate for drawing an svg element that requires more than one coordinate. elements that only need one coordinate use the y attribute instead. two elements are using this attribute: <line>, and <lineargradient> html,body,svg { height:100% } <svg viewbox="0 0 10 10" xmlns="http://www.w3.org/2000/svg"> <line x1="1" x2="9" y1="1" y2="5" stroke="red" /> <line x1="1" x2="9" y1="5" y2="5" stroke="green" /> <line x1="1" x2="9" y1="9" y2="5" stroke="blue" /> </svg> line for <line>, y1 defines the y coordinate of the starting point of the line. value <length> | <percentage> default value 0 animatable yes example html,body,svg { height:100% } <svg viewbox="0 0 10 10" xmlns="http://www.w3...
...of the line. ...
... value <length> | <percentage> default value 0 animatable yes example html,body,svg { height:100% } <svg viewbox="0 0 10 10" xmlns="http://www.w3.org/2000/svg"> <line x1="1" x2="9" y1="1" y2="5" stroke="red" /> <line x1="1" x2="9" y1="5" y2="5" stroke="green" /> <line x1="1" x2="9" y1="9" y2="5" stroke="blue" /> </svg> lineargradient for <lineargradient>, y1 defines the y coordinate of the starting point of the gradient vector used to map the gradient stop values. the exact behavior of this attribute is influenced by the gradientunits attributs value <length> | <percentage> default value 0% animatable yes example html,body,svg { height:100% } <svg viewbox="0 0 20 10" xmlns="http://www.w3.org/20...
...And 6 more matches

y2 - SVG: Scalable Vector Graphics
the y2 attribute is used to specify the second y-coordinate for drawing an svg element that requires more than one coordinate. elements that only need one coordinate use the y attribute instead. two elements are using this attribute: <line>, and <lineargradient> html,body,svg { height:100% } <svg viewbox="0 0 10 10" xmlns="http://www.w3.org/2000/svg"> <line x1="1" x2="9" y1="5" y2="1" stroke="red" /> <line x1="1" x2="9" y1="5" y2="5" stroke="green" /> <line x1="1" x2="9" y1="5" y2="9" stroke="blue" /> </svg> line for <line>, y2 defines the y coordinate of the ending point of the line. value <length> | <percentage> default value 0 animatable yes example html,body,svg { height:100% } <svg viewbox="0 0 10 10" xmlns="http://www.
...of the line. ...
... value <length> | <percentage> default value 0 animatable yes example html,body,svg { height:100% } <svg viewbox="0 0 10 10" xmlns="http://www.w3.org/2000/svg"> <line x1="1" x2="9" y1="5" y2="1" stroke="red" /> <line x1="1" x2="9" y1="5" y2="5" stroke="green" /> <line x1="1" x2="9" y1="5" y2="9" stroke="blue" /> </svg> lineargradient for <lineargradient>, y2 defines the y coordinate of the ending point of the gradient vector used to map the gradient stop values. the exact behavior of this attribute is influenced by the gradientunits attributs value <length> | <percentage> default value 0% animatable yes example html,body,svg { height:100% } <svg viewbox="0 0 20 10" xmlns="http://www.w3.org/2000...
...And 6 more matches

Chapter 3: Introduction to XUL—How to build a more intuitive UI - Archive of obsolete content
om'); function handlecommandevent(aevent) { alert('ok'); item.removeeventlistener('command', handlecommandevent, false); item.parentnode.removechild(item); } item.addeventlistener('command', handlecommandevent, false); listing 11: additions and deletions using a dynamic event listener special menu items much like input elements in html, menuitem elements can operate like checkboxes and radio buttons by setting their type attributes. checkbox adding type="checkbox" to a menuitem element will check that when it is selected, and uncheck it if it is selected again. for an example of menu items with checkboxes, see the view menu in firefox, with items to show or hide the toolbar and sidebar. when one has been checked, then the checked="true" attribute is set. radio button assigning ...
...tons by setting their type attributes. checkbox adding type="checkbox" to a menuitem element will check that when it is selected, and uncheck it if it is selected again. for an example of menu items with checkboxes, see the view menu in firefox, with items to show or hide the toolbar and sidebar. when one has been checked, then the checked="true" attribute is set. radio button assigning type="radio" to multiple menuitem elements and setting them to have the same name attribute groups them so that selecting one deselects all the others, much like radio buttons in html. for an example of this kind of menu item, see the character encoding submenu of the view menu in firefox. the selected radio button has the selected="true" attribute set. contextual menus the context attribute is used to d...
... width of the box using the css max-width property. checkboxes the checkbox shown in figure 11 was marked up using the checkbox element. when it is in its checked state, its checked attribute is set to true. ...
...And 5 more matches

2D collision detection - Game development
this.color("green"); } else { // no collision this.color("blue"); } }); note: another example without canvas or external libraries. circle collision another simple shape for collision detection is between two circles. this algorithm works by taking the centre points of the two circles and ensuring the distance between the centre points are less than the two radii added together. playable code <div id="cr-stage"></div> <p>move the circle with arrow keys. green means collision, blue means no collision.</p> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/crafty/0.5.4/crafty-min.js"></script> #cr-stage { position: static !important; height: 200px !important; } crafty.init(200, 200); var dim1 = {x: 5, y: 5} var dim2...
...> <p>move the circle with arrow keys. ...
...w keys. ...
...And 5 more matches

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

Building the WebLock UI
ng just enough widgetry to lock and unlock the browser and to add new sites to the list. the entire xul file for the web lock manager dialog is defined in weblock.xul below. the locking ui once you have the basic xul wrapper set up for your interface, the next step is to define that part of the interface that locks and unlocks the browser. ...
... lock manager dialog is defined in weblock.xul below. the locking ui once you have the basic xul wrapper set up for your interface, the next step is to define that part of the interface that locks and unlocks the browser. one of the most efficient ways to expose this is to use radio buttons, which allow the user to toggle a particulart state, as the figure above illustrates. in xul individual <radio/> elements are contained within a parent element called <radiogroup/>. ...
...he basic xul wrapper set up for your interface, the next step is to define that part of the interface that locks and unlocks the browser. one of the most efficient ways to expose this is to use radio buttons, which allow the user to toggle a particulart state, as the figure above illustrates. in xul individual <radio/> elements are contained within a parent element called <radiogroup/>. grouping radio elements together creates the toggling ui by requiring that one or another of the elements be selected, but not both. ...
...And 5 more matches

Movement, orientation, and motion: A WebXR example - Web APIs
= 0; this is followed by a set of constants, mostly to contain various vectors and matrices used while rendering the scene. const viewerstartposition = vec3.fromvalues(0, 0, -10); const viewerstartorientation = vec3.fromvalues(0, 0, 1.0); const cubeorientation = vec3.create(); const cubematrix = mat4.create(); const mousematrix = mat4.create(); const inverseorientation = quat.create(); const radians_per_degree = math.pi / 180.0; the first two—viewerstartposition and viewerstartorientation—indicate where the viewer will be placed relative to the center of the space, and the direction in which they'll initially be looking. cubeorientation will store the current orientation of the cube, while cubematrix and mousematrix are storage for matrices used during the rendering of the scene. i...
...he center of the space, and the direction in which they'll initially be looking. cubeorientation will store the current orientation of the cube, while cubematrix and mousematrix are storage for matrices used during the rendering of the scene. inverseorientation is a quaternion which will be used to represent the rotation to apply to the reference space for the object in the frame being rendered. radians_per_degreee is the value to multiply an angle in degrees by to convert the angle into radians. the last four variables declared are storage for references to the <div> elements into which we'll output the matrices when we want to show them to the user. logging errors a function called logglerror() is implemented to provide an easily customized way to output logging information for errors t...
... look for details on the webgl rendering parts of this example [view the code on github]. but here it begins with some code specific to this example, so we'll take a deeper look at that part. ...
...And 5 more matches

Basic form hints - Accessibility
when a screen reader user navigates a page, the screen reader will describe form controls. without a direct association between the control and its label, the screen reader has no way of knowing which label is the correct one. the example below shows a simple form with labels. note that each <input> element has an id, and each <label> element has a for attribute, indicating the id of the associated <input>. ...
.../li> </ul> </form> labeling with aria the html <label> element is appropriate for form-related elements, but many form controls are implemented as a dynamic javascript widget, using <div>s or <span>s. wai-aria, the accessible rich internet applications specification from the w3c's web accessibility initiative, provides the aria-labelledby attribute for these cases. ...
...i-aria, the accessible rich internet applications specification from the w3c's web accessibility initiative, provides the aria-labelledby attribute for these cases. the example below shows a radio button group implemented using an unordered list. note that on line 3, the <ul> element sets the aria-labelledby attribute to rg1_label, the id of the <h3> element on line 1, which is the label for the radio group. ...
...And 5 more matches

Animatable CSS properties - CSS: Cascading Style Sheets
certain css properties can be animated using css animations or css transitions. animation means that their values can be made to change gradually over a given amount of time. ...
... certain css properties can be animated using css animations or css transitions. animation means that their values can be made to change gradually over a given amount of time. ...
... certain css properties can be animated using css animations or css transitions. animation means that their values can be made to change gradually over a given amount of time. ...
...And 5 more matches

Mozilla CSS extensions - CSS: Cascading Style Sheets
b -moz-binding -moz-border-bottom-colors -moz-border-left-colors -moz-border-right-colors -moz-border-top-colors -moz-box-align -moz-box-direction -moz-box-flex -moz-box-ordinal-group -moz-box-orient -moz-box-pack c–i -moz-context-properties -moz-float-edge -moz-force-broken-image-icon -moz-image-region o -moz-orient -moz-osx-font-smoothing -moz-outline-radius -moz-outline-radius-bottomleft -moz-outline-radius-bottomright -moz-outline-radius-topleft -moz-outline-radius-topright overflow-clip-box overflow-clip-box-block overflow-clip-box-inline s–z -moz-stack-sizing :-moz-system-metric(images-in-menus) :-moz-system-metric(mac-graphite-theme) :-moz-system-metric(scrollbar-end-backward) :-moz-system-metric(scrollbar-end-forward)...
...-select values global values -moz-initial -moz-appearance button button-arrow-down button-arrow-next button-arrow-previous button-arrow-up button-bevel checkbox checkbox-container checkbox-label checkmenuitem dialog groupbox listbox menuarrow menucheckbox menuimage menuitem menuitemtext menulist menulist-button menulist-text menulist-textfield menupopup menuradio menuseparator -moz-mac-unified-toolbar -moz-win-borderless-glass -moz-win-browsertabbar-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 ...
...nified-toolbar -moz-win-borderless-glass -moz-win-browsertabbar-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 resizer resizerpanel 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 sp...
...And 5 more matches

Applying SVG effects to HTML content - SVG: Scalable Vector Graphics
nces to svg in external files must be to the same origin as the referencing document. using embedded svg to apply an svg effect using css styles, you first need to create the css style that references the svg to apply. <style>p { mask: url(#my-mask); }</style> in the above example, all paragraphs are masked by an svg <mask> with the id my-mask. ...
... need to create the css style that references the svg to apply. <style>p { mask: url(#my-mask); }</style> in the above example, all paragraphs are masked by an svg <mask> with the id my-mask. ...
...te the css style that references the svg to apply. <style>p { mask: url(#my-mask); }</style> in the above example, all paragraphs are masked by an svg <mask> with the id my-mask. ...
...And 5 more matches

x1 - SVG: Scalable Vector Graphics
the x1 attribute is used to specify the first x-coordinate for drawing an svg element that requires more than one coordinate. elements that only need one coordinate use the x attribute instead. two elements are using this attribute: <line>, and <lineargradient> html,body,svg { height:100% } <svg viewbox="0 0 10 10" xmlns="http://www.w3.org/2000/svg"> <line x1="1" x2="5" y1="1" y2="9" stroke="red" /> <line x1="5" x2="5" y1="1" y2="9" stroke="green" /> <line x1="9" x2="5" y1="1" y2="9" stroke="blue" /> </svg> line for <line>, x1 defines the x coordinate of the starting point of the line. value <length> | <percentage> default value 0 animatable yes example html,body,svg { height:100% } <svg viewbox="0 0 10 10" xmlns="http://www.w3...
...of the line. ...
... value <length> | <percentage> default value 0 animatable yes example html,body,svg { height:100% } <svg viewbox="0 0 10 10" xmlns="http://www.w3.org/2000/svg"> <line x1="1" x2="5" y1="1" y2="9" stroke="red" /> <line x1="5" x2="5" y1="1" y2="9" stroke="green" /> <line x1="9" x2="5" y1="1" y2="9" stroke="blue" /> </svg> lineargradient for <lineargradient>, x1 defines the x coordinate of the starting point of the gradient vector used to map the gradient stop values. the exact behavior of this attribute is influenced by the gradientunits attributs value <length> | <percentage> default value 0% animatable yes example html,body,svg { height:100% } <svg viewbox="0 0 20 10" xmlns="http://www.w3.org/2...
...And 5 more matches

x2 - SVG: Scalable Vector Graphics
the x2 attribute is used to specify the second x-coordinate for drawing an svg element that requires more than one coordinate. elements that only need one coordinate use the x attribute instead. two elements are using this attribute: <line>, and <lineargradient> html,body,svg { height:100% } <svg viewbox="0 0 10 10" xmlns="http://www.w3.org/2000/svg"> <line x1="5" x2="1" y1="1" y2="9" stroke="red" /> <line x1="5" x2="5" y1="1" y2="9" stroke="green" /> <line x1="5" x2="9" y1="1" y2="9" stroke="blue" /> </svg> line for <line>, x2 defines the x coordinate of the ending point of the line. value <length> | <percentage> default value 0 animatable yes example html,body,svg { height:100% } <svg viewbox="0 0 10 10" xmlns="http://www.w3.
...of the line. ...
... value <length> | <percentage> default value 0 animatable yes example html,body,svg { height:100% } <svg viewbox="0 0 10 10" xmlns="http://www.w3.org/2000/svg"> <line x1="5" x2="1" y1="1" y2="9" stroke="red" /> <line x1="5" x2="5" y1="1" y2="9" stroke="green" /> <line x1="5" x2="9" y1="1" y2="9" stroke="blue" /> </svg> lineargradient for <lineargradient>, x2 defines the x coordinate of the ending point of the gradient vector used to map the gradient stop values. the exact behavior of this attribute is influenced by the gradientunits attributs value <length> | <percentage> default value 100% animatable yes example html,body,svg { height:100% } <svg viewbox="0 0 20 10" xmlns="http://www.w3.org/2...
...And 5 more matches

Content type - SVG: Scalable Vector Graphics
svg makes use of a number of data types. this article lists these types along with their syntax and descriptions of what they're used for. angle <angle> angles are specified in one of two ways. when used in the value of a property in a stylesheet, an <angle> is defined as follows: angle ::= number (~"deg" | ~"grad" | ~"rad")? where deg indicates degrees, grad indicates grads and rad indicates radians. for properties defined in css2, an angle unit identifier must be provided. for angle values in svg-specific properties and their corresponding presentation attributes, the angle unit identifier is optional. if not provided, the angle value is assumed to be in degrees. in presentation attributes for all properties, whether defined in svg1.1 or in css2, the angle identifier, i...
...ir corresponding presentation attributes, the angle unit identifier is optional. if not provided, the angle value is assumed to be in degrees. in presentation attributes for all properties, whether defined in svg1.1 or in css2, the angle identifier, if specified, must be in lower case. when angles are used in an svg attribute, <angle> is instead defined as follows: angle ::= number ("deg" | "grad" | "rad")? the unit identifiers in such <angle> values must be in lower case. in the svg dom, <angle> values are represented using svgangle or svganimatedangle objects. anything <anything> the basic type <anything> is a sequence of zero or more characters. specifically: anything ::= char* where char is the production for a character, as defined in xml 1.0 , section 2.2. cloc...
...tional notation <funciri> is used. this is simply an iri delimited with a functional notation. note: for historical reasons, the delimiters are "url(" and ")", for compatibility with the css specifications. the funciri form is used in presentation attributes . svg makes extensive use of iri references, both absolute and relative, to other objects. ...
...And 5 more matches

Classes and Inheritance - Archive of obsolete content
a new class, circle, and inherit it from shape. since every circle is also a shape, the constructor for shape must be called every time we call the constructor for circle. since javascript does not have native support for inheritance, it doesn't do this automatically. instead, we need to call the constructor for shape explicitly. the resulting constructor looks as follows: function circle(x, y, radius) { if (!this) return new circle(x, y, radius); shape.call(this, x, y); this.radius = radius; } note that the constructor for shape is called as an ordinary function, and reuses the object created for the constructor call to circle. had we used a constructor call instead, the constructor for shape would have been applied to a different object than the constructor for circle. w...
...and reuses the object created for the constructor call to circle. had we used a constructor call instead, the constructor for shape would have been applied to a different object than the constructor for circle. we can now use the above constructor to create instances of the class circle: let circle = circle(2, 3, 5); circle instanceof circle; // => true circle.x; // => 2 circle.y; // => 3 circle.radius; // => 5 inheritance and prototypes there is a problem with the definition of circle in the previous section that we have glossed over thus far. consider the following: let circle = circle(2, 3, 5); circle.draw(); // => typeerror: circle.draw is not a function this is not quite right. the method draw is defined on instances of shape, so we definitely want it to be defined on instances of...
... of the method draw in shape with a more specialized one in circle. recall that javascript returns the first property it finds when walking the prototype chain of an object from the bottom up. consequently, overriding a method is as simple as providing a new definition on the prototype of the subclass: circle.prototype.draw = function (ctx) { ctx.beginpath(); ctx.arc(this.x, this.y, this.radius, 0, 2 * math.pi, false); ctx.fill(); }; with this definition in place, we get: let shape = shape(2, 3); shape.draw(); // error: not yet implemented let circle = circle(2, 3, 5); circle.draw(); // typeerror: ctx is not defined which is the behavior we were aiming for. classes in the add-on sdk we have shown how to emulate classical inheritance in javascript using construc...
...And 4 more matches

Advanced styling effects - Learn web development
(see the source code too). a simple box shadow let's look at a simple example to get things started. first, some html: <article class="simple"> <p><strong>warning</strong>: the thermostat on the cosmic transcender has reached a critical level.</p> </article> now the css: p { margin: 0; } article { max-width: 500px; padding: 10px; background-color: red; background-image: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,0.25)); } .simple { box-shadow: 5px 5px 5px rgba(0,0,0,0.7); } this gives us the following result: you'll see that we've got four items in the box-shadow property value: the first length value is the horizontal offset — the distance to the right the shadow is offset from the original box (or left, if the value is negative). the second length v...
...items in the box-shadow property value: the first length value is the horizontal offset — the distance to the right the shadow is offset from the original box (or left, if the value is negative). the second length value is the vertical offset — the distance downwards that the shadow is offset from the original box (or upwards, if the value is negative). the third length value is the blur radius — the amount of blurring applied to the shadow. the color value is the base color of the shadow. you can use any length and color units that would make sense to do so to define these values. multiple box shadows you can also specify multiple box shadows in a single box-shadow declaration, by separating them with commas: <article class="multiple"> <p><strong>warning</strong>: the the...
...multiple box shadows you can also specify multiple box shadows in a single box-shadow declaration, by separating them with commas: <article class="multiple"> <p><strong>warning</strong>: the thermostat on the cosmic transcender has reached a critical level.</p> </article> p { margin: 0; } article { max-width: 500px; padding: 10px; background-color: red; background-image: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,0.25)); } .multiple { box-shadow: 1px 1px 1px black, 2px 2px 1px black, 3px 3px 1px red, 4px 4px 1px red, 5px 5px 1px black, 6px 6px 1px black; } now we get this result: we've done something fun here by creating a raised box with multiple coloured layers, but you could use it in a...
...And 4 more matches

Client-side form validation - Learn web development
:invalid ui pseudo-class. add a required attribute to your input, as shown below. <form> <label for="choose">would you prefer a banana or cherry? (required)</label> <input id="choose" name="i_like" required> <button>submit</button> </form> note the css that is included in the example file: input:invalid { border: 2px dashed red; } input:invalid:required { background-image: linear-gradient(to right, pink, lightgreen); } input:valid { border: 2px solid black; } this css causes the input to have a red dashed border when it is invalid and a more subtle solid black border when valid. we also added a background gradient when the input is required and invalid. try out the new behavior in the example below: note: you can find this example live on github as fruit-validation.htm...
...ded a step attribute, so the value defaults to 1. this means that floats, like 3.2, will also show as invalid. full example here is a full example to show usage of html's built-in validation features. ...
...ow as invalid. full example here is a full example to show usage of html's built-in validation features. ...
...And 4 more matches

Accessibility API cross-reference
bar menubar a menu item menuitem menu_item menu_item menuitem a menuitem with a checkable state whose possible values are true, false, or mixed. menuitemcheckbox a checkable menuitem in a set of elements with the same role, only one of which can be checked at a time. menuitemradio any menu other than the menu bar java: menu is for pull-downs, popup_menu for all others menupopup popup_menu, menu popup_menu, menu menu a collection of navigational elements (usually links) for navigating the document or related documents. navigation <nav> if it's a table of contents, use <toc> ...
...ents. ...
...ion for task progressbar progress_bar n/a progressbar page showing properties of something propertypage n/a n/a n/a your average, run-of-the-mill button pushbutton push_button push_button button <button> only one radio button in a group is selectable. ...
...And 4 more matches

Extras
"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,255,255); stop-opacity:1;"/> <stop offset="100%" style="stop-color:rgb(255,0,0); stop-opacity:.8;"/> </radialgradient> </defs> <g transform="translate(15,15)"> <g> <animatetransform attributename="transform" ...
... style="stop-color:rgb(255,0,0); stop-opacity:.8;"/> </radialgradient> </defs> <g transform="translate(15,15)"> <g> <animatetransform attributename="transform" attributetype="xml" type="rotate" from="360" to="0" dur="15s" repeatcount="indefinite"/> <g transform="translate(-15, -15)"> <path fill="url(#radgrad1)" d="m 15 0 l 20 10 l 30 15 l 20 20 l 15 30 l 10 20 l 0 15 l 10 10"/> </g> </g> </g> </svg> </mtext> </mpadded> </msqrt> <mo>=</mo> <msubsup> <mo>∫</mo> <mn>0</mn> <mfrac> <mi>π</mi> <mn>2</mn> </mfrac> </msubsup> <msup> <mi>θ</mi> <mtext> <svg width="15px" height="15px"> <defs> <radialgradient id="radgrad2" cx="50%" cy="50%" r="50%" ...
...frac> <mi>π</mi> <mn>2</mn> </mfrac> </msubsup> <msup> <mi>θ</mi> <mtext> <svg width="15px" height="15px"> <defs> <radialgradient id="radgrad2" cx="50%" cy="50%" r="50%" fx="50%" fy="50%"> <stop offset="0%" style="stop-color:rgb(255,255,255); stop-opacity:1;"/> <stop offset="100%" style="stop-color:rgb(0,0,255); stop-opacity:.9;"/> </radialgradient> </defs> <g> <animatemotion path="m0,0 l3,0 l2,5 l5,5 l0,4 l5,2 z" begin="0s" dur="0.5s" repeatcount="indefinite"/> <circle fill="url(#radgrad2)" r="5px" cx="5px" cy="5px"/> </g> </svg> </mtext> </msup> <mrow> <mo>ⅆ</mo> <mi>θ</mi> </mrow> </math> <div style="width: 300px; margin-left: auto; margin-right: auto;"> <svg width="300px" height="250px"> <defs> <l...
...And 4 more matches

WebGL model view projection - Web APIs
und on the screen, and are concepts that transcend individual frameworks and engines. clip space in a webgl program, data is typically uploaded to the gpu with its own coordinate system and then the vertex shader transforms those points into a special coordinate system known as clip space. any data which extends outside of the clip space is clipped off and not rendered. however, if a triangle straddles the border of this space then it is chopped up into new triangles, and only the parts of the new triangles that are in clip space are kept. the above graphic is a visualization of the clip space that all of the points must fit into. it is a cube two units on each side, with one corner at (-1,-1,-1) and the opposite corner at (1,1,1). the center of the cube is the point (0,0,0). this 8 cubi...
...s well as for the view/eye coordinate system in opengl, is to use a right-handed coordinate system (z-axis points out of the screen towards the viewer) . more on that in the relevant wikipedia articles: cartesian coordinate system, right-hand rule. let's take a look at a perspectivematrix() function, which computes the perspective projection matrix. ...
...-handed coordinate system (z-axis points out of the screen towards the viewer) . more on that in the relevant wikipedia articles: cartesian coordinate system, right-hand rule. let's take a look at a perspectivematrix() function, which computes the perspective projection matrix. ...
...And 4 more matches

Variable fonts guide - CSS: Cascading Style Sheets
riate property should be used, with the lower-level syntax of font-variation-settings only being used to set values or axes not available otherwise. notes when using font-variation-settings it is important to note that axis names are case-sensitive. the registered axis names must be in lower case, and custom axes must be in upper case. for example: font-variation-settings: 'wght' 375, 'grad' 88; wght (weight) is a registered axis, and grad (grade) is a custom one. if you have set values using font-variation-settings and want to change one of those values, you must redeclare all of them (in the same way as when you set opentype font features using font-feature-settings). you can work around this limitation by using css custom properties (css variables) for the individual val...
...n be applied. font-optical-sizing: auto; font-variation-settings: 'opsz' 36; the following live example's css can be edited to allow you to play with optical size values. custom axes custom axes are just that: they can be any axis of design variation that the typeface designer imagines. there may be some that become fairly common — or even become registered — but only time will tell. ...
...plied. font-optical-sizing: auto; font-variation-settings: 'opsz' 36; the following live example's css can be edited to allow you to play with optical size values. custom axes custom axes are just that: they can be any axis of design variation that the typeface designer imagines. there may be some that become fairly common — or even become registered — but only time will tell. ...
...And 4 more matches

CSS Grid Layout and Progressive Enhancement - CSS: Cascading Style Sheets
ver i have also defined the container as a grid container, in order to use the alignment properties that are implemented in css grids. ...
... code is not an issue to our grid supporting browsers. however, things are not always so simple. in this next example, i have a set of floated cards. i have given the cards a width, in order to float them. ...
...cards. i have given the cards a width, in order to float them. ...
...And 4 more matches

background-size - CSS: Cascading Style Sheets
dth-to-height ratio). these attributes are as follows: a bitmap image (such as jpg) always has intrinsic dimensions and proportions. a vector image (such as svg) does not necessarily have intrinsic dimensions. if it has both horizontal and vertical intrinsic dimensions, it also has intrinsic proportions. if it has no dimensions or only one dimension, it may or may not have proportions. css <gradient>s have no intrinsic dimensions or intrinsic proportions. background images created with the element() function use the intrinsic dimensions and proportions of the generating element. note: the behavior of <gradient>s changed in gecko 8.0 (firefox 8.0 / thunderbird 8.0 / seamonkey 2.5). before this, they were treated as images with no intrinsic dimensions, but with intrinsic proportions id...
...if there is no such intrinsic dimension, it becomes the corresponding dimension of the background positioning area. note: background sizing for vector images that lack intrinsic dimensions or proportions is not yet fully implemented in all browsers. be careful about relying on the behavior described above, and test in multiple browsers to be sure the results are acceptable. ...
...nsic dimension, it becomes the corresponding dimension of the background positioning area. note: background sizing for vector images that lack intrinsic dimensions or proportions is not yet fully implemented in all browsers. be careful about relying on the behavior described above, and test in multiple browsers to be sure the results are acceptable. ...
...And 4 more matches

background - CSS: Cascading Style Sheets
th-percentage>? ] && [ center | [ top | bottom ] <length-percentage>? ...
...[ <image-src>? , <color>? ]! ...
...[ <image-src>? , <color>? ]! ...
...And 4 more matches

font-variant-east-asian - CSS: Cascading Style Sheets
an: jis78; /* <east-asian-variant-values> */ font-variant-east-asian: jis83; /* <east-asian-variant-values> */ font-variant-east-asian: jis90; /* <east-asian-variant-values> */ font-variant-east-asian: jis04; /* <east-asian-variant-values> */ font-variant-east-asian: simplified; /* <east-asian-variant-values> */ font-variant-east-asian: traditional; /* <east-asian-variant-values> */ font-variant-east-asian: full-width; /* <east-asian-width-values> */ font-variant-east-asian: proportional-width; /* <east-asian-width-values> */ font-variant-east-asian: ruby full-width jis83; /* global values */ font-variant-east-asian: inherit; font-variant-east-asian: initial; font-variant-east-asian: unset; syntax values normal ...
...ld be used for display. possible values are: keyword standard defining the glyphs opentype equivalent jis78 jis x 0208:1978 jp78 jis83 jis x 0208:1983 jp83 jis90 jis x 0208:1990 jp90 jis04 jis x 0213:2004 jp04 simplified none, use the simplified chinese glyphs smpl traditional none, use the traditional chinese glyphs trad <east-asian-width-values> these values control the sizing of figures used for east asian characters. two values are possible: proportional-width activating the set of east asian characters which vary in width. it corresponds to the opentype values pwid. full-width activating the set of east asian characters which are ...
...t corresponds to the opentype values fwid. formal definition initial valuenormalapplies toall elements. it also applies to ::first-letter and ::first-line.inheritedyescomputed valueas specifiedanimation typediscrete formal syntax normal | [ <east-asian-variant-values> || <east-asian-width-values> || ruby ]where <east-asian-variant-values> = [ jis78 | jis83 | jis90 | jis04 | simplified | traditional ]<east-asian-width-values> = [ full-width | proportional-width ] examples setting east asian glyph variants this example require font "yu gothic" installed in your os, other fonts may not support opentype features. html <table> <thead></thead> <tbody style="border:0;"> <tr> <th>normal/jis78:</th> <td>麹町</td> <td class="jis78">麹町</td> </tr> <tr> <th>normal...
...And 4 more matches

mask-image - CSS: Cascading Style Sheets
the mask-image css property sets the image that is used as mask layer for an element. /* keyword value */ mask-image: none; /* <mask-source> value */ mask-image: url(masks.svg#mask1); /* <image> values */ mask-image: linear-gradient(rgba(0, 0, 0, 1.0), transparent); mask-image: image(url(mask.png), skyblue); /* multiple values */ mask-image: image(url(mask.png), skyblue), linear-gradient(rgba(0, 0, 0, 1.0), transparent); /* global values */ mask-image: inherit; mask-image: initial; mask-image: unset; syntax values none this keyword is interpreted as a transparent black image layer. <mask-source> a <url> reference to a <mask> or to a css image. <image> an image value used as mask image layer. formal definition initial valuenoneapplies toall elements; in svg, it applies to c...
...eapplies toall elements; in svg, it applies to container elements excluding the defs element and all graphics elementsinheritednocomputed valueas specified, but with <url> values made absoluteanimation typediscrete formal syntax <mask-reference>#where <mask-reference> = none | <image> | <mask-source>where <image> = <url> | <image()> | <image-set()> | <element()> | <paint()> | <cross-fade()> | <gradient><mask-source> = <url>where <image()> = image( <image-tags>? [ <image-src>? , <color>? ]! )<image-set()> = image-set( <image-set-option># )<element()> = element( <id-selector> )<paint()> = paint( <ident>, <declaration-value>? )<cross-fade()> = cross-fade( <cf-mixing-image> , <cf-final-image>? )<gradient> = <linear-gradient()> | <repeating-linear-gradient()> | <radial-gradient()> | <repeating-r...
...ask-source> = <url>where <image()> = image( <image-tags>? [ <image-src>? , <color>? ]! ...
...And 4 more matches

<solidcolor> - SVG: Scalable Vector Graphics
the <solidcolor> svg element lets authors define a single color for use in multiple places in an svg document. it is also useful as away of animating a palette colors. note: this is an experimental technology, and not yet implemented in browsers. a workaround is to use a <lineargradient> with only one color stop. this is less elegant, and unlike <solidcolor>, cannot itself be used in the definition of gradients. usage context missing attributes global attributes core attributes global event attributes presentation attributes style attributes specific attributes none. dom interface this element implements the svgsolidcolorelement interface. example svg <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 300 200" height="150"> <defs> <!-- solidcolor is experimental.
...global event attributes presentation attributes style attributes specific attributes none. dom interface this element implements the svgsolidcolorelement interface. example svg <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 300 200" height="150"> <defs> <!-- solidcolor is experimental. ...
...gsolidcolorelement interface. example svg <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 300 200" height="150"> <defs> <!-- solidcolor is experimental. --> <solidcolor id="mycolor" solid-color="gold" solid-opacity="0.8"/> <!-- lineargradient with a single color stop is a less elegant way to achieve the same effect, but it works in current browsers. ...
...And 4 more matches

Clipping and masking - SVG: Scalable Vector Graphics
but when you try to create a semicircle in svg, you will find out the use of the following properties quickly. clipping refers to removing parts of elements defined by other parts. in this case, any half-transparent effects are not possible, it's an all-or-nothing approach. masking on the other hand allows soft edges by taking transparency and grey values of the mask into account. ...
...the attribute clip-path references a <clippath> element with a single rect element. this rectangular on its own would paint the upper half of the canvas black. note, that the clippath element is usually placed in a defs section. the rect will not be painted, however. instead its pixel data will be used to determine, which pixels of the circle "make it" to the final rendering. ...
...lipping, every path inside the clippath is inspected and evaluated together with its stroke properties and transformation. then every part of the target lying in a transparent area of the resulting clippath's content will not be rendered. color, opacity and such have no effect as long as they don't let parts vanish completely. ...
...And 4 more matches

Inline options - Archive of obsolete content
the user interface for the preferences defined with this new syntax appears in the extension's detail view in the add-on manager. this functionality originally appeared in firefox mobile and is now available in firefox on the desktop as well. options file the xul allowed for the inline options is limited to a few new tags. ...
...the title attribute is used as a label for the controls. to set a description, either use the desc attribute, or a text node as a child of the <setting> tag. settings are tied to actual preferences, except the button ...
...the title attribute is used as a label for the controls. to set a description, either use the desc attribute, or a text node as a child of the <setting> tag. settings are tied to actual preferences, except the button setting, ...
...And 3 more matches

In-Depth - Archive of obsolete content
(this is probably an incomplete 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. ...
...y an incomplete 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. ...
...z-border-right-colors: threeddarkshadow threedshadow transparent; -moz-border-bottom-colors: threeddarkshadow threedshadow transparent; -moz-border-left-colors: threeddarkshadow threedshadow transparent; -moz-border-top-colors see -moz-border-bottom-colors above. -moz-border-left-colors see -moz-border-bottom-colors above. -moz-border-right-colors see -moz-border-bottom-colors above. ...
...And 3 more matches

Modifying a XUL Interface - Archive of obsolete content
lement. a copy of this element is made using the clonenode() function and the copy is appended using appendchild(). note that some elements, such as listbox and menulist provide some additional specialized modification functions which you should use instead when you can. these are described in the next section. manipulating basic elements the main xul elements such as buttons, checkboxes and radio buttons may be manipulated using a number of script properties. the properties available are listed in the element reference as those available are different for each element. common properties that you will manipulate include the label, value, checked and disabled properties. they set or clear the corresponding attribute as necessary. label and value properties examples here is a simple exampl...
...y is a boolean property which will be set either true or false. ...
...l isn't initiated yet.) example 6 : source view <button label="change" oncommand="this.nextsibling.checked = !this.nextsibling.checked;"/> <checkbox label="check for messages"/> radio buttons may be selected as well using properties, however since only one in a group may be selected at a time, the others must all be unchecked when one is checked. you don't have to do this manually of course. the radiogroup's selectedindex property may be used to do this. the selectedindex property may be used to retrieve the index of the selected radio button in the group and well as change it. changing a element disabled or enabled it is common to disable particular fields that don't apply in a given situation. for example, in a preferences dialog, one might have the choice of several possibilities, but one...
...And 3 more matches

More Menu Features - Archive of obsolete content
disabled. we'll assume that there's nothing to paste. our find files example so far : source view adding checkmarks to menus many applications have menu items that have checks on them. for example, a feature that is enabled has a check placed beside the command and a feature that is disabled has no check. when the user selects the menu, the check state is switched. you may also want to create radio buttons on menu items. the checks are created in a similar way to the checkbox and radio elements. this involves the use of two attributes: type to indicate the type of check, and name to group commands together. the example below creates a menu with a checked item. example 2 : source view <toolbox> <menubar id="options-menubar"> <menu id="options_menu" label="options"> <menupopup> ...
...menuitem id="backups" label="make backups" type="checkbox"/> <menuitem id="email" label="email administrator" type="checkbox" checked="true"/> </menupopup> </menu> </menubar> </toolbox> the type attribute has been added which is used to make the menu item checkable. by setting its value to checkbox, the menu item can be checked on and off by selecting the menu item. menu with radios in addition to standard checks, you can create the radio style of checks by setting the type to a value of radio. a radio check is used when you want a group of menu items where only one item can be checked at once. an example might be a font menu where only one font can be selected at a time. when another item is selected, the previously selected item is unchecked. in order to group a set of ...
..., the previously selected item is unchecked. in order to group a set of menu items together, you need to put a name attribute on each one to group. set the value to the same string. ...
...And 3 more matches

Gecko Compatibility Handbook - Archive of obsolete content
compatibility requires you write standard markup that gecko-based browsers, netscape 4, and ie browsers can render properly. symptom possible problem solution site works correctly in netscape 6.x but not netscape 7.x or other browsers based upon gecko. the browser detection javascript detects netscape 6.x but does not detect other gecko-based browsers. upgrade the browser detection javascript to detect "gecko." (related article) content differs in gecko browsers and internet explorer use of proprietary or invalid markup (such as is generated by some microsoft office applications). use the w3 html and css validator tools to validate the web page. correct any errors and replace proprietary code wherever possible. ...
...he browser detection javascript to detect "gecko." (related article) content differs in gecko browsers and internet explorer use of proprietary or invalid markup (such as is generated by some microsoft office applications). use the w3 html and css validator tools to validate the web page. correct any errors and replace proprietary code wherever possible. upgrade web authoring tool to versions that support the w3 standards and gecko browsers content differs in gecko browsers and internet explorer the javascript console in netscape 6.x and netscape 7.x displays errors about document.all, document.layers, document.<property> not being defined because of an incorrect browser sniffing, or use of proprietary javascript. upda...
...nd gecko browsers content differs in gecko browsers and internet explorer the javascript console in netscape 6.x and netscape 7.x displays errors about document.all, document.layers, document.<property> not being defined because of an incorrect browser sniffing, or use of proprietary javascript. update browser sniffing to correctly detect gecko browsers. upgrade apis to use newer standards-conformant versions upgrade web authoring tool to versions that support the w3 standards and gecko browsers content differs in gecko browsers and internet explorer your css relies on bugs in internet explorer's implementation of css. internet explorer incorrectly treats id's and class names as case insensitive while gecko trea...
...And 3 more matches

Theme changes in Firefox 2 - Archive of obsolete content
ne-button[open="true"] .searchbar-engine-menuitem[selected="true"] > .menu-iconic-text .searchbar-left you may of course wish to make changes to other styles as well. ...
...archbar-engine-menuitem[selected="true"] > .menu-iconic-text .searchbar-left you may of course wish to make changes to other styles as well. ...
...nger used in firefox 2 and should be removed from your theme: #browserstartuphomepage #browserstartuphomepage #panedownloads description #panegeneral description radio[pane=panedownloads] radio[pane=panedownloads]:active the following styles need to be added to your theme to make it compatible with firefox 2: #panecontent description #panemain description #panesecurity description radio[pane=paneadvanced]:hover radio[pane=paneadvanced][selected="true"] radio[pane=panecontent]:hover radio[pane=panecontent][selected="true"] radio[pane=panefeeds] radio[pane=panefeeds]:active radio[pane=panefeeds]:hover radio[pane=panefeeds][selected="true"] radio[pane=panegeneral]:hover radio[pane=panegeneral][selected="true"] radio[pane=panemain] radio[pane=panemain]:active radio[pan...
...And 3 more matches

::-ms-check - Archive of obsolete content
the ::-ms-check css pseudo-element is a microsoft extension that represents checkboxes and radio button groups created by <input type="checkbox"> and <input type="radio">. this pseudo-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. ...
...orer 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. ...
...lowable properties only the following css properties can be used in a rule with ::-ms-check in its selector. other properties are ignored. ...
...And 3 more matches

Bounding volume collision detection with THREE.js - Game development
he dimensions taking into account a 3d entity's transformations and any child meshes as well. var knot = new three.mesh( new three.torusknotgeometry(0.5, 0.1), new meshnormalmaterial({})); var knotbbox = new box3(new three.vector3(), new three.vector3()); knotbbox.setfromobject(knot); instantiating spheres instantiating sphere objects is similar. we need to provide the sphere's center and radius, which can be added to the boundingsphere property available in geometry. var knot = new three.mesh( new three.torusknotgeometry(0.5, 0.1), new meshnormalmaterial({})); var knotbsphere = new sphere( knot.position, knot.geometry.boundingsphere.radius); unfortunately, there is no equivalent of box3.setfromobject for sphere instances. so if we apply transformations or change the posit...
...box3 / sphere both box3 and sphere have a containspoint method to do this test. var point = new three.vector3(2, 4, 7); knotbbox.containspoint(point); box3 vs. ...
...box3 / sphere both box3 and sphere have a containspoint method to do this test. var point = new three.vector3(2, 4, 7); knotbbox.containspoint(point); box3 vs. box3 the box3.intersectsbox method is available for performing this test. ...
...And 3 more matches

Building up a basic demo with A-Frame - Game development
the ambient light only needs a color, which is also white. adding some advanced geometry we have a cube on the scene already; now let's try adding more shapes. we are not limited to the default entities like <a-cube> — using <a-entity> we can create custom advanced shapes. let's try adding a torus — add this element below the previous code: <a-entity geometry=" primitive: torus; radius: 1; radiustubular: 0.1; segmentstubular: 12;" rotation="10 0 0" position="-3 1 0"> </a-entity> our entity has a torus primitive, which represents its shape. we are passing some initial variables to that shape: the radius of the outer edge of the torus, the radius of the tube, and number of segments along the circumference of the tube face respectively. rotation and position are s...
...of the tube face respectively. rotation and position are set in the same way as we saw earlier. defining a material the torus is now visible on the scene, but its color doesn't look very good — this is because we have to create a material to define the appearance of the entity. ...
...e respectively. rotation and position are set in the same way as we saw earlier. defining a material the torus is now visible on the scene, but its color doesn't look very good — this is because we have to create a material to define the appearance of the entity. edit the <a-entity> defining the torus to look like the following: <a-entity geometry=" primitive: torus; radius: 1; radiustubular: 0.1; segmentstubular: 12;" material=" color: #eaeff2; roughness: 0.1; metalness: 0.5;" rotation="10 0 0" position="-3 1 0"> </a-entity> in the new material attribute, we set up the color of the material, then its roughness (a rougher material will scatter reflected light in more directions than a smooth material) and metalness (how metallic the material is). ad...
...And 3 more matches

Grid Lines - MDN Web Docs Glossary: Definitions of Web-related terms
grid lines are created when you define tracks in the explicit grid using css grid layout. in the following example there is a grid with three column tracks and two row tracks. this gives us 4 column lines and 3 row lines. ...
... is a grid with three column tracks and two row tracks. this gives us 4 column lines and 3 row lines. * {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; border-radius: 5px; background-color: #fff4e6; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 100px); } .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>three</div> <div>four</div> <div>five</div> </div> .wrapper { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: 100px 100px; } lines can be addressed using their line number. in a left-to-right language such ...
...e of the explicit grid, however these lines cannot be addressed by a number. placing items onto the grid by line number having created a grid, you can place items onto the grid by line number. in the following example the item is positioned from column line 1 to column line 3, and from row line 1 to row line 3. ...
...And 3 more matches

Example 1 - Learn web development
{ max-height: 0; visibility: hidden; } /* ------------ */ /* fancy styles */ /* ------------ */ .select { font-size : 0.625em; /* 10px */ font-family : verdana, arial, sans-serif; -moz-box-sizing : border-box; box-sizing : border-box; padding : 0.1em 2.5em 0.2em 0.5em; /* 1px 25px 2px 5px */ width : 10em; /* 100px */ border : 0.2em solid #000; /* 2px */ border-radius : 0.4em; /* 4px */ box-shadow : 0 0.1em 0.2em rgba(0,0,0,.45); /* 0 1px 2px */ background : #f0f0f0; background : linear-gradient(0deg, #e3e3e3, #fcfcfc 50%, #f0f0f0); } .select .value { display : inline-block; width : 100%; overflow : hidden; white-space : nowrap; text-overflow : ellipsis; vertical-align: top; } .select:after { content : "▼"; position: absol...
... overflow : hidden; white-space : nowrap; text-overflow : ellipsis; vertical-align: top; } .select:after { content : "▼"; position: absolute; z-index : 1; height : 100%; width : 2em; /* 20px */ top : 0; right : 0; padding-top : .1em; -moz-box-sizing : border-box; box-sizing : border-box; text-align : center; border-left : .2em solid #000; border-radius: 0 .1em .1em 0; background-color : #000; color : #fff; } .select .optlist { z-index : 2; list-style: none; margin : 0; padding: 0; background: #f0f0f0; border: .2em solid #000; border-top-width : .1em; border-radius: 0 0 .4em .4em; box-shadow: 0 .2em .4em rgba(0,0,0,.4); box-sizing : border-box; min-width : 100%; max-height: 10em; /* 100px */ overflow-y: au...
... : 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, #e3e3e3, #fcfcfc 50%, #f0f0f0); } .select .value { display : inline-block; width : 100%; overflow : hidden; white-space : nowrap; text-overflow : ellipsis; vertical-align: top; } .select:after { content : "▼"; position: absol...
...And 3 more matches

Client-side storage - Learn web development
l write all of our subsequent code inside this window.onload event handler function, called when the window's load event fires, to make sure we don't try to use indexeddb functionality before the app has completely finished loading (it could fail if we don't). inside the window.onload handler, add the following: // open our database; it is created if it doesn't already exist // (see onupgradeneeded below) let request = window.indexeddb.open('notes_db', 1); this line creates a request to open version 1 of a database called notes_db. if this doesn't already exist, it will be created for you by subsequent code. you will see this request pattern used very often throughout indexeddb. database operations take time. you don't want to hang the browser while you wait for the results, so da...
... some point in the future, and you get notified when they're done. to handle this in indexeddb, you create a request object (which can be called anything you like — we called it request so it is obvious what it is for). you then use event handlers to run code when the request completes, fails, etc., which you'll see in use below. note: the version number is important. if you want to upgrade your database (for example, by changing the table structure), you have to run your code again with an increased version number, different schema specified inside the onupgradeneeded handler (see below), etc. we won't cover upgrading databases in this simple tutorial. now add the following event handlers just below your previous addition — again inside the window.onload handler: // ...
...we created earlier for later use. we also run a custom function called displaydata(), which displays the data in the database inside the <ul>. we run it now so that the notes already in the database are displayed as soon as the page loads. you'll see this defined later on. ...
...And 3 more matches

Experimental features in Firefox
tion and allows you to specify how dropped, raised, and sunken initial letters are displayed. see bug 1223880 for more details. release channel version added enabled by default? nightly 50 no developer edition 50 no beta 50 no release 50 no preference name layout.css.initial-letter.enabled conic gradients conic gradients expand css gradients to allow the color transitions to be rendered circling around a center point rather than radiating from it. see bug 1175958 for more details. release channel version added enabled by default? nightly 75 no developer edition 75 no beta 75 no release 75 no preference n...
...when tabbing between elements), and not when they are focused using a mouse or other pointing device. see bug 1617600 for more details. ...
...or more details. release channel version added enabled by default? nightly 59 no developer edition 59 no beta 59 no release 59 no preference name security.mixed_content.block_object_subrequest insecure page labeling these two preferences add a "not secure" text label in the address bar next to the traditional lock icon when a page is loaded insecurely (that is, using http rather than https). see bug 1335970 for more details. release channel version added enabled by default? nightly 60 no developer edition 60 no beta 60 no release 60 no preference name security.insecure_connection_text.enabled for normal ...
...And 3 more matches

Code Samples
"my extension's version is " + addon.version); alert("did i remember to include that file.txt file in my xpi? " + addon.hasresource("file.txt") ? ...
...ion's version is " + addon.version); alert("did i remember to include that file.txt file in my xpi? " + addon.hasresource("file.txt") ? ...
... pretend i did, it's available from the url " + addon.getresourceuri("file.txt").spec); }); uninstall an add-on components.utils.import("resource://gre/modules/addonmanager.jsm"); addonmanager.getaddonbyid("youraddon@youraddon.com", function(addon) { addon.uninstall(); }); disable an add-on components.utils.import("resource://gre/modules/addonmanager.jsm"); addonmanager.getaddonbyid("youraddon@youraddon.com", function(addon) { if (addon.isactive) addon.userdisabled = addon.isactive; }); listening for add-on uninstall this example sets a variable beinguninstalled that you can check when you get a profile-before-change message to do cleanup for your add-on on uninstall. var beinguninstalled; let listener = { onuninstalling: function(addon) { if (addon.id == "youraddon@you...
...And 3 more matches

CanvasRenderingContext2D.fillStyle - Web APIs
pattern a canvaspattern object (a repeating image). examples changing the fill color of a shape this example applies a blue fill color to a rectangle. ...
... pattern a canvaspattern object (a repeating image). examples changing the fill color of a shape this example applies a blue fill color to a rectangle. ...
... pattern a canvaspattern object (a repeating image). examples changing the fill color of a shape this example applies a blue fill color to a rectangle. ...
...And 3 more matches

CanvasRenderingContext2D.strokeStyle - Web APIs
pattern a canvaspattern object (a repeating image). examples changing the stroke color of a shape this example applies a blue stroke color to a rectangle. ...
... pattern a canvaspattern object (a repeating image). examples changing the stroke color of a shape this example applies a blue stroke color to a rectangle. ...
... pattern a canvaspattern object (a repeating image). examples changing the stroke color of a shape this example applies a blue stroke color to a rectangle. ...
...And 3 more matches

Compositing and clipping - Web APIs
mple, we'll use a circular clipping path to restrict the drawing of a set of random stars to a particular region. ...
...lar clipping path to restrict the drawing of a set of random stars to a particular region. ...
...the drawing of a set of random stars to a particular region. ...
...And 3 more matches

PannerNode.coneInnerAngle - Web APIs
nernode in combination with coneinnerangle and coneouterangle affects volume. to help us visualise how the orientation vector affects, we can use the right-hand rule: first, let's start by writing a utility function to figure out our orientation vector. the x and z components are always at a 90° to each other, so we can use the sine and cosine functions, which are offset by the same amount in radians. however, normally this would mean the pannernode points to the left of the listener at 0° rotation – since `x = cos(0) = 1` and `z = sin(0) = 0`. it's more useful to offset the angle by -90°, which means the pannernode will point directly at the listener at 0° rotation. // this utility converts amount of rotation around the y axis // (i.e. rotation in the 'horizontal plane') to an orie...
...he listener at 0° rotation – since `x = cos(0) = 1` and `z = sin(0) = 0`. it's more useful to offset the angle by -90°, which means the pannernode will point directly at the listener at 0° rotation. // this utility converts amount of rotation around the y axis // (i.e. ...
... = 0`. it's more useful to offset the angle by -90°, which means the pannernode will point directly at the listener at 0° rotation. // this utility converts amount of rotation around the y axis // (i.e. ...
...And 3 more matches

PannerNode.coneOuterAngle - Web APIs
nernode in combination with coneinnerangle and coneouterangle affects volume. to help us visualise how the orientation vector affects, we can use the right-hand rule: first, let's start by writing a utility function to figure out our orientation vector. the x and z components are always at a 90° to each other, so we can use the sine and cosine functions, which are offset by the same amount in radians. however, normally this would mean the pannernode points to the left of the listener at 0° rotation – since `x = cos(0) = 1` and `z = sin(0) = 0`. it's more useful to offset the angle by -90°, which means the pannernode will point directly at the listener at 0° rotation. // this utility converts amount of rotation around the y axis // (i.e. rotation in the 'horizontal plane') to an orie...
...he listener at 0° rotation – since `x = cos(0) = 1` and `z = sin(0) = 0`. it's more useful to offset the angle by -90°, which means the pannernode will point directly at the listener at 0° rotation. // this utility converts amount of rotation around the y axis // (i.e. ...
... = 0`. it's more useful to offset the angle by -90°, which means the pannernode will point directly at the listener at 0° rotation. // this utility converts amount of rotation around the y axis // (i.e. ...
...And 3 more matches

PannerNode.coneOuterGain - Web APIs
nernode in combination with coneinnerangle and coneouterangle affects volume. to help us visualise how the orientation vector affects, we can use the right-hand rule: first, let's start by writing a utility function to figure out our orientation vector. the x and z components are always at a 90° to each other, so we can use the sine and cosine functions, which are offset by the same amount in radians. however, normally this would mean the pannernode points to the left of the listener at 0° rotation – since `x = cos(0) = 1` and `z = sin(0) = 0`. it's more useful to offset the angle by -90°, which means the pannernode will point directly at the listener at 0° rotation. // this utility converts amount of rotation around the y axis // (i.e. rotation in the 'horizontal plane') to an orie...
...he listener at 0° rotation – since `x = cos(0) = 1` and `z = sin(0) = 0`. it's more useful to offset the angle by -90°, which means the pannernode will point directly at the listener at 0° rotation. // this utility converts amount of rotation around the y axis // (i.e. ...
... = 0`. it's more useful to offset the angle by -90°, which means the pannernode will point directly at the listener at 0° rotation. // this utility converts amount of rotation around the y axis // (i.e. ...
...And 3 more matches

PannerNode.orientationX - Web APIs
nernode in combination with coneinnerangle and coneouterangle affects volume. to help us visualise how the orientation vector affects, we can use the right-hand rule: first, let's start by writing a utility function to figure out our orientation vector. the x and z components are always at a 90° to each other, so we can use the sine and cosine functions, which are offset by the same amount in radians. however, normally this would mean the pannernode points to the left of the listener at 0° rotation – since `x = cos(0) = 1` and `z = sin(0) = 0`. it's more useful to offset the angle by -90°, which means the pannernode will point directly at the listener at 0° rotation. // this utility converts amount of rotation around the y axis // (i.e. rotation in the 'horizontal plane') to an orie...
...he listener at 0° rotation – since `x = cos(0) = 1` and `z = sin(0) = 0`. it's more useful to offset the angle by -90°, which means the pannernode will point directly at the listener at 0° rotation. // this utility converts amount of rotation around the y axis // (i.e. ...
... = 0`. it's more useful to offset the angle by -90°, which means the pannernode will point directly at the listener at 0° rotation. // this utility converts amount of rotation around the y axis // (i.e. ...
...And 3 more matches

PannerNode.orientationY - Web APIs
nernode in combination with coneinnerangle and coneouterangle affects volume. to help us visualise how the orientation vector affects, we can use the right-hand rule: first, let's start by writing a utility function to figure out our orientation vector. the x and z components are always at a 90° to each other, so we can use the sine and cosine functions, which are offset by the same amount in radians. however, normally this would mean the pannernode points to the left of the listener at 0° rotation – since `x = cos(0) = 1` and `z = sin(0) = 0`. it's more useful to offset the angle by -90°, which means the pannernode will point directly at the listener at 0° rotation. // this utility converts amount of rotation around the y axis // (i.e. rotation in the 'horizontal plane') to an orie...
...he listener at 0° rotation – since `x = cos(0) = 1` and `z = sin(0) = 0`. it's more useful to offset the angle by -90°, which means the pannernode will point directly at the listener at 0° rotation. // this utility converts amount of rotation around the y axis // (i.e. ...
... = 0`. it's more useful to offset the angle by -90°, which means the pannernode will point directly at the listener at 0° rotation. // this utility converts amount of rotation around the y axis // (i.e. ...
...And 3 more matches

PannerNode.orientationZ - Web APIs
nernode in combination with coneinnerangle and coneouterangle affects volume. to help us visualise how the orientation vector affects, we can use the right-hand rule: first, let's start by writing a utility function to figure out our orientation vector. the x and z components are always at a 90° to each other, so we can use the sine and cosine functions, which are offset by the same amount in radians. however, normally this would mean the pannernode points to the left of the listener at 0° rotation – since `x = cos(0) = 1` and `z = sin(0) = 0`. it's more useful to offset the angle by -90°, which means the pannernode will point directly at the listener at 0° rotation. // this utility converts amount of rotation around the y axis // (i.e. rotation in the 'horizontal plane') to an orie...
...he listener at 0° rotation – since `x = cos(0) = 1` and `z = sin(0) = 0`. it's more useful to offset the angle by -90°, which means the pannernode will point directly at the listener at 0° rotation. // this utility converts amount of rotation around the y axis // (i.e. ...
... = 0`. it's more useful to offset the angle by -90°, which means the pannernode will point directly at the listener at 0° rotation. // this utility converts amount of rotation around the y axis // (i.e. ...
...And 3 more matches

Touch() - Web APIs
e vertical position of the touch on the user's screen. "pagex", optional and defaulting to 0, of type double, that is the horizontal position of the touch on the client window of user's screen, including any scroll offset. "pagey", optional and defaulting to 0, of type double, that is the vertical position of the touch on the client window of the user's screen, including any scroll offset. ...
...ptional and defaulting to 0, of type double, that is the horizontal position of the touch on the client window of user's screen, including any scroll offset. "pagey", optional and defaulting to 0, of type double, that is the vertical position of the touch on the client window of the user's screen, including any scroll offset. "radiusx", optional and defaulting to 0, of type float, that is the radius of the ellipse which most closely circumscribes the touching area (e.g. finger, stylus) along the axis indicated by rotationangle, in css pixels of the same scale as screenx; 0 if no value is known. the value must not be negative. "radiusy", optional and defaulting to 0, of type float, that is the the radius of the ellipse which most closely circumscribes the touching area (e.g. finger, styl...
...the user agent may use 0 as the value in this case, or it may use any other value in the allowed range. ...
...And 3 more matches

-webkit-box-reflect - CSS: Cascading Style Sheets
the -webkit-box-reflect css property lets you reflect the content of an element in one specific direction. /* direction values */ -webkit-box-reflect: above; -webkit-box-reflect: below; -webkit-box-reflect: left; -webkit-box-reflect: right; /* offset value */ -webkit-box-reflect: below 10px; /* mask value */ -webkit-box-reflect: below 0 linear-gradient(transparent, white); /* 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 th...
...en. <length> indicates the size of the reflection. <image> describes the mask to be applied to the reflection. ...
...? <length>? <image>?where <image> = <url> | <image()> | <image-set()> | <element()> | <paint()> | <cross-fade()> | <gradient>where <image()> = image( <image-tags>? [ <image-src>? , <color>? ]! )<image-set()> = image-set( <image-set-option># )<element()> = element( <id-selector> )<paint()> = paint( <ident>, <declaration-value>? )<cross-fade()> = cross-fade( <cf-mixing-image> , <cf-final-image>? )<gradient> = <linear-gradient()> | <repeating-linear-gradient()> | <radial-gradient()> | <repeating-radial-gradient()> | <conic-gradient()>where <image-tags> = ltr | rtl<image-src> = <url> | <string><color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color><image-set-option> = [ <image> | <string> ] <resolution><id-selector> = <hash-token>...
...And 3 more matches

:checked - CSS: Cascading Style Sheets
the :checked css pseudo-class selector represents any radio (<input type="radio">), checkbox (<input type="checkbox">), or option (<option> in a <select>) element that is checked or toggled to an on state. /* matches any checked/selected radio, checkbox, or option */ :checked { margin-left: 25px; border: 1px solid blue; } the user can engage this state by checking/selecting an element, or disengage it by unchecking/deselecting the element. note: because browsers often treat <option>s as replaced elements, the extent to which they can be styled with the :checked pseudo-class varies from browser to browser. ...
... 25px; border: 1px solid blue; } the user can engage this state by checking/selecting an element, or disengage it by unchecking/deselecting the element. note: because browsers often treat <option>s as replaced elements, the extent to which they can be styled with the :checked pseudo-class varies from browser to browser. ...
...selecting an element, or disengage it by unchecking/deselecting the element. note: because browsers often treat <option>s as replaced elements, the extent to which they can be styled with the :checked pseudo-class varies from browser to browser. ...
...And 3 more matches

CSS Backgrounds and Borders - CSS: Cascading Style Sheets
and make them square or rounded. ...
...nded. ...
... scaling background images describes how to change the size and rep...
...And 3 more matches

Basic Shapes - CSS: Cascading Style Sheets
g reference boxes for css shapes. inset() the inset() type defines a rectangle, which may not seem very useful as simply floating an item will give you a rectangular shape around it. however the inset() types enables the definition of offsets, thus pulling the content in over the shape. therefore inset() takes four values for the top, right, bottom and left values plus a final value for border-radius. the below css creates a rectangular shape inset from the reference box of the floated element 20 pixels from the top and bottom and 10 pixels from the left and right, with a border-radius value of 10 pixels. .shape { float: left; shape-outside: inset(20px 10px 20px 10px round 10px); } using the same rules as we use for the margin shorthand, you can set more than one offset at once. if ...
...he shape changes. you can also add the box value that you wish to use as a reference box. in the example below change the reference box from margin-box to border-box, padding-box or content-box to see how the reference box used as the starting point before offsets are calculated changes. circle() the circle() value for shape-outside can accept two possible arguments. the first is the shape-radius. both circle() and ellipse() values for shape-outside are specified as accepting this argument of <shape-radius>. this argument can be a length or percentage but can also be one of the keywords closest-side or farthest-side. the keyword closest-side uses the length from the center of the shape to the closest side of the reference box. for circles, this is the closest side in any dimension. f...
... the second argument is a position. if omitted this will be set to center. ...
...And 3 more matches

Shapes From Images - CSS: Cascading Style Sheets
this is a very flexible way to create shapes. rather than drawing a path with a complex polygon in css, you can create the shape in a graphics program and then use the path created by the pixels less opaque than a threshold value. a simple shape from an image to use an image for the shape the image needs to have an alpha channel, an area that is not fully opaque. the shape-image-threshold property is used to set a threshold for this opacity. pixels that are more opaque than this value will be used to calculate the area of the shape. ...
...ide property is not related to the image that is displayed on the page and so you do not need to display an image to use an image to create a shape. you do need something to float, but that could be some generated content as in the below example. i am floating generated content and using a larger star image to shape my content without displaying any image on the page. ...
... related to the image that is displayed on the page and so you do not need to display an image to use an image to create a shape. you do need something to float, but that could be some generated content as in the below example. i am floating generated content and using a larger star image to shape my content without displaying any image on the page. ...
...And 3 more matches

CSS reference - CSS: Cascading Style Sheets
nbackground-repeatbackground-size<basic-shape>::before (:before)bleed (@page)<blend-mode>block-sizeblur()borderborder-blockborder-block-colorborder-block-endborder-block-end-colorborder-block-end-styleborder-block-end-widthborder-block-startborder-block-start-colorborder-block-start-styleborder-block-start-widthborder-block-styleborder-block-widthborder-bottomborder-bottom-colorborder-bottom-left-radiusborder-bottom-right-radiusborder-bottom-styleborder-bottom-widthborder-collapseborder-colorborder-end-end-radiusborder-end-start-radiusborder-imageborder-image-outsetborder-image-repeatborder-image-sliceborder-image-sourceborder-image-widthborder-inlineborder-inline-colorborder-inline-endborder-inline-end-colorborder-inline-end-styleborder-inline-end-widthborder-inline-startborder-inline-start-...
...-outsetborder-image-repeatborder-image-sliceborder-image-sourceborder-image-widthborder-inlineborder-inline-colorborder-inline-endborder-inline-end-colorborder-inline-end-styleborder-inline-end-widthborder-inline-startborder-inline-start-colorborder-inline-start-styleborder-inline-start-widthborder-inline-styleborder-inline-widthborder-leftborder-left-colorborder-left-styleborder-left-widthborder-radiusborder-rightborder-right-colorborder-right-styleborder-right-widthborder-spacingborder-start-end-radiusborder-start-start-radiusborder-styleborder-topborder-top-colorborder-top-left-radiusborder-top-right-radiusborder-top-styleborder-top-widthborder-widthbottom@bottom-centerbox-decoration-breakbox-shadowbox-sizingbreak-afterbreak-beforebreak-insidebrightness()ccalc()caption-sidecaret-colorch@ch...
...widthborder-widthbottom@bottom-centerbox-decoration-breakbox-shadowbox-sizingbreak-afterbreak-beforebreak-insidebrightness()ccalc()caption-sidecaret-colorch@character-variantcharacter-variant()@charset:checkedcircle()clamp()clearclipclip-pathcm<color>colorcolor-adjustcolumn-countcolumn-fillcolumn-gapcolumn-rulecolumn-rule-colorcolumn-rule-stylecolumn-rule-widthcolumn-spancolumn-widthcolumnsconic-gradient()containcontentcontrast()<counter>counter-incrementcounter-resetcounter-set@counter-stylecounters()cross-fade()cubic-bezier()::cue::cue-regioncursor<custom-ident>d:defaultdeg<dimension>:dirdirection:disableddisplay<display-box><display-inside><display-internal><display-legacy><display-listitem><display-outside>dpcmdpidppxdrop-shadow()eelement()ellipse()em:emptyempty-cells:enabledenv()exffallb...
...And 3 more matches

filter - CSS: Cascading Style Sheets
er property has two or more functions it's results will be different from when two or more filter properties are separately applied with the same functions. svg filter url() takes an uri pointing to an svg filter, which may be embedded in an external xml file. filter: url(resources.svg#c1) filter functions blur() the blur() fucntion applies a gaussian blur to the input image. the value of radius defines the value of the standard deviation to the gaussian function, or how many pixels on the screen blend into each other, so a larger value will create more blur. the lacuna value for interpolation is 0. the parameter is specified as a css length, but does not accept percentage values. filter: blur(5px) <table class="standard-table"> <thead> <tr> <th style="text-align: le...
...d) these are two <length> values to set the shadow offset. <offset-x> specifies the horizontal distance. negative values place the shadow to the left of the element. <offset-y> specifies the vertical distance. negative values place the shadow above the element. see <length> for possible units. if both values are 0, the shadow is placed behind the element (and may generate a blur effect if <blur-radius> and/or <spread-radius> is set). <blur-radius> (optional) this is a third <length> value. the larger this value, the bigger the blur, so the shadow becomes bigger and lighter. negative values are not allowed. if not specified, it will be 0 (the shadow's edge is sharp). <color> (optional) see <color> values for possible keywords and notations. if not specified, the color used depends on the...
... notations. if not specified, the color used depends on the browser - it is usually the value of the <color> property, but note that safari currently paints a transparent shadow in this case. ...
...And 3 more matches

list-style-type - CSS: Cascading Style Sheets
roperty may be applied to any element whose display value is set to list-item. moreover, because this property is inherited, it can be set on a parent element (commonly <ol> or <ul>) to make it apply to all list items. ...
...word value */ list-style-type: none; /* global values */ list-style-type: inherit; list-style-type: initial; list-style-type: unset; the list-style-type property may be defined as any one of: a <custom-ident> value a symbols() value a <string> value the keyword none. note that: some types require a suitable font installed to display as expected. the cjk-ideographic is identical to trad-chinese-informal; it exists for legacy reasons. values <custom-ident> a identifier matching the value of a @counter-style or one of the predefined styles: symbols() defines an anonymous style of the list. <string> the specified string will be used as the item's marker. none no item marker is shown. disc a filled circle (default value) circle a hollow circle ...
... gamma… e.g. α, β, γ… lower-alpha lower-latin lowercase ascii letters e.g. a, b, c, … z lower-latin is unsupported in ie7 and earlier see browser compatibility section. upper-alpha upper-latin uppercase ascii letters e.g. a, b, c, … z upper-latin is unsupported in ie7 and earlier arabic-indic -moz-arabic-indic example armenian traditional armenian numbering (ayb/ayp, ben/pen, gim/keem… bengali -moz-bengali example cambodian * example is a synonym for khmer cjk-earthly-branch -moz-cjk-earthly-branch example cjk-heavenly-stem -moz-cjk-heavenly-stem example cjk-ideographic identical to trad-chinese-informal e.g. 一萬一千一百一十一 devanagari -mo...
...And 3 more matches

shape-image-threshold - CSS: Cascading Style Sheets
threshold. values outside the range 0.0 (fully transparent) to 1.0 (fully opaque) are clamped to this range. ...
...parent) to 1.0 (fully opaque) are clamped to this range. formal definition initial value0.0applies tofloatsinheritednocomputed valuethe same as the specified value after clipping the <number> to the range [0.0, 1.0].animation typea number formal syntax <alpha-value>where <alpha-value> = <number> | <percentage> examples aligning text to a gradient this example creates a <div> block with a gradient background image. the gradient is established as a css shape using shape-outside, so that pixels within the gradient which are at least 20% opaque (that is, those pixels with an alpha component greater than 0.2) are considered part of the shape. html <div id="gradient-shape"></div> <p> lorem ipsum dolor sit amet, consectetur adipisicing elit. vel at commodi voluptates enim, distinctio ...
...expedita! ...
...And 3 more matches

text-shadow - CSS: Cascading Style Sheets
the text-shadow css property adds shadows to text. it accepts a comma-separated list of shadows to be applied to the text and any of its decorations. each shadow is described by some combination of x and y offsets from the element, blur radius, and color. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. ...
...and any of its decorations. each shadow is described by some combination of x and y offsets from the element, blur radius, and color. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. ...
...ts from the element, blur radius, and color. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. ...
...And 3 more matches

disabled - HTML: Hypertext Markup Language
matched by the :disabled and :enabled pseudo classes. constraint validation if the element is disabled, then the element's value can not receive focus and cannot be updated by the user, and does not participate in constraint validation. examples when form controls are disabled, many browsers will display them in a lighter, greyed-out color by default. here are examples of a disabled checkbox, radio button, <option> and <optgroup>, as well as some form controls that are disabled via the disabled attribute set on the ancestor <fieldset> element. the <option>s are disabled, but the <select> itself is not. we could have disable the entire <select> by adding the attribute to that element rather than it's descendants. <fieldset> <legend>checkboxes</legend> <p><label> <input type="che...
...tself is not. we could have disable the entire <select> by adding the attribute to that element rather than it's descendants. ...
...t> by adding the attribute to that element rather than it's descendants. ...
...And 3 more matches

Repackaging Firefox - Archive of obsolete content
because firefox is designed from the ground up for extensibility and customization, this process is simple and easy to maintain. important legal considerations before you get started, it is very important to know and abide by the legal requirements for distributing firefox. you must have written authorization from mozilla to distribute a modified version of firefox. to do this, please contact trademarks@mozilla.com. getting started now, on to the technical details. the following diagram represents an overview of the process and the pieces involved: you will need the following to get started: a macintosh computer (even for repackaging windows or linux only); it may be either powerpc or intel based. the repackager tool. currently that page mentions only firefox 1.5.x, but it support...
... to make (for example, changing the default homepage or adding default bookmarks) can be encapsulated into a firefox extension. we call this extension a "distro extension" (sometimes abbreviated as "dex"), because it is used to create a new "distribution" of firefox, with different branding, etc. using an extension makes it far easier to keep track of your changes easily when the time comes to upgrade to new versions of firefox, and also ensures, when set-up correctly, that users are able to safely receive firefox updates from mozilla. more about this below. while the aim of this article is not to fully document how to make an extension (for that, try this section of the mozilla developer center), here is a basic tutorial to get you started, and some tips specific for creating a dex. if you...
... extension that you want to bundle with firefox, and don't want to bundle an extra extension solely to set a few defaults, you can do everything you need to do in your existing extension. however, it's still recommended that you look through this tutorial, as it contains tips specific for creating extensions of this type, and there are a few options that you will need to set to ensure a smooth upgrade path for users. at the very least, don't skip the "important extension preferences" section below. sample dex the best way to get started is probably to look at a simple dex and modify it for your own purposes. download the sample. xpi files are specially crafted zip files in disguise. you can use any zip program (winzip on windows, zip on mac or linux, etc) to extract it. this xpi has the f...
...And 2 more matches

Proxy UI - Archive of obsolete content
os (networking preferences) (recently added - some support for reading os and account settings.)ui elements preferences panel overview the ui is based on selecting a proxy mode, then filling out any additional needed information in "related" ui. the "ok" button saves the preferences. the preference changes selecting the proxy "mode" all product's proxy preference panels share a basic design: a radio button that selects the proxy mode, then "related proxy mode" ui when needed. for the purposes of this document, "proxy mode" means both: whatever was selected in the ui (as opposed to the value of the network.proxy.type. the underlying behavior. the currently available modes are based on "network.proxy.type". for example, firefox 3: [ ] no proxy [ ] auto-detect proxy settings for this networ...
...: whatever was selected in the ui (as opposed to the value of the network.proxy.type. the underlying behavior. the currently available modes are based on "network.proxy.type". ...
...] automatic proxy configuration url: behavior default value: "no proxy" is selected all other "type" radio buttons are enabled, but not selected. "related" ui elements only two proxy modes have related ui. manual proxy is a list of proxy types that require a hostname and a port number. proxy autoconfiguration has a url field and a reload button. enabling and disabling related fields when a radio button is selected, the related ui elements are enabled (and editable). the previously selected radio button becomes unselected, and the related ui of the previous button is disabled (and is not editable). saving changes click "ok" to save changes to prefs. click "cancel" to discard changes. ...
...And 2 more matches

MenuItems - Archive of obsolete content
and show the toolbar when the menuitem is not checked because the checked state hasn't been modified. the example assumes that the showtoolbar() function might fail so if it returns false, the checked attribute is not modified. when clearing the checked state, the checked attribute should be removed rather than just set to false. in the example, this is done by using the removeattribute method. radio menu items a radio menu item os used when you wish to have a group of menuitems in which only one can be checked at a time. this works similarly to the checkbox type, except when selecting an item, all others in the same group are automatically unchecked. to create a menuitem that acts like a radio button, set the type attribute to "radio". in addition, set the name attribute to the name of t...
...which only one can be checked at a time. this works similarly to the checkbox type, except when selecting an item, all others in the same group are automatically unchecked. to create a menuitem that acts like a radio button, set the type attribute to "radio". in addition, set the name attribute to the name of the group that it belongs to. the value of this attribute can be any name you wish; all radio menuitems within the same menu with the same name are part of the same group. ...
... a menuitem that acts like a radio button, set the type attribute to "radio". in addition, set the name attribute to the name of the group that it belongs to. the value of this attribute can be any name you wish; all radio menuitems within the same menu with the same name are part of the same group. ...
...And 2 more matches

Static Content - Archive of obsolete content
asn't loaded, try using a static menupopup. it doesn't even need to have any items in it. the static content may be placed before or after the template, although usually you would place it first. note that the static content is always placed before the generated content, so the 'all' item will always be the first item in the menu. ...
...to have any items in it. the static content may be placed before or after the template, although usually you would place it first. note that the static content is always placed before the generated content, so the 'all' item will always be the first item in the menu. static content example let's look at another example, involving radio buttons. actually, this example is similar, it just uses a radiogroup instead of a menulist to display the list of countries. ...
...fter the template, although usually you would place it first. note that the static content is always placed before the generated content, so the 'all' item will always be the first item in the menu. static content example let's look at another example, involving radio buttons. actually, this example is similar, it just uses a radiogroup instead of a menulist to display the list of countries. ...
...And 2 more matches

dialog - Archive of obsolete content
moreover this hides separator between titlebar and window conten...
...moreover this hides separator between titlebar and window contents. this only affec...
...moreover this hides separator between titlebar and window contents. this only affects mac os x. buttonac...
...And 2 more matches

Dialogs in XULRunner - Archive of obsolete content
here is the code needed to open a dialog: function opendia...
...here is the code needed to open a dialog: function opendialog() { window.op...
...here is the code needed to open a dialog: function opendialog() { window.opendialog("chrome://basicapp/content/dialog.xul", "newdlg", "mo...
...And 2 more matches

What is RSS - Archive of obsolete content
is commonly used and simple example rss files for these common uses. you will also be getting a little history on rss. what is rss? the most popular versions of rss are xml-based markup languages used for syndication. (although rdf-based rss formats exist, namely the deprecated rss 0.90 and rss 1.0.) common uses of rss syndication are for the syndication of news web sites, of blogs, of internet radio, and of internet television. this tutorial teaches rss 2.0, but makes an effort to point out issues with other versions of rss. rss is almost never written by hand; it is almost always created by server-side software (usually written in a language like php, java, c#, or python) on the web server. however, so that we can learn rss, we will be creating rss scripts by hand. a short history of r...
...for example: <?xml version="1.0"?> <rss version="2.0"> <channel> <title>joe blow's blog</title> <description>this is the weblog of joe blow</description> <lastbuilddate>sun, 15 may 2005 13:02:08 -0500</lastbuilddate> <link>http://joe-blow.example.net/</link> <item> <title>i be blogging...</tit...
... those who create internet television use rss to allow users to access their shows. for example: <?xml version="1.0"?> <rss version="2.0"> <channel> <title>kate's iptv show</title> <description>watch it or else! you know you want to.</description> <lastbuilddate>tue, 23 aug 2005 21:02:05 -0800</lastbuild...
...And 2 more matches

Anatomy of a video game - Game development
your time budget. the most famous example of this concept is the game from id software, rage. this game removed control from the user in order to keep its calculation time at roughly 16ms (or roughly 60fps). if computation took too long then rendered resolution would decrease, textures and other assets would fail to load or draw, and so forth. this (non-web) case study made a few assumptions and tradeoffs: each frame of animation accounts for user input. no frame needs to be extrapolated (guessed) because each draw has its own update. simulation systems can basically assume that each full update is ~16ms apart. giving the user control over quality settings would be a nightmare. different monitors input at different rates: 30 fps, 75 fps, 100 fps, 120 fps, 144 fps, etc. systems that ar...
...te method sets checkpoints and, as frequently as the system allows, the render method draws instants of time around them. there are many ways to separate the update method in web standards: draw on requestanimationframe and update on a window.setinterval or window.settimeout. this uses processor time even when unfocused or minimized, hogs the main thread, and is probably an artifact of traditional game loops (but it is simple.) draw on requestanimationframe and update on a setinterval or settimeout in a web worker. this is the same as above, except update does not hog the main thread (nor does the main thread hog it). this is a more complex solution, and might be too much overhead for simple updates. draw on requestanimationframe and use it to poke a web worker con...
...date method with the number of ticks to compute, if any. this sleeps until requestanimationframe is called and does not pollute the main thread, plus you are not relying on old fashioned methods. again, this is a bit more complex than the previous two options, and starting each update will be blocked until the browser decides to fire raf callbacks. each of these methods have similar tradeoffs: users can skip rendering frames or interpolate extra ones depending on their performance. you can count on all users updating non-cosmetic variables at the same constant frequency minus hiccups. much more complicated to program than the basic loops we saw earlier. user input is completely ignored until the next update (even if the user has a fast device). the mandatory interpolation ...
...And 2 more matches

Bounce off the walls - Game development
me very simple collision detection (which will be explained later in more detail) to make the ball bounce off the four edges of the canvas. simple collision detection to detect the collision we will check whether the ball is touching (colliding with) the wall, and if so, we will change the direction of its movement accordingly. ...
...etection (which will be explained later in more detail) to make the ball bounce off the four edges of the canvas. simple collision detection to detect the collision we will check whether the ball is touching (colliding with) the wall, and if so, we will change the direction of its movement accordingly. to make the calculations easier let's define a variable called ballradius that will hold the radius of the drawn circle and be used for calculations. add this to your code, somewhere below the existing variable declarations: var ballradius = 10; now update the line that draws the ball inside the drawball() function to this: ctx.arc(x, y, ballradius, 0, math.pi*2); bouncing off the top and bottom there are four walls to bounce the ball off — let's focus on the top one first. we need to...
...y before changing direction: this is because we're calculating the collision point of the wall and the center of the ball, while we should be doing it for its circumference. the ball should bounce right after if touches the wall, not when it's already halfway in the wall, so let's adjust our statements a bit to include that. ...
...And 2 more matches

Styling web forms - Learn web development
lems across platforms. these include the following elements: <form> <fieldset> and <legend> single-line text <input>s (e.g. type text, url, email...), except for <input type="search">. multi-line <textarea>s buttons (both <input> and <button>s) <label> <output> the bad some elements are more difficult to style, requiring more complex css or some more specific tricks: checkboxes and radio buttons <input type="search"> we describe how to handle these more specific features in the article advanced form styling. the ugly some elements can't be styled thoroughly using css. these include: <input type="color"> date-related controls such as <input type="datetime-local"> <input type="range"> <input type="file"> elements involved in creating dropdown widgets, including <selec...
... widget has their own rules for border, padding and margin. to give the same size to several different widgets, you can use the box-sizing property along with some consistent values for other properties: input, textarea, select, button { width : 150px; padding: 0; margin: 0; box-sizing: border-box; } in the screenshot below, the left column shows the default rendering of an <input type="radio">, <input type="checkbox">, <input type="range">, <input type="text">, <input type="date"> input, <select>, <textarea>,<input type="submit">, and <button>. the right column on the other hand shows the same elements with our above rule applied to them. notice how this lets us ensure that all of the elements occupy the same amount of space, despite the platform's default rules for each kind of wi...
..."text">, <input type="date"> input, <select>, <textarea>,<input type="submit">, and <button>. the right column on the other hand shows the same elements with our above rule applied to them. notice how this lets us ensure that all of the elements occupy the same amount of space, despite the platform's default rules for each kind of widget. what may not be apparent via the screenshot is that the radio and checkbox controls still look the same, but they are centered in the 150px of horizontal space provided by the width property. other browsers may not center the widgets, but they do adhere to the space allotted. legend placement the <legend> element is okay to style, but it can be a bit tricky to control placement of it. by default it is always positioned over the top border of its <fields...
...And 2 more matches

Gecko info for Windows accessibility vendors
it's also used in the root pane object to show when the state_busy flag changes from loading new content. event_scrollingend is used to indicate when a document has scrolled, even if only 1 line. gecko fires this event when the scrolling is finished, rather than fire excessive events. event_scrollingstart is fired when the user has jumpe...
...state_readonly and role_listitem are used to expose the list structure. this makes it important to check the state_readonly flag when encountering a role_list, because the html list form element also uses role_list, but without state_readonly set. positional descriptions are supported the accdescription field is overriden for the following roles: role_listitem, role_menuitem, role_radiobutton, role_pagetab and role_outlineitem for everything other than outline item, the positional description is in the form "n of m" where n is an integer indicating the position within other similar objects in a group, and m represents the number of objects in that group. for example, "3 of 5" indicates the 3rd object out of 5. for outline item, more information is provided, in a format...
...for example, "open\tctrl+o" role_tooltip xul: <tooltip> or tooltiptext attribute role_application default role of root object of application dhtml: role="wairole:application" accname() exposes the <title> of th...
...And 2 more matches

Testopia
testopia is a test case management extension for bugzilla. it is designed to be a generic tool for tracking test cases, allowing for testing organizations to integrate bug reporting with their test case run results. though it is designed with software testing in mind, it can be used to track testing on virtually anything in the engineering process. testopia 3.0 (not yet released) if you upgraded to bugzilla 5.0, you probably noticed that testopia 2.5 is not compatible with this version. despite bugzilla 5.0 has already been released a few months ago, we don't plan to release a fix for testopia immediately, because it's currently under heavy work to make testopia a fully self-contained extension, which means that all tr_*.cgi scripts which are currently in the bugzilla/ root directory a...
...in the bugzilla/ root directory are being moved into extensions/testopia/lib/. this is not an trivial task, it takes time (it started in august 2014), and we decided that it was not a good idea to release half-baked code which still needs testing to make sure we didn't regress anything. the good news is that the current code in the git repository already works with bugzilla 5.0, and so if you upgraded to 5.0 already, and if you don't mind having a work-in-progress extension on your machine, you can decide to pull the code from the git repository. this would also let us get some early feedback in case you find regressions. if you find bugs in the code available from the git repository, please report it to us so that we can fix most critical ones on time for testopia 3.0. do not ask when we p...
...find bugs in the code available from the git repository, please report it to us so that we can fix most critical ones on time for testopia 3.0. do not ask when we plan to release 3.0, because we really don't know. "as soon as possible" is our best answer. testopia 2.5 this versions supports bugzilla 4.2 and 4.4, and the best news is that it no longer requires a patch for bugzilla. ...
...And 2 more matches

SVG Guidelines
g 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. 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 likel...
...lot of detail, for icons that try to pack in a lot of detail graphic artists generally want to be able to pixel tweak. performance while svg provides a lot of flexibility in terms of scaling, themability, etc. this flexibility depends on doing computations for svg images at the time they're displayed, rather than at the time the author creates them. consider an image that involves some complex gradients and filters. if saved as a raster image then the work to rasterize the gradients and filters takes place on the authors computer before the result is stored in the raster file. this work doesn't need to be redone when the image is displayed on someone else's computer. on the other hand, if the image is saved as an svg image then all this work needs to be done each time the svg is displayed o...
...rted by gecko and now deprecated by the filter effects specification) id (id on root element has no effect) xmlns:xlink attribute when there are no xlink:href attributes used throughout the file other unused xml namespace definitions xml:space when there is no text used in the file other empty tags, this may be obvious, but those are sometimes found in svgs unreferenced ids (usually on gradient stops, but also on shapes or paths) clip-rule attribute when the element is not a descendant of a <clippath> fill-rule attribute when the element is a descendant of a <clippath> unreferenced/unused clip paths, masks or defs (example) styling basics privilege short lowercase hex for colors don't use excessive precision for numeric values (usually comes from illustrator) use descript...
...And 2 more matches

Avoiding leaks in JavaScript XPCOM components
o 0 fns1[0]() + ", " + // increments first private_data to 5 fns2[0]() + ", " + // increments second private_data to 1 fns1[1]() + "."; // doubles first private_data to 10 } this shows that closures are quite powerful. but it's also easy to accidentally use that power when it's not needed. ...
... fns2[0]() + ", " + // increments second private_data to 1 fns1[1]() + "."; // doubles first private_data to 10 } this shows that closures are quite powerful. but it's also easy to accidentally use that power when it's not needed. ...
...doubles first private_data to 10 } this shows that closures are quite powerful. but it's also easy to accidentally use that power when it's not needed. ...
...And 2 more matches

Index
ndows registry for information about the environment or other installed programs. to this end, there exist xpcom interfaces to read and write registry data. this article will show you how to use the available interfaces in several mozilla products. 3 aggregating the in-memory datasource rdf no summary! 4 binary compatibility xpcom if mozilla decides to upgrade to a compiler that does not have the same abi as the current version, any built component may fail. it is a possiblity that is introduced when upgrading to a new compiler without recompiling everything. effectively, it is a different platform. 5 bundling multiple binary components binary xpcom components are sometimes required to implement low-level features for extensions.
...d returns accessible relation for this accessible object by index. 271 getrelations this method returns multiple accessible relations for this accessible object. 272 getstate this method retrieves states of the accessible. 273 groupposition this method returns grouping information. used for tree items, list items, tab panel labels, radio buttons, etc. also used for collectons of non-text objects. 274 help help text associated with node. 275 indexinparent the 0-based index of this accessible in its parent's list of children, or -1 if this accessible does not have a parent. 276 keyboardshortcut provides localized string of accesskey name, such as alt+d (alt + d). t...
...r and minor version numbers. 683 nsihttpheadervisitor http, interfaces, interfaces:scriptable, xpcom, xpcom interface reference called by the nsihttpchannel implementation when visiting request and response headers. this method can throw an exception to terminate enumeration of the channel's headers. 684 nsihttpserver no summary! 685 nsihttpupgradelistener http, interfaces, interfaces:scriptable, reference, référence(2), xpcom interface reference this is used, for example, by websockets in order to upgrade an http channel to use the websocket protocol. 686 nsiidnservice dns, interface reference, interfaces, interfaces:scriptable, xpcom, xpcom api reference implemented by: @mozilla.org/network/idn-service;1 ...
...And 2 more matches

nsIHttpChannelInternal
terface is not recommended, as it will change in unpredictable ways. 66 introduced gecko 1.0 inherits from: nsisupports last changed in gecko 6.0 (firefox 6.0 / thunderbird 6.0 / seamonkey 2.3) method overview void getrequestversion(out unsigned long major, out unsigned long minor); void getresponseversion(out unsigned long major, out unsigned long minor); void httpupgrade(in acstring aprotocolname, in nsihttpupgradelistener alistener); void setcookie(in string acookieheader); void setupfallbackchannel(in string afallbackkey); attributes attribute type description canceled boolean returns true if and only if the channel has been canceled. read only. channelisfordownload boolean external handlers may set this to true to notify the channel that it i...
...he request's major version number. minor on return, contains the request's minor version number. getresponseversion() gets the response's major and minor version numbers. void getresponseversion( out unsigned long major, out unsigned long minor ); parameters major on return, contains the response's major version number. minor on return, contains the response's minor version number. ...
...sion number. getresponseversion() gets the response's major and minor version numbers. void getresponseversion( out unsigned long major, out unsigned long minor ); parameters major on return, contains the response's major version number. minor on return, contains the response's minor version number. httpupgrade() allows for the use of http to bootstrap another protocol via the rfc 2616 upgrade request header in conjunction with a 101 level response. the nsihttpupgradelistener will have its nsihttpupgradelistener.ontransportavailable() method invoked if a matching 101 is processed. the arguments to nsihttpupgradelistener.ontransportavailable() provide to the new protocol the low level transport streams that are no longer used by http. the onstartrequest and onstoprequest events are sti...
...And 2 more matches

Resize Observer API - Web APIs
nd allowing you to do anything you like in response to those changes. interfaces resizeobserver provides the ability to register new observers and to start and stop observing elements. resizeobserverentry describes a single element which has been resized, identifying the element and its new size. ...
... resized, identifying the element and its new size. examples you find a couple of simple examples on our github repo: resize-observer-border-radius.html (see source): a simple example with a green box, sized as a percentage of the viewport size. when the viewport size is changed, the box's rounded corners change in proportion to the size of the box. we could just implement this using border-radius with a percentage, but that quickly leads to ugly-looking elliptical corners, whereas the above solution gives you nice square corners that scale with the box size. resize-observer-text.html (see source): here we use the resize observer to change the font-size of a header and paragraph as a slider’s value is changed causing the containing <div> to change width. this shows that you can respo...
...-observer-text.html (see source): here we use the resize observer to change the font-size of a header and paragraph as a slider’s value is changed causing the containing <div> to change width. this shows that you can respond to changes in an element’s size, even if they have nothing to do with the viewport. ...
...And 2 more matches

Touch - Web APIs
the touch interface represents a single contact point on a touch-sensitive device. the contact point is commonly a finger or stylus and the device may be a touchscreen or trackpad. the touch.radiusx, touch.radiusy, and touch.rotationangle describe the area of contact between the user and the screen, the touch area. this can be helpful when dealing with imprecise pointing devices such as fingers. these values are set to describe an ellipse that as closely as possible matches the entire area of contact (such as the user's fingertip). ...
...ting devices such as fingers. these values are set to describe an ellipse that as closely as possible matches the entire area of contact (such as the user's fingertip). note: many of the properties' values are hardware-dependent; for example, if the device doesn't have a way to detect the amount of pressure placed on the surface, the force value will always be 0. this may also be the case for radiusx and radiusy; if the hardware reports only a single point, these values will be 1. constructor touch() creates a touch object. properties this interface has no parent, and doesn't inherits or implements any other property. basic properties touch.identifier read only returns a unique identifier for this touch object. a given touch point (say, by a finger) will have the same ide...
...e of the touch point relative to the top of the document. unlike clienty, this value includes the vertical scroll offset, if any. touch.target read only returns the element on which the touch point started when it was first placed on the surface, even if the touch point has since moved outside the interactive area of that element or even been removed from the document. touch area touch.radiusx read only returns the x radius of the ellipse that most closely circumscribes the area of contact with the screen. the value is in pixels of the same scale as screenx. touch.radiusy read only returns the y radius of the ellipse that most closely circumscribes the area of contact with the screen. the value is in pixels of the same scale as screeny. touch.rotationangle read only r...
...And 2 more matches

Viewpoints and viewers: Simulating cameras in WebXR - Web APIs
n to a true "zoom" by altering the camera's field of view (fov). the field of view is an angle defining the length of the arc on the entire viewable area surrounding the camera that should be visible at once. this is an effect of the focal length in a physical camera, so since there is no true camera, altering the fov is a passable substitute. recall that the circumference of a circle is 2π⋅r radians (360°); as such, this is the theoretical maximum fov. realistically, though, not only do humans not see anywhere near that much, but viewing devices such as monitors and vr goggles tend to reduce the field of view even further. human eyes typically have a horizontal field of view of around 135° (about 2.356 radians) and a vertical fov of about 180° (π or around 3.142 radians). making the...
...to the view. there are differences between this and an optical zoom effect, but the result is generally close enough to get the job done. ...
... the perspective matrix encapsulates the field of view (tech...
...And 2 more matches

Using the aria-labelledby attribute - Accessibility
iv> example 2: associating headings with regions in the example below, header elements are associated with the content they head. note that the region being referenced is the region that contains the header. <div role="main" aria-labelledby="foo"> <h1 id="foo">wild fires spread across the san diego hills</h1> strong winds expand fires ignited by high temperatures ... ...
...the example below, header elements are associated with the content they head. note that the region being referenced is the region that contains the header. <div role="main" aria-labelledby="foo"> <h1 id="foo">wild fires spread across the san diego hills</h1> strong winds expand fires ignited by high temperatures ... ...
... the region being referenced is the region that contains the header. <div role="main" aria-labelledby="foo"> <h1 id="foo">wild fires spread across the san diego hills</h1> strong winds expand fires ignited by high temperatures ... ...
...And 2 more matches

ARIA Test Cases - Accessibility
ete further interaction via the keyboard as usual. optional but desired: at should provide simple method to navigate only among the current drop targets. markup used: aria-grab aria-dropeffect notes: (mz) there is no equivalent place in any of the known operating systems where draggable items are denoted and targets being indicated as such. all drag and drop operations screen readers traditionally perform within the operating system are hit and miss games that are performed on pixel locations. the above is a suggested series of behaviors i as an end user would want to experience when dealing with aria drag and drop, but it has no basis to go on, unlike common controls, for example. results: at firefox ie opera safari jaws 9 - - n/a n/a ...
...nightly build - popup menu expected at behavior: (mz) as focus is placed inside a menu or menubar, a screen reader should announce the name (if any) of the menu, the role of the menu, and then read the current menu item. (al) as focus moves within the menu, the screen reader should read the current menuitem. (al) to read a menu item, the screen reader should announce the name. if it is a radio or checkbox menu item, the screen reader should indicate that it's checkable. if it has a submenu (aria-haspopup), the screen reader should indicate that as well. (mz) if a menu is dropped down, the activation of the new menu should be indicated and the focus tracked as it moves through the items. (mz) when the menu is closed, screen reader should indicate this along with the newly focused it...
...long with the newly focused item. (mz) this may be the menu bar or higher level menu item, or a control that gains focus after the menu was closed after executing a command. (mz) if the menu caused a dialog to open, the dialog context should be given, just as with regular desktop applications. ...
...And 2 more matches

:default - CSS: Cascading Style Sheets
the :default css pseudo-class selects form elements that are the default in a group of related elements. what this selector matches is defined in html standard §4.16.3 pseudo-classes — it may match the <button>, <input type="checkbox">, <input type="radio">, and <option> elements: a default option element is the first one with the selected attribute, or the first enabled option in dom order. multiple <select>s can have more than one selected option, so all will match :default. <input type="checkbox"> and <input type="radio"> match if they have the checked attribute. <button> matches if it is a <form>’s default submission button: the first <button> in dom order that belongs to the form. this also applies to <input> types that submit forms, like image or submit. syntax :default ...
...efault. <input type="checkbox"> and <input type="radio"> match if they have the checked attribute. <button> matches if it is a <form>’s default submission button: the first <button> in dom order that belongs to the form. this also applies to <input> types that submit forms, like image or submit. ...
...d attribute. <button> matches if it is a <form>’s default submission button: the first <button> in dom order that belongs to the form. this also applies to <input> types that submit forms, like image or submit. ...
...And 2 more matches

:indeterminate - CSS: Cascading Style Sheets
the :indeterminate css pseudo-class represents any form element whose state is indeterminate, such as checkboxes which have their html indeterminate attribute set to true, radio buttons which are members of a group in which all radio buttons are unchecked, and indeterminate <progress> elements. ...
...ate attribute set to true, radio buttons which are members of a group in which all radio buttons are unchecked, and indeterminate <progress> elements. /* selects any <input> whose state is indeterminate */ input:indeterminate { background: lime; } elements targeted by this selector are: <input type="checkbox"> elements whose indeterminate property is set to true by javascript <input type="radio"> elements, when all radio buttons with the same name value in the form are unchecked <progress> elements in an indeterminate state syntax :indeterminate examples checkbox & radio button this example applies special styles to the labels associated with indeterminate form fields. html <div> <input type="checkbox" id="checkbox"> <label for="checkbox">this label starts out lime.</labe...
...uttons with the same name value in the form are unchecked <progress> elements in an indeterminate state syntax :indeterminate examples checkbox & radio button this example applies special styles to the labels associated with indeterminate form fields. ...
...And 2 more matches

Realizing common layouts using CSS Grid Layout - CSS: Cascading Style Sheets
er with elements inside for a header, footer, main content, navigation, sidebar, and a block into which i am intending to place advertising. ...
... grid layout. as a simple example, i am creating a 12-column flexible grid that has 12 1fr-unit column tracks, they all have a start line named col-start. this means that we will have twelve grid lines named col-start. .wrapper { max-width: 1024px; margin: 0 auto; font: 1.2em helvetica, arial, sans-serif; } .wrapper > * { border: 2px solid #f08c00; background-color: #ffec99; border-radius: 5px; padding: 10px; } .wrapper { display: grid; grid-template-columns: repeat(12, [col-start] 1fr); grid-gap: 20px; } to demonstrate how this grid system works i have four child elements inside my wrapper. <div class="wrapper"> <div class="item1">start column line 1, span 3 column tracks.</div> <div class="item2">start column line 6, span 4 column tracks. 2 row tracks.</div>...
...d-template-areas, this time using the 12-column grid system. i am starting with the same markup as used for the grid template areas example. ...
...And 2 more matches

Logical properties for margins, borders and padding - CSS: Cascading Style Sheets
border-inline-end-color border-right-color border-inline-end-style border-right-style border-inline-end-width border-right-width border-inline-start border-left border-inline-start-color border-left-color border-inline-start-style border-left-style border-inline-start-width border-left-width border-start-start-radius border-top-left-radius border-start-end-radius border-bottom-left-radius border-end-start-radius border-top-right-radius border-end-end-radius border-bottom-right-radius margin-block-end margin-bottom margin-block-start margin-top margin-inline-end margin-right margin-inline-start margin-left paddin...
...er on the top and bottom of the box, and a 4px dotted purple border on the left and right. .box { border-block: 2px solid green; border-inline-width: 4px; border-inline-style: dotted; border-inline-color: rebeccapurple; } note: these two value shorthands shipped in firefox 66, check browser support before using as other browsers may not have implemented them yet. ...
... border-block: 2px solid green; border-inline-width: 4px; border-inline-style: dotted; border-inline-color: rebeccapurple; } note: these two value shorthands shipped in firefox 66, check browser support before using as other browsers may not have implemented them yet. flow relative border-radius properties the specification has fairly recently added flow-relative values for the border-radius longhands. these have not yet been implemented by any browser. ...
...And 2 more matches

Shapes from box values - CSS: Cascading Style Sheets
css box model the values listed above correspond to the various parts of the css box model. a box in css has content, padding, border, and margin. ...
...ding, border, and margin. by using box values for shapes we can wrap our content around the edges defined by these values. in all of the examples below i am using an element which has padding, a border, and a margin defined in order that you can see the different ways in which content will flow. margin-box the margin-box is the shape defined by the outside margin edge and includes the corner radius of the shape, should border-radius have been used in defining the element. in the example below, we have a circular purple item which is a <div> with a height, width, and background colour. the border-radius property has been used to create a circle by setting border-radius: 50%. as the element has a margin, you can see that the content is flowing around the circular shape and the margin appl...
...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. ...
...And 2 more matches

Cubic Bezier Generator - CSS: Cascading Style Sheets
ss='field'> <br> <output id="output">log</output> </form> </html> .field { width: 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 u...
..., cx(x2), cy(y2), cx(1), cy(1)); ctx.stroke(); ctx.closepath(); // draw the p2 point (with a line to p0) ctx.beginpath(); ctx.strokestyle = 'red'; ctx.moveto(cx(x1), cy(y1)); ctx.lineto(cx(0), cy(0)); ctx.stroke(); ctx.closepath(); ctx.beginpath(); ctx.moveto(cx(x1), cy(y1)); ctx.arc(cx(x1), cy(y1), radius, 0, 2 * math.pi); ctx.stroke(); ctx.fillstyle = 'white'; ctx.fill(); ctx.closepath(); // draw the p3 point (with a line to p1) ctx.beginpath(); ctx.strokestyle = 'red'; ctx.moveto(cx(x2), cy(y2)); ctx.lineto(cx(1), cy(1)); ctx.stroke(); ctx.closepath(); ctx.beginpath(); ctx.moveto(cx(x2)...
... ctx.fillstyle = 'white'; ctx.fill(); ctx.closepath(); // draw the p3 point (with a line to p1) ctx.beginpath(); ctx.strokestyle = 'red'; ctx.moveto(cx(x2), cy(y2)); ctx.lineto(cx(1), cy(1)); ctx.stroke(); ctx.closepath(); ctx.beginpath(); ctx.moveto(cx(x2), cy(y2)); ctx.arc(cx(x2), cy(y2), radius, 0, 2 * math.pi); ctx.stroke(); ctx.fill(); ctx.closepath(); // draw the p1(1,1) point (with dashed hints) ctx.beginpath(); ctx.moveto(cx(1), cy(1)); ctx.strokestyle = 'lightgrey'; ctx.lineto(cx(0), cy(1)); ctx.moveto(cx(1), cy(1)); ctx.lineto(cx(1), cy(0)); ctx.stroke(); ctx.closepath(); ...
...And 2 more matches

<angle> - CSS: Cascading Style Sheets
the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. syntax the <angle> data type consists of a <number> followed by one of the units listed below. as with all dimensions, there is no space between the unit literal and the number. the angle unit is optional after the number 0. optionally, it may be preceded by a single + or - sign. ...
...erclockwise angles. for static properties of a given unit, any angle can be represented by various equivalent values. for example, 90deg equals -270deg, and 1turn equals 4turn. for dynamic properties, like when applying an animation or transition, the effect will nevertheless be different. units deg represents an angle in degrees. one full circle is 360deg. examples: 0deg, 90deg, 14.23deg. grad represents an angle in gradians. one full circle is 400grad. examples: 0grad, 100grad, 38.8grad. rad represents an angle in radians. one full circle is 2π radians which approximates to 6.2832rad. 1rad is 180/π degrees. examples: 0rad, 1.0708rad, 6.2832rad. turn represents an angle in a number of turns. one full circle is 1turn. examples: 0turn, 0.25turn, 1.2turn. examples setting a cloc...
...circle is 400grad. examples: 0grad, 100grad, 38.8grad. rad represents an angle in radians. one full circle is 2π radians which approximates to 6.2832rad. 1rad is 180/π degrees. examples: 0rad, 1.0708rad, 6.2832rad. turn represents an angle in a number of turns. one full circle is 1turn. examples: 0turn, 0.25turn, 1.2turn. ...
...And 2 more matches

<image> - CSS: Cascading Style Sheets
a selection of images chosed based on resolution defined by the image-set() function. ...
...ngle 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 height, like an svg or other vector format. images with neither intrinsic dimensions, nor an intrinsic aspect ratio, like a css gradient. css determines an object's concrete size using (1) its intrinsic dimensions; (2) its specified size, defined by css properties like width, height, or background-size; and (3) its default size, determined by the kind of property the image is used with: kind of object (css property) default object size background-image the size of the element's background positio...
...g to its users. if the image contains information critical to understanding the page's overall purpose, it is better to describe it semantically in the document. ...
...And 2 more matches

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...
...et-path: inherit; offset-path: initial; offset-path: unset; values ray() taking up to three values, defines a path that is a line segment starting from the position of the box and proceeds in the direction defined by the specified angle similar to the css gradient angle where 0deg is up, with positive angles increasing in the clockwise direction, with the size value being similar to the css radial gradient size values from closest-side to farthest-corner, and the keyterm contain. 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. ...
...e | closest-corner | farthest-corner | <length> | <length-percentage>{2}<path()> = path( [ <fill-rule>, ]? ...
...And 2 more matches

<menuitem> - HTML: Hypertext Markup Language
is able to invoke through a popup menu. this includes context menus, as well as menus that might be attached to a menu button. a command can either be defined explicitly, with a textual label and optional icon to describe its appearance, or alternatively as an indirect command whose behavior is defined by a separate element. commands can also optionally include a checkbox or be grouped to share radio buttons. (menu items for indirect commands gain checkboxes or radio buttons when defined against elements <input type="checkbox"> and <input type="radio">.) content categories none. permitted content none, it is an empty element. tag omission must have a start tag and must not have an end tag. permitted parents the <menu> element, where that elem...
... a <menu> in the popup menu state.) permitted aria roles none dom interface htmlmenuitemelement attributes this element includes the global attributes; in particular title can be used to describe the command, or provide usage hints. checked boolean attribute which indicates whether the command is selected. may only be used when the type attribute is checkbox or radio. command specifies the id of a separate element, indicating a command to be invoked indirectly. may not be used within a menu item that also includes the attributes checked, disabled, icon, label, radiogroup or type. default this boolean attribute indicates use of the same command as the menu's subject element (such as a button or input). disabled boolean attribute which indicates that th...
...ates that the command is not available in the current state. note that disabled is distinct from hidden; the disabled attribute is appropriate in any context where a change in circumstances might render the command relevant. icon image url, used to provide a picture to represent the command. label the name of the command as shown to the user. required when a command attribute is not present. radiogroup this attribute specifies the name of a group of commands to be toggled as radio buttons when selected. may only be used where the type attribute is radio. type this attribute indicates the kind of command, and can be one of three values. command: a regular command with an associated action. this is the missing value default. checkbox: represents a command that can be toggled betwe...
...And 2 more matches

HTTP headers - HTTP
rce. response headers hold additional information about the response, like its location or about the server providing it. entity headers contain information about the body of the resource, like its content length or mime type. headers can also be grouped according to how proxies handle them: connection keep-alive proxy-authenticate proxy-authorization te trailer transfer-encoding upgrade (see also protocol upgrade mechanism). end-to-end headers these headers must be transmitted to the final recipient of the message: the server for a request, or the client for a response. intermediate proxies must retransmit these headers unmodified and caches must store them. hop-by-hop headers these headers are meaningful only for a single transport-level connection, and must not be retr...
... for that site from going unnoticed. when a site enables the expect-ct header, they are requesting that chrome check that any certificate for that site appears in public ct logs. feature-policy provides a mechanism to allow and deny the use of browser features in its own frame, and in iframes that it embeds. strict-transport-security (hsts) force communication using https instead of http. upgrade-insecure-requests sends a signal to the server expressing the client’s preference for an encrypted and authenticated response, and that it can successfully handle the upgrade-insecure-requests directive. x-content-type-options disables mime sniffing and forces browser to use the type given in content-type. x-download-options the x-download-options http header indicates that the browser (i...
...e signed-headers header field identifies an ordered list of response header fields to include in a signature. server-timing communicates one or more metrics and descriptions for the given request-response cycle. service-worker-allowed used to remove the path restriction by including this header in the response of the service worker script. sourcemap links generated code to a source map. upgrade the relevant rfc document for the upgrade header field is rfc 7230, section 6.7. the standard establishes rules for upgrading or changing to a different protocol on the current client, server, transport protocol connection. for example, this header standard allows a client to change from http 1.1 to http 2.0, assuming the server decides to acknowledge and implement the upgrade header field. nei...
...And 2 more matches

HTTP Index - HTTP
alues in place of strings. this allows authors to define rules guarding writing values to the dom and thus reducing the dom xss attack surface to small, isolated parts of the web application codebase, facilitating their monitoring and code review. this directive declares a white-list of trusted type policy names created with trustedtypes.createpolicy from trusted types api. 105 csp: upgrade-insecure-requests csp, content-security-policy, directive, http, reference, requests, security, upgrade, upgrade-insecure-requests the http content-security-policy (csp) upgrade-insecure-requests directive instructs user agents to treat all of a site's insecure urls (those served over http) as though they have been replaced with secure urls (those served over https). this directive is ...
...end of chunked messages in order to supply metadata that might be dynamically generated while the message body is sent, such as a message integrity check, digital signature, or post-processing status. 189 transfer-encoding http, reference, header the transfer-encoding header specifies the form of encoding used to safely transfer the payload body to the user. 190 upgrade-insecure-requests http, https, security, header the http upgrade-insecure-requests request header sends a signal to the server expressing the client’s preference for an encrypted and authenticated response, and that it can successfully handle the upgrade-insecure-requests csp directive. 191 user-agent http, http header, reference, user-agent the user-agent reques...
...cates that everything so far is ok and that the client should continue with the request or ignore it if it is already finished. 219 101 switching protocols http, http status code, informational, reference, websockets the http 101 switching protocols response code indicates the protocol the server is switching to as requested by a client which sent the message including the upgrade request header. 220 103 early hints draft, http, informational, needscompattable, needscontent, status code the http 103 early hints information response status code is primarily intended to be used with the link header to allow the user agent to start preloading resources while the server is still preparing a response. 221 200 ok http, status code, success ...
...And 2 more matches

Intl.DisplayNames - JavaScript
d get the display name for a region code. ...
...ay names to create an intl.displaynames for a locale and get the display name for a language-script-region sequence. ...
... // get display names of script in english let scriptnames = new intl.displaynames(['en'...
...And 2 more matches

Web video codec guide - Web media technologies
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 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 a...
... effect on quality effect on size color depth (bit depth) the higher the color bit depth, the higher the quality of color fidelity is achieved in the video. additionally, in saturated portions of the image (that is, where colors are pure and intense, such as a bright, pure red [rgba(255, 0, 0, 1)]), color depths below 10 bits per component (10-bit color) allow banding, where gradients cannot be represented without visible stepping of the colors. depending on the codec, higher color depths may result in larger compressed file sizes. the determining factor is what internal storage format is used for the compressed data. frame rate primarily affects the perceived smoothness of the motion in the image. to a point, the higher the frame rate, the smoother and mor...
...tion effects on quality and size feature effect on quality effect on size lossless compression no loss of quality lossless compression cannot reduce the overall video size nearly as much as lossy compression; the resulting files are likely to still be too large for general usage. ...
...And 2 more matches

Making PWAs work offline with Service workers - Progressive web apps (PWAs)
n the browser and the network. they finally fix issues that front-end developers have struggled with for years — most notably how to properly cache the assets of a website and make them available when the user’s device is offline. they run on a separate thread from the main javascript code of our page, and don't have any access to the dom structure. this introduces a different approach from traditional web programming — the api is non-blocking, and can send and receive communication between different contexts. you are able to give a service worker something 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...
...files to it for offline use. our js13kpwa app does exactly that. first, a variable for storing the cache name is created, and the app shell files are listed in one array. ...
...oes exactly that. first, a variable for storing the cache name is created, and the app shell files are listed in one array. ...
...And 2 more matches

SVG Presentation Attributes - SVG: Scalable Vector Graphics
mine what side of a path is inside a shape in order to know how a <clippath> should clip its target. value: nonezero|evenodd|inherit; animatable: yes color it provides a potential indirect value (currentcolor) for the fill, stroke, stop-color, flood-color and lighting-color presentation attributes. value: <color>|inherit; animatable: yes color-interpolation it specifies the color space for gradient interpolations, color animations, and alpha compositing. value: auto|srgb|linearrgb|inherit; animatable: yes color-interpolation-filters it specifies the color space for imaging operations performed via filter effects. value: auto|srgb|linearrgb|inherit; animatable: yes color-profile deprecated since svg 2 it defines which color profile a raster image included through the <image> elemen...
...ce svg 2 it controls glyph orientation when the inline-progression-direction is horizontal. value: <angle>|inherit; animatable: no glyph-orientation-vertical deprecated since svg 2 it controls glyph orientation when the inline-progression-direction is vertical. value: auto|<angle>|inherit; animatable: no image-rendering it provides a hint to the browser about how to make speed vs. quality tradeoffs as it performs image processing. value: auto|optimizequality|optimizespeed; animatable: yes kerning deprecated since svg 2 it indicates whether the browser should adjust inter-glyph spacing. value: auto|<length>|inherit; animatable: yes letter-spacing it controls spacing between text characters. value: normal|<length>|inherit; animatable: yes lighting-color it defines the color of t...
...cifies whether the content of a block-level element is clipped when it overflows the element's box. value: visible|hidden|scroll|auto|inherit; animatable: yes pointer-events defines whether or when an element may be the target of a mouse event. value: bounding-box|visiblepainted|visiblefil|visiblestroke|visible |painted|fill|stroke|all|none; animatable: yes shape-rendering hints about what tradeoffs to make as the browser renders <path> element or basic shapes. value: auto|optimizespeed|crispedges|geometricprecision |inherit; animatable: yes solid-color - value:; animatable: - solid-opacity - value:; animatable: - stop-color indicates what color to use at that gradient stop. value: currentcolor|<color>|<icccolor>|inherit; animatable: yes stop-opacity defines the opacity of a...
...And 2 more matches

color-rendering - SVG: Scalable Vector Graphics
fied by through the linearrgb value for color-interpolation-filters. note: as a presentation attribute, color-rendering can be used as a css property. ...
...ation attribute, color-rendering can be used as a css property. ...
...ttribute, color-rendering can be used as a css property. ...
...And 2 more matches

exponent - SVG: Scalable Vector Graphics
the exponent attribute defines the exponent of the gamma function. ...
... the exponent attribute defines the exponent of the gamma function. ...
... the exponent attribute defines the exponent of the gamma function. ...
...And 2 more matches

href - SVG: Scalable Vector Graphics
attribute defines a link to a resource as a reference url. the exact meaning of that link depends on the context of each element using it. note: specifications before svg 2 defined an xlink:href attribute, which is now rendered obsolete by the href attribute. fifteen elements are using this attribute: <a>, <animate>, <animatemotion>, <animatetransform>, <discard>, <feimage>, <image>, <lineargradient>, <mpath>, <pattern>, <radialgradient>, <script>, <set>, <textpath>, and <use> html, body, svg { height: 100%; } <svg viewbox="0 0 160 40" xmlns="http://www.w3.org/2000/svg"> <a href="https://developer.mozilla.org/"><text x="10" y="25">mdn web docs</text></a> </svg> in svg a for <a>, href defines the location of the referenced object, expressed as a url reference. val...
... animatable yes image for <image>, href defines a url referring to the image to render. value <url> default value none animatable yes example html, body, svg { height: 100%; } <svg viewbox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"> <image href="/files/2917/fxlogo.png" x="0" y="0" height="100" width="100"/> </svg> lineargradient for <lineargradient>, href defines url referring to a template gradient element; to be valid, the reference must be to a different <lineargradient> or <radialgradient> element. value <url> default value none animatable yes mpath for <mpath>, href defines a url referring to the <path> element or basic shape which defines the motion path. ...
...hildren from the referenced element. inheritance can be indirect to an arbitrary level; thus, if the referenced element inherits attributes or children due to its own href attribute, then the current element can inherit those attributes or children. on the <pattern> element, the href attribute is animatable. value <url> default value none animatable yes radialgradient for <radialgradient>, href defines url referring to a template gradient element; to be valid, the reference must be to a different <lineargradient> or <radialgradient> element. value <url> default value none animatable yes script for <script>, href defines a url referring to an external resource containing the script code. value ...
...And 2 more matches

intercept - SVG: Scalable Vector Graphics
the intercept attribute defines the intercept of the linear function of color component transfers when the type attribute is set to linear. ...
... the intercept attribute defines the intercept of the linear function of color component transfers when the type attribute is set to linear. ...
... the intercept attribute defines the intercept of the linear function of color component transfers when the type attribute is set to linear. ...
...And 2 more matches

tableValues - SVG: Scalable Vector Graphics
the tablevalues attribute defines a list of numbers defining a lookup table of values for a for a color component transfer function. ...
... the tablevalues attribute defines a list of numbers defining a lookup table of values for a for a color component transfer function. ...
... the tablevalues attribute defines a list of numbers defining a lookup table of values for a for a color component transfer function. ...
...And 2 more matches

<defs> - SVG: Scalable Vector Graphics
bjects inside of a <defs> element promotes understandability of the svg content and is beneficial to the overall accessibility of the document. ...
...f a <defs> element promotes understandability of the svg content and is beneficial to the overall accessibility of the document. ...
... element promotes understandability of the svg content and is beneficial to the overall accessibility of the document. ...
...And 2 more matches

Paths - SVG: Scalable Vector Graphics
ansparent"/> </svg> both curves produce similar results, although the cubic one allows greater freedom in exactly what the curve looks like. deciding which curve to use is situational and depends on the amount of symmetry the line has. arcs the other type of curved line that can be created using svg is the arc, called with the a command. arcs are sections of circles or ellipses. for a given x-radius and y-radius, there are two ellipses that can connect any two points (as long as they're within the radius of the circle). along either of those circles, there are two possible paths that can be taken to connect the points—so in any situation, there are four possible arcs available. because of that, arcs require quite a few parameters: a rx ry x-axis-rotation large-arc-flag sweep-flag x y...
...). along either of those circles, there are two possible paths that can be taken to connect the points—so in any situation, there are four possible arcs available. because of that, arcs require quite a few parameters: a rx ry x-axis-rotation large-arc-flag sweep-flag x y a rx ry x-axis-rotation large-arc-flag sweep-flag dx dy at its start, the arc element takes in two parameters for the x-radius and y-radius. if needed, see <ellipse>s and how they behave. the final two parameters designate the x and y coordinates to end the stroke. together, these four values define the basic structure of the arc. the third parameter describes the rotation of the arc. this is best explained with an example: <svg width="320" height="320" xmlns="http://www.w3.org/2000/svg"> <path d="m 10 315 ...
..."http://www.w3.org/2000/svg"> <path d="m 10 315 l 110 215 a 30 50 0 0 1 162.55 162.45 l 172.55 152.45 a 30 50 -45 0 1 215.1 109.9 l 315 10" stroke="black" fill="green" stroke-width="2" fill-opacity="0.5"/> </svg> the example shows a <path> element that goes diagonally across the page. at its center, two elliptical arcs have been cut out (x radius = 30, y radius = 50). in the first one, the x-axis-rotation has been left at 0, so the ellipse that the arc travels around (shown in gray) is oriented straight up and down. for the second arc, though, the x-axis-rotation is set to -45 degrees. this rotates the ellipse so that it is aligned with its minor axis along the path direction, as shown by the second ellipse in the example image. for t...
...And 2 more matches

SVG and CSS - SVG: Scalable Vector Graphics
make a new svg document as a plain text file, doc8.svg. ...
...new svg document as a plain text file, doc8.svg. ...
...copy and paste the content from here, making sure that you scroll to get all of it: <svg width="600px" height="600px" viewbox="-300 -300 600 600" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <title>svg demonstration</title> <desc>mozilla css getting started - svg demonstration</desc> <defs> <radialgradient id="fade" cx="0" cy="0" r="200" gradientunits="userspaceonuse"> <stop id="fade-stop-1" offset="33%"/> <stop id="fade-stop-2" offset="95%"/> </radialgradient> </defs> <text id="heading" x="-280" y="-270">svg demonstration</text> <text id="caption" x="-280" y="-250">move your mouse pointer over the flower.</text> <g id="flower"> <circle id="overlay" cx="0" cy="0" r="200" stroke="none" fill="url(#fade)"/>...
...And 2 more matches

core/heritage - Archive of obsolete content
as a matter of fact since result is just a plain constructor function with proper prot...
...of dog // => true tsuga.call('tsuga') // => 'ruff! ruff!' please note that class is just an utility function which we use in sdk, and recommend our users to use it, but it's in no way enforced. ...
... // => true tsuga.call('tsuga') // => 'ruff! ruff!' please note that class is just an utility function which we use in sdk, and recommend our users to use it, but it's in no way enforced. as a matter of fact since result is just a plain constructor function with proper prototype chain setup you could sub-class it as any other constructor: function labrador() { // ... ...
... // => 'ruff! ruff!' please note that class is just an utility function which we use in sdk, and recommend our users to use it, but it's in no way enforced. as a matter of fact since result is just a plain constructor function with proper prototype chain setup you could sub-class it as any other constructor: function labrador() { // ... } labrador.prototype = object.create(dog.prototype); labrador.prototype.jump = function() { // ... } var leo = new labrador() leo.bark(); // => 'ruff! ruff!' leo.instanceof labrador // => true leo.instanceof dog // => true also, you could use class function to subclass constructor functions that were not created by a class itself: var foo = class({ extends: labrador // ... }) sometimes (...

Listening for Load and Unload - Archive of obsolete content
d, and after all top-level require() statements have run (so generally after all dependent modules have been loaded). exports.main = function (options, callbacks) {}; options is an object describing the parameters with which your add-on was loaded. ...
...er all top-level require() statements have run (so generally after all dependent modules have been loaded). exports.main = function (options, callbacks) {}; options is an object describing the parameters with which your add-on was loaded. ...
...this happens because disabling an add-on also disables its onunload listeners, so there is no listener remaining when the add-on is uninstalled. ...
...this happens because disabling an add-on also disables its onunload listeners, so there is no listener remaining when the add-on is uninstalled. ...

Appendix: What you should know about open-source software licenses - Archive of obsolete content
al license beware of mixed licenses when using existing source code, check to see whether there is a different license mixed in the source. depending on the license, mixing them may be prohibited. for example, source code with a plain gpl or mpl license cannot be linked to or amended with other source code using any other kind of license. this is because the mpl and gpl include provisions contradicting this. however, source code that is dual-licensed with either the mpl or gpl allows additions or linkages with gpl source code. oss licensing today and in the future finally, let’s look at the current state of affairs in oss licensing and some of the issues it faces. non-licensing factors when we consider the application and upkeep of a license, there are some non-license factors to co...
...ho contribute to the free office suite openoffice.org are requested to enter into a joint copyright assignment with sun microsystems, the initial developer. despite the fact that different modules have different copyright holders, and overall license management is complicated, by taking this contract as a kind of proxy letter, sun is able to make changes to the openoffice.org license by itself. trademarks and patents software is treated as a copyrighted work under copyright law, but the rights that attend software are not limited to copyright: software is also covered by patent and trademark law. while you can freely duplicate, distribute, and modify copyrighted open-source software, it’s typical that with trademarked or patented works, you can’t do whatever you want with them. there ar...
...red by patent and trademark law. while you can freely duplicate, distribute, and modify copyrighted open-source software, it’s typical that with trademarked or patented works, you can’t do whatever you want with them. there are companies that have built businesses on open source by taking advantage of this fact. red hat enterprise linux (rhel) cannot be copied or distributed with the redhat trademark in place. a number of rhel clones have appeared, such as centos, where the trademarked parts have been scrubbed away by a community effort. the firefox web browser, developed by the mozilla foundation, does not permit modifications of its name or trademarked icon. for this reason, the debian project, which distributes free software as a volunteer effort, has a browser based on firefox, but ...
...this report is available online (in japanese) at http://www.meti.go.

Adding menus and submenus - Archive of obsolete content
make a menuitem "checkable" to allow the user to enable/disable options using the menu. we use two attributes for this: type and checked. the type attribute must be set to "checkbox". you can set the checked attribute to "true" to check it by default. the item's checked state changes when the user clicks on it. an example of one such item is the view > status bar item in the main firefox menu. ...
...te must be set to "checkbox". you can set the checked attribute to "true" to check it by default. the item's checked state changes when the user clicks on it. an example of one such item is the view > status bar item in the main firefox menu. radio menu items if you need to have a set of menuitem elements where only one of them has to be checked at any given moment, you should set the type to "radio". the name attribute is used to identify the items that belong to the radio group. ...
...item is the view > status bar item in the main firefox menu. radio menu items if you need to have a set of menuitem elements where only one of them has to be checked at any given moment, you should set the type to "radio". the name attribute is used to identify the items that belong to the radio group. <menupopup oncommand="xulschoolchrome.hw.greetingdialog.greeting(event);"> <menuitem type="radio" name="xulschoolhello-greeting-radio" label="&xulschoolhello.greet.short.label;" checked="true" /> <menuitem type="radio" name="xulschoolhello-greeting-radio" label="&xulschoolhello.greet.medium.label;" /> <menuitem type="radio" name="xulschoolhello-greeting-radio" label="&xulschoolhello.greet.long.label;" /> </menupopup> this is a modified version of the 3 greeting menus. it ...
...the first one is checked by default. the oncommand attribute is set on the menupopup to avoid code duplication, since now the 3 items call the same function. another example of a menu like this is the view > sidebars menu. only one sidebar is visible at any given moment, and you can pick from several. ...

CSS3 - Archive of obsolete content
experimental parts are vendor-prefixed and should either be avoided in production environments, or used with extreme caution as both their syntax and semantics can change in the future. modules and the standardization process css level 2 needed 9 years, from august 2002 to june 2011 to reach the recommendation status. ...
...rounds, for any type of <image>, and not only for uri() defined ones. support for multiple background images. the background-repeat space and round values, and for the 2-value syntax of this css property. the background-attachment local value. the css background-origin, background-size, and background-clip properties. support for curved border corners, with the css border-radius, border-top-left-radius, border-top-right-radius, border-bottom-left-radius, and border-bottom-right-radius properties. support for the use of an <image> as the border with the css border-image, border-image-source, border-image-slice, border-image-width, border-image-outset, and border-image-repeat properties. support for shadows of the element with the css box-shadow property. ...
...he url() syntax to support image slices using media fragments. adds: the dppx unit to the <resolution> data type. the image() function as a more flexible alternative to url() to define an image from an url. at risk: due to insufficient browser support, standardization of the image() function may be postponed to the next iteration of this module. support for linear-gradient(), repeating-linear-gradient(), radial-gradient() and repeating-radial-gradient(). the ability to define how a replaced element should fit in its element, using the css object-fit property. at risk: due to insufficient browser support, standardization of the object-fit and property may be postponed to the next iteration of this module. the ability to override the resolution an...
...n to allow the definition to equivalent images at different resolution allowing for resolution-negotiated selection of images. the element() functional notation allowing the use of part of the page as image. the cross-fade() functional notation allowing to refer to intermediate images when transitioning between two images and defines the interpolation between two images. the conic-gradient() and repeating-conic-gradient() functional notation describing a new type of gradient. the image-rendering property that allow to define how resize of the object should be handled. modules in the rewriting phase modules that are in the rewriting phase are outdated and require to be rewritten. the syntax is still under scrutiny and may evolve a lot, in a non-compatible w...

Getting the page URL in NPAPI plugin - Archive of obsolete content
a pointer to the "location" object. npobject *locationobj = variantvalue.value.objectvalue; // create a "href" identifier. identifier = npn_getstringidentifier( "href" ); // get the location property from the location object. bool b2 = npn_getproperty( m_pnpinstance, locationobj, identifier, &variantvalue ); this code is just a rough example. remember to release any references after using them. ...
...tifier = npn_getstringidentifier( "href" ); // get the location property from the location object. bool b2 = npn_getproperty( m_pnpinstance, locationobj, identifier, &variantvalue ); this code is just a rough example. remember to release any references after using them. ...
...ode is just a rough example. remember to release any references after using them. tradeoffs: uses npapi only works in most browsers does not work in mozillas older than firefox 1.0 via npp_newstream from braden mcdaniel: if you want the uri of the resource for which the plug-in is invoked, the most npapi-friendly way to do that is to get it from the npstream that is passed to npp_newstream. tradeoffs: npapi only probably works in all browsers, all versions is sort of backwards (?) advantages / disadvantages ? via dom from benjamin smedberg: the npapi gives you the ability to get access to the nsidomwindow object which contains the current plugin via the npnvdomelement enum passed to npn_getvalue. this returns an addrefed nsidomelement interface pointer from which you can call .owne...
...tages / disadvantages ? via dom from benjamin smedberg: the npapi gives you the ability to get access to the nsidomwindow object which contains the current plugin via the npnvdomelement enum passed to npn_getvalue. this returns an addrefed nsidomelement interface pointer from which you can call .ownerdocument (on nsidomnode), queryinterface that object to nsidom3document, and call .documenturi. tradeoffs: is inherently incompatible with other non-mozilla browsers (i.e. does not work in opera, safari etc.) compatible with older versions of the mozilla (probably back to mozilla 1.0) requires c++ ...

JXON - Archive of obsolete content
based on the parker convention (especially regarding the transformation of tags names into object properties names, the recognition of the typeof of all the collected text content of each tag and the absorption of solitary text and/or cdatasection nodes into primitive values). it is called “parker convention” in opposition to “badgerfish convention”, after the comic parker & badger by cuadrado. see also: badgerfish convention. the following is a transcription of the parker convention paper (version 0.4), from the page “transformingrules” of the xml2json-xslt project site. this convention was written in order to regulate the conversion to json from xslt, so parts of it are futile for javascript. note: on october 29th, 2013, the world wide web consortium relased in a note on offi...
...@value": "gbp" }, { "@type": "hidden", "@name": "amount", "@value": 0 }, { "@type": "hidden", "@name": "name", "@value": "captured" }], "table": { "tr": [{ "th": { "@style": "text-align: right;", "keyvalue": "product:" }, "td": { "span": [{ "input": { "@type": "radio", "@name": "nome", "@id": "rel_tshirt", "@value": "tshirt" }, "label": { "@for": "rel_tshirt", "keyvalue": "t-shirt" }, "@class": "product" }, { "input": { "@type": "radio", "@name": "nome", "@id": "rel_trousers", ...
...uct" }, { "input": { "@type": "radio", "@name": "nome", "@id": "rel_trousers", "@value": "trousers" }, "label": { "@for": "rel_trousers", "keyvalue": "trousers" }, "@class": "product" }, { "input": { "@type": "radio", "@name": "nome", "@id": "rel_pullover", "@value": "pullover" }, "label": { "@for": "rel_pullover", "keyvalue": "pullover" }, "@class": "product" }] } }, { "th": { "@style": "text-align: right;", "keyvalue": "quantity:" ...
...fromcharcode(okeyevent.charcode)); } </script> <input type="hidden" name="instid" value="1234" /> <input type="hidden" name="currency" value="gbp" /> <input type="hidden" name="amount" value="0" /> <input type="hidden" name="name" value="captured" /> <table> <tr> <th style="text-align: right;">product:</th> <td><span class="product"><input type="radio" name="nome" id="rel_tshirt" value="tshirt"/><label for="rel_tshirt">t-shirt</label></span><span class="product"><input type="radio" name="nome" id="rel_trousers" value="trousers"/><label for="rel_trousers">trousers</label></span><span class="product"><input type="radio" name="nome" id="rel_pullover" value="pullover"/><label for="rel_pullover">pullover</label></span> </td> </tr> ...

menuitem.name - Archive of obsolete content
« xul reference home name type: string name radio menuitems with the same name as put into a group. only one menuitem in each radio group can be checked at a time. ...
... « xul reference home name type: string name radio menuitems with the same name as put into a group. only one menuitem in each radio group can be checked at a time. ...
...nce home name type: string name radio menuitems with the same name as put into a group. only one menuitem in each radio group can be checked at a time. ...
...up. only one menuitem in each radio group can be checked at a time. ...

XUL Events - Archive of obsolete content
dingthe popuphiding event is executed when a <menupopup>, <panel> or <tooltip> is about to be hidden.popupshowingthe popupshowing event is executed when a <menupopup>, <panel> or <tooltip> is about to become visible. the default action of the event can be prevented to prevent the popup to appear.popupshownthe popupshown event is executed when a <menupopup>, <panel> or <tooltip> has become visible.radiostatechangethe radiostatechange event is executed when the state of a <radio> element has changed.valuechangethe valuechange event is executed when the value of an element, <progress> for example, has changed. inherited dom events event description blur the opposite ...
.... domnoderemoved this event is sent when a node is removed from an element. if you capture this event at the document level, you can be notified of document changes warning: it should be noted that the addition of any mutation event listeners to a document degrades the performance of subsequent dom operations in that document, and that removing the listeners later does not mitigate or reverse the effect. see mutation events for more details and mutation observers for a more efficient alternative. common xul events event description broadcast ...
...vent to listen to checkbox changes, however, the command event is only sent when the user modifies the value, while the checkboxstatechange event is also sent when a script modifies the checked property of a checkbox. for user changes, the checkboxstatechange event is sent before the command event. the checkboxstatechange event does not bubble. radiostatechange this event is sent when a radio button is selected, either by the user or a script. normally, you would use the command event to listen to radio button selection changes, however, the command event is only sent when the user changes the selected radio button, while the radiostatechange event is also sent when a script modifies the selection. for user...
... this event is sent when a radio button is selected, either by the user or a script. normally, you would use the command event to listen to radio button selection changes, however, the command event is only sent when the user changes the selected radio button, while the radiostatechange event is also sent when a script modifies the selection. for user changes, the radiostatechange event is sent before the command event. the radiostatechange event bubbles so you can also attach the event handler to the enclosing radiogroup. ...

Index - Archive of obsolete content
ements xul properties, xul reference no summary! 798 preferencepanes xul properties, xul reference no summary! 799 preferences xul properties, xul reference no summary! 800 prefpane.preferences xul properties, xul reference no summary! 801 priority xul properties, xul reference no summary! 802 radio.control xul properties, xul reference no summary! 803 radiogroup xul properties, xul reference no summary! 804 readonly xul properties, xul reference no summary! 805 ref xul properties, xul reference no summary! 806 resource xul properties, xul reference no summary! 807 resultspopup xul ...
...xstatechange event is executed when the state of a <checkbox> element has changed. 981 dommenuitemactive the dommenuitemactive event is executed when a <menu> or a <menuitem> has been hovered or highlighted. 982 dommenuiteminactive the dommenuiteminactive event is executed when a <menu> or a <menuitem> in no longer hovered or highlighted. 983 radiostatechange event, events the radiostatechange event is executed when the state of a <radio> element has changed. 984 valuechange event, events the valuechange event is executed when the value of an element, <progress> for example, has changed. 985 broadcast the broadcast event is executed when the attributes of the element (such as a broadcas...
...eturned by the tabbrowser method gettabmodalpromptbox method. 1159 query xul elements, xul reference used to specify the query for a template. the attributes and content of the query are dependent on the type of datasource being used. 1160 queryset xul elements, xul reference a container for query elements when more than one query is used. 1161 radio xul elements, xul reference an element that can be turned on and off. radio buttons are almost always listed together in groups. only one radio button within the same radiogroup may be selected at a time. the user can switch which radio button is turned on by selecting it with the mouse or keyboard. other radio buttons in the same group are turned off. a label, specified with the labe...
... an element that can be turned on and off. radio buttons are almost always listed together in groups. only one radio button within the same radiogroup may be selected at a time. the user can switch which radio button is turned on by selecting it with the mouse or keyboard. other radio buttons in the same group are turned off. a label, specified with the label attribute may be added beside the radio button. 1162 radiogroup xul elements, xul reference a group of radio buttons. only one radio button inside the group can be selected at a time. the radio buttons may either direct children of the radiogroup or descendants. place the radiogroup inside a groupbox if you would like a border or caption for the group. the radiogroup defaults to vertical orientation. 1163 ...

Manipulating Lists - Archive of obsolete content
e at position 4. remember that the first item is 0. the removeitemat() function will remove the item at a specific index. these three methods are also available for several other xul elements and work in the same manner. in fact, these methods are part of the nsidomxulselectcontrolelement interface so any xul elements which implement this interface have these methods. this includes the menulist, radiogroup and tabs elements. for example, to add a new item to a menulist, you can use the same syntax as for a listbox. the right kind of element will be appended in each situation. list selection the nsidomxulselectcontrolelement interface provides two additonal properties, selectedindex and selecteditem. the former returns the index of the selected item while the latter returns the selected ele...
...all"/> </listbox> the select event is fired for a listbox when an item in the list is selected. the select handler here displays an alert containing the label of the selected item in the list. since the select event fired we can assume that an item is selected. in other cases, you may wish to check to ensure that selecteditem is not null before continuing. the select event is also fired when a radio button in a radiogroup is selected and when a tab is selected in a tabs element. however, menulists do not fire the select event; instead you can listen to the command event to handle when an item is selected. for the tabs element, it is often more convenient to use functions of the tabbox element instead. it also has a selectedindex function which will return the index of the selected tab. ho...
...ected tab. however, to get the selected item, use the tabbox's selectedtab property instead. or, use the selectedpanel property to get the selected panel, that is, return the content associated with the tab. changing the selection all of the selection related properties described above may also be assigned a new value to change the selection. in the next example, the selectedindex property of a radiogroup element is changed based on the value entered in a textbox. this code isn't foolproof though; for example it doesn't check if the value entered is out of range. you will want to make sure that you add this kind of error checking. example 3 : source view <script> function doselect(){ var val = document.getelementbyid('number').value; val = number(val); if (val != null) document.
...d of error checking. example 3 : source view <script> function doselect(){ var val = document.getelementbyid('number').value; val = number(val); if (val != null) document.getelementbyid('level').selectedindex = val - 1; } </script> <hbox align="center"> <label value="enter a number from 1 to 3:"/> <textbox id="number"/> <button label="select" oncommand="doselect();"/> </hbox> <radiogroup id="level"> <radio label="excellent"/> <radio label="good"/> <radio label="poor"/> </radiogroup> listboxes also support multiple selection and the functions of the nsidomxulmultiselectcontrolelement interface. this interface provides a number of functions specifically for handling multiple selection. for example the selecteditems property holds a list of the items that are selected...

button - Archive of obsolete content
rtcut key. this should be one of the characters that appears in the label attribute for the element. autocheck type: boolean if this attribute is true or left out, the checked state of the button will be switched each time the button is pressed. if this attribute is false, the checked state must be adjusted manually. when autocheck is true, the button type should be "checkbox" or "radio". checkstate type: integer, values 0, 1, or 2 this attribute may be used to create three state buttons, numbered 0, 1 and 2. when in state 0 or 1, pressing the button will switch to the opposite state. when in state 2, pressing the button will switch to state 0. this means that the button acts like a checkbox except that there is a third state which must be set manually by adjusting th...
... type attribute must be set to checkbox for buttons with a check state. constants for the possible values for this attribute are in the nsidomxulbuttonelement interface. checked type: boolean indicates whether the element is checked or not. use hasattribute() to determine whether this attribute is set instead of getattribute(). for buttons, the type attribute must be set to checkbox or radio for this attribute to have any effect. command type: id set to the id of a command element that is being observed by the element. crop type: one of the values below if the label of the element is too big to fit in its given space, the text will be cropped on the side specified by the crop attribute. an ellipsis will be used in place of the cropped text. if t...
...he changes when pressed. cancel the cancel button which will cancel the operation. help a help button for displaying help about the dialog. disclosure a button to show more information. this might be a button or a disclosure triangle. extra1 an optional additional button. extra2 a second optional additional button. group type: string group name buttons with type="radio" and the same value for their group attribute are put into the same group. only one button from each group can be checked at a time. if the user selects one the buttons, the others in the group are unchecked. icon mozilla 1.8 type: string this attribute should be used to set the usage for common buttons. some platforms display these buttons with a small icon indicating their usage. th...
...ou can also use the value menu-button to create a button with a menu. unlike the menu type, this type requires the user to press the arrow to open the menu, but a different command may be invoked when the main part of the button is pressed. panel similar to the menu type, this opens a popup. place a panel element inside the button. panel elements are popups that support any type of content. radio the button acts like a radio button. only one button in the group can be on a once. repeat this button will fire its command event repeatedly while the mouse button is held down. properties accesskey type: character gets and sets the value of the accesskey attribute. accessibletype type: integer a value indicating the type of access...

groupbox - Archive of obsolete content
pbox. typically, the groupbox will be drawn with a border around it and the caption either above or over the top border, however the actual appearance will be platform specific. on linux, for instance, only the caption appears with no border around the group. more information is available in the xul tutorial. ...
...the groupbox will be drawn with a border around it and the caption either above or over the top border, however the actual appearance will be platform specific. on linux, for instance, only the caption appears with no border around the group. more information is available in the xul tutorial. ...
...der around it and the caption either above or over the top border, however the actual appearance will be platform specific. on linux, for instance, only the caption appears with no border around the group. more information is available in the xul tutorial. ...
...on either above or over the top border, however the actual appearance will be platform specific. on linux, for instance, only the caption appears with no border around the group. more information is available in the xul tutorial. ...

::-ms-fill-lower - Archive of obsolete content
ntly 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. ...
...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. ...
...rties are ignored. ...
...kground-clip background-color background-image background-origin background-repeat background-size border-bottom-color border-bottom-left-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 p...

::-ms-fill-upper - Archive of obsolete content
ntly 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. ...
...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. ...
...rties are ignored. ...
...kground-clip background-color background-image background-origin background-repeat background-size border-bottom-color border-bottom-left-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 p...

::-ms-reveal - Archive of obsolete content
e 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. ...
...e ::-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. ...
...rties are ignored. ...
...kground-clip background-color background-image background-origin background-repeat background-size border-bottom-color border-bottom-left-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 p...

::-ms-thumb - Archive of obsolete content
ol 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. ...
...lue. 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. ...
...rties are ignored. ...
...kground-clip background-color background-image background-origin background-repeat background-size border-bottom-color border-bottom-left-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 p...

::-ms-ticks-after - Archive of obsolete content
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. ...
...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. ...
...rties are ignored. ...
...kground-clip background-color background-image background-origin background-repeat background-size border-bottom-color border-bottom-left-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 p...

::-ms-ticks-before - Archive of obsolete content
ser 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. ...
...o 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. ...
...rties are ignored. ...
...kground-clip background-color background-image background-origin background-repeat background-size border-bottom-color border-bottom-left-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 p...

::-ms-track - Archive of obsolete content
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. ...
... 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. ...
...rties are ignored. ...
...kground-clip background-color background-image background-origin background-repeat background-size border-bottom-color border-bottom-left-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 p...

::-ms-value - Archive of obsolete content
at 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. ...
...e 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. ...
...rties are ignored. ...
...kground-clip background-color background-image background-origin background-repeat background-size border-bottom-color border-bottom-left-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 p...

Archive of obsolete content
or for "reasons," your company is required to use very old software and you need to build web content that runs on that software. ...
...nsion many of the concepts introduced here apply to any xul-based application; however, to keep from getting completely overwhelmed, we're going to focus specifically on firefox. css3 css3 is the latest evolution of the cascading style sheets language and aims at extending css2.1. it brings a lot of long-awaited novelties, like rounded corners, shadows, gradients, transitions or animations, as well as new layouts like multi-columns, flexible box or grid layouts. element events archived event pages firefox developer tools these are articles related to the firefox developer tools, which are no longer current. gecko compatibility handbook ** notes ** ...
... gecko. getting the page url in npapi plugin sometimes, you want to restrict an npapi plugin to be loadable only from a certain url or domain or scheme. or whenever you make network requests yourself, you almost always need to enforce same-origin policy. index of archived content inner-browsing extending the browser navigation paradigm this article is the version from 2003 with slight modifications (no images and no links to samples). it's here for reference. install.js see also this article from xulplanet's main tutorial. jxon jxon (lossless javascript xml object notation) is a generic name by which is defined the representation of javascript objects using xml. ther...
... information. rss really simple syndication (rss) is a popular html-like xml-based data format used for syndication. rss has a sordid history and a multitude of different incompatible rss versions. (some being based on rdf, but most only being based on xml.) nonetheless, rss is an extremely popular format that is used for syndicating news, blog posts, ipradio, and iptv, with an amazing amount of momentum. sax sax, short forsimple api for xml, is a parsing api. sax was the first widely adopted api for xml in java, and later implemented in several other programming language environments. starting with firefox 2, a sax parser is available to xul applications and extensions. for more information, please see ...

bootstrap.js - Extensions
w contains the required methods in vsdoc format. ...
...thods in vsdoc format. ...
... addon_upgrade /// addon_downgrade } function shutdown(data, reason) { /// bootstrap data structure @see /docs/extensions/bootstrapped_extensions#bootstrap_data /// string id /// string version /// nsifile installpath /// nsiuri resourceuri /// /// reason types: /// app_shutdown /// addon_disable /// addon_uninstall /// addon_upgrade /// addon_downgrade } function install(data, reason) { /// bootstrap data structure @see /docs/extensions/bootstrapped_extensions#bootstrap_data /// string id /// string version /// nsifile installpath /// nsiuri resourceuri /// /// reason types: /// addon_install /// addon_upgrade /// addon_downgrade } function uninstall(data, reason)...
... reason types: /// addon_install /// addon_upgrade /// addon_downgrade } function uninstall(data, reason) { /// bootstrap data structure @see /docs/extensions/bootstrapped_extensions#bootstrap_data /// string id /// string version /// nsifile installpath /// nsiuri resourceuri /// /// reason types: /// addon_uninstall /// addon_upgrade /// addon_downgrade } ...

How CSS is structured - Learn web development
for transform, such as rotate(). <div class="box"></div> .box { margin: 30px; width: 100px; height: 100px; background-color: rebeccapurple; transform: rotate(0.8turn) } the output from the above code looks like this: look up different values of properties listed below. write css rules that apply styling to different html elements: transform background-image, in particular gradient values color, in particular rgb/rgba/hsl/hsla values @rules css @rules (pronounced "at-rules") provide instruction for what css should perform or how it should behave. some @rules are simple with just a keyword and a value. for example, @import imports a stylesheet into another css stylesheet: @import 'styles2.css'; one common @rule that you are likely to encounter is @media, which is ...
...{ /* let's special case the global font size. on large screen or window, we increase the font size for better readability */ body { font-size: 130%; } } h1 {font-size: 1.5em;} /* handle specific elements nested in the dom */ /* -------------------------------------------------------------------------------------------- */ div p, #id:first-line { background-color: red; border-radius: 3px; } div p { margin: 0; padding: 1em; } div p + p { padding-top: 0; } "commenting out" code is also useful for temporarily disabling sections of code for testing. in the example below, the rules for .special are disabled by "commenting out" the code. /*.special { color: red; }*/ p { color: blue; } add comments to your css. white space white space means actual spaces, tabs ...
...ration (and rule start/end) has its own line. this is arguably a good way to write css. it makes it easier to maintain and understand css. body { font: 1em/150% helvetica, arial, sans-serif; padding: 1em; margin: 0 auto; max-width: 33em; } @media (min-width: 70em) { body { font-size: 130%; } } h1 { font-size: 1.5em; } div p, #id:first-line { background-color: red; border-radius: 3px; } div p { margin: 0; padding: 1em; } div p + p { padding-top: 0; } the next example shows the equivalent css in a more compressed format. although the two examples work the same, the one below is more difficult to read. body {font: 1em/150% helvetica, arial, sans-serif; padding: 1em; margin: 0 auto; max-width: 33em;} @media (min-width: 70em) { body {font-size: 130%;} } h1 {f...
...ng-top: 0; } the next example shows the equivalent css in a more compressed format. although the two examples work the same, the one below is more difficult to read. body {font: 1em/150% helvetica, arial, sans-serif; padding: 1em; margin: 0 auto; max-width: 33em;} @media (min-width: 70em) { body {font-size: 130%;} } h1 {font-size: 1.5em;} div p, #id:first-line {background-color: red; border-radius: 3px;} div p {margin: 0; padding: 1em;} div p + p {padding-top: 0;} for your own projects, you will format your code according to personal preference. for team projects, you may find that a team or project has its own style guide. important: though white space separates values in css declarations, property names never have white space. for example, these declarations are valid css: marg...

HTML forms in legacy browsers - Learn web development
one rule of thumb: keep it simple, also known as the "kiss principal". there are so many cases where we want forms that are "nicer" or "with advanced functionality", but building efficient html forms is not a question of design or technology. rather, it's about simplicity, intuitivess, and ease of user interaction. the tutorial, forms usability on ux for the masses, explains it well. graceful degradation is web developer's best friend graceful degradation and progressive enhancement are development patterns that allow you to build great stuff by supporting a wide range of browsers at the same time. when you build something for a modern browser, and you want to be sure it will work, one way or another, on legacy browsers, you are performing graceful degradation. let's see some examples rela...
...if a browser does not know the value of the type attribute of an <input> element, it will fall back as if the value were text. ...
...me 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 across browsers. you can declare appearance: none; to remove the browser styles, but that generally defeats the purpose: as you lose all styling, removing the default look and feel your visitors are used to. to summarize, when it comes to styling form control widgets, the side effects of styling them with css can be unpredictabl...
...at depends on that api is loaded both : app.js, // once both files are loaded, this function is called in order to initialize the app. complete : function () { app.init(); } }); the modernizr team conveniently maintains a list of great polyfills. just pick what you need. note: modernizr has other awesome features to help you in dealing with unobstructive javascript and graceful degradation techniques. please read the modernizr documentation. pay attention to performance even though scripts like modernizr are very aware of performance, loading a 200 kilobyte polyfill can affect the performance of your application. this is especially critical with legacy browsers; many of them have a very slow javascript engine that can make the execution of all your polyfills painful for the...

Silly story generator - Learn web development
ram, which does the following: generates a silly story when the "generate random story" button is pressed. replaces the default name "bob" in the story with a custom name, only if a custom name is entered into the "enter custom name" text field before the generate button is pressed. converts the default us weight and temperature quantities and units in the story into uk equivalents if the uk radio button is checked before the generate button is pressed. will generate another random silly story if you press the button again (and again...) the following screenshot shows an example of what the finished program should output: 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 nee...
...so you might need to make one of the calls twice. inside the first if block, add another string replacement method call to replace the name 'bob' found in the newstory string with the name variable. in this block we are saying "if a value has been entered into the customname text input, replace bob in the story with that custom name." inside the second if block, we are checking to see if the uk radio button has been selected. if so, we want to convert the weight and temperature values in the story from pounds and fahrenheit into stones and centigrade. what you need to do is as follows: look up the formulae for converting pounds to stone, and fahrenheit to centigrade. inside the line that defines the weight variable, replace 300 with a calculation that converts 300 pounds into stone...
... just under the two variable definitions, add two more string replacement lines that replace '94 fahrenheit' with the contents of the temperature variable, and '300 pounds' with the contents of the weight variable. ...
... just under the two variable definitions, add two more string replacement lines that replace '94 fahrenheit' with the contents of the temperature variable, and '300 pounds' with the contents of the weight variable. ...

Inheritance in JavaScript - Learn web development
on. they have a series of attributes that are common to all people; in this section we'll create our specialized teacher class, making it inherit from person using modern class syntax. this is called creating a subclass or subclassing. to create a subclass we use the extends keyword to tell javascript the class we want to base our class on, class teacher extends person { constructor(subject, grade) { this.subject = subject; this.grade = grade; } } but there's a little catch. unlike old-school constructor functions where the new operator does the initialization of this to a newly-allocated object, this isn't automatically initialized for a class defined by the extends keyword, i.e the sub-classes. therefore running the above code will give an error: uncaught referenceerror: m...
...ass constructor, i.e the constructor function of the class from which you're extending. here we are extending the person class — the teacher sub-class is an extension of the person class. so for teacher, the this initialization is done by the person constructor. to call the parent constructor we have to use the super() operator, like so: class teacher extends person { constructor(subject, grade) { super(); // now 'this' is initialized by calling the parent constructor. this.subject = subject; this.grade = grade; } } there is no point having a sub-class if it doesn't inherit properties from the parent class. it is good then, that the super() operator also accepts arguments for the parent constructor. looking back to our person constructor, we can see it has the followin...
...; this.age = age; this.gender = gender; this.interests = interests; } since the super() operator is actually the parent class constructor, passing it the necessary arguments of the parent class constructor will also initialize the parent class properties in our sub-class, thereby inheriting it: class teacher extends person { constructor(first, last, age, gender, interests, subject, grade) { super(first, last, age, gender, interests); // subject and grade are specific to teacher this.subject = subject; this.grade = grade; } } now when we instantiate teacher object instances, we can call methods and properties defined on both teacherand person as we'd expect: let snape = new teacher('severus', 'snape', 58, 'male', ['potions'], 'dark arts', 5); snape.greeting(...
... getters and setters. the class starts the same as it was the last time we looked at it. getters and setters work in pairs. a getter returns the current value of the variable and its corresponding setter changes the value of the variable to the one it defines. the modified teacher class looks like this: class teacher extends person { constructor(first, last, age, gender, interests, subject, grade) { super(first, last, age, gender, interests); // subject and grade are specific to teacher this._subject = subject; this.grade = grade; } get subject() { return this._subject; } set subject(newsubject) { this._subject = newsubject; } } in our class above we have a getter and setter for the subject property. we use _ to create a separate value in which to s...

sslerr.html
this page is part of the ssl reference that we are migrating into the format described in the mdn style guide. if you are inclined to help with this migration, your help would be very much appreciated. upgraded documentation may be found in the current nss reference nss and ssl error codes chapter 8 nss and ssl error codes nss error codes are retrieved using the nspr function pr_geterror. in addition to the error codes defined by nspr, pr_geterror retrieves the error codes described in this chapter. ...
...sing the nspr function pr_geterror. in addition to the error codes defined by nspr, pr_geterror retrieves the error codes described in this chapter. ssl error codes sec error codes ssl error codes table 8.1 error codes defined in sslerr.h constant value description ssl_error_export_only_server -12288 "unable to communicate securely. ...
...the local system was configured to support only the cipher suites permitted for export use. ...
...ify_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 key exchange algorithm. such a connection cannot be permitted without ...

nsINavBookmarkObserver
inherits from: nsisupports last changed in gecko 21.0 (firefox 21.0 / thunderbird 21.0 / seamonkey 2.18) method overview void onbeforeitemremoved(in long long aitemid, in unsigned short aitemtype, in long long aparentid, in acstring aguid, in acstring aparentguid); obsolete since gecko 21.0 void onbeginupdatebatch(); void onendupdatebatch(); void onfolderadded(in print64 folder, in print64 parent, in print32 index); obsolete since gecko 1.9 void onfolderchanged(in print64 folder, in acstring property); obsolete since gecko 1.9 void onfoldermoved(in print64 folder, in print64 oldparent, in print32 oldindex, in print64 newparent, in print32 newindex); obsolete since gecko 1.9 void onfolderremoved(in print64 folder, in print6...
... this method notifies this ob...
...will be called at the completion of changes. during a batch the observer should do its best to reduce the work done to handle notifications, since multiple changes are going to happen in a short timeframe. void onbeginupdatebatch(); parameters none. onendupdatebatch() this method notifies this observer that a batch transaction has ended. void onendupdatebatch(); parameters none. onfolderadded() obsolete since gecko 1.9 (firefox 3) notify this observer that a bookmark folder has been added. void onfolderadded( in print64 folder, in print64 parent, in print32 index ); parameters folder the id of the folder that was added. parent the id of the folder's parent. index the folder's index inside its parent. onfolderchanged() ...
... of the visit. atransitiontype the transition for the visit. see nsinavbookmarksservice.transaction constants for a list of possible values. auri the nsiuri for this bookmark. aparentid the id of the folder containing the item. aguid the unique id associated with the item. aparentguid the unique id associated with the item's parent. onseparatoradded() obsolete since gecko 1.9 (firefox 3) notify this observer that a separator has been added. void onseparatoradded( in print64 parent, in print32 index ); parameters parent the id of the separator's parent. index the separator's index inside its parent. onseparatorremoved() obsolete since gecko 1.9 (firefox 3) notify this observ...

Intensive JavaScript - Firefox Developer Tools
oaches to fixing them. the first is to split long-running functions into pieces and use requestanimationframe to schedule each piece, and the second is to run the whole function in a separate thread using a web worker. if you want to play along you can find the demo website here. there's also a video version of this walkthrough: the demo website looks like this: it has three controls: a radio button group to control how to run the javascript: as a single blocking operation in the main thread, as a series of smaller operations in the main thread using requestanimationframe(), or in another thread using a worker. a button to run the javascript, labeled "do pointless computations!". a button to start and stop some css animations. this just gives the browser some background tasks to p...
...trol how to run the javascript: as a single blocking operation in the main thread, as a series of smaller operations in the main thread using requestanimationframe(), or in another thread using a worker. a button to run the javascript, labeled "do pointless computations!". a button to start and stop some css animations. this just gives the browser some background tasks to perform. leaving the radio button set to "use blocking call in main thread", make a recording: press the "start animations" button start recording a performance profile press "do pointless computations!" two or three times stop recording the profile exactly what you see will vary from one machine to another, but it will be something like this: the top half of this is the waterfall overview. it gives us a compr...
...this time, the recording should look something like this: this is exactly what we might have expected to see. instead of a single solid orange block, each button-press shows up as a long sequence of very short orange blocks. the orange blocks appear one frame apart, and each one represents one of the functions called fro...
...t prime isprime = false; break; } } if (isprime) { primes.push(candidate); } } return primes; } in the worker, we have to listen for a message telling us to start, and send a "done" message back when we are done. the code that actually performs the computations is exactly the same as the original code. so how does this version perform? switch the radio button to "use a worker", and capture a new profile. you should see something like this: in this profile we pushed the button three times. compared with the original, each button-press is visible in the overview as two very short orange markers: the dopointlesscomputationsinworker() function that handles the click event and starts the worker's processing the handleworkercompletion() func...

Using the CSS properties and values API - Web APIs
en a property isn't registered, the browser doesn't know how to treat it, so it assumes that any value can be used and therefore can't animate it. ...
...imate it! ...
... with the registered property the transition works, but that it doesn't with the unregistered property! ...
...ed: #c0ffee; background-image: linear-gradient(to right, #fff, var(--unregistered)); transition: --unregistered 1s ease-in-out; } .unregistered:hover, .unregistered:focus { --unregistered: #b4d455; } <button class="registered">background registered</button> <button class="unregistered">background not registered</button> .registered { --registered: #c0ffee; background-image: linear-gradient(to right, #fff, var(--registered)); transition: --registered 1s ease-in-out; } .registered:hover, .registered:focus { --registered: #b4d455; } .unregistered { --unregistered: #c0ffee; background-image: linear-gradient(to right, #fff, var(--unregistered)); transition: --unregistered 1s ease-in-out; } .unregistered:hover, .unregistered:focus { --unregistered: #b4d455; } button {...

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

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

A basic 2D WebGL animation example - Web APIs
ed by calling gl.getshaderinfolog(). finally, the compiled shader is returned to the caller (which is the buildshaderprogram() function. drawing and animating the scene the animatescene() function is called to render each animation frame. ...
...rned to the caller (which is the buildshaderprogram() function. drawing and animating the scene the animatescene() function is called to render each animation frame. ...
...erprogram() function. drawing and animating the scene the animatescene() function is called to render each animation frame. ...
... 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 the location of the point on the unit circle located at the angle currentangle. useprogram() is called to activate the glsl shading program we established previously. then we obtain the locations of each of the uniforms used to share inf...

Geometry and reference spaces in WebXR - Web APIs
er 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. ...
... 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. ...
...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. ...
...ed 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 degreestoradians = (deg) => deg * radians_per_degree; let radianstodegrees = (rad) => rad / radians_per_degree; times and durations note that for security reasons, domhighrestimestamp usually introduces a small amount of imprecision to the clock in order to prevent it from being used in fingerprinting and timing-based attacks. all times and durations in ...

Using XMLHttpRequest - Web APIs
detecting the correct one is non-trivial. */ /* field type is not file or is file but is empty */ this.segments.push( this.technique === 3 ? /* enctype is multipart/form-data */ "content-disposition: form-data; name=\"" + ofield.name + "\"\r\n\r\n" + ...
...ldset> </form> <h3>enctype: multipart/form-data</h3> <form action="register.php" method="post" enctype="multipart/form-data" onsubmit="ajaxsubmit(this); return false;"> <fieldset> <legend>upload example</legend> <p> first name: <input type="text" name="firstname" /><br /> last name: <input type="text" name="lastname" /><br /> sex: <input id="sex_male" type="radio" name="sex" value="male" /> <label for="sex_male">male</label> <input id="sex_female" type="radio" name="sex" value="female" /> <label for="sex_female">female</label><br /> password: <input type="password" name="secret" /><br /> what do you prefer: <select name="image_type"> <option>books</option> <option>cinema</option> <option>tv</op...
...em]; if (!ofield.hasattribute("name")) { continue; } sfieldtype = ofield.nodename.touppercase() === "input" ? ...
...mdata api.</p> <h3>enctype: multipart/form-data</h3> <form action="register.php" method="post" enctype="multipart/form-data" onsubmit="ajaxsubmit(this); return false;"> <fieldset> <legend>upload example</legend> <p> first name: <input type="text" name="firstname" /><br /> last name: <input type="text" name="lastname" /><br /> sex: <input id="sex_male" type="radio" name="sex" value="male" /> <label for="sex_male">male</label> <input id="sex_female" type="radio" name="sex" value="female" /> <label for="sex_female">female</label><br /> password: <input type="password" name="secret" /><br /> what do you prefer: <select name="image_type"> <option>books</option> <option>cinema</option> <option>tv</op...

Using ARIA: Roles, states, and properties - Accessibility
nd the appropriate states and properties to an element during its life-cycle, unless the element already has appropriate aria semantics (via use of an appropriate html element). addition of aria semantics only exposes extra information to a browser's accessibility api, and does not affect a page's dom. ...
...d properties to an element during its life-cycle, unless the element already has appropriate aria semantics (via use of an appropriate html element). addition of aria semantics only exposes extra information to a browser's accessibility api, and does not affect a page's dom. ...
...enuitemradio option progressbar radio scrollbar searchbox separator (when focusable) slider spinbutton switch tab tabpanel textbox treeitem composite roles the techniques below describe each composite role as well as their required and optional child roles. ...
...tion progressbar radio scrollbar searchbox separator (when focusable) slider spinbutton switch tab tabpanel textbox treeitem composite roles the techniques below describe each composite role as well as their required and optional child roles. ...

WAI-ARIA Roles - Accessibility
ement has been dynamically updated. screen readers will instantly start reading out the updated content when the role is added. if the user is expected to close the alert, then the alertdialog role should be used instead.aria: application rolethe application role indicates to assistive technologies that an element and all of its children should be treated similar to a desktop application, and no traditional html interpretation techniques should be used. this role should only be used to define very dynamic and desktop-like web applications.aria: article rolethe article role indicates a section of a page that could easily stand on its own on a page, in a document, or on a website. it is usually set on related content items such as comments, forum posts, newspaper articles or other items grouped...
...s/web/accessibility/aria/aria_techniques). ones for which the first draft is completed have been removed from the below list. ...
...t draft is completed have been removed from the below list. ...
...ed have been removed from the below list. ...

Shorthand properties - CSS: Cascading Style Sheets
-left matches the order of the consonant of the word trouble: trbl) (you can also remember it as the order that the hands would rotate on a clock: 1em starts in the 12 o'clock position, then 2em in the 3 o'clock position, then 3em in the 6 o'clock position, and 4em in the 9 o'clock position). similarly, shorthands handling properties related to corners of a box, like border-radius, always use a consistent 1-to-4-value syntax representing those corners: the 1-value syntax: border-radius: 1em — the unique value represents all corners the 2-value syntax: border-radius: 1em 2em — the first value represents the top left and bottom right corner, the second the top right and bottom left ones. the 3-value synt...
... use a consistent 1-to-4-value syntax representing those corners: the 1-value syntax: border-radius: 1em — the unique value represents all corners the 2-value syntax: border-radius: 1em 2em — the first value represents the top left and bottom right corner, the second the top right and bottom left ones. ...
... background properties a background with the following properties ... ...
...css syntax, at-rule, comments, specificity and inheritance, the box, layout modes and visual formatting models, and margin collapsing, or the initial, computed, resolved, specified, used, and actual values. definitions of value syntax, shorthand properties and replaced elements. ...

<color> - CSS: Cascading Style Sheets
f5f5f5 yellowgreen #9acd32 css color module level 4 rebeccapurple #663399 transparent keyword the transparent keyword represents a fully transparent color. this makes the background behind the colored item completely visible. technically, transparent is a shortcut for rgba(0,0,0,0). compatibility note: to prevent unexpected behavior, such as in a <gradient>, the current css spec states that transparent should be calculated in the alpha-premultiplied color space. however, be aware that older browsers may treat it as black with an alpha value of 0. historical note: transparent wasn't a true color in css level 2 (revision 1). it was a special keyword that could be used instead of a regular <color> value on two css properties: background and bor...
...u want multiple shades of a single hue). syntax hsl colors are expressed through the functional hsl() and hsla() notations. note: as of css colors level 4, hsla() is an alias for hsl(). in browsers that implement the level 4 standard, they accept the same parameters and behave the same way. functional notation: hsl[a](h, s, l[, a]) h (hue) is an <angle> of the color circle given in degs, rads, grads, or turns in css color module level 4. when written as a unitless <number>, it is interpreted as degrees, as specified in css color module level 3. by definition, red=0deg=360deg, with the other colors spread around the circle, so green=120deg, blue=240deg, etc. as an <angle>, it implicitly wraps around such that -120deg=240deg, 480deg=120deg, -1turn=1turn, etc. s (saturation) and l (lig...
...und color. -moz-default-color user's preference for the text color. -moz-hyperlinktext user's preference for the text color of unvisited links. should be used with the default document background color. -moz-visitedhyperlinktext user's preference for the text color of visited links. should be used with the default document background color. interpolation in animations and gradients, <color> values are interpolated on each of their red, green, and blue components. each component is interpolated as a real, floating-point number. note that interpolation of colors happens in the alpha-premultiplied srgba color space to prevent unexpected gray colors from appearing. in animations, the interpolation's speed is determined by the timing function. accessibility considerations ...
...en */ /* whitespace syntax */ rgba(51 170 51 / 0.4) /* 40% opaque green */ rgba(51 170 51 / 40%) /* 40% opaque green */ /* functional syntax with floats value */ rgba(255, 0, 153.6, 1) rgba(1e2, .5e1, .5e0, +.25e2%) hsl syntax variations /* these examples all specify the same color: a lavender. */ hsl(270,60%,70%) hsl(270, 60%, 70%) hsl(270 60% 70%) hsl(270deg, 60%, 70%) hsl(4.71239rad, 60%, 70%) hsl(.75turn, 60%, 70%) /* these examples all specify the same color: a lavender that is 15% opaque. */ hsl(270, 60%, 50%, .15) hsl(270, 60%, 50%, 15%) hsl(270 60% 50% / .15) hsl(270 60% 50% / 15%) fully saturated colors notation description live hsl(0, 100%, 50%) red hsl(30, 100%, 50%) orange hsl(60, 100%, 50%) yellow ...

mix-blend-mode - CSS: Cascading Style Sheets
d-mode values <div class="grid"> <div class="col"> <div class="note">blending in isolation (no blending with the background)</div> <div class="row isolate"> <div class="cell"> normal <div class="container normal"> <div class="group"> <div class="item firefox"></div> <svg viewbox="0 0 150 150"> <defs> <lineargradient id="red"> <stop offset="0" stop-color="hsl(0,100%,50%)" /> <stop offset="100%" stop-color="hsl(0,0%,100%)" /> </lineargradient> <lineargradient id="green"> <stop offset="0" stop-color="hsl(120,100%,50%)" /> <stop offset="100%" stop-color="hsl(120,0%,100%)" /> </linearg...
...ient id="red"> <stop offset="0" stop-color="hsl(0,100%,50%)" /> <stop offset="100%" stop-color="hsl(0,0%,100%)" /> </lineargradient> <lineargradient id="green"> <stop offset="0" stop-color="hsl(120,100%,50%)" /> <stop offset="100%" stop-color="hsl(120,0%,100%)" /> </lineargradient> <lineargradient id="blue"> <stop offset="0" stop-color="hsl(240,100%,50%)" /> <stop offset="100%" stop-color="hsl(240,0%,100%)" /> </lineargradient> </defs> <ellipse class="item r" cx="75" cy="75" rx="25" ry="70"></ellipse> <ellipse class="item g" cx="75" cy="75" rx="25" ry="70"><...
...to; flex-direction: column; height: auto; } .cell { margin: .5em; padding: .5em; background-color: #fff; overflow: hidden; text-align: center; } .note { background: #fff3d4; padding: 1em; margin: .5em .5em 0; font: .8em sans-serif; text-align: left; white-space: nowrap; } .note + .row .cell { margin-top: 0; } .container { position: relative; background: linear-gradient(to right, #000 0%, transparent 50%, #fff 100%), linear-gradient(to bottom, #ff0 0%, #f0f 50%, #0ff 100%); width: 150px; height: 150px; margin: 0 auto; } .r { transform-origin: center; transform: rotate(-30deg); fill: url(#red); } .g { transform-origin: center; transform: rotate(90deg); fill: url(#green); } .b { transform-origin: center; transform: rotate...
...de: hue; } .saturation .item { mix-blend-mode: saturation; } .color .item { mix-blend-mode: color; } .luminosity .item { mix-blend-mode: luminosity; } using mix-blend-mode with html html <div class="isolate"> <div class="circle circle-1"></div> <div class="circle circle-2"></div> <div class="circle circle-3"></div> </div> css .circle { width: 80px; height: 80px; border-radius: 50%; mix-blend-mode: screen; position: absolute; } .circle-1 { background: red; } .circle-2 { background: lightgreen; left: 40px; } .circle-3 { background: blue; left: 20px; top: 40px; } .isolate { isolation: isolate; /* without isolation, the background color will be taken into account */ position: relative; } result using mix-blend-mode with svg svg <svg> <g ...

Event reference
"abort", or "load" have been dispatched). loadstart progress has begun. progress in progress. timeout progression is terminated due to preset time expiring. storage events change (see non-standard events) storage update events checking downloading error noupdate obsolete updateready value 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(). svg events svgabort svgerror svgload svgresize svgscroll svgunload svgzoom database events abort blocked compl...
...atechange 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(). ...
... touchmove touchevent touch events a touch point is moved along the touch surface. touchstart touchevent touch events a touch point is placed on the touch surface. transitionend transitionevent css transitions a css transition has completed. unload uievent dom l3 the document or a dependent resource is being unloaded. upgradeneeded indexeddb an attempt was made to open a database with a version number higher than its current version. a versionchange transaction has been created. userproximity userproximityevent proximity sensor fresh data is available from a proximity sensor (indicates whether the nearby object is near the device or not). voiceschanged event web speech a...
... popuphidden popupevent xul a menupopup, panel, or tooltip has been hidden. popuphiding popupevent xul a menupopup, panel, or tooltip is about to be hidden. popupshowing popupevent xul a menupopup, panel, or tooltip is about to become visible. popupshown popupevent xul a menupopup, panel, or tooltip has become visible. radiostatechange xul the state of a radio has been changed either by a user action or by a script (useful for accessibility). valuechange xul the value of an element has changed (a progress bar, for example; useful for accessibility). add-on-specific events event name event type specification fired when... mozswipegesture ad...

<input type="button"> - HTML: Hypertext Markup Language
e.pa...
...e.pagex : e.clientx + (doc...
... living standard html5the definition of '<input type="button">' in that specification. recommendation ...
... living standard html5the definition of '<input type="button">' in that specification. recommendation ...

Referrer-Policy - HTTP
ontrols how much referrer information (sent via the referer header) should be included with requests. header type response header forbidden header name no syntax the original header name referer is a misspelling of the word "referrer". the referrer-policy header does not share this misspelling. ...
...the origin, path, and querystring of the url are sent as a referrer when the protocol security level stays the same (http→http, https→https) or improves (http→https), but isn't sent to less secure destinations (https→http). ...
... elements: <a href="http://example.com" referrerpolicy="origin"> alternatively, a noreferrer link relation on an a, area, or link element can be set: <a href="http://example.com" rel="noreferrer"> integration with css css can fetch resources referenced from stylesheets. ...
...licy (no-referrer-when-downgrade), unless it's overwritten via a referrer-policy http header on the css stylesheet’s response. for <style> elements or style attributes, the owner document's referrer policy is used. ...

About JavaScript - JavaScript
what is javascript? javascript® (often shortened to js) is a lightweight, interpreted, object-oriented language with first-class functions, and is best known as the scripting language for web pages, but it's used in many non-browser environments as well. it is a prototype-based, multi-paradigm scripting language that is dynamic, and supports object-oriented, imperative, and functional programming styles. javascript runs on the client side of the web, which can be used to design / program how the web pages behave on the occurrence of an event. javascript is an easy to learn and also powerful scripting language, widely used for controlling web page behavior. contrary to popular misconception, javascript is not "interpreted java". in a nutshell, javascript is a dynamic scripting language su...
...as:- google's v8, which is used in the google chrome browser and recent versions of opera browser. this is also the engine used by node.js. the javascriptcore (squirrelfish/nitro) used in some webkit browsers such as apple safari. carakan in old versions of opera. the chakra engine used in internet explorer (although the language it implements is formally called "jscript" in order to avoid trademark issues). each of mozilla's javascript engines expose a public api which application developers can use to integrate javascript into their software. by far, the most common host environment for javascript is web browsers. web browsers typically use the public api to create host objects responsible for reflecting the dom into javascript. another common application for javascript is as a (we...
...and other countries. ...
...and other countries. ...

Intl.Locale.prototype.numberingSystem - JavaScript
dth digits geor georgian numerals — algorithmic gong gunjala gondi digits gonm masaram gondi digits grek greek upper case numerals — algorithmic greklow greek lower case numerals — algorithmic gujr gujarati digits guru gurmukhi digits hanidays han-character day-of-month numbering for lunar/other traditional calendars hanidec positional decimal system using chinese number ideographs as digits hans simplified chinese numerals — algorithmic hansfin simplified chinese financial numerals — algorithmic hant traditional chinese numerals — algorithmic hantfin traditional chinese financial numerals — algorithmic hebr hebre...
... native native digits newa newa digits nkoo n'ko digits olck ol chiki digits orya oriya digits osma osmanya digits rohg hanifi rohingya digits roman roman upper case numerals — algorithmic romanlow roman lowercase numerals — algorithmic saur saurashtra digits shrd sharada digits sind khudawadi digits sinh sinhala lith digits sora sora_sompeng digits sund sundanese digits takr takri digits talu new tai lue digits taml tamil numerals — algorithmic tamldec modern tamil decimal digits telu telugu digits thai thai digits tirh tirhuta di...
...nu is considered a locale string "extension subtag". these subtags add addi...
...nu is considered a locale string "extension subtag". these subtags add additional data ...

Math - JavaScript
whether x is positive, negative, or zero. math.sin(x) returns the sine of x. math.sinh(x) returns the hyperbolic sine of x. math.sqrt(x) returns the positive square root of x. math.tan(x) returns the tangent of x. math.tanh(x) returns the hyperbolic tangent of x. math.trunc(x) returns the integer portion of x, removing any fractional digits. ...
...f x. math.sqrt(x) returns the positive square root of x. math.tan(x) returns the tangent of x. math.tanh(x) returns the hyperbolic tangent of x. math.trunc(x) returns the integer portion of x, removing any fractional digits. examples converting between degrees and radians the trigonometric functions sin(), cos(), tan(), asin(), acos(), atan(), and atan2() expect (and return) angles in radians. ...
... removing any fractional digits. examples converting between degrees and radians the trigonometric functions sin(), cos(), tan(), asin(), acos(), atan(), and atan2() expect (and return) angles in radians. since humans tend to think in degrees, and some functions (such as css transforms) can accept degrees, it is a good idea to keep functions handy that convert between the two: function degtorad(degrees) { return degrees * (math.pi / 180); }; function radtodeg(rad) { return rad / (math.pi / 180); }; calculating the height of an equalateral triangle if we want to calculate the height of an equalateral triangle, and we know its side length is 100, we can use the formulae length of the adjacent multiplied by the tangent of the angle is equal to the opposite. in javascript, we can ...
...}; function radtodeg(rad) { return rad / (math.pi / 180); }; calculating the height of an equalateral triangle if we want to calculate the height of an equalateral triangle, and we know its side length is 100, we can use the formulae length of the adjacent multiplied by the tangent of the angle is equal to the opposite. in javascript, we can do this with the following: 50 * math.tan(degtorad(60)). we use our degtorad() function to convert 60 degrees to radians, as math.tan() expects an input value in radians. returning a random integer between two bounds this can be achieved with a combination of math.random() and math.floor(): function random(min, max) { const num = math.floor(math.random() * (max - min + 1)) + min; return num; } random(1, 10); specifications spe...

Object.prototype.toString() - JavaScript
trates this: const o = new object(); o.tostring(); // returns [object object] note: starting in javascript 1.8.5, tostring() called on null returns [object null], and undefined returns [object undefined], as defined in the 5th edition of ecmascript and subsequent errata. see using tostring() to detect object class. ...
... o = new object(); o.tostring(); // returns [object object] note: starting in javascript 1.8.5, tostring() called on null returns [object null], and undefined returns [object undefined], as defined in the 5th edition of ecmascript and subsequent errata. see using tostring() to detect object class. ...
...t object] note: starting in javascript 1.8.5, tostring() called on null returns [object null], and undefined returns [object undefined], as defined in the 5th edition of ecmascript and subsequent errata. see using tostring() to detect object class. parameters for numbers and bigints tostring() takes an optional parameter radix the value of radix must be minimum 2 and maximum 36. ...
... examples overriding the default tostring method you can create a function to be called in place of the default tostring() method. the tostring() method takes no arguments and should return a string. ...

color-interpolation - SVG: Scalable Vector Graphics
the color-interpolation attribute specifies the color space for gradient interpolations, color animations, and alpha compositing. note: for filter effects, the color-interpolation-filters property controls which color space is used. the color-interpolation property chooses between color operations occurring in the srgb color space or in a (light energy linear) linearized rgb color space. having chosen the appropriate color space, component-wise linear interpolation is used. when a child element is blended into a background, the value of the color-interpolation property on the child determines the type of blending, not the value of the color-interpolation on the parent. ...
...lor operations occurring in the srgb color space or in a (light energy linear) linearized rgb color space. having chosen the appropriate color space, component-wise linear interpolation is used. when a child element is blended into a background, the value of the color-interpolation property on the child determines the type of blending, not the value of the color-interpolation on the parent. for gradients which make use of the href or the deprecated xlink:href attribute to reference another gradient, the gradient uses the propertyʼs value from the gradient element which is directly referenced by the fill or stroke property. when animating colors, color interpolation is performed according to the value of the color-interpolation property on the element being animated. note: as a presentation...
... the color-interpolation property on the element being animated. note: as a presentation attribute, color-interpolation can be used as a css property. ...
...n attribute, color-interpolation can be used as a css property. as a presentation attribute, it can be applied to any element but it only has an effect on the following 29 elements: <a>, <animate>, <animatecolor>, <circle>, <clippath>, <defs>, <ellipse>, <foreignobject>, <g>, <glyph>, <image>, <line>, <lineargradient>, <marker>, <mask>, <missing-glyph>, <path>, <pattern>, <polygon>, <polyline>, <radialgradient>, <rect>, <svg>, <switch>, <symbol>, <text>, <textpath>, <tspan>, and <use> usage notes value auto | srgb | linearrgb default value srgb animatable yes auto indicates that the user agent can choose either the srgb or linearrgb spaces for color interpolation. this option indicates that the author doesn't require that color interpolation oc...

<feMorphology> - SVG: Scalable Vector Graphics
s used to erode or dilate the input image. its usefulness lies especially in fattening or thinning effects. ...
...ibutes global attributes core attributes presentation attributes filter primitive attributes class style specific attributes in operator radius dom interface this element implements the svgfemorphologyelement interface. ...
...ive attributes class style specific attributes in operator radius dom interface this element implements the svgfemorphologyelement interface. ...
... <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 id="thick">fattened text</p> css p { margin: 0; font-family: arial, helvetica, sans-serif; font-size: 3em; } #thin { filter: url(#erode); } #thick { filter: url(#dilate); } specifications specification st...

<stop> - SVG: Scalable Vector Graphics
the svg <stop> element defines a color and its position to use on a gradient. this element is always a child of a <lineargradient> or <radialgradient> element. html,body,svg { height:100% } <svg viewbox="0 0 10 10" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <defs> <lineargradient id="mygradient" gradienttransform="rotate(90)"> <stop offset="5%" stop-color="gold" /> <stop offset="95%" stop-color="red" /> </lineargradient> </defs> <!-- using my linear gradient --> <circle cx="5" cy="5" r="4" fill="url('#mygradient')" /> </svg> attributes offset this attribute defines where the gradient stop is placed along the gradient vector. value type: <number>|<percentage>; default value: 0; animatable: yes stop-color t...
...it can be used as a css property. ...
... this attribute defines where the gradient stop is placed along the gradient vector. value type: <number>|<percentage>; default value: 0; animatable: yes stop-color this attribute defines the color of the gradient stop. it can be used as a css property. value type: currentcolor|<color>|<icccolor>; default value: black; animatable: yes stop-opacity this attribute defines the opacity of the gradient stop. it can be used as a css property. ...
... the gradient stop. it can be used as a css property. value type: <opacity>; default value: 1; animatable: yes global attributes core attributes most notably: id styling attributes class, style event attributes global event attributes, document element event attributes presentation attributes most notably: color, display, stop-color, stop-opacity, visibility usage notes categoriesgradient elementpermitted contentany number of the following elements, in any order:<animate>, <animatecolor>, <set> specifications specification status comment scalable vector graphics (svg) 2the definition of '<stop>' in that specification. candidate recommendation scalable vector graphics (svg) 1.1 (second edition)the definition of '<stop>' in that spec...

SVG In HTML Introduction - SVG: Scalable Vector Graphics
the only interesting part is the <svg> element it cont...
...the only interesting part is the <svg> element it contains. this el...
...err">incorrect value!</span></p> <p><input type="button" value="activate!" onclick="signalerror();"></p> </fieldset> </form> <svg viewbox="0 0 100 100" preserveaspectratio="xmidymid slice" style="width:100%; height:100%; position:absolute; top:0; left:0; z-index:-1;"> <lineargradient id="gradient"> <stop class="begin" offset="0%"/> <stop class="end" offset="100%"/> </lineargradient> <rect x="0" y="0" width="100" height="100" style="fill:url(#gradient)" /> <circle cx="50" cy="50" r="30" style="fill:url(#gradient)" /> </svg> </body> </html> discussion the page is mainly regular html, css and javascript. the only interesting part is the <svg> element it contains. this element and its children are declared to be in the svg namespace. the element contains a gradient a...
...="100" height="100" style="fill:url(#gradient)" /> <circle cx="50" cy="50" r="30" style="fill:url(#gradient)" /> </svg> </body> </html> discussion the page is mainly regular html, css and javascript. the only interesting part is the <svg> element it contains. this element and its children are declared to be in the svg namespace. the element contains a gradient and two shapes filled with the gradient. the gradient color stops have their colors set by css. when the user enters something incorrect into the form, the script sets the invalid attribute on the <body>, and a style rule changes the gradient end-stop color to red. (another style rule makes an error message appear.) this approach has the following points in its favor: we have taken a regular html form that could have been part ...

SDK and XUL Comparison - Archive of obsolete content
're not carefully designed, firefox add-ons can open the browser to attack by malicious web pages. although it's possible to write insecure add-ons using the sdk, it's not as easy, and the damage that a compromised add-on can do is usually more limited. restartlessness add-ons built with the sdk can be installed without having to restart firefox. although you can write traditional add-ons that are restartless, you can't use xul overlays in them, so most traditional add-ons would have to be substantially rewritten anyway. user experience best practices the ui components available in the sdk are designed to align with the usability guidelines for firefox, giving your users a better, more consistent experience. mobile support s...
...dd-ons on the new native version of firefox mobile. see the tutorial on mobile development. advantages of xul-based add-ons user interface flexibility xul overlays offer a great deal of options for building a ui and integrating it into the browser. using only the sdk's supported apis you have much more limited options for your ui. xpcom traditional add-ons have access to a vast amount of firefox functionality via xpcom. the sdk's supported apis expose a relatively small set of this functionality. low-level apis and third-party modules that's not the whole story. if you need more flexibility than the sdk's high-level apis provide, you can use its low-level apis to load xpcom objects directly or to manipulate the dom direct...
...ons have access to a vast amount of firefox functionality via xpcom. the sdk's supported apis expose a relatively small set of this functionality. low-level apis and third-party modules that's not the whole story. if you need more flexibility than the sdk's high-level apis provide, you can use its low-level apis to load xpcom objects directly or to manipulate the dom directly as in a traditional bootstrapped extension. alternatively, you can load third-party modules, which extend the sdk's core apis. note that by doing this you lose some of the benefits of programming with the sdk including simplicity, compatibility, and to a lesser extent security. ...

Chapter 5: Let's build a Firefox extension - Archive of obsolete content
his 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. draft this page is not complete. « previousnext » this document was authored by taiga (gomita) gomibuchi and was originally published in japanese for the firefox developers conference summer 2007. gomita-san won "most useful upgraded extension" award in mozilla's 2006 "extend firefox" competition for scrapbook, and was runner-up in the "extend firefox 2" contest for firegestures. the chapters so far have each focused on technologies in isolation—xul, javascript, css, and xpcom. in this chapter, we’ll discuss how to put them together to actually build an extension. an easier method of building a firefox/thunderbird add...
...nserting multiple prefpane elements, which allows users to switch between panels by clicking buttons. the preference element creates a preference value that can be written and read by the preference panel, with the preference name indicated by the name attribute, and the type by the type attribute. furthermore, by matching the preference element’s id to the preference attribute of a checkbox or radiogroup, you can specify the interface widget that will be used to set your preferences. add the contents of listing 27 to your install manifest to make it so that the add-on manager can open your preference panel. listing 26: content for prefs.xul <?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/" type="text/css"?> <prefwindow id="sessionstoreprefs" xmlns="http://www.mozilla.or...
...ns.sessionstore.warnonclear" type="bool" /> <preference id="extensions.sessionstore.replacetabs" name="extensions.sessionstore.replacetabs" type="int" /> </preferences> <checkbox label="confirm before clearing sessions" preference="extensions.sessionstore.warnonclear" /> <groupbox> <caption label="when restoring session:" /> <radiogroup preference="extensions.sessionstore.replacetabs"> <radio value="0" label="keep current tabs" /> <radio value="1" label="replace current tabs"/> <radio value="2" label="ask me every time" /> </radiogroup> </groupbox> </prefpane> </prefwindow> listing 27: additional content for install.rdf <em:optionsurl>chrome://sessionstore/content/prefs.xul</em:opti...

Setting up an extension development environment - Archive of obsolete content
ssion. this will utilize distinctive development preferences in about:config. install firefox development extensions specifically for this new developer user profile. edit files in the extensions folder of this profile, and restart the application as this new developer profile. development profile the use of a separate user profile for development can be advantageous, averting performance degradation from development related settings, and further isolating personal data (such as bookmarks, extensions, and settings) from your testing environment. you could be running two instances of firefox simultaneously. note: for an extended guide on how to set up even more user profiles, take a look at multiple firefox profiles. this particularly comes in handy for the use of all currently availabl...
...ched ("fastload"). the -purgecaches command-line flag disables this behavior. alternatively, you can set the moz_purge_caches environment variable. see this bug for more information. development preferences there is a set of development preferences that, when enabled, allows you to view more information about application activity, thus making debugging easier. however, these preferences can degrade performance, so you may want to use a separate development profile when you enable these preferences. accessing firefox development preferences to change preference settings in firefox or seamonkey, type about:config in the location bar. you can also use the extension developer's extension, which provides a menu interface for firefox settings. accessing thunderbird development preferences to...
...to/yourextension/ on mac and linux, and c:\full\path\to\yourextension\ on windows. remember to include the closing slash and remove any trailing whitespace. note: if you already installed the extension via xpi, you should uninstall it first before creating the pointer file. also note that the use of proxy files requires that the extension's chrome.manifest defines its chrome urls using traditional directories, rather than a jared structure. see below. place the file in the extensions folder of your profile and restart the application. using directories rather than jars regardless of whether you choose to eventually package your extension's chrome in a jar or in directories, developing in directories is simpler. if you choose a jared structure for releasing, you can still de...

Images, Tables, and Mysterious Gaps - Archive of obsolete content
t practices for web-based development. it is now preferable to use css for layout. however, these techniques may be relevant when the developer cannot assume that users have a modern browser, such as for html-based e-mail messages. almost no matter when you started creating web pages, odds are pretty high you have one or more designs based on the classic "convoluted tables and lots of images" paradigm. whether you've sliced up a logo so it fits in well with the design, or used tons of single-pixel spacer gifs, the principles (and perils) remain largely the same. back in the early days, this approach worked, because browsers would usually make a table cell exactly as wide and tall as an image it contained. fast forward to 2001, and the rise of standards-based browsers that lay out pages usi...
...d why this is a problem. we start with a simple case, illustrated in figure 1: a one-cell table containing an image. obviously most designs are a touch more complicated than this, but we don't need anything more for our purposes. one image, one cell-- that's all it takes. there's nothing apparently wrong with that example. there isn't supposed to be, since it's an example of how browsers have traditionally behaved. now let's see what that same simple table looks like in a modern browser when the page has a strict doctype. notice the added space beneath the image in figure 2. the markup of both table and cell remains unchanged-- it's the rendering mode that's different. instead of "shrinkwrapping" the image itself, the browser is now wrapping around the line in which the image sits. the...
...implementation of css2, the problem of inline images in table cells forcing open unwanted space has come to the attention of the css working group. there have been many proposals to fix the problem, but one of the most promising approaches is the property line-box-contain, which has been proposed for inclusion in css3. should this property be adopted, then any browser supporting it could emulate traditional "shrinkwrap" behavior without risking other layout upset with the following rule: td {line-box-contain: font replaced;} /* proposed for css3 */ there are other possible fixes contained within the current css3 working drafts, such as line-height-policy. obviously, the sooner a solution can be found and implemented, the happier authors everywhere will be. recommendations absent support ...

Installing plugins to Gecko embedding browsers on Windows - Archive of obsolete content
f the mozilla subkey is not present under hkey_local_machine, look under hkey_current_user\software\mozilla\. on windows xp and windows 2000, in order to write to the registry, sometimes the software may need administrator privileges. thus, some mozilla based browsers, such as the netscape 6 installer, write to the hkey_current_user key in addition; this doesn't require administrator privileges. traditionally, hkey_current_user is a copy of everything in hkey_local_machine. the mozilla subkey is written under hkey_current_user\software also. however, always look at hkey_local_machine first. enumerate the mozilla subkey. here you will find keys on a per-product basis. you can enumerate the application subkeys, e.g. hkey_local_machine\software\mozilla\productx.y\. the keys "product x.y" cont...
...illa caveat emptor: if the mozilla subkey is not present under hkey_local_machine, look under hkey_current_user\software\mozilla\. on windows xp and win2000, in order to write to the registry, sometimes the software may need administrator privileges. thus, software such as the netscape 6 installer writes to the hkey_current_user key additionally, which doesn't require administrator privileges. traditionally, hkey_current_user is a copy of everything in hkey_local_machine. the mozilla subkey is written under hkey_current_user\software also. however, always look at hkey_local_machine first. you can enumerate the application subkeys, e.g. hkey_local_machine\software\mozilla\product x.y\. the keys "product x.y" contain application keys for the given mozilla based browser. example: netscape 6 ...
...illa caveat emptor: if the mozilla subkey is not present under hkey_local_machine, look under hkey_current_user\software\mozilla\. on windows xp and win2000, in order to write to the registry, sometimes the software may need administrator privileges. thus, software such as the netscape 6 installer writes to the hkey_current_user key additionally, which doesn't require administrator privileges. traditionally, hkey_current_user is a copy of everything in hkey_local_machine. the mozilla subkey is written under hkey_current_user\software also. however, always look at hkey_local_machine first. you can enumerate the application subkeys, e.g. hkey_local_machine\software\mozilla\product x.y\. the keys "product x.y" contain application keys for the given mozilla based browser. example: [hkey_local...

BundleLibrary - Archive of obsolete content
p twitter: twitter.webapp user contributed bundles gmail w/gtalk: gmail.webapp (note: work with latest version of prism!) 32 online todo lists: zip file with web apps for 32 online todo lists anywhere.fm: anywhere.fm@prism.app.webapp a service that lets you upload your entire music library to their servers and listen from anywhere through a slick flash interface. ...
...er.webapp user contributed bundles gmail w/gtalk: gmail.webapp (note: work with latest version of prism!) 32 online todo lists: zip file with web apps for 32 online todo lists anywhere.fm: anywhere.fm@prism.app.webapp a service that lets you upload your entire music library to their servers and listen from anywhere through a slick flash interface. ...
...x to the webrunner folder. not the cleanest, but it got all my plugins at once) istylr: istylr.webapp online web design tool (full win installer bundled with prism is available here - thanks to lars eric for his nsis script) meebo: meebo.webapp miro guide: miroguide.webapp motor0: motor0.webapp useful webapp on maintenance and fuel consumptions managment pandora: pandora@prism.app.webapp internet radio that only plays music you like. reddit: reddit.webapp remember the milk: rtm.webapp (note: should work with google gears with some help) rsizr image editor rsizr.webapp seeqpod: seeqpod.webapp playable music search engine. slimtimer client slimtimer.webapp a very useful time-tracking tool with a "slim" client spagobi spagobi.webapp a web collaborative business intelligence platform streamy stre...

New Skin Notes - Archive of obsolete content
, 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 resizeable in all browsers. yay! --dria wordpress skins need footer information. -- dria when a page is redirected, need to say-so and what it was redirected from, (see document for an example of such.) this is only an issue in mw1.5 so far. devmo skin vs cavendish...
...atch if needed (quickly), so dria or others do not have to hunt up "how". --callek add "what not to do" css class to stylesheet, as discussed on talk:core javascript 1.5 reference. what's the class called? --maian 21:08, 1 sep 2005 (pdt) in the new mw1.5 skin (not the one currently available here) there's class "wrong" and class "wrong-inline". those will be available after we do the wiki upgrades in the near future. --dria headers need a little padding. h1 could be smaller. --dria is it just me or visited links are not marked as such? --nickolay 07:16, 29 aug 2005 (pdt) imho the visited color looks horrible. we're a documentation site. there's no real reason for user to give him info that he already visited xml main page. it's hardly possible that he'll be interested in it. in al...
...51,102,187)). --nickolay 09:19, 25 aug 2005 (pdt) (moving this to a new item) on the contrary, the list of categories current page belongs to, should be near the footer (see mdc:policies_and_guidelines page) (dria: fix catlinks style) the arrows that appear if you select "enhanced recent changes" in your preferences have an ugly border around them. --nickolay 04:43, 25 aug 2005 (pdt) the radio buttons on history page are jumping in a weird way because the selected row becomes bold. --nickolay 04:46, 25 aug 2005 (pdt) the sidebar overrides content on diff pages --nickolay turns out this was fixed for 1.5 already. --dria the buttons in the upper-right of the horizontal nav-bar don't really feel like buttons; maybe add a pseudo-class for onhover that gives them an underline? --be...

toolbarbutton.type - Archive of obsolete content
en and close the menu. menu-button: you can also use the value menu-button to create a button with a menu. unlike the menu type, this type requires the user to press the arrow to open the menu, but a different command may be invoked when the main part of the button is pressed. ...
...on: you can also use the value menu-button to create a button with a menu. unlike the menu type, this type requires the user to press the arrow to open the menu, but a different command may be invoked when the main part of the button is pressed. ...
...checkbox: use this type to create a toggle button which will switch the checked state each time the button is pressed. radio: use this type to create a radio button. you can also create a group of toolbarbuttons using this type and the attribute group. ...

Multiple Rules - Archive of obsolete content
, the results are combined and only three results are shown. however, you will probably notice that the one photo that matches the first rule has appeared differently that the others. in fact, the content for this photo is that of the first rule with the button, whereas the content for the other photos is that of the second rule with the normal images. ...
...e content for this photo is that of the first rule with the button, whereas the content for the other photos is that of the second rule with the normal images. here is another example for an xml source: <radiogroup datasources="people.xml" ref="*" querytype="xml"> <template> <query expr="person"/> <rule> <where subject="?gender" rel="equals" value="male"/> <action> <radio uri="?" label="?name is male"/> </action> </rule> <rule> <action> <radio uri="?" label="?name is female" disabled="true"/> </action> </rule> </template> </radiogroup> in this example, all male people are matched with the first rule, and a radio button is generated for each one. we assume that anyone that isn't male is female and use the second rule to cr...
...as all males have been filtered out by the first rule, we do not need any conditions for the second rule. where elements we saw in the example above how to compare a value exactly to a specific value. this would be useful for comparing a field that identified the type of a result. ...

XUL accessibility guidelines - Archive of obsolete content
er were to tab to the "exceptions..." button they would hear "cookies {pause} exceptions {pause} button." the next tab would read "cookies {pause} keep until {pause} they expire {pause} one of three {pause} combobox." if the screen reader only read the label, then the user would have to guess what the "exceptions" button or the "keep until" combobox was referring to. groupboxes are essential for radiogroups or groups of checkboxes with a similar theme (e.g. check all that apply). if you find nested groupboxes visually unappealing, use css to hide the border of the inner groupbox so that it can remain in the code to benefit users of assistive technologies. complex forms sometimes require a more advanced labeling system than is possible with the standard xul attributes. for example, the first...
...however, in all other cases using <label control="[id]"> is enough. testing assistive information testing with a screen reader is in many ways the best test, because both the keyboard navigation and underlying semantics/structure of the ui can be tested at the same time. it is an excellent indicator regarding the accessibility of a user interface, but is by no means a complete test. ...
...il alternative text alternative text is provided for meaningful images. alternative text is missing on meaningful images, or it is inappropriate for the function of an image. title all windows, including dialogs and wizards, have a descriptive title. windows lack a title or have a incorrect title. form labels every form element has an associated label and radiobuttons are encapsulated in a groupbox. form elements are missing labels or the labels are not programmatically connected or radiobuttons are not contained in a groupbox. display checkpoint pass fail system defaults system settings are maintained. system settings are not maintained. color color alone is not used to convey meaning and sufficien...

The Implementation of the Application Object Model - Archive of obsolete content
ingle graph. ok, so after that paragraph many of you probably still don't understand what rdf does, so here's the short and sweet version. rdf can suck up data from different places (like your bookmarks and history or another web site), and it can combine them. this gives you a feature called aggregation, the ability to put completely different kinds of data into the same place. for example, the traditional bookmarks tree view could contain anything from mail messages to local files to maps of other sites. this same ability to aggregate data leads to another capability of rdf. because rdf can suck up data from a remote location (e.g., from a downloadable rdf file), and also suck up data from a local source, it can take the remote data and combine it with local data. you'll often hear people r...
...rialized rdf! well, that's just plain cool! i say forget xul! let's just use serialized rdf to represent the ui! that would be an unwise decision for a variety of reasons. rdf is a graph structure, and windows and dialogs are actually content trees. because rdf can express arbitrary relationships between nodes, the serialized form of rdf in xml has to contain extra syntax. in other words, the traditional relationship of "containment" is not the only kind of relationship expressible in rdf. in html or xul, when you put one tag inside another tag, a relationship of containment can safely be assumed. not so with rdf. for rdf, an extra tag has to be inserted between two other tags to indicate exactly what kind of relationship should exist between the two nodes. the resultant file, although sti...
... functions would even have identical implementations, i.e. duplicate code that would be doing the same thing in the function bodies. here's another problem. the various interfaces, nsicontent et.al., are not yet solidified. they are likely to change following the first release of nglayout, and when they do, anyone that implemented one of those interfaces will have to change as well in order to upgrade to the new world. statement #1 the two points raised in the previous two paragraphs, namely (1) redundancy of methods in the interfaces as well as a likely code redundancy in the implementation of some of those methods, and (2) the desire to be insulated from the layout dll should those interfaces change, imply that a layer needs to exist between the pluggable content and the content tree int...

XUL controls - Archive of obsolete content
menulist> more information about the editable menulist element. menulist reference related elements: menupopup menuitem <progressmeter> a progress meter is used to display the progress of a lengthy task. <progressmeter value="40"/> more information about the progressmeter element. ...
... more information about the editable menulist element. menulist reference related elements: menupopup menuitem <progressmeter> a progress meter is used to display the progress of a lengthy task. <progressmeter value="40"/> more information about the progressmeter element. ...
... related elements: menupopup menuitem <progressmeter> a progress meter is used to display the progress of a lengthy task. <progressmeter value="40"/> more information about the progressmeter element. progressmeter reference <radio> a radio button is used when only one of a set of options may be selected at a time. <radiogroup> <radio 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 d...

menuitem - Archive of obsolete content
if true, events are passed to children of the element. otherwise, events are passed to the element only. autocheck type: boolean if this attribute is true or left out, the checked state of the button will be switched each time the button is pressed. if this attribute is false, the checked state must be adjusted manually. when autocheck is true, the button type should be "checkbox" or "radio". checked type: boolean indicates whether the element is checked or not. use hasattribute() to determine whether this attribute is set instead of getattribute(). for buttons, the type attribute must be set to checkbox or radio for this attribute to have any effect. note: if the checked attribute is set to true, and you persist its value via the persist attribute, mozilla will fail ...
...e image to appear. key type: id set to the id of a key element whose key shortcut is displayed in the menuitem. label type: string the label that will appear on the element. if this is left out, no text appears. for an editable menuitem element the value of this attribute is copied to the menulist.value property upon user selection of the menuitem. name type: string name radio menuitems with the same name as put into a group. only one menuitem in each radio group can be checked at a time. selected type: boolean indicates whether the element is selected or not. this value is read-only. to change the selection, set either the selectedindex or selecteditem property of the containing element. tabindex type: integer the tab order of the element. the ta...
...lection, set either the selectedindex or selecteditem property of the containing element. 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. type type: one of the values below can be used to create checkable menuitems or for radio button menuitems. checkbox the menuitem is checked. the checked attribute determines whether the menuitem is checked or not. radio the menuitem becomes part of a radio group. other menuitems that have the same value for their name attributes are part of the same radio group. only one menuitem in the same radio group can be checked at once. more information on adding checkmarks...

Extentsions FAQ - Archive of obsolete content
est way to do source level debugging in a firefox extension? in the debug menu, uncheck exclude browser files. use the debugger by typing in a command like this: /break chrome://myextension/content/myfile.js 123 then i suggest using flat chrome. if you turn off the xul cache you don't even need to restart to see changes, simply open a new window. how can i backup some of the files before upgrade an extension and put them back afterward? do i need to write an installation script to achieve this? you shouldn't store data there, so there's nothing to backup. do not store files within the extension directory. the profile directory is ment to do so. storing files within the extension directory is a no-no because it might break the multi-user support of those mozilla products, as it is p...
...are copied. the list of "known" properties is: junkscore junkscoreorigin label priority keywords. keywords - in the gui they are called tags. they replace the old labels (although the labels are still recognised). ...
...abel priority keywords. keywords - in the gui they are called tags. they replace the old labels (although the labels are still recognised). preserved properties source code - nsimapmailfolder::copymessages uaq friday, september 22 - 29, 2006 (↑ top) why extension preferences do not get changed until after it's upgrade? why extension preferences do not get changed until after it's upgrade? is there a way of changing the thunderbird displays headers when replying and forwarding? why there are some rss feeds that do not appear as livemarks when bookmarked even though the necessary tags for the feed to appear as a livemark are seemingly present and properly formatted in the feeds source? asking for help in knowing the data that is typed into text boxes. asking about the ...

2006-12-01 - Archive of obsolete content
d daily that they be ready to check their patches in as soon as they are approved. automatic configure updated back preed announces that the machine that does the automatic autoconf/configure generation (egg.build.mozilla.org) is back up. gecko 1.9a1 triage meetings vlad announced that the gecko devs will be taking over the ff2 triage meetings until gecko 1.9a1 ships (nov 28th). watch #grandparadiso for updates. discussion november 29th gecko 1.9/gran paradiso status meeting other than annoucing the meeting, this thread discusses where else can info about what happens at the meetings be found (since the agenda often seems bare). m.d.planning and dev news blog are suggested. bon echo project status: remaining "to-do" items beltzner starts a discussion on when to offer 1.5.0.8+ users t...
...also discussed is the the mozilla_1_8_branch's npotb (not part of the build) checkin policy. ...
... november 27 weekly project status meeting: (agenda) ...

Proposal - Archive of obsolete content
e widely adopted standards. (so don't expect any software to support them.) but some of them could become standards in the future. note: those in the list below that are marked "in development" should not be implemented. "in development" means that they are still working on it and trying to come up with a draft. those labeled with "draft exists" can be implemented, but be warned that they could radically change. name description status easy news topics easy news topics (ent) is intended to be a very simple standard for describing how topic information can be introduced into an rss2.0 news feed. draft exists icbm let's you add latitude and longitude info to an item. spec exists itunes rss itunes extension modules used for ipradio/podcasting. spec exists media rss rss extension mo...
...escription status easy news topics easy news topics (ent) is intended to be a very simple standard for describing how topic information can be introduced into an rss2.0 news feed. draft exists icbm let's you add latitude and longitude info to an item. spec exists itunes rss itunes extension modules used for ipradio/podcasting. spec exists media rss rss extension module used for iptv and ipradio/podcasting. spec exists newsgator feed extension created to make rss feeds work better with newsgator software. lets you specify an image, up to 277x78 pixels. and lets you specifies a specific rendering transform (xslt) to be used when rendering the feed in newsgator for outlook. the transform must already exist on the machine running newsgator; stylesheets will not be downloaded or installe...
... with newsgator software. lets you specify an image, up to 277x78 pixels. and lets you specifies a specific rendering transform (xslt) to be used when rendering the feed in newsgator for outlook. the transform must already exist on the machine running newsgator; stylesheets will not be downloaded or installed automatically. spec exists rss disposition hinting a proposal to make it so iptv and ipradio/podcasting works better with rss. uses an http "content-type" parameter to hint at an rss feeds disposition type -- to hint at what is being syndicated. in development rsshints a module that adds elements to a feed that help an aggregator process them. draft exists source guid when an rss item is posted in response to a previous item (called the source item) rss 2.0 offers the source elemen...

Browser Detection and Cross Browser Support - Archive of obsolete content
of user agent string based detection be limited to server side situations and except in those circumstances where it is absolutely required such as when details of the gecko branch are required. there are legitimate reasons to use the user agent string (or the navigator object) to determine exactly what vendor, version or operating system is being used. many financial sites (banks, online stock trading firms, etc) have very strict policies with respect to what browsers they support. this is due to the history of security exploits that have been discovered in older browsers. if you have the need to only allow specific versions of browsers to use your secure site, then the user agent string and the related information from the navigator object can be very useful. you can also use detailed inf...
... very useful. you can also use detailed information regarding a browser's version to work around bugs in specific releases of a browser. however, this can quickly become a maintenance nightmare if you are not careful. i recommend that you only provide work arounds for bugs on a temporary basis and as soon as bugs are corrected in newer releases of the browser that you require your visitors to upgrade their browser. provide downlevel pages for older browsers no commercial web site today makes complete support for netscape navigator versions 1, 2 or 3 or microsoft internet explorer 3 a requirement. the reasons are that the capabilities of such browsers are far too limited compared to more modern browsers, the added development and quality assurance requirements add too much to the developmen...
...thought. in the past, users did not have the choice of picking a browser which implemented the standards however today they do have a choice. there is no compelling reason for anyone in the world to continue to use a browser which does not support the standards. however, as long as web developers continue to code work arounds for these older browsers, users will not have a compelling reason to upgrade. by ceasing to support older browsers, you can provide a reason for users to upgrade. this will benefit not only them, but yourself as well. supporting only standards based browsers can reduce development and maintanance costs as well as increase the dynamic and compelling content which will attract visitors and increase your revenue. the choice is yours... decide to support the standards today!

::-ms-browse - Archive of obsolete content
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. ...
...mitted properties only the following css properties can be used in a rule with ::-ms-browse in its selector. other properties are ignored. ...
...high-contrast-adjust background-clip background-color background-image background-origin background-repeat background-size border-bottom-color border-bottom-left-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 ...

::-ms-clear - Archive of obsolete content
ype="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. ...
...k"> allowable properties only the following css properties can be used in a rule with ::-ms-clear in its selector. other properties are ignored. ...
...und-color background-image background-origin background-position-x background-position-y background-repeat background-size border-bottom-color border-bottom-left-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 ...

::-ms-expand - Archive of obsolete content
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. ...
...rd. allowable properties only the following css properties can be used in a rule with ::-ms-expand in its selector. other properties are ignored. ...
...und-color background-image background-origin background-position-x background-position-y background-repeat background-size border-bottom-color border-bottom-left-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 ...

Game over - Game development
d from the gameplay point of view to be able to lose. the logic behind losing in breakout is simple. if you miss the ball with the paddle and let it reach the bottom edge of the screen, then it's game over. implementing game over let's try to implement game over in our game. here's the piece of code from the third lesson where we made the ball bounce off the walls: if(x + dx > canvas.width-ballradius || x + dx < ballradius) { dx = -dx; } if(y + dy > canvas.height-ballradius || y + dy < ballradius) { dy = -dy; } instead of allowing the ball to bounce off all four walls, let's only allow three now — left, top and right. hitting the bottom wall will end the game. we'll edit the second if block so it's an if else block that will trigger our "game over" state upon the ball colliding...
...igger our "game over" state upon the ball colliding with the bottom edge of the canvas. for now we'll keep it simple, showing an alert message and restarting the game by reloading the page. first, replace where you initially called setinterval() setinterval(draw, 10); with: var interval = setinterval(draw, 10); then replace the second if statement with the following: if(y + dy < ballradius) { dy = -dy; } else if(y + dy > canvas.height-ballradius) { alert("game over"); document.location.reload(); clearinterval(interval); // needed for chrome to end game } letting the paddle hit the ball the last thing to do in this lesson is to create some kind of collision detection between the ball and the paddle, so it can bounce off it and get back into the play area. the e...
...g the paddle hit the ball the last thing to do in this lesson is to create some kind of collision detection between the ball and the paddle, so it can bounce off it and get back into the play area. the easiest thing to do is to check whether the center of the ball is between the left and right edges of the paddle. update the last bit of code you modified again, to the following: if(y + dy < ballradius) { dy = -dy; } else if(y + dy > canvas.height-ballradius) { if(x > paddlex && x < paddlex + paddlewidth) { dy = -dy; } else { alert("game over"); document.location.reload(); clearinterval(interval); } } if the ball hits the bottom edge of the canvas we need to check whether it hits the paddle . if yes, then it bounces off just like you'd exp...

Styling tables - Learn web development
ing styling to suit. don't worry, you don't have to make your tables this loud — you can opt for something more subtle and tasteful. start by adding the following css to your style.css file, again at the bottom: /* graphics and colors */ thead, tfoot { background: url(leopardskin.jpg); color: white; text-shadow: 1px 1px 1px black; } thead th, tfoot th, tfoot td { background: linear-gradient(to bottom, rgba(0,0,0,0.1), rgba(0,0,0,0.5)); border: 3px solid purple; } again, there's nothing specific to tables here, but it is worthwhile to note a few things. we've added a background-image to the <thead> and <tfoot>, and changed the color of all the text inside the header and footer to white (and given it a text-shadow) so it is readable. you should always make sure your text cont...
... again, there's nothing specific to tables here, but it is worthwhile to note a few things. we've added a background-image to the <thead> and <tfoot>, and changed the color of all the text inside the header and footer to white (and given it a text-shadow) so it is readable. you should always make sure your text contrasts well with your background, so it is readable. ...
...trasts well with your background, so it is readable. we've also added a linear gradient to the <th> and <td> elements inside the header and footer for a nice bit of texture, as well as giving those elements a bright purple border. it is useful to have multiple nested elements available so you can layer styles on top of one another. yes, we could have put both the background image and the linear gradient on the <thead> and <tfoot> elements using multiple background images, but we decided to do it separately for the benefit of older browsers that don't support multiple background images or linear gradients. zebra striping we wanted to dedicate a separate section to showing you how to implement zebra stripes — alternating rows of color that make the different data rows in your table easier ...

CSS values and units - Learn web development
ecide on a color palette and then use those colors — and your chosen method of specifying color — throughout the whole project. you can mix and match color models, however for consistency it is usually best if your entire project uses the same one! images the <image> data type is used wherever an image is a valid value. this can be an actual image file pointed to via a url() function, or a gradient. in the example below we have demonstrated an image and a gradient in use as a value for the css background-image property. note: there are some other possible values for <image>, however these are newer and currently have poor browser support. check out the page on mdn for the <image> data type if you want to read about them. position the <position> data type represents a set of 2d ...
...t of both the developer and the computer. functions are usually associated with languages like javascript, python, or c++, but they do exist in css too, as property values. we've already seen functions in action in the colors section — rgb(), hsl(), etc. the value used to return an image from a file — url() — is also a function. a value that behaves more like something you might find in a traditional programming language is the calc() css function. this function gives you the ability to do simple calculations inside your css. it's particularly useful if you want to work out values that you can't define when writing the css for your project, and need the browser to work out for you at runtime. for example, below we are using calc() to make the box 20% + 100px wide. the 20% is calculate...
...s on the css values and units reference page; you will encounter many of these in use as you work through these lessons. the key thing to remember is that each property has a defined list of allowed values, and each value has a definition explaining what the sub-values are. you can then look up the specifics here on mdn. ...

Supporting older browsers - Learn web development
he floated items become grid items. if the browser supports grid layout it will display the grid view, if not it ignores the display: grid and related properties and the floated layout is used. * {box-sizing: border-box;} .wrapper { background-color: rgb(79,185,227); padding: 10px; max-width: 400px; display: grid; grid-template-columns: 1fr 1fr 1fr; } .item { float: left; border-radius: 5px; background-color: rgb(207,232,220); padding: 1em; } <div class="wrapper"> <div class="item">item one</div> <div class="item">item two</div> <div class="item">item three</div> </div> note: the clear property also has no effect once the cleared item becomes a grid item, so you could have a layout with a cleared footer, which is then turned into a grid layout. fallback m...
... 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> <div class="item">item two</div> <div class="item">item three</div> </div> to deal with this issue we need to have a way to detect if grid is supported and therefore if it will override the width. css has a solution for us here. feature queries f...
...s support and if so throw in your fancy layout. if we add a feature query to the above example, we can use it to set the widths of our items back to auto if we know that we have grid support. ...

Example - Learn web development
ic payment form for the article how to structure an html form. ...
... followed by <strong><abbr title="required">*</abbr></strong>.</p> <section> <h2>contact information</h2> <fieldset> <legend>title</legend> <ul> <li> <label for="title_1"> <input type="radio" id="title_1" name="title" value="a"> ace </label> </li> <li> <label for="title_2"> <input type="radio" id="title_2" name="title" value="k" > king </label> </li> <li> <label for="title_3"> <input type="radio" id="title_3" name="title" value="q"> queen </label> </li> </ul> </fieldset> <p> <label for="name"> <span>name: </span> <strong><abbr title="required">*</abbr></stron...
...y</em> </label> <input type="date" id="date" name="expiration"> </p> </section> <section> <p> <button type="submit">validate the payment</button> </p> </section> </form> css content h1 { margin-top: 0; } ul { margin: 0; padding: 0; list-style: none; } form { margin: 0 auto; width: 400px; padding: 1em; border: 1px solid #ccc; border-radius: 1em; } div+div { margin-top: 1em; } label span { display: inline-block; width: 120px; text-align: right; } input, textarea { font: 1em sans-serif; width: 250px; box-sizing: border-box; border: 1px solid #999; } input[type=checkbox], input[type=radio] { width: auto; border: none; } input:focus, textarea:focus { border-color: #000; } textarea { ...

Test your skills: Advanced styling - Learn web development
you figure out a sensible way to attach it, and can you use some css to get it to sit to the right of the search box, and be lined up vertically as well? try updating the live code below to recreate the finished example: download the starting point for this task to work in your own editor or in an online editor. advanced form styling 2 in our next task we provide you with a set of three radio buttons. we want you to give them custom styling. we've already provided you with a basic reset to build upon. first of all, get rid of their default styling. next, give the radio buttons a reasonable base style — the style they have when the page first loads. this can be anything you like, but you probably want to set a width and height (of somewhere between about 18 and 24 pixels), and...
... 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. ...
... 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. ...

Working with JSON - Learn web development
ript object — strings, numbers, arrays, booleans, and other object literals. ...
...other object literals. ...
...s up and then accessing data inside the variable via your browser's javascript console. arrays as json above we mentioned that json text basically looks like a javascript object, and this is mostly right. the reason we said "mostly right" is that an array is also valid json, for example: [ { "name": "molecule man", "age": 29, "secretidentity": "dan jukes", "powers": [ "radiation resistance", "turning tiny", "radiation blast" ] }, { "name": "madame uppercut", "age": 39, "secretidentity": "jane wilson", "powers": [ "million tonne punch", "damage resistance", "superhuman reflexes" ] } ] the above is perfectly valid json. you'd just have to access array items (in its parsed version) by starting with an array ...

Handling common HTML and CSS problems - Learn web development
(or javascript) feature while the technology is in an experimental state, so they can play with it and get it right without conflicting with other browser's implementations, or the final unprefixed implementations. so for example: mozilla uses -moz- chrome/opera/safari use -webkit- microsoft uses -ms- here's some examples: -webkit-transform: rotate(90deg); background-image: -moz-linear-gradient(left,green,yellow); background-image: -webkit-gradient(linear,left center,right center,from(green),to(yellow)); background-image: linear-gradient(to right,green,yellow); the first line shows a transform property with a -webkit- prefix — this was needed to make transforms work in chrome, etc. until the feature was finalized and such browsers added a prefix-free version of the property (at ...
...ground-image: linear-gradient(to right,green,yellow); the first line shows a transform property with a -webkit- prefix — this was needed to make transforms work in chrome, etc. until the feature was finalized and such browsers added a prefix-free version of the property (at the time of writing, chrome supported both versions). the last three lines show three different versions of the linear-gradient() function, which is used to generate a linear gradient in the background of an element: the first one has a -moz- prefix, and shows a slightly older version of the syntax (firefox) the second one has a -webkit- prefix, and shows an even older, proprietary version of the syntax (this is actually from a really old version of the webkit engine). the third one has no prefix, and shows the f...
...ort it at all, and ie 10 and old versions of ios/desktop safari respectively support incompatible old versions of the flexbox spec. this results in some interesting browser prefix juggling if you want to try to use flexbox across all these browsers (see advanced cross-browser flexbox to get an idea). layout features aren't as easy to provide graceful fallbacks for as simple colors, shadows, or gradients. if layout properties are ignored, your entire design will likely fall to pieces. because of this, you need to use feature detection to detect whether visiting browsers support those layout features, and selectively apply different layouts depending on the result (we will cover feature detection in detail in a later article). for example, you could apply a flexbox layout to modern browsers,...

Package management basics - Learn web development
dex.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 questioning whether they're doing the right thing for you. in this case, the...
...dules, along with date-fns’s own dependencies. by default this command will install the latest version of date-fns, but you can control this too. you can ask for date-fns@1, which gives you the latest 1.x version (which is 1.30.1). or you could try date-fns@^2.3.0, which means the latest version after or including 2.3.0 (2.8.1 at the time of writing). updating dependencies npm update yarn upgrade this will look at the currently installed dependencies and update them, if there is an update available, within the range that's specified in the package. the range is specified in the version of the dependency in your package.json, such as date-fns@^2.0.1 — in this case the caret character ^ means all minor and patch releases after and including 2.0.1, up to but excluding 3.0.0. this is de...
... using a system called semver, which might look a bit complicated from the documentation but can be simplified by considering only the summary information and that a version is represented by major.minor.patch, such as 2.0.1 being major version 2 with patch version 1. an excellent way to try out semver values is to use the semver calculator. it's important to remember that npm update will not upgrade the dependencies to beyond the range defined in the package.json — to do this you will need to install that version specifically. audit for vulnerabilities npm audit yarn audit this will check all of the dependency tree for your project and run the specific versions you're using against a vulnerability database and notify you if there are potential vulnerable packages in your project. a go...

Android-specific test suites
ndroid-checkstyle ensures that the java coding style is consistent throughout. android-findbugs ensures that the code avoids common java coding errors. android-lint ensures that the code avoids common android coding errors. all of these suites require a functioning build of firefox for android — either a full build or an artifact build. all of the suites are configured by and invoked using gradle. android-test runs android-specific local unit tests. these tests are local — they run on your development machine and do not require an android device or android emulator. local unit tests are the fastest to develop and execute, but they can only test java code; there's no connection to the gecko rendering engine. use these to test java data structures and logic, and to ensure that basic...
... { @ignore @test public void testsuccessrunnableisexecutedifpermissionsaregranted() { ... contact information android-test is currently owned by :sebastian and :nalexander. file tickets in the firefox for android product in bugzilla. android-checkstyle verifies that the java coding style is consistent throughout. see http://checkstyle.sourceforge.net/index.html and https://docs.gradle.org/2.14/userguide/checkstyle_plugin.html for more details. running android-checkstyle to run android-checkstyle, first build firefox for android with your changes; then run ./mach android checkstyle this will run the tests and report the results to stdout, as well as produce an html report. disabling one failing test in general, it's not sensible to allow java code that doesn't observe t...
...that the code avoids common java coding errors. using this suite will allow the code to be analyzed to spot any design flaws or potential bugs. if an issue is found within the code, a warning will be identified and put into the correct category that the suite controls — this could be malicious, correctness, or just bad practice. see http://findbugs.sourceforge.net/index.html and https://docs.gradle.org/2.14/userguide/findbugs_plugin.html for more details. running android-findbugs to run android-findbugs, first build firefox for android with your changes; then run ./mach android findbugs this will run the tests and report the results to stdout, as well as produce an html report. disabling one failing test in general, it's not sensible to allow new java code to land that findbugs dete...

Updating NSPR or NSS in mozilla-central
idual changes. if you check in an individual change by mistake, your change will be lost when the nspr and nss teams push a new hg tag to mozilla-central. ...
... push the update: $ hg push ...
... push the update: $ hg push ...

PR FreeAddrInfo
returns the function doesn't return anything. ...
... returns the function doesn't return anything. ...
... returns the function doesn't return anything. ...

Notes on TLS - SSL 3.0 Intolerant Servers
ides, they terminate/drop the connection, thus resulting in most cases a blank page display. for up-to-date information, you can read a bugzilla bug report which keeps track of this problem with mozilla-based browsers. see bug 59321. servers currently known to exhibit this intolerant behavior as of this writing, this problem has been reported for the following servers: (wherever there is an upgraded version which fixes the problem, it is indicated by an asterisked remark in the parentheses. ) domino-go-webserver/4.6.2.6 (and perhaps some later versions) ibm_http_server/1.3.6.3 or earlier (* update to 1.3.6.4) ibm_http_server/1.3.12.1 or earlier (* update to 1.3.12.2) java web server 2 osu/3.2 - decthreads http server for openvm stronghold/2.2 webmail v. 3.6.1 by infinite technolog...
... later these browsers shipped with the tls option on but also included a graceful rollback mechanism on the client side when they encounter known tls/ssl 3.0 intolerant servers. firefox 2 and later starting with firefox 2, support for ssl 2.0 has been disabled by default; unless it is expressly re-enabled by the user using about:config. website administrators: how to avoid this problem? upgrade to a newer version if available, which corrects this problem. there will be other network clients which implement tls/ssl 3.0 specification correctly and have a problem with your site. let's not perpetuate the problem servers. contact the manufacturer and inquire if there is a new version available which fixes this problem. post a note on your site instructing users of old versions of browsers...
... if there is a new version available which fixes this problem. post a note on your site instructing users of old versions of browsers like netscape 6.0/6.01/6.1 preview release 1 and mozilla 0.9.1 and earlier to turn off the tls option at: edit | preferences | privacy and security | ssl | enable tls. however, this is a temporary workaround at best. we recommend strongly that you urge users to upgrade to the latest netscape version (or at least netscape 6.1) since the newer versions have the graceful rollback implemented in the code. if you have questions concerning netscape browsers and problem servers, please contact us using the feedback address at the top of this page. detecting intolerant servers because newer versions of netscape and mozilla have built-in workaround for the problem ...

Binary compatibility
when you see a @status frozen, note that this means it should work as long as the component and xpcom are built with the same compiler abi. ...
...when you see a @status frozen, note that this means it should work as long as the component and xpcom are built with the same compiler abi. ...
...when you see a @status frozen, note that this means it should work as long as the component and xpcom are built with the same compiler abi. for more information on issues of componentization and binary compatibility, see http://mozilla.org/projects/xpcom/gl...ent_reuse.html . ...

An Overview of XPCOM
rability between components within an application, xpcom separates the implementation of a component from the interface, which we discuss in interfaces. but xpcom also provides several tools and libraries that enable the loading and manipulation of these components, services that help the developer write modular cross-platform code, and versioning support, so that components can be replaced or upgraded without breaking or having to recreate the application. using xpcom, developers create components that can be reused in different applications or that can be replaced to change the functionality of existing applications. xpcom not only supports component software development, it also provides much of the functionality that a development platform provides, such as: component management file...
...a circle is a shape, in other words, but a shape is not necessarily a circle. in this case, shape is the base class and circle is a subclass of shape. in xpcom, all classes derive from the nsisupports interface, so all objects are nsisupports but they are also o...
...a circle is a shape, in other words, but a shape is not necessarily a circle. in this case, shape is the base class and circle is a subclass of shape. in xpcom, all classes derive from the nsisupports interface, so all objects are nsisupports but they are also other, more specific classes, which you need to be able to find out ...

NS ConvertASCIItoUTF16 external
- source search for the offset of the last occurrence of a character in a string. @return the offset of the character from the beginning of the string, or -1 if not found. ...
... prunichar achar appendint void appendint(int, print32) - source append a string representation of a number. ...
...nt32) - source append a string representation of a number. parameters int aint print32 aradix tointeger print32 tointeger(nsresult*, pruint32) const - source convert this string to an integer. @param aerrorcode pointer to contain result code. ...

NS ConvertUTF16toUTF8 external
const - source search for the offset of the last occurrence of a character in a string. @return the offset of the character from the beginning of the string, or -1 if not found. ...
... char achar appendint void appendint(int, print32) - source append a string representation of a number. ...
...nt32) - source append a string representation of a number. parameters int aint print32 aradix tointeger print32 tointeger(nsresult*, pruint32) const - source convert this string to an integer. @param aerrorcode pointer to contain result code. ...

NS ConvertUTF8toUTF16 external
- source search for the offset of the last occurrence of a character in a string. @return the offset of the character from the beginning of the string, or -1 if not found. ...
... prunichar achar appendint void appendint(int, print32) - source append a string representation of a number. ...
...nt32) - source append a string representation of a number. parameters int aint print32 aradix tointeger print32 tointeger(nsresult*, pruint32) const - source convert this string to an integer. @param aerrorcode pointer to contain result code. ...

NS LossyConvertUTF16toASCII external
const - source search for the offset of the last occurrence of a character in a string. @return the offset of the character from the beginning of the string, or -1 if not found. ...
... char achar appendint void appendint(int, print32) - source append a string representation of a number. ...
...nt32) - source append a string representation of a number. parameters int aint print32 aradix tointeger print32 tointeger(nsresult*, pruint32) const - source convert this string to an integer. @param aerrorcode pointer to contain result code. ...

PromiseFlatCString (External)
const - source search for the offset of the last occurrence of a character in a string. @return the offset of the character from the beginning of the string, or -1 if not found. ...
... char achar appendint void appendint(int, print32) - source append a string representation of a number. ...
...nt32) - source append a string representation of a number. parameters int aint print32 aradix tointeger print32 tointeger(nsresult*, pruint32) const - source convert this string to an integer. @param aerrorcode pointer to contain result code. ...

PromiseFlatString (External)
- source search for the offset of the last occurrence of a character in a string. @return the offset of the character from the beginning of the string, or -1 if not found. ...
... prunichar achar appendint void appendint(int, print32) - source append a string representation of a number. ...
...nt32) - source append a string representation of a number. parameters int aint print32 aradix tointeger print32 tointeger(nsresult*, pruint32) const - source convert this string to an integer. @param aerrorcode pointer to contain result code. ...

nsACString (External)
const - source search for the offset of the last occurrence of a character in a string. @return the offset of the character from the beginning of the string, or -1 if not found. ...
... char achar appendint void appendint(int, print32) - source append a string representation of a number. ...
...nt32) - source append a string representation of a number. parameters int aint print32 aradix tointeger print32 tointeger(nsresult*, pruint32) const - source convert this string to an integer. @param aerrorcode pointer to contain result code. ...

nsAString (External)
pruint32 aoffset rfindchar print32 rfindchar(prunichar) const - source search for the offset of the last occurrence of a character in a string. @return the offset of the character from the beginning of the string, or -1 if not found. ...
... of the character from the beginning of the string, or -1 if not found. parameters prunichar achar appendint void appendint(int, print32) - source append a string representation of a number. ...
...ound. parameters prunichar achar appendint void appendint(int, print32) - source append a string representation of a number. parameters int aint print32 aradix tointeger print32 tointeger(nsresult*, pruint32) const - source convert this string to an integer. ...

nsAutoString (External)
- source search for the offset of the last occurrence of a character in a string. @return the offset of the character from the beginning of the string, or -1 if not found. ...
... prunichar achar appendint void appendint(int, print32) - source append a string representation of a number. ...
...nt32) - source append a string representation of a number. parameters int aint print32 aradix tointeger print32 tointeger(nsresult*, pruint32) const - source convert this string to an integer. @param aerrorcode pointer to contain result code. ...

nsCAutoString (External)
const - source search for the offset of the last occurrence of a character in a string. @return the offset of the character from the beginning of the string, or -1 if not found. ...
... char achar appendint void appendint(int, print32) - source append a string representation of a number. ...
...nt32) - source append a string representation of a number. parameters int aint print32 aradix tointeger print32 tointeger(nsresult*, pruint32) const - source convert this string to an integer. @param aerrorcode pointer to contain result code. ...

nsCStringContainer (External)
const - source search for the offset of the last occurrence of a character in a string. @return the offset of the character from the beginning of the string, or -1 if not found. ...
... char achar appendint void appendint(int, print32) - source append a string representation of a number. ...
...int32) - source append a string representation of a number. parameters int aint print32 aradix tointeger print32 tointeger(nsresult*, pruint32) const - source convert this string to an integer. @param aerrorcode pointer to contain result code. ...

nsCString external
const - source search for the offset of the last occurrence of a character in a string. @return the offset of the character from the beginning of the string, or -1 if not found. ...
... char achar appendint void appendint(int, print32) - source append a string representation of a number. ...
...nt32) - source append a string representation of a number. parameters int aint print32 aradix tointeger print32 tointeger(nsresult*, pruint32) const - source convert this string to an integer. @param aerrorcode pointer to contain result code. ...

nsDependentCString external
const - source search for the offset of the last occurrence of a character in a string. @return the offset of the character from the beginning of the string, or -1 if not found. ...
... char achar appendint void appendint(int, print32) - source append a string representation of a number. ...
...nt32) - source append a string representation of a number. parameters int aint print32 aradix tointeger print32 tointeger(nsresult*, pruint32) const - source convert this string to an integer. @param aerrorcode pointer to contain result code. ...

nsDependentCSubstring external
const - source search for the offset of the last occurrence of a character in a string. @return the offset of the character from the beginning of the string, or -1 if not found. ...
... char achar appendint void appendint(int, print32) - source append a string representation of a number. ...
...nt32) - source append a string representation of a number. parameters int aint print32 aradix tointeger print32 tointeger(nsresult*, pruint32) const - source convert this string to an integer. @param aerrorcode pointer to contain result code. ...

nsDependentString external
- source search for the offset of the last occurrence of a character in a string. @return the offset of the character from the beginning of the string, or -1 if not found. ...
... prunichar achar appendint void appendint(int, print32) - source append a string representation of a number. ...
...nt32) - source append a string representation of a number. parameters int aint print32 aradix tointeger print32 tointeger(nsresult*, pruint32) const - source convert this string to an integer. @param aerrorcode pointer to contain result code. ...

nsDependentSubstring external
- source search for the offset of the last occurrence of a character in a string. @return the offset of the character from the beginning of the string, or -1 if not found. ...
... prunichar achar appendint void appendint(int, print32) - source append a string representation of a number. ...
...int32) - source append a string representation of a number. parameters int aint print32 aradix tointeger print32 tointeger(nsresult*, pruint32) const - source convert this string to an integer. @param aerrorcode pointer to contain result code. ...

nsLiteralCString (External)
const - source search for the offset of the last occurrence of a character in a string. @return the offset of the character from the beginning of the string, or -1 if not found. ...
... char achar appendint void appendint(int, print32) - source append a string representation of a number. ...
...nt32) - source append a string representation of a number. parameters int aint print32 aradix tointeger print32 tointeger(nsresult*, pruint32) const - source convert this string to an integer. @param aerrorcode pointer to contain result code. ...

nsLiteralString (External)
const - source search for the offset of the last occurrence of a character in a string. @return the offset of the character from the beginning of the string, or -1 if not found. ...
... char achar appendint void appendint(int, print32) - source append a string representation of a number. ...
...nt32) - source append a string representation of a number. parameters int aint print32 aradix tointeger print32 tointeger(nsresult*, pruint32) const - source convert this string to an integer. @param aerrorcode pointer to contain result code. ...

nsStringContainer (External)
- source search for the offset of the last occurrence of a character in a string. @return the offset of the character from the beginning of the string, or -1 if not found. ...
... prunichar achar appendint void appendint(int, print32) - source append a string representation of a number. ...
...nt32) - source append a string representation of a number. parameters int aint print32 aradix tointeger print32 tointeger(nsresult*, pruint32) const - source convert this string to an integer. @param aerrorcode pointer to contain result code. ...

nsString external
- source search for the offset of the last occurrence of a character in a string. @return the offset of the character from the beginning of the string, or -1 if not found. ...
... prunichar achar appendint void appendint(int, print32) - source append a string representation of a number. ...
...nt32) - source append a string representation of a number. parameters int aint print32 aradix tointeger print32 tointeger(nsresult*, pruint32) const - source convert this string to an integer. @param aerrorcode pointer to contain result code. ...

nsIAccessibleProvider
xultabbox 0x00001018 a combination of a tabs object and a tabpanels object. xultabs 0x00001019 the collection of tab objects, usable in the tabbox and independent of as well. xultext 0x0000101a xultextbox 0x0000101b xulthumb 0x0000101c xultree 0x000010...
... xultabbox 0x00001018 a combination of a tabs object and a tabpanels object. xultabs 0x00001019 the collection of tab objects, usable in the tabbox and independent of as well. xultext 0x0000101a xultextbox 0x0000101b xulthumb 0x0000101c xultree 0x0000101d xultreecolumns 0x000010...
... xformsselect 0x00002009 used for select and select1 that are implemented using host document's native widget. for example, a select1 in a xhtml document may be represented by the native html control html:select. xformschoices 0x00002010 used for xforms choices element. xformsselectfull 0x00002011 used for xforms full select/select1 elements that may be represented by group of checkboxes and radiogroup. xformsitemcheckgroup 0x00002012 used for xforms item element that is used inside xforms select elements represented by group of checkboxes. xformsitemradiogroup 0x00002013 used for xforms item element that is used inside xforms select1 elements represented by radio group. xformsselectcombobox 0x00002014 used for xforms select1 element that is represented by combobox. xformsitemcom...

nsIDBChangeListener
the nsidbchangelistener interface is used by components wanting to receive notification when the current database changes somehow. ...
...simsgdbview like so: gfolderdisplay.view.dbview.db.addlistener(mylistener); method overview void onhdrflagschanged(in nsimsgdbhdr ahdrchanged, in unsigned long aoldflags, in unsigned long anewflags, in nsidbchangelistener ainstigator); void onhdrdeleted(in nsimsgdbhdr ahdrchanged, in nsmsgkey aparentkey, in long aflags, in nsidbchangelistener ainstigator); void onhdradded(in nsimsgdbhdr ahdrchanged, in nsmsgkey aparentkey, in long aflags, in nsidbchangelistener ainstigator); void onparentchanged(in nsmsgkey akeychanged, in nsmsgkey oldparent, in nsmsgkey newparent, in nsidbchangelistener ainstigator); void onannouncergoingaway(in nsidbchangeannouncer instigator); void onreadchanged(in nsidbchangelistener ainstigator); void on...
...hanged the nsimsgdbhdr of the message that was removed. aparentkey the key of the parent folder for deleted header. the typedef of nsmsgkey is given in mailnewstypes2.idl. aflags the flags on the message. flags are defined in nsmsgmessageflags. ainstigator the caller who deleted the header. this can be used to filter out events that you yourself started. ainstigator may also be null. onhdradded() called when a header is added to the database. void onhdradded(in nsimsgdbhdr ahdrchanged, in nsmsgkey aparentkey, in long aflags, in nsidbchangelistener ainstigator); parameters ahdrchanged the nsimsgdbhdr of the message that was added. aparentkey the key of the parent folder for new header. the typedef of nsmsgkey is given in ma...

ctypes.open
ve files cannot be loaded through chrome:// or resource:// uris. they must be accessed through a local file path (file://) or a jar path (jar:). if the addon is an unpacked addon, such as bootstrap or add-on sdk addons, the jar path must be used. therefore, the path has to be converted and then the converted path is used for loading with ctypes.open. ...
...th ctypes.open. ...
...1'].getservice(components.interfaces.nsichromeregistry); var chromeuri_mylib = services.io.newuri('chrome://youraddon/content/mysubfolder/mycfunctionsforunix.so', 'utf-8', null); var localfile_mylib = cr.convertchromeurl(chromeuri_mylib); var jarpath_mylib = localfile_mylib.spec; // "jar:file:///c:/users/vayeate/appdata/roaming/mozilla/firefox/profiles/aecgxse.unnamed%20profile%201/extensions/youraddon@jetpack.xpi!/mysubfolder/mycfunctionsforunix.so" var filepath_mylib = localfilemylib.path; // "file:///c:/users/vayeate/appdata/roaming/mozilla/firefox/profiles/aecgxse.unnamed%20profile%201/extensions/youraddon@jetpack.xpi!/mysubfolder/mycfunctionsforunix.so" if your add-on is a bootstrap add-on, then you don't need to use this method to convert a chrome:// path; instead, on startup procedu...

Background Tasks API - Web APIs
bel 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. ...
...ing. ...
... solid black; box-shadow: 4px 4px 2px black; } .logheader { margin: 0; padding: 0 6px 4px; height: 22px; background-color: lightblue; border-bottom: 1px solid black; border-radius: 6px 6px 0 0; } #log { font: 12px "courier", monospace; padding: 6px; overflow: auto; overflow-y: scroll; width: 388px; height: 460px; } .container { width: 400px; padding: 6px; border-radius: 6px; border: 1px solid black; box-shadow: 4px 4px 2px black; display: block; overflow: auto; } .label { display: inline-block; } .counter { text-align: right; padding-top: 4px; float: right; } .button { padding-top: 2px; padding-bottom: 4px; width: 100px; display: inline-block; float: left; border: 1px solid black; cursor: pointer; text-align: center; marg...

CSS.registerProperty() - Web APIs
ter a custom property, --my-color, using registerproperty(), as a color, give it a default value, and have it not inherit its value: window.css.registerproperty({ name: '--my-color', syntax: '<color>', inherits: false, initialvalue: '#c0ffee', }); in this example, the custom property --my-color has been registered using the syntax <color> . ...
... inherits: false, initialvalue: '#c0ffee', }); in this example, the custom property --my-color has been registered using the syntax <color> . we can now use that property to transition a gradient on hover or focus. ...
...ice that with the registered property the transition works, but that it doesn't with the unregistered property! ...

CSSPrimitiveValue - Web APIs
style property currently set in a block or to set a specific style property explicitly within the block. an instance of this interface might be obtained from the getpropertycssvalue() method of the cssstyledeclaration interface. a cssprimitivevalue object only occurs in a context of a css property. conversions are allowed between absolute values (from millimeters to centimeters, from degrees to radians, and so on) but not between relative values. (for example, a pixel value cannot be converted to a centimeter value.) percentage values can't be converted since they are relative to the parent value (or another property value). there is one exception for color percentage values: since a color percentage value is relative to the range 0-255, a color percentage value can be converted to a number...
... css_dimension the value is a <number> with an unknown dimension. the value can be obtained by using the getfloatvalue() method. css_ems the value is a <length> in em units. the value can be obtained by using the getfloatvalue() method. css_exs the value is a <length> in ex units. the value can be obtained by using the getfloatvalue() method. css_grad the value is an <angle> in grads. the value can be obtained by using the getfloatvalue() method. css_hz the value is a <frequency> in hertz. the value can be obtained by using the getfloatvalue method. css_ident the value is an identifier. the value can be obtained by using the getstringvalue() method. css_in the value is a <length> in inches. t...
...oatvalue() method. css_percentage the value is a <percentage>. the value can be obtained by using the getfloatvalue() method. css_pt the value is a <length> in points. the value can be obtained by using the getfloatvalue() method. css_px the value is a <length> in pixels. the value can be obtained by using the getfloatvalue() method. css_rad the value is an <angle> in radians. the value can be obtained by using the getfloatvalue() method. css_rect the value is a rect() function. the value can be obtained by using the getrectvalue() method. css_rgbcolor the value is an <color>. the value can be obtained by using the getrgbcolorvalue() method. css_s the value is a <time> in seconds. t...

CanvasRenderingContext2D.arc() - Web APIs
the canvasrenderingcontext2d.arc() method of the canvas 2d api adds a circular arc to the current sub-path. syntax void ctx.arc(x, y, radius, startangle, endangle [, anticlockwise]); the arc() method creates a circular arc centered at (x, y) with a radius of radius. the path starts at startangle, ends at endangle, and travels in the direction given by anticlockwise (defaulting to clockwise). parameters x the horizontal coordinate of the arc's center. y the vertical coordinate of the arc's center. radius the arc's radius. must be positive. startangle the angle at which the arc starts in radians, measured from the positive x-axis. endangle the angle at which the arc ends in radians, measured from the positive x-axis. anticlockwise optional an optional boolean. if true, draws...
...dians, measured from the positive x-axis. anticlockwise optional an optional boolean. if true, draws the arc counter-clockwise between the start and end angles. the default is false (clockwise). examples drawing a full circle this example draws a complete circle with the arc() method. html <canvas></canvas> javascript the arc is given an x-coordinate of 100, a y-coordinate of 75, and a radius of 50. to make a full circle, the arc begins at an angle of 0 radians (0°), and ends at an angle of 2π radians (360°). const canvas = document.queryselector('canvas'); const ctx = canvas.getcontext('2d'); ctx.beginpath(); ctx.arc(100, 75, 50, 0, 2 * math.pi); ctx.stroke(); result different shapes demonstrated this example draws various shapes to show what is possible with arc(). h...
... html <canvas width="150" height="200"></canvas> javascript const canvas = document.queryselector('canvas'); const ctx = canvas.getcontext('2d'); // draw shapes for (let i = 0; i <= 3; i++) { for (let j = 0; j <= 2; j++) { ctx.beginpath(); let x = 25 + j * 50; // x coordinate let y = 25 + i * 50; // y coordinate let radius = 20; // arc radius let startangle = 0; // starting point on circle let endangle = math.pi + (math.pi * j) / 2; // end point on circle let anticlockwise = i % 2 == 1; // draw anticlockwise ctx.arc(x, y, radius, startangle, endangle, anticlockwise); if (i > 1) { ctx.fill(); } else ...

CanvasRenderingContext2D.ellipse() - Web APIs
the canvasrenderingcontext2d.ellipse() method of the canvas 2d api adds an elliptical arc to the current sub-path. syntax void ctx.ellipse(x, y, radiusx, radiusy, rotation, startangle, endangle [, anticlockwise]); the ellipse() method creates an elliptical arc centered at (x, y) with the radii radiusx and radiusy. the path starts at startangle and ends at endangle, and travels in the direction given by anticlockwise (defaulting to clockwise). parameters x the x-axis (horizontal) coordinate of the ellipse's center. y the y-axis (vertical) coordinate of the ellipse's center. radiusx the ellipse's major-axis radius. must be non-negative. radiusy the ellipse's minor-axis radius. must be non-negative. rotation the rotation of the ellipse, expressed in radians. startangle the an...
...rdinate of the ellipse's center. y the y-axis (vertical) coordinate of the ellipse's center. radiusx the ellipse's major-axis radius. must be non-negative. radiusy the ellipse's minor-axis radius. must be non-negative. rotation the rotation of the ellipse, expressed in radians. startangle the angle at which the ellipse starts, measured clockwise from the positive x-axis and expressed in radians. endangle the angle at which the ellipse ends, measured clockwise from the positive x-axis and expressed in radians. anticlockwise optional an optional boolean which, if true, draws the ellipse anticlockwise (counter-clockwise). the default value is false (clockwise). examples drawing a full ellipse this example draws an ellipse at an angle of π/4 radians (45°). to make a full ellip...
...the ellipse ends, measured clockwise from the positive x-axis and expressed in radians. anticlockwise optional an optional boolean which, if true, draws the ellipse anticlockwise (counter-clockwise). the default value is false (clockwise). examples drawing a full ellipse this example draws an ellipse at an angle of π/4 radians (45°). to make a full ellipse, the arc begins at an angle of 0 radians (0°), and ends at an angle of 2π radians (360°). html <canvas id="canvas" width="200" height="200"></canvas> javascript const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); // draw the ellipse ctx.beginpath(); ctx.ellipse(100, 100, 50, 75, math.pi / 4, 0, 2 * math.pi); ctx.stroke(); // draw the ellipse's line of reflection ctx.beginpath(); ctx.setli...

CanvasRenderingContext2D - Web APIs
. possible values: ltr, rtl, inherit (default). fill and stroke styles fill styling is used for colors and styles inside shapes and stroke styling is used for the lines around shapes. canvasrenderingcontext2d.fillstyle color or style to use inside shapes. default #000 (black). canvasrenderingcontext2d.strokestyle color or style to use for the lines around shapes. default #000 (black). gradients and patterns canvasrenderingcontext2d.createlineargradient() creates a linear gradient along the line given by the coordinates represented by the parameters. canvasrenderingcontext2d.createradialgradient() creates a radial gradient given by the coordinates of the two circles represented by the parameters. canvasrenderingcontext2d.createpattern() creates a pattern using the specified ...
...) coordinates with a straight line. canvasrenderingcontext2d.beziercurveto() adds a cubic bézier curve to the current path. canvasrenderingcontext2d.quadraticcurveto() adds a quadratic bézier curve to the current path. canvasrenderingcontext2d.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. canvasrenderingc...
... used in the future instead. canvasrenderingcontext2d.currenttransform current transformation matrix (svgmatrix object). canvasrenderingcontext2d.gettransform retrieves the current transformation matrix being applied to the context. canvasrenderingcontext2d.rotate() adds a rotation to the transformation matrix. the angle argument represents a clockwise rotation angle and is expressed in radians. canvasrenderingcontext2d.scale() adds a scaling transformation to the canvas units by x horizontally and by y vertically. canvasrenderingcontext2d.translate() adds a translation transformation by moving the canvas and its origin x horzontally and y vertically on the grid. canvasrenderingcontext2d.transform() multiplies the current transformation matrix with the matrix described by its ...

EXT_shader_texture_lod - Web APIs
. ...
...l shader code, if this extension is enabled: vec4 texture2dlodext(sampler2d sampler, vec2 coord, float lod) vec4 texture2dprojlodext(sampler2d sampler, vec3 coord, float lod) vec4 texture2dprojlodext(sampler2d sampler, vec4 coord, float lod) vec4 texturecubelodext(samplercube sampler, vec3 coord, float lod) vec4 texture2dgradext(sampler2d sampler, vec2 p, vec2 dpdx, vec2 dpdy) vec4 texture2dprojgradext(sampler2d sampler, vec3 p, vec2 dpdx, vec2 dpdy) vec4 texture2dprojgradext(sampler2d sampler, vec4 p, vec2 dpdx, vec2 dpdy) vec4 texturecubegradext(samplercube sampler, vec3 p, vec3 dpdx, vec3 dpdy) examples enabling the extensions: gl.getextension('ext_shader_texture_lod'); shader code that avoids artifacts when wrapping texture coordinates: <script type="x-shader/x-fragment"> #extensi...
... recommendation initial definition. ...

HTMLInputElement - Web APIs
n be set by the setcustomvalidity method. willvalidate read only boolean: returns whether the element is a candidate for constraint validation. it is false if any conditions bar it from constraint validation, including: its type is hidden, reset, or button; it has a <datalist> ancestor; its disabled property is true. properties that apply only to elements of type checkbox or radio checked boolean: returns / sets the current state of the element when type is checkbox or radio. defaultchecked boolean: returns / sets the default state of a radio button or checkbox as originally specified in html that created this object. indeterminate boolean: returns whether the checkbox or radio button is in indeterminate state. for checkboxes, the effec...
...ay of filesystementry objects: describes the currently selected files or directories. properties that apply only to text/number-containing or elements autocomplete string: returns / sets the element's autocomplete attribute, indicating whether the value of the control can be automatically completed by the browser. ignored if the value of the type attribute is hidden, checkbox, radio, file, or a button type (button, submit, reset, image). possible values are: on: the browser can autocomplete the value using previously stored value off: the user must explicity enter a value max string: returns / sets the element's max attribute, containing the maximum (numeric or date-time) value for this item, which must not be less than its minimum (min attribute) value. ...
... contain carriage returns or line-feeds. this attribute applies when the value of the type attribute is text, search, tel, url or email; otherwise it is ignored. readonly boolean: returns / sets the element's readonly attribute, indicating that the user cannot modify the value of the control. html5this is ignored if the value of the type attribute is hidden, range, color, checkbox, radio, file, or a button type. selectionstart unsigned long: returns / sets the beginning index of the selected text. when nothing is selected, this returns the position of the text input cursor (caret) inside of the <input> element. selectionend unsigned long: returns / sets the end index of the selected text. when there's no selection, this returns the offset of the characte...

IDBDatabase.onversionchange - Web APIs
the onversionchange event handler of the idbdatabase interface handles the versionchange event, fired when a database structure change (idbopendbrequest.onupgradeneeded event or idbfactory.deletedatabase) was requested elsewhere (most probably in another window/tab on the same computer). this is different from the versionchange transaction (but it is related). note: this feature is available in web workers. syntax idbdatabase.onversionchange = function(event) { ... ...
...nge (idbopendbrequest.onupgradeneeded event or idbfactory.deletedatabase) was requested elsewhere (most probably in another window/tab on the same computer). this is different from the versionchange transaction (but it is related). note: this feature is available in web workers. syntax idbdatabase.onversionchange = function(event) { ... } example this example shows an idbopendbrequest.onupgradeneeded block that creates a new object store; it also includes onerror and onabort functions to handle non-success cases, and an onversionchange function to notify when a database structure change has occurred. ...
...d). note: this feature is available in web workers. syntax idbdatabase.onversionchange = function(event) { ... } example this example shows an idbopendbrequest.onupgradeneeded block that creates a new object store; it also includes onerror and onabort functions to handle non-success cases, and an onversionchange function to notify when a database structure change has occurred. ...

IDBDatabase: versionchange event - Web APIs
the versionchange event is fired when a database structure change (idbopendbrequest.onupgradeneeded event or idbfactory.deletedatabase) was requested. ...
....onupgradeneeded event or idbfactory.deletedatabase) was requested. ...
...e: false }); }; dbopenrequest.addeventlistener('success', event => { const db = event.target.result; db.addeventlistener('versionchange', event => { console.log('the version of this database has changed'); }); }); the same example, using the onversionchange event handler property: // open the database const dbopenrequest = window.indexeddb.open('nonexistent', 4); dbopenrequest.onupgradeneeded = event => { const db = event.target.result; // create an objectstore for this database const objectstore = db.createobjectstore('todolist', { keypath: 'tasktitle' }); // define what data items the objectstore will contain objectstore.createindex('hours', 'hours', { unique: false }); objectstore.createindex('minutes', 'minutes', { unique: false }); objectstore.createindex('d...

IDBObjectStore.createIndex() - Web APIs
th the same name already exists in the database. index names are case-sensitive. invalidaccesserror occurs if the provided key path is a sequence, and multientry is set to true in the objectparameters object. invalidstateerror occurs if either: the method was not called from a versionchange transaction mode callback, i.e. from inside a idbopendbrequest.onupgradeneeded handler. the object store has been deleted. syntaxerror occurs if the provided keypath is not a valid key path. transactioninactiveerror occurs if the transaction this idbobjectstore belongs to is not active (e.g. has been deleted or removed.) in firefox previous to version 41, an invalidstateerror was raised in this case as well, which was misleading;...
... not a valid key path. transactioninactiveerror occurs if the transaction this idbobjectstore belongs to is not active (e.g. has been deleted or removed.) in firefox previous to version 41, an invalidstateerror was raised in this case as well, which was misleading; this has now been fixed (see bug 1176165.) example in the following example you can see the idbopendbrequest.onupgradeneeded handler being used to update the database structure if a database with a higher version number is loaded. createindex() is used to create new indexes on the object store. for a full working example, see our to-do notifications app (view example live.) var db; // let us open our database var dbopenrequest = window.indexeddb.open("todolist", 4); // two event handlers for opening the data...
...sult; // run the displaydata() function to populate the task list with // all the to-do list data already in the idb displaydata(); }; // this handler fires when a new database is created and indicates // either that one has not been created before, or a new version // was submitted with window.indexeddb.open(). (see above.) // it is only implemented in recent browsers. ...

IDBObjectStore.deleteIndex() - Web APIs
note that this method must be called only from a versionchange transaction mode callback. note that this method synchronously modifies the idbobjectstore.indexnames property. note: this feature is available in web workers. syntax objectstore.deleteindex(indexname); parameters indexname the name of the existing index to remove. ...
...to is not active (e.g. has been deleted or removed.) in firefox previous to version 41, an invalidstateerror was raised in this case as well, which was misleading; this has now been fixed (see bug 1176165.) notfounderror occurs if there is no index with the given name (case-sensitive) in the database. example in the following example you can see the idbopendbrequest.onupgradeneeded handler being used to update the database structure if a database with a higher version number is loaded. idbobjectstore.createindex is used to create new indexes on the object store, after which we delete the unneeded old indexes with deleteindex(). for a full working example, see our to-do notifications app (view example live.) var db; // let us open our database var dbopenrequest = w...
...isplaydata() function to populate the task list with all the to-do list data already in the idb displaydata(); }; // this event handles the event whereby a new version of the database needs to be created // either one has not been created before, or a new version number has been submitted via the // window.indexeddb.open line above //it is only implemented in recent browsers dbopenrequest.onupgradeneeded = function(event) { var db = this.result; db.onerror = function(event) { note.innerhtml += '<li>error loading database.</li>'; }; // create an objectstore for this database var objectstore = db.createobjectstore("todolist", { keypath: "tasktitle" }); // define what data items the objectstore will contain objectstore.createindex("hours", "hours", { unique: false })...

IDBObjectStore - Web APIs
a separate thread. this is for deleting all current records out of an object store. idbobjectstore.count() returns an idbrequest object, and, in a separate thread, returns the total number of records that match the provided key or idbkeyrange. if no arguments are provided, it returns the total number of records in the store. idbobjectstore.createindex() creates a new index during a version upgrade, returning a new idbindex object in the connected database. idbobjectstore.delete() returns an idbrequest object, and, in a separate thread, deletes the store object selected by the specified key. this is for deleting individual records out of an object store. idbobjectstore.deleteindex() destroys the specified index in the connected database, used during a version upgrade. idbobjectstore.g...
...an idbrequest object, and, in a separate thread, creates a structured clone of the value, and stores the cloned value in the object store. this is for updating existing records in an object store when the transaction's mode is readwrite. example this example shows a variety of different uses of object stores, from updating the data structure with idbobjectstore.createindex inside an onupgradeneeded function, to adding a new item to our object store with idbobjectstore.add. for a full working example, see our to-do notifications app (view example live.) // let us open our database var dbopenrequest = window.indexeddb.open("todolist", 4); dbopenrequest.onsuccess = function(event) { note.innerhtml += '<li>database initialised.</li>'; // store the result of opening the database in...
...unction(event) { note.innerhtml += '<li>database initialised.</li>'; // store the result of opening the database in db. ...

IDBOpenDBRequest.onblocked - Web APIs
note: this feature is available in web workers. syntax idbopendbrequest.onblocked = function(event) { ... ...
...laydata() function to populate the task list with // all the to-do list data already in the idb displaydata(); }; // this event handles the event whereby a new version of the // database needs to be created. ...
... recommendation indexed database api draftthe definition of 'onblocked' in that specification. ...

IDBRequest.transaction - Web APIs
the transaction read-only property of the idbrequest interface returns the transaction for the request, that is, the transaction the request is being made inside. this property can be null for requests not made within transactions, such as for requests returned from idbfactory.open — in this case you're just connecting to a database, so there is no transaction to return. if a version upgrade is needed when opening a database then during the upgradeneeded event handler the transaction property will be an idbtransaction with mode equal to "versionchange", and can be used to access existing object stores and indexes, or abort the the upgrade. following the upgrade, the transaction ​property will again be null. note: this feature is available in web workers. syntax var mytransaction = ...
... var db = openrequest.result; if (event.oldversion < 1) { // new database, create "books" object store. db.createobjectstore(...
...quest succeeds, run the displaydata() // function again to update the display updatetitlerequest.onsuccess = function() { displaydata(); }; }; this example shows how a the transaction property can be used during a version upgrade to access existing object stores:​ var openrequest = indexeddb.open('db', 2); console.log(openrequest.transaction); // will log "null". openrequest.onupgradeneeded = function(event) { console.log(openrequest.transaction.mode); // will log "versionchange". var db = openrequest.result; if (event.oldversion < 1) { // new database, create "books" object store. db.createobjectstore('books'); } if (event.oldversion < 2) { // upgrading from v1 database: add index on "title" to "books" store. var bookstore = openrequest.transaction.

SVGCircleElement - Web APIs
lement. svgcircleelement.cx read only this property defines the x-coordinate of the center of the <circle> element. it is denoted by the cx attribute of the element. svgcircleelement.cy read only this property defines the y-coordinate of the center of the <circle> element. it is denoted by the cy attribute of the element. svgcircleelement.r read only this property defines the radius of the <circle> element. it is denoted by the r of the element. methods this interface has no methods but inherits methods from its parent, svggeometryelement. example svg content <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 250 250" width="250" height="250"> <circle cx="100" cy="100" r="50" fill="gold" id="circle" onclick="clickcircle();"/> </svg> javascript content ...
...hods but inherits methods from its parent, svggeometryelement. example svg content <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 250 250" width="250" height="250"> <circle cx="100" cy="100" r="50" fill="gold" id="circle" onclick="clickcircle();"/> </svg> javascript content this function clickcircle() is called when the circle is clicked. ...
...50" width="250" height="250"> <circle cx="100" cy="100" r="50" fill="gold" id="circle" onclick="clickcircle();"/> </svg> javascript content this function clickcircle() is called when the circle is clicked. it randomly increases or decreases the radius of the circle element. function clickcircle() { var circle = document.getelementbyid("circle"); // randomly determine if the circle radius will increase or decrease var change = math.random() > 0.5 ? 10 : -10; // clamp the circle radius to a minimum of 10 and a maximum of 250, // so it won't disappear or get bigger than the viewport var newvalue = math.min(math.max(circle.r.baseval.value + change, 10), 250); circle.setattribute("r", newvalue); } click on the circle. specifications specification status ...

Touch events - Web APIs
his also prevents a mouse event from also being delivered). then we get the context and pull the list of changed touch points out of the event's touchevent.changedtouches property. after that, we iterate over all the touch objects in the list, pushing them onto an array of active touchpoints and drawing the start point for the draw as a small circle; we're using a 4-pixel wide line, so a 4-pixel radius circle will show up neatly. drawing as the touches move each time one or more fingers move, a touchmove event is delivered, resulting in our handlemove() function being called. its responsibility in this example is to update the cached touch information and to draw a line from the previous position to the current position of each touch. function handlemove(evt) { evt.preventdefault(); v...
... recommendation initial definition. ...
... recommendation initial definition. ...

Using DTMF with WebRTC - Web APIs
in order to more fully support audio/video conferencing, webrtc supports sending dtmf to the remote peer on an rtcpeerconnection. this article offers a brief high-level overview of how dtmf works over webrtc, then provides a guide for everyday developers about how to send dtmf over an rtcpeerconnection. the dtmf system is often referred to as "touch tone," after an old trade name for the system. webrtc doesn't send dtmf codes as audio data. instead, they're sent out-of-band, as rtp payloads. note, however, that although it's possible to send dtmf using webrtc, there is currently no way to detect or receive incoming dtmf. webrtc currently ignores these payloads; this is because webrtc's dtmf support is primarily intended for use with legacy telephone services that rely on dtmf tones to perfo...
...if it does, we set hasaddtrack to true; otherwise, we set it to false. this variable will let the example operate even on browsers not yet implementing the ...
... to the receiver when the receiver begins to receive media, an event is delivered to the receiver's rtcpeerconnection, receiverpc. as explained in starting the connection process, the current webrtc specification uses the track event for this, but some browsers haven't been updated to support this yet, so we also need to handle the addstream event. the handlereceivertrackevent() and handlereceiveraddstreamevent() methods, shown below, handle these. function handlereceivertrackevent(event) { audio.srcobject = event.streams[0]; } function handlereceiveraddstreamevent(event) { audio.srcobject = event.stream; } the track event includes a streams property containing an array of the streams the track is a member of (one track can be part of many streams). we take the first stream and attac...

Writing a WebSocket server in C# - Web APIs
this is known as handshaking. this sample code can detect a get from the client. note that this will block until the first 3 bytes of a message are available. alternative solutions should be investigated for production environments. using system.text; using system.text.regularexpressions; while(client.available < 3) { // wait for en...
...hash of the new value write the hash back as the value of "sec-websocket-accept" response header in an http response if (new system.text.regularexpressions.regex("^get").ismatch(data)) { const string eol = "\r\n"; // http/1.1 defines the sequence cr lf as the end-of-line marker byte[] response = encoding.utf8.getbytes("http/1.1 101 switching protocols" + eol + "connection: upgrade" + eol + "upgrade: websocket" + eol + "sec-websocket-accept: " + convert.tobase64string( system.security.cryptography.sha1.create().computehash( encoding.utf8.getbytes( new system.text.regularexpressions.regex("sec-websocket-key: (.*)").match(data).groups[1].value.trim() + "258eafa5-e914-47da-95ca-c5ab0dc85b11" ) ...
... = system.security.cryptography.sha1.create().computehash(encoding.utf8.getbytes(swka)); string swkasha1base64 = convert.tobase64string(swkasha1); // http/1.1 defines the sequence cr lf as the end-of-line marker byte[] response = encoding.utf8.getbytes( "http/1.1 101 switching protocols\r\n" + "connection: upgrade\r\n" + "upgrade: websocket\r\n" + "sec-websocket-accept: " + swkasha1base64 + "\r\n\r\n"); stream.write(response, 0, response.length); } else { bool fin = (bytes[0] & 0b10000000) != 0, mask = (bytes[1] & 0b10000000) != 0; // must be true, "all messages from the client to the server have this ...

Writing a WebSocket server in Java - Web APIs
to this output stream. inputstream methods: read(byte[] b, int off, int len) reads up to len bytes of data from the input stream into an array of bytes. let us extend our example. inputstream in = client.getinputstream(); outputstream out = client.getoutputstream(); scanner s = new scanner(in, "utf-8"); handshaking when a client connects to a server, it sends a get request to upgrade the connection to a websocket from a simple http request. this is known as handshaking. try { string data = s.usedelimiter("\\r\\n\\r\\n").next(); matcher get = pattern.compile("^get").matcher(data); creating the response is easier than understanding why you must do it in this way. you must, obtain the value of sec-websocket-key request header without any leading and trailing wh...
...itespace link it with "258eafa5-e914-47da-95ca-c5ab0dc85b11" compute sha-1 and base64 code of it write it back as value of sec-websocket-accept response header as part of a http response. ...
... "258eafa5-e914-47da-95ca-c5ab0dc85b11" compute sha-1 and base64 code of it write it back as value of sec-websocket-accept response header as part of a http response. ...

Web APIs
sum cssmathvalue cssmediarule cssnamespacerule cssnumericvalue cssomstring csspagerule csspositionvalue cssprimitivevalue csspseudoelement cssrule cssrulelist cssstyledeclaration cssstylerule cssstylesheet cssstylevalue csssupportsrule cssunitvalue cssunparsedvalue cssvalue cssvaluelist cssvariablereferencevalue cache cachestorage canvascapturemediastreamtrack canvasgradient canvasimagesource canvaspattern canvasrenderingcontext2d caretposition channelmergernode channelsplitternode characterdata childnode client clients clipboard clipboardevent clipboarditem closeevent comment compositionevent constantsourcenode constrainboolean constraindomstring constraindouble constrainulong contentindex contentindexevent convolvernode countqueuingstrategy crashrep...
...crtpencodingparameters rtcrtpparameters rtcrtpreceiveparameters rtcrtpreceiver rtcrtpsendparameters rtcrtpsender rtcrtpstreamstats rtcrtpsynchronizationsource rtcrtptransceiver rtcrtptransceiverdirection rtcrtptransceiverinit rtcsctptransport rtcsessiondescription rtcsessiondescriptioncallback rtcstats rtcstatsicecandidatepairstate rtcstatsreport rtcstatstype rtctrackevent rtctrackeventinit radionodelist range readablebytestreamcontroller readablestream readablestreambyobreader readablestreambyobrequest readablestreamdefaultcontroller readablestreamdefaultreader relativeorientationsensor renderingcontext report reportingobserver reportingobserveroptions request requestdestination resizeobserver resizeobserverentry response rsahashedimportparams rsahashedkeygenparams rsao...
...epointlightelement svgfespecularlightingelement svgfespotlightelement svgfetileelement svgfeturbulenceelement svgfilterelement svgfilterprimitivestandardattributes svgfontelement svgfontfaceelement svgfontfaceformatelement svgfontfacenameelement svgfontfacesrcelement svgfontfaceurielement svgforeignobjectelement svggelement svggeometryelement svgglyphelement svgglyphrefelement svggradientelement svggraphicselement svghkernelement svgimageelement svglength svglengthlist svglineelement svglineargradientelement svgmpathelement svgmaskelement svgmatrix svgmeshelement svgmetadataelement svgmissingglyphelement svgnumber svgnumberlist svgpathelement svgpatternelement svgpoint svgpolygonelement svgpolylineelement svgpreserveaspectratio svgradialgradientelement svgrect svgrecte...

Web applications and ARIA FAQ - Accessibility
of aria. more detailed browser compatibility charts are available from multiple sources: caniuse.com the paciello group assistive technologies assistive technologies are increasingly adopting aria. some of them include: assistive technology minimum version for basic aria minimum version for live region and alert support nvda 2010.2 (nvda is always a free upgrade) 2011.1 for firefox, no live region support in ie as of 2011.2. orca ? (tbd) ? (tbd) voiceover osx 10.5, ios 4 os x 10.7 ios 5 jaws 8 10 window-eyes 7 no live region support currently zoomtext ? no live region support currently note: early versions of these tools often had partial or buggy aria implement...
...where the browser supports an html5 tag that also exists in aria, there is usually no need to also add aria roles and states to the element. aria includes many roles, states, and properties that aren't available in html5, so these will continue to be useful to developers who use html5. for more information, steve faulkner has written a good overview of the relationship between html5 and aria. degrading gracefully from html5 to aria when delivering content to browsers that aren't html5-aware, you may want to consider gracefully degrading to the use of aria where necessary. so, using the example of a progress bar, you can degrade gracefully to a role="progressbar" in cases where the <progressbar> tag isn't supported. here is an example of the markup used for an html5 progress bar: <!doctype...
...ivering content to browsers that aren't html5-aware, you may want to consider gracefully degrading to the use of aria where necessary. so, using the example of a progress bar, you can degrade gracefully to a role="progressbar" in cases where the <progressbar> tag isn't supported. here is an example of the markup used for an html5 progress bar: <!doctype html> <html> <head><title>gracefully degrading progress bar</title></head> <body> <progress id="progress-bar" value="0" max="100">0% complete</progress> <button id="update-button">update</button> </body> </html> ... and here is the javascript code that will ensure the progress bar still works in older browsers: var progressbar = document.getelementbyid("progress-bar"); // check to see if the browser supports the html5 <progr...

Accessibility documentation index - Accessibility
aria, accessibility, forms, web you have a form — a contact form, for example — that you want to put some accessible error checking into. examples of common problems include e-mail addresses which are not valid, or a name field which does not contain at least a first name or a surname. 10 basic form hints aria, accessibility, forms when implementing forms using traditional html form-related elements, it is important to provide labels for controls, and explicitly associate a label with its control. 11 multipart labels: using aria for labels with embedded fields inside them aria, accessibility, ben millard, firefox, guide, help, html, html 4, jaws, needscontent, aria-labelledby, label, solution, trouble shoot, troubleshoot the solution is ...
...ria, wcag this technique demonstrates how to use the presentation role and describes the effect it has on browsers and assistive technology. 35 using the progressbar role aria, accessibility, needscontent, needsexample this technique demonstrates how to use the progressbar role and describes the effect it has on browsers and assistive technology. 36 using the radio role needscontent this technique demonstrates how to use the radio role and describes the effect it has on browsers and assistive technology. 37 using the slider role aria, accessibility, needscontent this technique demonstrates how to use the slider role and describes the effect it has on browsers and assistive technology. 38 using the status role ...
...the updated content when the role is added. if the user is expected to close the alert, then the alertdialog role should be used instead. 52 aria: application role aria, aria role, aria widget, reference, role application the application role indicates to assistive technologies that an element and all of its children should be treated similar to a desktop application, and no traditional html interpretation techniques should be used. this role should only be used to define very dynamic and desktop-like web applications. 53 aria: article role aria, aria role, aria article role, article, article role, reference the article role indicates a section of a page that could easily stand on its own on a page, in a document, or on a website. it is usually set on...

Using multiple backgrounds - CSS: Cascading Style Sheets
l 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. ...
...t, background-size. ...
...each subsequent sub-property (background-repeat and background-position) applies to the corresponding backgrounds. so the first listed value for background-repeat applies to the first (frontmost) background, and so forth. ...

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 resize 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 ...
...ic type of css images, gradients, and how to create and use these. implementing image sprites in css describes the common technique grouping several images in one single document to save download requests and speed up the availability of a page. specifications specification status comment css images module level 4 working draft added image-resolution, conic-gradient(), and image() css images module level 3 candidate recommendation added image-orientation, image-rendering, object-fit and object-position compatibility standardthe definition of 'css gradients' in that specification. ...
... candidate recommendation css level 2 (revision 1)the definition of '<uri>' in that specification. ...

attr() - CSS: Cascading Style Sheets
angle <angle> the attribute value is parsed as a css <angle> dimension, that is including the unit (e.g. 30.5deg). if it is not valid, that is not an angle or out of the range accepted by the css property, the default value is used. leading and trailing spaces are stripped. 0deg, or, if 0deg is not a valid value for the property, the property's minimum value. deg, grad, rad <angle> the attribute value is parsed as a css <number>, that is without the unit (e.g. 12.5), and interpreted as an <angle> with the specified unit. if it is not valid, that is not a number or out of the range accepted by the css property, the default value is used. leading and trailing spaces are stripped. 0deg, or, if 0deg is not a valid value for the property, the prop...
... or contains an invalid value. if not set, css will use the default value defined for each <type-or-unit>. ...
...ntains an invalid value. if not set, css will use the default value defined for each <type-or-unit>. ...

border-image - CSS: Cascading Style Sheets
e in case the border image fails to load. indeed, this is required according to the specification, although not all browsers implement this requirement. ...
... note: if the computed value of border-image-source is none, or if the image cannot be displayed, the border-style will be displayed instead. ...
... #bitmap { width: 200px; background-color: #ffa; border: 36px solid orange; margin: 30px; padding: 10px; border-image: url("https://udn.realityripple.com/samples/2c/fa0192d18e.png") /* source */ 27 / /* slice */ 36px 28px 18px 8px / /* width */ 18px 14px 9px 4px /* outset */ round; /* repeat */ } result gradient html <div id="gradient">this element is surrounded by a gradient-based border image!</div> css #gradient { width: 200px; border: 30px solid; border-image: repeating-linear-gradient(45deg, #f33, #3bf, #f33 30px) 60; padding: 20px; } result specifications specification status comment css backgrounds and borders module level 3the definition of 'bord...

box-decoration-break - CSS: Cascading Style Sheets
r each line/column/page. note that the hypothetical box can be different for each fragment since it uses its own height if the break occurs in the inline direction, and its own width if the break occurs in the block direction. see the css specification for details. clone each box fragment is rendered independently with the specified border, padding, and margin wrapping each fragment. the border-radius, border-image, and box-shadow are applied to each fragment independently. the background is also drawn independently for each fragment, which means that a background image with background-repeat: no-repeat may nevertheless repeat multiple times. formal definition initial valuesliceapplies toall elementsinheritednocomputed valueas specifiedanimation typediscrete formal syntax slice | clone...
...each fragment, which means that a background image with background-repeat: no-repeat may nevertheless repeat multiple times. formal definition initial valuesliceapplies toall elementsinheritednocomputed valueas specifiedanimation typediscrete formal syntax slice | clone examples inline box fragments an inline element that contains line breaks styled with: .example { background: linear-gradient(to bottom right, yellow, green); box-shadow: 8px 8px 10px 0px deeppink, -5px -5px 5px 0px blue, 5px 5px 15px 0px yellow; padding: 0em 1em; border-radius: 16px; border-style: solid; margin-left: 10px; font: 24px sans-serif; line-height: 2; } ... <span class="example">the<br>quick<br>orange fox</span> ... results in: adding box-decoration-break: clone to the above...
...ft: 10px; font: 24px sans-serif; line-height: 2; } ... <span class="example">the<br>quick<br>orange fox</span> ... results in: adding box-decoration-break: clone to the above styles: -webkit-box-decoration-break: clone; box-decoration-break: clone; ... results in: you can try the two inline examples above in your browser. here's an example of an inline element using a large border-radius value. the second "im" has a line-break between the "i" and the "m". for comparison, the first "im" is without line breaks. note that if you stack the rendering of the two fragments horizontally next to each other it will result in the non-fragmented rendering. try the above example in your browser. block box fragments a block element with similar styles as above and no fragmentation resu...

color-adjust - CSS: Cascading Style Sheets
de the behavior, but each user agent is allowed to decide for itself how to handle color-adjust in any given situation. ...
...ow to handle color-adjust in any given situation. formal definition initial valueeconomyapplies toall elementsinheritedyescomputed valueas specifiedanimation typediscrete formal syntax economy | exact examples preserving low contrast in this example, a box is shown which uses a background-image and a translucent linear-gradient() function atop a black background color to have a dark blue gradient behind medium red text. ...
...gradient() function atop a black background color to have a dark blue gradient behind medium red text. for whatever reason, this is the desired appearance in any rendering environment, including on paper, so we also use color-adjust: exact to tell the browser not to make color or style adjustments to the box when rendering it. ...

<custom-ident> - CSS: Cascading Style Sheets
grid-row-start grid-row-end grid-column-start grid-column-end forbids the span value. will-change forbids the global css values (unset, initial, and inherit), as well as the values will-change, auto, scroll-position, and contents. examples valid identifiers nono79 a mix of alphanume...
... grid-row-start grid-row-end grid-column-start grid-column-end forbids the span value. will-change forbids the global css values (unset, initial, and inherit), as well as the values will-change, auto, scroll-position, and contents. examples valid identifiers nono79 a mix of alphanumeric characters and nu...
...evel a mix of alphanumeric characters and a dash -test a dash followed by alphanumeric characters _internal an underscore followed by alphanumeric characters \22 toto a unicode character followed by a sequence of alphanumeric characters bili\.bob a correctly escaped period invalid identifiers 34rem it must not start with a decimal digit. -12rad it must not start with a dash followed by a decimal digit. bili.bob only alphanumeric characters, _, and - needn't be escaped. --toto it must not start with two dashes. this would be a custom property. 'bilibob' this would be a <string>. "bilibob" this would be a <string>. specifications specification status comment css ...

element() - CSS: Cascading Style Sheets
as the background for a given css background element. syntax element(id) where: id the id of an element to use as the background, specified using the html attribute #id on the element. examples these examples can be viewed live in builds of firefox that support -moz-element(). a somewhat realistic example this example uses a hidden <div> as a background. ...
...cool, huh?</p> </div> </div> the <div> element with the id "mybackground1" is used as the background for the content including the paragraph "this box uses the element with the #mybackground1 id as its background!". ...
...rt no support no supportexperimental. expect behavior to change in the future.experimental. expect behavior to change in the future.see implementation notes.see implementation notes.requires a vendor prefix or different name for use.requires a vendor prefix or different name for use. see also image() image-set() <image> <gradient> element() cross-fade() document.mozsetimageelement() ...

drop-shadow() - CSS: Cascading Style Sheets
image's alpha mask, drawn in a specific color and composited below the image. note: this function is somewhat similar to the box-shadow property. the box-shadow property creates a rectangular shadow behind an element's entire box, while the drop-shadow() filter function creates a shadow that conforms to the shape (alpha channel) of the image itself. syntax drop-shadow(offset-x offset-y blur-radius color) the drop-shadow() function accepts a parameter of type <shadow> (defined in the box-shadow property), with the exception that the inset keyword and spread parameters are not allowed. parameters offset-x offset-y (required) two <length> values that determine the shadow offset. offset-x specifies the horizontal distance, where negative values place the shadow to the left of the elem...
...ot allowed. parameters offset-x offset-y (required) two <length> values that determine the shadow offset. offset-x specifies the horizontal distance, where negative values place the shadow to the left of the element. offset-y specifies the vertical distance, where negative values place the shadow above the element. if both values are 0, the shadow is placed directly behind the element. blur-radius (optional) the shadow's blur radius, specified as a <length>. the larger the value, the larger and more blurred the shadow becomes. if unspecified, it defaults to 0, resulting in a sharp, unblurred edge. negative values are not allowed. color (optional) the color of the shadow, specified as a <color>. if unspecified, the value of the color property is used. examples setting a drop shadow...
...lur radius, specified as a <length>. the larger the value, the larger and more blurred the shadow becomes. if unspecified, it defaults to 0, resulting in a sharp, unblurred edge. negative values are not allowed. color (optional) the color of the shadow, specified as a <color>. if unspecified, the value of the color property is used. examples setting a drop shadow using pixel offsets and blur radius /* black shadow with 10px blur */ drop-shadow(16px 16px 10px black) setting a drop shadow using rem offsets and blur radius /* reddish shadow with 1rem blur */ drop-shadow(.5rem .5rem 1rem #e23) specifications specification status filter effects module level 1the definition of 'drop-shadow()' in that specification. working draft ...

Adding captions and subtitles to HTML5 video - Developer guides
he video controls have undergone some minor changes in order to make space for the extra button, but these are relatively straightforward. no image is used for the captions button, so it is simply styled as: .controls button[data-state="subtitles"] { height:85%; text-indent:0; font-size:16px; font-size:1rem; font-weight:bold; color:#666; background:#000; border-radius:2px; } there are also other css changes that are specific to some extra javascript implementation, but these will be mentioned at the appropriate place below. subtitle implementation a lot of what we do to access the video subtitles revolves around javascript. similar to the video controls, if a browser supports html5 video subtitles, there will be a button provided within the native contro...
... the ::cue pseudo-element is the key to targetting individual text track cues for styling, as it matches any defined cue. there are only a handful of css properties that can be applied to a t...
... the webvtt, srt and dfxp formats. mediaelement.js another complete video player that also support video captions, albeit only in srt format. leanback player yet another video player that supports webvtt captions as well as providing other standard player functionality. sublimevideo this player also supports captions through webvtt and srt files. video.js supports webvtt video subtitles. radiant media player supports multi-languages webvtt closed captions note: you can find an excellent list of html5 video players and their current "state" at html5 video player comparison. ...

Index - Developer guides
often shortened to just streaming, live streaming is the process of transmitting media 'live' to computers and devices. this is a fairly complex and nascent subject with a lot of variables, so in this article, we'll introduce you to the subject and let you know how you can get started. 11 media buffering, seeking, and time ranges apps, buffer, ht...
...ckpad and can be interpreted to perform specific tasks. 22 mutation events advanced, dom, guide mutation events provide a mechanism for a web page or an extension to get notified about changes made to the dom. use mutation observers instead if possible. 23 orientation and motion data explained intermediate, mobile, motion, needscontent, orientation, páginas_a_traducir, rotation when using orientation and motion events, it's important to understand what the values you're given by the browser mean. this article provides details about the coordinate systems at play and how you use them. 24 overview of events and handlers beginner, dom, example, javascript, needsbeginnerupdate, needsupdate, events this overview of events and event ha...
...ent 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, a hybrid approach may be your best bet. decisions like these are at the heart of mobile web development: be specific about what you would like to accomplish, and pick a practical approach while being aware of the tradeoffs. good luck! 34 mobile-friendliness mobile, web development 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. 35 separate sites for mobile and desktop mobile, web development ...

<img>: The Image Embed element - HTML: Hypertext Markup Language
it would still be possible for a site to track a user's approximate scroll position throughout a session, by strategically placing images in a page's markup such that a server can track how many images are requested and when. referrerpolicy a string indicating which referrer to use when fetching the resource: no-referrer: the referer header will not be sent. no-referrer-when-downgrade: no referer header is sent when navigating to an origin without https. this is the default if no policy is otherwise specified. origin: the referer header will include the page's origin (scheme, host, and port). origin-when-cross-origin: navigating to other origins will limit the included referral data to the scheme, host, and port, while navigating from the same origin will include the full...
...r the element. use the id attribute instead. vspace the number of pixels of white space above and below the image. use the margin css property instead. styling with css <img> is a replaced element; it has a display value of inline by default, but its default dimensions are defined by the embedded image's intrinsic values, like it were inline-block. you can set properties like border/border-radius, padding/margin, width, height, etc. on an image. <img> has no baseline, so when images are used in an inline formatting context with vertical-align: baseline, the bottom of the image will be placed on the text baseline. you can use the object-position property to position the image within the element's box, and the object-fit property to adjust the sizing of the image within the box (for ex...
...n end tag. permitted parents any element that accepts embedded content. ...

<input type="datetime-local"> - HTML: Hypertext Markup Language
pository. 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 control's ui varies in general from browser to browser; at the moment support is patchy, with only chrome/opera and edge on desktop and most modern versions of mobile browsers having usable implementations. in other browsers, these degrade gracefully to simple <input type="text"> controls. the control is intended to simply represent a local date and time, not necessarily the user's local date and time. in other words, an implementation should allow any valid combination of year, month, day, hour, and minute - even if such a combination is invalid in the user's local time zone (such as times within a daylight saving time spring-fo...
...which is too large, is of the wrong type, and so forth). handling browser support as mentioned above, the major problem with using date inputs at the time of writing is browser support — only chrome/opera and edge support it on desktop, and most modern browsers on mobile. as an example, the datetime-local picker on firefox for android looks like this: non-supporting browsers gracefully degrade to a text input, but this creates problems both in terms of consistency of user interface (the presented control will be different), and data handling. the second problem is the most serious; as we mentioned earlier, with a datetime-local input, the actual value is always normalized to the format yyyy-mm-ddthh:mm. with a text input on the other hand, by default the browser has no recognition of...
...s are used because all javascript bit operators use 32-bit signed 2s-complement integers. the problem is with the server side of things: storage of dates greater than 231-1. to fix this problem, you must store all dates using either unsigned 32-bit integers, signed 64-bit integers, or double-precision floating points on the server. if your server is written in php, the fix may be as simple as upgrading to php 8 or 7, and upgrading 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 ...

HTTP resources and specifications - HTTP
ket protocol proposed standard rfc 5246 the transport layer security (tls) protocol version 1.2 this specification has been modified by subsequent rfcs, but these modifications have no effect on the http protocol. proposed standard rfc 8446 the transport layer security (tls) protocol version 1.3 supersedes tls 1.2. ...
... extra request/response round trip. proposed standard rfc 6454 the web origin concept proposed standard fetchthe definition of 'cors' in that specification. ...
... trip. proposed standard rfc 6454 the web origin concept proposed standard fetchthe definition of 'cors' in that specification. ...

101 Switching Protocols - HTTP
the http 101 switching protocols response code indicates the protocol the server is switching to as requested by a client which sent the message including the upgrade request header. the server includes in this response an upgrade response header to indicate the protocol it switched to. the process is described in detail in the article protocol upgrade mechanism. status 101 switching protocols examples switching protocols might be used with websockets. ...
... requested by a client which sent the message including the upgrade request header. the server includes in this response an upgrade response header to indicate the protocol it switched to. the process is described in detail in the article protocol upgrade mechanism. status 101 switching protocols examples switching protocols might be used with websockets. ...
...nt the message including the upgrade request header. the server includes in this response an upgrade response header to indicate the protocol it switched to. the process is described in detail in the article protocol upgrade mechanism. status 101 switching protocols examples switching protocols might be used with websockets. ...

A re-introduction to JavaScript (JS tutorial) - JavaScript
eters can also be found in a huge list of other places, including adobe acrobat, adobe photoshop, svg images, yahoo's widget engine, server-side environments such as node.js, nosql databases like the open source apache couchdb, embedded computers, complete desktop environments like gnome (one of the most popular guis for gnu/linux operating systems), and others. overview javascript is a multi-paradigm, dynamic language with types and operators, standard built-in objects, and methods. its syntax is based on the java and c languages — many structures from those languages apply to javascript as well. javascript supports object-oriented programming with object prototypes, instead of classes (see more about prototypical inheritance and es2015 classes). javascript also supports functional progr...
...al functions and constants: math.sin(3.5); var circumference = 2 * math.pi * r; you can convert a string to an integer using the built-in parseint() function. this takes the base for the conversion as an optional second argument, which you should always provide: parseint('123', 10); // 123 parseint('010', 10); // 10 in older browsers, strings beginning with a "0" are assumed to be in octal (radix 8), but this hasn't been the case since 2013 or so. unless you're certain of your string format, you can get surprising results on those older browsers: parseint('010'); // 8 parseint('0x10'); // 16 here, we see the parseint() function treat the first string as octal due to the leading 0, and the second string as hexadecimal due to the leading "0x". the hexadecimal notation is still in pla...
... const allows you to declare variables whose values are never intended to change. the variable is available from the block it is declared in. const pi = 3.14; // variable pi is set pi = 1; // will throw an error because you cannot change a constant variable. var is the most common declarative keyword. it does not have the restrictions that the other two keywords have. this is because it was traditionally the only way to declare a variable in javascript. a variable declared with the var keyword is available from the function it is declared in. var a; var name = 'simon'; an example of scope with a variable declared with var: // myvarvariable *is* visible out here for (var myvarvariable = 0; myvarvariable < 5; myvarvariable++) { // myvarvariable is visible to the whole function } // ...

BigInt.prototype.toString() - JavaScript
the tostring() method returns a string representing the specified bigint object. the trailing "n" is not part of the string. 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 bigintobj.tostring([radix]) parameters radixoptional optional. an integer in the range 2 through 36 specifying the base to use for representing numeric values. return value a string representing the specified bigint object. exceptions rangeerror if tostring() is given a radix less than 2 or greater than 36, a rangeerror is thrown. description the bigint object overrides the tostring() method of the object object; it does ...
...ng representing the specified bigint object. exceptions rangeerror if tostring() is given a radix less than 2 or greater than 36, a rangeerror is thrown. description the bigint object overrides the tostring() method of the object object; it does not inherit object.prototype.tostring(). for bigint objects, the tostring() method returns a string representation of the object in the specified radix. the tostring() method parses its first argument, and attempts to return a string representation in the specified radix (base). for radixes above 10, the letters of the alphabet indicate numerals greater than 9. for example, for hexadecimal numbers (base 16) a through f are used. if the radix is not specified, the preferred radix is assumed to be 10. if the bigintobj is negative, the sign is...
...st argument, and attempts to return a string representation in the specified radix (base). for radixes above 10, the letters of the alphabet indicate numerals greater than 9. for example, for hexadecimal numbers (base 16) a through f are used. if the radix is not specified, the preferred radix is assumed to be 10. if the bigintobj is negative, the sign is preserved. this is the case even if the radix is 2; the string returned is the positive binary representation of the bigintobj preceded by a - sign, not the two's complement of the bigintobj. examples using tostring 17n.tostring(); // '17' 66n.tostring(2); // '1000010' 254n.tostring(16); // 'fe' -10n.tostring(2); // -1010' -0xffn.tostring(2); // '-11111111' negative-zero bigint there is no negative-zero bigint as there...

Intl.Locale.prototype.calendar - JavaScript
st of the world uses the gregorian calendar, there are several regional calendar eras used around the world. the following table shows all the valid unicode calendar key strings, along with a description of the calendar era they represent. ...
...ras used around the world. the following table shows all the valid unicode calendar key strings, along with a description of the calendar era they represent. ...
...scription buddhist thai buddhist calendar chinese traditional chinese calendar coptic coptic calendar dangi traditional korean calendar ethioaa ethiopic calendar, amete alem (epoch approx. ...

Number.prototype.toString() - JavaScript
the tostring() method returns a string representing the specified number 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 numobj.tostring([radix]) parameters radix optional. an integer in the range 2 through 36 specifying the base to use for representing numeric values. return value a string representing the specified number object. exceptions rangeerror if tostring() is given a radix less than 2 or greater than 36, a rangeerror is thrown. description the number object overrides the tostring() method of the object object. (it does not inherit object.prototype.tostring()). for number o...
... representing the specified number object. exceptions rangeerror if tostring() is given a radix less than 2 or greater than 36, a rangeerror is thrown. description the number object overrides the tostring() method of the object object. (it does not inherit object.prototype.tostring()). for number objects, the tostring() method returns a string representation of the object in the specified radix. the tostring() method parses its first argument, and attempts to return a string representation in the specified radix (base). for radices above 10, the letters of the alphabet indicate numerals greater than 9. for example, for hexadecimal numbers (base 16), a through f are used. if the radix is not specified, the preferred radix is assumed to be 10. if the numobj is negative, the sign is p...
... if the numobj is not a whole number, the 'dot' sign is used to separate the decimal places. ...

Transitioning to strict mode - JavaScript
ecmascript 5 introduced strict mode which is now implemented in all major browsers (including ie10). while making web browsers interpret code as strict is easy (just add 'use strict'; at the top of your source code), transitioning an existing code base to strict mode requires a bit more work. this article aims at providing guidance for developers. gradual transition strict mode has been designed so that the transition to it can be made gradually. it is possible to change each file individually and even to transition code to strict mode down to the function granularity. differences from non-strict to strict syntax errors when adding 'use strict';, the following cases will throw a syntaxerror before the script is executing: octal syntax var n = 023; with statement using delete on a ...
... poisoned arguments and function properties accessing arguments.callee, arguments.caller, anyfunction.caller, or anyfunction.arguments throws an error in strict mode. the only legitimate use case would be to reuse a function as in: // example taken from vanillajs: http://vanilla-js.com/ var s = document.getelementbyid('thing').style; s.opacity = 1; (function() {...
...; else settimeout(fadeout, 40); // use the name of the function })(); semantic differences these differences are very subtle differences. it's possible that a test suite doesn't catch this kind of subtle difference. careful review of your code base will probably be necessary to be sure these differences don't affect the semantics of your code. fortunately, this careful review can be done gradually down the function granularity. this in function calls in function calls like f(), the this value was the global object. in strict mode, it is now undefined. when a function was called with call or apply, if the value was a primitive value, this one was boxed into an object (or the global object for undefined and null). in strict mode, the value is passed directly without conversion or repl...

Performance fundamentals - Web Performance
mic content, like games that need tight control over rendering and don't need theming. for content drawn using canvas, it's up to the developer to hit framerate targets: they have direct control over what's drawn. for html and css content, the path to high framerate is to use the right primitives. firefox is highly optimized to scroll arbitrary content; this is usually not a concern. but often trading some generality and quality for speed, such as using a static rendering instead of a css radial gradient, can push scrolling framerate over a target. css media 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 applica...
...sluggish. if you test for touch support first, you don’t sacrifice accessibility, either. for example, the financial times uses a library called fastclick for that purpose, which is available for you to use. keep your interface simple one big performance issue we found in html5 apps was that moving lots of dom elements around makes everything sluggish — especially when they feature lots of gradients and drop shadows. it helps a lot to simplify your look-and-feel and move a proxy element around when you drag and drop. when, for example, you have a long list of elements (let’s say tweets), don’t move them all. instead, keep in your dom tree only the ones that are visible and a few on either side of the currently visible set of tweets. hide or remove the rest. keeping the data in a ja...
...rmation about which parts of the browser code are running slowly while the profiler runs. this is a bit more complex to use, but provides a lot of useful details. note: you can use these tools with the android browser by running firefox and enabling remote debugging. in particular, making dozens or hundreds of network requests takes longer in mobile browsers. rendering large images and css gradients can also take longer. simply downloading large files can take longer, even over a fast network, because mobile hardware is sometimes too slow to take advantage of all the available bandwidth. for useful general tips on mobile web performance, have a look at maximiliano firtman's mobile web high performance talk. testcases and submitting bugs if the firefox and chrome developer tools don't ...

Graphic design for responsive sites - Progressive web apps (PWAs)
to be, and how much interactivity your graphics require. serving images selectively via css in general, you will use mostly the same graphical assets for different layouts in a responsive design, but you may well include slightly different ones dependant on context. for example, if your desktop layout includes a large header graphic and several programmatic 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 clutt...
...n here is to create a hi res and a low res set of images, then use resolution media queries to serve the hi res images only to hi res devices. programmatic images you should also try to use programmatic/vector graphics as much as possible, as they theoretically scale infinitely so will still look crisp at high resolutions. you could use css3 properties for generating effects like drop shadows, gradients and rounded corners, and you could also consider using svg for other ui elements, instead of raster graphics formats. the downsides here are that css3 properties and svg don't work on old browsers such as ie6-8 (although polyfills are available, and you could build in fallbacks), and svg isn't suitable for high detail images, such as photographs. using fonts for icons another technique to ...
...mages need to feature some level of interactivity, such as links, other clickable areas, or animation, there are a number of options available. css as well as adding programmatic graphical effects to links (and anywhere else you might want them), css3 also allows you to write declarative animations and transitions. these may not be supported in older browsers like ie6-8, but they generally degrade gracefully, are fairly easy to write, and become much more flexible and powerful when combined with javascript and other technologies. javascript javascript has functions that enable developers to create animations, and any other type of interactivity you want. it is very powerful when combined with other technologies, although its complexity is a barrier for non-developers. svg svg, just li...

Mobile first - Progressive web apps (PWAs)
h than other devices (although bear in mind that smart tvs are also generally pretty low powered.) they also have less viewport size available. therefore, as well as splitting content into different views, and simplifying the interface and content on each view of your application for mobile as much as possible, it is also a good idea to not include visual effects such as shadows, animations, and gradients. you should at least consider it as an option, especially if you are experiencing slow or laggy performance when your application is running on mobile. control mechanisms control mechanisms are another large constraint on mobile devices. anyone who has ever tried to enter data into a form on a mobile device, or even just navigated around a complex site, knows this well. therefore we should...
... 1px solid #ad66d5; border-bottom: none; display: inline-block; padding: 0 5px; font-size: 1.6em; } nav li:last-child a { border-right: none; } } @media (min-width: 600px) { html { background: #eee; height: 100%; } body { width: 600px; height: inherit; margin: 0 auto; background: url(../img/firefox-os.png) bottom left no-repeat, linear-gradient(to bottom, #fff, #eee); } .main > p { background: rgba(255,255,255,0.3); } nav li a { padding: 0 10px; font-size: 2em; } } the first one cancels out the css display: table behaviour, hides the links to jump to and from the navigation, as they are not needed anymore in the wider layout, and changes the vertical menu to a horizontal menu that makes better use of the h...
...ize: 2em; } } the first one cancels out the css display: table behaviour, hides the links to jump to and from the navigation, as they are not needed anymore in the wider layout, and changes the vertical menu to a horizontal menu that makes better use of the horizontal space available. the second one sets the width of the content at 600px and centers it in the space available, then adds in a gradient and a nice background image for the wider layout. this is a key point - the background image is 126kb, and not ideal for narrow layouts. having it included in the "600 pixels or wider" media query means that narrow screen devices won't read that media query, so they will not waste their time and bandwidth downloading that image. note: firefox's responsive design view is a great way to get a...

Structural overview of progressive web apps - Progressive web apps (PWAs)
self.importscripts("data/games.js"); then it creates a list of all the files that the service worker needs to cache. ...
...creates a list of all the files that the service worker needs to cache. ...
...e worker needs to cache. ...

onclick - SVG: Scalable Vector Graphics
the onclick attribute specifies some script to run when the element is clicked. ...
... the onclick attribute specifies some script to run when the element is clicked. ...
... the onclick attribute specifies some script to run when the element is clicked. ...

requiredFeatures - SVG: Scalable Vector Graphics
ure#viewportattribute http://www.w3.org/tr/svg11/feature#shape http://www.w3.org/tr/svg11/feature#text http://www.w3.org/tr/svg11/feature#paintattribute http://www.w3.org/tr/svg11/feature#opacityattribute http://www.w3.org/tr/svg11/feature#graphicsattribute http://www.w3.org/tr/svg11/feature#marker http://www.w3.org/tr/svg11/feature#colorprofile http://www.w3.org/tr/svg11/feature#gradient http://www.w3.org/tr/svg11/feature#pattern http://www.w3.org/tr/svg11/feature#clip http://www.w3.org/tr/svg11/feature#mask http://www.w3.org/tr/svg11/feature#filter http://www.w3.org/tr/svg11/feature#xlinkattribute http://www.w3.org/tr/svg11/feature#font http://www.w3.org/tr/svg11/feature#extensibility http://www.w3.org/tr/svg11/feature#svgdom-static the browser supports...
...ng, text-rendering and visibility attributes http://www.w3.org/tr/svg11/feature#basicgraphicsattribute the browser supports the display and visibility attributes http://www.w3.org/tr/svg11/feature#marker the browser supports the <marker> element http://www.w3.org/tr/svg11/feature#colorprofile the browser supports the <color-profile> element http://www.w3.org/tr/svg11/feature#gradient the browser supports the <lineargradient>, <radialgradient> and <stop> elements http://www.w3.org/tr/svg11/feature#pattern the browser supports the <pattern> element http://www.w3.org/tr/svg11/feature#clip the browser supports the <clippath> element and the clip-path, clip-rule attributes http://www.w3.org/tr/svg11/feature#basicclip the browser supports the <clippath> ele...
...ext> <!-- testing : http://www.w3.org/tr/svg11/feature#colorprofile --> <rect class="ko" x="10" y="635" height="25" width="430" /> <rect class="ok" x="10" y="635" height="25" width="430" requiredfeatures="http://www.w3.org/tr/svg11/feature#colorprofile" /> <text x="20" y="652">http://www.w3.org/tr/svg11/feature#colorprofile</text> <!-- testing : http://www.w3.org/tr/svg11/feature#gradient --> <rect class="ko" x="10" y="660" height="25" width="430" /> <rect class="ok" x="10" y="660" height="25" width="430" requiredfeatures="http://www.w3.org/tr/svg11/feature#gradient" /> <text x="20" y="677">http://www.w3.org/tr/svg11/feature#gradient</text> <!-- testing : http://www.w3.org/tr/svg11/feature#pattern --> <rect class="ko" x="10" y="685" height="25" width="430" /> <r...

xlink:arcrole - SVG: Scalable Vector Graphics
specifications specification status comment scalable vector grap...
... specifications specification status comment scalable vector graphics (svg) 1.1 (second edition)...
... specifications specification status comment scalable vector graphics (svg) 1.1 (second edition)the def...

<feComponentTransfer> - SVG: Scalable Vector Graphics
ng elements, in any order:<fefunca>, <fefuncr>, <fefuncb>, <fefuncg> attributes global attributes core attributes presentation attributes filter primitive attributes class style specific attributes in dom interface this element implements the svgfecomponenttransferelement interface. ...
...der:<fefunca>, <fefuncr>, <fefuncb>, <fefuncg> attributes global attributes core attributes presentation attributes filter primitive attributes class style specific attributes in dom interface this element implements the svgfecomponenttransferelement interface. ...
...ow" gradientunits="userspaceonuse" x1="0" y1="0" x2="100%" y2="0"> <stop offset="0" stop-color="#ff0000"></stop> <stop offset="0.2" stop-color="#ffff00"></stop> <stop offset="0.4" stop-color="#00ff00"></stop> <stop offset="0.6" stop-color="#00ffff"></stop> <stop offset="0.8" stop-color="#0000ff"></stop> <stop offset="1" stop-color="#800080"></stop> </lineargradient> <filter id="identity" x="0" y="0" width="100%" height="100%"> <fecomponenttransfer> <fefuncr type="identity"></fefuncr> <fefuncg type="identity"></fefuncg> <fefuncb type="identity"></fefuncb> <fefunca type="identity"></fefunca> </fecomponenttransfer> </filter> <filter id="table" x="0" y="0" width="100%" height="100%"> <fecomponent...

SVG element reference - SVG: Scalable Vector Graphics
x> <fediffuselighting> <fedisplacementmap> <fedistantlight> <fedropshadow> <feflood> <fefunca> <fefuncb> <fefuncg> <fefuncr> <fegaussianblur> <feimage> <femerge> <femergenode> <femorphology> <feoffset> <fepointlight> <fespecularlighting> <fespotlight> <fetile> <feturbulence> <filter> <foreignobject> g <g> h <hatch> <hatchpath> i <image> l <line> <lineargradient> m <marker> <mask> <mesh> <meshgradient> <meshpatch> <meshrow> <metadata> <mpath> p <path> <pattern> <polygon> <polyline> r <radialgradient> <rect> s <script> <set> <solidcolor> <stop> <style> <svg> <switch> <symbol> t <text> <textpath> <title> <tspan> u <unknown> <use> v <view> svg elements by category animation elements <animate>...
...omposite>, <feconvolvematrix>, <fediffuselighting>, <fedisplacementmap>, <fedropshadow>, <feflood>,<fefunca>, <fefuncb>, <fefuncg>, <fefuncr>,<fegaussianblur>, <feimage>, <femerge>, <femergenode>, <femorphology>, <feoffset>, <fespecularlighting>, <fetile>, <feturbulence> font elements <font>, <font-face>, <font-face-format>, <font-face-name>, <font-face-src>, <font-face-uri>, <hkern>, <vkern> gradient elements <lineargradient>, <meshgradient>, <radialgradient>, <stop> graphics elements <circle>, <ellipse>, <image>, <line>, <mesh>, <path>, <polygon>, <polyline>, <rect>, <text>, <use> graphics referencing elements <mesh>, <use> light source elements <fedistantlight>, <fepointlight>, <fespotlight> never-rendered elements <clippath>, <defs>, <hatch>, <lineargradient>, <marker>, <mask>...
...ments <lineargradient>, <meshgradient>, <radialgradient>, <stop> graphics elements <circle>, <ellipse>, <image>, <line>, <mesh>, <path>, <polygon>, <polyline>, <rect>, <text>, <use> graphics referencing elements <mesh>, <use> light source elements <fedistantlight>, <fepointlight>, <fespotlight> never-rendered elements <clippath>, <defs>, <hatch>, <lineargradient>, <marker>, <mask>, <meshgradient>, <metadata>, <pattern>, <radialgradient>, <script>, <style>, <symbol>, <title> paint server elements <hatch>, <lineargradient>, <meshgradient>, <pattern>, <radialgradient>, <solidcolor> renderable elements <a>, <circle>, <ellipse>, <foreignobject>, <g>, <image>, <line>, <mesh>, <path>, <polygon>, <polyline>, <rect>, <svg>, <switch>, <symbol>, <text>, <textpath>, <tspan>, <unknown>, <use>...

simple-prefs - Archive of obsolete content
tim as labels. { "name": "typeofbreath", "type": "menulist", "title": "type of breath", "value": 0, "options": [ { "value": "0", "label": "fire" }, { "value": "1", "label": "cold" }, { "value": "2", "label": "disintegration" } ] } radio displayed as radio buttons. the type of the stored value depends on the default value. the options are specified by a mandatory "options" attribute, that is an array of objects with mandatory attributes "label" and "value" the values of the "value" attributes must be supplied as strings. the values of the "label" attributes prefixed with "{name}_options.", where {name} ...
...ibutes "label" and "value" the values of the "value" attributes must be supplied as strings. the values of the "label" attributes prefixed with "{name}_options.", where {name} is the name of the preference, are used as localization keys. if no matching entries are found, the value of the "label" attributes is used verbatim as labels. { "name": "alignment", "type": "radio", "title": "alignment", "value": "n", "options": [ { "value": "l", "label": "lawful" }, { "value": "n", "label": "neutral" }, { "value": "c", "label": "chaotic" } ] } control displays a button. when the user clicks the button, the func...

Forms related code snippets - Archive of obsolete content
solid #666666; font-weight: bold; background-color: #ff6666; } table.zdp-calendar td { border: 1px solid #666666; text-align: center; } table.zdp-calendar caption { background-color: #333333; padding: 2px; } span.zdp-current-month { display: inline-block; width: auto; height: 16px; padding: 0 2px; line-height: 16px; margin: 0 auto; background-color: #999999; border-radius: 5px; } span.zdp-increase-month, span.zdp-increase-year, span.zdp-decrease-month, span.zdp-decrease-year { display: block; padding: 0 2px; height: 16px; font-weight: bold; background-color: #999999; border-radius: 5px; cursor: pointer; } span.zdp-decrease-month, span.zdp-decrease-year { float: left; margin-right: 2px; } span.zdp-increase-month, span.zdp-increase-year { f...
...mpty-cell">&nbsp;</td> <td class="zdp-empty-cell">&nbsp;</td> <td class="zdp-empty-cell">&nbsp;</td> <td class="zdp-empty-cell">&nbsp;</td> <td class="zdp-empty-cell">&nbsp;</td> </tr> </tbody> </table> editable <select> fields the content of the <select> element is actually static and not editable. if you want to emulate an editable select through a <fieldset> of radioboxes and textboxes (written in pure css, without javascript), please see this example. autogrowing <textarea> this example shows how to make a textarea really autogrowing during a typing. insert some custom text in a <textarea> this example shows how to insert some html tags or smiles or any custom text in a textarea. image preview before upload the filereader.prototype.readasdataurl() me...

Examples and demos from articles - Archive of obsolete content
pdown 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 conjunction with the attr() css expression and a data-descr custom data attribute to create a pure-css, glossary-like tooltip. [article] pure-css lightbox [html] the :target pseudo-class i...
...ression and a data-descr custom data attribute to create a pure-css, glossary-like tooltip. [article] pure-css lightbox [html] the :target pseudo-class is useful to switch on/off some invisible elements. in this way you can create a pure-css lightbox. [article] pure-css editable (pseudo)<select> [html] this example shows how it's possible to simulate an editable <select> through a fieldset of radioboxes and textboxes. [article] expandable elements [html] this example shows how it is possible to show/hide classes of elements in pure css. in this demo there is also an example of a "toggle button" rendered through a <label> element. [article] code snippets and tutorials javascript complete cookies reader/writer with full unicode support this little framework consists of a complete c...

How to convert an overlay extension to restartless - Archive of obsolete content
ferently. next, what's the minimum version of firefox we should require (preferably an esr)? this guide targets firefox 17 esr or later (or anything else gecko 17+, such as seamonkey 2.14+). this is two esrs back (as of this writing), which should be plenty. using the current firefox esr, stable version, or nightly is generally a better idea if given the option, but some users take forever to upgrade. there will be no usage of the add-on sdk or any other external libraries here. everything will use apis available in firefox 17+ or code provided here. step 1: use services.jsm if you load one of mozilla's internal jsm files, for example services.jsm, you'll do so via privileged javascript code like this: components.utils.import("resource://gre/modules/services.jsm"); from here on out, it ...
...oes not scan the chrome/icons/default directory of restartless or extrationless extensions for window icons. if you are using custom window icons, they will need to be moved to %mozdir%/icons/default/ upon load of your extension. removal upon unload is not required, but you must be able to handle overwriting them upon load. this is because your unload() will not always be called prior to an upgrade (e.g. upgrade might take place while the application is not running). further, this is a generic location for icons and the icon may still be in use by a different profile. thus, you will probably want to use version numbers in the icon name (the id of the window for which the icon exists). step 9: bootstrap.js a bootstrap.js file in the root of your xpi, next to your chrome.manifest and inst...

Search Extension Tutorial (Draft) - Archive of obsolete content
hanges in the default preference branch, as explained below. while the technical details below are important to understand, a library which encapsulates the appropriate logic is provided along with the example add-on at the end, and should be used where possible. changing default preference values there are two common ways of changing default preference values. the simplest, which works only for traditional, non-restartless add-ons, is to add the preference changes to a file in an extension's defaults/preferences/ directory. the following file, for instance, would change the default keyword search engine, assuming that an engine with the name example engine is installed, as described below: // this is a localizable preference, so it must contain a url which // points at a properties file cont...
...thod requires two files, an xml search description file and a javascript file to register the engine. in non-restartless extensions, the xml search description may instead simply be placed in the searchplugins/ directory in the root of your xpi, as em:unpack is specified in your install.rdf file. as above, install and uninstall code is only provided for restartless add-ons but can be adapted for traditional add-ons. search.xml <?xml version="1.0" encoding="utf-8"?> <searchplugin xmlns="http://www.mozilla.org/2006/browser/search/"> <shortname>example engine</shortname> <description>example search engine</description> <inputencoding>utf-8</inputencoding> <image width="16" height="16" type="image/png">data:image/png;base64, ... </image> <url type="application/x-su...

MCD, Mission Control Desktop, AKA AutoConfig - Archive of obsolete content
general.config.filename", "mozilla.cfg");. file api that centralized preference file uses a javascript api that allows us to do what we need. that prefcalls.js is now archive in omni.jar file located at the root of the mozilla apps installation, example of tb5: # jar -tvf /usr/lib/thunderbird/omni.jar | grep prefcalls.js 7499 sat nov 05 09:21:34 cet 2011 defaults/autoconfig/prefcalls.js traditionally (previous apps versions) is was in mozilla_home/default/autoconfig/prefcalls.js. the presence of pref("general.config.filename", "mozilla.cfg"); in any appropriate .js file (here we use autoconf.js dedicated file) enables the read and execution of prefcalls.js. do not use the name all.js because it is reserved. ref: bug 690370 available functions are (see prefcalls.js file for details):...
...008-02 thunderbirddebuglibs]# find /usr/local/thunderbirddebuglibs/ -name prefcalls.js /usr/local/thunderbirddebuglibs/thunderbird-3.0b3pre/defaults/autoconfig/prefcalls.js old mozilla 1.x, possibly netscape 6/7 the following is for the record... it also contains an interesting feature that i did not use anymore -> autoconfig from a web server! changes between 2002 and 2003, we needed to upgrade the old netscape 4.x (4.79) version to mozilla 1.x (1.4), and now (2004-2005) mozilla 1.7. the autoconfiguration subsystem is quite the same as described the section on 'old' netscape 4.x, but also slightly different. mozilla new features in regard to netscape in mozilla, we don't use the convert function from netscape 4.5 cck anymore, but moz-byteshift.pl perl script, to encode mozilla.cfg fi...

MenuButtons - Archive of obsolete content
en pressing the button alone should just open the menu and not execute a command directly. this works similarly to the menu tag, and would be used to present a set of commands to execute. to create a button of this type, set the type attribute of the button to 'menu'. ...
..., in the following example, pressing the 'view' button will open a menu which allows the user to select from a set of radio menuitems. presumably, when one is selected, the application view would be changed accordingly. when using the keyboard, pressing the down key will open the menu while the button is focused. <button type="menu" label="view"> <menupopup> <menuitem label="icons" type="radio" name="view"/> <menuitem label="list" type="radio" name="view"/> <menuitem label="details" type="radio" name="view"/> </menupopup> </button> note that when the menu is closed, the button doesn't indicate which view is selected. if you do want this indication, you should use a menulist instead. the same technique can be used for toolbarbuttons as well as buttons. in the example be...

Complete - Archive of obsolete content
the extension is assumed to fail in any future version of the application. to adopt this approach, set the maxversion to the latest actual version where you have tested your extension. the problem with this approach is that you have to release a new xpi every time there is a new release of any of the applications it supports. if you delay releasing a new xpi, you risk annoying users who cannot upgrade until you do. the approach used here is optimistic. the extension is assumed to work in any future version of the application. to adopt this approach, set the maxversion to a large number like 99. the problem with this approach is that when changes in an application do make the extension fail, users might have bad experiences ranging from error messages that they cannot understand to crashes and...
...nsion fail, users might have bad experiences ranging from error messages that they cannot understand to crashes and data loss. for more information about version checks, see: extension versioning, update and compatibility the installed jar to use disk space efficiently on the end user's computer, the three directories (content, locale, skin) are packed in a jar file. it is normally uncompressed, trading off some disk space for speed. this jar file will be installed as-is on the end user's computer, and unpacked at run-time by the application. to tell the application that the files it needs are in a jar, there are changes to chrome.manifest (for firefox etc.) and to install.js (for seamonkey). for example, chrome.manifest originally had: content custombutton chrome/ now it has: content allcust...

Creating a Skin - Archive of obsolete content
. let's do this. that way, we can modify the xul without needing to keep the box as the first child of the window. css: .findfilesbox { background-color: #0088cc; } xul: <vbox class="findfilesbox" orient="vertical" flex="100%"> <toolbox> rounding on the tabs next, let's modify the tabs. we will make the selected tab bold and change the rounding on the tabs. ...
...eding to keep the box as the first child of the window. css: .findfilesbox { background-color: #0088cc; } xul: <vbox class="findfilesbox" orient="vertical" flex="100%"> <toolbox> rounding on the tabs next, let's modify the tabs. we will make the selected tab bold and change the rounding on the tabs. tab:first-child { -moz-border-radius: 4px 0px 0px 0px; } tab:last-child { -moz-border-radius: 0px 4px 0px 0px; } tab[selected="true"] { color: #000066; font-weight: bold; text-decoration: underline; } two rules change the normal tab appearance, the first sets the rounding on the first tab and the second sets the rounding on the last tab. used here is a special mozilla style rule, -moz-border-radius, that creates rounded border corners. the upper left border of the first tab...

Creating a Wizard - Archive of obsolete content
<label value="why do you want a dog?"/> <menulist> <menupopup> <menuitem label="to scare people away"/> <menuitem label="to get rid of a cat"/> <menuitem label="i need a best friend"/> </menupopup> </menulist> </wizardpage> <wizardpage description="dog details"> <label value="provide additional details about the dog you would like:"/> <radiogroup> <caption label="size"/> <radio value="small" label="small"/> <radio value="large" label="large"/> </radiogroup> <radiogroup> <caption label="gender"/> <radio value="male" label="male"/> <radio value="female" label="female"/> </radiogroup> </wizardpage> </wizard> this wizard has two pages, one that has a drop-down menu and the other wi...
...the wizard will be formatted automatically, with a title across the top and a set of buttons along the bottom. the user can navigate between the pages of the wizard with the back and next buttons. these buttons will enable and disable themselves at the appropriate moments. in addition, on the last page, the finish button will appear. ...

Groupboxes - Archive of obsolete content
f the groupbox when the checkbox is checked and unchecked. the groupbox contains a horizontal box with a label and textbox. both the textbox and groupbox have been made flexible so the textbox expands when the window is expanded. the additional checkbox appears below the textbox because of the vertical orientation of the groupbox. we'll add a groupbox to the find files dialog in the next section. radio groups you can use the radiogroup element to group radio elements together. the radiogroup is a type of box. you can put any element you want inside it, and apart from its special handling of radio buttons, it works like any other box. any radio buttons placed inside the radio group will be grouped together, even if they are inside nested boxes. this could be used to add extra elements within t...
...ther. the radiogroup is a type of box. you can put any element you want inside it, and apart from its special handling of radio buttons, it works like any other box. any radio buttons placed inside the radio group will be grouped together, even if they are inside nested boxes. this could be used to add extra elements within the structure, such as in the following example: example 3 : source view <radiogroup> <radio id="no" value="no" label="no number"/> <radio id="random" value="random" label="random number"/> <hbox> <radio id="specify" value="specify" label="specify number:"/> <textbox id="specificnumber"/> </hbox> </radiogroup> note that the radiogroup element does not draw a border around it. you should place a groupbox element around it if a border and caption are desired...

XUL Reference - Archive of obsolete content
g dialogheader dropmarker 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 resizer 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 (mo...
...gheader 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 datepicker menulist progressmeter radio radiogroup scale splitter textbox textbox (firefox autocomplete) textbox (mozilla autocomplete) timepicker description label image listbox listitem listcell listcol listcols listhead listheader richlistbox richlistitem tree treecell treechildren treecol treecols treeitem treerow treeseparator box hbox vbox bbox deck stack grid columns column rows row scrol...

window - Archive of obsolete content
xul --> <!-- extremely recommended to keep this css include!! ...
... activetitlebarcolor type: color string specify background color of the window's titlebar when it is active (foreground). moreover this hides separator between titlebar and window contents. this only affects mac os x. ...

Archived Mozilla and build documentation - Archive of obsolete content
is available through the devedge page. prism prism is a simple xulrunner-based browser that hosts web applications without the normal web browser user interface. prism is based on a concept called site-specific browsers (ssb). an ssb is designed to work exclusively with a single web application. it doesn’t have the menus, toolbars and other accoutrements of a traditional web browser. an ssb also offers tighter integration with the operating system and desktop than a typical web application running through a web browser. applications running in an ssb are therefore able to benefit from many of the advantages of the desktop and of the web at the same time. proxy ui (recently added - some support for reading os and account se...
...e are both available to help debug problems. the help menu provides access to xul information on mdc. there is even simple “keyword” help lookup for xul elements. xulrunner xulrunner is a mozilla runtime package that can be used to bootstrap xul+xpcom applications that are as rich as firefox and thunderbird. it provides mechanisms for installing, upgrading, and uninstalling these applications. ...

Element - Archive of obsolete content
le elements note: in the list of elements below the slash xml namespace prefix is used (since it is a popular choice). however, use of slash as the xml namespace prefix is not necessary. ...
...the list of elements below the slash xml namespace prefix is used (since it is a popular choice). however, use of slash as the xml namespace prefix is not necessary. ...

Create Your Own Firefox Background Theme - Archive of obsolete content
he 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 browser reveals more of the left-hand side of the i...
...round 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, the browser reveals more of the right-hand side...

Using Web Standards in your Web Pages - Archive of obsolete content
"browser makers are no longer the problem. the problem lies with designers and developers chained to the browser-quirk-oriented markup of the 1990s-often because they don't realize it is possible to support current standards while accommodating old browsers." -web standards project this article provides an overview of the process for upgrading the content of your web pages to conform to the world wide web consortium (w3c) web standards. the first 2 sections address exclusively validation issues, benefits of validation, deprecated elements, deprecated attributes. how to upgrade a webpage markup code to pass validation and how to implement css are addressed by providing recommendations, tutorials and references. the other sections address dom and dhtml coding practices which are at odds wit...
...nd suggest replacements. every proposed w3c web standards replacement in this article is working without a problem in modern browsers like msie 7, firefox 2, opera 9, safari 3, konqueror 3.5+, icab 4, etc. the next-to-last section, summary of changes, outlines all the changes described in this article. the last section offers excellent and best references for those wishing to learn more about upgrading techniques presented in this article and more for those wishing to perfect their web pages. contents benefits of using web standards making your page using web standards - how to using the w3c dom developing cross browser and cross platform pages using xmlhttprequest summary of changes references original document information author(s): mike cowperthwaite, marcio galli, jim ley...

CSS - Archive of obsolete content
this pseudo-element is non-standard, supported only in internet explorer 10, internet explorer 11, and microsoft edge.::-ms-expandthe ::-ms-expand css pseudo-element is a m...
...this pseudo-element is non-standard, supported only in internet explorer 10, internet explorer 11, and microsoft edge.::-ms-expandthe ::-ms-expand css pseudo-element is a microsoft extension that represents the button of a <select> menu control...

Back to the Server: Server-Side JavaScript On The Rise - Archive of obsolete content
bust data management, jaxer comes with the ability to manage data in either a sqlite database which is included in jaxer, or a mysql database, and is extensible to others. much like the file i/o namespace, database access in jaxer can be as simple or complicated as you want or need it to be. for debugging, jaxer will also send database errors to the client if you want. upgrading the example application to include database access requires just a few lines of code added to the formprocessor method. listing 9 demonstrates these changes. listing 9 - jaxer database access <script runat="server"> function formprocessor( name, email, message ) { // perform the same validation of the data server-side if( !validatecomments( name, email, message ) ...
...per. conclusion javascript can be successfully used for full application development on both the client and server, fulfilling netscape's original vision for a single, unified language for the web that makes apps easier to develop and maintain. advances such as ajax and running ajax on the server side with the jaxer server boosted by today's faster javascript engines and radically faster ones like tracemonkey to come from mozilla, sets the stage for significant use of server-side javascript now. resources mozilla spidermonkey mozilla rhino serverjs discussion on proposed common api for ssjs ssjs (server side javascript) at wikipedia.com aptana jaxer aptana jaxer documentation e...

Styling the Amazing Netscape Fish Cam Page - Archive of obsolete content
n_trigger.jpg" alt="clown trigger" border="0" width="150" height="115"> <h3>clown trigger</h3> <p> our clown trigger is a bold little fish, though for a few weeks he slept a lot and didn't look well in general. he's much better now. </p> </div> basically, that's all that was needed. the reason for the class value being card is that the original idea was to style each fish's description like a trading card. although this design approach was abandoned fairly quickly, the class name stuck, kind of like a barnacle. giving the fish some style with the markup all set, it was time to style. the idea was to have the fish listed in a side-by-side arrangement, sort of like a two-column table, only without the table. this was most easily accomplished by floating the div elements themselves. since i...
...left no-repeat fixed; color: #339;} finishing the style adding the background to the heading containing the name of the fish created three problems: the double border was completely covered up by the image. the text of the h3 was basically touching the right side of the floated image... ...or it would have been, except in some browsers the heading was drawn over the floated image, in contradiction to the css specification. getting the image back on top of the heading turned out to be a matter of relatively positioning the floated image, and then giving it a z-index value. in order to create visual appeal, i decided to offset the top let corners of the fish image and fish name. with just a few simple margin and padding changes, this was possible. div.card {float: left; width: 45%; ...

XForms Select1 Element - Archive of obsolete content
a copy (see spec) element. this is because a copy element can be used to add a subtree of nodes underneath the element that the select1 control is bound to. representations the xforms select1 element can be represented by the following widgets for the specified appearance attribute values: combobox - default representation (xhtml/xul) listbox - used when appearance = 'compact' (xhtml/xul) radio group - used when appearance = 'full' (xhtml/xul) combobox displaying a combobox is the default representation (xhtml/xul). xhtml widget characteristics analogous widgets is <html:select/> visual grouping by choices element is supported selection="open" is supported if incremental attribute value is false, the bound node is updated when the select1 control is blurred (i.e. loses focus),...
...he 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 attribute contains the value full there are no analogue widgets in xhtml or in xul visual grouping by choices element is supported selection="open" attribute isn't supported if incremental attribute value is false then bound node is updated when item is blurred examples <xf:model> <xf:instance...

Archived open Web documentation - Archive of obsolete content
per inheritance using apply(). well if you combine the two, you can have inherited private variables: scope cheatsheet javascript with mozilla extensions has both function-scoped vars and block-scoped lets. along with hoisting and dynamic behavior, scope in javascript is sometimes surprising. server-side javascript here's a radical idea: use one language to write entire web apps -- the same language which billions of web pages already use, every day. sharp variables in javascript a sharp variable is a syntax in object initializers that allows serialization of objects that have cyclic references or multiple references to the same object. standards-compliant authoring tools ...
...multiple references to the same object. standards-compliant authoring tools creating cross-browser code upfront will save you lots of time quality testing your web content. the following authoring tools adhere to the w3 standards. if you're using older versions of tools that rely on old browser bugs or generate browser-specific code, it may be time to upgrade: stopiteration the stopiteration object was used to tell the end of the iteration in the legacy iterator protocol. do not use this ancient feature. styling the amazing netscape fish cam page using javascript generators in firefox generators can be used to simplify asynchronous code in firefox by opting...

The Business Benefits of Web Standards - Archive of obsolete content
llow for example that successful business users have wide monitors. the opposite may be true. power users and business travellers are downsizing their notebooks. increasingly one person may need to acccess the same site using different platforms at home, in the office and when travelling. they expect a consistent experience. web standards gives us tools, and methodologies for dealing with this paradox and making the wider contribution of making our content universally accessible to people in different social, medical and economic circumstances. happier staff good developers - both agency and inhouse - simply do not want to work using outdated methodologies and platforms with uncertain standards, with all the consequent uncertainty in quality. they have adopted web standards long ago and no...
...cant portion of the audience is running netscape 4.x, use of simple tables for layout and css for font control may be a solution. another option is to serve html content to netscape 4.x users, without css style. the content will be usable but not as attractively presented as in a modern browser. furthermore, 4.x browsers are known to have security issues, so their users should be encouraged to upgrade. mandated accessibility being accessible is mandatory in many countries for government agencies (us, uk, canada), and --in some countries like australia-- for every organization. in the us, section 508 applies to government-funded projects and agencies. coding with standards (particularly css for positioning, and strict html) makes accessibility an easier goal to achieve, as standards have be...

Web Standards - Archive of obsolete content
eliver the greatest benefits to the greatest number of web users while ensuring the long-term viability of any document published on the web. designing and building with these standards simplifies and lowers the cost of production, while delivering sites that are accessible to more people and more types of internet devices. sites developed along these lines will continue to function correctly as traditional desktop browsers evolve, and as new internet devices come to market. [1] documentation migrate apps from internet explorer to mozilla ever have trouble getting your internet explorer-specific web applications to work with mozilla? this article covers common issues associated with migrating applications to the open source mozilla-based browser. using web ...
... documentation migrate apps from internet explorer to mozilla ever have trouble getting your internet explorer-specific web applications to work with mozilla? this article covers common issues associated with migrating applications to the open source mozilla-based browser. using web standards in your web pages this article provides an overview of the process for upgrading the content of your web pages to conform to the w3c web standards. choosing standards compliance over proprietary practices in the development world, there is a need for standards because applications are designed across multiple development groups. the business benefits of web standards this article discusses how adhering to web standards, and leaving behind proprietary ma...

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

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

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

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

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

RIL - MDN Web Docs Glossary: Definitions of Web-related terms
ril (radio interface layer) is a mobile operating system component which communicates between the device's software and the device's phone, radio, or modem hardware. ...
... ril (radio interface layer) is a mobile operating system component which communicates between the device's software and the device's phone, radio, or modem hardware. ...

Screen reader - MDN Web Docs Glossary: Definitions of Web-related terms
oud is displayed in a dark grey box. desktop/laptop screen reader users navigate websites with a keyboard or other non-pointing device. the best way to emulate use is to do the same. ...
... users navigate websites with a keyboard or other non-pointing device. the best way to emulate use is to do the same. ...

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

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

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

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

Your first form - Learn web development
y update the interface in some way (for example, add another item to a list, or show or hide a ui feature). a web form's html is made up of one or more form controls (sometimes called widgets), plus some additional elements to help structure the overall form — they are often referred to as html forms. the controls can be single or multi-line text fields, dropdown boxes, buttons, checkboxes, or radio buttons, and are mostly created using the <input> element, although there are some other elements to learn about too. form controls can also be programmed to enforce specific formats or values to be entered (form validation), and paired with text labels that describe their purpose to both sighted and blind users. designing your form before starting to code, it's always better to step back an...
...in detail, so for the moment we will just get you to add some css to make it look ok. first of all, add a <style> element to your page, inside your html head. ...

HTML text fundamentals - Learn web development
ments like this, which only affect presentation and not semantics, are known as presentational elements and should no longer be used, because as we've seen before, semantics is so important to accessibility, seo, etc. html5 redefined <b>, <i>, and <u> with new, somewhat confusing, semantic roles. ...
...opriate to use <b>, <i>, or <u> to convey a meaning traditionally conveyed with bold, italics, or underline, provided there is no more suitable element. however, it always remains critical to keep an accessibility mindset. the concept of italics isn't very helpful to people using screen readers, or to people using a writing system other than the latin alphabet. <i> is used to convey a meaning traditionally conveyed by italic: foreign words, taxonomic designation, technical terms, a thought... <b> is used to convey a meaning traditionally conveyed by bold: key words, product names, lead sentence... <u> is used to convey a meaning traditionally conveyed by underline: proper name, misspelling... a kind warning about underline: people strongly associate underlining with hyperlinks. theref...

Index - Learn web development
hould use when, with recommendations and reminders of common pitfalls where appropriate. we'll probably add to this resource as time goes on. 51 cooperative asynchronous javascript: timeouts and intervals animation, beginner, codingscripting, guide, intervals, javascript, loops, asynchronous, requestanimationframe, setinterval, settimeout, timeouts this tutorial looks at the traditional methods javascript has available for running code asychronously after a set time period has elapsed, or at a regular interval (e.g. a set number of times per second), discusses what they are useful for, and considers their inherent issues. 52 general asynchronous programming concepts javascript, learn, promises, threads, asynchronous, blocking in this article, we'll ru...
...or management to prioritize and invest in performance? in this section, we discuss creating a clear business-case to convince decision-makers to make the investment. 347 web performance resources best practices, website performance web performance is all about user experience and perceived performance. as we learned in the critical rendering path document, linking css with a tradional link tag with rel="stylesheet" is synchronous and blocks rendering. optimize the rendering of your page by removing blocking css. 348 what is web performance? beginner, introduction, learn, performance, reference, tutorial, web performance web performance is all about making web sites fast, including making slow processes seem fast. does the site load quickly, allow the ...

General asynchronous programming concepts - Learn web development
have two buttons: a "fill canvas" button that when clicked fills the available <canvas> with 1 million blue circles. a "click me for alert" button that when clicked shows an alert message. function expensiveoperation() { for(let i = 0; i < 1000000; i++) { ctx.fillstyle = 'rgba(0,0,255, 0.2)'; ctx.beginpath(); ctx.arc(random(0, canvas.width), random(0, canvas.height), 10, degtorad(0), degtorad(360), false); ctx.fill() } } fillbtn.addeventlistener('click', expensiveoperation); alertbtn.addeventlistener('click', () => alert('you clicked me!') ); if you click the first button and then quickly click the second one, you'll see that the alert does not appear until the circles have finished being rendered. the first operation blocks the second one until it has finished...
... run sequentially; a task has to complete before the next one can be started. as we said earlier, many computers now have multiple cores, so can do multiple things at once. programming languages that can support multiple threads can use multiple cores to complete multiple tasks simultaneously: thread 1: task a --> task b thread 2: task c --> task d javascript is single-threaded javascript is traditionally single-threaded. even with multiple cores, you could only get it to run tasks on a single thread, called the main thread. our example from above is run like this: main thread: render circles to canvas --> display alert() after some time, javascript gained some tools to help with such problems. web workers allow you to send some of the javascript processing off to a separate thread, cal...

Cooperative asynchronous JavaScript: Timeouts and intervals - Learn web development
a set number of times per second), discusses what they are useful for, and considers their inherent issues. prerequisites: basic computer literacy, a reasonable understanding of javascript fundamentals. objective: to understand asynchronous loops and intervals and what they are useful for. ...
... the number of seconds in an hour is 3600. the number of minutes will be the amount of seconds left over when all of the hours have been removed, divided by 60. the number of seconds will be the amount of seconds left over when all of the minutes have been removed. you'll want to include a leading zero on your display values if the amount is less than 10, so it looks more like a traditional clock/watch. to pause the stopwatch, you'll want to clear the interval. to reset it, you'll want to set the counter back to 0, clear the interval, and then immediately update the display. you probably ought to disable the start button after pressing it once, and enable it again after you've stopped/reset it. otherwise multiple presses of the start button will apply multiple setinterval()...

Function return values - Learn web development
the random() function takes one parameter — a whole number — and it returns a whole random number between 0 and that number. it looks like this: function random(number) { return math.floor(math.random() * number); } this could be written as follows: function random(number) { const result = math.floor(math.random() * number); return result; } but the first version i...
... have trouble getting the example to work, feel free to check your code against the finished version on github (see it running live also), or ask us for help. now it's your turn! at this point, we'd like you to have a go at writing out a couple of functions of your own and adding them to the library. how about the square or cube root of the number? or the circumference of a circle with a given radius? some extra function related tips: look at another example of writing error handling into functions. it is generally a good idea to check that any necessary parameters are validated, and that any optional parameters have some kind of default value provided. this way, your program will be less likely to throw errors. think about the idea of creating a function library. as you go further in...

Handling text — strings in JavaScript - Learn web development
t console, to see what results you get. to turn a standard string literal into a template literal, you have to replace the quote marks (' ', or " ") with backtick characters (` `). so, taking a simple example: let song = 'fight the youth'; would be turned into a template literal like so: song = `fight the youth`; if we want to concatenate strings, or include expression results inside them, traditional strings can be fiddly to write: let score = 9; let highestscore = 10; let output = 'i like the song "' + song + '". i gave it a score of ' + (score/highestscore * 100) + '%.'; template literals simplify this enormously: output = `i like the song "${ song }". i gave it a score of ${ score/highestscore * 100 }%.`; there is no more need to open and close multiple string pieces — the who...
...`; the first two placeholders here are pretty simple, only including a simple value in the string. the third one calculates a percentage result and rounds it to the nearest integer. the fourth one includes uses a ternary operator to check whether the score is above a certain mark and print a pass or fail message depending on the result. another point to note is that if you want to split a traditional string over multiple lines, you need to include a newline character, \n: output = 'i like the song "' + song + '".\ni gave it a score of ' + (score/highestscore * 100) + '%.'; template literals respect the line breaks in the source code, so newline characters are no longer needed. this would achieve the same result: output = `i like the song "${ song }". i gave it a score of ${ score/hi...

Object building practice - Learn web development
and height of the browser viewport (bottom right hand corner). horizontal and vertical velocity (velx and vely) — each ball is given a horizontal and vertical velocity; in real terms these values are regularly added to the x/y coordinate values when we animate the balls, to move them by this much on each frame. color — each ball gets a color. size — each ball gets a size — this is its radius, in pixels. this handles the properties, but what about the methods? we want to get our balls to actually do something in our program. drawing the ball first add the following draw() method to the ball()'s prototype: ball.prototype.draw = function() { ctx.beginpath(); ctx.fillstyle = this.color; ctx.arc(this.x, this.y, this.size, 0, 2 * math.pi); ctx.fill(); } using this function...
...hing on it: first, we use beginpath() to state that we want to draw a shape on the paper. next, we use fillstyle to define what color we want the shape to be — we set it to our ball's color property. next, we use the arc() method to trace an arc shape on the paper. its parameters are: the x and y position of the arc's center — we are specifying the ball's x and y properties. the radius of the arc — in this case, the ball's size property. the last two parameters specify the start and end number of degrees around the circle that the arc is drawn between. here we specify 0 degrees, and 2 * pi, which is the equivalent of 360 degrees in radians (annoyingly, you have to specify this in radians). that gives us a complete circle. if you had specified only 1 * pi, you'd get a se...

Aprender y obtener ayuda - Learn web development
web development, as well as further reading so you can find out more information about each sub-topic should you wish.. effective learning let's move straight on and think about effective learning. different learning methods it is interesting to consider that there are two main ways in which your brain learns things — focused and diffuse learning: focused learning is what you might more traditionally associate with academic subjects. you concentrate deeply on a low-level topic and solving the specific problems that it brings. you are focused on a narrow area. diffuse learning is more to do with high-level thinking around a wider area. you let your mind wander more widely, and seemingly make random connections between different things. this is more the kind of thinking you do while y...
...specific information, you can add other keywords as modifiers, for example "<video> element autoplay attribute", or "date.settime parameters". if you want to search for something that has less obvious buzzwords, you need to think about what is most likely to return what you want. run code after several promises are fulfilled play a video stream from a webcam in the browser create a linear gradient in the background of your element error messages if you are having a problem with some code and a specific error message is coming up, it is often a good idea to just copy the error message into your search engine and use it as the search term. if other people have had the same problem, there'll likely be some articles or blog posts about it in places like mdn or stack overflow. note: st...

Client-Server Overview - Learn web development
n about the request, in the same way that an html head contains useful information about an html document (but not the actual content itself, which is in the body): get https://developer.mozilla.org/search?q=client+server+overview&topic=apps&topic=html&topic=css&topic=js&topic=api&topic=webdev http/1.1 host: developer.mozilla.org connection: keep-alive pragma: no-cache cache-control: no-cache upgrade-insecure-requests: 1 user-agent: mozilla/5.0 (windows nt 10.0; wow64) applewebkit/537.36 (khtml, like gecko) chrome/52.0.2743.116 safari/537.36 accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8 referer: https://developer.mozilla.org/ accept-encoding: gzip, deflate, sdch, br accept-charset: iso-8859-1,utf-8;q=0.7,*;q=0.7 accept-language: en-us,en;q=0.8,es;q=0.6 co...
...file details on this site. the format of the request is almost the same as the get request example shown previously, though the first line identifies this request as a post. ...

Styling Vue components with CSS - Learn web development
olor: 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 screen and (min-width: 620px) { body { font-size: 1.9rem; line-height: 1.31579; } } /*end resets*/ next, in your src...
...: block; margin-bottom: 5px; } .custom-checkbox > .checkbox { font-family: arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-weight: 400; font-size: 16px; font-size: 1rem; line-height: 1.25; box-sizing: border-box; width: 100%; height: 40px; height: 2.5rem; margin-top: 0; padding: 5px; border: 2px solid #0b0c0c; border-radius: 0; -webkit-appearance: none; -moz-appearance: none; appearance: none; } .custom-checkbox > input:focus { outline: 3px dashed #fd0; outline-offset: 0; box-shadow: inset 0 0 0 2px; } .custom-checkbox { 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-he...

Accessibility/LiveRegionDevGuide
g schemes that are used to help an at determine if an event is an actual live region event or is the result of user action. filtering for performance the most significant difference between at-spi and iaccessible2 is that at-spi is an inter-process communication service while iaccessible2 runs in process. as a result, care must be taken in an at-spi based application to minimize performance degradation by only acting on events that are truly live regions. these "non-live" events may be events originating from the chrome, user interaction in the chrome or document, document loading events, or real live region events from hidden tabs. with the goal of eliminating the "non-live" events, some sort of event filtering logic must be employed. the following is a list of potential filtering techniq...
... the event and can have values of "off", "polite", "assertive" and "rude". this property, along with an event's time stamp, determine the priority of a message within the priority queue. the following describes actions that should be taken for an event with the given politeness level: off: no action should be taken. the event should be filtered out as early as possible to prevent performance degradation. polite: a message should be derived from the event and added to the queue. assertive: the queue should be purged of 'polite' messages and the new message should be added to the queue. speak should not be interrupted. rude: the queue should be purged of 'polite' and 'assertive' messages and the new message should be added to the queue. current utterances should be allowed to finish but th...

What to do and what not to do in Bugzilla
it lists the requirements and the email to contact. if you need faster access to get canconfirm or editbugs, especially in order to triage bugs or to participate in a bug day, then you can ask in #bmo on irc, or you may create a bug requesting permissions. include a link to your bugzilla activity page in the bug description. ...
...ot change the target milestone and priority fields. these fields are reserved for the developers. this also applies to bugs with target milestones in the past. reassigning bugs if a bug belongs to a different product or component it should be reassigned. when performing bug reassignments, keep the following things in mind: always remember to check the reassign to default owner and qa contact radio button under the comment textbox. mozilla applications like the application suite, thunderbird, or firefox share most of their program code and all of the backend code including things like network connectivity (ftp, http, imap) and html rendering. make sure that you also test thunderbird or firefox bugs with the application suite and move the bug to one of the core products, if the bug also e...

Creating a Firefox sidebar
has been implemented in firefox 29 as part of the add-on sdk. it's the easiest way to create an extension with a sidebar.obsolete since gecko 57 you can also build a restartless extension yourself without the sdk. a sample extension to add a web panel is available as a starter.obsolete since gecko 57 if you'd like to have a deeper integration with the browser to offer more complex features, a traditional overlay extension can be an option. the document might be obsolete, though.obsolete since gecko 57 the social api obsolete since gecko 57 (firefox 57 / thunderbird 57 / seamonkey 2.54)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. this content covers features introduced in fi...
...olete since gecko 23 (firefox 23 / thunderbird 23 / seamonkey 2.20)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. as of firefox 23, the addpanel and addpersistentpanel functions have been removed from the deprecated, netscape-derived window.sidebar object. that means the ability to add a traditional sidebar panel is no longer available from web content. the new social api or an extension can be used instead as described above. see also bootstrap addon demo which adds a sidebar with browser for html content: https://gist.github.com/noitidart/8728393 ...

The Firefox codebase: CSS Guidelines
common components to writing your own. also, it is good practice to introduce a common class when the new element you are styling reuses some styles from another element, this allows the maintenance cost and the amount of code duplication to be reduced. formatting spacing & indentation 2 spaces indentation is preferred add a space after each comma, except within color functions: linear-gradient(to bottom, black 1px, rgba(255,255,255,0.2) 1px) always add a space before !important. omit units on 0 values do this: margin: 0; not this: margin: 0px; use expanded syntax it is often harder to understand what the shorthand is doing and the shorthand can also hide some unwanted default values. it is good to privilege expanded syntax to make your intentions explicit. do ...
...margins, padding and borders, use inline-start/inline-end rather than left/right. example: use margin-inline-start: 3px; instead of margin-left: 3px. for rtl-aware positioning (left/right), use inset-inline-start/inset-inline-end. for rtl-aware float layouts, float: inline-start|inline-end can be used instead of float: left|right. the rtl-aware equivalents of border-{top/bottom}-{left/right}-radius are border-{start/end}-{start/end}-radius when there is no special rtl-aware property available, use the pseudo :-moz-locale-dir(ltr|rtl) (for xul files) or :dir(ltr|rtl) (for html files). remember that while a tab content's scrollbar still shows on the right in rtl, an overflow scrollbar will show on the left. write padding: 0 3px 4px; instead of padding: 0 3px 4px 3px;. this makes it more...

Eclipse CDT
launches firefox for debugging. to debug, click the debug button on the toolbar, or select "run > debug" from the menu bar. it's not obvious, but you can get a gdb prompt in the console so that you can type gdb commands directly. after you've finished debugging, you can get back to the c/c++ perspective (i.e. window layout) via the menubar by selecting "window > open perspective > c/c++". upgrading gdb on mac the ancient, barely maintained apple fork of gdb that comes with xcode on mac is really horrible. if you use mac, you may want to build the latest fsf version of gdb and set eclipse to use that gdb for debugging. one suggested configuration for building gdb is '--prefix="$home" --disable-debug --with-python=/usr' (create an optimized build with support for python (so that you can u...
...n the code assistance section above. second, eclipse cdt's indexer needs an object directory because virtually all mozilla source files include header files (directly or indirectly) that have been copied to or generated in the object directory. without an object directory, the indexer would find that a lot of header files are missing when processing the source files, which would significantly degrade its ability to index the source and provide good code assistance. how can i open eclipse for multiple trees at once? to be able to open more than one workspace at a time, you currently need to launch a separate eclipse process for each workspace. on mac, create a script called something like open-my-workspace.py, give it the following contents, replacing the bold paths as appropriate, and mak...

Interface Compatibility
ture releases of mozilla. jetpack the jetpack sdk and apis are not yet complete. the stable version 1.0 of the jetpack sdk is planned for later in 2010. documented apis which are shipped as part of the jetpack sdk are designed to work in future versions of firefox. achieving this compatibility may require rebuilding the extension with a new version of the jetpack sdk. javascript/xul interfaces traditional extensions written using xul overlays and xpcom have access to the full power of the mozilla platform. with the power, however, comes the understanding that the mozilla platform is constantly changing and many apis may change in future versions of firefox. in micro/maintenance releases, there should be no incompatible changes to interfaces, except as a last resort when a security fix lea...
...s, the change should try to maintain backwards compatibility by using optional/default parameters or other javascript techniques. where appropriate, new apis should be designed so that they are compatible with future plans, and clients do not need xpcom boilerplate. this may involve using javascript modules, passing named parameters using objects, or other similar techniques. binary interfaces traditionally, mozilla has maintained a set of xpcom interfaces and functions with the @status frozen marking. using these interfaces, and using dynamic calls to queryinterface, it has been possible to write binary xpcom components which were compatible with multiple versions of firefox. beginning with mozilla 2 (firefox 4), this will no longer be supported: all @status markings have been removed, and...

Frame script loading and lifetime
do nothing. var gcontentframemessagemanager = this; addeventlistener('unload', function(aevent) { if (aevent.target == gcontentframemessagemanager) { sendasyncmessage('my-addon-id', 'framescript-died'); // if you did not set third argument of `services.mm.addmessagelistener` to `true`, then this will fail to send a message } }, false); note about unload during uninstallation/upgrade when your add-on is uninstalled, or disabled, you should: cancel it, if you have used allowdelayedload, by calling removedelayedframescript; ensuring the frame script is not loaded into any new tabs. disable any frame scripts already loaded. there is no mechanism to unload frame scripts which are already loaded. you need to send a message to your frame scripts, telling them to disable thems...
...de or removing any event listeners. there is a bug in non-e10s where this order is not true. in e10s framescripts work fine on updating. for non-e10s waiting for bug 1202125 - framescripts are not backwards loaded in message order in non-e10s. note: you might think that there is a race condition here due to the asynchronous nature of the message passing: your add-on is disabled for an upgrade. your add-on broadcasts "disable" to your frame scripts. your add-on is upgraded, and the new code loads new frame scripts. the new frame scripts receive the "disable" message and stop working. in fact, the message manager guarantees that loadframescript and broadcastasyncmessage are guaranteed to affect frame scripts in the order that they are called, so in this case "disable" will be rece...

Site Identity Button
in this case, expect to see a 'mixed content' message in the web console. use of a weak cipher - in this case, you're using tls but a strong cipher was not available. look for messages about weak ciphers (e.g. rc4). insecure rene...
...es loaded for your page have not. in this case, expect to see a 'mixed content' message in the web console. use of a weak cipher - in this case, you're using tls but a strong cipher was not available. look for messages about weak ciphers (e.g. rc4). insecure renegotation - older versions of tls had a flaw in the basic design; if your server uses an affected version, the security ui will be downgraded but no web console message will be displayed. ...

PR_AcceptRead
accepts a new connection and receives a block of data. syntax #include <prio.h> print32 pr_acceptread( prfiledesc *listensock, prfiledesc **acceptedsock, prnetaddr **peeraddr, void *buf, print32 amount, printervaltime timeout); parameters the function has the following parameters: listensock a pointer to a prfiledesc object representing a socket descriptor that has been called with the pr_listen function, also known as the rendezvous socket. acceptedsock a pointer to a pointer to a prfiledesc object. on return, *acceptedsock points to the prfiledesc object for the newly connected socket. ...
... listensock a pointer to a prfiledesc object representing a socket descriptor that has been called with the pr_listen function, also known as the rendezvous socket. acceptedsock a pointer to a pointer to a prfiledesc object. on return, *acceptedsock points to the prfiledesc object for the newly connected socket. this parameter is valid only if the function return does not indicate failure. peeraddr a pointer a pointer to a prnetaddr object. on return, peeraddr points to the address of the remote socket. the prnetaddr object that peeraddr points to will be in the buffer pointed 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 receiv...

PR EnumerateAddrInfo
enumerates each of the possible network addresses of a praddrinfo structure, acquired from pr_getaddrinfobyname. syntax #include <prnetdb.h> void *pr_enumerateaddrinfo( void *enumptr, const praddrinfo *addrinfo, pruint16 port, prnetaddr *result); parameters the function has the following parameters: enumptr the index pointer of the enumeration. to begin an enumeration, this argument is set to null. to continue an enumeration (thereby getting successive addresses from the praddrinfo structure), the value should be set to the function's last returned value. the enumeration is complete when a value of null is returned. addrinfo a pointer to a praddrinfo structure returned by pr_getaddrinfobyname. port the port number to be assigned as part of the prnetaddr structure. this ...
...ut, a pointer to a prnetaddr structure. on output, this structure is filled in by the runtime if the result of the call is not null. returns the function returns the value you should specify in the enumptr parameter for the next call of the enumerator. if the function returns null, the enumeration is ended. description pr_enumerateaddrinfo is a stateless enumerator. the principle input, the praddrinfo structure, is not modified. ...

gtstd.html
this page is part of the ssl reference that we are migrating into the format described in the mdn style guide. if you are inclined to help with this migration, your help would be very much appreciated. upgraded documentation may be found in the current nss reference getting started with ssl chapter 2 getting started with ssl this chapter describes how to set up your environment, including certificate and key databases. ssl, pkcs #11, and the default security databases setting up the certificate and key databases building nss programs ssl, pkcs #11, and the default security databases the basic relationships among the nss libraries are described in introduction to network security services. before running the sample programs, it's important to...
... the simple command line test tools that come with any package of cryptographic libraries. many who have attempted it have eventually come to regret that decision. for production deployment, the nss team strongly recommends that you either: use certificates from a competent third-party ca that is already known to your relying party software (e.g. your ssl clients), or use professional grade ca software, such as red hat's dogtag certificate system, to set up and operate your own ca and issue your own certificates. for complete information about the command-line options used in the examples that follow, see using the certificate database tool. setting up the ca db and certificate set up the ca with its own separate set of databases. create a new certificate database in ...

Exact Stack Rooting
m the rootset. liveset - the set of all gcthings that are reachable from roots. deadset - the set of all gcthings that are not reachable from roots. cheap - the c/c++ program heap: e.g., memory allocated by malloc/calloc/realloc. cstack - the c/c++ program stack. rooted - a gcthing in the liveset is said to be "rooted" even if it is not a root as such, but is only reachable from roots. this traditional usage is ambiguous and this guide will use live or alive instead of rooted to avoid confusion. caveats exact rooting transition period exact stack rooting is not currently enabled by default: we are still using conservative scanning. until the system described above has 100% browser coverage, it is unsafe to enable it. in the meantime, the js::rootedt class holds an object live by stor...
...system described above has 100% browser coverage, it is unsafe to enable it. in the meantime, the js::rootedt class holds an object live by storing its pointer on the stack so that the conservative scanner will find it. this distinction should not be noticable to the end user. performance tweaking in aggregate, exact and conservate stack rooting should have similar performance. the performance tradeoffs that these techniques make, however, are quite different. if the extra overhead of exact rooting does end up adding an unacceptable cost to a specific code path that is not mitigated by a faster gc, there are some tricks you can use to get better performance at the cost of more complex code. move js::rootedt declarations above loops. modern c++ compilers are not smart enough to do licm on...

JSAPI User Guide
compiled scripts the easiest way to run a script is to use js_evaluatescript, which compiles and executes the script in one go. but sometimes an application needs to run a script many times. in this case, it may be faster to co...
...ct from another sandbox? it might as well be in a parallel universe. even global variables are per-sandbox. there is no getobjectfromothersandbox() function. your application just needs to take care not to expose any such function to scripts. in short, never pass one user's data and objects to another user's code, and you'll have no access control issues. spidermonkey won't do it if you don't. trade-offs. object-capabilities security is security without run-time security checks. it is easy to implement, easy to reason about, and fast. but in fairness there are some drawbacks. first, the failure mode is pretty severe. if you do accidentally leak an object from one sandbox into another, the genie is out of the bottle. once a malicious script gets a reference to a single object in a sandbox, i...

Gecko Roles
esents a picture. role_statictext represents read-only text, such as labels for other controls or instructions in a dialog box. static text cannot be modified or selected. role_text_leaf represents selectable text that allows edits or is designated read-only. role_pushbutton represents a push button control. role_checkbutton represents a check box control. role_radiobutton represents an option button, also called a radio button. it is one of a group of mutually exclusive options. all objects sharing a single parent that have this attribute are assumed to be part of single mutually exclusive group. role_combobox represents a combo box; an edit control with an associated list box that provides a set of predefined choices. role_droplist rep...
...s in a window. role_option_pane a specialized pane whose primary use is inside a dialog. role_password_text a text object uses for passwords, or other places where the text content is not shown visibly to the user. role_popup_menu a temporary window that is usually used to offer the user a list of choices, and then hides when the user selects one of those choices. role_radio_menu_item a radio button that is a menu item. role_root_pane a root pane. a specialized pane that has a glass pane and a layered pane as its children. its children can include scroll bars and a viewport. role_scroll_pane a scroll pane. an object that allows a user to incrementally view a large amount of information. role_split_pane a split pane. a specialized panel t...

Mozilla internal string guide
often a conversion to utf-8 is more appropriate. see tonewutf8string below. char* tonewutf8string(nsastring&) - allocates a new char* buffer containing the utf-8 encoded version of the given nsastring. see unicode conversion for more details and for better ways that don't require you to manage the memory yourself. these methods return a buffer allocated using xpcom's allocator instead of the traditional allocator (malloc, etc.). outside of libxul you should use ns_free to deallocate the result when you no longer need it, inside libxul free() is preferred.. substrings (string fragments) it is very simple to refer to a substring of an existing string without actually allocating new space and copying the characters into that substring. substring() is the preferred method to create a refere...
...f the string. use setlength() or bulkwrite() as appropriate. ...

NS_ConvertASCIItoUTF16
har*, print32) const - source parameters char* astring print32 acount tofloat float tofloat(print32*) const - source perform string to float conversion. ...
...r* adata print32 alength appendwithconversion void appendwithconversion(const nsacstring_internal&) - source parameters nsacstring_internal& astring void appendwithconversion(const char*, print32) - source parameters char* adata print32 alength appendint void appendint(print32, print32) - source append the given integer to this string parameters print32 ainteger print32 aradix void appendint(pruint32, print32) - source append the given unsigned integer to this string parameters pruint32 ainteger print32 aradix void appendint(print64, print32) - source parameters print64 ainteger print32 aradix appendfloat void appendfloat(float) - source append the given float to this string parameters float afloat void appendfloat(double) - source paramete...

NS_ConvertUTF16toUTF8
ars to compare @return boolean parameters char* astring print32 acount tofloat float tofloat(print32*) const - source perform string to float conversion. ...
... print32 alength appendwithconversion void appendwithconversion(const nsastring_internal&) - source parameters nsastring_internal& astring void appendwithconversion(const prunichar*, print32) - source parameters prunichar* adata print32 alength appendint void appendint(print32, print32) - source append the given integer to this string parameters print32 ainteger print32 aradix void appendint(pruint32, print32) - source append the given unsigned integer to this string parameters pruint32 ainteger print32 aradix void appendint(print64, print32) - source parameters print64 ainteger print32 aradix appendfloat void appendfloat(float) - source append the given float to this string parameters float afloat void appendfloat(double) - source paramete...

NS_ConvertUTF8toUTF16
har*, print32) const - source parameters char* astring print32 acount tofloat float tofloat(print32*) const - source perform string to float conversion. ...
...r* adata print32 alength appendwithconversion void appendwithconversion(const nsacstring_internal&) - source parameters nsacstring_internal& astring void appendwithconversion(const char*, print32) - source parameters char* adata print32 alength appendint void appendint(print32, print32) - source append the given integer to this string parameters print32 ainteger print32 aradix void appendint(pruint32, print32) - source append the given unsigned integer to this string parameters pruint32 ainteger print32 aradix void appendint(print64, print32) - source parameters print64 ainteger print32 aradix appendfloat void appendfloat(float) - source append the given float to this string parameters float afloat void appendfloat(double) - source paramete...

NS_LossyConvertUTF16toASCII
ars to compare @return boolean parameters char* astring print32 acount tofloat float tofloat(print32*) const - source perform string to float conversion. ...
... print32 alength appendwithconversion void appendwithconversion(const nsastring_internal&) - source parameters nsastring_internal& astring void appendwithconversion(const prunichar*, print32) - source parameters prunichar* adata print32 alength appendint void appendint(print32, print32) - source append the given integer to this string parameters print32 ainteger print32 aradix void appendint(pruint32, print32) - source append the given unsigned integer to this string parameters pruint32 ainteger print32 aradix void appendint(print64, print32) - source parameters print64 ainteger print32 aradix appendfloat void appendfloat(float) - source append the given float to this string parameters float afloat void appendfloat(double) - source paramete...

nsAdoptingCString
ars to compare @return boolean parameters char* astring print32 acount tofloat float tofloat(print32*) const - source perform string to float conversion. ...
... print32 alength appendwithconversion void appendwithconversion(const nsastring_internal&) - source parameters nsastring_internal& astring void appendwithconversion(const prunichar*, print32) - source parameters prunichar* adata print32 alength appendint void appendint(print32, print32) - source append the given integer to this string parameters print32 ainteger print32 aradix void appendint(pruint32, print32) - source append the given unsigned integer to this string parameters pruint32 ainteger print32 aradix void appendint(print64, print32) - source parameters print64 ainteger print32 aradix appendfloat void appendfloat(float) - source append the given float to this string parameters float afloat void appendfloat(double) - source paramete...

nsAdoptingString
har*, print32) const - source parameters char* astring print32 acount tofloat float tofloat(print32*) const - source perform string to float conversion. ...
...r* adata print32 alength appendwithconversion void appendwithconversion(const nsacstring_internal&) - source parameters nsacstring_internal& astring void appendwithconversion(const char*, print32) - source parameters char* adata print32 alength appendint void appendint(print32, print32) - source append the given integer to this string parameters print32 ainteger print32 aradix void appendint(pruint32, print32) - source append the given unsigned integer to this string parameters pruint32 ainteger print32 aradix void appendint(print64, print32) - source parameters print64 ainteger print32 aradix appendfloat void appendfloat(float) - source append the given float to this string parameters float afloat void appendfloat(double) - source paramete...

nsAutoString
har*, print32) const - source parameters char* astring print32 acount tofloat float tofloat(print32*) const - source perform string to float conversion. ...
...r* adata print32 alength appendwithconversion void appendwithconversion(const nsacstring_internal&) - source parameters nsacstring_internal& astring void appendwithconversion(const char*, print32) - source parameters char* adata print32 alength appendint void appendint(print32, print32) - source append the given integer to this string parameters print32 ainteger print32 aradix void appendint(pruint32, print32) - source append the given unsigned integer to this string parameters pruint32 ainteger print32 aradix void appendint(print64, print32) - source parameters print64 ainteger print32 aradix appendfloat void appendfloat(float) - source append the given float to this string parameters float afloat void appendfloat(double) - source paramete...

nsCAutoString
n parameters char* astring print32 acount tofloat float tofloat(print32*) const - source perform string to float conversion. ...
...withconversion void appendwithconversion(const nsastring_internal&) - source parameters nsastring_internal& astring void appendwithconversion(const prunichar*, print32) - source parameters prunichar* adata print32 alength appendint void appendint(print32, print32) - source append the given integer to this string parameters print32 ainteger print32 aradix void appendint(pruint32, print32) - source append the given unsigned integer to this string parameters pruint32 ainteger print32 aradix void appendint(print64, print32) - source parameters print64 ainteger print32 aradix appendfloat void appendfloat(float) - source append the given float to this string parameters float afloat void append...

nsCString
ars to compare @return boolean parameters char* astring print32 acount tofloat float tofloat(print32*) const - source perform string to float conversion. ...
... print32 alength appendwithconversion void appendwithconversion(const nsastring_internal&) - source parameters nsastring_internal& astring void appendwithconversion(const prunichar*, print32) - source parameters prunichar* adata print32 alength appendint void appendint(print32, print32) - source append the given integer to this string parameters print32 ainteger print32 aradix void appendint(pruint32, print32) - source append the given unsigned integer to this string parameters pruint32 ainteger print32 aradix void appendint(print64, print32) - source parameters print64 ainteger print32 aradix appendfloat void appendfloat(float) - source append the given float to this string parameters float afloat void appendfloat(double) - source paramete...

nsDependentCString
ars to compare @return boolean parameters char* astring print32 acount tofloat float tofloat(print32*) const - source perform string to float conversion. ...
... print32 alength appendwithconversion void appendwithconversion(const nsastring_internal&) - source parameters nsastring_internal& astring void appendwithconversion(const prunichar*, print32) - source parameters prunichar* adata print32 alength appendint void appendint(print32, print32) - source append the given integer to this string parameters print32 ainteger print32 aradix void appendint(pruint32, print32) - source append the given unsigned integer to this string parameters pruint32 ainteger print32 aradix void appendint(print64, print32) - source parameters print64 ainteger print32 aradix appendfloat void appendfloat(float) - source append the given float to this string parameters float afloat void appendfloat(double) - source paramete...

nsDependentString
har*, print32) const - source parameters char* astring print32 acount tofloat float tofloat(print32*) const - source perform string to float conversion. ...
...r* adata print32 alength appendwithconversion void appendwithconversion(const nsacstring_internal&) - source parameters nsacstring_internal& astring void appendwithconversion(const char*, print32) - source parameters char* adata print32 alength appendint void appendint(print32, print32) - source append the given integer to this string parameters print32 ainteger print32 aradix void appendint(pruint32, print32) - source append the given unsigned integer to this string parameters pruint32 ainteger print32 aradix void appendint(print64, print32) - source parameters print64 ainteger print32 aradix appendfloat void appendfloat(float) - source append the given float to this string parameters float afloat void appendfloat(double) - source paramete...

nsFixedCString
ars to compare @return boolean parameters char* astring print32 acount tofloat float tofloat(print32*) const - source perform string to float conversion. ...
... print32 alength appendwithconversion void appendwithconversion(const nsastring_internal&) - source parameters nsastring_internal& astring void appendwithconversion(const prunichar*, print32) - source parameters prunichar* adata print32 alength appendint void appendint(print32, print32) - source append the given integer to this string parameters print32 ainteger print32 aradix void appendint(pruint32, print32) - source append the given unsigned integer to this string parameters pruint32 ainteger print32 aradix void appendint(print64, print32) - source parameters print64 ainteger print32 aradix appendfloat void appendfloat(float) - source append the given float to this string parameters float afloat void appendfloat(double) - source paramete...

nsFixedString
har*, print32) const - source parameters char* astring print32 acount tofloat float tofloat(print32*) const - source perform string to float conversion. ...
...r* adata print32 alength appendwithconversion void appendwithconversion(const nsacstring_internal&) - source parameters nsacstring_internal& astring void appendwithconversion(const char*, print32) - source parameters char* adata print32 alength appendint void appendint(print32, print32) - source append the given integer to this string parameters print32 ainteger print32 aradix void appendint(pruint32, print32) - source append the given unsigned integer to this string parameters pruint32 ainteger print32 aradix void appendint(print64, print32) - source parameters print64 ainteger print32 aradix appendfloat void appendfloat(float) - source append the given float to this string parameters float afloat void appendfloat(double) - source paramete...

nsPromiseFlatCString
ars to compare @return boolean parameters char* astring print32 acount tofloat float tofloat(print32*) const - source perform string to float conversion. ...
... print32 alength appendwithconversion void appendwithconversion(const nsastring_internal&) - source parameters nsastring_internal& astring void appendwithconversion(const prunichar*, print32) - source parameters prunichar* adata print32 alength appendint void appendint(print32, print32) - source append the given integer to this string parameters print32 ainteger print32 aradix void appendint(pruint32, print32) - source append the given unsigned integer to this string parameters pruint32 ainteger print32 aradix void appendint(print64, print32) - source parameters print64 ainteger print32 aradix appendfloat void appendfloat(float) - source append the given float to this string parameters float afloat void appendfloat(double) - source paramete...

nsPromiseFlatString
har*, print32) const - source parameters char* astring print32 acount tofloat float tofloat(print32*) const - source perform string to float conversion. ...
...r* adata print32 alength appendwithconversion void appendwithconversion(const nsacstring_internal&) - source parameters nsacstring_internal& astring void appendwithconversion(const char*, print32) - source parameters char* adata print32 alength appendint void appendint(print32, print32) - source append the given integer to this string parameters print32 ainteger print32 aradix void appendint(pruint32, print32) - source append the given unsigned integer to this string parameters pruint32 ainteger print32 aradix void appendint(print64, print32) - source parameters print64 ainteger print32 aradix appendfloat void appendfloat(float) - source append the given float to this string parameters float afloat void appendfloat(double) - source paramete...

nsString
har*, print32) const - source parameters char* astring print32 acount tofloat float tofloat(print32*) const - source perform string to float conversion. ...
...r* adata print32 alength appendwithconversion void appendwithconversion(const nsacstring_internal&) - source parameters nsacstring_internal& astring void appendwithconversion(const char*, print32) - source parameters char* adata print32 alength appendint void appendint(print32, print32) - source append the given integer to this string parameters print32 ainteger print32 aradix void appendint(pruint32, print32) - source append the given unsigned integer to this string parameters pruint32 ainteger print32 aradix void appendint(print64, print32) - source parameters print64 ainteger print32 aradix appendfloat void appendfloat(float) - source append the given float to this string parameters float afloat void appendfloat(double) - source paramete...

nsXPIDLCString
ars to compare @return boolean parameters char* astring print32 acount tofloat float tofloat(print32*) const - source perform string to float conversion. ...
... print32 alength appendwithconversion void appendwithconversion(const nsastring_internal&) - source parameters nsastring_internal& astring void appendwithconversion(const prunichar*, print32) - source parameters prunichar* adata print32 alength appendint void appendint(print32, print32) - source append the given integer to this string parameters print32 ainteger print32 aradix void appendint(pruint32, print32) - source append the given unsigned integer to this string parameters pruint32 ainteger print32 aradix void appendint(print64, print32) - source parameters print64 ainteger print32 aradix appendfloat void appendfloat(float) - source append the given float to this string parameters float afloat void appendfloat(double) - source paramete...

nsXPIDLString
har*, print32) const - source parameters char* astring print32 acount tofloat float tofloat(print32*) const - source perform string to float conversion. ...
...r* adata print32 alength appendwithconversion void appendwithconversion(const nsacstring_internal&) - source parameters nsacstring_internal& astring void appendwithconversion(const char*, print32) - source parameters char* adata print32 alength appendint void appendint(print32, print32) - source append the given integer to this string parameters print32 ainteger print32 aradix void appendint(pruint32, print32) - source append the given unsigned integer to this string parameters pruint32 ainteger print32 aradix void appendint(print64, print32) - source parameters print64 ainteger print32 aradix appendfloat void appendfloat(float) - source append the given float to this string parameters float afloat void appendfloat(double) - source paramete...

IAccessible2
n when using arrays" for more details. extendedstates this array is allocated by the server. free it with cotaskmemfree. nextendedstates the number of extended states returned; the size of the returned array. return value s_false if there are no states, [out] values are null and 0 respectively. s_ok. groupposition() returns grouping information. used for tree items, list items, tab panel labels, radio buttons, and so on. also used for collections of non-text objects. [propget] hresult groupposition( [out] long grouplevel, [out] long similaritemsingroup, [out] long positioningroup ); parameters grouplevel 1 based, 0 indicates that this value is not applicable. similaritemsingroup 1 based, 0 indicates that this value is not applicable. positioningroup 1 based, 0 indicates that this val...
...e internal structure has been invalidated and can refetch just that part. this value can also be used by an at to determine when the current control has changed. if the role is the same for two controls that are adjacent in the tab order, this can be used to detect the new control. another use of this value by an at is to identify when a grouping object has changed, for example when moving from a radio button in one group to a radio button in a different group. one means of implementing this would be to create a factory with a 32 bit number generator and a reuse pool. the number generator would emit numbers starting at 1. each time an object's life cycle ended, its number would be saved into a reuse pool. the number generator would be used whenever the reuse pool was empty. [propget] hresult...

nsIAccessibleRole
:output. role_text_leaf 42 represents selectable text that allows edits or is designated read-only. role_pushbutton 43 represents a push button control. it is used for xul:button, html:button, role="button", xforms:trigger, xforms:submit. role_checkbutton 44 represents a check box control. it is used for xul:checkbox, html:input@type="checkbox", role="checkbox", boolean xforms:input. role_radiobutton 45 represents an option button, also called a radio button. it is one of a group of mutually exclusive options. all objects sharing a single parent that have this attribute are assumed to be part of single mutually exclusive group. it is used for xul:radio, html:input@type="radio", role="radio". role_combobox 46 represents a combo box; an edit control with an associated list box that pr...
..._pane and role_root_pane. role_option_pane 81 a specialized pane whose primary use is inside a dialog. role_password_text 82 a text object uses for passwords, or other places where the text content is not shown visibly to the user. role_popup_menu 83 a temporary window that is usually used to offer the user a list of choices, and then hides when the user selects one of those choices. role_radio_menu_item 84 a radio button that is a menu item. role_root_pane 85 a root pane. a specialized pane that has a glass pane and a layered pane as its children. also refer to role_glass_pane and role_layered_pane. role_scroll_pane 86 a scroll pane. an object that allows a user to incrementally view a large amount of information. its children can include scroll bars and a viewport. also refer to...

nsIHttpChannel
void setresponseheader(in acstring header, in acstring value, in boolean merge); void visitoriginalresponseheaders(in nsihttpheadervisitor avisitor); void visitrequestheaders(in nsihttpheadervisitor avisitor); void visitresponseheaders(in nsihttpheadervisitor avisitor); constants constant description referrer_policy_no_referrer_when_downgrade default; indicates not to pass on the referrer when downgrading from https to http referrer_policy_no_referrer indicates no referrer will be sent referrer_policy_origin only send the origin of the referring uri referrer_policy_origin_when_xorigin same as the default; only send the origin of the referring uri for cross-origin requests referrer_polic...
...downgrading from https to http referrer_policy_no_referrer indicates no referrer will be sent referrer_policy_origin only send the origin of the referring uri referrer_policy_origin_when_xorigin same as the default; only send the origin of the referring uri for cross-origin requests referrer_policy_unsafe_url always send the referrer, even when downgrading from https to http attributes attribute type description allowpipelining boolean this attribute is a hint to the channel to indicate whether or not the underlying http transaction should be allowed to be pipelined with other transactions. this should be set to false, for example, if the application knows that the corresponding document is likely to be...

nsISocketTransport
gecko 6.0 (firefox 6.0 / thunderbird 6.0 / seamonkey 2.3) note: connection setup is triggered by opening an input or output stream, it does not start on its own. completion of the connection setup is indicated by a status_connected_to notification to the event sink (if set). ...
... flag is set, the socket will not apply any credentials when establishing a connection. for example, an ssl connection would not send any client-certificates if this flag is set. disable_ipv6 2 when this flag is set, the socket will ignore any ipv6 addresses the host may offer and will only attempt to connect to ipv4 addresses. methods native code only!getpeeraddr returns the ip address of the socket connection peer. this attribute is defined only once a connection has been established. prnetaddr getpeeraddr(); parameters none. return value an prnetaddr containing the resolved ip address. native code only!getselfaddr returns the ip address of the initiating end. this attribute is defined only once a connection has been established. prnetaddr getselfaddr...

XPCOM Interface Reference
adernsiframeloaderownernsiframemessagelistenernsiframemessagemanagernsiframescriptloadernsigsettingscollectionnsigsettingsservicensigeolocationprovidernsigeolocationupdatensiglobalhistorynsiglobalhistory2nsiglobalhistory3nsihtmleditornsihttpheaderlistenernsihapticfeedbacknsihttpactivitydistributornsihttpactivityobservernsihttpchannelnsihttpchannelinternalnsihttpheadervisitornsihttpservernsihttpupgradelistenernsiidnservicensiiframeboxobjectnsiiniparsernsiiniparserfactorynsiiniparserwriternsiioservicensiidleservicensiinprocesscontentframemessagemanagernsiinputstreamnsiinputstreamcallbacknsiinstalllocationnsiinterfacerequestornsijscidnsijsidnsijsiidnsijsonnsijetpacknsijetpackservicensijumplistbuildernsijumplistitemnsilivemarkservicensiloadgroupnsilocalfilensilocalfilemacnsilocalensilocaleservice...
...mptnsiprivatebrowsingservicensiprocessnsiprocess2nsiprocessscriptloadernsiprofilensiprofilelocknsiprofileunlockernsiprogramminglanguagensiprogresseventsinknsipromptnsipromptservicensipropertiesnsipropertynsipropertybagnsipropertybag2nsipropertyelementnsiprotocolhandlernsiprotocolproxycallbacknsiprotocolproxyfilternsiprotocolproxyservicensiproxyinfonsipushmessagensipushservicensipushsubscriptionnsiradiointerfacelayernsirandomgeneratornsirequestnsirequestobservernsiresumablechannelnsirunnablensishentrynsishistorynsishistorylistenernsisockssocketinfonsisslerrorlistenernsisslsocketcontrolnsiscreennsiscreenmanagernsiscripterrornsiscripterror2nsiscriptableionsiscriptableinputstreamnsiscriptableunescapehtmlnsiscriptableunicodeconverternsiscrollablensisearchenginensisearchsubmissionnsisecuritychecked...

Int64
ctly formatted or contains a value outside the range that can be represented in 64 bits. this will also be thrown if the source value is a floating-point number that can't be precisely represented as a 64-bit integer. method overview number compare(a, b); number hi(a); int64 join(high, low); number lo(a); string tosource(); string tostring([radix]); methods compare() compares two 64-bit integer values. number compare( a, b ); parameters a the first value to compare. b the second value to compare. return value the returned value is: -1 if a < b, 0 if a == b, and 1 if a > b. exceptions thrown typeerror one or both of the specified values is not a 64-bit integer (either signed or unsigned). hi() return...
... one or both of the specified numbers is not a javascript number with an integral value. tosource() this method is for internal debugging use only. warning: do not rely on the value returned by this method, as it's subject to change at any time, depending on the debugging needs of the developers. tostring() returns a string representation of the object's numeric value. string tostring( [radix] ); parameters radix optional the radix (base) to use when constructing the string. if you don't specify a radix, base 10 is used. return value a string representation of the value in the specified radix. this string consists of a leading minus sign, if the value was negative, followed by one or more lower-case digits in the specified radix. see also ctypes uint64 ...

UInt64
tly formatted or contains a value outside the range that can be represented in 64 bits. this will also be thrown if the source value is a floating-point number that can't be precisely represented as a 64-bit integer. method overview number compare(a, b); number hi(a); uint64 join(high, low); number lo(a); string tosource(); string tostring([radix]); methods compare() compares two 64-bit integer values. number compare( a, b ); parameters a the first value to compare. b the second value to compare. return value the returned value is -1 if a < b, 0 if a == b, and 1 if a > b. exceptions thrown typeerror one or both of the specified values is not a 64-bit integer (either signed or unsigned). hi() returns th...
...e or both of the specified numbers is not a javascript number with an integral value. tosource() this method is for internal debugging use only. warning: do not rely on the value returned by this method, as it's subject to change at any time, depending on the debugging needs of the developers. tostring() returns a string representation of the object's numeric value. string tostring( [radix] ); parameters radix optional the radix (base) to use when constructing the string. if you don't specify a radix, base 10 is used. return value a string representation of the value in the specified radix. this string consists of a leading minus sign, if the value was negative, followed by one or more lower-case digits in the specified radix. arithmetic operations const uint64 = c...

Animating CSS properties - Firefox Developer Tools
isn't to convince you that animating using margin is always a bad idea. it's to demonstrate how the tools can give you insight into the work the browser is doing to render your site, and how you can apply that insight to diagnose and fix performance problems. if you want to play along, the demo website is here. it looks like this: it has two controls: a button to start/stop the animation, and a radio group to choose to animate using margin, or to animate using transform. there are a number of elements, and we've added a linear-gradient background and a box-shadow to each element, because they are both relatively expensive effects to paint. there's also a video version of this walkthrough: animating using margin leaving the "use margin" option set, start the animation, open the perform...
...t tells us it took 13.11ms. with only 16.7ms in our total budget, it's not surprising we are missing a consistently high frame rate. you can experiment with this: try removing the box shadow using the page inspector, and see how that affects paint time. but next, we'll see how using transform instead of margin eliminates those expensive paints entirely. animating using transform now switch the radio button in the web page to "use transform", and make a new recording. it will look something like this: waterfall overview compared with the version that uses margin, we're seeing a lot less green and a lot more pink, which could be either layout or style recalculation. frame rate compared with the version that uses margin, this is looking pretty good. we're averaging nearly 60fps, and...

BiquadFilterNode() - Web APIs
0 lowpass: (default) allows frequencies below a cutoff frequency to pass through, and attenuates frequencies above the cutoff. this is a standard second-order resonant lowpass filter with 12db/octave rolloff. q: controls how peaked the response will be at the cutoff frequency. a large value makes the response more peaked. please note that for this filter type, this value is not a traditional q, but is a resonance value in decibels. frequency: the cutoff frequency. gain: not used. highpass: a highpass filter is the opposite of a lowpass filter. frequencies above the cutoff frequency are passed through, but frequencies below the cutoff are attenuated. it implements a standard second-order resonant highpass filter with 12db/octave rolloff. q: controls how peaked t...
...e of a lowpass filter. frequencies above the cutoff frequency are passed through, but frequencies below the cutoff are attenuated. it implements a standard second-order resonant highpass filter with 12db/octave rolloff. q: controls how peaked the response will be at the cutoff frequency. a large value makes the response more peaked. please note that for this filter type, this value is not a traditional q, but is a resonance value in decibels. frequency: the cutoff frequency. gain: not used. bandpass: a bandpass filter allows a range of frequencies to pass through and attenuates the frequencies below and above this frequency range. it implements a second-order bandpass filter. q: controls the width of the band. the width becomes narrower as the q value increases. frequen...

BiquadFilterNode.getFrequencyResponse() - Web APIs
computed magnitudes of the freqency response for each frequency value in the frequencyarray. for any frequency in frequencyarray whose value is outside the range 0.0 to samplerate/2 (where samplerate is the sample rate of the audiocontext), the corresponding value in this array is nan. these are unitless values. phaseresponseoutput a float32array to receive the computed phase response values in radians for each frequency value in the input frequencyarray. for any frequency in frequencyarray whose value is outside the range 0.0 to samplerate/2 (where samplerate is the sample rate of the audiocontext), the corresponding value in this array is nan. return value undefined exceptions invalidaccesserror the three arrays provided are not all of the same length. example in the following ...
...range.value; ... function calcfrequencyresponse() { biquadfilter.getfrequencyresponse(myfrequencyarray,magresponseoutput,phaseresponseoutput); for(i = 0; i <= myfrequencyarray.length-1;i++){ var listitem = document.createelement('li'); listitem.innerhtml = '<strong>' + myfrequencyarray[i] + 'hz</strong>: magnitude ' + magresponseoutput[i] + ', phase ' + phaseresponseoutput[i] + ' radians.'; freqresponseoutput.appendchild(listitem); } } calcfrequencyresponse(); specifications specification status comment web audio apithe definition of 'getfrequencyresponse()' in that specification. working draft ...

CSSPrimitiveValue.getFloatValue() - Web APIs
valid values are: constant description css_cm the value is a <length> in centimeters. css_deg the value is an <angle> in degrees. css_dimension the value is a <number> with an unknown dimension. css_ems the value is a <length> in em units. css_exs the value is a <length> in ex units. css_grad the value is an <angle> in grads. css_hz the value is a <frequency> in hertz. the value can be obtained by using the getfloatvalue method. css_in the value is a <length> in inches. css_khz the value is a <frequency> in kilohertz. css_mm the value is a <length> in millimeters. css_ms the value is a <time> in millis...
...is a <length> in millimeters. css_ms the value is a <time> in milliseconds. css_number the value is a simple <number>. css_pc the value is a <length> in picas. css_percentage the value is a <percentage>. css_pt the value is a <length> in points. css_px the value is a <length> in pixels. css_rad the value is an <angle> in radians. css_s the value is a <time> in seconds. return value a float value in the specified unit. exceptions type description domexception an invalid_access_err is raised if the css value doesn't contain a float value or if the float value can't be converted into the specified unit. example var cs ...

CSSPrimitiveValue.primitiveType - Web APIs
thod. css_dimension the value is a <number> with an unknown dimension. the value can be obtained by using the getfloatvalue() method. css_ems the value is a <length> in em units. the value can be obtained by using the getfloatvalue() method. css_exs the value is a <length> in ex units. the value can be obtained by using the getfloatvalue() method. css_grad the value is an <angle> in grads. the value can be obtained by using the getfloatvalue() method. css_hz the value is a <frequency> in hertz. the value can be obtained by using the getfloatvalue method. css_ident the value is an identifier. the value can be obtained by using the getstringvalue() method. css_in the value is a <length> in inches. the value can ...
...using the getfloatvalue() method. css_percentage the value is a <percentage>. the value can be obtained by using the getfloatvalue() method. css_pt the value is a <length> in points. the value can be obtained by using the getfloatvalue() method. css_px the value is a <length> in pixels. the value can be obtained by using the getfloatvalue() method. css_rad the value is an <angle> in radians. the value can be obtained by using the getfloatvalue() method. css_rect the value is a rect() function. the value can be obtained by using the getrectvalue() method. css_rgbcolor the value is an <color>. the value can be obtained by using the getrgbcolorvalue() method. css_s the value is a <time> in seconds. the value can ...

CSSPrimitiveValue.setFloatValue() - Web APIs
valid values are: constant description css_cm the value is a <length> in centimeters. css_deg the value is an <angle> in degrees. css_dimension the value is a <number> with an unknown dimension. css_ems the value is a <length> in em units. css_exs the value is a <length> in ex units. css_grad the value is an <angle> in grads. css_hz the value is a <frequency> in hertz. the value can be obtained by using the getfloatvalue method. css_in the value is a <length> in inches. css_khz the value is a <frequency> in kilohertz. css_mm the value is a <length> in millimeters. css_ms the value is a <time> in millis...
...is a <length> in millimeters. css_ms the value is a <time> in milliseconds. css_number the value is a simple <number>. css_pc the value is a <length> in picas. css_percentage the value is a <percentage>. css_pt the value is a <length> in points. css_px the value is a <length> in pixels. css_rad the value is an <angle> in radians. css_s the value is a <time> in seconds. floatvalue a float representing the new float value. return value void. exceptions type description domexception an invalid_access_err is raised if the css value doesn't contain a float value or if the string value can't be converted into the specified unit...

Using the CSS Painting API - Web APIs
while you can't play with the worklet's script, you can alter the custom property values to change the colors and width of the background image. adding complexity the above examples might not seem very exciting, as you could recreate them in a few different ways with existing css properties, e.g. by positioning some decorative generated content with ::before, or including background: linear-gradient(yellow, yellow) 0 15px / 200px 20px no-repeat; what makes the css painting api so interesting and powerful is that you can create complex images, passing variables, that automatically resize. let's take a look at a more complex paint example. registerpaint('headerhighlight', class { static get inputproperties() { return ['--highcolour']; } static get contextoptions() { return {alpha: tr...
....paintworklet.addmodule('https://mdn.github.io/houdini-examples/csspaint/intro/03partthree/header-highlight.js'); while you can't edit the worklet itself, you can play around with the css and html. maybe try float and clear on the headers? you could try making the background images above without the css paint api. it is doable, but you would have to declare a different, fairly complex linear gradient for each different color you wanted to create. with the css paint api, one worklet can be re-used, with different colors passed in this case. passing parameters with the css paint api, we not only have access to custom properties and regular properties, but we can pass custom arguments to the paint() function as well. we can add these extra arguments when we call the function in the css. ...

Using the CSS Typed Object Model - Web APIs
<button>styled button</button> // get the element const button = document.queryselector( 'button' ); // retrieve all computed styles with computedstylemap() const allcomputedstyles = button.computedstylemap(); // cssmaths...
..., a cssimagevalue is returned. while we used the css background shorthand property, the inherited object.prototype.tostring() method, shows we returned only the image, 'url("https://mdn.mozillademos.org/files/16793/magicwand.png")'. notice that the value returned is the absolute path to the image — this is returned even if the original url() value was relative. had the background image been a gradient or multiple background images, .get('background-image') would have returned a cssstylevalue. the cssimagevalue is returned only if there is a single image, and only if that single image declaration is a url. summary this should get you started with understanding the css typed om. take a look at all the css typed om interfaces to learn more. see also using the css painting api ...

CanvasRenderingContext2D.rotate() - Web APIs
the rotation center point is always the canvas origin. to change the center point, you will need to move the canvas by using the translate() method. examples rotating a shape this example rotates a rectangle by 45°. ...
... the rotation center point is always the canvas origin. to change the center point, you will need to move the canvas by using the translate() method. examples rotating a shape this example rotates a rectangle by 45°. ...

Basic animations - Web APIs
} } .keypress>div { border: dashed 3px #fff; height: 48%; width: 48%; display: flex; align-content: center; justify-content: center; align-self: center; align-items: center; font-size: -webkit-xxx-large; font-weight: 900; color: #fff; transition: .5s; opacity: .1; border-radius: 7px } .keypress { position: fixed; width: 100vw; height: 100vh; top: 0; left: 0; display: flex; flex-wrap: wrap; justify-content: space-around; opacity: 1; user-select: none } .keypress>div:hover { opacity: 1 } .touch { background: #8bc34a } .off { backgr...
...(n.addcolorstop(0, "black"), n.addcolorstop(1, "#8bc34a")) : (n.addcolorstop(0, "#8bc34a"), n.addcolorstop(1, "white")), c.fillstyle = n } else c.fillstyle = "#8bc34a"; c.fillrect(t.x, t.y, this.w, this.h), c.strokestyle = "#e91e63", c.font = "30px serif", c.strokestyle = "#9e9e9e", ...

Compositing example - Web APIs
h(); ctx.fillstyle = "#f00"; ctx.fillrect(0,0,30,30) ctx.fill(); }; var colorsphere = function(element) { var ctx = canvas1.getcontext("2d"); var width = 360; var halfwidth = width / 2; var rotate = (1 / 360) * math.pi * 2; // per degree var offset = 0; // scrollbar offset var oleft = -20; var otop = -20; for (var n = 0; n <= 359; n ++) { var gradient = ctx.createlineargradient(oleft + halfwidth, otop, oleft + halfwidth, otop + halfwidth); var color = color.hsv_rgb({ h: (n + 300) % 360, s: 100, v: 100 }); gradient.addcolorstop(0, "rgba(0,0,0,0)"); gradient.addcolorstop(0.7, "rgba("+color.r+","+color.g+","+color.b+",1)"); gradient.addcolorstop(1, "rgba(255,255,255,1)"); ctx.beginpath(); ctx.mo...
...100 }); gradient.addcolorstop(0, "rgba(0,0,0,0)"); gradient.addcolorstop(0.7, "rgba("+color.r+","+color.g+","+color.b+",1)"); gradient.addcolorstop(1, "rgba(255,255,255,1)"); ctx.beginpath(); ctx.moveto(oleft + halfwidth, otop); ctx.lineto(oleft + halfwidth, otop + halfwidth); ctx.lineto(oleft + halfwidth + 6, otop); ctx.fillstyle = gradient; ctx.fill(); ctx.translate(oleft + halfwidth, otop + halfwidth); ctx.rotate(rotate); ctx.translate(-(oleft + halfwidth), -(otop + halfwidth)); } ctx.beginpath(); ctx.fillstyle = "#00f"; ctx.fillrect(15,15,30,30) ctx.fill(); return ctx.canvas; }; // hsv (1978) = h: hue / s: saturation / v: value color = {}; color.hsv_rgb = function (o) ...

Transformations - Web APIs
ate(10 + j * 50, 10 + i * 50); ctx.fillrect(0, 0, 25, 25); ctx.restore(); } } } <canvas id="canvas" width="150" height="150"></canvas> draw(); screenshotlive sample rotating the second transformation method is rotate(). we use it to rotate the canvas around the current origin. rotate(angle) rotates the canvas clockwise around the current origin by the angle number of radians. the rotation center point is always the canvas origin. to change the center point, we will need to move the canvas by using the translate() method. a rotate example in this example, we'll use the rotate() method to first rotate a rectangle from the canvas origin and then from the center of the rectangle itself with the help of translate(). reminder: angles are in radians, not degrees. ...
...r point is always the canvas origin. to change the center point, we will need to move the canvas by using the translate() method. a rotate example in this example, we'll use the rotate() method to first rotate a rectangle from the canvas origin and then from the center of the rectangle itself with the help of translate(). reminder: angles are in radians, not degrees. to convert, we are using: radians = (math.pi/180)*degrees. function draw() { var ctx = document.getelementbyid('canvas').getcontext('2d'); // left rectangles, rotate from canvas origin ctx.save(); // blue rect ctx.fillstyle = '#0095dd'; ctx.fillrect(30, 30, 100, 100); ctx.rotate((math.pi / 180) * 25); // grey rect ctx.fillstyle = '#4d4e53'; ctx.fillrect(30, 30, 100, 100); ctx.restore(); // right re...

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

Document Object Model (DOM) - Web APIs
svgfespecularlightingelement svgfespotlightelement svgfetileelement svgfeturbulenceelement svgfilterelement svgfilterprimitivestandardattributes svgfontelement svgfontfaceelement svgfontfaceformatelement svgfontfacenameelement svgfontfacesrcelement svgfontfaceurielement svgforeignobjectelement svggelement svggeometryelement svgglyphelement svgglyphrefelement svggradientelement svggraphicselement svghatchelement svghatchpathelement svghkernelement svgimageelement svglineargradientelement svglineelement svgmarkerelement svgmaskelement svgmeshelement svgmeshgradientelement svgmeshpatchelement svgmeshrowelement svgmetadataelement svgmissingglyphelement svgmpathelement svgpathelement svgpatternelement svgpolylineelement svgpo...
...raphicselement svghatchelement svghatchpathelement svghkernelement svgimageelement svglineargradientelement svglineelement svgmarkerelement svgmaskelement svgmeshelement svgmeshgradientelement svgmeshpatchelement svgmeshrowelement svgmetadataelement svgmissingglyphelement svgmpathelement svgpathelement svgpatternelement svgpolylineelement svgpolygonelement svgradialgradientelement svgrectelement svgscriptelement svgsetelement svgsolidcolorelement svgstopelement svgstyleelement svgsvgelement svgswitchelement svgsymbolelement svgtextcontentelement svgtextelement svgtextpathelement svgtextpositioningelement svgtitleelement svgtrefelement svgtspanelement svguseelement svgunknownelement svgviewelement svgvkernelement svg data typ...

Element: DOMActivate event - Web APIs
e to it. ...
....org/2000/svg" version="1.2" baseprofile="tiny" xmlns:ev="http://www.w3.org/2001/xml-events" width="6cm" height="5cm" viewbox="0 0 600 500"> <desc>example: invoke an ecmascript function from a domactivate event</desc> <!-- ecmascript to change the radius --> <script type="application/ecmascript"><![cdata[ function change(evt) { var circle = evt.target; var currentradius = circle.getfloattrait("r"); if (currentradius == 100) circle.setfloattrait("r", currentradius * 2); else circle.setfloattrait("r", currentradius * 0.5); } ]]></script> <!-- act on each domactivate event --> <circle cx="300" cy="225" r="100" fill="red"> <handler type="application/ecmascript" ev:event="domactivate"> change(evt); </handler> </circle> ...

Element.scrollHeight - Web APIs
enatibus et magnis dis parturient montes, nascetur ridiculus mus. cras vulputate libero sed arcu iaculis nec lobortis orci fermentum. ...
..."thank you." : "please, scroll and read the following text.

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