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/2...
...idden 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. ...
...rs 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. ...
...r 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. ...
...imensions; 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

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. ...
...ctive 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. ...
...re-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

<radialGradient> - SVG: Scalable Vector Graphics
the <radialgradient> element lets authors define radial gradients that can be applied to fill or stroke of graphical elements. don't be confused with css radial-gradient() as css gradients can only apply to html elements where svg gradient can only apply to svg elements. 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> <radialgradient id="mygradient"> <stop offset="10%" stop-color="gold" /> <stop offset="95%" stop-color="red" /> </radialgradient> </defs> <!-- using my linear gradient --> <circle cx="5" cy="5" r="4" fill="url('#mygradient')" /> </svg> attributes cx this attribute defines the x coordinate of the end circle of the radial gradient. value t...
...5%" stop-color="red" /> </radialgradient> </defs> <!-- using my linear gradient --> <circle cx="5" cy="5" r="4" fill="url('#mygradient')" /> </svg> attributes cx this attribute defines the x coordinate of the end circle of the radial gradient. value type: <length> ; default value: 50%; animatable: yes cy this attribute defines the y coordinate of the end circle of the radial gradient. value type: <length> ; default value: 50%; animatable: yes fr this attribute defines the radius of the start circle of the radial gradient. the gradient will be drawn such that the 0% <stop> is mapped to the perimeter of the start circle. value type: <length> ; default value: 50%; animatable: yes fx this attribute defines the x coordinate of the start circle of the radial gradient. va...
...ient. the gradient will be drawn such that the 0% <stop> is mapped to the perimeter of the start circle. value type: <length> ; default value: 50%; animatable: yes fx this attribute defines the x coordinate of the start circle of the radial gradient. value type: <length> ; default value: same as cx; animatable: yes fy this attribute defines the y coordinate of the start circle of the radial gradient. value type: <length> ; default value: same as cy; animatable: yes gradientunits this attribute defines the coordinate system for attributes x1, x2, y1, y2 value type: userspaceonuse|objectboundingbox ; default value: objectboundingbox; animatable: yes gradienttransform this attribute provides additional transformation to the gradient coordinate system. value type: <transform-list> ; d...
...And 5 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="#d4d...
...onaco,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 ...
...pe 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 x...
...onaco,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

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

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

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. ...
...anged 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 = docum...
...p. 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. ...
...ith 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. ...

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

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

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 str...
... 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'); // draw background ctx.fillstyle...
... cre...
...And 29 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 ...
...rty 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. ...
...t 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 21 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. i...
...lue 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 16 more matches

SVG documentation index - SVG: Scalable Vector Graphics
to 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...
...bute 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 attribute defines the y-axis coordinate of the foc...
...And 15 more matches

Using IndexedDB - Web APIs
return 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...
...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: 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 12 more matches

-ms-filter - Archive of obsolete content
ipt"> let filterimg = document.queryselector('#filterfrom'); filterimg.addeventlistener('click', dofilter); function dofilter () { filterfrom.filters.item(0).apply(); // 12 is the dissolve filter. ...
...or('#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

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 11 more matches

Enhanced Extension Installation - Archive of obsolete content
d 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

xlink:href - SVG: Scalable Vector Graphics
ri. 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> ...
...glyphref>, 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 10 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. ...
...lues 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 9 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...
...)<circle()> = circle( [ <shape-radius> ]? [ at <position> ]? )<ellipse()> = ellipse( [ <shape-radius>{2} ]? [ at <position> ]? )<polygon()> = polygon( <fill-rule>? , [ <length-percentage> <length-percentage> ]# )<path()> = path( [ <fill-rule>, ]? <string> )<image()> = i...
...And 9 more matches

Bootstrapped extensions - Archive of obsolete content
led 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...
... void install( data, reason ); parameters data a bootstrap data structure. ...
... void install( data, reason ); parameters data a bootstrap data structure. reason one of the reason constants, indicating why the extension is being installed. ...
...And 8 more matches

Strategies for carrying out testing - Learn web development
any, 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. ...
...the 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

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> ...
...0%; height: 1.5em; line-height: 1.5em; color: #aaa; text-align: right; } #controls .category > .group { border: 1px solid #ccc; border-radius: 3px; } /** * color picker */ @media (min-width: 960px) { #controls .colorpicker { width: 420px; } } @media (max-width: 959px) { #controls .colorpicker { width: 210px; } } #colorpicker { width: 100%; margin: 0 auto; } #colorpicker .gradient { width: 200px; height: 200px; margin: 5px; background: url("https://mdn.mozillademos.org/files/5707/picker_mask_200.png"); 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%, r...
...ent(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-color: #f00; float: left; } #colorpicker .hue { width: 200px; height: 30px; margin: 5px; background: url("https://mdn.mozillademos.org/files/5701/hue.png"); background: -moz-linear-gradient(left, #f00 0%, #ff0 16.66%, #0f0 33.33%, #0ff 50%, #00f 66.66%, #f0f 83.33%, #f00 100%); background: -webkit-linear-gradient(left, #f00 0%, #ff0 16.66%, #0f0 33.33%, #0ff 50%, #00f 66.66%, #f0f 83.33%, #f00 100%); float: left; } #colorpicker .alpha { width: 200px; height: 30px; margin: 5px; border: 1px solid #ccc; float: left; background: url("https://mdn.mozillademos.org/fil...
...And 8 more matches

background-image - CSS: Cascading Style Sheets
umstances, 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

border-image-source - CSS: Cascading Style Sheets
teractive 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

cross-fade() - CSS: Cascading Style Sheets
syntax important: the specification and current implementations have different syntaxes. the specification syntax is explained first. ...
...s if the images is missing. ...
...ent><color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color>where <image()> = image( <image-tags>? [ <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 specif...
... for the mask border. ...
...[ <image-src>? , <color>? ]! ...
...And 8 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 8 more matches

NSS tools : certutil
ificate 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

additive-symbols - CSS: Cascading Style Sheets
escriptor 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
iptor 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
criptor 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
cifies 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
bol> 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

Color picker tool - CSS: Cascading Style Sheets
g-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, 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...
...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-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 7 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 7 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 7 more matches

create fancy boxes - Learn web development
lid color always fills the whole surface but images can be scaled and positioned. ...
...y">hi! ...
... 100%; height: 200px; box-sizing: border-box; /* at the bottom of our background stack, let's have a misty grey solid color */ background-color: #e4e4d9; /* we stack linear gradients on top of each other to create our color strip effect. ...
...And 6 more matches

Index
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...
...in 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

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

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 propert...
...try 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. ...
... 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 6 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 p...
...operty 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. ...
...ttribute 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 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.w...
... 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

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...
...e 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 5 more matches

mask - CSS: Cascading Style Sheets
ength-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...
...ngth-percentage> = <length> | <percentage><shape-box> = <box> | margin-boxwhere <image()> = image( <image-tags>? [ <image-src>? , <color>? ]! ...
...ngth> | <percentage><shape-box> = <box> | margin-boxwhere <image()> = image( <image-tags>? [ <image-src>? , <color>? ]! ...
...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.o...
... 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, if...
...eir 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...
...ctional 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

Extras
eight="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%" ...
...<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> <lineargr...
...And 4 more matches

Variable fonts guide - CSS: Cascading Style Sheets
priate 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...
...an 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. ...
...pplied. 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

background-size - CSS: Cascading Style Sheets
idth-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. ...
...insic 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
gth-percentage>? ] && [ center | [ top | bottom ] <length-percentage>? ...
...[ <image-src>? , <color>? ]! ...
...[ <image-src>? , <color>? ]! ...
...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 co...
...neapplies 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...
...mask-source> = <url>where <image()> = image( <image-tags>? [ <image-src>? , <color>? ]! ...
...And 4 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 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. ...
...vgsolidcolorelement 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

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 : htac...
...cation'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...
...h 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. 1951 xulrunner needsupdate, xul, 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. 1952 application update tutorials, xul, xulrunner this article will hopefully explain how to update your xulrunner application using the same method that firefox, thunderbird, songbird, and chatzilla use. 1953 article no summary! 1954 building xulrunner build documentation, developing mozilla, xul, ...
...And 3 more matches

Client-side storage - Learn web development
ll 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...
...t 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

Compositing and clipping - Web APIs
ample, we'll use a circular clipping path to restrict the drawing of a set of random stars to a particular region. ...
...ular 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

-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 the...
...pen. <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

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. ...
...side 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. ...
...t 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

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. ...
...sparent) 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

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. ...
...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. 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...
...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. 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 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
vg 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...
...orted 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

Experimental features in Firefox
ation 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. ...
... 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 browsing mode; security.insecure_connection_text.pbmode.enabled for private browsing mode upgrading mixed display content when enabled, this preference causes firefox to automatically upgrade requests for media content from http to https on secure pages. the intent is to prevent mixed-content conditions in which some content is loaded securely while other content is insecure. if the upgrade fails (because the media's host doesn't support https), the media is not loaded. see bug 1435733 for ...
...And 2 more matches

nsIHttpChannelInternal
nterface 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...
...the 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. ...
...rsion 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

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 2 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 2 more matches

<image> - CSS: Cascading Style Sheets
a selection of images chosed based on resolution defined by the image-set() function. ...
...ingle 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...
...ng 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

HTTP headers - HTTP
urce. 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...
...s 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...
...he 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
values 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...
...icates 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

Applying SVG effects to HTML content - SVG: Scalable Vector Graphics
ences 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. ...
...t 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. ...
...ate 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 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
f 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. ...
...n 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 <url>...
...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
objects inside of a <defs> element promotes understandability of the svg content and is beneficial to the overall accessibility of the document. ...
...of 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

Clipping and masking - SVG: Scalable Vector Graphics
clipping, 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. ...
...r, opacity and such have no effect as long as they don't let parts vanish completely. masking the effect of masking is most impressively presented with a gradient. if you want an element to fade out, you can achieve this effect quite quickly with masks. ...
...d such have no effect as long as they don't let parts vanish completely. masking the effect of masking is most impressively presented with a gradient. if you want an element to fade out, you can achieve this effect quite quickly with masks. ...
...And 2 more matches

Listening for Load and Unload - Archive of obsolete content
ed, 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. ...
...ter 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. ...

Repackaging Firefox - Archive of obsolete content
t 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...
...n 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...
...mend you have your dex support the full set of locales that firefox supports. the reason is that if you create and ship a dex that supports 2 locales (for example), and later decide to ship on a 3rd locale, you will need to re-create the dex to support it. that means that you will need to change the version of the dex, and that will cause any users with the earlier version to get unnecessarily upgraded. on the other hand, if you create a dex which supports all locales, you can only ship on a few, and later expand your set without any upgrade hassles. of course, this strategy only works when your strings either do not need localization, or are programmatically localizable (for example, simply adding the locale to a url, like http://<locale>.example.com/). but it's something to keep in mind w...
... your preferences can use the same values, you do not need to include any properties files at all. note that you must know which preferences are localizable and which ones aren't. see the mdc documentation for more information on them. important extension preferences there is a small set of preferences which will be given to you by mozilla. they help mozilla track your distribution, and plan upgrades accordingly. they allow for upgrades to be delivered by mozilla specifically for your distribution, if need be, and because of that they are the most important preferences you need to set. mozilla will provide you with the values you will need here. note that the app.partner.'name' setting uses the same value for both the name and the value of the preference. all of these settings are non-loc...

bootstrap.js - Extensions
ow contains the required methods in vsdoc format. ...
...ethods 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 } ...

Advanced styling effects - Learn web development
l (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...
... 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...
...et keyword available — putting this at the start of a shadow declaration causes it to become an inner shadow, rather than an outer shadow. let's have a look and see what we mean. ...
...the button has a simple black box shadow set on it by default, plus a couple of ins...

Inheritance in JavaScript - Learn web development
son. 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...
...lass 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(...
...h 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. ...
...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. 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. ...
...tify_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 ...

Using the CSS properties and values API - Web APIs
hen 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. ...
...nimate it! ...
...t with the registered property the transition works, but that it doesn't with the unregistered property! ...
...red: #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 {...

CSS reference - CSS: Cascading Style Sheets
-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...
...tfont-stretchfont-stretch (@font-face)font-stylefont-style (@font-face)font-synthesisfont-variantfont-variant (@font-face)font-variant-alternatesfont-variant-capsfont-variant-east-asianfont-variant-ligaturesfont-variant-numericfont-variant-positionfont-variation-settingsfont-variation-settings (@font-face)font-weightfont-weight (@font-face)format()fr<frequency><frequency-percentage>:fullscreenggapgrad<gradient>grayscale()gridgrid-areagrid-auto-columnsgrid-auto-flowgrid-auto-rowsgrid-columngrid-column-endgrid-column-startgrid-rowgrid-row-endgrid-row-startgrid-templategrid-template-areasgrid-template-columnsgrid-template-rowshhzhanging-punctuationheightheight (@viewport)@historical-forms:hoverhsl()hsla()hue-rotate()hyphensi<ident><image>image()image-orientationimage-renderingimage-set()@importin...
...mage-renderingimage-set()@importin:in-range:indeterminateinheritinitialinline-sizeinsetinset()inset-blockinset-block-endinset-block-startinset-inlineinset-inline-endinset-inline-start<integer>:invalidinvert()isolationjjustify-contentjustify-itemsjustify-selfkkhz@keyframesl:lang:last-child:last-of-typeleader():leftleft@left-bottom<length><length-percentage>letter-spacingline-breakline-heightlinear-gradient():linklist-stylelist-style-imagelist-style-positionlist-style-typelocal()mmarginmargin-blockmargin-block-endmargin-block-startmargin-bottommargin-inlinemargin-inline-endmargin-inline-startmargin-leftmargin-rightmargin-top::markermarks (@page)maskmask-bordermask-border-modemask-border-outsetmask-border-repeatmask-border-slicemask-border-sourcemask-border-widthmask-clipmask-compositemask-imagem...
...-block-endpadding-block-startpadding-bottompadding-inlinepadding-inline-endpadding-inline-startpadding-leftpadding-rightpadding-top@pagepage-break-afterpage-break-beforepage-break-insidepaint()paint-orderpath()pc<percentage>perspectiveperspective()perspective-originplace-contentplace-itemsplace-self::placeholderpointer-eventspolygon()<position>positionprefix (@counter-style)ptpxqqquotesrradradial-gradient()range (@counter-style)<ratio>:read-only:read-writerect()remrepeat()repeating-linear-gradient()repeating-radial-gradient():requiredresize<resolution>revertrgb()rgba():rightright@right-bottom:rootrotaterotate()rotate3d()rotatex()rotatey()rotatez()row-gapsssaturate()scalescale()scale3d()scalex()scaley()scalez():scopescroll-behaviorscroll-marginscroll-margin-blockscroll-margin-block-endscroll-ma...

<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. ...
...terclockwise 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. ...
... 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 clockwise right angle 90deg = 100grad = 0.25turn ≈ 1.5708rad setting a flat angle 180deg = 200grad = 0.5turn ≈ 3.1416rad setting a counterclockwise right angle -90deg = -100grad = -0.25turn ≈ -1.5708rad setting a null angle 0 = 0deg = 0grad = 0turn = 0rad specifications specification status comment css values and units module level 4the definition of '<angle>' in that specification. editor's draft ...

Referrer-Policy - HTTP
controls 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. ...
...olicy (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. ...

Web video codec guide - Web media technologies
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...
...ation 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. ...
...re the ringing effect. ringing is similar in some respects to mosquito noise, except that while the ringing effect is more or less steady and unchanging, mosquito noise shimmers and moves. ringing is another type of artifact that can make it particularly difficult to read text contained in your images. posterizing posterization occurs when the compression results in the loss of color detail in gradients. instead of smooth transitions through the various colors in a region, the image becomes blocky, with blobs of color that approximate the original appearance of the image. note the blockiness of the colors in the plumage of the bald eagle in the photo above (and the snowy owl in the background). the details of the feathers is largely lost due to these posterization artifacts. contouring ...
... background). the details of the feathers is largely lost due to these posterization artifacts. contouring contouring or color banding is a specific form of posterization in which the color blocks form bands or stripes in the image. this occurs when the video is encoded with too coarse a quantization configuration. as a result, the video's contents show a "layered" look, where instead of smooth gradients and transitions, the transitions from color to color are abrupt, causing strips of color to appear. in the example image above, note how the sky has bands of different shades of blue, instead of being a consistent gradient as the sky color changes toward the horizon. this is the contouring effect. mosquito noise mosquito noise is a temporal artifact which presents as noise or edge busyn...

Making PWAs work offline with Service workers - Progressive web apps (PWAs)
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. ...
...does exactly that. first, a variable for storing the cache name is created, and the app shell files are listed in one array. ...
...ng the cache name is created, and the app shell files are listed in one array. ...
...ork. this allows us to respond to every single request with any response we want: prepared by the service worker, taken from cache, modified if needed. that's it! our app is caching its resources on install and serving them with fetch from the cache, so it works even if the user is offline. it also caches new content whenever it is added. updates there is still one point to cover: how do you upgrade a service worker when a new version of the app containing new assets is available? the version number in the cache name is key to this: var cachename = 'js13kpwa-v1'; when this updates to v2, we can then add all of our files (including our new files) to a new cache: contenttocache.push('/pwa-examples/js13kpwa/icons/icon-32.png'); // ... self.addeventlistener('install', (e) => { e.waitunti...

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. ...
...olor 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...
...f the color-interpolation property on the element being animated. note: as a presentation attribute, color-interpolation can be used as a css property. ...
...ibute, 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 occur in ...

color-rendering - SVG: Scalable Vector Graphics
ified by through the linearrgb value for color-interpolation-filters. note: as a presentation attribute, color-rendering can be used as a css property. ...
...attribute, color-rendering can be used as a css property. ...
...<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> html, body, svg { height: 100%; } <svg viewbox="0 0 480 200" xmlns="http://www.w3.org/2000/svg"> <defs> <radialgradient id="gradient" cx="0.5" cy="0.5" r="0.5" fx="0.35" fy="0.35" fr="5%"> <stop offset="0%" stop-color="white"/> <stop offset="100%" stop-color="darkseagreen"/> </radialgradient> </defs> <circle cx="100" cy="100" r="100" fill="url(#gradient)" color-rendering="optimizequality" /> <text x="45" y="50%" color-rendering="optimizequality">quality-optimized</text> <circle cx="10...
..." fr="5%"> <stop offset="0%" stop-color="white"/> <stop offset="100%" stop-color="darkseagreen"/> </radialgradient> </defs> <circle cx="100" cy="100" r="100" fill="url(#gradient)" color-rendering="optimizequality" /> <text x="45" y="50%" color-rendering="optimizequality">quality-optimized</text> <circle cx="100" cy="100" r="100" color-rendering="optimizespeed" fill="url(#gradient)" style="transform: translatex(240px);" /> <text x="290" y="50%" color-rendering="optimizespeed">speed-optimized</text> </svg> usage notes value auto | optimizespeed | optimizequality default value auto animatable yes auto indicates that the user agent shall make appropriate tradeoffs to balance speed and quality, but quality shall be...

<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 th...
...it can be used as a css property. ...
...t 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. ...
...f 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...
...h="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 ...

SVG and CSS - SVG: Scalable Vector Graphics
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)"/>...
... 0,0 -62,10"/> </g> </g> </g> </g> </svg> make a new css file, style8.css. ...
...form="rotate(36)"/> <use xlink:href="#segment" transform="rotate(54)"/> <use xlink:href="#segment" transform="rotate(72)"/> </g> <g id="petals"> <use xlink:href="#quadrant"/> <use xlink:href="#quadrant" transform="rotate(90)"/> <use xlink:href="#quadrant" transform="rotate(180)"/> <use xlink:href="#quadrant" transform="rotate(270)"/> </g> <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"...

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. ...
...the 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...
...on 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...

Extentsions FAQ - Archive of obsolete content
best 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). ...
...label 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 ...

Styling tables - Learn web development
sing 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. ...
...ntrasts 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 ...

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

Example 1 - Learn web development
; /* 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: absolute; z-index : 1; height : 100%; width : 2em; /* 20px */ top : 0; right : 0; padding-top : .1em; -moz-box-sizing...
...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: absolute; z-index : 1; height : 100%; width : 2em; /* 20px */ top : 0; right : 0; padding-top : .1em; -moz-box-sizing...
...* 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: absolute; z-index : 1; height : 100%; width : 2em; /* 20px */ top : 0; right : 0; padding-top : .1em; box-sizing : bo...

Silly story generator - Learn web development
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 stones. concatenate ' stone' onto the end of the result of the overall math.round() call. inside the line that defines the temperature variable, replace 94 ...
... 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. ...

Handling common HTML and CSS problems - Learn web development
s (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 ...
...kground-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...
...port 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,...

Android-specific test suites
android-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...
...s { @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
vidual 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 ...

Notes on TLS - SSL 3.0 Intolerant Servers
vides, 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...
...d 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...
...e 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 . ...

Index
indows 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.
...or 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 ...
...e reference lets the observer know when a batch operation in places is about to start or end. the observer can then pause updates or events until the batch is completed, so that it won't handle the large number of updates that are about to be notified. this is especially useful when updating user interfaces, to avoid flicker or continuous selection changes, which may result in performance degradation (for example, if updating a view for each update). 800 nsinavhistoryresulttreeviewer developing mozilla, extensions, interfaces, interfaces:scriptable, places, xpcom, xpcom api reference, xpcom interface reference this object removes itself from the associated result when the tree is detached; this prevents circular references. it's important to be aware of this—if you...

CSS.registerProperty() - Web APIs
ster 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. ...
...tice that with the registered property the transition works, but that it doesn't with the unregistered property! ...

EXT_shader_texture_lod - Web APIs
s. ...
...sl 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. ...

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) { ... ...
...ange (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. ...
...ed). 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. ...
...t.onupgradeneeded event or idbfactory.deletedatabase) was requested. ...
...ue: 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
ith 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;...
...s 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...
...esult; // 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...
...displaydata() 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...
...function(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) { ... ...
...playdata() 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 = r...
... var db = openrequest.result; if (event.oldversion < 1) { // new database, create "books" object store. db.createobjectstore(...
...equest 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.

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" ) ...
...1 = 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...
...hitespace 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. ...
...h "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 applications and ARIA FAQ - Accessibility
s 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...
...livering 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...

Using multiple backgrounds - CSS: Cascading Style Sheets
al 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. ...
...at, 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 i...
...fic 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. ...

Mozilla CSS extensions - CSS: Cascading Style Sheets
border-style and outline-style -moz-bg-insetobsolete since gecko 1.9 -moz-bg-outsetobsolete since gecko 1.9 -moz-bg-solidobsol...
... border-style and outline-style -moz-bg-insetobsolete since gecko 1.9 -moz-bg-outsetobsolete since gecko 1.9 -moz-bg-solidobsolete since gecko 1.9 <color...
... border-style and outline-style -moz-bg-insetobsolete since gecko 1.9 -moz-bg-outsetobsolete since gecko 1.9 -moz-bg-solidobsolete since gecko 1.9 <color> keywords -moz-active...

border-image - CSS: Cascading Style Sheets
le 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...

color-adjust - CSS: Cascading Style Sheets
ide the behavior, but each user agent is allowed to decide for itself how to handle color-adjust in any given situation. ...
...how 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. ...

<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...
... 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 (lightness)...
...ound 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 ...

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!". ...
...ort 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() ...

filter - CSS: Cascading Style Sheets
<use xlink:href="#myimage"/> </svg> </div> </td> <td><img alt="test_form_4_s.jpg" id="img4" class="internal default" src="/files/3715/test_form_4_s.jpg" style="width: 100%;" /></td> </tr> <tr> <td><img alt="test_form_4 distorded border - original image" id="img11" class="internal default" src="/files/8467/test_form_4_irregular-shape_opacity-gradient.png" style="width: 100%;" /></td> <td><img alt="test_form_4 distorded border - live example" id="img12" class="internal default" src="/files/8467/test_form_4_irregular-shape_opacity-gradient.png" style="width: 100%;" /></td> <td> <div class="svg-container"> <svg xmlns="http://www.w3.org/2000/svg" id="img13" overflow="visible" viewbox="0 0 213 161" color-interpola...
...ult" src="/files/8467/test_form_4_irregular-shape_opacity-gradient.png" style="width: 100%;" /></td> <td> <div class="svg-container"> <svg xmlns="http://www.w3.org/2000/svg" id="img13" overflow="visible" viewbox="0 0 213 161" color-interpolation-filters="srgb"> <defs> <image id="myimage2" xlink:href="/files/8467/test_form_4_irregular-shape_opacity-gradient.png" width="213px" height="161px"/> </defs> <filter id="drop-shadow2" x="-50%" y="-50%" width="200%" height="200%"> <feoffset dx="5" dy="5.5" in="sourcealpha"/> <fegaussianblur stddeviation="2.5"/> <fecomponenttransfer> <fefunca type="table" tablevalues="0 0.8"/> </fecomponenttransfer> ...
...values="0 0.8"/> </fecomponenttransfer> </filter> <use xlink:href="#myimage2" filter="url(#drop-shadow2)"/> <use xlink:href="#myimage2"/> </svg> </div> </td> <td><img alt="test_form_4 distorded border drop shadow - static example" id="img14" class="internal default" src="/files/8469/test_form_4_irregular-shape_opacity-gradient_drop-shadow.png" style="width: 100%;" /></td> </tr> </tbody> </table> html { height:100%; } body { font: 14px/1.286 "lucida grande","lucida sans unicode","dejavu sans",lucida,arial,helvetica,sans-serif; color: rgb(51, 51, 51); height:100%; overflow:hidden; } #img2 { width:100%; height:auto; -moz-filter: drop-shadow(16px 16px 10px black); -webkit-filter: drop-shadow(1...

mix-blend-mode - CSS: Cascading Style Sheets
nd-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...
... <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"></ellipse> <ellipse ...
...uto; 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...

<input type="datetime-local"> - HTML: Hypertext Markup Language
epository. 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...
...ks 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
cket 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. ...
...n extra request/response round trip. proposed standard rfc 6454 the web origin concept proposed standard fetchthe definition of 'cors' in that specification. ...
...d 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. ...
...s 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. ...
...ent 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. ...

Performance fundamentals - Web Performance
wn 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 application configuration screen, or a settings menu "pops up". firefox is highly optimized to transition and a...
... 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...
...ormation 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...
...on 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 ...
...images 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)
th 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...
...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 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. ...
...ce worker needs to cache. ...

requiredFeatures - SVG: Scalable Vector Graphics
ture#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...
...ing, 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...
...text> <!-- 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...

<feComponentTransfer> - SVG: Scalable Vector Graphics
ing 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. ...
...rder:<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. ...
...bow" 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
ix> <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>...
...composite>, <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>...
...ements <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>...

How to convert an overlay extension to restartless - Archive of obsolete content
fferently. 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 ...
...does 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...

Setting up an extension development environment - Archive of obsolete content
ession. 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...
...ached ("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...

New Skin Notes - Archive of obsolete content
s, 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...
...patch 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...

Create Your Own Firefox Background Theme - Archive of obsolete content
the top of the browser window, nestling in behind the toolbars, address bar, search bar and the tab strip. it will be anchored to the top-right corner of the browser window. view a sample theme header here. image requirements dimensions should be 3000px wide × 200px high png or jpg file format image must be no larger than 300 kb in file size tips subtle, soft contrast images and gradients work best; highly detailed images will compete with the browser ui. firefox may reveal more of the lower portion of the image if another toolbar or other ui element is added to the top of the window. the upper right-hand side of the image should have the most important information—as a user increases the width of the browser window, the browser reveals more of the left-hand side of the i...
...ground 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 with...
...and 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...

Browser Detection and Cross Browser Support - Archive of obsolete content
e 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!

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. ...
...ension 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 ** ...

Index - MDN Web Docs Glossary: Definitions of Web-related terms
wser, chrome canary, chrome stable, chromium, glossary, webmechanics, google chrome google chrome is a free web browser developed by google. it's based on the chromium open source project. some key differences are described on the chromium wiki. chrome supports its own layout called blink. note that the ios version of chrome uses that platform's webview, not blink. 178 graceful degradation design, glossary, graceful degradation graceful degradation is a design philosophy that centers around trying to build a modern web site/application that will work in the newest browsers, but falls back to an experience that while not as good still delivers essential content and functionality in older browsers. 179 grid css, css grid, glossary a css grid is def...
...vent handling. 522 lossy compression beginner, composing, glossary, images, jpeg, lossy, web performance, compression lossy compression, or irreversible compression, is a data-compression method that uses inexact approximations and partial-data discarding to represent content. in simpler terms: lossy compression causes data from the initial file to be lost, possibly causing degradation in quality. the process of such compression is irreversible; once lossy compression of the content has been performed, the content cannot be restored to its original state. therefore, content that has undergone lossy compression should generally not be further edited. 523 markup glossary, intro, markup, needscontent a markup language is one that is designed for defining ...

CSS values and units - Learn web development
decide 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 ...
...es 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. ...

Advanced form styling - Learn web development
e a label associated with a form control, clicking the label will activate the control. ...
... meters and progress bars <meter> and <progress> are possibly the worst of the lot. as you saw in the earlier example, we can set them to a desired width relativ...

How to build custom form controls - Learn web development
if the content overflows, we display an ellipsis */ display : inline-block; width : 100%; overflow : hidden; white-space : nowrap; text-overflo...
...ans-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-overflow: ellipsis; vertical-align: top; } we don't need an extr...

Client-Server Overview - Learn web development
on 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...
...ofile 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. ...

Package management basics - Learn web development
odules, 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...
...d 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...

Accessibility/LiveRegionDevGuide
ng 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...
...r 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...

Eclipse CDT
t 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...
...in 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...

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...
...ade 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...
...ces 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. ...

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

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

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

Compositing example - Web APIs
th(); 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) ...

Document Object Model (DOM) - Web APIs
t 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...
...graphicselement 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...

HTMLScriptElement.referrerPolicy - Web APIs
he html referrerpolicy of the <script> element and fetches made by that script, defining which referrer is sent when fetching the resource. syntax refstr = scriptelem.referrerpolicy; scriptelem.referrerpolicy = refstr; value a domstring; one of the following: no-referrer the referer header will be omitted entirely. no referrer information is sent along with requests. no-referrer-when-downgrade (default) this is the user agent's default behavior if no policy is specified. the url is sent as a referrer when the protocol security level stays the same (e.g.http→http, https→https), but isn't sent to a less secure destination (e.g. https→http). origin only send the origin of the document as the referrer in all cases. the document https://example.com/page.html will send the referre...
.... note: an empty string value ("") is both the default value, and a fallback value if referrerpolicy is not supported. if referrerpolicy is not explicitly specified on the <script> element, it will adopt a higher-level referrer policy, i.e. one set on the whole document or domain. if a higher-level policy is not available, the empty string is treated as being equivalent to no-referrer-when-downgrade. examples var scriptelem = document.createelement("script"); scriptelem.src = "/"; scriptelem.referrerpolicy = "unsafe-url"; document.body.appendchild(script); specifications specification status comment referrer policythe definition of 'referrerpolicy attribute' in that specification. candidate recommendation added the referrerpolicy attribute. h...

IDBDatabase: abort event - Web APIs
cancelable no interface event event handler property onabort examples this example opens a database (creating the database if it does not exist), then opens a transaction, adds a listener to the abort event, then aborts the transaction to trigger the event. ...
...le.log('transaction aborted'); }); // open a read/write db transaction, ready for adding the data const transaction = db.transaction(['todolist'], 'readwrite'); // abort the transaction transaction.abort(); }; the same example, but assigning the event handler to the onabort property: // open the database const dbopenrequest = window.indexeddb.open('todolist', 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...

IDBDatabase: close event - Web APIs
ote that it is not fired if the database connection is closed normally using idbdatabase.close(). ...
...eateindex('year', 'year', { unique: false }); }; dbopenrequest.onsuccess = (event) => { const db = dbopenrequest.result; db.addeventlistener('close', () => { console.log('database connection closed'); }); }; the same example, using the onclose property instead of addeventlistener(): // open the database const dbopenrequest = window.indexeddb.open('todolist', 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...

IDBDatabase: error event - Web APIs
ncelable no interface event event handler property onerror examples this example opens a database and tries to add a record, listening for the error event for the add() operation (this will occur if, for example, a record with the given tasktitle already exists): // open the database const dbopenrequest = window.indexeddb.open('todolist', 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...
...transaction, ready for adding the data const transaction = db.transaction(['todolist'], 'readwrite'); const objectstore = transaction.objectstore('todolist'); const objectstorerequest = objectstore.add(newitem); }; the same example, using the onerror property instead of addeventlistener(): // open the database const dbopenrequest = window.indexeddb.open('todolist', 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...

IDBDatabase.onabort - Web APIs
the onabort event handler of the idbdatabase interface handles the abort event, fired when a transaction is aborted and bubbles up to the connection object. note: this feature is available in web workers. syntax idbdatabase.onabort = 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. ...
...s the abort event, fired when a transaction is aborted and bubbles up to the connection object. note: this feature is available in web workers. syntax idbdatabase.onabort = 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. ...

IDBDatabase.onerror - Web APIs
e idbdatabase interface handles the error event, fired when a request returns an error and bubbles up to the connection object. note: consider using idbopendbrequest.onsuccess instead (see idbrequest.onsuccess, where it is inherited from). note: this feature is available in web workers. syntax idbdatabase.onerror = function(event) { ... ...
...sing idbopendbrequest.onsuccess instead (see idbrequest.onsuccess, where it is inherited from). note: this feature is available in web workers. syntax idbdatabase.onerror = 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. ...

IDBDatabase - Web APIs
turns an error and the event bubbles up to the connection object. also available via the onerror property. versionchange fired when a database structure change was requested. also available via the onversionchange property. example in the following code snippet, we open a database asynchronously (idbfactory), handle success and error cases, and create a new object store in the case that an upgrade is needed (idbdatabase). for a complete working example, see our to-do notifications app (view example live.) // let us open our database var dbopenrequest = window.indexeddb.open("todolist", 4); // these two event handlers act on the idbdatabase object, // when the database is opened successfully, or not dbopenrequest.onerror = function(event) { note.innerhtml += '<li>error loading database...
...bopenrequest.result; // run the displaydata() 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 dbopenrequest.onupgradeneeded = function(event) { var db = event.target.result; db.onerror = function(event) { note.innerhtml += '<li>error loading database.</li>'; }; // create an objectstore for this database using // idbdatabase.createobjectstore var objectstore = db.createobjectstore("todolist", { keypath: "tasktitle" }); // define what data items the objectstore will contain objectstore.cr...

IDBOpenDBRequest: blocked event - Web APIs
dler is executed when an open connection to a database is blocking a versionchange transaction on the same database. ...
... // let's try to open the same database with a higher revision version const req2 = indexeddb.open('todolist', 5); // in this case the onblocked handler will be executed req2.addeventlistener('blocked', () => { console.log('request was blocked'); }); }; using the onblocked property: // open the database const dbopenrequest = window.indexeddb.open('todolist', 4); dbopenrequest.onupgradeneeded = (event) => { const db = event.target.result; db.onerror = () => { console.log('error creating database'); }; // 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 }); objectstore.createin...

IDBOpenDBRequest - Web APIs
nttarget. methods no methods, but inherits methods from its parents idbrequest and eventtarget. events listen to these events using addeventlistener() or by assigning an event listener to the oneventname property of this interface. blocked fired when an open connection to a database is blocking a versionchange transaction on the same database. also available via the onblocked property. upgradeneeded fired when an attempt was made to open a database with a version number higher than its current version. also available via the onupgradeneeded property. 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 (vi...
...ata() function to populate the task // listwith 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 })...

IDBRequest: error event - Web APIs
interface event event handler property onerror examples this example opens a database and tries to add a record, listening for the error event for the add() operation (this will occur if, for example, a record with the given tasktitle already exists): // open the database const dbopenrequest = window.indexeddb.open('todolist', 4); dbopenrequest.addeventlistener('upgradeneeded', event => { const db = event.target.result; db.onerror = () => { console.log('error creating database'); }; // 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 }); objectstore.createinde...
...10, month: 'january', year: 2020 }; const objectstorerequest = objectstore.add(newitem); objectstorerequest.addeventlistener('error', () => { console.log(`error adding new item: ${newitem.tasktitle}`); }); }); the same example, using the onerror property instead of addeventlistener(): // open the database const dbopenrequest = window.indexeddb.open('todolist', 4); dbopenrequest.onupgradeneeded = event => { const db = event.target.result; db.onerror = () => { console.log('error creating database'); }; // 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 }); objectstore.createinde...

IDBRequest: success event - Web APIs
the success event is fired when an idbrequest succeeds. ...
... objectstore.createindex('month', 'month', { unique: false }); objectstore.createindex('year', 'year', { unique: false }); }; openrequest.addeventlistener('success', (event) => { console.log('database opened successfully!'); }); the same example, but using the onsuccess event handler property: // open the database const openrequest = window.indexeddb.open('todolist', 4); openrequest.onupgradeneeded = (event) => { const db = event.target.result; db.onerror = () => { console.log('error creating database'); }; // 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 }); objectstore.createin...

IDBTransaction: abort event - Web APIs
ailure to write to disk, for example disk detached, or other os/hardware failure) quota exceeded. examples this example opens a database (creating the database if it does not exist), then opens a transaction, adds a listener to the abort event, then aborts the transaction to trigger the event. ...
...nsaction(['todolist'], 'readwrite'); // add a listener for `abort` transaction.addeventlistener('abort', () => { console.log('transaction was aborted'); }); // abort the transaction transaction.abort(); }; the same example, but assigning the event handler to the onabort property: // open the database const dbopenrequest = window.indexeddb.open('todolist', 4); dbopenrequest.onupgradeneeded = event => { const db = event.target.result; db.onerror = () => { console.log('error creating database'); }; // 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 }); objectstore.createinde...

IDBTransaction: complete event - Web APIs
the complete handler is executed when a transaction successfully completed. ...
....log('transaction was competed'); }); const objectstore = transaction.objectstore('todolist'); const newitem = { tasktitle: 'my task', hours: 10, minutes: 10, day: 10, month: 'january', year: 2019 }; const objectstorerequest = objectstore.add(newitem); }; using the oncomplete property: // open the database const dbopenrequest = window.indexeddb.open('todolist', 4); dbopenrequest.onupgradeneeded = event => { const db = event.target.result; db.onerror = () => { console.log('error creating database'); }; // 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 }); objectstore.createinde...

IDBTransaction: error event - Web APIs
ncelable no interface event event handler property onerror examples this example opens a database and tries to add a record, listening for the error event for the add() operation (this will occur if, for example, a record with the given tasktitle already exists): // open the database const dbopenrequest = window.indexeddb.open('todolist', 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...
...nst objectstore = transaction.objectstore('todolist'); const newitem = { tasktitle: 'my task', hours: 10, minutes: 10, day: 10, month: 'january', year: 2020 }; const objectstorerequest = objectstore.add(newitem); }; the same example, using the onerror property instead of addeventlistener(): // open the database const dbopenrequest = window.indexeddb.open('todolist', 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...

IDBVersionChangeEvent - Web APIs
note: this feature is available in web workers. properties also inherits properties from its parent, method. idbversionchangeevent.oldversion read only returns the old version of the database. idbversionchangeevent.newversion read only returns the new version of the database. deprecated properties idbversionchangeevent.version read only the new version of the database in a versionchange transaction. ...
... the latest specification replaces it with the oldversion and newversion attributes. see the compatibility table to know what browsers support them. methods no specific method, but inherits properties from its parent, method. example in the following code snippet, we make a request to open a database, and include handlers for the success and error cases. upon a version change (after an upgradedneeded event), the success event will implement the idbversionchangeevent interface. for a full working example, see our to-do notifications app (view example live.) var note = document.queryselector("ul"); // in the following line, you should include the prefixes of implementations you want to test. window.indexeddb = window.indexeddb || window.mozindexeddb || window.webkitindexeddb || window...

Service Worker API - Web APIs
esents a container for a list of client objects; the main way to access the active service worker clients at the current origin. extendableevent extends the lifetime of the install and activate events dispatched on the serviceworkerglobalscope, as part of the service worker lifecycle. this ensures that any functional events (like fetchevent) are not dispatched to the serviceworker, until it upgrades database schemas, and deletes outdated cache entries, etc. extendablemessageevent the event object of a message event fired on a service worker (when a channel message is received on the serviceworkerglobalscope from another context) — extends the lifetime of such events. fetchevent the parameter passed into the serviceworkerglobalscope.onfetch handler, fetchevent represents a fetch a...
...the serviceworkerglobalscope of a serviceworker. as a child of extendableevent, it ensures that functional events such as fetchevent are not dispatched during installation. navigationpreloadmanager provides methods for managing the preloading of resources with a service worker. navigator.serviceworker returns a serviceworkercontainer object, which provides access to registration, removal, upgrade, and communication with the serviceworker objects for the associated document. notificationevent the parameter passed into the onnotificationclick handler, the notificationevent interface represents a notification click event that is dispatched on the serviceworkerglobalscope of a serviceworker. serviceworker represents a service worker. multiple browsing contexts (e.g. pages, workers, e...

VideoPlaybackQuality.corruptedVideoFrames - Web APIs
nce the <video> element was last loaded or reloaded. it is up to the user agent to determine whether or not to display a corrupted video frame. if a corrupted frame is dropped, then both corruptedvideoframes and droppedvideoframes are incremented. ...
...s the percentage of frames which have been corrupted, and if the value is greater than 5%, calls a funciton called downgradevideo() that would be implemented to switch to a different video that might tax the network less. var videoelem = document.getelementbyid("my_vid"); var quality = videoelem.getvideoplaybackquality(); if (quality.corruptedvideoframes/quality.totalvideoframes > 0.05) { downgradevideo(videoelem); } specifications specification status comment media playback qualitythe definition of 'videoplaybackquality: corruptedvideoframes' in that specification. editor's draft ...

Writing WebSocket servers - Web APIs
ilding a server, a client still has to start the websocket handshake process by contacting the server and requesting a websocket connection. so, you must know how to interpret the client's request. the client will send a pretty standard http request with headers that looks like this (the http version must be 1.1 or greater, and the method must be get): get /chat http/1.1 host: example.com:8000 upgrade: websocket connection: upgrade sec-websocket-key: dghlihnhbxbszsbub25jzq== sec-websocket-version: 13 the client can solicit extensions and/or subprotocols here; see miscellaneous for details. also, common headers like user-agent, referer, cookie, or authentication headers might be there as well. do whatever you want with those; they don't directly pertain to the websocket. it's also safe to i...
... spec). server handshake response when the server receives the handshake request, it should send back a special response that indicates that the protocol will be changing from http to websocket. that header looks something like the following (remember each header line ends with \r\n and put an extra \r\n after the last one to indicate the end of the header): http/1.1 101 switching protocols upgrade: websocket connection: upgrade sec-websocket-accept: s3pplmbitxaq9kygzzhzrbk+xoo= additionally, the server can decide on extension/subprotocol requests here; see miscellaneous for details. the sec-websocket-accept header is important in that the server must derive it from the sec-websocket-key that the client sent to it. to get it, concatenate the client's sec-websocket-key and the string "25...

Web Video Text Tracks Format (WebVTT) - Web APIs
5.000 --> 00:02:20.000 - ta en kopp varmt te. - det är inte varmt. 2 00:02:20.000 --> 00:02:25.000 - har en kopp te. - det smakar som te. note this last line may not translate well. 3 00:02:25.000 --> 00:02:30.000 - ta en kopp styling webvtt cues you can style webvtt cues by looking for elements which match the ::cue pseudo-element. within site css video::cue { background-image: linear-gradient(to bottom, dimgray, lightgray); color: papayawhip; } video::cue(b) { color: peachpuff; } here, all video elements are styled to use a gray linear gradient as their backgrounds, with a foreground color of "papayawhip". in addition, text boldfaced using the <b> element are colored "peachpuff". the html snippet below actually handles displaying the media itself. <video controls autoplay...
...aying the media itself. <video controls autoplay src="video.webm"> <track default src="track.vtt"> </video> within the webvtt file itself you can also define the style directly in the webvtt file. in this case, you insert your css rules into the file with each rule preceded by the string "style" all by itelf on a line of text, as shown below: webvtt style ::cue { background-image: linear-gradient(to bottom, dimgray, lightgray); color: papayawhip; } /* style blocks cannot use blank lines nor "dash dash greater than" */ note comment blocks can be used between style blocks. style ::cue(b) { color: peachpuff; } 00:00:00.000 --> 00:00:10.000 - hello <b>world</b>. note style blocks cannot appear after the first cue. we can also use identifiers inside webvtt file, which can be used ...

Web APIs
hsum 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...
...fepointlightelement 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...

CSS values and units - CSS: Cascading Style Sheets
nit identifier is not required. otherwise, the unit identifier is required, is case insensitive, and must come immediately after the numeric part of the value, with no space in-between. angle units angle values are represented by the type <angle> and accept the following values: unit name description deg degrees there are 360 degrees in a full circle. grad gradians there are 400 gradians in a full circle. rad radians there are 2π radians in a full circle. turn turns there is 1 turn in a full circle. time units time values are represented by the type <time>. when including a time value, the unit identifier -- the s or ms -- is required. it accepts the following values. unit name descriptio...
...le. adds 4- and 8-digit hex color values, where the last digit(s) represents the alpha value. adds hwb(), device-cmyk(), and color() functions. css color module level 3 recommendation deprecates system-colors. adds svg colors. adds the rgba(), hsl(), and hsla() functions. css images module level 4 working draft adds element(), image(), image-set(), conic-gradient() css images module level 3 candidate recommendation initial definition of image. css level 2 (revision 1) recommendation css level 1 recommendation initial definition. ...

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...
...g or contains an invalid value. if not set, css will use the default value defined for each <type-or-unit>. ...

<blend-mode> - CSS: Cascading Style Sheets
g the layers to which it is applied, a blend mode takes the colors of the foreground and the background, perfoms a calculation on them, and returns a new color value. changes between blend modes are not interpolated. any change occurs immediately. examples blend mode comparison in the following example, we have a <div> with two background images set on it — a firefox logo on top of a linear gradient. below it we have a provided a <select> menu that allows you to change the background-blend-mode applied to the <div>, allowing you to compare the different blend mode effects. html <div></div> <p>choose a blend-mode:</p> <select> <option selected>normal</option> <option>multiply</option> <option>screen</option> <option>overlay</option> <option>darken</option> <option>lighten</o...
...on>soft-light</option> <option>difference</option> <option>exclusion</option> <option>hue</option> <option>saturation</option> <option>color</option> <option>luminosity</option> </select> css div { width: 300px; height: 300px; background: url(https://media.prod.mdn.mozit.cloud/attachments/2020/07/29/17350/3b4892b7e820122ac6dd7678891d4507/firefox.png) no-repeat center, linear-gradient(to bottom, blue, orange); } javascript const selectelem = document.queryselector('select'); const divelem = document.queryselector('div'); selectelem.addeventlistener('change', () => { divelem.style.backgroundblendmode = selectelem.value; }); result specifications specification status comment compositing and blending level 1the definition of '<blend-mode>...

<easing-function> - CSS: Cascading Style Sheets
ores the whole property. syntax cubic-bezier(x1, y1, x2, y2) where: x1, y1, x2, y2 are <number> values representing the abscissas, and ordinates of the p1 and p2 points defining the cubic bézier curve. x1 and x2 must be in the range [0, 1] or the value is invalid. keywords for common cubic-bezier easing functions ease the animation starts slowly, accelerates sharply, and then slows gradually towards the end. this keyword represents the easing function cubic-bezier(0.25, 0.1, 0.25, 1.0). it is similar to ease-in-out, though it accelerates more sharply at the beginning. ease-in the animation starts slowly, and then progressively speeds up until the end, at which point it stops abruptly. this keyword represents the easing function cubic-bezier(0.42, 0.0, 1.0, 1.0). ease-in-out...
...zier(0.1, -0.6, 0.2, 0)</option> <option>cubic-bezier(0, 1.1, 0.8, 4)</option> <option>steps(5, end)</option> <option>steps(3, start)</option> <option>steps(4)</option> </select> </li> </ul> css body > div { position: relative; height: 100px; } div > div { position: absolute; width: 50px; height: 50px; background-color: blue; background-image: radial-gradient(circle at 10px 10px, rgba(25,255,255,0.8),rgba(25,255,255,0.4)); border-radius: 50%; top: 25px; animation: 1.5s infinite alternate; } @keyframes move-right { from { left: 10%; } to { left: 90%; } } li { display: flex; align-items: center; justify-content: center; margin-bottom: 20px; } javascript const selectelem = document.queryselector('select'); const sta...

mask-size - CSS: Cascading Style Sheets
on the image's intrinsic dimensions (width and height) and intrinsic proportion (ratio of width and height). a bitmap image always has intrinsic dimensions and an intrinsic proportion. a vector image may have both intrinsic dimensions and thus it has an intrinsic proportion too. it also may have one or no intrinsic dimensions and in either case it might or might not have an intrinsic proportion. gradients are treated as images with no intrinsic dimensions or intrinsic proportion. the rendered size of the mask image is then computed as follows: if both components of mask-size are specified and are not auto: the mask image renders at the specified size. if the mask-size is contain or cover: the image is rendered by preserving its intrinsic proportion at the largest size contained within ...
...ut with relative lengths converted into absolute lengthsanimation typerepeatable list of simple list of length, percentage, or calc formal syntax <bg-size>#where <bg-size> = [ <length-percentage> | auto ]{1,2} | cover | containwhere <length-percentage> = <length> | <percentage> examples setting mask size as a percentage css #masked { width: 200px; height: 200px; background: blue linear-gradient(red, blue); -webkit-mask-image: url(https://mdn.mozillademos.org/files/12668/mdn.svg); mask-image: url(https://mdn.mozillademos.org/files/12668/mdn.svg); -webkit-mask-size: 50%; mask-size: 50%; /* can be changed in the live sample */ margin-bottom: 10px; } html <div id="masked"> </div> <select id="masksize"> <option value="auto">auto</option> <option value="40% 80%">40% 80%<...

offset-anchor - CSS: Cascading Style Sheets
ntage> = <length> | <percentage> examples setting various offset-anchor values in the following example, we have three <div> elements nested in <section> elements. each <div> is given the same offset-path (a horizontal line 200 pixels long) and animated to move along it. the three are then given different background-color and offset-anchor values. each <section> has been styled with a linear gradient to give it a horizontal line running through its center, to give you a visual display of where the <div>'s offset paths are running. this allows you to see what effect the different offset-anchor values have — the first one, auto, causes the <div>'s center point to move along the path. the other two cause the <div>'s top-right and bottom-left points to move along the path, respectively. h...
...to move along the path, respectively. ...

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...
...: 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. none ...

overscroll-behavior-block - CSS: Cascading Style Sheets
avior-block: contain on the inner box. ...
...color: white; background-image: repeating-linear-gradient(to bottom, rgba(0,0,0,0) 0px, rgba(0,0,0,0) 19px, rgba(0,0,0,0.5) 20px); } main > div { height: 300px; width: 400px; overflow: auto; position: relative; top: 50px; left: 50px; overscroll-behavior-block: contain; } div > div { height: 1500px; width: 100%; background-color: yellow; background-image: repeating-linear-gradient(to bottom, rgba(0,0,0,0) 0px, rgba(0,0,0,0) 19px, rgba(0,0,0,0.5) 20px); } p { padding: 10px; background-color: rgba(255,0,0,0.5); margin: 0; width: 340px; position: relative; top: 10px; left: 10px; } result specifications specification status comment css overscroll behavior module level 1the definition of 'overscroll-behavior-block' in that spe...

overscroll-behavior-inline - CSS: Cascading Style Sheets
ior-inline: contain on the inner box. ...
...color: white; background-image: repeating-linear-gradient(to right, rgba(0,0,0,0) 0px, rgba(0,0,0,0) 19px, rgba(0,0,0,0.5) 20px); } main > div { height: 300px; width: 400px; overflow: auto; position: relative; top: 50px; left: 50px; overscroll-behavior-inline: contain; } div > div { height: 100%; width: 1500px; background-color: yellow; background-image: repeating-linear-gradient(to right, rgba(0,0,0,0) 0px, rgba(0,0,0,0) 19px, rgba(0,0,0,0.5) 20px); } p { padding: 10px; background-color: rgba(255,0,0,0.5); margin: 0; width: 360px; position: relative; top: 10px; left: 10px; } result specifications specification status comment css overscroll behavior module level 1the definition of 'overscroll-behavior-inline' in that spe...

Event reference
tatechange 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...

Mobile Web Development - Developer guides
r any-pointer media query to load different css on a touch-enabled device. optimizing images to help users whose devices have low or expensive bandwidth, you can optimize images by loading images appropriate to the device screen size and resolution. you do this in css by querying for screen height, width, and pixel ratio. you can also make use of css properties to implement visual effects like gradients and shadows without images. mobile apis finally, you can take advantage of the new possibilities offered by mobile devices, such as orientation and geolocation. cross-browser development write cross-browser code to create web sites that will work acceptably across different mobile browsers: try to avoid using browser-specific features, such as vendor-prefixed css properties. if you ...
...ites that will work acceptably across different mobile browsers: try to avoid using browser-specific features, such as vendor-prefixed css properties. if you do need to use these features, check whether other browsers implement their own versions of these features, and target them too. for browsers that don't support these features, provide an acceptable fallback. for example, if you set a gradient as a background for some text using a vendor-prefixed property like -webkit-linear-gradient, it's best to include the other vendor-prefixed versions of the linear-gradient() property. if you don't do that, at least make sure that the default background contrasts with the text: that way, the page will at least be usable in a browser which is not targeted by your linear-gradient rule. see this...

Applying color to HTML elements using CSS - HTML: Hypertext Markup Language
mage courtesy of user sharkd on wikipedia, distributed under the cc by-sa 3.0 license. the value of the hue (h) component of an hsl color is an angle from red around through yellow, green, cyan, blue, and magenta (ending up back at red again at 360°) that identifies what the base color is. the value can be specified in any <angle> unit supported by css, including degrees (deg), radians (rad), gradians (grad), or turns (turn). but this doesn't control how vivid or dull, or how bright or dark the color is. the saturation (s) component of the color specifies what percentage of the final color is comprised of the specified hue. the rest is defined by the grey level provided by the luminance (l) component. think of it like creating the perfect paint color: you start with base paint that's ...
...greyish blue in the top-right looks pretty good. clicking on it, we find that it's #556e8d. that would be used as the accent color, to be used sparingly to make things stand out, such as in headlines or in the highlighting of tabs or other indicators on the site: now we have our base color and our accent. on top of that, we have a few complementary shades of each, just in case we need them for gradients and the like. the colors can then be exported in a number of formats so you can make use of them. once you have these colors, you will probably still need to select appropriate neutral colors. common design practice is to try to find the sweet spot where there's just enough contrast that the text is crisp and readable but not enough contrast to become harsh for the eyes. it's easy to go too...

<input type="date"> - HTML: Hypertext Markup Language
port time and date+time input. 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 input ui generally varies from browser to browser; see browser compatibility for further details. in unsupported browsers, the control degrades gracefully to <input type="text">. among browsers with custom interfaces for selecting dates are chrome and opera, whose data control looks like so: the edge date control looks like: and the firefox date control looks like this: value a domstring representing a date in yyyy-mm-dd format, or empty events change and input supported common attributes a...
...a directly to your server. if your server fails to validate the received data, disaster could strike with data that is badly-formatted, too large, of the wrong type, etc. handling browser support as mentioned, the major problem with date inputs at the time of writing is browser support. as an example, the date picker on firefox for android looks like this: unsupporting browsers gracefully degrade to a text input, but this creates problems in consistency of user interface (the presented controls are different) and data handling. the second problem is the more serious one; with date input supported, the value is normalized to the format yyyy-mm-dd. but with a text input, the browser has no recognition of what format the date should be in, and there are many different formats in which peop...

<input type="month"> - HTML: Hypertext Markup Language
te 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 mobile browser versions — having usable implementations. in browsers that don't support month inputs, the control degrades gracefully to a simple <input type="text">, although there may be automatic validation of the entered text to ensure it's formatted as expected. for those of you using a browser that doesn't support month, the screenshot below shows what it looks like in chrome and opera. clicking the down arrow on the right hand side brings up a date picker that lets you select the month and year. the micr...
...f 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 that many major browsers don't yet implement them all; only chrome/opera and edge support it on desktop, and most modern browsers on mobile. as an example, the month picker on chrome 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 more serious of the two. as mentioned earlier, with a month input the actual value is always normalized to the format yyyy-mm. on the other hand, in its default configuration, a text input has no idea what format the da...

<input type="time"> - HTML: Hypertext Markup Language
<input> elements of type time create input fields designed to let the user easily enter a time (hours and minutes, and optionally seconds). the control's user interface will vary from browser to browser. support is good in modern browsers, with safari being the sole major browser not yet implementing it; in safari, and any other browsers that don't support <time>, it degrades gracefully to <input type="text">. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. appearance chrome and opera in chrome/opera the time control is simple, with slots to enter hours and minutes in 12 or 24-hour format depending on operating s...
...ing browser support as mentioned above, safari and a few other, less common, browsers don't yet support time inputs natively. in general, otherwise, support is good — especially on mobile platforms, which tend to have very nice user interfaces for specifying a time value. for example, the time picker on chrome for android looks like this: browsers that don't support time inputs 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 more serious; as mentioned previously, time inputs' values are always normalized to the format hh:mm or hh:mm:ss. with a text input, on the other hand, by default the browser has no idea of what format the time should b...

<input type="week"> - HTML: Hypertext Markup Language
d 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 control's user interface varies from browser to browser; cross-browser support is currently a bit limited, with only chrome/opera and microsoft edge supporting it at this time. in non-supporting browsers, the control degrades gracefully to function identically to <input type="text">. in chrome/opera the week control provides slots to fill in week and year values, a pop-up calendar interface to select them more visually, and an "x" button to clear the control's value. the edge week control is somewhat more elaborate, opening up week and year pickers with sliding reels. value a domstring representin...
...wser support: safari and firefox don't support it on desktop, and old versions of ie don't support it. mobile platforms such as android and ios make really good use of such input types, providing specialist ui controls that make it really easy to select values in a touchscreen environment. for example, the week picker on chrome 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 more serious. as mentioned earlier, with a week input the actual value is always normalized to the format yyyy-www. when the browser falls back to a generic text input, there's nothing to guide the user toward correctly...

<script>: The Script element - HTML: Hypertext Markup Language
nt-security-policy. the server must generate a unique nonce value each time it transmits a policy. it is critical to provide a nonce that cannot be guessed as bypassing a resource's policy is otherwise trivial. referrerpolicy indicates which referrer to send when fetching the script, or resources fetched by the script: no-referrer: the referer header will not be sent. no-referrer-when-downgrade (default): the referer header will not be sent to origins without tls (https). origin: the sent referrer will be limited to the origin of the referring page: its scheme, host, and port. origin-when-cross-origin: the referrer sent to other origins will be limited to the scheme, the host, and the port. navigations on the same origin will still include the path. same-origin: a referrer will b...
... note: an empty string value ("") is both the default value, and a fallback value if referrerpolicy is not supported. if referrerpolicy is not explicitly specified on the <script> element, it will adopt a higher-level referrer policy, i.e. one set on the whole document or domain. if a higher-level policy is not available, the empty string is treated as being equivalent to no-referrer-when-downgrade. src this attribute specifies the uri of an external script; this can be used as an alternative to embedding a script directly within a document. type this attribute indicates the type of script represented. the value of this attribute will be in one of the following categories: omitted or a javascript mime type: this indicates the script is javascript. the html5 specification...

<textarea> - HTML: Hypertext Markup Language
12firefox full support yesnotes full support yesnotes notes before firefox 6, when a <textarea> was focused, the insertion point was placed at the end of the text by default. ...
... yesfirefox android full support yesnotes full support yesnotes notes before firefox 6, when a <textarea> was focused, the insertion point was placed at the end of the text by default. ...

Evolution of HTTP - HTTP
vers are interoperable. restful apis became very common in the 2010s. since 2005, the set of apis available to web pages greatly increased and several of these apis created extensions, mostly new specific http headers, to the http protocol for specific purposes: server-sent events, where the server can push occasional messages to the browser. websocket, a new protocol that can be set up by upgrading an existing http connection. relaxing the security-model of the web http is independent of the security model of the web, the same-origin policy. in fact, the current web security model has been developed after the creation of http! over the years, it has proved useful to be able to be more lenient, by allowing under certain constraints to lift some of the restriction of this policy. how mu...
...lifted is transmitted by the server to the client using a new bunch of http headers. these are defined in specifications like cross-origin resource sharing (cors) or the content security policy (csp). in addition to these large extensions, numerous other headers have been added, sometimes experimentally only. notable headers are do not track (dnt) header to control privacy, x-frame-options, or upgrade-insecure-requests but many more exist. http/2 – a protocol for greater performance over the years, web pages have become much more complex, even becoming applications in their own right. the amount of visual media displayed, the volume and size of scripts adding interactivity, has also increased: much more data is transmitted over significantly more http requests. http/1.1 connections need ...

Connection management in HTTP/1.x - HTTP
end. the model used in connections between a client and its first proxy may differ from the model between a proxy and the destination server (or any intermediate proxies). the http headers involved in defining the connection model, like connection and keep-alive, are hop-by-hop headers with their values able to be changed by intermediary nodes. a related topic is the concept of http connection upgrades, wherein an http/1.1 connection is upgraded to a different protocol, such as tls/1.0, websocket, or even http/2 in cleartext. this protocol upgrade mechanism is documented in more detail elsewhere. short-lived connections the original model of http, and the default one in http/1.0, is short-lived connections. each http request is completed on its own connection; this means a tcp handshake hap...
...connections. each http request is completed on its own connection; this means a tcp handshake happens before each http request, and these are serialized. the tcp handshake itself is time-consuming, but a tcp connection adapts to its load, becoming more efficient with more sustained (or warm) connections. short-lived connections do not make use of this efficiency feature of tcp, and performance degrades from optimum by persisting to transmit over a new, cold connection. this model is the default model used in http/1.0 (if there is no connection header, or if its value is set to close). in http/1.1, this model is only used when the connection header is sent with a value of close. unless dealing with a very old system, which doesn't support a persistent connection, there is no compelling reas...

Content-Security-Policy - HTTP
icy header instead. require-sri-for requires the use of sri for scripts or styles on the page. require-trusted-types-for enforces trusted types at the dom xss injection sinks. trusted-types used to specify an allow-list of trusted types policies. trusted types allows applications to lock down dom xss injection sinks to only accept non-spoofable, typed values in place of strings. upgrade-insecure-requests 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. csp in workers workers are in general not governed by the content security policy of the document (or...
...tion status comment content security policy level 3 working draft adds manifest-src, navigate-to, report-to, strict-dynamic, worker-src. undeprecates frame-src. deprecates report-uri in favor if report-to. mixed content candidate recommendation adds block-all-mixed-content. subresource integrity recommendation adds require-sri-for. upgrade insecure requests candidate recommendation adds upgrade-insecure-requests. content security policy level 2 recommendation adds base-uri, child-src, form-action, frame-ancestors, plugin-types, referrer, and report-uri. deprecates frame-src. content security policy 1.0 obsolete defines connect-src, default-src, font-src, frame-src, img-src, media-src, object-src...

Index - HTTP
javascript. this includes not only urls loaded directly into <script> elements, but also things like inline script event handlers (onclick) and xslt stylesheets which can trigger script execution. 48 csp: style-src csp, directive, http, reference, security the http content-security-policy (csp) style-src directive specifies valid sources for stylesheets. 49 csp: upgrade-insecure-requests csp, directive, http, reference, security 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 ...
...at the 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. 108 transfer-encoding http, reference, header the transfer-encoding header specifies the form of encoding used to safely transfer the entity to the user. 109 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. 110 user-agent http, reference, header the user-agent request header contains...

HTTP response status codes - HTTP
if you receive a response that is not in this list, it is a non-standard response, possibly custom to the server's software. information responses 100 continue this interim response indicates that everything so far is ok and that the client should continue the request, or ignore the response if the request is already finished. 101 switching protocol this code is sent in response to an upgrade request header from the client, and indicates the protocol the server is switching to. 102 processing (webdav) this code indicates that the server has received and is processing the request, but no response is available yet. 103 early hints this status code is primarily intended to be used with the link header, letting the user agent start preloading resources while the server prepares a res...
...st uri. 422 unprocessable entity (webdav) the request was well-formed but was unable to be followed due to semantic errors. 423 locked (webdav) the resource that is being accessed is locked. 424 failed dependency (webdav) the request failed due to failure of a previous request. 425 too early indicates that the server is unwilling to risk processing a request that might be replayed. 426 upgrade required 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 in a 426 response to indicate the required protocol(s). 428 precondition required the origin server requires the request to be conditional. this response is intended to prevent the 'lost update' proble...

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 v...
...'; 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...

Populating the page: how browsers work - Web Performance
rst chunk of content is usually 14kb of data. in our example above, the request is definitely less than 14kb, but the linked resources aren't requested until the browser encounters the links during parsing, described below. tcp slow start / 14kb rule the first response packet will be 14kb. this is part of tcp slow start, an algorithm which balances the speed of a network connection. slow start gradually increases the amount of data transmitted until the network's maximum bandwidth can be determined. in tcp slow start, after receipt of the initial packet, the server doubles the size of the next packet to around 28kb. subsequent packets increase in size until a predetermined threshold is reached, or congestion is experienced. if you’ve ever heard of the 14kb rule for initial page load, ...
...of the next packet to around 28kb. subsequent packets increase in size until a predetermined threshold is reached, or congestion is experienced. if you’ve ever heard of the 14kb rule for initial page load, tcp slow start is the reason why the initial response is 14kb, and why web performance optimization calls for focusing optimizations with this initial 14kb response in mind. tcp slow start gradually builds up transmission speeds appropriate for the network's capabilities to avoid congestion. congestion control as the server sends data in tcp packets, the user's client confirms delivery by returning acknowledgements, or acks. the connection has a limited capacity depending on hardware and network conditions. if the server sends too many packets too quickly, they will be dropped. meanin...

SVG Presentation Attributes - SVG: Scalable Vector Graphics
rmine 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...
...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 given gradient stop. value: <opacity-value>|inherit; animatable: yes stroke defines the color used to paint the outline of the shape. value: <paint>; animatable: yes stroke-dasharray defines the pattern of dashes and gaps used to paint the outline of the shape. value: none|<da...

fill - SVG: Scalable Vector Graphics
as a presentation attribute, it can be applied to any element but it only has an effect on the following eleven elements: <altglyph>, <circle>, <ellipse>, <path>, <polygon>, <polyline>, <rect>, <text>, <textpath>, <tref>, and <tspan>. for animation five elements are using this attribute: <animate>, <animatecolor>, <animatemotion>, <animatetransform>, and <set>. ...
...gon>, <polyline>, <rect>, <text>, <textpath>, <tref>, and <tspan>. for animation five elements are using this attribute: <animate>, <animatecolor>, <animatemotion>, <animatetransform>, and <set>. html,body,svg { height:100% } <svg viewbox="0 0 300 100" xmlns="http://www.w3.org/2000/svg"> <!-- simple color fill --> <circle cx="50" cy="50" r="40" fill="pink" /> <!-- fill circle with a gradient --> <defs> <radialgradient id="mygradient"> <stop offset="0%" stop-color="pink" /> <stop offset="100%" stop-color="black" /> </radialgradient> </defs> <circle cx="150" cy="50" r="40" fill="url(#mygradient)" /> <!-- keeping the final state of an animated circle which is a circle with a radius of 40. --> <circle cx="250" cy="50" r="20"> <animate attr...

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

paint-order - SVG: Scalable Vector Graphics
ke || markers ] the order of these three keywords indicates the order in which the painting happens, from left to right. if any of the three painting components is omitted, they will be painted in their default order after the specified components. for example, using stroke is equivalent to stroke fill markers. ...
...ny of the three painting components is omitted, they will be painted in their default order after the specified components. for example, using stroke is equivalent to stroke fill markers. ...

stroke - SVG: Scalable Vector Graphics
the stroke attribute is a presentation attribute defining the color (or any svg paint servers like gradients or patterns) used to paint the outline of the shape; note: as a presentation attribute stroke can be used as a css property. ...
... has effect only on the following twelve elements: <altglyph>, <circle>, <ellipse>, <line>, <path>, <polygon>, <polyline>, <rect>, <text>, <textpath>, <tref>, and <tspan> html,body,svg { height:100% } <svg viewbox="0 0 20 10" xmlns="http://www.w3.org/2000/svg"> <!-- simple color stroke --> <circle cx="5" cy="5" r="4" fill="none" stroke="green" /> <!-- stroke a circle with a gradient --> <defs> <lineargradient id="mygradient"> <stop offset="0%" stop-color="green" /> <stop offset="100%" stop-color="white" /> </lineargradient> </defs> <circle cx="15" cy="5" r="4" fill="none" stroke="url(#mygradient)" /> </svg> usage notes value <paint> default value none animatable yes specifications ...

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)the def...

xlink:title - SVG: Scalable Vector Graphics
nt help text that appears when a user lets a mouse pointer hover over a starting resource. note: new content should use a <title> child element rather than a xlink:title attribute. these 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> usage context value <anything> default value none animatable no <anything> this value specifies the title used to describe the meaning of the link or resource. specifications specification status comment scalable vector graphics ...
...e none animatable no <anything> this value specifies the title used to describe the meaning of the link or resource. specifications specification status comment scalable vector graphics (svg) 2the definition of 'seed' in that specification. candidate recommendation deprecated the attribute and made it only apply to <a>, <image>, <lineargradient>, <pattern>, <radialgradient>, <script>, <textpath>, and <use> scalable vector graphics (svg) 1.1 (second edition)the definition of 'seed' in that specification. recommendation initial definition ...

<a> - SVG: Scalable Vector Graphics
ink is followed, post requests with the body ping will be sent by the browser (in the background). typically used for tracking. for a more widely-supported feature addressing the same use cases, see navigator.sendbeacon(). value type: <list-of-urls> ; default value: none; animatable: no referrerpolicy which referrer to send when fetching the url. value type: no-referrer|no-referrer-when-downgrade|same-origin|origin|strict-origin|origin-when-cross-origin|strict-origin-when-cross-origin|unsafe-url ; default value: none; animatable: no rel the relationship of the target object to the link object. value type: <list-of-link-types> ; default value: none; animatable: yes target where to display the linked url. value type: _self|_parent|_top|_blank|<name> ; default value: _self; animatab...
... candidate recommendation replaced xlink...

2015 MDN Fellowship Program - Archive of obsolete content
k. github: chrisdavidmills twitter: @chrisdavidmills why increase the reach and impact of your expertise grow your skills beyond coding and managing to educating and communicating build something used by hundreds of thousands (or more) developers worldwide directly impact and grow the value of the open web when application deadline: april 1, 2015 orientation: early june (dates tbd) graduation: august 11-12, 2015 where orientation: a mozilla location (tbd). core program: conducted at your normal workspace. the fine print mozilla will provide coaching, direction and training on teaching best practices. subject to mozilla’s travel reimbursement policies, mozilla will cover fellows travel, room, per diem food costs and visa costs up to $3,000 to attend the orientation. fellow...

indexed-db - Archive of obsolete content
ase. the add-on implements helper functions open(), additem() and getitems() to open the database, add a new item to the database, and get all items in the database. ...

self - Archive of obsolete content
his property contains the add-on's short name. it comes from the name property in the main package's package.json file. version this property contains the add-on's version string. it comes from the version property set in the package.json file in the main package. loadreason this property contains of the following strings describing the reason your add-on was loaded: install enable startup upgrade downgrade isprivatebrowsingsupported this property indicates whether or not the add-on supports private browsing. it comes from the private-browsing key in the add-on's package.json file. data the data object is used to access data that was bundled with the add-on. this data lives in the add-on's data/ directory, immediately below the package.json file. all files in this directory will be c...

system/unload - Archive of obsolete content
tor method. name : string optional name of the destructor method. default is unload. when(callback) registers a function to be called when the module is unloaded. parameters callback : function a function that will be called when the module is unloaded. it is called with a single argument, one of the following strings describing the reason for unload: "uninstall", "disable", "shutdown", "upgrade", or "downgrade". if a reason could not be determined, undefined will be passed instead. note that if an add-on is unloaded with reason "disable", it will not be notified about "uninstall" while it is disabled. see bug 571049. ...

cfx to jpm - Archive of obsolete content
json contains an id field, and its value does not contain "@", then you must append "@jetpack" to it when switching to jpm. if you do this, the add-on's id will be the same as it was when you were using cfx. entry point the add-on's entry point is the file that's executed when the add-on needs to initialize itself: for example, when firefox starts, or when the add-on's installed, enabled, or upgraded. with cfx, this defaults to "lib/main.js", although it can be set to a different file using the main field in package.json. in jpm, the entry point defaults to "index.js". so when switching over to jpm: either rename your "main.js" to "index.js" and move it from "lib" to the top level or add a main field to package.json with the value "lib/main.js". loading modules the jpm tool uses the...

Canvas code snippets - Archive of obsolete content
draticcurveto', 'rect', 'restore', 'rotate', 'save', 'scale', 'settransform', 'stroke', 'strokerect', 'stroketext', 'transform', 'translate']; var gettermethods = ['createpattern', 'drawfocusring', 'ispointinpath', 'measuretext', // drawfocusring not currently supported // the following might instead be wrapped to be able to chain their child objects 'createimagedata', 'createlineargradient', 'createradialgradient', 'getimagedata', 'putimagedata' ]; var props = ['canvas', 'fillstyle', 'font', 'globalalpha', 'globalcompositeoperation', 'linecap', 'linejoin', 'linewidth', 'miterlimit', 'shadowoffsetx', 'shadowoffsety', 'shadowblur', 'shadowcolor', 'strokestyle', 'textalign', 'textbaseline']; for (let m of methods) { let method = m; canvas2dcontext.proto...

Deploying a Plugin as an Extension - Archive of obsolete content
most people have chosen to use an install.js script to install a plugin. when this method is used, you can choose to either place the plugin into the plugins directory, or, on windows, place it into your own directory and modify the windows registry to let firefox know where to find the plugin. the downside to this method is that once the plugin is installed, it might be difficult for users to upgrade, uninstall, or disable the plugin. with firefox 1.5, you can use the built-in extension mechanism to make a plugin available to your users. this allows the plugin to be treated like other firefox extensions; it can be upgraded, disabled, or uninstalled using the firefox user interface. in this article, we will create an extension for the rhapsody player engine. normally, this plugin is installed...

Migrating raw components to add-ons - Archive of obsolete content
cation'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. the firefox extension mechanism allows you to do everything that you could do through direct component drops, but also gives you and your users extra flexibility and more sophisticated versioning support. as we roll this new behavior out, this document will be updated with additional information addressing scenarios we see developers encountering. simple migration if...

Chapter 5: Let's build a Firefox extension - Archive of obsolete content
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. 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...

Performance best practices in extensions - Archive of obsolete content
x will appear to the user. if there is anything that can be done even a fraction of a second later, you can use an nsitimer or the window.settimeout() method to schedule that work for later. even a short delay can have a big impact. general performance tips avoid creating memory leaks memory leaks require the garbage collector and the cycle collector to work harder, which can significantly degrade performance. zombie compartments are a particular kind of memory leak that you can detect with minimal effort. see the zombie compartments page, especially the proactive checking of add-ons section. see common causes of memory leaks in extensions for ways to avoid zombie compartments and other kinds of leaks. as well as looking for these specific kinds of leaks, it's worth exercising your ex...

Promises - Archive of obsolete content
; sqlite first, it’s important to note that sqlite should be avoided in favor of simpler solutions, such as flat json files, under most circumstances. the io, memory, and cpu overhead added by sqlite is substantial, and in most cases outweighs the cost of dealing with flat files directly. for use cases which are not easily served by other options, or for legacy code which cannot easily be upgraded to non-relational models, the sqlite.jsm module provides a clean, promise-based interface to sqlite databases. representative example usage components.utils.import("resource://gre/modules/sqlite.jsm"); task.spawn(function* () { // open the connection. let db = yield sqlite.openconnection({ path: database_path }); try { // start a transaction to insert the data. y...

MCD, Mission Control Desktop, AKA AutoConfig - Archive of obsolete content
b008-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...

Mac OS X Build Prerequisites/fink - Archive of obsolete content
in terms of available packages) as macports, so it is strongly suggested that you use macports instead of fink. you may download the most recent version of fink that is compatible with your operating system release. fink installs in /sw by default. the installer should configure the fink environment for you, making it available in any new terminal window. if you perform a major operating system upgrade on your computer, such as an upgrade from tiger to leopard, you should remove the /sw directory and re-install fink and the packages below. libidl, glib using fink. libidl is included in the orbit installation. $ sudo apt-get update $ sudo apt-get install orbit orbit-dev glib autoconf-2.13 using fink. autoconf is installed at /sw/bin/autoconf. do not install the autoconf2.5 or autoconf2.54 pa...

Mozilla Application Framework in Detail - Archive of obsolete content
the technology that makes this possible, xpinstall, allows application developers to write javascript installations that manage special cross-platform installation archives (called xpis, or "zippies"), in which packages such as new skins for the browser, patches, browser extensions, new gecko-based applications, and third party standalone applications are stored. xpi...

Frequently Asked Questions - Archive of obsolete content
and give us constructive feedback. who's currently working on what? other than reviewing patches and fixing the occassional bug, alex is currently taking a break from active svg development to concentrate on 'real work' and cool stuff like xtf and jssh. tim is working on implementing <filter> and working on items that need to be done before turning on svg by default. after recently implementing gradients, scooter is working on fixing some issues that remain outstanding and fixing <switch>. jonathan is working on various bugs, especially those that need to be fixed before svg can be enabled in the official builds. david continues to create svg enabled nightlies and answer build related questions as he has done for some time. finally, occasional fixes are provided by other mozilla hackers. ho...

The new nsString class implementation (1999) - Archive of obsolete content
rbool aignorecase); }; nsstring the nsstring class is still with us as a subclass (wrapper) of nsstrimpl. by default, nsstrings use a 2-byte ucs2 character storage model. the nsstring class is very lightweight since it gets its functionality from the nsstrimpl static library. in addition to the nsstrimpl api shown above, nsstring, nsautostring and nscstring all offer additional api's (that all degrade to those found in nsstrimpl) for construction, searching and comparison. also note that the new nsstring interface mimics fully the interface in the existing nsstring class found in mozilla/base/src/nsstring.h. nsautostring we still offer an nsautostring that provides its own stack based buffer. this very useful class allows programmers to take advantage of the nsstring/nsstrimpl implementation,...

Venkman Introduction - Archive of obsolete content
ment. starting the debugger the javascript debugger is automatically pre-installed in mozilla 1.x but must be installed separately in firefox and other gecko-based products, such as thunderbird and netscape 7.x. fortunately, the xpinstall technology makes it possible to install new application modules in firefox by just clicking a hyperlink. if you don't already have venkman or would like to upgrade, you can easily get the latest version from firefox add-ons. the installation process is two steps. first, from within the browser you want to host the debugger application, visit the firefox add-ons page and click on the "install" link for the most recent version. when the download is complete, restart your browser (some windows users may also need to restart their computer as well). you can th...

XUL Events - Archive of obsolete content
s. 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 ...

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

Custom toolbar button - Archive of obsolete content
o exist, but the diagram does not show them.) 1. go to the profile directory that you use for the application, then go to the extensions directory there. note: for information about how to find the profile directory, see: profile folder explanation: the profile directory contains information specific to a user, keeping it separate from the application. if the application is reinstalled or upgraded, information in the profile is not affected. 2. in the extensions directory, create a new directory with the following name. copy the name from here and paste it, to avoid typing errors: custom-toolbar-button@example.com perform the following steps in this new directory, creating two files and a directory there. explanation: the name is a unique identifier for the extension. there is m...

The Implementation of the Application Object Model - Archive of obsolete content
d 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...

XULRunner 1.8.0.4 Release Notes - Archive of obsolete content
it provides facilities for launching standalone xul applications and embedding apis which can be used to render web pages within native and java applications. as of december 2008,xulrunner 1.9.0.4 is available in the "gecko 1.9.0" branch upon which firefox 3 is based. system requirements before installing, make sure your computer meets the system requirements. the system requirements for xulrunner are the same as the system requirements for firefox. ...

XULRunner 1.9 Release Notes - Archive of obsolete content
it provides facilities for launching standalone xul applications and embedding apis which can be used to render web pages within native and java applications. xulrunner 1.9 is built from the same source code snapshot as firefox 3. current version the current version of xulrunner is 1.9.0.17, matching firefox 3.0.17 detailed release notes can be found here. system requirements before installing, make sure your computer meets the system requirements. ...

Application Update - Archive of obsolete content
t // download (in seconds) default=30 minutes pref("app.update.nagtimer.restart", 1800); // interval: when all registered timers should be checked (in milliseconds) // default=5 seconds pref("app.update.timer", 600000); // whether or not we show a dialog box informing the user that the update was // successfully applied. this is off in firefox by default since we show a // upgrade start page instead! other apps may wish to show this ui, and supply // a whatsnewurl field in their brand.properties that contains a link to a page // which tells users what's new in this new update. pref("app.update.showinstalledui", false); // 0 = suppress prompting for incompatibilities if there are updates available // to newer versions of installed addons that resolve them. // 1 = supp...

What XULRunner Provides - Archive of obsolete content
see the wikimo:xul:installation story. extension manager file picker (uses native os filepicker as appropriate) find toolbar helper app dialog/ui security ui (maintenance of ssl keychains, etc) embedding apis the following embedding apis are provided by xulrunner: cross-platform embedding (xre_initembedding) javaxpcom embedding gtkmozembed (linux only) act...

XULRunner - Archive of obsolete content
xulrunner also provides libxul, a solution which allows the embedding of mozilla technologies in other projects and products. releases until version 41, xulrunner could be downloaded from ftp.mozilla.org. ...

Archived Mozilla and build documentation - Archive of obsolete content
le 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. ...

Mozilla.dev.apps.firefox-2006-09-29 - Archive of obsolete content
binding tab bar to new theme discussion about how to bind a new theme to a tab bar without losing its original binding. the distributor university students working on cache distribution project - looking for help for how to tap the http requests.

2006-09-29 - Archive of obsolete content
binding tab bar to new theme discussion about how to bind a new theme to a tab bar without losing its original binding. the distributor university students working on cache distribution project - looking for help for how to tap the http requests.

2006-10-20 - Archive of obsolete content
l reed previous post: boris zbarsky answered j. paul reed's question that was posted in his previous reply. j. paul reed had asked "why gtk1 was still being built". boris zbarsky's said: the reason why gtk1 builds are still being performed is because: when requests are made to change build boxes to newer versions the people responsible for making the change reply with "that would require an os upgrade". on october 20th j. paul reed responded to boris zbarsky's post: j. paul reed restates his overall goal that are "getting us to not rely on hardware that you have to have in a certain position for it to boot" to use standard known configuration for every nightly build that is produced. he also points out that there is a wiki page where the standard reference platform for linux has been d...

2006-10-27 - Archive of obsolete content
. on the same day paul reed replied to cédric's posting by stating that they would like to close the directory before major releases but that unfortunately it wasn't that easy to do because the files must be readable, so mirrors can get the bits to serve them on the release day. paul suggested that the best way to deal with this would be to ask people to wait, and let them know that they're degrading their user experience. urk responded to the posting on the same day by mentioning that they should discuss this with the fedora project and see what their solution to the problem is. urk stated that currently fedora has their release 6 directory locked out with access forbidden via web and ftp while the mirrors are mirroring for the release tuesday. meetings there were no meetings this w...

2006-12-08 - Archive of obsolete content
ber 8, 2006 announcements mozilla sponsored server for l10n the server for mozilla sponsored server for l10n should be up and running soon. seamonkey 1.1b es-es language and region packs language and region packs for seamonkey 1.1b is ready for downloading. new strings in thunderbird new strings in thunderbird new bugzilla-staging.mozilla.org a staging server for a new bugzilla upgrade. discussions none for this week. meetings none for this week. authors paul yanchun gu (gpaul) aditya nanda kuswanto(vipers101) ...

2006-10-20 - Archive of obsolete content
firefox 2 release candidate 3 is now available for download ff2 rc3 available for download. completed rc3 testing key testing activities for ff2 rc3 are done. discussions sparky and comet going away on friday preed wants to get rid of sparky and comet (both older desktop class linux boxes). robert kaiser gave some background on the boxes. decommissioning sparky on friday preed wants to get rid of sparky (a linux build box) and wants to know if there are reasons wy not to do it. ...

2006-12-01 - Archive of obsolete content
. 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 the chance to upgrade to ff2.x (now or when ff2.0.0.1 is released). also discussed is the the mozilla_1_8_branch's npotb (not part of the build) checkin policy. this newsgroup or "governance"? mitchell baker asks where should topics about organization and governance, moz.dev.planning or moz.governance? mozilla.org staff, project drivers, and technical oversight mike connor starts a discussion about the need for a...

Shipping a plugin as a Toolkit bundle - Archive of obsolete content
historically, most people have chosen to use an install.js script to install a plugin. when this method is used, you can choose to either place the plugin into the plugins directory, or place it into your own directory and modify the windows registry to let firefox know where to find the plugin. the downside to this method is that once the plugin is installed, it might be difficult for users to upgrade, uninstall, or disable the plugin. as of firefox 3 (and any gecko 1.9 based application) the use of install.js scripts is no longer supported and plugins must either be shipped as an executable installer or in a bundle as described here. bundle structure toolkit bundles can be used for all add-ons including extensions, themes and plugins. plugin packages should only need to package a small set o...

Back to the Server: Server-Side JavaScript On The Rise - Archive of obsolete content
obust 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 ) ...

Standards-Compliant Authoring Tools - Archive of obsolete content
currently the work done on nvu is being ported back to mozilla source code. ...

Archived open Web documentation - Archive of obsolete content
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
icant 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
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...

Ajax - MDN Web Docs Glossary: Definitions of Web-related terms
update parts of the dom of an html page instead without the need for a full page refresh. ajax also lets you work asynchronously, meaning your code continues to run while the targeted part of your web page is trying to reload (compared to synchronously, which blocks your code from running until that part of your page is done reloading). with interactive websites and modern web standards, ajax is gradually being replaced by functions within javascript frameworks and the official fetch api standard. ...

Forbidden header name - MDN Web Docs Glossary: Definitions of Web-related terms
opers control over headers, such as xmlhttprequest. forbidden header names start with proxy- or sec-, or are one of the following names: accept-charset accept-encoding access-control-request-headers access-control-request-method connection content-length cookie cookie2 date dnt expect feature-policy host keep-alive origin proxy- sec- referer te trailer transfer-encoding upgrade via note: the user-agent header is no longer forbidden, as per spec — see forbidden header name list (this was implemented in firefox 43) — it can now be set in a fetch headers object, or via xhr setrequestheader(). however, chrome will silently drop the header from fetch requests (see chromium bug 571722). ...

IPv4 - MDN Web Docs Glossary: Definitions of Web-related terms
ipv4 is the fourth version of the communication protocol underlying the internet and the first version to be widely deployed. first formalized in 1981, ipv4 traces its roots to the initial development work for arpanet. ipv4 is a connectionless protocol to be used on packet-switched link layer networks (ethernet). ipv6 is gradually replacing ipv4 owing to ipv4's security problems and the limitations of its address field. (version number 5 was assigned in 1979 to the experimental internet stream protocol, which however has never been called ipv5.) learn more general knowledge ipv4 on wikipedia ...

Navigation directive - MDN Web Docs Glossary: Definitions of Web-related terms
<embed>, or <applet>. ...

Progressive Enhancement - MDN Web Docs Glossary: Definitions of Web-related terms
rn functionality, while polyfills are often used to add missing features with javascript. special notice should be taken of accessibility. acceptable alternatives should be provided where possible. progressive enhancement is a useful technique that allows web developers to focus on developing the best possible websites while making those websites work on multiple unknown user agents. graceful degradation is related but is not the same thing and is often seen as going in the opposite direction to progressive enhancement. in reality both approaches are valid and can often complement one another. learn more general knowledge progressive enhancement on wikipedia ...

Request header - MDN Web Docs Glossary: Definitions of Web-related terms
equest headers after a get request: get /home.html http/1.1 host: developer.mozilla.org user-agent: mozilla/5.0 (macintosh; intel mac os x 10.9; rv:50.0) gecko/20100101 firefox/50.0 accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8 accept-language: en-us,en;q=0.5 accept-encoding: gzip, deflate, br referer: https://developer.mozilla.org/testpage.html connection: keep-alive upgrade-insecure-requests: 1 if-modified-since: mon, 18 jul 2016 02:36:04 gmt if-none-match: "c561c68d0ba92bbeb8b0fff2a9199f722e3a621a" cache-control: max-age=0 strictly speaking, the content-length header in this example is not a request header like the others, but an entity header: post /myform.html http/1.1 host: developer.mozilla.org user-agent: mozilla/5.0 (macintosh; intel mac os x 10.9; rv:50.0...

Character set - MDN Web Docs Glossary: Definitions of Web-related terms
a character set is an encoding system to let computers know how to recognize character, including letters, numbers, punctuation marks, and whitespace. in earlier times, countries developed their own character sets due to their different languages used, such as kanji jis codes (e.g. shift-jis, euc-jp, etc.) for japanese, big5 for traditional chinese, and koi8-r for russian. however, unicode gradually became most acceptable character set for its universal language support. if a character set is used incorrectly (for example, unicode for an acticle encoded in big5), you may see nothing but broken characters, which are called mojibake. ...

lossy compression - MDN Web Docs Glossary: Definitions of Web-related terms
the process of such compression is irreversible; once lossy compression of the content has been performed, the content cannot be restored to its original state. ...

MDN Web Docs Glossary: Definitions of Web-related terms
r frame rate (fps) ftp ftu function fuzz testing g gaia garbage collection gecko general header gif gij git global object global scope global variable glyph gonk google chrome gpl gpu graceful degradation grid grid areas grid axis grid cell grid column grid container grid lines grid row grid tracks guard gutters gzip compression h hash head high-level programming language hmac hoisting host hotlink h...

A cool-looking box - Learn web development
7-18 pixel computed style. use rems. write a comment about how you worked out the value. a base color for the design. give the box this color as its background color. the same color for the text; make it readable using a black text shadow. a fairly subtle border radius. a 1-pixel solid border with a color similar to the base color, but a slightly darker shade. a linear semi-transparent black gradient that goes toward the bottom right corner. make it completely transparent at the start, gradiating to around 0.2 opacity by 30% along, and remaining at the same color until the end. multiple box shadows. give it one standard box shadow to make the box look slightly raised off the page. the other two should be inset box shadows — a semi-transparent white shadow near the top left and a semi-t...

Creating fancy letterheaded paper - Learn web development
s page. project brief you have been given the files needed to create a letterheaded paper template. you just need to put the files together. to get there, you need to: the main letter apply the css to the html. add a background declaration to the letter that: fixes the top image to the top of the letter fixes the bottom image to the bottom of the letter adds a semi-transparent gradient over the top of both of the previous backgrounds that gives the letter a bit of texture. make it slightly dark right near the top and bottom, but completely transparent for a large part of the center. add another background declaration that just adds the top image to the top of the letter, as a fallback for browsers that don't support the previous declaration. add a white background co...

Fundamental CSS comprehension - Learn web development
he top of your css. now it's time to put the right selector on the right rule set! you've got four pairs of selector and ruleset to match in your css resources. do this now, and add them to your css file. you need to: give the main card container a fixed width/height, solid background color, border, and border-radius (rounded corners!), amongst other things. give the header a background gradient that goes from darker to lighter, plus rounded corners that fit in with the rounded corners set on the main card container. give the footer a background gradient that goes from lighter to darker, plus rounded corners that fit in with the rounded corners set on the main card container. float the image to the right so that it sticks to the right hand side of the main business card content...

Organizing your CSS - Learn web development
ation */ ... you don't need to comment every single thing in your css, as much of it will be self-explanatory. what you should comment are the things where you made a particular decision for a reason. you may have used a css property in a specific way to get around older browser incompatibilities, for example: .box { background-color: red; /* fallback for older browsers that don't support gradients */ background-image: linear-gradient(to right, #ff0000, #aa0000); } perhaps you followed a tutorial to achieve something, and the css is a little non-obvious. in that case you could add the url of the tutorial to the comments. you will thank yourself when you come back to this project in a year or so, and can vaguely remember there was a great tutorial about that thing, but where is it? ...

CSS building blocks - Learn web development
uts with css, or to align items with other items. in this lesson, we will take a proper look at the css box model, in order that you can move onto more complex layout tasks with an understanding of how it works and the terminology that relates to it. backgrounds and borders in this lesson we will take a look at some of the creative things you can do with css backgrounds and borders. from adding gradients, background images, and rounded corners, backgrounds and borders are the answer to a lot of styling questions in css. handling different text directions in recent years, css has evolved in order to better support different directionality of content, including right-to-left but also top-to-bottom content (such as japanese) — these different directionalities are called writing modes. as yo...

Responsive design - Learn web development
involves using calc(). if you add the vw unit to a value set using a fixed size such as ems or rems then the text will still be zoomable. essentially, the vw unit adds on top of that zoomed value: h1 { font-size: calc(1.5rem + 3vw); } this means that we only need to specify the font size for the heading once, rather than set it up for mobile and redefine it in the media queries. the font then gradually increases as you increase the size of the viewport. see an example of this in action: example, source code. the viewport meta tag if you look at the html source of a responsive page, you will usually see the following <meta> tag in the <head> of the document. <meta name="viewport" content="width=device-width,initial-scale=1"> this meta tag tells mobile browsers that they should set t...

How CSS is structured - Learn web development
s 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 ...

How do you make sure your website works properly? - Learn web development
of articles). more things to check we have listed a few simple ways to check that your website works properly, as well as the most common errors you may run across and how to fix them. you can also test if your page meets these criteria: how's the performance? does the page load fast enough? resources like webpagetest.org or browser add-ons like yslow can tell you a few interesting things: grades go from a to f. our page is just small and meets most criteria. but we can already note it would have been better to use a cdn. that doesn't matter very much when we're only serving one image, but it would be critical for a high-bandwidth website serving many thousands of images. is the server responsive enough? ping is a useful shell tool that tests the domain name you provide and tells you ...

Client-side form validation - Learn web development
e :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...

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

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

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

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

Other form controls - Learn web development
ee an implementation example of this on the <input type="range"> reference page. and browsers that support <datalist>s and <input type="color"> should display a customized palette of colors as the default, while still making the full color palette available. in this case, different browsers behave differently from case to case, so consider such uses as progressive enhancement, and ensure they degrade gracefully. other form features there are a few other form features that are not as obvious as the ones we have already mentioned, but still useful in some situations, so we thought it would be worth giving them a brief mention. note: you can find the examples from this section on github as other-examples.html (see it live also). meters and progress bars meters and progress bars are visua...

JavaScript basics - Learn web development
tunity to play with a few browser api features too. have fun! a hello world! example javascript is one of the most popular modern web technologies! as your javascript skills grow, your websites will enter a new dimension of power and creativity. however, getting comfortable with javascript is more challenging than getting comfortable with html and css. you may have to start small, and progress gradually. to begin, let's examine how to add javascript to your page for creating a hello world! example. (hello world! is the standard for introductory programming examples.) important: if you haven't been following along with the rest of our course, download this example code and use it as a starting point. go to your test site and create a new folder named scripts. within the scripts folder,...

The web and web standards - Learn web development
tudies. cross-browser compatibility is the practice of trying to make sure your webpage works across as many devices as possible. this includes using technologies that all the browsers support, delivering better experiences to browsers that can handle them (progressive enhancement), and/or writing code so that it falls back to a simpler but still usable experience in older browsers (graceful degradation). it also involves a lot of testing to see if anything fails in certain browsers, and then more work to fix those failures. responsive web design is the practice of making your functionality and layouts flexible so they can automatically adapt to different browsers. an obvious example is a website that is laid out one way in a widescreen browser on the desktop, but displays as a more compac...

Document and website structure - Learn web development
ou to do much else in this article, because the key to understanding document layout is writing a sound html structure, and then laying it out with css. we'll wait for this until you start to study css layout as part of the css topic. html layout elements in more detail it's good to understand the overall meaning of all the html sectioning elements in detail — this is something you'll work on gradually as you start to get more experience with web development. you can find a lot of detail by reading our html element reference. for now, these are the main definitions that you should try to understand: <main> is for content unique to this page. use <main> only once per page, and put it directly inside <body>. ideally this shouldn't be nested within other elements. <article> encloses a blo...

Aprender y obtener ayuda - Learn web development
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...

Multimedia: Images - Learn web development
at for smaller screens you would want to serve images with smaller resolution and vis-versa for larger screens. on top of that you'd also want to serve higher resolution images to those devices that boast a high dpi screen (e.g. "retina"). so apart from creating plenty of intermediate image variants you also need a way to serve the right file to the right browser. that's where you would need to upgrade your <picture> and <source> elements with media and/or sizes attributes. a detailed article on how to combine all of these attributes can be found here. two interesting effects to keep in mind regarding high dpi screens is that: with high dpi screen, humans will spot compression artifacts a lot later, meaning that for images meant for these screens you can crank up compression beyond usual.

Server-side web frameworks - Learn web development
able and object-oriented pure-perl api with no hidden magic. fresh code based upon years of experience, free and open-source. spring boot (java) spring boot is one of a number of projects provided by spring. it is a good starting point for doing server-side web development using java. although definitely not the only framework based on java it is easy to use to create stand-alone, production-grade spring-based applications that you can "just run". it is an opinionated view of the spring platform and third-party libraries but allows to start with minimum fuss and configuration. it can be used for small problems but its strength is building larger scale applications that use a cloud approach. usually multiple applications run in parallel talking to each other, with some providing user inte...

Ember app structure and componentization - Learn web development
a backing glimmer component class, which we don't need for now, as they are for adding interactivity and state manipulation. by default, generate component generates template-only components, because in large applications, template-only components end up being the majority of the components. header-test.js is for writing automated tests to ensure that our app continues to work over time as we upgrade, add features, refactor, etc. testing is outside the scope of this tutorial, although generally testing should be implemented as you develop, rather than after, otherwise it tends to be forgotten about. if you're curious about testing, or why you would want to have automated tests, check out the official ember tutorial on testing. before we start adding any component code, let’s create the sc...

Introducing a complete toolchain - Learn web development
...

Client-side tooling overview - Learn web development
g before even touching a single line of application code. if you have found yourself struggling in the past, then don’t worry — you are not alone. in these articles, we won’t answer every question about web tooling, but we will provide you with a useful starting point of understanding the fundamentals, which you can then build from. as with any complex topic, it is good to start small, and gradually work your way up to more advanced uses. the modern tooling ecosystem today's modern developer tooling ecosystem is huge, so it's useful to have a broad idea of what main problems the tools are solving. if you jump on your favourite search engine and look for "front-end developer tools" you're going to hit a huge spectrum of results ranging from text editors, to browsers, to the type of pen...

Lightweight themes
the top of the browser window, nestling in behind the toolbars, address bar, search bar and the tab strip. it will be anchored to the top-right corner of the browser window. view a sample theme header here. image requirements dimensions should be 3000px wide × 200px high png or jpg file format image must be no larger than 300 kb in file size tips subtle, soft contrast images and gradients work best; highly detailed images will compete with the browser ui. firefox may reveal more of the lower portion of the image if another toolbar or other ui element is added to the top of the window. the upper right-hand side of the image should have the most important information - as a user increases the width of the browser window, the browser reveals more of the left-hand side of the i...

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

Command line options
-profilemanager if you use firefox nightly, you can enter: cd /applications/firefoxnightly.app/contents/macos ./firefox -profilemanager linux open terminal and enter the following command: cd thunderbird installation directory ./thunderbird -profilemanager the example above invokes the "-profilemanager" command line option with mozilla's thunderbird mail client. user profile -allow-downgrade firefox 67's downgrade protection prevents accidentally starting firefox in a profile running a later version of firefox. depending on changes between the two versions, some files in a profile may not be downwards compatible. adding this option bypasses downgrade protection. -createprofile profile_name create a new profile in the default directory, but do not start the application. the profil...

Simple SeaMonkey build
a shared build suffices for debugging purposes but current nightly releases are actually static builds which require even more memory to link. the support for libxul builds is still experimental but it should work if you --disable-mailnews. on windows, the above commands will create the comm-central directory in %userprofile% which may be some subfolder of c:\documents and settings\ on systems upgraded from xp or below. the space in this directory name, or in your user name if it contains one, will cause the configure script to break. to (possibly) fix this, cd to a dir without spaces before doing the "hg clone" command above. running seamonkey the seamonkey executable can be found in obj-sm-release/dist/bin/ (used to be obj-sm-release/mozilla/dist/bin/) on windows and linux and in obj-sm...

The Firefox codebase: CSS Guidelines
g 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 ...

Eclipse CDT Manual Setup
."/"leaving directory..." lines), and the build must not be silenced/quietened. conversely, note this very carefully: if you configure eclipse to invoke a build process that is parallelized, silenced, or that fails to identify the directory that the compiler is being run from, then it will mess up the compiler options that eclipse associates with your files, and that in turn will significantly degrade the quality of the code assistance that eclipse will provide after it next re-indexes the code. these requirements aren't a very good fit with the typical mozilla developer's wish to minimize build times, implying parallelized, silenced builds. the consequences of the above observations are this: it is strongly recommended that you invoke your normal (re)builds from the command line, exter...

Gecko Logging
set moz_log_file="log.txt" the rotate and append options described above only apply when logging to a file. the special pref logging.config.log_file can be set at runtime to change the log file being output to. e10s note when a content process is in sandbox, it cannot write to stderr or any file. you may need to set preference security.sandbox.content.level to 0 to see the log. rust we're gradually adding more rust code to gecko, and rust crates typically use a different approach to logging. many rust libraries use the log crate to log messages, which works together with env_logger at the application level to control what's actually printed via rust_log. you can set an overall logging level, though it could be quite verbose: set rust_log="debug" you can also target individual module...

Obsolete Build Caveats and Tips
all the windows 7 sdk. note that you need service pack 1--for the express edition it is a separate download. visual c++ 8 (vs2005) professional download and install the windows 7 sdk. install this microsoft hotfix to allow linking to work correctly. visual c++ 7.1 or visual c++ 8 (vs2005) express these versions are not supported and the windows 7 sdk will not work with them. you need to upgrade to one of the newer visual c++ versions above. for gecko 11 or below: you could also download the windows vista sdk and follow the instructions there to allow you to build against it. starting with gecko 12.0, this sdk is necessary. note: while this configuration will probably build on mozilla-1.9.1 and mozilla-1.9.0, it is not supported. warning: due to a bug in old versions of mo...

Addon
hat represents this add-on. install read only addoninstall the addoninstall that will install this add-on. only available if this add-on is in the process of being installed. installdate read only date the date that the add-on was first installed. optionsurl read only string the url of the options dialog to display for this add-on. pendingupgrade read only addon if this add-on will be replaced on the next restart, this property will hold the new addon object. releasenotesuri read only nsiuri a uri for release notes for this version. screenshots read only addonscreenshot[] an array of addonscreenshot objects containing urls of preview images for the add-on. size read only integer the ...

AddonManager
rations are pending. pending_enable this add-on will be enabled after the application restarts. pending_disable this add-on will be disabled after the application restarts. pending_uninstall this add-on will be uninstalled after the application restarts. pending_install this add-on will be installed after the application restarts. pending_upgrade this add-on will be upgraded after the application restarts. permissions constant description perm_can_uninstall this add-on can be uninstalled. perm_can_enable this add-on can be enabled. perm_can_disable this add-on can be disabled. perm_can_upgrade this add-on can be upgraded. operations requiring restart ...

Localization prerequisites
other varieties of "make" will not work. autoconf-2.13 - autoconf 2.5x will not work. ...

Leak-hunting strategies and tips
smaller (as in bug 99180) or hide them completely and (2) large graphs of leaked objects tend to hide smaller ones, it's much better to go after the large graphs of leaks first. a good general pattern for finding and fixing leaks is to start with a task that you want not to leak (for example, reading email). start finding and fixing leaks by running part of the task under nstracerefcnt logging, gradually building up from as little as possible to the complete task, and fixing most of the leaks in the first steps before adding additional steps. (by most of the leaks, i mean the leaks of large numbers of different types of objects or leaks of objects that are known to entrain many non-logged objects such as js objects. seeing a leaked globalwindowimpl, nsxulpdglobalobject, nsxbldocglobalobject,...

Power profiling overview
ersions of firefox to see if firefox has improved or worsened over time on a particular workload. this can identify specific changes that caused regressions, for example. compare different configurations of firefox to see if a particular feature is affecting things. compare different workloads. this can be particularly useful if the workloads only vary slightly. for example, it can be useful to gradually remove elements from a web page and see how the power-related measurements change. even just switching a tab from the foreground to the background can make a difference. high-context measurements a few power-related measurements can be obtained in a high-context fashion, e.g. with stack traces that clearly pinpoint specific parts of the code as being responsible. standard performance p...

about:memory
within a single tree are non-overlapping. tree paths can be written using '/' as a separator. for example, preference/referent/weak/dead represents the path to the final leaf node in the example tree above. sub-trees can be collapsed or expanded by clicking on them. if you find any particular tree overwhelming, it can be helpful to collapse all the sub-trees immediately below the root, and then gradually expand the sub-trees of interest. sections memory reports are displayed on a per-process basis, with one process per section. within each process's measurements, there are the following subsections. explicit allocations this section contains a single tree, called "explicit", that measures all the memory allocated via explicit calls to heap allocation functions (such as malloc and new) an...

JSS FAQ
electioncallback is analogous to ssl_getclientauthdatahook. can i have multiple jss instances reading separate db's? no, you can only have one initialized instance of jss for each database. once jss initialized, i can't get anymore instances with certificatefactory.getinstance("x.509")? in version previous to jss 3.1, jss removes the default sun provider on startup. upgrade to the latest jss, or, in the cryptomanager.initializationvalues object you pass to cryptomanager.initialize(), set removesunproivider=true. is it possible to sign data in java with jss? what i am trying to do is write a java applet that will access the netscape certificate store, retrieve a x509 certificate and then sign some data. the best way to do this is with the pkcs #7 signeddata...

NSS 3.12.6 release notes
negotiation_info extension. this is the safe renegotiation. [3|t|t]: ssl_renegotiate_transitional disallows unsafe renegotiation in server sockets only, but allows clients to continue to renegotiate with vulnerable servers. this value should only be used during the transition period when few servers have been upgraded. nss_ssl_require_safe_negotiation values: 1: requiresafenegotiation = true unset: requiresafenegotiation = false controls whether safe renegotiation indication is required for initial h...

NSS 3.14.4 release notes
mation the cvs tag is nss_3_14_4_rtm. nss 3.14.4 requires nspr 4.9.5 or newer. nss 3.14.4 source distributions are also available on ftp.mozilla.org for secure https download: source tarballs: https://ftp.mozilla.org/pub/mozilla.org/security/nss/releases/nss_3_14_4_rtm/src/ security advisories the following security-relevant bugs have been resolved in nss 3.14.4. users are encouraged to upgrade immediately. bug 894370 - (cve-2013-1739) avoid uninitialized data read in the event of a decryption failure. new in nss 3.14.4 new functionality no new major functionality is introduced in this release. this release is a patch release to address cve-2013-1739. bugs fixed in nss 3.14.4 https://bugzilla.mozilla.org/buglist.cgi?bug_id=894370%2c832942%2c863947&bug_id_type=anyexact&list_i...

NSS 3.14.5 release notes
formation the cvs tag is nss_3_14_5_rtm. nss 3.14.5 requires nspr 4.9.5 or newer. nss 3.14.5 source distributions are also available on ftp.mozilla.org for secure https download: source tarballs: https://ftp.mozilla.org/pub/mozilla.org/security/nss/releases/nss_3_14_5_rtm/src/ security advisories the following security-relevant bugs have been resolved in nss 3.14.5. users are encouraged to upgrade immediately. bug 934016 - (cve-2013-5605) handle invalid handshake packets new in nss 3.14.5 new functionality no new major functionality is introduced in this release. this release is a patch release to address cve-2013-5605. bugs fixed in nss 3.14.5 https://bugzilla.mozilla.org/buglist.cgi?bug_id=934016&bug_id_type=anyexact&resolution=fixed&classification=components&query_format=advanc...

NSS 3.15.2 release notes
15.2 are described in the "bugs fixed" section below. distribution information nss 3.15.2 source distributions are also available on ftp.mozilla.org for secure https download: source tarballs: https://ftp.mozilla.org/pub/mozilla.org/security/nss/releases/nss_3_15_2_rtm/src/ security advisories the following security-relevant bugs have been resolved in nss 3.15.2. users are encouraged to upgrade immediately. bug 894370 - (cve-2013-1739) avoid uninitialized data read in the event of a decryption failure. new in nss 3.15.2 new functionality aes-gcm ciphersuites: aes-gcm cipher suite (rfc 5288 and rfc 5289) support has been added when tls 1.2 is negotiated. specifically, the following cipher suites are now supported: tls_ecdhe_ecdsa_with_aes_128_gcm_sha256 tls_ecdhe...

NSS 3.15.3.1 release notes
the hg tag is nss_3_15_3_1_rtm. nss 3.15.3.1 requires nspr 4.10.2 or newer. nss 3.15.3.1 source distributions are also available on ftp.mozilla.org for secure https download: source tarballs: https://ftp.mozilla.org/pub/mozilla.org/security/nss/releases/nss_3_15_3_1_rtm/src/ security advisories the following security-relevant bugs have been resolved in nss 3.15.3.1. users are encouraged to upgrade immediately. bug 946351 - misissued google certificates from dcssi new in nss 3.15.3.1 new functionality no new major functionality is introduced in this release. this is a patch release to revoke trust of a subordinate ca certificate that was mis-used to generate a certificate used by a network appliance. bugs fixed in nss 3.15.3.1 bug 946351 - misissued google certificates from dcssi a c...

NSS 3.15.3 release notes
formation the hg tag is nss_3_15_3_rtm. nss 3.15.3 requires nspr 4.10.2 or newer. nss 3.15.3 source distributions are also available on ftp.mozilla.org for secure https download: source tarballs: https://ftp.mozilla.org/pub/mozilla.org/security/nss/releases/nss_3_15_3_rtm/src/ security advisories the following security-relevant bugs have been resolved in nss 3.15.3. users are encouraged to upgrade immediately. bug 925100 - (cve-2013-1741) ensure a size is <= half of the maximum pruint32 value bug 934016 - (cve-2013-5605) handle invalid handshake packets bug 910438 - (cve-2013-5606) return the correct result in cert_verifycert on failure, if a verifylog isn't used new in nss 3.15.3 new functionality no new major functionality is introduced in this release. this release is a patch rele...

NSS 3.15.4 release notes
formation the hg tag is nss_3_15_4_rtm. nss 3.15.4 requires nspr 4.10.2 or newer. nss 3.15.4 source distributions are also available on ftp.mozilla.org for secure https download: source tarballs: https://ftp.mozilla.org/pub/mozilla.org/security/nss/releases/nss_3_15_4_rtm/src/ security advisories the following security-relevant bugs have been resolved in nss 3.15.4. users are encouraged to upgrade immediately. bug 919877 - (cve-2013-1740) when false start is enabled, libssl will sometimes return unencrypted, unauthenticated data from pr_recv new in nss 3.15.4 new functionality implemented ocsp querying using the http get method, which is the new default, and will fall back to the http post method. implemented ocsp server functionality for testing purposes (httpserv utility). suppor...

NSS 3.16.2.1 release notes
hg tag is nss_3_16_2_1_rtm. nss 3.16.2.1 requires nspr 4.10.6 or newer. nss 3.16.2.1 source distributions are also available on ftp.mozilla.org for secure https download: source tarballs: https://ftp.mozilla.org/pub/mozilla.org/security/nss/releases/nss_3_16_2_1_rtm/src/ security advisories the following security-relevant bugs have been resolved in nss 3.16.2.1. users are encouraged to upgrade immediately. bug 1064636 - (cve-2014-1568) rsa signature forgery in nss. see also mfsa 2014-73 for details. new in nss 3.16.2.1 new functionality no new functionality is introduced in this release. this is a patch release to fix a bug that caused nss to accept forged rsa signatures. a new symbol, _sgn_verifypkcs1digestinfo is exported in this release. as with all exported nss symbols tha...

NSS 3.16.2.3 release notes
ck. notable changes in nss 3.16.2.3 bug 1057161: check that an imported elliptic curve public key is valid. previously nss would only validate the peer's public key before performing ecdh key agreement. now ec public keys are validated at import time. bugs fixed in nss 3.16.2.3 bug 1057161 - nss hangs with 100% cpu on invalid ec key bug 1036735 - add support for draft-ietf-tls-downgrade-scsv to nss compatibility nss 3.16.2.3 shared libraries are backward compatible with all older nss 3.x shared libraries. a program linked with older nss 3.x shared libraries will work with nss 3.16.2.3 shared libraries without recompiling or relinking. furthermore, applications that restrict their use of nss apis to the functions listed in nss public functions will remain compatible with futu...

NSS 3.16.5 release notes
tion the hg tag is nss_3_16_5_rtm. nss 3.16.5 requires nspr 4.10.6 or newer. nss 3.16.5 source distributions are also available on ftp.mozilla.org for secure https download: source tarballs: https://ftp.mozilla.org/pub/mozilla.org/security/nss/releases/nss_3_16_5_rtm/src/ security advisories the following security-relevant bugs have been resolved in nss 3.16.5. users are encouraged to upgrade immediately. bug 1064636 - (cve-2014-1568) rsa signature forgery in nss. see also mfsa 2014-73 for details. new in nss 3.16.5 new functionality no new functionality is introduced in this release. this is a patch release to fix a bug that caused nss to accept forged rsa signatures. a new symbol, _sgn_verifypkcs1digestinfo is exported in this release. as with all exported nss symbols that ...

NSS 3.17.1 release notes
formation the hg tag is nss_3_17_1_rtm. nss 3.17.1 requires nspr 4.10.7 or newer. nss 3.17.1 source distributions are available on ftp.mozilla.org for secure https download: source tarballs: https://ftp.mozilla.org/pub/mozilla.org/security/nss/releases/nss_3_17_1_rtm/src/ security advisories the following security-relevant bugs have been resolved in nss 3.17.1. users are encouraged to upgrade immediately. bug 1064636 - (cve-2014-1568) rsa signature forgery in nss. see also mfsa 2014-73 for details. new in nss 3.17.1 this patch release adds new functionality and fixes a bug that caused nss to accept forged rsa signatures. a new symbol, _sgn_verifypkcs1digestinfo is exported in this release. as with all exported nss symbols that have a leading underscore '_', this is an internal...

NSS 3.19.2.1 release notes
. nss 3.19.2.1 and nspr 4.10.10 source distributions are available on ftp.mozilla.org for secure https download: source tarballs: https://ftp.mozilla.org/pub/mozilla.org/security/nss/releases/nss_3_19_2_1_rtm/src/ https://ftp.mozilla.org/pub/nspr/releases/v4.10.10/src/ security advisories the following security-relevant bugs have been resolved in nss 3.19.2.1. users are encouraged to upgrade immediately. bug 1192028 (cve-2015-7181) and bug 1202868 (cve-2015-7182): several issues existed within the asn.1 decoder used by nss for handling streaming ber data. while the majority of nss uses a separate, unaffected der decoder, several public routines also accept ber data, and thus are affected. an attacker that successfully exploited these issues can overflow the heap and may be able...

NSS 3.19.2.2 release notes
er release.) distribution information the hg tag is nss_3_19_2_2_rtm. nss 3.19.2.2 requires nspr 4.10.10 or newer. nss 3.19.2.2 source distributions are available on ftp.mozilla.org for secure https download: source tarballs: https://ftp.mozilla.org/pub/mozilla.org/security/nss/releases/nss_3_19_2_2_rtm/src/ security fixes in nss 3.19.2.2 bug 1158489 / cve-2015-7575 - prevent md5 downgrade in tls 1.2 signatures. new in nss 3.19.2.2 new functionality no new functionality is introduced in this release. acknowledgements the nss development team would like to thank karthikeyan bhargavan from inria for responsibly disclosing the issue in bug 1158489. compatibility nss 3.19.2.2 shared libraries are backward compatible with all older nss 3.x shared libraries. a program linked wit...

NSS 3.19.4 release notes
newer. nss 3.19.4 and nspr 4.10.10 source distributions are available on ftp.mozilla.org for secure https download: source tarballs: https://ftp.mozilla.org/pub/mozilla.org/security/nss/releases/nss_3_19_4_rtm/src/ https://ftp.mozilla.org/pub/nspr/releases/v4.10.10/src/ security advisories the following security-relevant bugs have been resolved in nss 3.19.4. users are encouraged to upgrade immediately. bug 1192028 (cve-2015-7181) and bug 1202868 (cve-2015-7182): several issues existed within the asn.1 decoder used by nss for handling streaming ber data. while the majority of nss uses a separate, unaffected der decoder, several public routines also accept ber data, and thus are affected. an attacker that successfully exploited these issues can overflow the heap and may be able...

NSS 3.20.1 release notes
newer. nss 3.20.1 and nspr 4.10.10 source distributions are available on ftp.mozilla.org for secure https download: source tarballs: https://ftp.mozilla.org/pub/mozilla.org/security/nss/releases/nss_3_20_1_rtm/src/ https://ftp.mozilla.org/pub/nspr/releases/v4.10.10/src/ security advisories the following security-relevant bugs have been resolved in nss 3.20.1. users are encouraged to upgrade immediately. bug 1192028 (cve-2015-7181) and bug 1202868 (cve-2015-7182): several issues existed within the asn.1 decoder used by nss for handling streaming ber data. while the majority of nss uses a separate, unaffected der decoder, several public routines also accept ber data, and thus are affected. an attacker that successfully exploited these issues can overflow the heap and may be able...

NSS 3.20.2 release notes
fixes" section below. distribution information the hg tag is nss_3_20_2_rtm. nss 3.20.2 requires nspr 4.10.10 or newer. nss 3.20.2 source distributions are available on ftp.mozilla.org for secure https download: source tarballs: https://ftp.mozilla.org/pub/mozilla.org/security/nss/releases/nss_3_20_2_rtm/src/ security fixes in nss 3.20.2 bug 1158489 / cve-2015-7575 - prevent md5 downgrade in tls 1.2 signatures. new in nss 3.20.2 new functionality no new functionality is introduced in this release. acknowledgements the nss development team would like to thank karthikeyan bhargavan from inria for responsibly disclosing the issue in bug 1158489. compatibility nss 3.20.2 shared libraries are backward compatible with all older nss 3.x shared libraries. a program linked with ol...

NSS 3.21 release notes
3.21, which is a minor release. distribution information the hg tag is nss_3_21_rtm. nss 3.21 requires nspr 4.10.10 or newer. nss 3.21 source distributions are available on ftp.mozilla.org for secure https download: source tarballs: https://ftp.mozilla.org/pub/mozilla.org/security/nss/releases/nss_3_21_rtm/src/ security fixes in nss 3.21 bug 1158489 / cve-2015-7575 - prevent md5 downgrade in tls 1.2 signatures. new in nss 3.21 new functionality certutil now supports a --rename option to change a nickname (bug 1142209) tls extended master secret extension (rfc 7627) is supported (bug 1117022) new info functions added for use during mid-handshake callbacks (bug 1084669) new functions in nss.h nss_optionset - sets nss global options nss_optionget - gets the cu...

NSS 3.23 release notes
re https download: source tarballs: https://ftp.mozilla.org/pub/mozilla.org/security/nss/releases/nss_3_23_rtm/src/ new in nss 3.23 new functionality chacha20/poly1305 cipher and tls cipher suites now supported (bug 917571, bug 1227905) experimental-only support tls 1.3 1-rtt mode (draft-11). this code is not ready for production use. new functions in ssl.h ssl_setdowngradecheckversion - set maximum version for new serverrandom anti-downgrade mechanism. clients that perform a version downgrade (which is a dangerous practice) call this with the highest version number that they possibly support. this gives them access to the version downgrade protection from tls 1.3. notable changes in nss 3.23 the copy of sqlite shipped with nss has been updated to ve...

NSS 3.28.3 release notes
recompiling or relinking. furthermore, applications that restrict their use of nss apis to the functions listed in nss public functions will remain compatible with future versions of the nss shared libraries. if you had compiled your application against header files of nss 3.28, nss 3.28.1 or nss 3.28.2, it it recommended that you recompile your application against nss 3.28.3, at the time you upgrade to nss 3.28.3. please note that nss 3.29 also contained the incorrect change. you should avoid using nss 3.29, and rather use nss 3.29.1 or a newer version. see also the separate release notes for nss 3.29.1 feedback bugs discovered should be reported by filing a bug report with bugzilla.mozilla.org (product nss). ...

NSS 3.28 release notes
t the presence of tokens that support additional elliptic curves and enable those curves for use in tls (bug 1303648). note that this detection has a one-off performance cost, which can be avoided by using the ssl_namedgroupconfig function, to limit supported groups to those that nss provides. pkcs#11 bypass for tls is no longer supported and has been removed (bug 1303224). support for "export" grade ssl/tls cipher suites has been removed (bug 1252849). nss now uses the signature schemes definition in tls 1.3 (bug 1309446). this also affects tls 1.2. nss will now only generate signatures with the combinations of hash and signature scheme that are defined in tls 1.3, even when negotiating tls 1.2. this means that sha-256 will only be used with p-256 ecdsa certificates, sha-384 with p-...

NSS 3.29.1 release notes
feedback bugs discovered should be reported by filing a bug report with bugzilla.mozilla.org (product nss). ...

NSS 3.36.2 release notes
urce distributions are available on ftp.mozilla.org for secure https download: source tarballs: https://ftp.mozilla.org/pub/security/nss/releases/nss_3_36_2_rtm/src/ new in nss 3.36.2 new functionality no new functionality is introduced in this release. this is a patch release to fix regression bugs. bugs fixed in nss 3.36.2 bug 1462303 - connecting to a server that was recently upgraded to tls 1.3 would result in a ssl_rx_malformed_server_hello error. bug 1460673 - fix a rare bug with pkcs#12 files. this bugzilla query returns all the bugs fixed in nss 3.36.2: https://bugzilla.mozilla.org/buglist.cgi?resolution=fixed&classification=components&query_format=advanced&product=nss&target_milestone=3.36.2 compatibility nss 3.36.2 shared libraries are backward compatible...

NSS 3.37.1 release notes
urce distributions are available on ftp.mozilla.org for secure https download: source tarballs: https://ftp.mozilla.org/pub/security/nss/releases/nss_3_37_1_rtm/src/ new in nss 3.37.1 new functionality no new functionality is introduced in this release. this is a patch release to fix regression bugs. bugs fixed in nss 3.37.1 bug 1462303 - connecting to a server that was recently upgraded to tls 1.3 would result in a ssl_rx_malformed_server_hello error. bug 1460673 - fix a rare bug with pkcs#12 files. this bugzilla query returns all the bugs fixed in nss 3.37.1: https://bugzilla.mozilla.org/buglist.cgi?resolution=fixed&classification=components&query_format=advanced&product=nss&target_milestone=3.37.1 compatibility nss 3.37.1 shared libraries are backward compatible...

NSS 3.46 release notes
ll be released in october: tls 1.3 will be the default maximum tls version. see bug 1573118 for details. tls extended master secret will be enabled by default, where possible. see bug 1575411 for details. ...

NSS 3.49 release notes
ble on ftp.mozilla.org for secure https download: source tarballs: https://ftp.mozilla.org/pub/mozilla.org/security/nss/releases/nss_3_49_rtm/src/ other releases are available in nss releases. notable changes in nss 3.49 the legacy dbm database, libnssdbm, is no longer built by default when using gyp builds. see bug 1594933 for details. bugs fixed in nss 3.49 bug 1513586 - set downgrade sentinel for client tls versions lower than 1.2. bug 1606025 - remove -wmaybe-uninitialized warning in sslsnce.c bug 1606119 - fix ppc hw crypto build failure bug 1605545 - memory leak in pk11install_platform_generate bug 1602288 - fix build failure due to missing posix signal.h bug 1588714 - implement checkarmsupport for win64/aarch64 bug 1585189 - nss database uses 3des instead of aes to...

NSS 3.50 release notes
entation bug 1606992 - cache the most recent pbkdf1 password hash, to speed up repeated sdr operations, important with the increased kdf iteration counts. ...

NSS Developer Tutorial
nss coding style formatting line length should not exceed 80 characters. indentation level is 4. tabs are used heavily in many nss source files. try to stay consistent when you modify existing code. the proper use of tabs has often been confusing for new nss developers, so in nss/lib/ssl, we're gradually removing the use of tabs. curly braces: both of the following styles are allowed: if (condition) { action1(); } else { action2(); } or: if (condition) { action1(); } else { action2(); } the former style is more common. when modifying existing code, try to stay consistent. in new code, prefer the former style, as it conserves vertical space. when a block of code consists of a single statement, nss doesn’t require curly braces, so both of these examples ar...

Overview of NSS
ficate and key management, cryptography module management, and other development tasks. nss comes with an extensive and growing set of documentation, including introductory material, api references, man pages for command-line tools, and sample code. nss is available as source and shared (dynamic) libraries. every nss release is backward compatible with previous releases, allowing nss users to upgrade to the new nss shared libraries without recompiling or relinking their applications. open-source licensing and distribution nss is available under the mozilla public license, version 2. the latest source code is available for free worldwide from https://www.mozilla.org and its mirror sites. ...

NSS environment variables
[0|n|n]: ssl_renegotiate_never never allow renegotiation - that was the default for 3.12.5 release. [3|t|t]: ssl_renegotiate_transitional disallows unsafe renegotiation in server sockets only, but allows clients to continue to renegotiate with vulnerable servers. this value should only be used during the transition period when few servers have been upgraded. [2|r|r]: ssl_renegotiate_requires_xtn (default) only allows renegotiation if the peer's hello bears the tls renegotiation_info extension. this is the safe renegotiation. 3.12.5 modified in 3.12.6 nss_ssl_require_safe_negotiation boolean (1 to enable) it controls whether safe renegotiation indication is required for initial handshake. in o...

OLD SSL Reference
old ssl reference we are migrating this ssl reference 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 ssl reference newsgroup: mozilla.dev.tech.crypto writer: sean cotter manager: wan-teh chang chapter 1 overview of an ssl application ssl and related apis allow compliant applications to configure sockets for authenticated, tamper-proof, and encrypted communications. this chapter introduces some of the basic ssl functions. chapter 2, "getting started with ssl" illustrates their use in sample client and server applications. initialization initializing caches ...

pkfnc.html
in particular, these functions are used for obtaining certificates, keys, and passwords. ...

sslcrt.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 certificate functions chapter 5 certificate functions this chapter describes the functions and related types used to work with a certificate database such as the cert7.db database provided with communicator. validating certificates manipulating certificates getting certificate information comparing secitem objects validating certificates cert_verifycertnow cert_verifycertname cert_checkcertvalidtimes nss_cmpcertchainwcanames cert_verifycertnow checks that the current...

sslfnc.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 ssl functions chapter 4 ssl functions this chapter describes the core ssl functions. ssl initialization functions ssl export policy functions ssl configuration functions ssl communication functions ssl functions used by callbacks ssl handshake functions nss shutdown function deprecated functions ssl initialization functions this section describes the initialization functions that are specific to ssl. for a complete list of nss initialization functions, see initialization. note tha...

sslintro.html
this chapter introduces some of the basic ssl functions. ...

sslkey.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 key functions chapter 6 key functions this chapter describes two functions used to manipulate private keys and key databases such as the key3.db database provided with communicator. seckey_getdefaultkeydb seckey_destroyprivatekey seckey_getdefaultkeydb returns a handle to the default key database opened by nss_init. syntax #include <key.h> #include <keyt.h> seckeykeydbhandle *seckey_getdefaultkeydb(void); returns the function returns a handle of type seckeykeydbhandle. de...

ssltyp.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 selected ssl types and structures chapter 3 selected ssl types and structures this chapter describes some of the most important types and structures used with the functions described in the rest of this document, and how to manage the memory used for them. additional types are described with the functions that use them or in the header files. types and structures managing secitem memory types and structures these types and structures are described here: certcertdbhandle certcer...

NSS_3.12.3_release_notes.html
ith default parameters fails on {net bug 466194: cert_decodetruststring should take a const char * input trusts string. ...

NSS Tools certutil
e utility that can create and modify the netscape communicator cert8.db and key3.db database files. it can also list, generate, modify, or delete certificates within the cert8.db file and create or change the password, generate new public and private key pairs, display the contents of the key database, or delete key pairs within the key3.db file. starting from nss 3.35, the database format was upgraded to support sqlite as described in this document. it means that cert9.db and key4.db files may be targeted instead. the key and certificate management process generally begins with creating keys in the key database, then generating and managing certificates in the certificate database. this document discusses certificate and key database management. for information security module database man...

Download Rhino
1.7r4 rhino is available under mpl 2.0. previous versions were released under mpl 1.1/gpl 2.0 license. see rhino license for further information. source in addition to getting the source from the zip files above, the source code for rhino can be found in github at https://github.com/mozilla/rhino. to get the source, use the command git clone https://github.com/mozilla/rhino.git rhino uses gradle as its build system. running the ./gradlew tasks command at the top directory of the rhino distribution will print the list of available build targets. ...

Rhino optimization
n objects) were previously not supported in higher optimization levels. these features have been removed from the language in ecma, so higher optimization levels are now conformant. future versions may allocate more aggressive optimizations to higher optimization levels. for compatibility with future versions, use level 1. for maximal optimization, use level 9, but retest your application when upgrading to new versions. scripts are optimized at compile time, not at execution time. so if a script is compiled with the context's optimizationlevel set to 1, it will be executed with those optimizations, regardless of the optimizationlevel of the context in which it is executed. ...

Future directions
g that experimentation, we must take care to apply parallelism with conceptual clarity and discipline. the api the spidermonkey api is c++. for the near future, we do not intend to provide a stable api, because too many things are changing. also, we will someday want a more modern c++ api. going forward from now, the api will likely be semi-stable, but there is no guarantee. the public api is gradually moving from jsapi.h and jsfriendapi.h into header files in js/public. much more cleanup and organization is still required. practical coding bits experimental language features new language features (es6+) and apis often get added to spidermonkey while the spec is still being drafted, or before the feature has stabilized. this is good, because it helps the spec work. for these features: ...

Hacking Tips
in release builds. inspecting mir objects within a debugger for mirgraph, mbasicblock, and mdefinition and its subclasses (minstruction, mconstant, etc.), call the dump member function. (gdb) call graph->dump() (gdb) call block->dump() (gdb) call def->dump() benchmarking without a phone if you do not have a mobile device or prefer to test on your desktop first, you will need to downgrade your computer such as it is able to run programs as fast as-if they were running on a phone. on linux, you can manage the resources available to one program by using cgroup, and to do you can install libcgroup which provides some convenient tools such as cgexec to wrap the program that you want to benchmark. the following list of commands is used to create 3 control groups. the top-level contr...

JS::Value
laces, spidermonkey provides already-rooted js::values which you can use for variables. see spidermonkey gc rooting guide. the jsval typedef for js::value js::value was historically known in the jsapi as jsval. spidermonkey 1.8.5 made jsval into a c struct and exposed it in c++ through the full-fledged js::value class. as of spidermonkey 17, jsval is a typedef of js::value, and spidermonkey is gradually transitioning to a new c++ jsapi, at whose heart lies js::value. jsval is deprecated; new code should use js::value. the old jsval_is_* methods, jsval_* constants and *_to_jsval methods, and jsval_to_* methods are also deprecated; uses of each should be replaced with use of the corresponding val.is*(), *value(), and val.to*() methods. js type jsval type tests jsval constants...

JS_NewContext
ext. otherwise it returns null. for more details about contexts, see jscontext. for sample code that creates and initializes a jscontext, see jsapi user guide. the stackchunksize parameter does not control the javascript stack size. (the jsapi does not provide a way to adjust the stack depth limit.) passing a large number for stackchunksize is a mistake. in a debug build, large chunk sizes can degrade performance dramatically. the usual value of 8192 is recommended. the application must call js_destroycontext when it is done using the context. before a jsruntime may be destroyed, all the jscontexts associated with it must be destroyed. the new jscontext initially has no global object. the new jscontext is associated with the calling thread. no other thread may use it or destroy it. see a...

SpiderMonkey 1.8.5
s) has been added. known issues mac os x 10.5 (leopard) and xcode 3.2 spidermonkey will not build with certain builds of apple's gcc 4.2 c++ compiler. to check what version you are running, issue the command /usr/bin/g++-4.2 -v from a terminal window. the following builds are known to not work: i686-apple-darwin9-g++-4.2.1 (gcc) 4.2.1 (apple inc. build 5574) to work around this issue, either upgrade your xcode or use an alternate version of gcc, such as the one that shipped with leopard. to select an alternate c++ compiler, invoke configure thus: cxx=/usr/bin/g++-4.0 /path/configure --my-configuration-options js-config the new configure-based build system does not correctly generate the js-config script on many platforms, nor when js-ctypes are enabled. if you are building your project with...

SpiderMonkey 1.8.7
s) has been added. known issues mac os x 10.5 (leopard) and xcode 3.2 spidermonkey will not build with certain builds of apple's gcc 4.2 c++ compiler. to check what version you are running, issue the command /usr/bin/g++-4.2 -v from a terminal window. the following builds are known to not work: i686-apple-darwin9-g++-4.2.1 (gcc) 4.2.1 (apple inc. build 5574) to work around this issue, either upgrade your xcode or use an alternate version of gcc, such as the one that shipped with leopard. to select an alternate c++ compiler, invoke configure thus: cxx=/usr/bin/g++-4.0 /path/configure --my-configuration-options js-config the new configure-based build system does not correctly generate the js-config script on many platforms, nor when js-ctypes are enabled. if you are building your project wit...

Handling Mozilla Security Bugs
lves and so that problems can get the maximum amount of developer attention and be fixed as soon as possible. at the same time, the mozilla project receives substantial contributions of code and developer time from organizations that use (or plan to use) mozilla code in their own product offerings. some of these products may be used by large populations of end users, many of whom may not often upgrade or check for recent security fixes. we understand and acknowledge the concerns of those who believe that too-hasty disclosure of exploit details can provide a short-term advantage to potential attackers, who can exploit a problem before most end users become aware of its existence. we believe that both sets of concerns are valid, and that both are worth addressing as best we can. we have attemp...

History Service Design
a new one is created, if instead the database exists but the connection to it fails due to database corruption, the corrupt database is moved away and a new one is created. in both cases an implementer can know what did happen at startup and act accordingly (maybe restoring a backup). once the database connection has been set-up the schema version of the database is checked. schema version is upgraded every time a change is made to the database schema, history service will eventually upgrade the database, moving and fixing its datas accordingly. in case the database has been created for the first time history service will create all tables, indexes and triggers, calling related inittables static methods of other dependant services. finally temporary tables, indexes and triggers are created,...

Using the Places history service
exist and has been correctly initialized. break; case historyservice.database_status_create: // database did not exist, a new one has just been created and initialized. break; case historyservice.database_status_corrupt: // database was corrupt, has been moved to a .corrupt file and a new one has been created and initialized. break; case historyservice.database_status_upgraded: // database had an old schema version and has been upgraded to a new one. break; } in case the database is locked by a third party process and cannot be opened, a "places-database-locked" notification is fired, in such a case the service won't be able to initialize. adding pages to history nsiglobalhistory2.adduri: this is the basic function for adding pages to history that is call...

places.sqlite Database Troubleshooting
in the profile folder a places.sqlite-corrupt file has been created. in some cases, this procedure may allow you to recover the corrupt file along with all of its contents (history). close firefox and ensure it's done closing in your task manager. before you proceed, make a backup of the firefox profile folder, in any case. ...

An Overview of XPCOM
erability 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...

Creating the Component Code
ts loaded into xpcom. an xpcom component needs to implement at least three interfaces that xpcom requires, and often others as well. there is more code in this chapter than you'll eventually need, however. using xpcom utilities to make things easier shows some simpler and more elegant ways to create an xpcom component using generic macros, and this chapter is more about learning the basics. as in grade school when you learned long division, better tools like calculators come after you figure out what's actually happening. in this case, the long-hand implementation gives us an opportunity to talk about various features of xpcom. what we'll be working on the component we'll be working on in this book controls a special mode in your browser that prevents users from leaving the current domain o...

Observer Notifications
manager.addaddonlistener() to receive similar events. this topic indicates when the extension manager performs some action. note that any action will be taken the next time the application starts. see nsiextensionmanager for details. topic data description em-action-requested item-installed a new extension has been installed. em-action-requested item-upgraded a different version of an existing extension has been installed. em-action-requested item-uninstalled an addon has been marked to be uninstalled. em-action-requested item-enabled an addon has been enabled. em-action-requested item-disabled an addon has been disabled. em-action-requested item-cancel-action a previous action has been ...

nsICache
ntry as valid (using markvalid) and then simply read the data from the cache. a descriptor granted write access has exclusive access to the cache entry up to the point at which it marks it as valid. once the cache entry has been "validated", other descriptors with read access may be opened to the cache entry. if you make a request for read_write access to a cache entry, the cache service will downgrade your access to read if there is already a cache entry descriptor open with write access. if you make a request for only write access to a cache entry and another descriptor with write access is currently open, then the existing cache entry will be 'doomed', and you will be given a descriptor (with write access only) to a new cache entry. ...

nsICookie
. policy nscookiepolicy holds the sites compact policy value. read only. status nscookiestatus holds the p3p status of cookie. read only. value acstring the cookie value. read only. constants constant value description status_unknown 0 the cookie collected in a previous session, and its information no longer exists. available status_accepted 1 the cookie was accepted. status_downgraded 2 the cookie was accepted but downgraded to a session cookie. status_flagged 3 the cookie was not accepted. status_rejected 4 the cookie was rejected. policy_unknown 0 the cookie collected in a previous session, and its information no longer available. policy_none 1 the site did not send a compact policy along with the cookie. policy_no_consent 2 the site collects identifiable informa...

nsICookiePermission
ess values: access_default, access_allow, or access_deny. cansetcookie() tests whether or not the given uri/channel may set a specific cookie. this method is always preceded by a call to canaccess(). it may modify the issession and expiry attributes of the cookie via the aissession and aexpiry parameters, in order to limit or extend the lifetime of the cookie. this is useful, for instance, to downgrade a cookie to session-only if it fails to meet certain criteria. boolean cansetcookie( in nsiuri auri, in nsichannel achannel, in nsicookie2 acookie, inout boolean aissession, inout print64 aexpiry ); parameters auri the uri trying to set the cookie. achannel the channel corresponding to auri. acookie the cookie being added to the cookie database. aissession when cansetcookie is invoke...

nsINavHistoryResultObserver
ethods batching() lets the observer know when a batch operation in places is about to start or end. the observer can then pause updates or events until the batch is completed, so that it won't handle the large number of updates that are about to be notified. this is especially useful when updating user interfaces, to avoid flicker or continuous selection changes, which may result in performance degradation (for example, if updating a view for each update). void batching( in boolean atogglemode ); parameters atogglemode specify true to start batch mode or false to finish the batch. containerclosed() obsolete since gecko 11.0 (firefox 11.0 / thunderbird 11.0 / seamonkey 2.8) called when a container node's state changes from opened to closed. note: this method was d...

nsIObserver
once you're ready to start observing (for example a window's load event). observer = new myobserver(); destruction - this should be fired once you're done observing (for example a window's unload event). failure to do so may result in memory leaks. observer.unregister(); "get everything" - note that "*" is an acceptable value (be careful with this, because it observes many events, and can degrade performance). observer.register("*"); see also nsiobserverservice observer_notifications ...

nsIPrincipal
base or certificate principal. this may change in a future release; note that nsiprincipal is unfrozen, not slated to be frozen. xxxbz except see bug 147145! note: for the future: perhaps we should consider a certificate principal for a given uri subsuming a codebase principal for the same uri? not sure what the immediate benefit would be, but i think the setup could make some code (e.g. maybedowngradetocodebase) clearer. boolean subsumes( in nsiprincipal other ); parameters other missing description return value true if this principal subsumes the specified principal; otherwise false. ...

XPCOM Interface Reference
oadernsiframeloaderownernsiframemessagelistenernsiframemessagemanagernsiframescriptloadernsigsettingscollectionnsigsettingsservicensigeolocationprovidernsigeolocationupdatensiglobalhistorynsiglobalhistory2nsiglobalhistory3nsihtmleditornsihttpheaderlistenernsihapticfeedbacknsihttpactivitydistributornsihttpactivityobservernsihttpchannelnsihttpchannelinternalnsihttpheadervisitornsihttpservernsihttpupgradelistenernsiidnservicensiiframeboxobjectnsiiniparsernsiiniparserfactorynsiiniparserwriternsiioservicensiidleservicensiinprocesscontentframemessagemanagernsiinputstreamnsiinputstreamcallbacknsiinstalllocationnsiinterfacerequestornsijscidnsijsidnsijsiidnsijsonnsijetpacknsijetpackservicensijumplistbuildernsijumplistitemnsilivemarkservicensiloadgroupnsilocalfilensilocalfilemacnsilocalensilocaleservice...

XPCOM
ronment 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.aggregating the in-memory datasourcealready_addrefedalready_addrefed in association with nscomptr allows you to assign in a pointer without addrefing it.binary compatibilityif 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.bundling multiple binary componentsbinary xpcom components are sometimes required to implement low-level features for extensions. since binary components a...

Zombie compartments
rtments disappearing. explicitly minimizing the memory (a couple of times), i.e. running the garbage collector, with the corresponding about:memory button will help. zombie compartments sometimes, due to bugs in firefox, the add-on sdk and/or add-ons, compartments are created that are never destroyed. these are a particular kind of memory leak, and they cause firefox's memory usage to increase gradually over time, slowing it down and making it more likely to crash. reactive checking if you look at about:memory and you see a compartment for www.foo.com, but you closed your last www.foo.com tab a while ago, there's a good chance you're seeing a zombie compartment. follow these steps to make a more conclusive diagnosis. restart the browser. open the page that you think might cause a zom...

Working with data
type. for that reason, 64-bit and pointer-sized c values of numeric types don't get automatically converted to javascript numbers. instead, they're converted to javascript objects that you can manipulate using the methods provided by the int64 and uint64 objects. note: these 64-bit integer types are intentionally low on features, so that when javascript adds a "big number" type, we can easily upgrade to support that properly. creating 64-bit integer objects to create a new 64-bit number object, use the ctypes.int64.int64() method to create a new 64-bit signed integer, or the ctypes.uint64.uint64() method to create a new unsigned 64-bit integer. for example: var num1 = ctypes.uint64(5000); var num2 = ctypes.int64(-42); if you need to create a 64-bit integer whose value can't be represent...

Plugins
ent should not be written using flash or any other plugin technology. roadmap plugin roadmap information about the roadmap for adobe flash and other plugin support in firefox. roadmap highlights since firefox 52, plugins other than flash are not loaded by firefox. starting in firefox 55, users will be asked to choose which sites may use flash content. this feature will be rolled out gradually to firefox users. also from firefox 55 onwards, flash and other plugins can no longer be loaded from any url scheme except for http:// and https:// (bug 1335475). see also flash can now be loaded only from http/https for more useful information. starting with firefox 56 in september 2017, firefox for android will remove all support for plugins (bug 1381916). tutorials and references ...

Accessibility Inspector - Firefox Developer Tools
or contrast for details about recommended contrast ratios. for example: the color contrast in the image above is 2.86, so potentially not enough contrast to make it easy to read. notice the warning symbol that indicates that the contrast fails to meet the acceptable contrast ratio. as of firefox 65, viewing this information for some foreground text that has a complex background image (e.g. a gradient) gives you a range of color contrast values. for example: in this example, the contrast ranges from 4.72 to 5.98. the numbers are followed by aaa and a checkmark in green, indicating that the large text has a contrast ratio of 4.5:1 or more, meeting the criteria for enhanced contrast, or level aaa. see color contrast for more information on color contrast. accessibility picker like the ...

Debugger.Object - Firefox Developer Tools
ues appropriate for direct use by debuggee code, without using invocation functions. this method pierces the membrane of debugger.object instances meant to protect debugger code from debuggee code, and allows debugger code to access debuggee objects through the standard cross-compartment wrappers, rather than via debugger.object’s reflection-oriented interfaces. this method makes it easier to gradually adapt large code bases to this debugger api: adapted portions of the code can use debugger.object instances, but use this method to pass direct object references to code that has not yet been updated. forcelexicalinitializationbyname(binding) ifbinding is in an uninitialized state initialize it to undefined and return true, otherwise do nothing and return false. source metadata gene...

Debugger.Object - Firefox Developer Tools
alues appropriate for direct use by debuggee code, without using invocation functions. this method pierces the membrane of debugger.object instances meant to protect debugger code from debuggee code, and allows debugger code to access debuggee objects through the standard cross-compartment wrappers, rather than via debugger.object's reflection-oriented interfaces. this method makes it easier to gradually adapt large code bases to this debugger api: adapted portions of the code can use debugger.object instances, but use this method to pass direct object references to code that has not yet been updated. ...

Network monitor toolbar - Firefox Developer Tools
somewhat differently.) it provides: an icon to clear the network request list. a box enabling you to filter requests by url and by properties. a set of tool icons: pause (or resume) recording network log search the log request blocking an array of buttons to filter the network request list by type: by the content type of the response xhr requests websocket upgrades and messages (labeled ws) other requests a checkbox that allows you to disable caching. throttling menu, to simulate various connection types a menu of other actions: persist logs: by default, the network monitor is cleared each time you navigate to a new page or reload the current page. when you select persist logs, the log is not cleared on page load. import har imports a ...

Work with animations - Firefox Developer Tools
nd the browser icon. the img#icon animation: animated the filter and transform properties, to scale the icon and color it lasted 750ms, had an enddelay of 100ms used the compositor thread was given an easing value of ease-in: you can see this by the concave shape of the green bar. the span#note animation: animated the width and opacity properties, to make the name gradually appear lasted 500ms, and had a delay of 150ms was given an easing value of ease-out: you can see this by the convex shape of the green bar. animation playback at the top of the animation inspector: there are buttons to play/pause and restart the animation there's a dropdown to change the animation playback rate the current time in the animation is displayed. finally, if ...

Animating CSS properties - Firefox Developer Tools
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 performance tool, and make a recording. you'll only need to record a few seconds. open up the first recording. exactly what you'll see depends ...

about:debugging - Firefox Developer Tools
...

AudioParam.exponentialRampToValueAtTime() - Web APIs
the change starts at the time specified for the previous event, follows an exponential ramp to the new value given in the value parameter, and reaches the new value at the time given in the endtime parameter. note: exponential ramps are considered more useful when changing frequencies or playback rates than linear ramps because of the way the human ear works. syntax var audioparam = audioparam.exponentialramptovalueattime(value, endtime) parameters value a floating point number representing the value the audioparam will ramp to by the given time. ...

AudioParam.linearRampToValueAtTime() - Web APIs
the change starts at the time specified for the previous event, follows a linear ramp to the new value given in the value parameter, and reaches the new value at the time given in the endtime parameter. syntax var audioparam = audioparam.linearramptovalueattime(value, endtime) parameters value a floating point number representing the value the audioparam will ramp to by the given time. endtime a double representing the exact time (in seconds) after the ramping starts that the changing of the value will stop. returns a reference to this audioparam object. ...

AudioParam.setTargetAtTime() - Web APIs
this is useful for decay or release portions of adsr envelopes. syntax var paramref = param.settargetattime(target, starttime, timeconstant); parameters target the value the parameter will start to transition towards at the given start time. starttime the time that the exponential transition will begin, in the same time coordinate system as audiocontext.currenttime. if it is less than or equal to audiocontext.currenttime, the parameter will start changing immediately. timeconstant the time-constant value, given in seconds, of an exponential approach to the target value. ...

AudioParam.value - Web APIs
ich the value is altered. during each render quantum, the browser does the following things related to managing the value of a parameter: if the value setter has been used, the parameter's value is changed to the value given. if the current time equals or exceeds the time specified by a previous call to setvalueattime(), the value is changed to the value passed into setvalueattime(). if any gradiated or ramped value changing methods have been called and the current time is within the time range over which the graduated change should occur, the value is updated based on the appropriate algorithm. these ramped or gradiated value-changing methods include linearramptovalueattime(), settargetattime(), and setvaluecurveattime(). thus, the value of a parameter is maintained to accurately refl...

AudioParam - Web APIs
range. audioparam.value represents the parameter's current value as of the current time; initially set to the value of defaultvalue. methods audioparam.setvalueattime() schedules an instant change to the value of the audioparam at a precise time, as measured against audiocontext.currenttime. the new value is given by the value parameter. audioparam.linearramptovalueattime() schedules a gradual linear change in the value of the audioparam. the change starts at the time specified for the previous event, follows a linear ramp to the new value given in the value parameter, and reaches the new value at the time given in the endtime parameter. audioparam.exponentialramptovalueattime() schedules a gradual exponential change in the value of the audioparam. the change starts at the time sp...

CSS numeric factory functions - Web APIs
umber); css.percent(number); // <length> css.em(number); css.ex(number); css.ch(number); css.ic(number); css.rem(number); css.lh(number); css.rlh(number); css.vw(number); css.vh(number); css.vi(number); css.vb(number); css.vmin(number); css.vmax(number); css.cm(number); css.mm(number); css.q(number); css.in(number); css.pt(number); css.pc(number); css.px(number); // <angle> css.deg(number); css.grad(number); css.rad(number); css.turn(number); // <time> css.s(number); css.ms(number); // <frequency> css.hz(number); css.khz(number); // <resolution> css.dpi(number); css.dpcm(number); css.dppx(number); // <flex> css.fr(number); examples we use the css.vmax() numeric factory function to create a cssunitvalue: let height = css.vmax(50); console.log( height ); // cssunitvalue {value: 5...

CSSImageValue - Web APIs
properties none. methods none. ...

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

CSSPrimitiveValue.primitiveType - Web APIs
ethod. 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 ...

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

CSSPrimitiveValue - Web APIs
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...

Using the CSS Typed Object Model - Web APIs
', 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 - Web APIs
y. 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 ...

Basic animations - Web APIs
(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", ...

Canvas API - Web APIs
2d interface. the fillstyle property makes the rectangle green. the fillrect() method places its top-left corner at (10, 10), and gives it a size of 150 units wide by 100 tall. const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); ctx.fillstyle = 'green'; ctx.fillrect(10, 10, 150, 100); result reference htmlcanvaselement canvasrenderingcontext2d canvasgradient canvasimagesource canvaspattern imagebitmap imagedata renderingcontext textmetrics offscreencanvas path2d imagebitmaprenderingcontext note: the interfaces related to the webglrenderingcontext are referenced under webgl. canvascapturemediastream is a related interface. guides and tutorials canvas tutorial a comprehensive tutorial covering both the basic usage of the c...

Clipboard - Web APIs
writes text to the system clipboard, returning a promise which is resolved once the text is fully copied into the clipboard. clipboard availability the asynchronous clipboard api is a relatively recent addition, and the process of implementing it in browsers is not yet complete. due to both potential security concerns and technical complexities, the process of integrating this api is happening gradually in most browsers. for example, firefox does not yet support the "clipboard-read" and "clipboard-write" permissions, so access to the methods that access and change the contents of the clipboard are restricted in other ways. for webextensions, you can request the clipboardread and clipboardwrite permissions to be able to use clipboard.readtext() and clipboard.writetext(). content scripts ap...

CustomElementRegistry.whenDefined() - Web APIs
st container = document.getelementbyid('menu-container'); const placeholder = container.queryselector('.menu-placeholder'); // fetch all the children of menu that are not yet defined. const undefinedelements = container.queryselectorall(':not(:defined)'); const promises = [...undefinedelements].map( button => customelements.whendefined(button.localname) ); // wait for all the children to be upgraded, // then remove the placeholder. await promise.all(promises); container.removechild(placeholder); specifications specification status comment html living standardthe definition of 'customelements.whendefined()' in that specification. living standard initial definition. ...

CustomElementRegistry - Web APIs
egistry interface provides methods for registering custom elements and querying registered elements. to get an instance of it, use the window.customelements property. methods customelementregistry.define() defines a new custom element. customelementregistry.get() returns the constuctor for the named custom element, or undefined if the custom element is not defined. customelementregistry.upgrade() upgrades a custom element directly, even before it is connected to its shadow root. customelementregistry.whendefined() returns an empty promise that resolves when a custom element becomes defined with the given name. if such a custom element is already defined, the returned promise is immediately fulfilled. examples the following code is taken from our word-count-web-component example (...

Element.getElementsByTagName() - Web APIs
es itself with the dom tree automatically. therefore, there is no need to call element.getelementsbytagname() with the same element and arguments repeatedly if the dom changes in between calls. when called on an html element in an html document, getelementsbytagname lower-cases the argument before searching for it. this is undesirable when trying to match camel-cased svg elements (such as <lineargradient>) in an html document. instead, use element.getelementsbytagnamens(), which preserves the capitalization of the tag name. element.getelementsbytagname is similar to document.getelementsbytagname(), except that it only searches for elements that are descendants of the specified element. syntax elements = element.getelementsbytagname(tagname) elements is a live htmlcollection of elements ...

ExtendableEvent.waitUntil() - Web APIs
vice worker is not considered installed until all of the core caches it depends on are successfully populated. the activate events in service workers use waituntil() to buffer functional events such as fetch and push until the promise passed to waituntil() settles. this gives the service worker time to update database schemas and delete outdated caches, so other events can rely on a completely upgraded state. the waituntil() method must be initially called within the event callback, but after that it can be called multiple times, until all the promises passed to it settle. note: the behaviour described in the above paragraph was fixed in firefox 43 (see bug 1180274). syntax extendableevent.waituntil(promise); parameters a promise. return value undefined. example using waituntil() ...

ExtendableEvent - Web APIs
if waituntil() is called outside of the extendableevent handler, the browser should throw an invalidstateerror; note also that multiple calls will stack up, and the resulting promises will be added to the list of extend lifetime promises. ...

Using Fetch - Web APIs
origin cache: 'no-cache', // *default, no-cache, reload, force-cache, only-if-cached credentials: 'same-origin', // include, *same-origin, omit headers: { 'content-type': 'application/json' // 'content-type': 'application/x-www-form-urlencoded', }, redirect: 'follow', // manual, *follow, error referrerpolicy: 'no-referrer', // no-referrer, *no-referrer-when-downgrade, origin, origin-when-cross-origin, same-origin, strict-origin, strict-origin-when-cross-origin, unsafe-url body: json.stringify(data) // body data type must match "content-type" header }); return response.json(); // parses json response into native javascript objects } postdata('https://example.com/answer', { answer: 42 }) .then(data => { console.log(data); // json data parsed by ...

FileHandle API - Web APIs
ted, the associated file only exists as a "temporary file" as long as you hold the filehandle instance. if you want a file to survive a page refresh/app relaunch, you need to store the handle in a database (not necessarily the one used to create the filehandle object). ...

HTMLIFrameElement.referrerPolicy - Web APIs
the htmliframeelement.referrerpolicy property reflects the html referrerpolicy attribute of the <iframe> element defining which referrer is sent when fetching the resource. syntax refstr = iframeelt.referrerpolicy; iframeelt.referrerpolicy = refstr; values no-referrer the referer header will be omitted entirely. no referrer information is sent along with requests. no-referrer-when-downgrade (default) this is the user agent's default behavior if no policy is specified. the url is sent as a referrer when the protocol security level stays the same (http→http, https→https), but isn't sent to a less secure destination (https→http). origin only send the origin of the document as the referrer in all cases. the document https://example.com/page.html will send the referrer https://ex...

In depth: Microtasks and the JavaScript runtime environment - Web APIs
uting world. a vast number of the most popular applications are based at least in part on javascript code. to support this, it was necessary to find ways to allow for projects to escape the limitations of a single-threaded language. starting with the addition of timeouts and intervals as part of the web api (settimeout() and setinterval()), the javascript environment provided by web browsers has gradually advanced to include powerful features that enable scheduling of tasks, multi-threaded application development, and so forth. to understand where queuemicrotask() comes into play here, it's helpful to understand how the javascript runtime operates when scheduling and running code. javascript execution contexts note: the details here are generally not important to most javascript programmer...

The HTML DOM API - Web APIs
interfaces provide structure and functionality required by the elements used to create and manage forms, including the <form> and <input> elements. formdataevent htmlformcontrolscollection htmloptionscollection radionodelist validitystate canvas and image interfaces these interfaces represent objects used by the canvas api as well as the <img> element and <picture> elements. canvasgradient canvaspattern canvasrenderingcontext2d imagebitmap imagebitmaprenderingcontext imagedata offscreencanvas offscreencanvasrenderingcontext2d path2d textmetrics media interfaces the media interfaces provide html access to the contents of the media elements: <audio> and <video>. audiotrack audiotracklist mediaerror texttrack texttrackcue texttrackcuelist texttracklist time...

Ajax navigation example - Web APIs
"precondition failed", 413: "request entity too large", 414: "request-uri too long", 415: "unsupported media type", 416: "requested range not satisfiable", 417: "expectation failed", 422: "unprocessable entity", 423: "locked", 424: "failed dependency", 425: "unassigned", 426: "upgrade required", 427: "unassigned", 428: "precondition required", 429: "too many requests", 430: "unassigned", 431: "request header fields too large", 500: "internal server error", 501: "not implemented", 502: "bad gateway", 503: "service unavailable", 504: "gateway timeout", ...

IDBDatabase.createObjectStore() - Web APIs
rray containing an empty string. example // let us open our database var request = window.indexeddb.open("todolist", 4); // this handler is called when a new version of the database // is created, either when one has not been created before // or when a new version number is submitted by calling // window.indexeddb.open(). // this handler is only supported in recent browsers. ...

IDBDatabase.deleteObjectStore() - Web APIs
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 you are trying to delete an object store that does not exist. names are case sensitive. example var dbname = "sampledb"; var dbversion = 2; var request = indexeddb.open(dbname, dbversion); request.onupgradeneeded = function(e) { var db = request.result; if (e.oldversion < 1) { db.createobjectstore("store1"); } if (e.oldversion < 2) { db.deleteobjectstore("store1"); db.createobjectstore("store2"); } // etc. for version < 3, 4... }; specification specification status comment indexed database api 2.0the definition of 'deleteobjectstore()' in that spe...

IDBFactory.open() - Web APIs
performs the open operation asynchronously. if the operation is successful, a success event is fired on the request object that is returned from this method, with its result attribute set to the new idbdatabase object for the connection. if an error occurs while the database connection is being opened, then an error event is fired on the request object returned from this method. may trigger upgradeneeded, blocked or versionchange events. note: this feature is available in web workers. syntax for the current standard: var idbopendbrequest = indexeddb.open(name); var idbopendbrequest = indexeddb.open(name, version); parameters name the name of the database. version optional optional. the version to open the database with. if the version is not provided and the database exists, th...

IDBIndex.name - Web APIs
mes the index. note: this feature is available in web workers. syntax var indexname = idbindex.name; idbindex.name = indexname; value a domstring specifying a name for the index. exceptions there are a several exceptions which can occur when you attempt to change an index's name. invalidstateerror the index, or its object store, has been deleted; or the current transaction is not an upgrade transaction. you can only rename indexes during upgrade transactions; that is, when the mode is "versionchange". transactioninactiveerror the current transaction is not active. constrainterror an index is already using the specified name. example in the following example we open a transaction and an object store, then get the index lname from a simple contacts database. we then open a bas...

IDBObjectStore.name - Web APIs
this feature is available in web workers. syntax idbobjectstore.name = mynewname; var myobjectstorename = idbobjectstore.name; value a domstring containing the object store's name. exceptions there are a several exceptions which can occur when you attempt to change an object store's name. invalidstateerror either the object store has been deleted or the current transaction is not an upgrade transaction; you can only rename indexes during upgrade transactions; that is, when the mode is "versionchange". transactioninactiveerror the current transaction is not active. constrainterror an object store is already using the specified name. example in the following code snippet, we open a read/write transaction on our database and add some data to an object store using add(). after t...

IDBRequest - Web APIs
ory.open), it returns null. idbrequest.readystate read only the state of the request. every request starts in the pending state. the state changes to done when the request completes successfully or when an error occurs. idbrequest.transaction read only the transaction for the request. this property can be null for certain requests, for example those returned from idbfactory.open unless an upgrade is needed. (you're just connecting to a database, so there is no transaction to return). methods no methods, but inherits methods from eventtarget. events listen to these events using addeventlistener() or by assigning an event listener to the oneventname property of this interface. error fired when an error caused a request to fail. also available via the onerror property. success f...

IDBTransaction.mode - Web APIs
ata in existing data stores to be changed. versionchange allows any operation to be performed, including ones that delete and create object stores and indexes. this mode is for updating the version number of transactions that were started using idbdatabase.setversion(). transactions of this mode cannot run concurrently with other transactions. transactions in this mode are known as "upgrade transactions." example in the following code snippet, we open a read/write transaction on our database and add some data to an object store. note also the functions attached to transaction event handlers to report on the outcome of the transaction opening in the event of success or failure. at the end, we simply log the mode of the current transaction using mode. for a full working examp...

IDBTransaction - Web APIs
"versionchange" (2 in chrome) allows any operation to be performed, including ones that delete and create object stores and indexes. this mode is for updating the version number of transactions that were started using the setversion() method of idbdatabase objects. transactions of this mode cannot run concurrently with other transactions. transactions in this mode are known as "upgrade transactions." even if these constants are now deprecated, you can still use them to provide backward compatibility if required (in chrome the change was made in version 21). you should code defensively in case the object is not available anymore: var myidbtransaction = window.idbtransaction || window.webkitidbtransaction || { read_write: "readwrite" }; examples in the following code s...

IDBVersionChangeEvent.oldVersion - Web APIs
ionchangeevent interface returns the old version number of the database. when the opened database doesn't exist yet, the value of oldversion is 0. note: this feature is available in web workers. syntax var oldversion = idbversionchangeevent.oldversion value a 64-bit integer. example var dbname = "sampledb"; var dbversion = 2; var request = indexeddb.open(dbname, dbversion); request.onupgradeneeded = function(e) { var db = request.result; if (e.oldversion < 1) { db.createobjectstore("store1"); } if (e.oldversion < 2) { db.deleteobjectstore("store1"); db.createobjectstore("store2"); } // etc. for version < 3, 4... }; specifications specification status comment indexed database api 2.0the definition of 'oldversion' in that specificati...

IDBVersionChangeRequest.setVersion() - Web APIs
transaction on the connected database in a separate thread. for older webkit browsers, call this method before creating or deleting an object store. warning: the latest draft of the specification has dropped this method. some not up-to-date browsers still implement this method. the new way is to define the version in the idbdatabase.open() method and create and delete object stores in the onupgradeneeded event handler associated with the returned request. syntax idbversionchangerequest setversion ([treatnullas=emptystring] in domstring version); example tbd parameters version the version to store in the database. returns idbversionchangerequest the request to change the version of a database. browser compatibility the compatibility table on this page is generated from st...

IDBVersionChangeRequest - Web APIs
the idbversionchangerequest interface the indexeddb api represents a request to change the version of a database. it is used only by the setversion() method of idbdatabase. ...

Basic concepts - Web APIs
ys. for the reference documentation on object store, see idbobjectstore. version when a database is first created, its version is the integer 1. each database has one version at a time; a database can't exist in multiple versions at once. the only way to change the version is by opening it with a greater version than the current one. this will start a versionchange transaction and fire an upgradeneeded event. the only place where the schema of the database can be updated is inside the handler of that event. note: this definition describes the most recent specification, which is only implemented in up-to-date browsers. old browsers implemented the now deprecated and removed idbdatabase.setversion() method. database connection an operation created by opening a database. a given database...

Browser storage limits and eviction criteria - Web APIs
ult. note: in firefox, you can find your profile folder by entering about:support in the url bar, and pressing the show in... button (e.g., show in finder on mac os x) next to the profile folder title. note: if you are looking around in your profile at the data stored, you might see a fourth folder: persistent. basically, the persistent folder was renamed to permanent a while ago to keep upgrades/migration simpler. note: users shouldn’t add their own directories or files under <profile>/storage. this will cause storage initialization to fail; for example, open() will fire an error event. storage limits the maximum browser storage space is dynamic — it is based on your hard drive size. the global limit is calculated as 50% of free disk space. in firefox, an internal browser too...

IndexedDB API - Web APIs
rules of the locale specified for a certain index (see createindex()'s optionalparameters.). this interface isn't part of the 2.0 specification. custom event interfaces this specification fires events with the following custom interface: idbversionchangeevent the idbversionchangeevent interface indicates that the version of the database has changed, as the result of an idbopendbrequest.onupgradeneeded event handler function. obsolete interfaces an early version of the specification also defined the following, now removed, interfaces. they are still documented in case you need to update previously written code: idbversionchangerequest represents a request to change the version of a database. the way to change the version of the database has since changed (by calling idbfactory.o...

Using the MediaStream Recording API - Web APIs
't appear in the layout flow and affect the main ui, transform it to the position we want it to sit in by default, and give it a transition for smooth showing/hiding: aside { position: fixed; top: 0; left: 0; text-shadow: 1px 1px 1px black; width: 100%; height: 100%; transform: translatex(100%); transition: 0.6s all; background-color: #999; background-image: linear-gradient(to top right, rgba(0,0,0,0), rgba(0,0,0,0.5)); } last, we write a rule to say that when the checkbox is checked (when we click/focus the label), the adjacent <aside> element will have its horizontal translation value changed and transition smoothly into view: input[type=checkbox]:checked ~ aside { transform: translatex(0); } basic app setup to grab the media stream we want to capture, w...

MimeTypeArray - Web APIs
gin is available for the application/pdf mime type and if so, which plugin that is. var mimetypes = navigator.mimetype; var flashplugin = mimetypes['video/x-flv']; if (typeof flashplugin === "undefined") { var vid = document.createelement('video'); // use vid.canplaytype() to test for a supported mime type. } else { // notify the user that flash is being deprecated and they // should upgrade their browser. } specifications specification status comment html living standardthe definition of 'mimetypearray' in that specification. living standard initial definition. ...

MutationEvent - Web APIs
replacement: the story so far / existing points of consensus" post to public-webapps). mutation observers are the proposed replacement for mutation events in dom4. they are expected to be included in firefox 14 and chrome 18. the practical reasons to avoid the mutation events are performance issues and cross-browser support. performance adding dom mutation listeners to a document profoundly degrades the performance of further dom modifications to that document (making them 1.5 - 7 times slower!). moreover, removing the listeners does not reverse the damage. the performance effect is limited to the documents that have the mutation event listeners. cross-browser support these events are not implemented consistently across different browsers, for example: ie prior to version 9 didn't su...

Navigator.serviceWorker - Web APIs
the feature may not be available in private mode. syntax var workercontainerinstance = navigator.serviceworker; value serviceworkercontainer examples this code checks if the browser supports service workers. ...

Navigator - Web APIs
tion to return a significant value. navigatorplugins.plugins read only returns a pluginarray listing the plugins installed in the browser. navigatorid.product read only always returns 'gecko', on any browser. this property is kept only for compatibility purpose. navigator.serviceworker read only returns a serviceworkercontainer object, which provides access to registration, removal, upgrade, and communication with the serviceworker objects for the associated document. navigatorstorage.storage read only returns the singleton storagemanager object used for managing persistence permissions and estimating available storage on a site-by-site/app-by-app basis. navigatorid.useragent read only returns the user agent string for the current browser. navigator.xr read only returns ...

OES_standard_derivatives - Web APIs
recommendation initial definition. ...

PannerNode.coneInnerAngle - Web APIs
tialised sound, determining the area in which it can be heard: // this value determines the size of the area in which the sound volume is constant // if coneinnerangle == 30, it means that when the sound is rotated // by at most 15 (30/2) degrees either direction, the volume won't change panner.coneinnerangle = 30; // this value determines the size of the area in which the sound volume decreases gradually // if coneouterangle == 45 and coneinnerangle == 30, it means that when the sound is rotated // by between 15 (30/2) and 22.5 (45/2) degrees either direction, // the volume will decrease gradually panner.coneouterangle = 45; // this value determines the volume of the sound outside of both inner and outer cone // setting it to 0 means there is no sound, so we can clearly hear when we leave th...

PannerNode.coneOuterAngle - Web APIs
tialised sound, determining the area in which it can be heard: // this value determines the size of the area in which the sound volume is constant // if coneinnerangle == 30, it means that when the sound is rotated // by at most 15 (30/2) degrees either direction, the volume won't change panner.coneinnerangle = 30; // this value determines the size of the area in which the sound volume decreases gradually // if coneouterangle == 45 and coneinnerangle == 30, it means that when the sound is rotated // by between 15 (30/2) and 22.5 (45/2) degrees either direction, // the volume will decrease gradually panner.coneouterangle = 45; // this value determines the volume of the sound outside of both inner and outer cone // setting it to 0 means there is no sound, so we can clearly hear when we leave th...

PannerNode.coneOuterGain - Web APIs
tialised sound, determining the area in which it can be heard: // this value determines the size of the area in which the sound volume is constant // if coneinnerangle == 30, it means that when the sound is rotated // by at most 15 (30/2) degrees either direction, the volume won't change panner.coneinnerangle = 30; // this value determines the size of the area in which the sound volume decreases gradually // if coneouterangle == 45 and coneinnerangle == 30, it means that when the sound is rotated // by between 15 (30/2) and 22.5 (45/2) degrees either direction, // the volume will decrease gradually panner.coneouterangle = 45; // this value determines the volume of the sound outside of both inner and outer cone // setting it to 0 means there is no sound, so we can clearly hear when we leave th...

PannerNode.orientationX - Web APIs
tialised sound, determining the area in which it can be heard: // this value determines the size of the area in which the sound volume is constant // if coneinnerangle == 30, it means that when the sound is rotated // by at most 15 (30/2) degrees either direction, the volume won't change panner.coneinnerangle = 30; // this value determines the size of the area in which the sound volume decreases gradually // if coneouterangle == 45 and coneinnerangle == 30, it means that when the sound is rotated // by between 15 (30/2) and 22.5 (45/2) degrees either direction, // the volume will decrease gradually panner.coneouterangle = 45; // this value determines the volume of the sound outside of both inner and outer cone // setting it to 0 means there is no sound, so we can clearly hear when we leave th...

PannerNode.orientationY - Web APIs
tialised sound, determining the area in which it can be heard: // this value determines the size of the area in which the sound volume is constant // if coneinnerangle == 30, it means that when the sound is rotated // by at most 15 (30/2) degrees either direction, the volume won't change panner.coneinnerangle = 30; // this value determines the size of the area in which the sound volume decreases gradually // if coneouterangle == 45 and coneinnerangle == 30, it means that when the sound is rotated // by between 15 (30/2) and 22.5 (45/2) degrees either direction, // the volume will decrease gradually panner.coneouterangle = 45; // this value determines the volume of the sound outside of both inner and outer cone // setting it to 0 means there is no sound, so we can clearly hear when we leave th...

PannerNode.orientationZ - Web APIs
tialised sound, determining the area in which it can be heard: // this value determines the size of the area in which the sound volume is constant // if coneinnerangle == 30, it means that when the sound is rotated // by at most 15 (30/2) degrees either direction, the volume won't change panner.coneinnerangle = 30; // this value determines the size of the area in which the sound volume decreases gradually // if coneouterangle == 45 and coneinnerangle == 30, it means that when the sound is rotated // by between 15 (30/2) and 22.5 (45/2) degrees either direction, // the volume will decrease gradually panner.coneouterangle = 45; // this value determines the volume of the sound outside of both inner and outer cone // setting it to 0 means there is no sound, so we can clearly hear when we leave th...

RTCRtpSendParameters - Web APIs
the webrtc api's rtcrtpsendparameters dictionary is used to specify the parameters for an rtcrtpsender when calling its setparameters() method. properties in addition to the properties below, rtcrtpsendparameters inherits the properties from the rtcrtpparameters interface. degradationpreference specifies the preferred way the webrtc layer should handle optimizing bandwidth against quality in constrained-bandwidth situations; the value comes from the rtcdegradationpreference enumerated string type, and the default is balanced. encodings an array of rtcrtpencodingparameters objects, each specifying the parameters for a single codec that could be used to encode the track's media. priority a string from the rtcprioritytype enumerated type which indicates the encoding's priority. the de...

RTCRtpSender.setParameters() - Web APIs
well as the encoding configuration for a specific media track on the webrtc connection. syntax var promise = rtcrtpsender.setparameters(parameters) parameters parameters an object conforming with the rtcrtpsendparameters dictionary, specifying options for the rtcrtpsender; these include potential codecs that could be use for encoding the sender's track. the available options are: degradationpreference specifies the preferred way the webrtc layer should handle optimizing bandwidth against quality in constrained-bandwidth situations; the value comes from the rtcdegradationpreference enumerated string type, and the default is balanced. encodings an array of rtcrtpencodingparameters objects, each specifying the parameters for a single codec that could be used to encode the track'...

SVGAngle - Web APIs
e baseval member of an svganimatedangle), be detached, which is the case for svgangle objects created with svgsvgelement.createsvgangle(). constants svg_angletype_unknown some unknown type of value. svg_angletype_unspecified a unitless <number> interpreted as a value in degrees. svg_angletype_deg an <angle> with a deg unit. svg_angletype_rad an <angle> with a rad unit. svg_angletype_grad an <angle> with a grad unit. properties unittype the type of the value as specified by one of the svg_angletype_* constants defined on this interface. value the value as a floating point value, in user units. setting this attribute will cause valueinspecifiedunits and valueasstring to be updated automatically to reflect this setting. exceptions on setting: a domexception with code no...

SVGUnitTypes - Web APIs
the svgunittypes interface defines a commonly used set of constants used for reflecting gradientunits, patterncontentunits and other similar attributes. <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/svgunittypes" target="_top"><rect x="1" y="1" width="120" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="61" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgunittypes</text></a></svg></div> ...

Sensor APIs - Web APIs
or api is insufficient for feature detection. the existence of an actual sensor must be confirmed as well. this is where defensive programming is needed. defensive programming requires three strategies. checking for thrown errors when instantiating a sensor object. listening for errors thrown during its use. handling the errors gracefully so that the user experience is enhanced rather than degraded. the code example below illustrates these principles. the try...catch block catches errors thrown during sensor instantiation. it implements a handler for sensor.onerror to catch errors thrown during use. the only time anything is shown to the user is when permissions need to be requested and when the sensor type isn't supported by the device. if a feature policy blocks use of a feature it ...

ServiceWorkerGlobalScope: activate event - Web APIs
event of the serviceworkerglobalscope interface is fired when a serviceworkerregistration acquires a new serviceworkerregistration.active worker. bubbles no cancelable no interface extendableevent event handler property serviceworkerglobalscope.onactivate examples the following snippet shows how you could use an activate event handler to upgrade a cache. globalscope.addeventlistener('activate', function(event) { var cachewhitelist = ['v2']; event.waituntil( caches.foreach(function(cache, cachename) { if (cachewhitelist.indexof(cachename) == -1) { return caches.delete(cachename); } }) ); }); you can also set up the event handler using the serviceworkerglobalscope.onactivate property: globalscope.onac...

ServiceWorkerGlobalScope.onactivate - Web APIs
ty of the serviceworkerglobalscope interface is an event handler fired whenever an activate event occurs (when the service worker activates). this happens after installation, when the page to be controlled by the service worker refreshes. syntax serviceworkerglobalscope.onactivate = function(event) { ... }; examples the following snippet shows how you could use an activate event handler to upgrade a cache. then.addeventlistener('activate', function(event) { var cachewhitelist = ['v2']; event.waituntil( caches.foreach(function(cache, cachename) { if (cachewhitelist.indexof(cachename) == -1) { return caches.delete(cachename); } }) ); }); specifications specification status comment service workersthe definition of 'event handlers'...

Streams API - Web APIs
lows javascript to programmatically access streams of data received over the network and process them as desired by the developer. concepts and usage streaming involves breaking a resource that you want to receive over a network down into small chunks, then processing it bit by bit. this is something browsers do anyway when receiving assets to be shown on webpages — videos buffer and more is gradually available to play, and sometimes you'll see images display gradually as more is loaded. but this has never been available to javascript before. previously, if we wanted to process a resource of some kind (be it a video, or a text file, etc.), we'd have to download the entire file, wait for it to be deserialized into a suitable format, then process the whole lot after it is fully received. ...

VideoPlaybackQuality.droppedVideoFrames - Web APIs
ave been dropped rather than being displayed since the last time the media was loaded into the htmlvideoelement. syntax value = videoplaybackquality.droppedvideoframes; value an unsigned 64-bit value indicating the number of frames that have been dropped since the last time the media in the <video> element was loaded or reloaded. this information can be used to determine whether or not to downgrade the video stream to avoid dropping frames. frames are typically dropped either before or after decoding them, when it's determined that it will not be possible to draw them to the screen at the correct time. example this example calls getvideoplaybackquality() to obtain a videoplaybackquality object, then determines what percentage of frames have been dropped. that value is then presented i...

WEBGL_compressed_texture_atc - Web APIs
nd compressedtexsubimage2d(). ext.compressed_rgb_atc_webgl compresses rgb textures with no alpha channel. ext.compressed_rgba_atc_explicit_alpha_webgl compresses rgba textures using explicit alpha encoding (useful when alpha transitions are sharp). ext.compressed_rgba_atc_interpolated_alpha_webgl compresses rgba textures using interpolated alpha encoding (useful when alpha transitions are gradient). examples var ext = gl.getextension('webgl_compressed_texture_atc'); var texture = gl.createtexture(); gl.bindtexture(gl.texture_2d, texture); gl.compressedteximage2d(gl.texture_2d, 0, ext.compressed_rgb_atc_webgl, 512, 512, 0, texturedata); specifications specification status comment webgl_compressed_texture_atcthe definition of 'webgl_compressed_texture_atc'...

WebGL constants - Web APIs
sed_rgb_atc_webgl 0x8c92 compresses rgb textures with no alpha channel. compressed_rgba_atc_explicit_alpha_webgl 0x8c92 compresses rgba textures using explicit alpha encoding (useful when alpha transitions are sharp). compressed_rgba_atc_interpolated_alpha_webgl 0x87ee compresses rgba textures using interpolated alpha encoding (useful when alpha transitions are gradient). webgl_depth_texture constant name value description unsigned_int_24_8_webgl 0x84fa unsigned integer type for 24-bit depth texture data. oes_texture_half_float constant name value description half_float_oes 0x8d61 half floating-point type (16-bit). webgl_color_buffer_float constant name va...

Using shaders to apply color in WebGL - Web APIs
o include it if you create your own project based on this code. our sample loads a copy from a cdn in our html's <head>. applying color to the vertices in webgl objects are built using sets of vertices, each of which has a position and a color. by default, all other pixels' colors (and all its other attributes, including position) are computed using interpolation, automatically creating smooth gradients. previously, our vertex shader didn't apply any specific colors to the vertices. between this and the fragment shader assigning the fixed color of white to each pixel, the entire square was rendered as solid white. let's say we want to render a gradient in which each corner of the square is a different color: red, blue, green, and white. the first thing to do is to establish these colors fo...

WebRTC connectivity - Web APIs
n could reach a dead end, or some form of error might occur that prevents negotiation at all. there may be permissions issues or other problems as well, for that matter. ice rollbacks when renegotiating a connection that's already active and a situation arises in which the negotiation fails, you don't really want to kill the already-running call. after all, you were most likely just trying to upgrade or downgrade the connection, or to otherwise make adaptations to an ongoing session. aborting the call would be an excessive reaction in that situation. instead, you can initiate an ice rollback. a rollback restores the sdp offer (and the connection configuration by extension) to the configuration it had the last time the connection's signalingstate was stable. to programmatically initiate a r...

Signaling and video calling - Web APIs
gree upon a mutually-compatible candidate, that candidate's sdp is used by each peer to construct and open a connection, through which media then begins to flow. if they later agree on a better (usually higher-performance) candidate, the stream may change formats as needed. though not currently supported, a candidate received after media is already flowing could theoretically also be used to downgrade to a lower-bandwidth connection if needed. each ice candidate is sent to the other peer by sending a json message of type "new-ice-candidate" over the signaling server to the remote peer. each candidate message include these fields: type the message type: "new-ice-candidate". target the username of the person with whom negotiation is underway; the server will direct the message to this us...

Writing WebSocket client applications - Web APIs
pen a connection and are flexible about the protocols you support, you can specify an array of protocols: var examplesocket = new websocket("wss://www.example.com/socketserver", ["protocolone", "protocoltwo"]); once the connection is established (that is, readystate is open), examplesocket.protocol will tell you which protocol the server selected. establishing a websocket relies on the http upgrade mechanism, so the request for the protocol upgrade is implicit when we address the web server as ws://www.example.com or wss://www.example.com. sending data to the server once you've opened your connection, you can begin transmitting data to the server. to do this, simply call the websocket object's send() method for each message you want to send: examplesocket.send("here's some text that the...

WindowOrWorkerGlobalScope.fetch() - Web APIs
th an error if a redirect occurs), or manual (handle redirects manually). in chrome the default is follow (before chrome 47 it defaulted to manual). referrer a usvstring specifying the referrer of the request. this can be a same-origin url, about:client, or an empty string. referrerpolicy specifies the referrer policy to use for the request. may be one of no-referrer, no-referrer-when-downgrade, same-origin, origin, strict-origin, origin-when-cross-origin, strict-origin-when-cross-origin, or unsafe-url. integrity contains the subresource integrity value of the request (e.g., sha256-bpfbw7ivv8q2jlit13fxdyae2tjllusrsz273h2nfse=). keepalive the keepalive option can be used to allow the request to outlive the page. fetch with the keepalive flag is a replacement for the navigator.se...

ARIA - Accessibility
as well as the kind of assistive technology interfacing with it. in addition, the version of the operating system, browser, and assistive technology are contributing factors. older software versions may not support certain aria roles, have only partial support, or misreport its functionality. it is also important to acknowledge that some people who rely on assistive technology are reluctant to upgrade their software, for fear of losing the ability to interact with their computer and browser. because of this, it is important to use semantic html elements whenever possible, as semantic html has far better support for assistive technology. it is also important to test your authored aria with actual assistive technology. much as how browser emulators and simulators are not an effective solution ...

Cognitive accessibility - Accessibility
sing correct grammar and spelling. it helps users with cognitive disabilities to provide a text summary (sometimes referred to as a tl;dr; [too long, didn't read]) at a low reading level. another technique you can use is providing accompanying visuals to help explain ideas, events, and processes. there are tools that can rate the level of your content. for example, this document has an average grade level of about 11. this means it should be easily understood by a native english speaker aged 16 to 17. some tools can even provide suggestions to help simplify it. pronunciation there are multiple techniques that can help teach people how to pronounce words: provide the pronunciation immediately following the word. link to a list of pronunciations. provide a glossary with pronunci...

-webkit-mask-box-image - CSS: Cascading Style Sheets
-webkit-mask-box-image sets the mask image for an element's border box. initial value: none applies to: all elements inherited: no media: visual computed value: as specified syntax -webkit-mask-box-image: <mask-box-image> [<top> <right> <bottom> <left> <x-repeat> <y-repeat>] where: <mask-box-image> <uri> | <gradient> | none <top> <right> <bottom> <left> <length> | <percentage> <x-repeat> <y-repeat> repeat | stretch | round | space values <uri> the location of the image resource to be used as a mask image. <gradient> a -webkit-gradient function to be used as a mask image. none used to specify that a border box is to have no mask image. <length> the size of the mask image's offset. see <length> for possible units. <percentage> the mask image's offs...

:-moz-window-inactive - CSS: Cascading Style Sheets
fferent styles to background windows was achieved by setting an attribute (active="true") on the top-level xul chrome window. this attribute is no longer used. syntax :-moz-window-inactive examples this example alters the appearance of a box's background depending on whether its window is active or not. html <div id="mybox"> <p>this is a box!</p> </div> css #mybox { background: linear-gradient(to bottom, yellow, cyan); width: 200px; height: 200px; } #mybox:-moz-window-inactive { background: cyan; } result the result of this code is shown below. you can view this as a separate page as well. specifications not part of any standard. ...

::-webkit-meter-even-less-good-value - CSS: Cascading Style Sheets
imum attributes fall outside the low-high range, but in opposite zones. ...

::-webkit-meter-suboptimum-value - CSS: Cascading Style Sheets
...

Using multi-column layouts - CSS: Cascading Style Sheets
, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum </div> css #column_gap { column-count: 5; column-gap: 2em; } result graceful degradation the column properties will just be ignored by non-columns-supporting browsers. therefore it's relatively easy to create a layout that will display in a single column in those browsers and use multiple columns in supporting browsers. conclusion css3 columns are a layout primitive that will help web developers make the best use of screen real estate. imaginative developers may find many use...

Overview of CSS Shapes - CSS: Cascading Style Sheets
he threshold of image transparency used to define the area of the image used for the shape. if the value of shape-image-threshold is 0.0 (which is the initial value) then the area must be fully transparent. if the value is 1.0 then it is fully opaque. values in between mean that you can set a semi-transparent area as the defining area of the shape. you can see the threshold in action if we use a gradient as the image on which to define our shape. in the example below, if you change the threshold the path that the shape takes changes based on the level of opacity you have selected. we take a deeper look at creating shapes from images in the shapes from images guide. the shape-margin property the shape-margin property adds a margin to shape-outside. this will further shorten the line boxes...

CSS Transitions - CSS: Cascading Style Sheets
the behavior of these transitions can be controlled by specifying their timing function, duration, and other attributes. reference properties transition transition-delay transition-duration transition-property transition-timing-function guides using css transitions step-by-step tutorial about how to create transitions using css. this article describes each relevant css property and explains how they interact with each other. ...

CSS data types - CSS: Cascading Style Sheets
pes defined by the set of css specifications include the following: <angle> <angle-percentage> <angular-color-hint> <angular-color-stop> <attr-fallback> <attr-name> <basic-shape> <blend-mode> <calc-product> <calc-sum> <calc-value> <color> <color-stop> <color-stop-angle> <counter-style> <custom-ident> <dimension> <filter-function> <flex> <frequency> <frequency-percentage> <gradient> <ident> <image> <integer> <length> <length-percentage> <number> <number-percentage> <percentage> <position> <quote> <ratio> <resolution> <shape-box> <shape-radius> <string> <time> <time-percentage> <timing-function> <toggle-value> <transform-function> <type-or-unit> <url> <url-modifier> <zero> specifications specification status comment ...

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. the animatable properties are: -moz-outline-radius -moz-outline-radius-bottomleft -moz-outline-radius-bottomright -moz-outline-radius-topleft -moz-outline-radius-topright -webkit-line-clamp -webkit-text-fill-color -webkit-text-stroke -webkit-text-stroke-color all backdrop-filter background background-color background-position background-size block-size border border-block-end border-block-end-color border-block-end-width border-block-start border-block-start-color border-block-start-width border-b...

Scaling of SVG backgrounds - CSS: Cascading Style Sheets
ample source images that have different dimensions and sizing settings. in each case, we show what the source image looks like rendered in a 150x150 box, and provide a link to the svg source. dimensionless and proportionless this image is both dimensionless and proportionless. it doesn't care what size it is, nor does it care about remaining at a particular aspect ratio. this would make a good gradient desktop background that would work regardless of your screen size and its aspect ratio. svg source one specified dimension and proportionless this image specifies a width of 100 pixels but no height or intrinsic ratio. this is, basically, a thin strip of wallpaper that could be stretched across the entire height of a block. svg source one specified dimension with intrinsic ratio thi...

Tools - CSS: Cascading Style Sheets
hat can be tricky to use, or have a number of parameters, so that it's helpful to be able to visualize them while you work on them. this page offers links to a number of useful tools that will help you build the css to style your content using these features. cubic bezier generatorthis is a sample tool; it lets you edit bezier curves. this is not really yet a useful tool, but will be!linear-gradient generatorthis tool can be used to create custom css3 linear-gradient() backgrounds. other tools css animation - stylie to check the device display information (helpful in responsive web design) - mydevice.io css menus - cssmenumaker.com a mighty, modern css linter that helps you enforce consistent conventions and avoid errors in your stylesheets - stylelint ...

CSS Tutorials - CSS: Cascading Style Sheets
keyframes, and to transition between them defining an animation. css transitions css3 transitions allow you to define an animation between several styles and to control the way this transition happens. css transforms transforms allow you to change the position of elements by modifying their coordinate space: it allows for translating, rotating, and deforming them in the 2d or 3d spaces. css gradients gradients are images that transition smoothly from one color to another. there are several types of gradients allowed in css: linear or radial, repeating or not. this tutorial describes how to use them. advanced-level css tutorials css also got new features allowing you to create complex layouts. though the simplest way to achieve such layout, they are more complex to use for people with...

animation - CSS: Cascading Style Sheets
tart | end examples cylon eye <div class="view_port"> <div class="polling_message"> listening for dispatches </div> <div class="cylon_eye"></div> </div> .polling_message { color: white; float: left; margin-right: 2%; } .view_port { background-color: black; height: 25px; width: 100%; overflow: hidden; } .cylon_eye { background-color: red; background-image: linear-gradient(to right, rgba(0, 0, 0, .9) 25%, rgba(0, 0, 0, .1) 50%, rgba(0, 0, 0, .9) 75%); color: white; height: 100%; width: 20%; -webkit-animation: 4s linear 0s infinite alternate move_eye; animation: 4s linear 0s infinite alternate move_eye; } @-webkit-keyframes move_eye { from { margin-left: -20%; } to { margin-left: 100%; } } @keyframes move_eye { from...

backdrop-filter - CSS: Cascading Style Sheets
.box { background-color: rgba(255, 255, 255, 0.3); border-radius: 5px; font-family: sans-serif; text-align: center; line-height: 1; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); max-width: 50%; max-height: 50%; padding: 20px 40px; } html, body { height: 100%; width: 100%; } body { background-image: url(https://picsum.photos/id/1080/6858/4574), linear-gradient(rgb(219, 166, 166), rgb(0, 0, 172)); background-position: center center; background-repeat: no-repeat; background-size: cover; } .container { align-items: center; display: flex; justify-content: center; height: 100%; width: 100%; } html <div class="container"> <div class="box"> <p>backdrop-filter: blur(10px)</p> </div> </div> result specifications spe...

background-clip - CSS: Cascading Style Sheets
nd extends behind the border.</p> <p class="padding-box">the background extends to the inside edge of the border.</p> <p class="content-box">the background extends only to the edge of the content box.</p> <p class="text">the background is clipped to the foreground text.</p> css p { border: .8em darkviolet; border-style: dotted double; margin: 1em 0; padding: 1.4em; background: linear-gradient(60deg, red, yellow, red, yellow, red); font: 900 1.2em sans-serif; text-decoration: underline; } .border-box { background-clip: border-box; } .padding-box { background-clip: padding-box; } .content-box { background-clip: content-box; } .text { background-clip: text; -webkit-background-clip: text; color: rgba(0,0,0,.2); } result specifications specification status ...

<basic-shape> - CSS: Cascading Style Sheets
command as real numbers. in all other cases no interpolation occurs. examples animated polygon in this example, we use the @keyframes at-rule to animate a clip path between two polygons. note that both polygons have the same number of vertices, which is necessary for this type of animation to work. ...

border-image-outset - CSS: Cascading Style Sheets
candidate recommendation initial definition ...

box-decoration-break - CSS: Cascading Style Sheets
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...

color - CSS: Cascading Style Sheets
sl()> values */ color: hsl(30, 100%, 50%, 0.6); color: hsla(30, 100%, 50%, 0.6); color: hsl(30 100% 50% / 0.6); color: hsla(30 100% 50% / 0.6); color: hsl(30.0 100% 50% / 60%); color: hsla(30.2 100% 50% / 60%); /* global values */ color: inherit; color: initial; color: unset; the color property is specified as a single <color> value. note that the value must be a uniform color. it can't be a <gradient>, which is actually a type of <image>. values <color> sets the color of the textual and decorative parts of the element. accessibility concerns it is important to ensure that the contrast ratio between the color of the text and the background the text is placed over is high enough that people experiencing low vision conditions will be able to read the content of the page. color contr...

image-rendering - CSS: Cascading Style Sheets
f the image. in particular, scaling algorithms that "smooth" colors are acceptable, such as bilinear interpolation. this is intended for images such as photos. high-quality identical to smooth, but with a preference for higher-quality scaling. if system resources are constrained, images with high-quality should be prioritized over those with any other value, when considering which images to degrade the quality of and to what degree. crisp-edges the image must be scaled with an algorithm that preserves contrast and edges in the image, and which does not smooth colors or introduce blur to the image in the process. suitable algorithms include nearest-neighbor and other non-smoothing scaling algorithms such as 2×sai and hqx-family algorithms. this value is intended for pixel-art images, suc...

image-set() - CSS: Cascading Style Sheets
pport partial support partial support no support no supportsee 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() element() <url> <gradient> cross-fade() ...

justify-content - CSS: Cascading Style Sheets
t-distribution> = space-between | space-around | space-evenly | stretch<overflow-position> = unsafe | safe<content-position> = center | start | end | flex-start | flex-end examples setting flex item distribution css #container { display: flex; justify-content: space-between; /* can be changed in the live sample */ } #container > div { width: 100px; height: 100px; background: linear-gradient(-45deg, #788cff, #b4c8ff); } html <div id="container"> <div></div> <div></div> <div></div> </div> <select id="justifycontent"> <option value="start">start</option> <option value="end">end</option> <option value="flex-start">flex-start</option> <option value="flex-end">flex-end</option> <option value="center">center</option> <option value="left">left</option> <option va...

mask-mode - CSS: Cascading Style Sheets
on initial valuematch-sourceapplies toall elements; in svg, it applies to container elements excluding the defs element and all graphics elementsinheritednocomputed valueas specifiedanimation typediscrete formal syntax <masking-mode>#where <masking-mode> = alpha | luminance | match-source examples using alpha mask mode css #masked { width: 227px; height: 200px; background: blue linear-gradient(red, blue); mask-image: url(https://mdn.mozillademos.org/files/12668/mdn.svg); mask-mode: alpha; /* can be changed in the live sample */ } html <div id="masked"> </div> <select id="maskmode"> <option value="alpha">alpha</option> <option value="luminance">luminance</option> <option value="match-source">match-source</option> </select> javascript var maskmode = document.geteleme...

mask-position - CSS: Cascading Style Sheets
ight | <length-percentage> ] [ top | center | bottom | <length-percentage> ]? ...

mask-repeat - CSS: Cascading Style Sheets
container elements excluding the defs element and all graphics elementsinheritednocomputed valueconsists of two keywords, one per dimensionanimation typediscrete formal syntax <repeat-style>#where <repeat-style> = repeat-x | repeat-y | [ repeat | space | round | no-repeat ]{1,2} examples setting repeat for a single mask css #masked { width: 250px; height: 250px; background: blue linear-gradient(red, blue); mask-image: url(https://mdn.mozillademos.org/files/12676/star.svg); mask-repeat: repeat; /* can be changed in the live sample */ margin-bottom: 10px; } html content <div id="masked"> </div> <select id="repetition"> <option value="repeat-x">repeat-x</option> <option value="repeat-y">repeat-y</option> <option value="repeat" selected>repeat</option> <option value="s...

<transform-function> - CSS: Cascading Style Sheets
latey(100px)</option> <option>translatez(100px)</option> <option>translate3d(50px, 50px, 50px)</option> <option>perspective(200px)</option> <option>matrix(1, 2, -1, 1, 80, 80)</option> <option>matrix3d(1,0,0,0,0,1,3,0,0,0,1,0,50,100,0,1.1)</option> </select> </div> </main> css main { width: 400px; height: 200px; padding: 50px; background-image: linear-gradient(135deg, white, cyan, white); } #example-element { width: 100px; height: 100px; transform-style: preserve-3d; transition: transform 1.5s; transform: rotate3d(1, 1, 1, 30deg); } .face { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; position: absolute; backface-visibility: inherit; font-size: 60px; color: #fff; } .front { ...

url() - CSS: Cascading Style Sheets
} @import url("https://www.example.com/style.css"); @namespace url(http://www.w3.org/1999/xhtml); relative urls, if used, are relative to the url of the stylesheet ...

Mutation events - Developer guides
replacement: the story so far / existing points of consensus" post to public-webapps). mutation observers are the proposed replacement for mutation events in dom4. they are expected to be included in firefox 14 and chrome 18. the practical reasons to avoid the mutation events are performance issues and cross-browser support. performance adding dom mutation listeners to a document profoundly degrades the performance of further dom modifications to that document (making them 1.5 - 7 times slower!). moreover, removing the listeners does not reverse the damage. the performance effect is limited to the documents that have the mutation event listeners. cross-browser support these events are not implemented consistently across different browsers, for example: ie prior to version 9 didn't su...

HTML attribute: minlength - HTML: Hypertext Markup Language
abel> <input type="text" minlength="5" id="fruit"> we can use pseudoclasses to style the element based on whether the value is valid. the value will be valid as long as it is either null (empty) or five or more characters long. lime is invalid, lemon is valid. input { border: 2px solid currentcolor; } input:invalid { border: 2px dashed red; } input:invalid:focus { background-image: linear-gradient(pink, lightgreen); } specifications specification status html living standardthe definition of 'minlength attribute' in that specification. living standard html 5.1the definition of 'minlength attribute' in that specification. recommendation ...

Date and time formats used in HTML - HTML: Hypertext Markup Language
se to correct. the adjustments to the algorithm (taking a leap year when the year can be divided by 400, and skipping leap years when the year is divisible by 100) help to bring the average even closer to the correct number of days (365.2425 days). scientists occasionally add leap seconds to the calendar (seriously) to handle the remaining three ten-thousandths of a day and to compensate for the gradual, naturally occurring slowing of earth's rotation. while month 02, february, normally has 28 days, it has 29 days in leap years. months of the year there are 12 months in the year, numbered 1 through 12. they are always represented by a two-digit ascii string whose value ranges from 01 through 12. see the table in the section days of the month for the month numbers and their corresponding na...

<area> - HTML: Hypertext Markup Language
ibute is present. ping contains a space-separated list of urls to which, when the hyperlink is followed, post requests with the body ping will be sent by the browser (in the background). typically used for tracking. referrerpolicy a string indicating which referrer to use when fetching the resource: "no-referrer" meaning that the referer: header will not be sent. "no-referrer-when-downgrade" meaning that no referer: header will be sent when navigating to an origin without tls (https). this is a user agent’s default behavior, if no policy is otherwise specified. "origin" meaning that the referrer will be the origin of the page, that is roughly the scheme, the host and the port. "origin-when-cross-origin" meaning that navigations to other origins will be limited to the scheme, ...

<div>: The Content Division element - HTML: Hypertext Markup Language
applying a style to the <div> using css. note the use of the class attribute on the <div> to apply the style named "shadowbox" to the element. html <div class="shadowbox"> <p>here's a very interesting note displayed in a lovely shadowed box.</p> </div> css .shadowbox { width: 15em; border: 1px solid #333; box-shadow: 8px 8px 5px #444; padding: 8px 12px; background-image: linear-gradient(180deg, #fff, #ddd 40%, #ccc); } result specifications specification status comment html living standardthe definition of '<div>' in that specification. living standard no changes since the latest snapshot html5the definition of '<div>' in that specification. recommendation obsoleted align html 4.01 specificationthe definition of ...

<iframe>: The Inline Frame element - HTML: Hypertext Markup Language
e for the embedded browsing context. this can be used in the target attribute of the <a>, <form>, or <base> elements; the formtarget attribute of the <input> or <button> elements; or the windowname parameter in the window.open() method. referrerpolicy indicates which referrer to send when fetching the frame's resource: no-referrer: the referer header will not be sent. no-referrer-when-downgrade (default): the referer header will not be sent to origins without tls (https). origin: the sent referrer will be limited to the origin of the referring page: its scheme, host, and port. origin-when-cross-origin: the referrer sent to other origins will be limited to the scheme, the host, and the port. navigations on the same origin will still include the path. same-origin: a referrer will b...

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

<link>: The External Resource Link element - HTML: Hypertext Markup Language
of the allowed values of html 4. browsers not supporting css3 media queries won't necessarily recognize the adequate link; do not forget to set fallback links, the restricted set of media queries defined in html 4. referrerpolicy a string indicating which referrer to use when fetching the resource: no-referrer means that the referer header will not be sent. no-referrer-when-downgrade means that no referer header will be sent when navigating to an origin without tls (https). this is a user agent’s default behavior, if no policy is otherwise specified. origin means that the referrer will be the origin of the page, which is roughly the scheme, the host, and the port. origin-when-cross-origin means that navigating to other origins will be limited to the scheme, the host, a...

Standard metadata names - HTML: Hypertext Markup Language
generated the page. keywords: words relevant to the page's content separated by commas. referrer: controls the http referer header for to requests sent from the document: values for the content attribute of <meta name="referrer"> no-referrer do not send a http referer header. origin send the origin of the document. no-referrer-when-downgrade send the full url when the destination is at least as secure as the current page (http(s)→https), but send no referrer when it's less secure (https→http). this is the default behaviour. origin-when-cross-origin send the full url (stripped of parameters) for same-origin requests, but only send the origin for other cases. same-origin send the full u...

MIME types (IANA media types) - HTTP
" name="myfile" value="test.txt"></label> <button>send the file</button> </form> will send this message: post / http/1.1 host: localhost:8000 user-agent: mozilla/5.0 (macintosh; intel mac os x 10.9; rv:50.0) gecko/20100101 firefox/50.0 accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8 accept-language: en-us,en;q=0.5 accept-encoding: gzip, deflate connection: keep-alive upgrade-insecure-requests: 1 content-type: multipart/form-data; boundary=---------------------------8721656041911415653955004498 content-length: 465 -----------------------------8721656041911415653955004498 content-disposition: form-data; name="mytextfield" test -----------------------------8721656041911415653955004498 content-disposition: form-data; name="mycheckbox" on -----------------------------...

Browser detection using the user agent - HTTP
u would use new regexp("(?<=look_behind_stuff)"); instead of /(?<=look_behind_stuff)/, even in the lookbehind supported section of your code. progressive enhancement this design technique involves developing your web site in 'layers', using a bottom-up approach, starting with a simpler layer and improving the capabilities of the site in successive layers, each using more features. graceful degradation this is a top-down approach in which you build the best possible site using all the features you want, then tweak it to make it work on older browsers. this can be harder to do, and less effective, than progressive enhancement, but may be useful in some cases. mobile device detection arguably the most common use and misuse of user agent sniffing is to detect if the device is a mobile devi...

Access-Control-Allow-Headers - HTTP
ow-headers header might look like. it indicates that in addition to the cors-safelisted request headers, a custom header named x-custom-header is supported by cors requests to the server. access-control-allow-headers: x-custom-header multiple headers this example shows access-control-allow-headers when it specifies support for multiple headers. access-control-allow-headers: x-custom-header, upgrade-insecure-requests bypassing additional restrictions although cors-safelisted request headers are always allowed and don't usually need to be listed in access-control-allow-headers, listing them anyway will circumvent the additional restrictions that apply. access-control-allow-headers: accept example preflight request let's look at an example of a preflight request involving access-control-...

Connection - HTTP
uent requests to the same server to be done. connection-specific header fields such as connection and keep-alive are prohibited in http/2. chrome and firefox ignore them in http/2 responses, but safari conforms to the http/2 spec requirements and won’t load any response which contains them. except for the standard hop-by-hop headers (keep-alive, transfer-encoding, te, connection, trailer, upgrade, proxy-authorization and proxy-authenticate), any hop-by-hop headers used by the message must be listed in the connection header, so that the first proxy knows it has to consume them and not forward them further. standard hop-by-hop headers can be listed too (it is often the case of keep-alive, but this is not mandatory). header type general header forbidden header name ...

CSP: block-all-mixed-content - HTTP
the http content-security-policy (csp) block-all-mixed-content directive prevents loading any assets over http when the page uses https. all mixed content resource requests are blocked, including both active and passive mixed content. this also applies to <iframe> documents, ensuring the entire page is mixed content-free. the upgrade-insecure-requests directive is evaluated before block-all-mixed-content. if the former is set, the latter does nothing, so set one directive or the other – not both, unless you want to force https on older browsers that do not force it after a redirect to http. syntax content-security-policy: block-all-mixed-content; examples content-security-policy: block-all-mixed-content; <meta http-equiv="content-security-policy" content="block-all-mixed-content"> ...

CSP: referrer - HTTP
o in the original spec) for links away from a page. this api is deprecated and removed from browsers. use the referrer-policy header instead. syntax content-security-policy: referrer <referrer-policy>; where <referrer-policy> can be one of the following values: "no-referrer" the referer header will be omitted entirely. no referrer information is sent along with requests. "none-when-downgrade" this is the user agent's default behavior if no policy is specified. the origin is sent as referrer to a-priori as-much-secure destination (https->https), but isn't sent to a less secure destination (https->http). "origin" only send the origin of the document as the referrer in all cases. the document https://example.com/page.html will send the referrer https://example.com/. "origin-when-c...

Network Error Logging - HTTP
dns server responded but was unable to resolve an ip address for the requested uri. dns.failed request to the dns server failed due to reasons not covered by previous errors (e.g. servfail) dns.address_changed for security reasons, if the server ip address that delivered the original report is different to the current server ip address at time of error generation, the report data will be downgraded to only include information about this problem and the type set to dns.address_changed. tcp.timed_out tcp connection to the server timed out tcp.closed the tcp connection was closed by the server tcp.reset the tcp connection was reset tcp.refused the tcp connection was refused by the server tcp.aborted the tcp connection was aborted tcp.address_invalid the ip address is invalid tcp...

Math.imul() - JavaScript
n arguments. description math.imul() allows for 32-bit integer multiplication with c-like semantics. this feature is useful for projects like emscripten. because imul() is a static method of math, you always use it as math.imul(), rather than as a method of a math object you created (math is not a constructor). if you use normal javascript floating point numbers in imul, you will experience a degrade in performance. this is because of the costly conversion from a floating point to an integer for multiplication, and then converting the multiplied integer back into a floating point. the reason imul exists is because it is faster in only one (so far) circumstance: asmjs. asmjs allows for jist-optimizers to more easily implement internal integers in javascript. multiplying two numbers stored int...

Web audio codec guide - Web media technologies
licensing open license (apache license 2.0); source code available on github amr (adaptive multi-rate) the adaptive multi-rate audio codec is optimized for encoding human speech efficiently. it was standardized in 1999 as part of the 3gpp audio standard used for both gsm and umts cellular telephony, and uses a multi-rate narrowband algorithm to encode audio frequencies at a telephony-grade quality level at around 7.4 kbps. in addition to being used for real-time telephony, amr audio may be used for voicemail and other short audio recordings. amr audio which is stored in files may simply be typed .amr, but may also be encapsulated in .3gp files. as a speech-specific codec, amr is essentially useless for any other content, including audio containing only singing voices. additional...

Animation performance and frame rate - Web Performance
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 performance tool, and make a recording. you'll only need to record a few seconds. open up the first recording. exactly what you'll see depends ...

Privacy, permissions, and information security
ures the document in the frame should be allowed to access http public key pinning (hpkp) hpkp is used by servers to instruct a client to associate a specific public key with the server going forward in order to decrease the likelihood of man-in-the-middle attacks http strict transport security (hsts) hsts is used by servers to let them protect themselves from protocol downgrade and cookie hijack attacks by letting sites tell clients that they can only use https to communicate with the server http/2 while http/2 technically does not have to use encryption, most browser developers are only supporting it when used with https, so it can be thought of in that regard as being security-related permissions api provides a way to determine the status of p...

Progressive web app structure - Progressive web apps (PWAs)
imports data from the games.js file: self.importscripts('data/games.js'); next, it creates a list of all the files to be cached, both from the app shell and the content: var cachename = 'js13kpwa-v1'; var appshellfiles = [ '/pwa-examples/js13kpwa/', '/pwa-examples/js13kpwa/index.html', '/pwa-examples/js13kpwa/app.js', '/pwa-examples/js13kpwa/style.css', '/pwa-examples/js13kpwa/fonts/graduate.eot', '/pwa-examples/js13kpwa/fonts/graduate.ttf', '/pwa-examples/js13kpwa/fonts/graduate.woff', '/pwa-examples/js13kpwa/favicon.ico', '/pwa-examples/js13kpwa/img/js13kgames.png', '/pwa-examples/js13kpwa/img/bg.png', '/pwa-examples/js13kpwa/icons/icon-32.png', '/pwa-examples/js13kpwa/icons/icon-64.png', '/pwa-examples/js13kpwa/icons/icon-96.png', '/pwa-examples/js13kpwa/icon...

The building blocks of responsive design - Progressive web apps (PWAs)
ize, and are infinitely scalable when zoomed or viewed on high resolution devices (at least, in theory). some ideas follow, which also help to keep the number of http requests down — another key factor in mobile app performance: you should try to use css3 features to programmatically generate graphical effects where possible, rather than relying on image files. these include rounded corners, gradients, and drop shadows. these scale as the resolution changes or the browser zooms. although they are not supported very well on older browsers such as internet explorer 6-8, this is not too much of a concern when you are creating an interface aimed at modern devices, and they also tend to gracefully degrade. you could also try using svg to create interface elements. svg produces vector graphics...

class - SVG: Scalable Vector Graphics
altglyph> <circle> <clippath> <defs> <desc> <ellipse> <feblend> <fecolormatrix> <fecomponenttransfer> <fecomposite> <feconvolvematrix> <fediffuselighting> <fedisplacementmap> <feflood> <fegaussianblur> <feimage> <femerge> <femorphology> <feoffset> <fespecularlighting> <fetile> <feturbulence> <filter> <font> <foreignobject> <g> <glyph> <glyphref> <image> <line> <lineargradient> <marker> <mask> <missing-glyph> <path> <pattern> <polygon> <polyline> <radialgradient> <rect> <stop> <svg> <switch> <symbol> <text> <textpath> <title> <tref> <tspan> <use> ...

fill-opacity - SVG: Scalable Vector Graphics
note: as a presentation attribute fill-opacity can be used as a css property. ...

in - SVG: Scalable Vector Graphics
of the svg document under the filter region at the time that the <filter> element was invoked. backgroundalpha same as backgroundimage except only the alpha channel is used. fillpaint this keyword represents the value of the fill property on the target element for the filter effect. in many cases, the fillpaint is opaque everywhere, but that might not be the case if a shape is painted with a gradient or pattern which itself includes transparent or semi-transparent parts. strokepaint this keyword represents the value of the stroke property on the target element for the filter effect. in many cases, the strokepaint is opaque everywhere, but that might not be the case if a shape is painted with a gradient or pattern which itself includes transparent or semi-transparent parts. <filter-prim...

opacity - SVG: Scalable Vector Graphics
it has effect only on the following elements: <a>, <audio>, <canvas>, <circle>, <ellipse>, <foreignobject>, <g>, <iframe>, <image>, <line>, <marker>, <path>, <polygon>, <polyline>, <rect>, <svg>, <switch>, <symbol>, <text>, <textpath>, <tspan>, <use>, <unknown>, and <video> html, body, svg { height: 100%; } <svg viewbox="0 0 200 100" xmlns="http://www.w3.org/2000/svg"> <defs> <lineargradient id="gradient" x1="0%" y1="0%" x2="0" y2="100%"> <stop offset="0%" style="stop-color:skyblue;" /> <stop offset="100%" style="stop-color:seagreen;" /> </lineargradient> </defs> <rect x="0" y="0" width="100%" height="100%" fill="url(#gradient)" /> <circle cx="50" cy="50" r="40" fill="black" /> <circle cx="150" cy="50" r="40" fill="black" opacity="0.3" /> </svg> usage ...

stop-color - SVG: Scalable Vector Graphics
so, specifying a stop-color with the value transparent is equivalent to specifying a stop-color with the value black and a stop-opacity with the value 0. note: as a presentation attribute, stop-color can be used as a css property. ...

stop-opacity - SVG: Scalable Vector Graphics
the stop-opacity attribute defines the opacity of a given color gradient stop. the opacity value used for the gradient calculation is the product of the value of stop-opacity and the opacity of the value of the stop-color attribute. for stop-color values that donʼt include explicit opacity information, the opacity is treated as 1. note: as a presentation attribute, stop-opacity can be used as a css property. as a presentation attribute, it can be applied to any element but it has effect only on the following element: <stop> usage notes value <opacity-value> default value 1 animatable yes <opacity-value> this value is either a <number> between 0 and 1 or a <percentage> value specifying the opacity of the color gradient stop. specifications ...

stroke-opacity - SVG: Scalable Vector Graphics
note: as a presentation attribute stroke-opacity can be used as a css property. ...

transform - SVG: Scalable Vector Graphics
on for the css property transform for the specific syntax to use in that case. as a presentation attribute, transform can be used by any element (in svg 1.1, only these 16 elements were allowed to use it: <a>, <circle>, <clippath>, <defs>, <ellipse>, <foreignobject>, <g>, <image>, <line>, <path>, <polygon>, <polyline>, <rect>, <switch>, <text>, and <use>). also, as a legacy from svg 1.1, <lineargradient> and <radialgradient> support the gradienttransform attribute, and <pattern> supports the patterntransform attribute, both of which act exactly like the transform attribute. value <transform-list> default value none animatable yes transform functions the following transform functions can be used by the transform attribute <transform-list> warning:...

vector-effect - SVG: Scalable Vector Graphics
.e. the default rendering behaviour is used which is to first fill the geometry of a shape with a specified paint, then stroke the outline with a specified paint. non-scaling-stroke this value modifies the way an object is stroked. normally stroking involves calculating stroke outline of the shapeʼs path in current user coordinate system and filling that outline with the stroke paint (color or gradient). the resulting visual effect of this value is that the stroke width is not dependant on the transformations of the element (including non-uniform scaling and shear transformations) and zoom level. non-scaling-size this value specifies a special user coordinate system used by the element and its descendants. the scale of that user coordinate system does not change in spite of any transforma...

xlink:type - SVG: Scalable Vector Graphics
the xlink:type attribute identifies the type of xlink being used. in svg, only simple links are available. twentytwo 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> usage notes value simple default value simple animatable no simple this value specifies that the referred resource is a simple link. specifications specification status comment scalable vector graphics (svg) 1.1 (second edition)the definition of 'xlink:type' in that specification. recommendation ...

SVG Attribute reference - SVG: Scalable Vector Graphics
e edgemode elevation enable-background end exponent externalresourcesrequired f fill fill-opacity fill-rule filter filterres filterunits flood-color flood-opacity font-family font-size font-size-adjust font-stretch font-style font-variant font-weight format from fr fx fy g g1 g2 glyph-name glyph-orientation-horizontal glyph-orientation-vertical glyphref gradienttransform gradientunits h hanging height href hreflang horiz-adv-x horiz-origin-x i id ideographic image-rendering in in2 intercept k k k1 k2 k3 k4 kernelmatrix kernelunitlength kerning keypoints keysplines keytimes l lang lengthadjust letter-spacing lighting-color limitingconeangle local m marker-end marker-mid marker-start markerheight m...

<g> - SVG: Scalable Vector Graphics
candidate recommendation sca...

<glyph> - SVG: Scalable Vector Graphics
a <glyph> defines a single glyph in an svg font. usage context categoriestext content elementpermitted contentany number of the following elements, in any order:animation elementsdescriptive elementsshape elementsstructural elementsgradient elements<a>, <altglyphdef>, <clippath>, <color-profile>, <cursor>, <filter>, <font>, <font-face>, <foreignobject>, <image>, <marker>, <mask>, <pattern>, <script>, <style>, <switch>, <text>, <view> attributes global attributes core attributes presentation attributes class style specific attributes d horiz-adv-x vert-origin-x vert-origin-y vert-adv-y unicode glyph-name orientation arabic-form lang dom interface this element implements the svgglyphelement interface. example svg <svg width="400px" height="300px" version="1.1" ...

<marker> - SVG: Scalable Vector Graphics
working draft scalable vector graphics (svg)...

<mask> - SVG: Scalable Vector Graphics
candidate recommendation scalab...

<missing-glyph> - SVG: Scalable Vector Graphics
the <missing-glyph> svg element's content is rendered, if for a given character the font doesn't define an appropriate <glyph>. usage context categoriesnonepermitted contentany number of the following elements, in any order:animation elementsdescriptive elementsshape elementsstructural elementsgradient elements<a>, <altglyphdef>, <clippath>, <color-profile>, <cursor>, <filter>, <font>, <font-face>, <foreignobject>, <image>, <marker>, <mask>, <pattern>, <script>, <style>, <switch>, <text>, <view> attributes global attributes core attributes presentation attributes class style specific attributes d horiz-adv-x vert-origin-x vert-origin-y vert-adv-y dom interface this element implements the svgmissingglyphelement interface. specifications specification statu...

<pattern> - SVG: Scalable Vector Graphics
candidate recommendation ...

<svg> - SVG: Scalable Vector Graphics
candidate recommendation sc...

<symbol> - SVG: Scalable Vector Graphics
only instances of a <symbol> element (i.e., a reference to a <symbol> by a <use> element) are rendered. that means that some browsers co...

<text> - SVG: Scalable Vector Graphics
if text is included in svg not inside of a <text> element, it is not rendered. this is different than being hidden by default, as setting the display property won't show the text. ...

<view> - SVG: Scalable Vector Graphics
scriptive elements attributes global attributes aria attributes » core attributes » global event attributes » externalresourcesrequired specific attributes viewbox preserveaspectratio zoomandpan viewtarget example svg <svg width="600" height="200" viewbox="0 0 600 200" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <defs> <radialgradient id="gradient"> <stop offset="0%" stop-color="#8cffa0" /> <stop offset="100%" stop-color="#8ca0ff" /> </radialgradient> </defs> <circle r="50" cx="180" cy="50" style="fill:url(#gradient)"/> <view id="halfsizeview" viewbox="0 0 1200 400"/> <view id="normalsizeview" viewbox="0 0 600 200"/> <view id="doublesizeview" viewbox="0 0 300 100"/> <a xlink:href="#halfsizevi...

SVG 1.1 Support in Firefox - SVG: Scalable Vector Graphics
56286, bug 571808). altglyphdef not implemented. altglyphitem not implemented. glyphref not implemented. marker module marker implemented. color profile module color-profile not implemented (bug 427713). gradient module lineargradient implemented. radialgradient implemented. stop implemented. pattern module pattern implemented. clip module clippath implemented. mask module mask implemented. ...

SVG 2 support in Mozilla - SVG: Scalable Vector Graphics
n status unknown rgba, hsl, lab, icc named colors and device colors implementation status unknown color-profile removed implementation status unknown <color-profile> removed implementation status unknown paint servers change notes <solidcolor> (renamed solidcolor) not implemented (bug 1177032) fr attribute for <radialgradient> not implemented (bug 1240275) <mesh> (renamed meshgradient) not implemented (bug 1238882) <meshrow> (renamed meshrow) not implemented (bug 1238882) <meshpatch> (renamed meshpatch) not implemented (bug 1238882) <hatch> not implemented (bug 1239147) <hatchpath> (renamed hatchpath) not implemented (bug 1239147) display beha...

Fills and Strokes - SVG: Scalable Vector Graphics
should draw miters; and stroke-dashoffset, which specifies where to start a dasharray on a line. using css in addition to setting attributes on objects, you can also use css to style fills and strokes. not all attributes can be set via css. attributes that deal with painting and filling are usually available, so fill, stroke, stroke-dasharray, etc... can all be set this way, in addition to the gradient and pattern versions of those shown below. attributes like width, height, or <path> commands cannot be set through css. it's easiest just to test and find out what is available and what isn't. note: the svg specification decides strictly between attributes that are properties and other attributes. the former can be modified with css, the latter not. css can be inserted inline with the eleme...

Filter effects - SVG: Scalable Vector Graphics
« previousnext » there are situations, where basic shapes do not provide the flexibility you need to achieve a certain effect. drop shadows, to provide a popular example, cannot be created reasonably with a combination of gradients. filters are svg's mechanism to create sophisticated effects. a basic example is to add a blur effect to svg content. while basic blurs can be achieved with the help of gradients, the blur filter is needed to do anything beyond. example filters are defined by <filter> element, which should be put in the <defs> section of your svg file. between the filter tags, goes a list of primitives, basic operations that build on top of the previous operations (like blurring, adding a lighting effect, etc). to apply your created filter on a graphic element, ...

Introduction - SVG: Scalable Vector Graphics
much the same way svg provides elements for circles, rectangles, and simple and complex curves. a simple svg document consists of nothing more than the <svg> root element and several basic shapes that build a graphic together. in addition there is the <g> element, which is used to group several basic shapes together. starting from there, the svg image can become arbitrarily complex. svg supports gradients, rotations, filter effects, animations, interactivity with javascript, and so on. but all these extra features of the language rely on this relatively small set of elements to define the graphics area. before you start there are a number of drawing applications available such as inkscape which are free and use svg as their native file format. however, this tutorial will rely on the trusty ...

Texts - SVG: Scalable Vector Graphics
e in the viewport the text will appear. the attribute text-anchor, which can have the values "start", "middle", "end" or "inherit", decides in which direction the text flows from this point. the attribute dominant-baseline decides the vertical alignment. like with the shape elements text can be colorized with the fill attribute and given a stroke with the stroke attribute. both may also refer to gradients or patterns, which makes simple coloring text in svg very powerful compared to css 2.1. setting font properties an essential part of a text is the font in which it is displayed. svg offers a set of attributes, many similar to their css counterparts, to enable font selection. each of the following properties can be set as an attribute or via a css declaration: font-family, font-style, font-...

Tools for SVG - SVG: Scalable Vector Graphics
ations. notably older versions of internet explorer are supported by generating vml, a vector markup language, that is one of two ancestors of svg and exists since ie 5.5. snap.svg url: snapsvg.io a newer javascript abstraction layer from the same author of raphael js. snap.svg is designed for modern browsers and therefore supports the newest svg features like masking, clipping, patterns, full gradients, groups. it does not support the older browsers that raphael does. google docs url: www.google.com/google-d-s/drawings/ drawings from google docs can be exported as svg. science the well-known plotting tools xfig and gnuplot both support exporting as svg. to render graphs on the web jsxgraph supports vml, svg and canvas, automatically deciding which technology to use based on browser...

SVG Tutorial - SVG: Scalable Vector Graphics
l resources at inkscape's documentation page. another good introduction to svg is provided by the w3c's svg primer. the tutorial is in an early stage of development. if you're able, please help out by chipping in and writing a paragraph or two. extra points for writing a whole page! introducing svg from scratch introduction getting started positions basic shapes paths fills and strokes gradients patterns texts basic transformations clipping and masking other content in svg filter effects svg fonts svg image tag tools for svg svg and css the following topics are more advanced and hence should get their own tutorials. scripting svg with javascript tbd svg filters tutorial tbd animations with smil in svg tbd creating fonts in svg tbd ...

Caching compiled WebAssembly modules - WebAssembly
les clearing out the database if the dbversion is updated; it returns a promise resolving to the new database. ...

Understanding WebAssembly text format - WebAssembly
and/or pops a certain number of i32/i64/f32/f64 values to/from a stack. for example, local.get is defined to push the value of the local it read onto the stack, and i32.add pops two i32 values (it implicitly grabs the previous two values pushed onto the stack), computes their sum (modulo 2^32) and pushes the resulting i32 value. when a function is called, it starts with an empty stack which is gradually filled up and emptied as the body’s instructions are executed. so for example, after executing the following function: (func (param $p i32) (result i32) local.get $p local.get $p i32.add) the stack contains exactly one i32 value — the result of the expression ($p + $p), which is handled by i32.add. the return value of a function is just the final value left on the stack. the w...