Search completed in 1.47 seconds.
Preloading content with rel="preload" - HTML: Hypertext Markup Language
the p
reload value of the <link> element's
rel attribute lets you declare fetch requests in the html's <head>, specifying resources that your page will need very soon, which you want to start loading early in the page lifecycle, before browsers' main rendering machinery kicks in.
... this article provides a basic guide to how <link
rel="p
reload"> works.
... the basics you most commonly use <link> to load a css file to style your page with: <link
rel="stylesheet" href="styles/main.css"> here however, we will use a
rel value of p
reload, which turns <link> into a p
reloader for any resource we want.
...And 29 more matches
HTMLAnchorElement.rel - Web APIs
the htmlancho
relement.
rel property reflects the
rel attribute.
... it is a domstring containing a space-separated list of link types indicating the
relationship between the resource represented by the <a> element and the current document.
... syntax var
relstr = ancho
relt.
rel; ancho
relt.
rel =
relstr; example var anchors = document.getelementsbytagname("a"); var length = anchors.length; for (var i = 0; i < length; i++) { alert("
rel: " + anchors[i].
rel); } specifications specification status comment html living standardthe definition of '
rel' in that specification.
...And 2 more matches
HTMLAnchorElement.relList - Web APIs
the htmlancho
relement.
rellist read-only property reflects the
rel attribute.
... it is a live domtokenlist containing the set of link types indicating the
relationship between the resource represented by the <a> element and the current document.
... syntax var
relstr = ancho
relt.
rellist; example var anchors = document.getelementsbytagname("a"); var length = anchors.length; for (var i = 0; i < length; i++) { var list = anchors[i].
rellist; var listlength = list.length; console.log("new anchor node found with", listlength, "link types in
rellist."); for (var j = 0; j < listlength; j++) { console.log(list[j]); } } specifications specification status comment html living standardthe definition of '
rellist' in that specification.
RelativeOrientationSensor.RelativeOrientationSensor() - Web APIs
the
relativeorientationsensor constructor creates a new
relativeorientationsensor object which describes the device's physical orientation.
... syntax var
relativeorientationsensor = new
relativeorientationsensor([options]) parameters options optional options are as follows: frequency: the desired number of times per second a sample should be taken, meaning the number of times per second that sensor.onreading will be called.
... specifications specification status comment orientation sensorthe definition of '
relativeorientationsensor()' in that specification.
HTML attribute: rel - HTML: Hypertext Markup Language
the
rel attribute defines the
relationship between a linked resource and the current document.
... the type of
relationships is given by the value of the
rel attribute, which, if present, must have a value that is an unordered set of unique space-separated keywords, which are listed in the following table.
... values for the
rel attribute, and the elements for which each is
relevant
rel value description <link> <a> and <area> <form> alternate alternate representations of the current document.
...And 32 more matches
Index - MDN Web Docs Glossary: Definitions of Web-related terms
found 528 pages: # page tags and summary 1 mdn web docs glossary: definitions of web-
related terms beginner, definitions, dictionary, glossary, index, landing, terminology web technologies contain long lists of jargon and abbreviations that are used in documentation and coding.
... 12 accessibility tree (aom) aom, accessibility, dom, glossary, reference the accessibility tree, or accessibility object model (aom), contains accessibility-
related information for most html elements.
... 24 asynchronous glossary, web, webmechanics, asynchronous the term asynchronous refers to or multiple
related things happening without waiting for the previous one to complete).
...And 30 more matches
nsIAccessibleRelation
accessible/public/nsiaccessible
relation.idlscriptable this interface gives access to an accessibles set of
relations.
...method overview nsiaccessible gettarget(in unsigned long index); nsiarray gettargets(); attributes attribute type description
relationtype unsigned long returns the type of the
relation.
... targetscount unsigned long returns the number of targets for this
relation.
...And 23 more matches
HTMLAnchorElement - Web APIs
the htmlancho
relement interface represents hyperlink elements and provides special properties and methods (beyond those of the regular htmlelement object interface that they inherit from) for manipulating the layout and presentation of such elements.
... this interface corresponds to <a> element; not to be confused with <link>, which is represented by htmllinkelement) <div id="interfacediagram" style="display: inline-block; position:
relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fil...
...ndale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,25 501,20 501,30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlancho
relement" target="_top"><rect x="321" y="65" width="170" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="406" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlancho
relement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties inherits pr...
...And 22 more matches
Mozilla release FAQ - Archive of obsolete content
originally, the plan was just to re-stabilize the code and
release 5.0, but it was decided within the community that the more ambitious changes that were planned for later integration were close to being ready.
... the old layout engine, networking engine, and several of the older modules were gutted, and much later, the sources reached the point where netscape was comfortable making a
release, and so netscape 6.0 was
released.
...mozilla 1.0 (mozilla uses a different versioning system than netscape) is due for
release soon.
...And 21 more matches
Release phase
now you're ready for the final phase: becoming an official l10n
release.
... here, we'll continue to stay true to the original intent of this guide and only present you with the technical information you need to become an official
release.
... we'll primarily focus on getting your
release repository setup and the mercurial commands you'll need to know to use that repository.
...And 18 more matches
Release notes - Archive of obsolete content
this will not include any uplifts made after this
release entered aurora.
...this will not include any uplifts made after this
release entered aurora.
... jpm beta
released.
...And 14 more matches
RTCIceCandidate.relatedAddress - Web APIs
the rtcicecandidate interface's read-only
relatedaddress property is a string indicating the
related address of a
relay or reflexive candidate.
... if the candidate is a host candidate (that is, its ip is in fact the real ip address of the remote peer),
relatedaddress is null.
... the
relatedaddress field's value is set when the rtcicecandidate() constructor is used.
...And 12 more matches
HTMLMeterElement - Web APIs
the html <meter> elements expose the htmlmete
relement interface, which provides special properties and methods (beyond the htmlelement object interface they also have available to them by inheritance) for manipulating the layout and presentation of <meter> elements.
... <div id="interfacediagram" style="display: inline-block; position:
relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"...
...andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,25 501,20 501,30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlmete
relement" target="_top"><rect x="331" y="65" width="160" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="411" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlmete
relement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties also inherit...
...And 10 more matches
RTCIceCandidate.relatedPort - Web APIs
the rtcicecandidate interface's read-only
relatedport property indicates the port number of reflexive or
relay candidates.
... if the candidate is a host candidate (that is, its ip is in fact the real ip address of the remote peer),
relatedport is null.
... the
relatedport field's value is set when the rtcicecandidate() constructor is used.
...And 10 more matches
SVGFilterElement - Web APIs
the svgfilte
relement interface provides access to the properties of <filter> elements, as well as methods to manipulate them.
... <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 x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/nod...
...,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/svgfilte
relement" target="_top"><rect x="321" y="65" width="160" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="401" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgfilte
relement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties svgfiltere...
...And 10 more matches
HTMLHRElement - Web APIs
the htmlh
relement interface provides special properties (beyond those of the htmlelement interface it also has available to it by inheritance) for manipulating <hr> elements.
... <div id="interfacediagram" style="display: inline-block; position:
relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"...
...co,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,25 501,20 501,30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlh
relement" target="_top"><rect x="361" y="65" width="130" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="426" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlh
relement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties inherits proper...
...And 9 more matches
Intl.RelativeTimeFormat.prototype.format() - JavaScript
the intl.
relativetimeformat.prototype.format() method formats a value and unit according to the locale and formatting options of this
relativetimeformat object.
... syntax
relativetimeformat.format(value, unit) parameters value numeric value to use in the internationalized
relative time message.
... unit unit to use in the
relative time internationalized message.
...And 9 more matches
Intl.RelativeTimeFormat - JavaScript
the intl.
relativetimeformat object enables language-sensitive
relative time formatting.
... constructor intl.
relativetimeformat.
relativetimeformat() creates a new intl.
relativetimeformat object.
... static methods intl.
relativetimeformat.supportedlocalesof() returns an array containing those of the provided locales that are supported without having to fall back to the runtime's default locale.
...And 9 more matches
NSS 3.35 release notes
introduction the nss team has
released network security services (nss) 3.35, which is a minor
release.
... nss 3.35 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_35_rtm/src/ new in nss 3.35 new functionality tls 1.3 support has been updated to draft -23.
...note that this
release does not include support for the latter.
...And 8 more matches
NSS_3.12_release_notes.html
nss 3.12
release notes 17 june 2008 newsgroup: mozilla.dev.tech.crypto contents introduction distribution information new in nss 3.12 bugs fixed documentation compatibility feedback introduction network security services (nss) 3.12 is a minor
release with the following new features: sqlite-based shareable certificate and key databases libpkix: an rfc 3280 compliant certificate path validation library camellia cipher support tls session ticket extension (rfc 5077) nss 3.12 is tri-licensed under the mpl 1.1/gpl 2.0/lgpl 2.1.
... distribution information the cvs tag for the nss 3.12
release is nss_3_12_rtm.
...nss 3.12 source and binary 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_12_rtm/src/.
...And 7 more matches
NavigationPreloadManager - Web APIs
the navigationp
reloadmanager interface of the the service worker api provides methods for managing the p
reloading of resources with a service worker.
... methods navigationp
reloadmanager.enable() enables navigation p
reloading and returns a promise that resolves.
... navigationp
reloadmanager.disable() disables navigation p
reloading and returns a promise that resolves.
...And 7 more matches
SVGFEGaussianBlurElement - Web APIs
the svgfegaussianblu
relement interface corresponds to the <fegaussianblur> 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 x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/nod...
...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/svgfegaussianblu
relement" target="_top"><rect x="241" y="65" width="240" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="361" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgfegaussianblu
relement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} constants ...
...And 7 more matches
Intl.RelativeTimeFormat() constructor - JavaScript
the intl.
relativetimeformat() constructor creates intl.
relativetimeformat objects.
... syntax new intl.
relativetimeformat([locales[, options]]) parameters locales optional.
... examples basic format usage the following example shows how to create a
relative time formatter using the english language.
...And 7 more matches
MouseEvent.relatedTarget - Web APIs
the mouseevent.
relatedtarget read-only property is the secondary target for the mouse event, if there is one.
... that is: event name target
relatedtarget mouseenter the eventtarget the pointing device entered to the eventtarget the pointing device exited from mouseleave the eventtarget the pointing device exited from the eventtarget the pointing device entered to mouseout the eventtarget the pointing device exited from the eventtarget the pointing device entered to mouseover the eventtarget the pointing device entered to the eventtarget the pointing device exited from dragenter the eventtarget the pointing device entered to the eventtarget the pointing device exited from dragexit the eventtarget the pointing device exited from the eventtarget the pointing device entered to for events with no...
... secondary target,
relatedtarget returns null.
...And 6 more matches
NSS_3.12.1_release_notes.html
nss 3.12.1
release notes 2008-09-05 newsgroup: mozilla.dev.tech.crypto contents introduction distribution information new in nss 3.12.1 bugs fixed documentation compatibility feedback introduction network security services (nss) 3.12.1 is a patch
release for nss 3.12.
... distribution information the cvs tag for the nss 3.12.1
release is nss_3_12_1_rtm.
...nss 3.12.1 source and binary 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_12_1_rtm/src/.
...And 5 more matches
IAccessibleRelation
other-licenses/ia2/accessible
relation.idlnot scriptable this interface gives access to an object's set of
relations.
... 1.0 66 introduced gecko 1.9 inherits from: iunknown last changed in gecko 1.9 (firefox 3) method overview [propget] hresult localized
relationtype([out] bstr localized
relationtype ); [propget] hresult ntargets([out] long ntargets ); [propget] hresult
relationtype([out] bstr
relationtype ); [propget] hresult target([in] long targetindex, [out] iunknown target ); [propget] hresult targets([in] long maxtargets, [out, size_is(maxtargets), length_is( ntargets)] iunknown targets, [out] long ntargets ); methods localized
relationtype() returns a localized version of the
relation type.
... [propget] hresult localized
relationtype( [out] bstr localized
relationtype ); parameters localized
relationtype return value s_ok.
...And 5 more matches
Using the aria-relevant attribute - Accessibility
the aria-
relevant attribute is an optional value used to describe what types of changes have occurred to an aria-live region, and which are
relevant and should be announced.
... any change that is not
relevant acts in the same manner it would if the aria-live attribute were set to off.
... aria-
relevant is commonly used when a web page contains content that may be updated while viewing the page.
...And 5 more matches
4.3.1 Release Notes
release date: 2009-12-02 introduction network security services for java (jss) 4.3.1 is a minor
release with the following new features: support for ssl3 & tls renegotiation vulnerablity support to explicitly set the key usage for the generated private key jss 4.3.1 is tri-licensed under mpl 1.1/gpl 2.0/lgpl 2.1.
... new in jss 4.3.1 a list of bug fixes and enhancement requests were implemented in this
release can be obtained by running this bugzilla query jss 4.3.1 requires nss 3.12.5 or higher.
...the cvs tag for the jss 4.3.1
release is jss_4_3_1_rtm.
...And 4 more matches
4.3 Release Notes
release date: 01 april 2009 introduction network security services for java (jss) 4.3 is a minor
release with the following new features: sqlite-based shareable certificate and key databases libpkix: an rfc 3280 compliant certificate path validation library pkcs11 needslogin method support hmacsha256, hmacsha384, and hmacsha512 support for all nss 3.12 initialization options jss 4.3 is tri-licensed under mpl 1.1/gpl 2.0/lgpl 2.1.
... new in jss 4.3 a list of bug fixes and enhancement requests were implemented in this
release can be obtained by running this bugzilla query jss 4.3 requires nss 3.12 or higher.
... the cvs tag for the jss 4.3
release is jss_4_3_rtm.
...And 4 more matches
NSS_3.11.10_release_notes.html
nss 3.11.10
release notes 2008-12-10 newsgroup: <ahref="news: mozilla.dev.tech.crypto"="" news.mozilla.org="">mozilla.dev.tech.crypto</ahref="news:> contents introduction distribution information bugs fixed documentation compatibility feedback introduction network security services (nss) 3.11.10 is a patch
release for nss 3.11.
... distribution information the cvs tag for the nss 3.11.10
release is nss_3_11_10_rtm.
...nss 3.11.10 source and binary 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_11_10_rtm/src/.
...And 4 more matches
NSS_3.12.2_release_notes.html
nss 3.12.2
release notes 2008-10-20 newsgroup: mozilla.dev.tech.crypto contents introduction distribution information new in nss 3.12.2 bugs fixed documentation compatibility feedback introduction network security services (nss) 3.12.2 is a patch
release for nss 3.12.
... distribution information the cvs tag for the nss 3.12.2
release is nss_3_12_2_rtm.
...nss 3.12.2 source and binary 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_12_2_rtm/src/.
...And 4 more matches
NSS 3.12.6 release notes
nss 3.12.6
release notes 2010-03-03 newsgroup: mozilla.dev.tech.crypto introduction network security services (nss) 3.12.6 is a patch
release for nss 3.12.
... distribution information the cvs tag for the nss 3.12.6
release is nss_3_12_6_rtm.
... nss 3.12.6 source and binary 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_12_6_rtm/src/.
...And 4 more matches
NSS 3.12.9 release notes
<center> 2010-09-23</center> <center> newsgroup: mozilla.dev.tech.crypto</center> introduction network security services (nss) 3.12.9 is a patch
release for nss 3.12.
... distribution information the cvs tag for the nss 3.12.9
release is nss_3.12.9_rtm.
... nss 3.12.9 source distribution is also available on ftp.mozilla.org for secure https download: source tarballs: https://ftp.mozilla.org/pub/mozilla.org/security/nss/
releases/nss_3.12.9_rtm/src/.
...And 4 more matches
NSS 3.16.2.1 release notes
introduction network security services (nss) 3.16.2.1 is a patch
release for nss 3.16, based on the nss 3.16.2
release.
... 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.
... new in nss 3.16.2.1 new functionality no new functionality is introduced in this
release.
...And 4 more matches
NSS 3.16.5 release notes
introduction network security services (nss) 3.16.5 is a patch
release for nss 3.16.
... 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.
... new in nss 3.16.5 new functionality no new functionality is introduced in this
release.
...And 4 more matches
NSS 3.21 release notes
2016-01-07, this page has been updated to include additional information about the
release.
... introduction the nss team has
released network security services (nss) 3.21, which is a minor
release.
... 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.
...And 4 more matches
NSS_3.12.3_release_notes.html
nss 3.12.3
release notes 2009-04-01 newsgroup: mozilla.dev.tech.crypto contents introduction distribution information new in nss 3.12.3 bugs fixed documentation compatibility feedback introduction network security services (nss) 3.12.3 is a patch
release for nss 3.12.
... distribution information the cvs tag for the nss 3.12.3
release is nss_3_12_3_rtm.
...nss 3.12.3 source and binary 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_12_3_rtm/src/.
...And 4 more matches
Intl.RelativeTimeFormat.prototype.formatToParts() - JavaScript
the intl.
relativetimeformat.prototype.formattoparts() method returns an array of objects representing the
relative time format in parts that can be used for custom locale-aware formatting.
... syntax
relativetimeformat.formattoparts(value, unit) parameters value numeric value to use in the internationalized
relative time message.
... unit unit to use in the
relative time internationalized message.
...And 4 more matches
NPN_ReleaseVariantValue - Archive of obsolete content
« gecko plugin api reference « scripting plugins summary npn_
releasevariantvalue()
releases the value in the given variant.
... syntax #include <npruntime.h> void npn_
releasevariantvalue(npvariant *variant); parameters the function has the following parameters: <tt>variant</tt> the variant whose value is to be
released.
...description npn_
releasevariantvalue()
releases the value in the given variant.
...And 3 more matches
NSS 3.15.3.1 release notes
introduction network security services (nss) 3.15.3.1 is a patch
release for nss 3.15.
...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.
... 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.
...And 3 more matches
NSS 3.15.3 release notes
introduction network security services (nss) 3.15.3 is a patch
release for nss 3.15.
...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.
... 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.
...And 3 more matches
NSS 3.17.1 release notes
introduction network security services (nss) 3.17.1 is a patch
release for nss 3.17.
... 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.
... new in nss 3.17.1 this patch
release adds new functionality and fixes a bug that caused nss to accept forged rsa signatures.
...And 3 more matches
NSS 3.19.2.1 release notes
introduction network security services (nss) 3.19.2.1 is a patch
release for nss 3.19.2.
... 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.
... the following security-
relevant bugs have been resolved in nspr 4.10.10, which affect nss.
...And 3 more matches
NSS 3.19.4 release notes
introduction network security services (nss) 3.19.4 is a patch
release for nss 3.19.
... 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.
... the following security-
relevant bugs have been resolved in nspr 4.10.10, which affect nss.
...And 3 more matches
NSS 3.20.1 release notes
introduction network security services (nss) 3.20.1 is a patch
release for nss 3.20.
... 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.
... the following security-
relevant bugs have been resolved in nspr 4.10.10, which affect nss.
...And 3 more matches
NSS 3.28.3 release notes
introduction network security services (nss) 3.28.3 is a patch
release for nss 3.28.
... nss 3.28.3 source distributions are available on ftp.mozilla.org for secure https download: source tarballs: https://ftp.mozilla.org/pub/security/nss/
releases/nss_3_28_3_rtm/src/ new in nss 3.28.3 new functionality no new functionality is introduced in this
release.
... this is a patch
release to fix binary compatibility issues.
...And 3 more matches
NSS 3.28 release notes
introduction the network security services (nss) team has
released nss 3.28, which is a minor
release.
... nss 3.28 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_28_rtm/src/ new in nss 3.28 new functionality nss includes support for tls 1.3 draft -18.
... request to test and prepare for tls 1.3 this
release contains improved support for tls 1.3, however, the code that supports tls 1.3 is still disabled by default (not built).
...And 3 more matches
NSS 3.29.1 release notes
introduction network security services (nss) 3.29.1 is a patch
release for nss 3.29.
... nss 3.29.1 source distributions are available on ftp.mozilla.org for secure https download: source tarballs: https://ftp.mozilla.org/pub/security/nss/
releases/nss_3_29_1_rtm/src/ new in nss 3.29.1 new functionality no new functionality is introduced in this
release.
... this is a patch
release to fix binary compatibility issues.
...And 3 more matches
NSS 3.36.7 release notes
introduction network security services (nss) 3.36.7 is a patch
release for nss 3.36.
...it was
released on 19 january 2019.
... nss 3.36.7 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_36_7_rtm/src/ other
releases are available in nss
releases.
...And 3 more matches
NSS 3.36.8 release notes
introduction network security services (nss) 3.36.8 is a patch
release for nss 3.36.
...it was
released on 21 june 2019.
... nss 3.36.8 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_36_8_rtm/src/ other
releases are available in nss
releases.
...And 3 more matches
NSS 3.41.1 release notes
introduction network security services (nss) 3.41.1 is a patch
release for nss 3.41.
...it was
released on 22 january 2019.
... nss 3.41.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_41_1_rtm/src/ other
releases are available in nss
releases.
...And 3 more matches
NSS 3.46 release notes
introduction the nss team has
released network security services (nss) 3.46 on 30 august 2019, which is a minor
release.
... nss 3.46 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_46_rtm/src/ other
releases are available in nss
releases.
... new in nss 3.46 this
release contains no significant new functionality, but concentrates on providing improved performance, stability, and security.
...And 3 more matches
NSS 3.49.2 release notes
introduction network security services (nss) 3.49.2 is a patch
release for nss 3.49.
...it was
released on 23 january 2020.
... nss 3.49.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_49_2_rtm/src/ other
releases are available in nss
releases.
...And 3 more matches
NSS 3.53 release notes
introduction the nss team
released network security services (nss) 3.53 on 29 may 2020.
... nss 3.53 will be a long-term support
release, supporting firefox 78 esr.
... nss 3.53 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_53_rtm/src/ other
releases are available in nss
releases.
...And 3 more matches
Release notes for recent versions of NSS
the current stable
release of nss is 3.56, which was
released on 21 august 2020.
... (nss 3.56
release notes) the current esr
releases of nss are 3.44.4 (nss 3.44.4
release notes), intended for firefox esr 68, which was
released on 19 may 2020, and 3.53.1 (nss 3.53.1
release notes), intended for firefox esr 78, which was
released on 16 june 2020.
... past
releases nss 3.56
release notes nss 3.55
release notes nss 3.54
release notes nss 3.53.1
release notes nss 3.53
release notes nss 3.52.1
release notes nss 3.44.4
release notes nss 3.52
release notes nss 3.51.1
release notes nss 3.51
release notes nss 3.50
release notes nss 3.49.2
release notes nss 3.49.1
release notes nss 3.49
release notes nss 3.48.1
release notes nss 3.48
release notes nss 3.47.1
release notes nss 3.47
release notes nss 3.46.1
release notes nss 3.46
release notes nss 3.45
release notes nss 3.44.3
release notes nss 3.44.2
release notes nss 3.44.1
release notes nss 3.44
release notes nss 3.43
release notes nss 3.42.1
release notes nss 3.42
release notes nss 3.36.8
release notes nss 3.36.7
release notes nss 3.41
release notes nss 3.40.1...
...And 3 more matches
GetRelation
« nsiaccessible page summary this method returns accessible
relation for this accessible object by index.
... nsiaccessible
relation get
relation( in unsigned long aindex ); parameters aindex[in] the index for which
relation is to be retrieved.
... return value returns nsiaccessible
relation object for this accessible.
...And 3 more matches
FetchEvent.preloadResponse - Web APIs
the p
reloadresponse read-only property of the fetchevent interface returns a promise that resolves to the navigation p
reload response if navigation p
reload was triggered or undefined otherwise.
... syntax var expectedresponse = fetchevent.p
reloadresponse; value a promise that resolves to a response or otherwise to undefined.
... example this code snippet is from the navigation p
reload page.
...And 3 more matches
FetchEvent.navigationPreload - Web APIs
the navigationp
reload read-only property of the fetchevent interface returns a promise that resolves to the instance of navigationp
reloadmanager associated with the current service worker registration.
... syntax var promise = fetchevent.navigationp
reload value a promise that resolves to the instance of navigationp
reloadmanager.
... example the following example shows the implementation of a fetch event that uses a p
reloaded response.
...And 3 more matches
FocusEvent.relatedTarget - Web APIs
the focusevent.
relatedtarget read-only property is the secondary target, depending on the type of event: event name target
relatedtarget blur the eventtarget losing focus the eventtarget receiving focus (if any).
... focus the eventtarget receiving focus the eventtarget losing focus (if any) focusin the eventtarget receiving focus the eventtarget losing focus (if any) focusout the eventtarget losing focus the eventtarget receiving focus (if any) note that many elements can't have focus, which is a common reason for
relatedtarget to be null.
...
relatedtarget may also be set to null for security reasons, like when tabbing in or out of a page.
...And 3 more matches
HTMLBRElement - Web APIs
the htmlb
relement interface represents a html line break element (<br>).
... <div id="interfacediagram" style="display: inline-block; position:
relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/do...
...co,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,25 501,20 501,30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlb
relement" target="_top"><rect x="361" y="65" width="130" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="426" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlb
relement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties inherits proper...
...And 3 more matches
ReadableStreamBYOBReader.releaseLock() - Web APIs
the
releaselock() method of the readablestreambyobreader interface
releases the reader's lock on the stream.
... after the lock is
released, the reader is no longer active.
... if the associated stream is errored when the lock is
released, the reader will appear errored in that same way subsequently; otherwise, the reader will appear closed.
...And 3 more matches
ReadableStreamDefaultReader.releaseLock() - Web APIs
the
releaselock() method of the readablestreamdefaultreader interface
releases the reader's lock on the stream.
... if the associated stream is errored when the lock is
released, the reader will appear errored in that same way subsequently; otherwise, the reader will appear closed.
... a reader’s lock cannot be
released while it still has a pending read request, i.e., if a promise returned by the reader’s readablestreamdefaultreader.read() method has not finished.
...And 3 more matches
RelativeOrientationSensor - Web APIs
the
relativeorientationsensor interface of the the sensor apis describes the device's physical orientation without regard to the earth's reference coordinate system.
... constructor
relativeorientationsensor.
relativeorientationsensor() creates a new
relativeorientationsensor object.
... examples basic example the following example, which is loosely based on intel's orientation phone demo, instantiates an
relativeorientationsensor with a frequency of 60 times a second.
...And 3 more matches
SVGCursorElement - Web APIs
the svgcurso
relement interface provides access to the properties of <cursor> elements, as well as methods to manipulate them.
... <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 x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/nod...
...,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/svgcurso
relement" target="_top"><rect x="321" y="65" width="160" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="401" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgcurso
relement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interfa...
...And 3 more matches
SVGFEComponentTransferElement - Web APIs
the svgfecomponenttransfe
relement interface corresponds to the <fecomponenttransfer> 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 x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/nod...
...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/svgfecomponenttransfe
relement" target="_top"><rect x="191" y="65" width="290" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="336" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgfecomponenttransfe
relement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties ...
...And 3 more matches
Relationship of grid layout to other layout methods - CSS: Cascading Style Sheets
a grid container as containing block to make the grid container a containing block you need to add the position property to the container with a value of
relative, just as you would make a containing block for any other absolutely positioned items.
...the grid container has position:
relative and so becomes the positioning context of this item.
... </div> <div class="box4">four</div> </div> .wrapper { display: grid; grid-template-columns: repeat(4,1fr); grid-auto-rows: 200px; grid-gap: 20px; position:
relative; } .box3 { grid-column-start: 2; grid-column-end: 4; grid-row-start: 1; grid-row-end: 3; position: absolute; top: 40px; left: 40px; } you can see that the item is taking the area from grid column line 2 to 4, and starting after line 1.
...And 3 more matches
Creating a Release Tag - Archive of obsolete content
here are directions for creating a
release from a linux system.
... cvs co -r netscape_6_2_
release mozilla/client.mk cd mozilla gmake -f client.mk checkout create a mini branch for the pull scripts on all three platforms so we can change them without changing anything on the original branch.
...cvs tag -b mozilla_0_9_4_1_
release_mini_branch mozilla/client.mk delete the existing build scripts and repull them from the mini-branch you just created.
...And 2 more matches
reloadWithFlags - Archive of obsolete content
« xul reference home
reloadwithflags( flags ) return type: no return value
reloads the document in the browser with the given load flags.
... load_flags_bypass_cache:
reload the page, ignoring if it is already in the cache.
... this is the flag used when the
reload button is pressed while the shift key is held down.
...And 2 more matches
NPN_ReloadPlugins - Archive of obsolete content
« gecko plugin api reference « browser side plug-in api summary
reloads all of the installed plugins.
... syntax #include <npapi.h> void npn_
reloadplugins(npbool
reloadpages);code parameters the function has the following parameter:
reloadpages whether to
reload pages.
... if true, all pages are
reloaded once the plugins are
reloaded; otherwise, they aren't.
...And 2 more matches
NSS 3.12.4 release notes
<center> 2009-08-20 </center> <center>newsgroup: mozilla.dev.tech.crypto</center> introduction network security services (nss) 3.12.4 is a patch
release for nss 3.12.
...distribution information this
release is built from the source, at the cvs repository rooted at cvs.mozilla.org:/cvsroot, with the cvs tag nss_3_12_4_rtm.
...nss 3.12.4 source is also available on ftp.mozilla.org for secure https download: source tarball: https://ftp.mozilla.org/pub/mozilla.org/security/nss/
releases/nss_3_12_4_rtm/src/.
...And 2 more matches
NSS 3.12.5 release_notes
nss 3.12.5
release notes 2009-12-02 newsgroup: mozilla.dev.tech.crypto introduction network security services (nss) 3.12.5 is a patch
release for nss 3.12.
... distribution information the cvs tag for the nss 3.12.5
release is nss_3_12_5_rtm.
... nss 3.12.5 source is also available on ftp.mozilla.org for secure https download: source tarball: https://ftp.mozilla.org/pub/mozilla.org/security/nss/
releases/nss_3_12_5_rtm/src/.
...And 2 more matches
NSS 3.14.1 release notes
introduction network security services (nss) 3.14.1 is a patch
release for nss 3.14.
...nss 3.14.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_14_1_rtm/src/ new in nss 3.14.1 new functionality nss now has the ability to create signed ocsp responses.
... note: the criteria for false start may change again in future nss
releases.
...And 2 more matches
NSS 3.14.4 release notes
introduction network security services (nss) 3.14.4 is a patch
release for nss 3.14.
...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.
... new in nss 3.14.4 new functionality no new major functionality is introduced in this
release.
...And 2 more matches
NSS 3.14.5 release notes
introduction network security services (nss) 3.14.5 is a patch
release for nss 3.14.
...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.
... 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.
...And 2 more matches
NSS 3.15.2 release notes
introduction network security services (nss) 3.15.2 is a patch
release for nss 3.15.
...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.
... bug 848384 - deprecate the ssl cipher policy code, as it's no longer
relevant.
...And 2 more matches
NSS 3.17.4 release notes
introduction network security services (nss) 3.17.4 is a patch
release for nss 3.17.
... nss 3.17.4 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_4_rtm/src/ new in nss 3.17.4 new functionality no new functionality is introduced in this
release.
... this is a patch
release to fix multiple bugs.
...And 2 more matches
NSS 3.19.1 release notes
introduction network security services (nss) 3.19.1 is a security
release for nss 3.19.
... nss 3.19.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_19_1_rtm/src/ security fixes in nss 3.19.1 bug 1138554 / cve-2015-4000 - the minimum strength of keys that libssl will accept for finite field algorithms (rsa, diffie-hellman, and dsa) have been increased to 1023 bits.
... new in nss 3.19.1 new functionality no new functionality is introduced in this
release.
...And 2 more matches
NSS 3.19.2.2 release notes
introduction network security services (nss) 3.19.2.2 is a security patch
release for nss 3.19.2.
... (current users of nss 3.19.3 or nss 3.19.4 are advised to update to nss 3.20.2, nss 3.21, or a later
release.) distribution information the hg tag is nss_3_19_2_2_rtm.
... 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.
...And 2 more matches
NSS 3.19.2.3 release notes
introduction network security services (nss) 3.19.2.3 is a security patch
release for nss 3.19.2.
... (current users of nss 3.19.3, nss 3.19.4 or nss 3.20.x are advised to update to nss 3.21.1, nss 3.22.2, or a later
release.) distribution information the hg tag is nss_3_19_2_3_rtm.
... nss 3.19.2.3 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_3_rtm/src/ new in nss 3.19.2.3 new functionality no new functionality is introduced in this
release.
...And 2 more matches
NSS 3.27.2 Release Notes
introduction network security services (nss) 3.27.2 is a patch
release for nss 3.27.
... nss 3.27.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_27_2_rtm/src/ new in nss 3.27.2 new functionality no new functionality is introduced in this
release.
... this is a patch
release to address a memory leak in the ssl_settrustanchors() function.
...And 2 more matches
NSS 3.28.2 release notes
introduction network security services (nss) 3.28.2 is a patch
release for nss 3.28.
... nss 3.28.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_28_2_rtm/src/ incorrect version number note the version numbers embedded in the nss 3.28.2 are wrong (it reports itself as version 3.28.1).
... new in nss 3.28.2 no new functionality is introduced in this
release.
...And 2 more matches
NSS 3.28.5 release notes
introduction network security services (nss) 3.28.5 is a patch
release for nss 3.28.
... nss 3.28.5 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_28_5_rtm/src/ new in nss 3.28.5 no new functionality is introduced in this
release.
... this is a patch
release to update the list of root ca certificates.
...And 2 more matches
NSS 3.36.1 release notes
introduction network security services (nss) 3.36.1 is a patch
release for nss 3.36.
... nss 3.36.1 source distributions are available on ftp.mozilla.org for secure https download: source tarballs: https://ftp.mozilla.org/pub/security/nss/
releases/nss_3_36_1_rtm/src/ new in nss 3.xx new functionality no new functionality is introduced in this
release.
... this is a patch
release to fix regression bugs.
...And 2 more matches
NSS 3.36.4 release notes
introduction network security services (nss) 3.36.4 is a patch
release for nss 3.36.
... nss 3.36.4 source distributions are available on ftp.mozilla.org for secure https download: source tarballs: https://ftp.mozilla.org/pub/security/nss/
releases/nss_3_36_4_rtm/src/ new in nss 3.36.4 new functionality no new functionality is introduced in this
release.
... this is a patch
release to fix regression bugs.
...And 2 more matches
NSS 3.37.3 release notes
introduction network security services (nss) 3.37.3 is a patch
release for nss 3.37.
... nss 3.37.3 source distributions are available on ftp.mozilla.org for secure https download: source tarballs: https://ftp.mozilla.org/pub/security/nss/
releases/nss_3_37_3_rtm/src/ new in nss 3.37.3 new functionality no new functionality is introduced in this
release.
... this is a patch
release to fix regression bugs.
...And 2 more matches
NSS 3.44.1 release notes
introduction network security services (nss) 3.44.1 is a patch
release for nss 3.44.
...it was
released on 21 june 2019.
... nss 3.44.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_44_1_rtm/src/ other
releases are available in nss
releases.
...And 2 more matches
NSS 3.44.2 release notes
introduction network security services (nss) 3.44.2 is a patch
release for nss 3.44.
...it was
released on 2 october 2019.
... nss 3.44.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_44_2_rtm/src/ other
releases are available in nss
releases.
...And 2 more matches
NSS 3.44.3 release notes
introduction network security services (nss) 3.44.3 is a patch
release for nss 3.44.
...it was
released on 19 november 2019.
... nss 3.44.3 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_44_3_rtm/src/ other
releases are available in nss
releases.
...And 2 more matches
NSS 3.44.4 release notes
introduction the nss team has
released network security services (nss) 3.44.4 on 19 may 2020.
... this is a security patch
release.
... nss 3.44.4 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_44_4_rtm/src/ other
releases are available in nss
releases.
...And 2 more matches
NSS 3.45 release notes
introduction the nss team has
released network security services (nss) 3.45 on 5 july 2019, which is a minor
release.
... nss 3.45 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_45_rtm/src/ other
releases are available in nss
releases.
...262 - expose a function pk11_findrawcertswithsubject for finding certificates with a given subject on a given slot bug 1546229 - add ipsec ike support to softoken bug 1554616 - add support for the elbrus lcc compiler (<=1.23) bug 1543874 - expose an external clock for ssl this adds new experimental functions: ssl_settimefunc, ssl_createantireplaycontext, ssl_setantireplaycontext, and ssl_
releaseantireplaycontext.
...And 2 more matches
NSS 3.46.1 release notes
introduction network security services (nss) 3.46.1 is a patch
release for nss 3.46.
...it was
released on 2 october 2019.
... nss 3.46.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_46_1_rtm/src/ other
releases are available in nss
releases.
...And 2 more matches
NSS 3.47.1 release notes
introduction network security services (nss) 3.47.1 is a patch
release for nss 3.47.
...it was
released on 19 november 2019.
... nss 3.47.1 source distributions are available on ftp.mozilla.org for secure https download: source tarballs: https://ftp.mozilla.org/pub/mozilla.org/security/nss/
releases/nss_3_47_1_rtm/src/ other
releases are available in nss
releases.
...And 2 more matches
NSS 3.48.1 release notes
introduction network security services (nss) 3.48.1 is a patch
release for nss 3.48.
...it was
released on 13 january 2020.
... nss 3.48.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_48_1_rtm/src/ other
releases are available in nss
releases.
...And 2 more matches
NSS 3.49.1 release notes
introduction network security services (nss) 3.49.1 is a patch
release for nss 3.49.
...it was
released on 13 january 2020.
... nss 3.49.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_49_1_rtm/src/ other
releases are available in nss
releases.
...And 2 more matches
NSS 3.52.1 release notes
introduction the nss team has
released network security services (nss) 3.52.1 on 19 may 2020.
... this is a security patch
release.
... nss 3.52.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_52_1_rtm/src/ other
releases are available in nss
releases.
...And 2 more matches
NSS 3.53.1 release notes
introduction the nss team has
released network security services (nss) 3.53.1 on 16 june 2020.
... this is a security patch
release.
... nss 3.53.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_53_1_rtm/src/ other
releases are available in nss
releases.
...And 2 more matches
NSS release notes template
draft (remove line when document is finished) introduction the nss team has
released network security services (nss) 3.xx, which is a minor
release.
... or network security services (nss) 3.xx.y is a patch
release for nss 3.xx.
...nss 3.xx 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_xx_rtm/src/ (make a link) new in nss 3.xx new functionality either: no new functionality is introduced in this
release.
...And 2 more matches
SpiderMonkey releases
this page lists spidermonkey
release notes.
...we have periodically created "
releases", but they are best-effort and incomplete.
...we are very limited in our ability to support older versions, including those labeled as "
releases" on this page.
...And 2 more matches
DynamicsCompressorNode.release - Web APIs
the
release property of the dynamicscompressornode interface is a k-rate audioparam representing the amount of time, in seconds, required to increase the gain by 10 db.
... the
release property's default value is 0.25 and it can be set between 0 and 1.
... syntax var audioctx = new audiocontext(); var compressor = audioctx.createdynamicscompressor(); compressor.
release.value = 0.25; value an audioparam.
...And 2 more matches
HTMLLinkElement.rel - Web APIs
the htmllinkelement.
rel property reflects the
rel attribute.
... it is a domstring containing a space-separated list of link types indicating the
relationship between the resource represented by the <link> element and the current document.
... syntax var
relstr = linkelt.
rel; linkelt.
rel =
relstr; example var links = document.getelementsbytagname('link'); var length = links.length; for (var i = 0; i < length; i++) { alert(links[i]); } specifications specification status comment html living standardthe definition of '
rel' in that specification.
...And 2 more matches
Location: reload() - Web APIs
the location.
reload() method
reloads the current url, like the refresh button.
... the
reload may be blocked and a security_error domexception thrown.
... this happens if the origin of the script calling location.
reload() differs from the origin of the page that owns the location object.
...And 2 more matches
SVGFEFuncRElement - Web APIs
the svgfefunc
relement interface corresponds to the <fefuncr> 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 x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/nod...
...4" stroke-width="2px" /><text x="306" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgcomponenttransferfunctionelement</text></a><polyline points="131,89 121,84 121,94 131,89" stroke="#d4dde4" fill="none"/><line x1="121" y1="89" x2="91" y2="89" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgfefunc
relement" target="_top"><rect x="-79" y="65" width="170" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="6" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgfefunc
relement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interfac...
...And 2 more matches
ServiceWorkerRegistration.navigationPreload - Web APIs
the navigationp
reload read-only property of the serviceworkerregistration interface returns the navigationp
reloadmanager associated with the current service worker registration.
... syntax var navigationp
reloadmanager = serviceworkerregistration.navigationp
reload; value an instance of navigationp
reloadmanager.
... specifications specification status comment service workersthe definition of 'navigationp
reload' in that specification.
...And 2 more matches
WakeLockSentinel.release() - Web APIs
the
release() method of the wakelocksentinel interface
releases the wakelocksentinel, returning a promise that is resolved once the sentinel has been successfully
released.
... syntax wakelocksentinel.
release().then(...); parameters none.
...you should always listen for the on
release event to check if a wake lock has been
released.
...And 2 more matches
WritableStreamDefaultWriter.releaseLock() - Web APIs
the
releaselock() method of the writablestreamdefaultwriter interface
releases the writer's lock on the corresponding stream.
... after the lock is
released, the writer is no longer active.
... if the associated stream is errored when the lock is
released, the writer will appear errored in the same way from now on; otherwise, the writer will appear closed.
...And 2 more matches
XULRunner 2.0 Release Notes - Archive of obsolete content
xulrunner 2.0 is a stable
release of the mozilla xulrunner application framework.
...current version the current version of xulrunner 2.0 is 2.0, matching firefox 4.0 detailed
release notes can be found here.
...the
releases directory can be found here.
...additional features for installing and deploying xulrunner and applications based on xulrunner will be available in future
releases.
NSPR Release Engineering Guide - Archive of obsolete content
this paper is for engineers performing formal
release for the netscape portable runtime (nspr) across all platforms.
... feature complete update ...pr/include/prinit.h with
release numbers build all targets, debug and optimized on all platforms using local directories run the test suite on all targets verify
release numbers show up in binaries resolve testing anomalies tag the tree with nsprpub_
release_x_y_z_beta beta
release checkout a whole new tree using the tag from above build all targets, debug and optimized on all platforms using the command: gmake
release mdist=<dir>/mdist build_number=vx.y.z [build_opt=1 | use_debug_rtl=1] copy the bits from mdist to /share/builds/components/nspr20/.vx.y.z 1 run explode.pl run the test suite on all targets, using binaries & headers from shipped bits resolve testing anomalies tag...
... the tree with nsprpub_
release_x_y[_z]
release candidate checkout a whole new tree using tag (including fixes) tag the treey with nsprpub_
release_x_y_z build all targets, debug and optimized on all platforms using the command: gmake
release mdist=<dir>/mdist build_number=vx.y.z [build_opt=1 | use_debug_rtl=1] copy the bits from mdist to /share/builds/components/nspr20/.vx.y.z in /share/builds/components/nspr20/ run the following scripts: explode.pl rename.sh symlink.sh rtm bits rename the .vx.y.z directory to vx.y.z (remove the hidden directory 'dot').
...the password to this account is restricted to a small set of designated
release engineers.
Debug.msUpdateAsyncCallbackRelation - Archive of obsolete content
the debug.msupdateasynccallback
relation function updates the
relationship status between a synchronous work item and the associated asynchronous operation.
... syntax debug.msupdateasynccallback
relation(
relatedasyncoperationid,
relationtype) parameters
relatedasyncoperationid the id associated with the asynchronous operation.
...
relationtype optional the value that specifies the
relationship status.
... the possible values for
relationtype include: debug.ms_async_callback_status_assign_delegate debug.ms_async_callback_status_join debug.ms_async_callback_status_chooseany debug.ms_async_callback_status_cancel debug.ms_async_callback_status_error for more information, see debug constants.
Prefetch - MDN Web Docs Glossary: Definitions of Web-related terms
they are most
relevant when there are a plethora of links to external websites that may be clicked on, like search engine results, dns prefetching resolves domain names in advance thereby speeding up load times by reducing the time associated with domain lookup at request time.
... <link
rel="dns-prefetch" href="https://example.com/"> link prefetching link prefetching is a performance optimization technique that works by assuming which links the user is likely to click, then downloading the content of those links.
... the prefetch hints are sent in http headers: link: ;
rel=dns-prefetch, ; as=script;
rel=p
reload, ;
rel=prerender, ; as=style;
rel=p
reload prefetch attribute value browsers will prefetch content when the prefetch <link> tag directs it to, giving the developer control over what resources should be prefetched.
... <link
rel="prefetch" href="https://www.example.com/solutions" /> ...
HTMLIFrameElement.reload()
the
reload() method of the htmliframeelement interface is used to
reload the content of the <iframe>.
... syntax instanceofhtmliframeelement.
reload(hard
reload); returns void.
... parameters hard
reload optional a boolean that indicates whether all the resources to
reload must be revalidated (true) or may be taken directly from the browser cache (false).
... examples stop
reload.addeventlistener('touchend',function() { if(stop
reload.textcontent === 'x') { browser.stop(); } else { browser.
reload(); } }); specification not part of any specification.
NSS 3.14.2 release notes
network security services (nss) 3.14.2 is a patch
release for nss 3.14.
...the
release is available for download from https://ftp.mozilla.org/pub/mozilla.org/security/nss/
releases/nss_3_14_2_rtm/src/ for the primary nss documentation pages please visit /docs/nss new in nss 3.14.2 nss will now make use of the intel aes-ni and avx instruction sets for hardware-accelerated aes-gcm on 64-bit linux systems.
...support for other platforms, such as windows, will follow in a future nss
release.
...a program linked with older nss 3.x shared libraries will work with nss 3.14.2 shared libraries without recompiling or
relinking.
NSS 3.14.3 release notes
introduction network security services (nss) 3.14.3 is a patch
release for nss 3.14.
...nss 3.14.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_14_3_rtm/src/ new in nss 3.14.3 new functionality no new major functionality is introduced in this
release.
... this
release is a patch
release to address cve-2013-1620.
...a program linked with older nss 3.x shared libraries will work with nss 3.14.3 shared libraries without recompiling or
relinking.
NSS 3.15.4 release notes
introduction network security services (nss) 3.15.4 is a patch
release for nss 3.15.
...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.
... bugs fixed in nss 3.15.4 a complete list of all bugs resolved in this
release can be obtained at https://bugzilla.mozilla.org/buglist.cgi?resolution=fixed&classification=components&query_format=advanced&target_milestone=3.15.4&product=nss compatibility nss 3.15.4 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.15.4 shared libraries without recompiling or
relinking.
NSS 3.15.5 release notes
introduction network security services (nss) 3.15.5 is a patch
release for nss 3.15.
...nss 3.15.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_15_5_rtm/src/ new in nss 3.15.5 new functionality added support for the tls application layer protocol negotiation (alpn) extension.
... bugs fixed in nss 3.15.5 a complete list of all bugs resolved in this
release can be obtained at https://bugzilla.mozilla.org/buglist.cgi?resolution=fixed&classification=components&query_format=advanced&target_milestone=3.15.5&product=nss compatibility nss 3.15.5 shared libraries are backward compatible with all older nss 3.x shared libraries.
... a program linked with older nss 3.x shared libraries will work with nss 3.15.5 shared libraries without recompiling or
relinking.
NSS 3.16.2.2 release notes
introduction network security services (nss) 3.16.2.2 is a patch
release for nss 3.16.
... nss 3.16.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_16_2_2_rtm/src/ new in nss 3.16.2.2 new functionality no new functionality is introduced in this
release.
... this is a patch
release to fix a regression.
...a program linked with older nss 3.x shared libraries will work with nss 3.16.2.2 shared libraries without recompiling or
relinking.
NSS 3.16.6 release notes
introduction network security services (nss) 3.16.6 is a patch
release for nss 3.16.
... nss 3.16.6 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_16_6_rtm/src/ new in nss 3.16.6 new functionality no new functionality is introduced in this
release.
... this is a patch
release to fix a regression.
...a program linked with older nss 3.x shared libraries will work with nss 3.16.6 shared libraries without recompiling or
relinking.
NSS 3.17.2 release notes
introduction network security services (nss) 3.17.2 is a patch
release for nss 3.17.
...nss 3.17.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_17_2_rtm/src/ new in nss 3.17.2 new functionality no new functionality is introduced in this
release.
... this is a patch
release to fix a regression and other bugs.
...a program linked with older nss 3.x shared libraries will work with nss 3.17.2 shared libraries without recompiling or
relinking.
NSS 3.18.1 release notes
introduction network security services (nss) 3.18.1 is a patch
release for nss 3.18.
... nss 3.18.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_18_1_rtm/src/ new in nss 3.18.1 no new functionality is introduced in this
release.
... this is a patch
release to update the list of root ca certificates.
...a program linked with older nss 3.18 shared libraries will work with nss 3.18.1 shared libraries without recompiling or
relinking.
NSS 3.18 release notes
introduction the nss team has
released network security services (nss) 3.18, which is a minor
release.
... nss 3.18 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_18_rtm/src/ new in nss 3.18 new functionality when importing certificates and keys from a pkcs#12 source, it's now possible to override the nicknames, prior to importing them into the nss database, using new api sec_pkcs12decoderrenamecertnicknames.
...applications that use or depend on these symbols can and will break in future nss
releases.
...a program linked with older nss 3.x shared libraries will work with nss 3.18 shared libraries without recompiling or
relinking.
NSS 3.19.2.4 release notes
introduction network security services (nss) 3.19.2.4 is a security patch
release for nss 3.19.2.
... (current users of nss 3.19.3, nss 3.19.4 or nss 3.20.x are advised to update to nss 3.21.1, nss 3.22.2 or a later
release.) distribution information the hg tag is nss_3_19_2_4_rtm.
... nss 3.19.2.4 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_4_rtm/src/ new in nss 3.19.2.4 new functionality no new functionality has been introduced in this
release.
...a program linked with older nss 3.x shared libraries will work with nss 3.19.2.4 shared libraries without recompiling or
relinking.
NSS 3.19.3 release notes
introduction network security services (nss) 3.19.3 is a patch
release for nss 3.19.
... nss 3.19.3 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_3_rtm/src/ new in nss 3.19.3 no new functionality is introduced in this
release.
... this is a patch
release to update the list of root ca certificates.
...a program linked with older nss 3.19 shared libraries will work with nss 3.19.3 shared libraries without recompiling or
relinking.
NSS 3.20.2 release notes
introduction network security services (nss) 3.20.2 is a security patch
release for nss 3.20.
... 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.
...a program linked with older nss 3.x shared libraries will work with nss 3.20.2 shared libraries without recompiling or
relinking.
NSS 3.21.1 release notes
introduction network security services (nss) 3.21.1 is a security patch
release for nss 3.21.
... nss 3.21.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_21_1_rtm/src/ new in nss 3.21.1 new functionality no new functionality is introduced in this
release.
... security fixes in nss 3.21.1 bug 1245528 / cve-2016-1950 - fixed a heap-based buffer overflow
related to the parsing of certain asn.1 structures.
...a program linked with older nss 3.x shared libraries will work with nss 3.21.1 shared libraries without recompiling or
relinking.
NSS 3.22.2 release notes
introduction network security services (nss) 3.22.2 is a security patch
release for nss 3.22.
... nss 3.22.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_22_2_rtm/src/ new in nss 3.22.2 new functionality no new functionality is introduced in this
release.
... security fixes in nss 3.22.2 bug 1245528 / cve-2016-1950 - fixed a heap-based buffer overflow
related to the parsing of certain asn.1 structures.
...a program linked with older nss 3.x shared libraries will work with nss 3.22.2 shared libraries without recompiling or
relinking.
NSS 3.23 release notes
introduction the nss team has
released network security services (nss) 3.23, which is a minor
release.
... nss 3.23 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_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).
...:9e:62:65:ba:01:3a:2f:03:07:b6:d0:b8:04 the following ca certificate had the email trust bit turned on cn = actalis authentication root ca sha-256 fingerprint: 55:92:60:84:ec:96:3a:64:b9:6e:2a:be:01:ce:0b:a8:6a:64:fb:fe:bc:c7:aa:b5:af:c1:55:b3:7f:d7:60:66 security fixes in nss 3.23 bug 1245528 / cve-2016-1950 - fixed a heap-based buffer overflow
related to the parsing of certain asn.1 structures.
...a program linked with older nss 3.x shared libraries will work with nss 3.23 shared libraries without recompiling or
relinking.
NSS 3.24 release notes
introduction the network security services (nss) team has
released nss 3.24, which is a minor
release.
... nss 3.24 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_24_rtm/src/ new in nss 3.24 nss 3.24 includes two nss softoken updates, a new function to configure ssl/tls server sockets, and two functions to improve the use of temporary arenas.
... remove most code
related to ssl v2, including the ability to actively send a sslv2-compatible client hello.
...a program linked with older nss 3.x shared libraries will work with nss 3.24 shared libraries without recompiling or
relinking.
NSS 3.25.1 release notes
introduction network security services (nss) 3.25.1 is a patch
release for nss 3.25.
... nss 3.25.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_25_1_rtm/src/ new in nss 3.25.1 new functionality no new functionality is introduced in this
release.
... this is a patch
release to address a tls compatibility issue that some client applications experienced with nss 3.25.
...a program linked with older nss 3.x shared libraries will work with nss 3.25.1 shared libraries without recompiling or
relinking.
NSS 3.26.2 release notes
introduction network security services (nss) 3.26.2 is a patch
release for nss 3.26.
... nss 3.26.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_26_2_rtm/src/ new in nss 3.26.2 new functionality no new functionality is introduced in this
release.
... this is a patch
release to address a tls compatibility issue that some client applications experienced with nss 3.26.1.
...a program linked with older nss 3.x shared libraries will work with nss 3.26.2 shared libraries without recompiling or
relinking.
NSS 3.27.1 release notes
introduction network security services (nss) 3.27.1 is a patch
release for nss 3.27.
... nss 3.27.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_27_1_rtm/src/ new in nss 3.27.1 new functionality no new functionality is introduced in this
release.
... this is a patch
release to address a tls compatibility issue which some applications experienced with nss 3.27.
...a program linked with older nss 3.x shared libraries will work with nss 3.27.1 shared libraries without recompiling or
relinking.
NSS 3.28.1 release notes
introduction network security services (nss) 3.28.1 is a patch
release for nss 3.28.
... nss 3.28.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_28_1_rtm/src/ new in nss 3.28.1 no new functionality is introduced in this
release.
... this is a patch
release to update the list of root ca certificates, and address a minor tls compatibility issue, that some applications experienced with nss 3.28.
...a program linked with older nss 3.x shared libraries will work with nss 3.28.1 shared libraries without recompiling or
relinking.
NSS 3.29.2 release notes
introduction network security services (nss) 3.29.2 is a patch
release for nss 3.29.
... nss 3.29.2 source distributions are available on ftp.mozilla.org for secure https download: source tarballs: https://ftp.mozilla.org/pub/security/nss/
releases/nss_3_29_2_rtm/src/ new in nss 3.29.2 new functionality no new functionality is introduced in this
release.
...this
release restores the session ticket lifetime to the intended value.
...a program linked with older nss 3.x shared libraries will work with nss 3.29.2 shared libraries without recompiling or
relinking.
NSS 3.30.2 release notes
introduction network security services (nss) 3.30.2 is a patch
release for nss 3.30.
... nss 3.30.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_30_2_rtm/src/ new in nss 3.30.2 no new functionality is introduced in this
release.
... this is a patch
release to update the list of root ca certificates.
...a program linked with older nss 3.x shared libraries will work with nss 3.30.2 shared libraries without recompiling or
relinking.
NSS 3.36.2 release notes
introduction network security services (nss) 3.36.2 is a patch
release for nss 3.36.
... nss 3.36.2 source 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.
...a program linked with older nss 3.x shared libraries will work with nss 3.36.2 shared libraries without recompiling or
relinking.
NSS 3.36.5 release notes
introduction network security services (nss) 3.36.5 is a patch
release for nss 3.36.
... nss 3.36.5 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_36_5_rtm/src/ new in nss 3.36.5 new functionality no new functionality is introduced in this
release.
... this is a patch
release to fix cve-2018-12384 bugs fixed in nss 3.36.5 bug 1483128 - nss responded to an sslv2-compatible clienthello with a serverhello that had an all-zero random (cve-2018-12384) compatibility nss 3.36.5 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.36.5 shared libraries without recompiling or
relinking.
NSS 3.36.6 release notes
introduction network security services (nss) 3.36.6 is a patch
release for nss 3.36.
... nss 3.36.6 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_36_6_rtm/src/ new in nss 3.36.6 new functionality no new functionality is introduced in this
release.
... this is a patch
release to fix cve-2018-12404 bugs fixed in nss 3.36.6 bug 1485864 - cache side-channel variant of the bleichenbacher attack (cve-2018-12404) bug 1389967 and bug 1448748 - fixes for mingw on x64 platforms.
...a program linked with older nss 3.x shared libraries will work with nss 3.36.6 shared libraries without recompiling or
relinking.
NSS 3.37.1 release notes
introduction network security services (nss) 3.37.1 is a patch
release for nss 3.37.
... nss 3.37.1 source 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.
...a program linked with older nss 3.x shared libraries will work with nss 3.37.1 shared libraries without recompiling or
relinking.
NSS 3.37 release notes
introduction the nss team has
released network security services (nss) 3.37, which is a minor
release.
... nss 3.37 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_37_rtm/src/ notable changes in nss 3.37 the tls 1.3 implementation was updated to draft 28.
... added hacl* poly1305 32-bit the code to support the npn protocol, which had already been disabled in a previous
release, has been fully removed.
...a program linked with older nss 3.x shared libraries will work with nss 3.37 shared libraries without recompiling or
relinking.
NSS 3.40.1 release notes
introduction the nss team has
released network security services (nss) 3.40.1, which is a patch
release for nss 3.40 distribution information the hg tag is nss_3_40_1_rtm.
... nss 3.40 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_40_1_rtm/src/ new in nss 3.40.1 new functionality no new functionality is introduced in this
release.
... this is a patch
release to fix cve-2018-12404 new functions none bugs fixed in nss 3.40.1 bug 1485864 - cache side-channel variant of the bleichenbacher attack (cve-2018-12404) compatibility nss 3.40.1 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.40.1 shared libraries without recompiling or
relinking.
NSS 3.42.1 release notes
introduction the nss team has
released network security services (nss) 3.42.1 on 31 january 2019, which is a patch
release.
... nss 3.42.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_42_1_rtm/src/ other
releases are available in nss
releases.
...this was originally announced in nss 3.42, but was mistakenly not included in the
release.
...a program linked with older nss 3.x shared libraries will work with nss 3.42.1 shared libraries without recompiling or
relinking.
NSS 3.42 release notes
introduction the nss team has
released network security services (nss) 3.42 on 25 january 2019, which is a minor
release.
... nss 3.42 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_42_rtm/src/ other
releases are available in nss
releases.
...note: this was mistakenly not in
release 3.42, and is instead in nss 3.42.1.
...a program linked with older nss 3.x shared libraries will work with nss 3.42 shared libraries without recompiling or
relinking.
NSS 3.47 release notes
introduction the nss team has
released network security services (nss) 3.47 on 18 october 2019, which is a minor
release.
... nss 3.47 source distributions are available on ftp.mozilla.org for secure https download: source tarballs: https://ftp.mozilla.org/pub/mozilla.org/security/nss/
releases/nss_3_47_rtm/src/ other
releases are available in nss
releases.
... upcoming changes to default tls configuration the next nss team plans to make two changes to the default tls configuration in nss 3.48, which will be
released in early december: tls 1.3 will be the default maximum tls version.
...a program linked with older nss 3.x shared libraries will work with nss 3.47 shared libraries without recompiling or
relinking.
NSS 3.49 release notes
introduction the nss team has
released network security services (nss) 3.49 on 3 january 2020, which is a minor
release.
... nss 3.49 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_49_rtm/src/ other
releases are available in nss
releases.
...bug 1603257 - fix ubsan issue in softoken ckm_nss_chacha20_ctr initialization bug 1590001 - additional hrr tests (cve-2019-17023) bug 1600144 - treat clienthello with message_seq of 1 as a second clienthello bug 1603027 - test that esni is regenerated after helloretryrequest bug 1593167 - intermittent mis-reporting potential security risk sec_error_unknown_issuer bug 1535787 - fix automation/
release/nss-
release-helper.py on macos bug 1594933 - disable building dbm by default bug 1562548 - improve gcm perfomance on aarch32 this bugzilla query returns all the bugs fixed in nss 3.49: https://bugzilla.mozilla.org/buglist.cgi?resolution=fixed&classification=components&query_format=advanced&product=nss&target_milestone=3.49 compatibility nss 3.49 shared libraries are backward compatible...
...a program linked with older nss 3.x shared libraries will work with nss 3.49 shared libraries without recompiling or
relinking.
NSS 3.50 release notes
introduction the nss team has
released network security services (nss) 3.50 on 7 february 2020, which is a minor
release.
... nss 3.50 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_50_rtm/src/ other
releases are available in nss
releases.
...nss 3.49.1 sped up pbkdf2 operations, though pbkdf1 operations are also
relevant for older nss databases (also included in nss 3.49.2) bug 1608895 - gyp builds on taskcluster broken by setuptools v45.0.0 (for lacking python3) bug 1574643 - upgrade hacl* verified implementations of chacha20, poly1305, and 64-bit curve25519 bug 1608327 - two problems with neon-specific code in freebl bug 1575843 - detect aarch64 cpu features on freebsd bug 1607099 - remove the buildbo...
...a program linked with older nss 3.x shared libraries will work with nss 3.50 shared libraries without recompiling or
relinking.
NSS 3.51.1 release notes
introduction the nss team has
released network security services (nss) 3.51.1 on 3 april 2020.
... this is a minor
release focusing on functional bug fixes and low-risk patches only.
... nss 3.51.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_51_1_rtm/src/ other
releases are available in nss
releases.
...a program linked with older nss 3.x shared libraries will work with nss 3.51.1 shared libraries without recompiling or
relinking.
NSS 3.56 release notes
introduction the nss team has
released network security services (nss) 3.56 on 21 august 2020, which is a minor
release.
... nss 3.56 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_56_rtm/src/ other
releases are available in nss
releases.
... bug 1652729 - add build flag to disable rc2 and
relocate to lib/freebl/deprecated.
...a program linked with older nss 3.x shared libraries will work with nss 3.56 shared libraries without recompiling or
relinking.
GetAccessibleRelated
« nsiaccessible page summary this method returns an accessible
related to this one by the given
relation type.
... nsiaccessible getaccessible
related( in unsigned long a
relationtype ); parameters a
relationtype[in] the
relation type between the accessible (see constants listed in
relations documentation).
... return value returns an accessible which is
related to the one provided by the given
relation type.
... exceptions thrown ns_error_failure indicates that the accessible is unattached from the accessible tree.ns_error_not_implemented indicates that the given
relation type is unsupported see also nsiaccessible.get
relations() nsiaccessible.
relationscount nsiaccessible.get
relation() ...
Document.registerElement() - Web APIs
warning: document.registe
relement() is deprecated in favor of customelements.define().
... the document.registe
relement() method registers a new custom element in the browser and returns a constructor for the new element.
... syntax var constructor = document.registe
relement(tag-name, options); parameters tag-name the name of the custom element.
... example here is a very simple example: var mytag = document.registe
relement('my-tag'); now the new tag is registered in the browser.
Element.releasePointerCapture() - Web APIs
the
releasepointercapture() method of the element interface
releases (stops) pointer capture that was previously set for a specific (pointerevent) pointer.
... syntax targetelement.
releasepointercapture(pointerid); parameters pointerid the pointerid of a pointerevent object.
... html <div id="slider">slide me</div> css div { width: 140px; height: 50px; display: flex; align-items: center; justify-content: center; background: #fbe; } javascript function beginsliding(e) { slider.onpointermove = slide; slider.setpointercapture(e.pointerid); } function stopsliding(e) { slider.onpointermove = null; slider.
releasepointercapture(e.pointerid); } function slide(e) { slider.style.transform = `translate(${e.clientx - 70}px)`; } const slider = document.getelementbyid('slider'); slider.onpointerdown = beginsliding; slider.onpointerup = stopsliding; result specifications specification status comment pointer events – level 2the definition of '
releasepointercapture' in that s...
... pointer eventsthe definition of '
releasepointercapture' in that specification.
FetchEvent.isReload - Web APIs
the is
reload read-only property of the fetchevent interface returns true if the event was dispatched by the user attempting to
reload the page, and false otherwise.
... pressing the refresh button is a
reload while clicking a link and pressing the back button is not.
... syntax var
reloaded = fetchevent.is
reload value a boolean.
... example self.addeventlistener('fetch', function(event) { event.respondwith( if (event.is
reload) { //return something } else { //return something else }; ); }); ...
File.webkitRelativePath - Web APIs
the file.webkit
relativepath is a read-only property that contains a usvstring which specifies the file's path
relative to the directory selected by the user in an <input> element with its webkitdirectory attribute set.
... syntax
relativepath = file.webkit
relativepath value a usvstring containing the path of the file
relative to the ancestor directory the user selected.
..."file" id="filepicker" name="filelist" webkitdirectory multiple /> <ul id="listing"></ul> javascript content document.getelementbyid("filepicker").addeventlistener("change", function(event) { let output = document.getelementbyid("listing"); let files = event.target.files; for (let i=0; i<files.length; i++) { let item = document.createelement("li"); item.innerhtml = files[i].webkit
relativepath; output.appendchild(item); }; }, false); result specifications specification status comment file and directory entries apithe definition of 'webkit
relativepath' in that specification.
... desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetwebkit
relativepathchrome full support 13prefixed full support 13prefixed prefixed implemented with the vendor prefix: webkitedge full support 13firefox full support 49ie no support no...
WebGL2RenderingContext.framebufferTextureLayer() - Web APIs
the webgl2renderingcontext.framebuffertextu
relayer() method of the webgl 2 api attaches a single layer of a texture to a framebuffer.
... syntax void gl.framebuffertextu
relayer(target, attachment, texture, level, layer); parameters target a glenum specifying the binding point (target).
... examples gl.framebuffertextu
relayer(gl.framebuffer, gl.color_attachment0, texture, 0, 8); specifications specification status comment webgl 2.0the definition of 'framebuffertextu
relayer' in that specification.
... opengl es 3.0the definition of 'glframebuffertextu
relayer' in that specification.
Window.releaseEvents() - Web APIs
summary
releases the window from trapping events of a specific type.
... syntax window.
releaseevents(eventtype) eventtype is a combination of the following values: event.abort, event.blur, event.click, event.change, event.dblclick, event.dragddrop, event.error, event.focus, event.keydown, event.keypress, event.keyup, event.load, event.mousedown, event.mousemove, event.mouseout, event.mouseover, event.mouseup, event.move, event.reset, event.resize, event.select, event.submit, event.unload.
... example window.
releaseevents(event.keypress) notes note that you can pass a list of events to this method using the following syntax: window.
releaseevents(event.keypress | event.keydown | event.keyup).
... desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internet
releaseevents deprecatednon-standardchrome full support yesedge full support 12firefox full support yesie ?
Relationship of flexbox to other layout methods - CSS: Cascading Style Sheets
these modules
relate to each other, and are at different stages of development.
...there is a note in the flexbox spec stating that in the future, once it is completed, the definitions in box alignment level 3 will supersede those of flexbox: "note: while the alignment properties are defined in css box alignment [css-align-3], flexible box layout reproduces the definitions of the
relevant ones here so as to not create a normative dependency that may slow down advancement of the spec.
...there is ra
rely a right or wrong answer.
... for more comparisons of grid and flexbox see the article
relationship of grid layout to other layout methods.
Intl.RelativeTimeFormat.supportedLocalesOf() - JavaScript
the intl.
relativetimeformat.supportedlocalesof() method returns an array containing those of the provided locales that are supported in date and time formatting without having to fall back to the runtime's default locale.
... syntax intl.
relativetimeformat.supportedlocalesof(locales[, options]) parameters locales a string with a bcp 47 language tag, or an array of such strings.
... examples using supportedlocalesof assuming a runtime that supports indonesian and german but not balinese in date and time formatting, supportedlocalesof returns the indonesian and german language tags unchanged, even though pinyin collation is neither
relevant to date and time formatting nor used with indonesian, and a specialized german for indonesia is unlikely to be supported.
... const locales = ['ban', 'id-u-co-pinyin', 'de-id']; const options = { localematcher: 'lookup' }; console.log(intl.
relativetimeformat.supportedlocalesof(locales, options).join(', ')); // → "id-u-co-pinyin, de-id" specifications specification status comment ecmascript internationalization api (ecma-402)the definition of '
relativetimeformat.supportedlocalesof()' in that specification.
prefer_related_applications - Web app manifests
type boolean mandatory no the prefer_
related_applications member is a boolean value that specifies that applications listed in
related_applications should be preferred over the web application.
... if the prefer_
related_applications member is set to true, the user agent might suggest installing one of the
related applications instead of this web app.
... if omitted, prefer_
related_applications defaults to false.
... examples "prefer_
related_applications": true specification specification status comment feedback web app manifestthe definition of 'prefer_
related_applications' in that specification.
related_applications - Web app manifests
type array mandatory no the
related_applications field is an array of objects specifying native applications that are installable by, or accessible to, the underlying platform — for example, a native android application obtainable through the google play store.
... note: developer can specify that the native applications are preferred over the web application by setting prefer_
related_applications to true.
... examples "
related_applications": [ { "platform": "play", "url": "https://play.google.com/store/apps/details?id=com.example.app1", "id": "com.example.app1" }, { "platform": "itunes", "url": "https://itunes.apple.com/app/example-app1/id123456789" } ]
related application values application objects may contain the following values: member description platform the platform on which the application can be found.
... specification specification status comment feedback web app manifestthe definition of '
related_applications' in that specification.
XULRunner 1.9.1 Release Notes - Archive of obsolete content
xulrunner 1.9.1 is a stable
release of the mozilla xulrunner application framework.
...current version the current version of xulrunner is 1.9.1.19, matching firefox 3.5.19 detailed
release notes can be found here.
...additional features for installing and deploying xulrunner and applications based on xulrunner will be available in future
releases.
XULRunner 1.9.2 Release Notes - Archive of obsolete content
xulrunner 1.9.2 is a stable
release of the mozilla xulrunner application framework.
...current version the current version of xulrunner 1.9.2 is 3.6.26, matching firefox 3.6.26 detailed
release notes can be found here.
...additional features for installing and deploying xulrunner and applications based on xulrunner will be available in future
releases.
XULRunner 1.9 Release Notes - Archive of obsolete content
xulrunner 1.9 is a stable
release of the mozilla xulrunner application framework.
... current version the current version of xulrunner is 1.9.0.17, matching firefox 3.0.17 detailed
release notes can be found here.
...additional features for installing and deploying xulrunner and applications based on xulrunner will be available in future
releases.
HTML - MDN Web Docs Glossary: Definitions of Web-related terms
the ietf began formally specifying html in 1993, and after several drafts
released version 2.0 in 1995.
...html 4.0 was
released in 1999 and became an iso standard in 2000.
...thanks to whatwg, work on html5 continued: the two organizations
released the first draft in 2008 and the final standard in 2014.
Search engine - MDN Web Docs Glossary: Definitions of Web-related terms
this enables users to find
relevant pages as quickly as possible.
... searching: looking for
relevant web pages based on queries consisting of key words and other commands to the search engine.
... the search engine finds the urls of pages that match the query, and ranks them based on their
relevance.
Learning area release notes - Learn web development
learn why frameworks exist, when you should use one (and when you shouldn't), what kinds of features are common to all frameworks, and how they
relate to the vanilla javascript you may already know.
... april 2020 our new understanding client-side web development tools module has been
released!
...you will find these new articles linked in "test your skills" sections at the bottom of
relevant articles.
NSPR release procedure
release checklist change the nspr version in mozilla/nsprpub/pr/include/prinit.h.
...as the name of the shell script implies, repackage.sh me
rely repackages binary distributions in a different format.
... before you run repackage.sh, you need to have built the binary distributions using the "gmake
release" makefile target.
NSPR release process
remove "beta" from the nspr version number for the final
release.
... upload a source tar file to https://ftp.mozilla.org/pub/mozilla....nspr/
releases/ write the
release notes.
... announce the
release in the mozilla nspr newsgroup.
JSS 4.4.0 Release Notes
introduction the java security services (jss) team has
released jss 4.4.0, which is a minor
release.
... jss 4.4.0 source distributions are available on ftp.mozilla.org for secure https download: source tarballs: https://ftp.mozilla.org/pub/mozilla.org/security/jss/
releases/jss_4_4_0_rtm/src/ new in jss 4.40 new functionality new functions new macros notable changes in jss 4.40 picks up work done downstream for fedora and rhel and used by various linux distributions with includes:.
...a program linked with older jss 4.3.2 shared libraries will not work with jss 4.4.0 shared libraries without recompiling or
relinking.
NSS 3.14 release notes
introduction the nss team has
released network security services (nss) 3.14, which is a minor
release with the following new features: support for tls 1.1 (rfc 4346) experimental support for dtls 1.0 (rfc 4347) and dtls-srtp (rfc 5764) support for aes-ctr, aes-cts, and aes-gcm support for keying material exporters for tls (rfc 5705) in addition to the above new features, the following major changes have been introduced: support for certificate signatures using the md5 hash algorithm is now disabled by default.
...previous
releases were
released under a mpl 1.1/gpl 2.0/lgpl 2.1 tri-license.
... nss 3.14 source tarballs can be downloaded from https://ftp.mozilla.org/pub/mozilla.org/security/nss/
releases/nss_3_14_rtm/src/.
NSS 3.15.1 release notes
introduction network security services (nss) 3.15.1 is a patch
release for nss 3.15.
...distribution information nss 3.15.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_1_rtm/src/ new in nss 3.15.1 new functionality tls 1.2: tls 1.2 (rfc 5246) is supported.
...a program linked with older nss 3.x shared libraries will work with nss 3.15.1 shared libraries without recompiling or
relinking.
NSS 3.16.2.3 release notes
introduction network security services (nss) 3.16.2.3 is a patch
release for nss 3.16.
... nss 3.16.2.3 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_16_2_3_rtm/src/ new in nss 3.16.2.3 this patch
release fixes a bug and contains a backport of the tls_fallback_scsv feature, which was originally made available in nss 3.17.1.
...a program linked with older nss 3.x shared libraries will work with nss 3.16.2.3 shared libraries without recompiling or
relinking.
NSS 3.17.3 release notes
introduction network security services (nss) 3.17.3 is a patch
release for nss 3.17.
... nss 3.17.3 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_3_rtm/src/ new in nss 3.17.3 new functionality support for tls_fallback_scsv has been added to the ssltap and tstclnt utilities.
...a program linked with older nss 3.x shared libraries will work with nss 3.17.3 shared libraries without recompiling or
relinking.
NSS 3.19.2 release notes
introduction network security services (nss) 3.19.2 is a patch
release for nss 3.19 that addresses compatibility issues in nss 3.19.1.
... nss 3.19.2 source distributions are available on ftp.mozilla.org for secure https download: source tarballs: https://ftp.mozilla.org/pub/mozilla.org/security/nss/
releases/nss_3_19_2_rtm/src/ new in nss 3.19.2 new functionality no new functionality is introduced in this
release.
...a program linked with older nss 3.x shared libraries will work with nss 3.19.2 shared libraries without recompiling or
relinking.
NSS 3.19 release notes
introduction the nss team has
released network security services (nss) 3.19, which is a minor security
release.
... nss 3.19 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_rtm/src/ security fixes in nss 3.19 bug 1086145 / cve-2015-2721 - fixed a bug
related to the ordering of tls handshake messages.
...a program linked with older nss 3.x shared libraries will work with nss 3.19 shared libraries without recompiling or
relinking.
NSS 3.20 release notes
introduction the nss team has
released network security services (nss) 3.20, which is a minor
release.
... nss 3.20 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_rtm/src/ new in nss 3.20 new functionality the tls library has been extended to support dhe ciphersuites in server applications.
...a program linked with older nss 3.x shared libraries will work with nss 3.20 shared libraries without recompiling or
relinking.
NSS 3.21.2 release notes
introduction network security services (nss) 3.21.2 is a security patch
release for nss 3.21.1.
... nss 3.21.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_21_2_rtm/src/ new in nss 3.21.2 new functionality no new functionality is introduced in this
release.
...a program linked with older nss 3.x shared libraries will work with nss 3.21.2 shared libraries without recompiling or
relinking.
NSS 3.21.3 release notes
introduction network security services (nss) 3.21.3 is a security patch
release for nss 3.21.2.
... nss 3.21.3 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_3_rtm/src/ new in nss 3.21.3 new functionality no new functionality is introduced in this
release.
...a program linked with older nss 3.x shared libraries will work with nss 3.21.3 shared libraries without recompiling or
relinking.
NSS 3.21.4 release notes
introduction network security services (nss) 3.21.4 is a security patch
release for nss 3.21.
... nss 3.21.4 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_4_rtm/src/ new in nss 3.21.4 no new functionality is introduced in this
release.
...a program linked with older nss 3.x shared libraries will work with nss 3.21.4 shared libraries without recompiling or
relinking.
NSS 3.22.1 release notes
introduction network security services (nss) 3.22.1 is a patch
release for nss 3.22.
... nss 3.22.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_22_1_rtm/src/ new in nss 3.22.1 new functionality no new functionality is introduced in this
release.
...a program linked with older nss 3.x shared libraries will work with nss 3.22.1 shared libraries without recompiling or
relinking.
NSS 3.22.3 release notes
introduction network security services (nss) 3.22.3 is a patch
release for nss 3.22.
... nss 3.22.3 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_22_3_rtm/src/ new in nss 3.22.3 new functionality no new functionality is introduced in this
release.
...a program linked with older nss 3.x shared libraries will work with nss 3.22.3 shared libraries without recompiling or
relinking.
NSS 3.22 release notes
introduction the nss team has
released network security services (nss) 3.22, which is a minor
release.
... nss 3.22 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_22_rtm/src/ new in nss 3.22 new functionality rsa-pss signatures are now supported (bug 1215295) new functions pk11_signwithmechanism() and pk11_signwithmechanism() are provided to allow rsa keys to be used with pss.
...a program linked with older nss 3.x shared libraries will work with nss 3.22 shared libraries without recompiling or
relinking.
NSS 3.25 release notes
introduction the network security services (nss) team has
released nss 3.25, which is a minor
release.
... source tarballs: https://ftp.mozilla.org/pub/mozilla.org/security/nss/
releases/nss_3_25_rtm/src/ new in nss 3.25 new functionality implemented dhe key agreement for tls 1.3.
...a program linked with older nss 3.x shared libraries will work with nss 3.25 shared libraries without recompiling or
relinking.
NSS 3.26 release notes
introduction the network security services (nss) team has
released nss 3.26, which is a minor
release.
... nss 3.26 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_26_rtm/src/ new in nss 3.26 new functionality the selfserv test utility has been enhanced to support alpn (http/1.1) and 0-rtt added support for the system-wide crypto policy available on fedora linux, see http://fedoraproject.org/wiki/changes/cryptopolicy introduced build flag nss_disable_libpkix which allows compilation of nss without the libpkix library notable changes in nss 3.26 the following ca certificate was added cn = isrg root x1 sha-256 fingerprint: 96:bc...
...a program linked with older nss 3.x shared libraries will work with nss 3.26 shared libraries without recompiling or
relinking.
NSS 3.27 release notes
introduction the network security services (nss) team has
released nss 3.27, which is a minor
release.
... nss 3.27 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_27_rtm/src/ new in nss 3.27 new functionality allow custom named group priorities for tls key exchange handshake (ssl_namedgroupconfig).
...a program linked with older nss 3.x shared libraries will work with nss 3.27 shared libraries without recompiling or
relinking.
NSS 3.28.4 release notes
introduction network security services (nss) 3.28.4 is a security patch
release for nss 3.28.
... nss 3.28.4 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_28_4_rtm/src/ new in nss 3.28.4 no new functionality is introduced in this
release.
...a program linked with older nss 3.x shared libraries will work with nss 3.28.4 shared libraries without recompiling or
relinking.
NSS 3.29.3 release notes
introduction network security services (nss) 3.29.3 is a patch
release for nss 3.29.
... nss 3.29.3 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_29_3_rtm/src/ new in nss 3.29.3 no new functionality is introduced in this
release.
...a program linked with older nss 3.x shared libraries will work with nss 3.29.3 shared libraries without recompiling or
relinking.
NSS 3.29.5 release notes
introduction network security services (nss) 3.29.5 is a security patch
release for nss 3.29.
... nss 3.29.5 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_29_5_rtm/src/ new in nss 3.29.5 no new functionality is introduced in this
release.
...a program linked with older nss 3.x shared libraries will work with nss 3.29.5 shared libraries without recompiling or
relinking.
NSS 3.29 release notes
introduction the network security services (nss) team has
released nss 3.29, which is a minor
release.
... nss 3.29 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_29_rtm/src/ notable changes in nss 3.29 fixed a nss 3.28 regression in the signature scheme flexibility that causes connectivity issues between ios 8 clients and nss servers with ecdsa certificates (bug1334114).
...a program linked with older nss 3.x shared libraries will work with nss 3.29 shared libraries without recompiling or
relinking.
NSS 3.30.1 release notes
introduction network security services (nss) 3.30.1 is a security patch
release for nss 3.30.
... nss 3.30.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_30_1_rtm/src/ new in nss 3.30.1 no new functionality is introduced in this
release.
...a program linked with older nss 3.x shared libraries will work with nss 3.30.1 shared libraries without recompiling or
relinking.
NSS 3.30 release notes
introduction the network security services (nss) team has
released nss 3.30, which is a minor
release.
... nss 3.30 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_30_rtm/src/ new in nss 3.30 new functionality in the pkcs#11 root ca module (nssckbi), cas with positive trust are marked with a new boolean attribute, cka_nss_mozilla_ca_policy, set to true.
...a program linked with older nss 3.x shared libraries will work with nss 3.30 shared libraries without recompiling or
relinking.
NSS 3.31.1 release notes
introduction the network security services (nss) team has
released nss 3.31.1, which is a patch
release for nss 3.31.
... nss 3.31.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_31_1_rtm/src/ new in nss 3.31.1 no new functionality is introduced in this
release.
...a program linked with older nss 3.x shared libraries will work with nss 3.31.1 shared libraries, without recompiling, or
relinking.
NSS 3.31 release notes
introduction the network security services (nss) team has
released nss 3.31, which is a minor
release.
... nss 3.31 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_31_rtm/src/ new in nss 3.31 new functionality allow certificates to be specified by rfc7512 pkcs#11 uris.
...a program linked with older nss 3.x shared libraries will work with nss 3.31 shared libraries without recompiling or
relinking.
NSS 3.32 release notes
introduction the network security services (nss) team has
released nss 3.32, which is a minor
release.
... nss 3.32 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_32_rtm/src/ notable changes in nss 3.32 various minor improvements and correctness fixes.
...a program linked with older nss 3.x shared libraries will work with nss 3.32 shared libraries, without recompiling, or
relinking.
NSS 3.33 release notes
introduction the network security services (nss) team has
released nss 3.33, which is a minor
release.
... nss 3.33 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_33_rtm/src/ notable changes in nss 3.33 tls compression is no longer supported.
...a program linked with older nss 3.x shared libraries will work with nss 3.33 shared libraries, without recompiling, or
relinking.
NSS 3.34.1 release notes
introduction the network security services (nss) team has
released nss 3.34.1, which is a minor
release.
... nss 3.34.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_34_1_rtm/src/ notable changes in nss 3.34.1 the following ca certificate was re-added.
...a program linked with older nss 3.x shared libraries will work with nss 3.34 shared libraries, without recompiling, or
relinking.
NSS 3.34 release notes
introduction the network security services (nss) team has
released nss 3.34, which is a minor
release.
... nss 3.34 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_34_rtm/src/ notable changes in nss 3.34 the following ca certificates were added: cn = gdca trustauth r5 root sha-256 fingerprint: bf:ff:8f:d0:44:33:48:7d:6a:8a:a6:0c:1a:29:76:7a:9f:c2:bb:b0:5e:42:0f:71:3a:13:b9:92:89:1d:38:93 trust flags: websites cn = ssl.com root certification authority rsa sha-256 fingerprint: 85:66:6a:56:2e:e0:be:5c:e9:25:c1:d8:89:0a:6f:76:a8:7e:c1:6d:4d:7d:5f:29:ea:74:19:cf:20:12:3b:69 trust flags: websites, email ...
...a program linked with older nss 3.x shared libraries will work with nss 3.34 shared libraries, without recompiling, or
relinking.
NSS 3.36 release notes
introduction the nss team has
released network security services (nss) 3.36, which is a minor
release.
... nss 3.36 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_36_rtm/src/ (make a link) new in nss 3.36 new functionality experimental apis for tls session cache handling.
...a program linked with older nss 3.x shared libraries will work with nss 3.36 shared libraries without recompiling or
relinking.
NSS 3.38 release notes
introduction the nss team has
released network security services (nss) 3.38, which is a minor
release.
... nss 3.38 source distributions are available on ftp.mozilla.org for secure https download: source tarballs: https://ftp.mozilla.org/pub/mozilla.org/security/nss/
releases/nss_3_38_rtm/src/ new in nss 3.38 new functionality added support for the tls record size limit extension.
...a program linked with older nss 3.x shared libraries will work with nss 3.38 shared libraries without recompiling or
relinking.
NSS 3.39 release notes
introduction the nss team has
released network security services (nss) 3.39, which is a minor
release.
... nss 3.39 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_39_rtm/src/ new in nss 3.39 new functionality the tstclnt and selfserv utilities added support for configuring the enabled tls signature schemes using the -j parameter.
...a program linked with older nss 3.x shared libraries will work with nss 3.39 shared libraries without recompiling or
relinking.
NSS 3.40 release notes
introduction the nss team has
released network security services (nss) 3.40, which is a minor
release.
... nss 3.40 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_40_rtm/src/ new in nss 3.40 new functionality the draft-00 version of encrypted sni support is implemented tstclnt now takes -n option to specify encrypted sni key new functions none notable changes in nss 3.40 the mozilla::pkix library has been ported from mozilla psm to nss.
...a program linked with older nss 3.x shared libraries will work with nss 3.40 shared libraries without recompiling or
relinking.
NSS 3.41 release notes
introduction the nss team has
released network security services (nss) 3.41 on 7 december 2018, which is a minor
release.
... nss 3.41 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_41_rtm/src/ new in nss 3.41 new functionality bug 1252891 - implemented eku handling for ipsec ike.
...a program linked with older nss 3.x shared libraries will work with nss 3.41 shared libraries without recompiling or
relinking.
NSS 3.43 release notes
introduction the nss team has
released network security services (nss) 3.43 on 16 march 2019, which is a minor
release.
... nss 3.43 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_43_rtm/src/ other
releases are available in nss
releases.
...a program linked with older nss 3.x shared libraries will work with nss 3.43 shared libraries without recompiling or
relinking.
NSS 3.44 release notes
introduction the nss team has
released network security services (nss) 3.44 on 10 may 2019, which is a minor
release.
... nss 3.44 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_44_rtm/src/ other
releases are available in nss
releases.
...a program linked with older nss 3.x shared libraries will work with nss 3.44 shared libraries without recompiling or
relinking.
NSS 3.48 release notes
introduction the nss team has
released network security services (nss) 3.48 on 5 december 2019, which is a minor
release.
... nss 3.48 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_48_rtm/src/ other
releases are available in nss
releases.
...a program linked with older nss 3.x shared libraries will work with nss 3.48 shared libraries without recompiling or
relinking.
NSS 3.51 release notes
introduction the nss team has
released network security services (nss) 3.51 on 6 march 2020, which is a minor
release.
... nss 3.51 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_51_rtm/src/ other
releases are available in nss
releases.
...a program linked with older nss 3.x shared libraries will work with nss 3.51 shared libraries without recompiling or
relinking.
NSS 3.52 release notes
introduction the nss team has
released network security services (nss) 3.52 on 1 may 2020.
... nss 3.52 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_52_rtm/src/ other
releases are available in nss
releases.
...a program linked with older nss 3.x shared libraries will work with nss 3.52 shared libraries without recompiling or
relinking.
NSS 3.54 release notes
introduction the nss team has
released network security services (nss) 3.54 on 26 june 2020, which is a minor
release.
... nss 3.54 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_54_rtm/src/ other
releases are available in nss
releases.
...a program linked with older nss 3.x shared libraries will work with nss 3.54 shared libraries without recompiling or
relinking.
NSS 3.55 release notes
introduction the nss team has
released network security services (nss) 3.55 on 24 july 2020, which is a minor
release.
... nss 3.55 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_55_rtm/src/ other
releases are available in nss
releases.
...a program linked with older nss 3.x shared libraries will work with nss 3.55 shared libraries without recompiling or
relinking.
GetRelations
« nsiaccessible page summary this method returns multiple accessible
relations for this accessible object.
... nsiarray get
relations(); return value returns nsiarray array of accessible
relations for this object, every accessible
relation object implements nsiaccessible
relation interface.
... see also nsiaccessible.getaccessible
relation() nsiaccessible.
relationscount nsiaccessible.get
relation() ...
NS_IF_RELEASE
ns_if_
release has no effect when the pointer is null.
... this macro should only be used when the pointer might be null; otherwise, use ns_
release.
... ns_if_
release is exactly equivalent to the following function: inline void ns_if_
release(nsisupports* foo) { if (foo) foo->
release(); foo = 0; } syntax ns_if_
release(foo); see also ns_addref, ns_
release ...
HTMLAreaElement.rel - Web APIs
the htmlareaelement.
rel property reflects the
rel attribute.
... it is a domstring containing a space-separated list of link types indicating the
relationship between the resource represented by the <area> element and the current document.
... syntax var
relstr = areaelt.
rel; areaelt.
rel =
relstr; example var areas = document.getelementsbytagname("area"); var length = areas.length; for (var i = 0; i < length; i++) { alert("
rel: " + areas[i].
rel); } specifications specification status comment html living standardthe definition of '
rel' in that specification.
HTMLAreaElement.relList - Web APIs
the htmlareaelement.
rellist read-only property reflects the
rel attribute.
... it is a live domtokenlist containing the set of link types indicating the
relationship between the resource represented by the <area> element and the current document.
... syntax var
relstr = areaelt.
rellist; example var areas = document.getelementsbytagname("area"); var length = areas.length; for (var i = 0; i < length; i++) { var list = areas[i].
rellist; var listlength = list.length; console.log("new area found."); for (var j = 0; j < listlength; j++) { console.log(list[j]); } } specifications specification status comment html living standardthe definition of '
rellist' in that specification.
HTMLLinkElement.relList - Web APIs
the htmllinkelement.
rellist read-only property reflects the
rel attribute.
... it is a live domtokenlist containing the set of link types indicating the
relationship between the resource represented by the <link> element and the current document.
... syntax var
relstr = linkelt.
rellist; example var links = document.getelementsbytagname("link"); var length = links.length; for (var i = 0; i < length; i++) { var list = links[i].
rellist; var listlength = list.length; console.log("new link found."); for (var j = 0; j < listlength; j++) { console.log(list[j]); } } specifications specification status comment html living standardthe definition of '
rellist' in that specification.
RTCIceCandidateStats.relayProtocol - Web APIs
the rtcicecandidatestats dictionary's
relayprotocol property specifies the protocol being used by a local ice candidate to communicate with the turn server.
... syntax
relayprotocol = rtcicecandidatestats.
relayprotocol; value a domstring identifying the protocol being used by the endpoint to communicate with the turn server.
... specifications specification status comment identifiers for webrtc's statistics apithe definition of 'rtcicecandidatestats.
relayprotocol' in that specification.
SVGAnimateColorElement - Web APIs
the svganimatecolo
relement interface corresponds to the <animatecolor> 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/svganimatecolo
relement" target="_top"><rect x="1" y="1" width="220" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="111" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svganimatecolo
relement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface has no properties but inherits properties ...
... specifications specification status comment scalable vector graphics (svg) 1.1 (second edition)the definition of 'svganimatecolo
relement' in that specification.
USBDevice.releaseInterface() - Web APIs
the
releaseinterface() method of the usbdevice interface returns a promise that resolves when a cliamed interface is
released from exclusive access.
... syntax var promise = usbdevice.
releaseinterface(interfacenumber) parameters interfacenumber the device-specific index of the currently-claimed interface.
... specifications specification status comment webusbthe definition of '
releaseinterface()' in that specification.
Link types: preload - HTML: Hypertext Markup Language
the p
reload keyword for the
rel attribute of the <link> element indicates the user is highly likely to require the target resource for the current navigation, and therefore the browser must preemptively fetch and cache the resource.
... see p
reloading content with
rel="p
reload" for more details.
... specifications specification status comment html living standardthe definition of 'p
reload' in that specification.
Intl.RelativeTimeFormat.prototype.resolvedOptions() - JavaScript
the intl.
relativetimeformat.prototype.resolvedoptions() method returns a new object with properties reflecting the locale and
relative time formatting options computed during initialization of this
relativetimeformat object.
... syntax
relativetimeformat.resolvedoptions() return value a new object with properties reflecting the locale and number formatting options computed during the initialization of the given
relativetimeformat object.
... examples using the resolvedoptions method var de = new intl.
relativetimeformat('de-de'); var usedoptions = de.resolvedoptions(); usedoptions.locale; // "de-de" usedoptions.style; // "long" usedoptions.numeric; // "always" usedoptions.numberingsystem; // "latn" specifications specification status comment ecmascript internationalization api (ecma-402)the definition of '
relativetimeformat.resolvedoptions()' ...
Forms related code snippets - Archive of obsolete content
here are some <form>
related code snippets.
...const statement compatibility) <!doctype html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>datepicker example - mdn</title> <script type="text/javascript"> /*\ |*| |*| datepicker example mdndeveloper network |*| |*| https://developer.mozilla.org/docs/code_snippets/forms |*| https://developer.mozilla.org/user:fusionchess |*| |*| this snippet is
released under the gnu public license, version 3 or later.
Tamarin Releases - Archive of obsolete content
this page tracks tamarin source code
releases, past, present and future.
... upcoming
release name(s)
release datelinks tc next~ april 2009roadmap current
release name
release datelinks tc "mar 2009" a5c9ed928c9603/27/09tamarin-devel announcement prior
release name(s)
release datelinks tc "feb 2009" a5c9ed928c9602/19/09tamarin-devel announcement tamarin-central rev 703:2cee46be9ce0 12/02/08tamarin-devel announcement ...
XULRunner 1.8.0.1 Release Notes - Archive of obsolete content
xulrunner 1.8.0.1 is the first stable developer preview
release of xulrunner.
...this is a developer preview
release: additional features for installing and deploying xulrunner and applications based on xulrunner will be available in future
releases.
Asynchronous - MDN Web Docs Glossary: Definitions of Web-related terms
the term asynchronous refers to two or more objects or events not existing or happening at the same time (or multiple
related things happening without waiting for the previous one to complete).
...for example, the ajax (asynchronous javascript and xml) programming technique—now usually simply "ajax", even though json is usually used rather than xml in modern applications—is a mechanism that requests
relatively small amounts of data from the server using http, with the result being returned when available rather than immediately.
DTLS (Datagram Transport Layer Security) - MDN Web Docs Glossary: Definitions of Web-related terms
all of the webrtc
related protocols are required to encrypt their communications using dtls; this includes sctp, srtp, and stun.
... learn more general knowledge datagram transport layer security on wikipedia specifications rfc 6347: datagram transport layer security version 1.2 datagram transport layer security protocol version 1.3 draft specification
related specifications rfc 5763: framework for establishing a secure real-time transport protocol (srtp) security context using dtls rfc 5764: dtls extension to establish keys for the secure real-time transport protocol (srtp) rfc 6083: dtls for stream control transmission protocol (sctp) rfc 8261: datagram transport layer security (dtls) encapsulation of sctp packets rfc 7350: datagram transport layer security (dtls) as transport for session traversal utilities for nat (stun) rfc 7925: tls / dtls profiles for the internet of things ...
REST - MDN Web Docs Glossary: Definitions of Web-related terms
rest(representational state transfer) refers to a group of software architecture design constraints that bring about efficient,
reliable and scalable distributed systems.
...a document, is transferred with its state and
relationships via well-defined, standarized operations and formats or services call themselves restful when they directly modify type of document as opposed to triggering actions somewhere.
TTL - MDN Web Docs Glossary: Definitions of Web-related terms
ttl can refer either to : the lifetime of a packet in a network can do before being
released the expiry time of cached data networking in networking, the ttl, embedded in the packet, is a usually defined as a number of hops or as an expiration timestamp after which the packet is dropped.
... it provides a way to avoids network congestion, but
releasing packets after they roamed the network too long.
UDP (User Datagram Protocol) - MDN Web Docs Glossary: Definitions of Web-related terms
udp (user datagram protocol) is a long standing protocol used together with ip for sending data when transmission speed and efficiency matter more than security and
reliability.
...it has no handshaking dialogues, and thus exposes the user's program to any un
reliability of the underlying network; there is no guarantee of delivery, ordering, or duplicate protection.
WebDAV - MDN Web Docs Glossary: Definitions of Web-related terms
webdav is ra
rely used alone, but two extensions are very common: caldav (remote-access calendar) and carddav (remote-access address book).
...author or creation date) link pages of any media type to
related pages create sets of documents and retrieve hierarchical list copy and move webpages lock a document from being edited by more than one person at a time learn more general knowledge webdav on wikipedia technical reference rfc 2518 rfc 3253 rfc 3744 ...
NSS 3.15 release notes
introduction the nss team has
released network security services (nss) 3.15, which is a minor
release.
...nss 3.15 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_15_rtm/src/ new in nss 3.15 new functionality support for ocsp stapling (rfc 6066, certificate status request) has been added for both client and server sockets.
NSS 3.16.1 release notes
introduction network security services (nss) 3.16.1 is a patch
release for nss 3.16.
...nss 3.16.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_16_1_rtm/src/ new in nss 3.16.1 new functionality added the "ecc" flag for modutil to select the module used for elliptic curve cryptography (ecc) operations.
NSS 3.16.2 release notes
introduction network security services (nss) 3.16.2 is a patch
release for nss 3.16.
...nss 3.16.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_16_2_rtm/src/ new in nss 3.16.2 new functionality dtls 1.2 is supported.
NSS 3.16.3 release notes
introduction network security services (nss) 3.16.3 is a patch
release for nss 3.16.
...nss 3.16.3 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_16_3_rtm/src/ new in nss 3.16.3 this
release consists primarily of ca certificate changes as listed below, and fixes an issue with a recently added utility function.
NSS 3.16.4 release notes
introduction network security services (nss) 3.16.4 is a patch
release for nss 3.16.
...nss 3.16.4 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_16_4_rtm/src/ new in nss 3.16.4 this
release consists primarily of ca certificate changes as listed below, and includes a small number of bug fixes.
NSS 3.16 release notes
introduction the nss team has
released network security services (nss) 3.16, which is a minor
release.
...nss 3.16 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_16_rtm/src/ new in nss 3.16 new functionality supports the linux x32 abi.
NSS 3.17 release notes
introduction the nss team has
released network security services (nss) 3.17, which is a minor
release.
...nss 3.17 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_rtm/src/ new in nss 3.17 new functionality when using ecdhe, the tls server code may be configured to generate a fresh ephemeral ecdh key for each handshake, by setting the ssl_reuse_server_ecdhe_key socket option to pr_false.
RelationsCount
« nsiaccessible page summary returns the number of accessible
relations for this object.
... attribute unsigned long
relationscount; see also nsiaccessible.get
relation() nsiaccessible.get
relations() nsiaccessible.getaccessible
related() ...
NS_RELEASE
do not use when the pointer might be null; use ns_if_
release in those cases.
... ns_
release(foo) is equal to foo->
release(); foo = 0; syntax ns_
release(foo); see also ns_addref, ns_if_
release ...
BluetoothCharacteristicProperties.reliableWrite - Web APIs
the
reliablewrite read-only property of the bluetoothcharacteristicproperties interface returns a boolean that is true if
reliable writes to the characteristic is permitted.
... syntax var aboolean = bluetoothcharacteristicproperties.
reliablewrite; value a boolean specifications specification status comment web bluetooththe definition of '
reliablewrite' in that specification.
Document.releaseCapture() - Web APIs
the
releasecapture() method
releases mouse capture if it's currently enabled on an element within this document.
... syntax document.
releasecapture(); once mouse capture is
released, mouse events will no longer all be directed to the element on which capture is enabled.
HTMLAnchorElement.download - Web APIs
the htmlancho
relement.download property is a domstring indicating that the linked resource is intended to be downloaded rather than displayed in the browser.
... syntax var dnload = ancho
relt.download; ancho
relt.download = dnload; specifications specification status comment html living standardthe definition of 'download' in that specification.
HTMLAnchorElement.referrerPolicy - Web APIs
the htmlancho
relement.referrerpolicy property reflect the html referrerpolicy attribute of the <a> element defining which referrer is sent when fetching the resource.
... syntax refstr = ancho
relt.referrerpolicy; ancho
relt.referrerpolicy = refstr; values "no-referrer" meaning that the referer: http header will not be sent.
RTCDataChannel.reliable - Web APIs
the read-only rtcdatachannel property
reliable indicates whether or not the data channel is
reliable.
... syntax var
reliable = adatachannel.
reliable; value true if the rtcdatachannel's connection is
reliable; false if it isn't.
SVGMarkerElement - Web APIs
svg path segment interface the svgmarke
relement interface corresponds to the marker element.
... mobile chrome edge firefox internet explorer opera safari android webview chrome for android firefox for android opera for android safari on ios samsung internet svgmarke
relement chrome ?
SVGSolidcolorElement - Web APIs
the svgsolidcolo
relement interface corresponds to the <solidcolor> 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/svgsolidcolo
relement" target="_top"><rect x="1" y="1" width="200" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="101" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgsolidcolo
relement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface doesn't implement any specific properties, but...
Link types: modulepreload - HTML: Hypertext Markup Language
the modulep
reload keyword for the
rel attribute of the <link> element provides a declarative way to preemptively fetch a module script and its dependencies, and store them in the document's module map for later evaluation.
... specifications specification status comment html living standardthe definition of 'modulep
reload' in that specification.
NPN_ReleaseObject - Archive of obsolete content
syntax #include <npruntime.h> void npn_
releaseobject(npobject *npobj); parameters the function has the following parameter: <tt>npobj</tt> the npobject whose reference count should be decremented.
Ajax - MDN Web Docs Glossary: Definitions of Web-related terms
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).
Breadcrumb - MDN Web Docs Glossary: Definitions of Web-related terms
a breadcrumb, or breadcrumb trail, is a navigational aid that is typically placed between a site's header and the main content, displaying either a hierarchy of the current page in
relation to the the site's structure, from top level to current page, or a list of the links the user followed to get to the current page, in the order visited.
Digest - MDN Web Docs Glossary: Definitions of Web-related terms
a digest can be used to perform several tasks: in non-cryptographic applications (e.g., the index of hash tables, or a fingerprint used to detect duplicate data or to uniquely identify files) verify message integrity (a tampered message will have a different hash) store passwords so that they can't be retrieved, but can still be checked (to do this secu
rely, you also need to salt the password.) generate pseudo-random numbers generate keys it is critical to choose the proper hash function for your use case to avoid collisions and predictability.
Distributed Denial of Service - MDN Web Docs Glossary: Definitions of Web-related terms
united states computer emergency readiness team (us-cert) defines symptoms of denial-of-service attacks to include: unusually slow network performance (opening files or accessing websites) unavailability of a particular website inability to access any website dramatic increase in the number of spam emails received—(this type of dos attack is considered an email bomb) disconnection of a wi
reless or wired internet connection longterm denial of access to the web or any internet services learn more general knowledge denial-of-service attack on wikipedia ...
Doctype - MDN Web Docs Glossary: Definitions of Web-related terms
its sole purpose is to prevent a browser from switching into so-called “quirks mode” when rendering a document; that is, the "<!doctype html>" doctype ensures that the browser makes a best-effort attempt at following the
relevant specifications, rather than using a different rendering mode that is incompatible with some specifications.
Flex - MDN Web Docs Glossary: Definitions of Web-related terms
learn more property reference align-content align-items align-self flex flex-basis flex-direction flex-flow flex-grow flex-shrink flex-wrap justify-content order further reading css flexible box layout module level 1 specification css flexbox guide: basic concepts of flexbox css flexbox guide:
relationship of flexbox to other layout methods css flexbox guide: aligning items in a flex container css flexbox guide: ordering flex items css flexbox guide: controlling ratios of flex items along the main axis css flexbox guide: mastering wrapping of flex items css flexbox guide: typical use cases of flexbox ...
Flexbox - MDN Web Docs Glossary: Definitions of Web-related terms
learn more property reference align-content align-items align-self flex flex-basis flex-direction flex-flow flex-grow flex-shrink flex-wrap justify-content order further reading css flexible box layout module level 1 specification css flexbox guide: basic concepts of flexbox css flexbox guide:
relationship of flexbox to other layout methods css flexbox guide: aligning items in a flex container css flexbox guide: ordering flex items css flexbox guide: controlling ratios of flex items along the main axis css flexbox guide: mastering wrapping of flex items css flexbox guide: typical use cases of flexbox ...
ICE - MDN Web Docs Glossary: Definitions of Web-related terms
the framework algorithm looks for the lowest-latency path for connecting the two peers, trying these options in order: direct udp connection (in this case—and only this case—a stun server is used to find the network-facing address of a peer) direct tcp connection, via the http port direct tcp connection, via the https port indirect connection via a
relay/turn server (if a direct connection fails, e.g., if one peer is behind a firewall that blocks nat traversal) learn more general knowledge webrtc, the principal web-
related protocol which uses ice webrtc protocols technical reference rfc 5245, the ietf specification for ice rtcicecandidate, the interface representing a ice candidate ...
Index - Web APIs
14 absoluteorientationsensor api, absoluteorientationsensor, generic sensor api, interface, orientation sensor api, orientationsensor, reference, sensor, sensor apis, sensors the absoluteorientationsensor interface of the sensor apis describes the device's physical orientation in
relation to the earth's reference coordinate system.
... 15 absoluteorientationsensor api, absoluteorientationsensor, constructor, generic sensor api, orientation sensor api, reference, sensor, sensor apis, sensors the absoluteorientationsensor constructor creates a new absoluteorientationsensor object which describes the device's physical orientation in
relation to the earth's reference coordinate system.
... 86 animationevent api, experimental, interface, reference, web animations the animationevent interface represents events providing information
related to animations.
...And 223 more matches
Index
nss offers lots of functionality; we'll walk through the list of modules, design principles, and important
relevant standards.
...this strategy allows nss to work with many hardware devices (e.g., to speed up the calculations required for cryptographic operations, or to access smartcards that secu
rely protect a secret key) and software modules (e.g., to allow to load such modules as a plugin that provides additional algorithms or stores key or trust information) that implement the pkcs#11 interface.
...a certificate contains lots of other details; for example, it contains a signature by a third party that expresses trust in the ownership
relationship for the certificate.
...And 203 more matches
Experimental features in Firefox
you can test your web sites and applications before these features get
released and ensure everything will still work with the latest web technology capabilities.
... editor's note: when adding features to these tables, please try to include a link to the
relevant bug or bugs using the bug macro: {{bug(bug-number)}}.
...
release channel version added enabled by default?
...And 79 more matches
Index - Archive of obsolete content
unfortunately, javascript does not yet have native support for modules: it has to
rely on the host application to provide it with functionality such as loading subscripts, and exporting/ importing names.
... 132
release notes add-on sdk no summary!
... 187 forms
related code snippets code snippets, forms no summary!
...And 70 more matches
Mozilla Crypto FAQ - Archive of obsolete content
in this document i try to answer some frequently asked questions about the mozilla web browser and mail/news client and its support for ssl, s/mime, and
related features based on cryptographic technology.
...encryption export regulations published on january 14, 2000, the
release on february 11, 2000, of source code for ssl, s/mime, and general pki functionality for use in the mozilla project, and the "bernstein advisory" issued by the bureau of export administration on february 17, 2000.
... the questions in this faq address mozilla's support for encryption and
related security functionality, information important to mozilla contributors
relating to encryption functionality in mozilla, and general questions on u.s.
...And 37 more matches
Index
an nscomptr always calls
release before letting go, whether the nscomptr is letting go so that it can point to a different object, or because the nscomptr is going out of scope.
... any time a new value is assigned into an nscomptr, the nscomptr automatically always
releases its old referent, if any, and (unless you tell it you already have) addrefs the new.
...this is no accident, as mozilla:: primitives are me
rely bare-minimum wrappers around nspr's.
...And 33 more matches
<link>: The External Resource Link element - HTML: Hypertext Markup Language
the html external resource link element (<link>) specifies
relationships between the current document and an external resource.
... to link an external stylesheet, you'd include a <link> element inside your <head> like this: <link href="main.css"
rel="stylesheet"> this simple example provides the path to the stylesheet inside an href attribute, and a
rel attribute with a value of stylesheet.
... the
rel stands for "
relationship", and is probably one of the key features of the <link> element — the value denotes how the item being linked to is
related to the containing document.
...And 31 more matches
Editor Embedding Guide - Archive of obsolete content
acommandparams could possibly be a null pointer or a pointer to a valid structure filled with
relative parameters to acommand (see list below for legal params).
... cmd_deletecharbackward deletes one character backward
relative to the current selection end point.
... cmd_deletecharforward deletes one character forward
relative to the current selection end point.
...And 26 more matches
Python binding for NSS
also see the generated html documentation provided with each
release.
...the python global interpreter lock (gil) is
released prior to calling nss/nspr c functions and reaquired after the nss/nspr c function returns.
...depercated elements will persist for a least two
releases before being removed from the api enti
rely.
...And 26 more matches
Getting Started Guide
nscomptr is smart in that, unlike a raw c++ pointer to an xpcom object, nscomptr manages addref,
release, and queryinterface for you.
...to facilitate this, all interfaces inherit from an abstract base class that provides the member functions addref, and
release.
...the caller can then hold onto the reference indefinitely, calling
release when it no longer needs it.
...And 26 more matches
Modularization techniques - Archive of obsolete content
reference counting is performed using the addref() and
release() methods.
...addref() increments that reference count, and
release() decrements it.
... if a call to
release() causes the reference count to hit zero, the object will generally free itself.
...And 23 more matches
HTML documentation index - HTML: Hypertext Markup Language
it can have the following values: 17 hidden global attributes, html, reference the hidden global attribute is a boolean attribute indicating that the element is not yet, or is no longer,
relevant.
... 32 title global attributes, html, reference, title the title global attribute contains text representing advisory information
related to the element it belongs to.
... 47 html attribute:
rel attribute, attributes, constraint validation, link, form,
rel the
rel attribute defines the
relationship between a linked resource and the current document.
...And 23 more matches
Gecko info for Windows accessibility vendors
ajax: asynchronous javascript and xml ajax is a method of building interactive web applications that process user requests, user actions immediately in real time, unlike an http request, during which users must wait for a whole page to
reload or for a new page to load.
...dom tree - what's the
relation?
...archy mozillacontentwindowclass -- root document window mozillacontentframewindowclass - root of a subdocument created by a <frame> or <iframe> element mozillahiddenwindowclass - ignore these windows, they are used to help manage other windows mozillawindowclass - general filler window, a catch all starting in firefox 2, however, you should begin switching your code to use nav
relation_embeds.
...And 21 more matches
Reference Manual
whenever you `point' the nscomptr at a different xpcom object (by assignment or initialization), it must
release its old value, if any, and addref the new.
... at its own destructor time it must
release as well.
... // given two un-
related interfaces |nsifoo| and |nsibar|...
...And 19 more matches
Index - Learn web development
it's easy to confuse these terms sometimes since they refer to
related but different functionalities.
...for example, this css selects paragraph text, setting the color to red: 38 dealing with files beginner, codingscripting, files, guide, html, l10n:priority, theory, website when you are working on a website locally on your computer, you should keep all the
related files in a single folder that mirrors the published website's file structure on the server.
... 52 general asynchronous programming concepts javascript, learn, promises, threads, asynchronous, blocking in this article, we'll run through a number of important concepts
relating to asynchronous programming, and how this looks in web browsers and javascript.
...And 18 more matches
Positioning - Learn web development
relative positioning
relative positioning is the first position type we'll take a look at.
...go ahead and update the position declaration in your code: position:
relative; if you save and refresh at this stage, you won't see a change in the result at all.
... if you now save and refresh, you'll get a result something like this: <h1>
relative positioning</h1> <p>i am a basic block level element.
...And 16 more matches
tabbrowser - Archive of obsolete content
« xul reference home [ examples | attributes | properties | methods |
related ] this element is used for holding a set of read-only views of web documents.
...igation, webprogress methods addprogresslistener, addtab, addtabsprogresslistener,appendgroup, getbrowseratindex, getbrowserindexfordocument, getbrowserfordocument, getbrowserfortab, geticon, getnotificationbox, gettabforbrowser, gettabmodalpromptbox, goback, gobackgroup, goforward, goforwardgroup, gohome, gotoindex, loadgroup, loadonetab, loadtabs, loaduri, loaduriwithflags, movetabto, pintab,
reload,
reloadalltabs,
reloadtab,
reloadwithflags, removealltabsbut, removecurrenttab, removeprogresslistener, removetab, removetabsprogresslistener,replacegroup, selecttabatindex, seticon, showonlythesetabs, stop, unpintab attributes autocompleteenabled type: boolean set to true to enable autocomplete of fields.
...this is useful for add-ons that need to use events
related to tabs in the browser window.
...And 15 more matches
Key Values - Web APIs
[1] in internet explorer (tested on
release 9 and 11), as well as in all versions of firefox, the windows key is reported as "os" instead of as "meta".
... [2] internet explorer (tested on
release 9 and 11) reports "scroll" instead of "scrolllock" for the scroll lock key.
... [2] internet explorer (tested on
release 9 and 11) and firefox 36 and earlier use "del" instead of "delete" for the del key.
...And 15 more matches
WebAssembly - JavaScript
the webassembly javascript object acts as the namespace for all webassembly-
related functionality.
...x for androidopera for androidsafari on iossamsung internetnode.jswebassemblychrome full support 57edge full support 16firefox full support 52notes full support 52notes notes disabled in the firefox 52 extended support
release (esr).ie no support noopera full support 44safari full support 11webview android full support 57chrome android full support 57firefox android full support...
... 52notes full support 52notes notes disabled in the firefox 52 extended support
release (esr).opera android full support 43safari ios full support 11samsung internet android full support 7.0nodejs full support 8.0.0compileerrorchrome full support 57edge full support 16firefox full support 52notes full support 52notes notes disabled in the firefox 52 extended suppor...
...And 15 more matches
WebAssembly
api reference webassembly this object acts as the namespace for all webassembly
related functionality.
...x for androidopera for androidsafari on iossamsung internetnode.jswebassemblychrome full support 57edge full support 16firefox full support 52notes full support 52notes notes disabled in the firefox 52 extended support
release (esr).ie no support noopera full support 44safari full support 11webview android full support 57chrome android full support 57firefox android full support...
... 52notes full support 52notes notes disabled in the firefox 52 extended support
release (esr).opera android full support 43safari ios full support 11samsung internet android full support 7.0nodejs full support 8.0.0compileerrorchrome full support 57edge full support 16firefox full support 52notes full support 52notes notes disabled in the firefox 52 extended suppor...
...And 15 more matches
cfx - Archive of obsolete content
the path may be specified as a full path or may be
relative to the current directory.
...binary may be specified as a full path or as a path
relative to the current directory.
...profiledir may be specified as a full path or as a path
relative to the current directory.
...And 14 more matches
Chapter 5: Let's build a Firefox extension - Archive of obsolete content
disabling this cache forces xul documents to be
reloaded any every time they are displayed.
...chrome urls are structured as: chrome://%package name%/%package type%/%
relative path to source file% for example, the chrome url for the firefox browser window is as follows: chrome://browser/content/browser.xul here, the package name is “browser”, the file “browser.xul”, and the type of the package is “content”.
...here, helloworld is a package name, and content/ is a
relative path to the folder where the source file is stored.
...And 14 more matches
Gecko Compatibility Handbook - Archive of obsolete content
these browsers were developed before the
relevant w3c recommendations for html, css, and the dom existed.
... review your results the following scenarios all
relate to browser detection.
...(
related article) problem: site has problems in all gecko-based browsers if you are still seeing problems, take a look at the troubleshooting section of this handbook.
...And 14 more matches
Introduction to client-side frameworks - Learn web development
ember ember was initially
released in december 2011 as a continuation of work that started in the sproutcore project.
...angular was officially
released on the 14th of september 2016.
... vue evan you first
released vue in 2014, after working on and learning from the original angularjs project.
...And 14 more matches
Geometry and reference spaces in WebXR - Web APIs
in this article, we introduce the ways in which webxr expands upon the geometry of webgl, and how the positions and orientations of objects—both physical and virtual—are described in
relation to one another using spaces and, in particular, reference spaces.
... the article spatial tracking in webxr builds upon the information provided here to cover how the physical position and orientation of the user's head, as well as potentially other parts of their body such as the hands, are mapped into the digital world, as well as how the
relative positions of both physical and virtual objects are tracked as they move around, so that the scene can be properly rendered and composited.
... all times and durations in webxr are measured using the domhighrestimestamp type, which is a double-precision floating-point value specifying the time in milliseconds
relative to the starting time.
...And 14 more matches
position - CSS: Cascading Style Sheets
relative the element is positioned according to the normal flow of the document, and then offset
relative to itself based on the values of top, right, bottom, and left.
...it is positioned
relative to its closest positioned ancestor, if any; otherwise, it is placed
relative to the initial containing block.
...it is positioned
relative to the initial containing block established by the viewport, except when one of its ancestors has a transform, perspective, or filter property set to something other than none (see the css transforms spec), in which case that ancestor behaves as the containing block.
...And 14 more matches
Index - Archive of obsolete content
309
rel xul attributes, xul reference no summary!
... 544 openpopup xul methods, xul reference opens the popup
relative to a specified node at a specific location.
... 549 preferencefo
relement xul methods, xul reference no summary!
...And 13 more matches
NSS tools : modutil
-installdir root-installation-directory specify the root installation directory
relative to which files will be installed by the -jar option.
...ot mechanism flags: none manufacturer: mozilla foundation type: software version number: 3.11 firmware version: 0.0 status: enabled token name: nss certificate db token manufacturer: mozilla foundation token model: nss 3 token serial number: 0000000000000000 token version: 8.3 token firmware version: 0.0 access: not write protected login type: login required user pin: initialized a
related command, -rawlist returns information about the database configuration for the modules.
... forwardcompatible { irix:6.2:mips sunos:5.5.1:sparc } platforms { winnt::x86 { modulename { "example module" } modulefile { win32/fort32.dll } defaultmechanismflags{0x0001} defaultcipherflags{0x0001} files { win32/setup.exe { executable
relativepath { %temp%/setup.exe } } win32/setup.hlp {
relativepath { %temp%/setup.hlp } } win32/setup.cab {
relativepath { %temp%/setup.cab } } } } win95::x86 { equivalentplatform {winnt::x86} } sunos:5.5.1:sparc { modulename { "example unix module" } modulefile { unix/fort.so } defaultmechanismflags{0x0001} cipherenableflags{0x0001} files { unix/fort.so {
relativepath{%root%/lib/...
...And 13 more matches
NSS tools : modutil
-installdir root-installation-directory specify the root installation directory
relative to which files will be installed by the -jar option.
...ufacturer: mozilla foundation type: software version number: 3.11 firmware version: 0.0 status: enabled token name: nss certificate db token manufacturer: mozilla foundation token model: nss 3 token serial number: 0000000000000000 token version: 8.3 token firmware version: 0.0 access: not write protected login type: login required user pin: initialized a
related command, -rawlist returns information about the database configuration for the modules.
... forwardcompatible { irix:6.2:mips sunos:5.5.1:sparc } platforms { winnt::x86 { modulename { "example module" } modulefile { win32/fort32.dll } defaultmechanismflags{0x0001} defaultcipherflags{0x0001} files { win32/setup.exe { executable
relativepath { %temp%/setup.exe } } win32/setup.hlp {
relativepath { %temp%/setup.hlp } } win32/setup.cab {
relativepath { %temp%/setup.cab } } } } win95::x86 { equivalentplatform {winnt::x86} } sunos:5.5.1:sparc { modulename { "example unix module" } modulefile { unix/fort.so } ...
...And 13 more matches
SpiderMonkey 1.8.7
draft in progress - this is a draft, and right now it's mostly just a copy of the 1.8.5
release notes.
... xxx needs updating the mozilla javascript team is pleased to announce the
release of spidermonkey 1.8.5.
... please let us know about your experiences with this
release by posting in the mozilla.dev.tech.js-engine newsgroup.
...And 13 more matches
nsILocalFile
to create an instance, use: var localfile = components.classes["@mozilla.org/file/local;1"] .createinstance(components.interfaces.nsilocalfile); method overview void append
relativenativepath(in acstring
relativefilepath); native code only!
... void append
relativepath(in astring
relativefilepath); acstring get
relativedescriptor(in nsilocalfile fromfile); void initwithfile(in nsilocalfile afile); void initwithnativepath(in acstring filepath); native code only!
... void reveal(); void set
relativedescriptor(in nsilocalfile fromfile, in acstring
relativedesc); attributes attribute type description diskspaceavailable print64 the number of bytes available to non-superuser on the disk volume containing the nsilocalfile.
...And 13 more matches
Accessibility documentation index - Accessibility
an editorial comment
related to a part of a document under review).
... 7 aria live regions aria, accessibility, arialive using javascript, it is possible to dynamically change parts of a page without requiring the entire page to
reload — for instance, to update a list of search results on the fly, or to display a discreet alert or notification which does not require user interaction.
... 10 basic form hints aria, accessibility, forms when implementing forms using traditional html form-
related elements, it is important to provide labels for controls, and explicitly associate a label with its control.
...And 13 more matches
font-size - CSS: Cascading Style Sheets
changing the font size also updates the sizes of the font size-
relative <length> units, such as em, ex, and so forth.
... syntax /* <absolute-size> values */ font-size: xx-small; font-size: x-small; font-size: small; font-size: medium; font-size: large; font-size: x-large; font-size: xx-large; font-size: xxx-large; /* <
relative-size> values */ font-size: smaller; font-size: larger; /* <length> values */ font-size: 12px; font-size: 0.8em; /* <percentage> values */ font-size: 80%; /* global values */ font-size: inherit; font-size: initial; font-size: unset; the font-size property is specified in one of the following ways: as one of the absolute-size or
relative-size keywords as a <length> or a <percentage>, ...
...
relative to the parent element's font size values xx-small, x-small, small, medium, large, x-large, xx-large, xxx-large absolute-size keywords, based on the user's default font size (which is medium).
...And 13 more matches
XUL controls - Archive of obsolete content
button reference
related elements: menupopup menuitem <button type="menu-button"> a button that that has a separate arrow button with a menu attached to it.
... button reference
related elements: menupopup menuitem <checkbox> a control that may be turned on and off, typically used to create options which may be enabled or disabled.
... groupbox reference
related elements: caption <filefield> allows the user to select a file.
...And 12 more matches
NSS Tools modutil
-installdir root-installation-directory specify the root installation directory
relative to which files will be installed by the -jar jar-file option.
... such as this: + pkcs11_install_script: pk11install the sample script file could contain the following: forwardcompatible { irix:6.2:mips sunos:5.5.1:sparc }platforms { winnt::x86 { modulename { "fortezza module" } modulefile { win32/fort32.dll } defaultmechanismflags{0x0001} defaultcipherflags{0x0001} files { win32/setup.exe { executable
relativepath { %temp%/setup.exe } } win32/setup.hlp {
relativepath { %temp%/setup.hlp } } win32/setup.cab {
relativepath { %temp%/setup.cab } } } } win95::x86 { equivalentplatform {winnt::x86} } sunos:5.5.1:sparc { modulename { "fortezza unix module" } modulefile { unix/fort.so } defaultmechanismflags{0x000...
...1} cipherenableflags{0x0001} files { unix/fort.so {
relativepath{%root%/lib/fort.so} absolutepath{/usr/local/netscape/lib/fort.so} filepermissions{555} } xplat/instr.html {
relativepath{%root%/docs/inst.html} absolutepath{/usr/local/netscape/docs/inst.html} filepermissions{555} } } } irix:6.2:mips { equivalentplatform { sunos:5.5.1:sparc } }} script grammar the script file grammar is as follows: --> valuelistvaluelist --> value valuelist <null>value ---> key_value_pair stringkey_value_pair --> key { valuelist }key --> stringstring --> simple_string "complex_string"simple_string --> [^ \t\n\""{""}"]+ (no whitespace, quotes, or bra...
...And 12 more matches
Link types - HTML: Hypertext Markup Language
in html, link types indicate the
relationship between two documents, in which one links to the other using an <a>, <area>, <form>, or <link> element.
... list of the defined link types and their significance in html link type description allowed in these elements not allowed in these elements alternate if the element is <link> and the
rel attribute also contains the stylesheet type, the link defines an alternative style sheet; in that case the title attribute must be present and not be the empty string.
... although recognized, the rev attribute on <a>, <area> or<link> elements with a link type of made is incorrect and should be replaced by the
rel attribute with this link type.
...And 12 more matches
d - SVG: Scalable Vector Graphics
an upper-case command specifies absolute coordinates, while a lower-case command specifies coordinates
relative to the current position.
... it is always possible to specify a negative value as an argument to a command: negative angles will be anti-clockwise; absolute negative x and y values are interpreted as negative coordinates;
relative negative x values move to the left, and
relative negative y values move upwards.
...any subsequent coordinate pair(s) are interpreted as parameter(s) for implicit
relative lineto (l) command(s) (see below).
...And 12 more matches
CSS values and units - Learn web development
<dimension> is an umb
rella category that includes the <length>, <angle>, <time>, and <resolution> types.
...percentage values are always
relative to another quantity, for example an element's length is
relative to its parent element's length.
...there are two types of lengths used in css —
relative and absolute.
...And 11 more matches
Styling web forms - Learn web development
form controls were added to html in the html 2 specification in 1995; css wasn't
released until late 1996, and wasn't supported very well by browsers for a few years after that.
... browsers
relied on the underlying operating system to manage and render form controls.
... and even with css available to style html, browser vendors have historically been
reluctant to make form controls stylable because users were so accustomed to the visual appearance of their respective platforms.
...And 11 more matches
Localization sign-off reviews
overview you've done some localization work and are ready for it to be
released.
... the merge date for migrating from one product
release channel to the next is rapidly approaching.
... you need to make sure that your work can effectively be compiled into a build for the next
release channel.
...And 11 more matches
Index
found 550 pages: # page tags and summary 1 spidermonkey: the mozilla javascript runtime spidermonkey standalone source code
releases can be found on the
releases page.
... 9 hacking tips spidermonkey this page list a few tips to help you investigate issues
related to spidermonkey.
...it is separated in 2 parts, one section
related to debugging and another section
related to drafting optimizations.
...And 11 more matches
SpiderMonkey 1.8.5
the mozilla javascript team is pleased to announce the
release of spidermonkey 1.8.5.
... please let us know about your experiences with this
release by posting in the mozilla.dev.tech.js-engine newsgroup.
... spidermonkey 1.8.5 is not binary-compatible with previous
releases, nor is it source-code compatible.
...And 11 more matches
Creating the Component Code
« previousnext » this chapter goes over the basic code required to handle the
relationship between your component and xpcom.
...specifically, the component library has to contain implementations for the component-
related interfaces described in this chapter: nsimodule and nsifactory, which are entry points for your implementation code.
... identifiers in xpcom the series of nsiid variables initialized here are actually classes created for handing the 128-bit identifiers that xpcom uses to support contractual
relationships between the client and component interfaces.
...And 11 more matches
Observer Notifications
documents these topics indicate notifications you can monitor
related to dom documents.
...extensions that cache information about windows may wish to observe this so they can
release information when the window is destroyed.
...extensions that cache information about windows may wish to observe this so they can
release information when the window is destroyed.
...And 11 more matches
Window.open() - Web APIs
note on position and dimension error correction position if only one of them is specified, the behavior is implementation-dependent, and web author should not
rely on it.
... size if only one of them is specified, the behavior is implementation-dependent, and web author should not
rely on it.
... toolbar if this feature is on, then the new secondary window renders the toolbar buttons (back, forward,
reload, stop buttons).
...And 11 more matches
tabs - Archive of obsolete content
function logshow(tab) { console.log(tab.url + " is loaded"); } function logactivate(tab) { console.log(tab.url + " is activated"); } function logdeactivate(tab) { console.log(tab.url + " is deactivated"); } function logclose(tab) { console.log(tab.url + " is closed"); } tabs.on('open', onopen); manipulate a tab you can get and set various properties of tabs (but note that properties
relating to the tab's content, such as the url, will not contain valid values until after the tab's ready event fires).
... properties
relating to the tab's content (for example: title, favicon, and url) will not be correct at this point.
... a single tab will emit this event every time the dom is loaded: so it will be emitted again if the tab's location changes or the content is
reloaded.
...And 10 more matches
Migrate apps from Internet Explorer to Mozilla - Archive of obsolete content
it is much better and more
reliable to sniff by browser capability or object feature support.
...the two browsers possess few core javascript differences; issues encountered are often timing
related.
... such timing-
related issues are also hardware-
related -- slower systems can reveal bugs that faster systems hide.
...And 10 more matches
browser - Archive of obsolete content
« xul reference home [ examples | attributes | properties | methods |
related ] a xul <browser> element represents a frame which is expected to contain a view of a web document.
... get firefox most of the properties and methods of the browser will ra
rely be used and can only be called from chrome urls.
...angoback, cangoforward, contentdocument, contentprincipal, contenttitle, contentvieweredit, contentviewerfile, contentwindow, currenturi, docshell, documentcharsetinfo, homepage, markupdocumentviewer, messagemanager, preferences, securityui, sessionhistory, webbrowserfind, webnavigation, webprogress methods addprogresslistener, goback, goforward, gohome, gotoindex, loaduri, loaduriwithflags,
reload,
reloadwithflags, removeprogresslistener, stop, swapdocshells examples <!-- shows mozilla homepage inside a groupbox --> <groupbox flex="1"> <caption label="mozilla homepage"/> <browser type="content" src="http://www.mozilla.org" flex="1"/> </groupbox> attributes autocompleteenabled type: boolean set to true to enable autocomplete of fields.
...And 10 more matches
New in JavaScript - Archive of obsolete content
ecmascript next support implementation status for upcoming ecma-262 features as per the yearly (es2016/es2017/es2018/...)
release schedule in mozilla-based engines and products.
... javascript was
released as version 1.0 in march 1996 in netscape navigator 2.0 and internet explorer 2.0.
...
released on august 19, 1996.
...And 10 more matches
Handling Mozilla Security Bugs
version 1.1 important: anyone who believes they have found a mozilla-
related security vulnerability can and should report it by sending email to address security@mozilla.org.
... introduction in order to improve the mozilla project's approach to resolving mozilla security vulnerabilities, mozilla.org is creating more formal arrangements for handling mozilla security-
related bugs.
...this document describes how the new security organizational structure will work, and how security-
related mozilla bug reports will be handled.
...And 10 more matches
Gecko object attributes
object attributes are
relevant for the entire subtree of the object they are on, unless they are overridden by a descendent with the same object attribute.
... applied to: any role which
related dom node has id attribute tag the actual markup tag used to create this element (also used in xul).
...additional information may be provide by the object attributes atomic and
relevant.
...And 10 more matches
An Overview of XPCOM
when two or more
related components are grouped together in a binary library, the library is referred to as a module.
...the best way to tackle a project of this size is to divide it into smaller, more manageable pieces, use a component programming model, and to organize
related sets of components into modules.
...the basic idea is to identify the pieces of functionality that are
related and understand how they communicate with each other.
...And 10 more matches
Introduction to XPCOM for the DOM
furthermore, a class can be de declared to be "abstract" if it declares some methods but does not implement them enti
rely.
... pushing this concept to its maximum, a class can be "pu
rely virtual" if it declares methods without implementing any of them.
...this is done using the "
release" function, also defined in the nsisupports interface.
...And 10 more matches
Element - Web APIs
<div id="interfacediagram" style="display: inline-block; position:
relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30"...
... element.getboundingclientrect() returns the size of an element and its position
relative to the viewport.
... element.insertadjacentelement() inserts a given element node at a given position
relative to the element it is invoked upon.
...And 10 more matches
WebGL best practices - Web APIs
you can
rely on this document to guide your choice of approach, and ensure you're on the right track no matter what browser or hardware your users run.
...the overhead for this is
relatively low, but re-using vaos means fewer vertexattribpointer calls too, so it's worth doing wherever it's easy.
...implementations track the liveness of objects, so 'deleting' them at the api level only
releases the handle that refers to the actual object.
...And 10 more matches
Viewpoints and viewers: Simulating cameras in WebXR - Web APIs
cameras and
relative movement when a classic live-action movie is filmed, the actors are on a set and move about the set as they perform, with one or more cameras watching their moves.
...fortunately, physicists like galileo, newton, lorentz, and einstein have given us the principle of
relativity, which states that the laws of physics have the same form in every frame of reference.
...gaming-
related situations are listed separately since they are often a special case specific to gaming, but any of these perspectives might apply to any 3d graphics scene.
...And 10 more matches
Web Accessibility: Understanding Colors and Luminance - Accessibility
in speaking specifically to
relative luminance, wcag's definition of
relative luminance notes: "note 2: almost all systems used today to view web content assume srgb encoding.
... here is the definition of
relative luminance as defined by the w3c: "the
relative brightness of any point in a colorspace, normalized to 0 for darkest black and 1 for lightest white" this statement is of course accurate, but may be confusing when used in reference to the rgb color space, which is an integer between 0 and 255.
... white has 100%
relative luminance, black has 0%
relative luminance (in most but not all literature).
...And 10 more matches
Event reference
keyup any key is
released mouse events event name fired when auxclick a pointing device button (any non-primary button) has been pressed and
released on an element.
... click a pointing device button (any button; soon to be primary button only) has been pressed and
released on an element.
... mouseup a pointing device button is
released over an element.
...And 10 more matches
JXON - Archive of obsolete content
/*\ |*| |*| jxon snippet #1 mdndeveloper network |*| |*| https://developer.mozilla.org/docs/jxon |*| https://developer.mozilla.org/user:fusionchess |*| |*| this framework is
released under the gnu public license, version 3 or later.
... /*\ |*| |*| jxon snippet #2 mdndeveloper network |*| |*| https://developer.mozilla.org/docs/jxon |*| https://developer.mozilla.org/user:fusionchess |*| |*| this framework is
released under the gnu public license, version 3 or later.
... /*\ |*| |*| jxon snippet #3 mdndeveloper network |*| |*| https://developer.mozilla.org/docs/jxon |*| https://developer.mozilla.org/user:fusionchess |*| |*| this framework is
released under the gnu public license, version 3 or later.
...And 9 more matches
Space Manager Detailed Design - Archive of obsolete content
overview the space manager and
related classes and structures are an important of the gecko layout system, specifically block layout.
...this frame * created the space manager, and the world coordinate space is *
relative to this frame.
...this * creates a new local coordinate space
relative to the current * coordinate space.
...And 9 more matches
Actions - Archive of obsolete content
<vbox datasources="http://www.xulplanet.com/ds/sample.rdf" ref="http://www.xulplanet.com/rdf/a"> <template> <query> <content uri="?start"/> <triple subject="?start" predicate="http://www.xulplanet.com/rdf/
relateditem" object="?
relateditem"/> </query> <action> <button uri="?
relateditem" label="?
relateditem"/> </action> </template> </vbox> in this example, we omit the <xul:rule> element around the <xul:action> as it is optional when we want to generate content unconditionally.
...in this example, there's only one variable to use, ?
relateditem, since ?start is the starting point and the start and end points cannot be the same.
...let's look at the results again: (?start = http://www.xulplanet.com/rdf/a, ?
relateditem = http://www.xulplanet.com/rdf/b) (?start = http://www.xulplanet.com/rdf/a, ?
relateditem = http://www.xulplanet.com/rdf/c) (?start = http://www.xulplanet.com/rdf/a, ?
relateditem = http://www.xulplanet.com/rdf/d) the builder will start with the first result.
...And 9 more matches
Browser Detection and Cross Browser Support - Archive of obsolete content
many of the problems reported in the press regarding gecko's inability to display content were directly
related to inadequate, inappropriate browser detection strategies.
... javascript version number: 1, 1.1, 1.2 ...) os platform and version is_win, is_win16, is_win32, is_win31, is_win95, is_winnt, is_win98, is_winme, is_win2k, is_os2, is_mac, is_mac68k, is_macppc, is_unix, is_sun, is_sun4, is_sun5, is_suni86, is_irix, is_irix5, is_irix6, is_hpux, is_hpux9, is_hpux10, is_aix, is_aix1, is_aix2, is_aix3, is_aix4, is_linux, is_sco, is_unixware, is_mpras, is_
reliant, is_dec, is_sinix, is_freebsd, is_bsd, is_vms detecting browsers using this level of detail is unworkable, unmaintainable and violates the basic principles of web authoring!
...if (document.all) { // internet explorer 4+ document.write('<link
rel="stylesheet" type="text/css" src="style-ie.css">'); } else if (document.layers) { // navigator 4 document.write('<link
rel="stylesheet" type="text/css" src="style-nn.css">'); } note how the above example only provided stylesheets for internet explorer and navigator 4 and even then only if the visitor has javascript support turned on in their browser.
...And 9 more matches
Introduction to CSS layout - Learn web development
css page layout techniques allow us to take elements contained in a web page and control where they are positioned
relative to their default position in normal layout flow, the other elements around them, their parent container, or the main viewport/window.
...-template-columns: 1fr 1fr 1fr; grid-template-rows: 100px 100px; grid-gap: 10px; } <div class="wrapper"> <div class="box1">one</div> <div class="box2">two</div> <div class="box3">three</div> <div class="box4">four</div> <div class="box5">five</div> <div class="box6">six</div> </div> once you have a grid, you can explicitly place your items on it, rather than
relying on the auto-placement behavior seen above.
... there are however useful techniques for certain layout patterns that
rely on the position property.
...And 9 more matches
Fundamental text and font styling - Learn web development
many a fat alley rat had met its demise while staring point blank down the cavernous bar
rel of this awesome prowling machine.
...many a fat alley rat had met its demise while staring point blank down the cavernous bar
rel of this awesome prowling machine.
...many a fat alley rat had met its demise while staring point blank down the cavernous bar
rel of this awesome prowling machine.
...And 9 more matches
UI pseudo-classes - Learn web development
the original pseudo-classes available to us (as of css 2.1) that are
relevant to forms are: :hover: selects an element only when it is being hovered over by a mouse pointer.
...more recently, the css selector level 3 and css basic ui level 3 added more pseudo-classes
related to html forms that provide several other useful targetting conditions that you can take advantage of.
...having a pu
rely visual indicator solves this problem.
...And 9 more matches
Using the Browser API
the javascript implementation to wire up the functionality required by our simple browser, we've written some basic javascript (see the full javascript listing.) wiring up the back and forward buttons early on in the code we implement two simple event listeners to move the browser back and forward in history when the
relevant buttons are pressed: back.addeventlistener('touchend',function() { browser.goback(); }); fwd.addeventlistener('touchend',function() { browser.goforward(); }); the functions can be handled using the browser api htmliframeelement.goback() and htmliframeelement.goforward() methods.
...if true is returned, the
relevant button is disabled, and if false is returned, the
relevant button is enabled.
...when you press the keyboard's return button, the 'submit' event is fired, which we handle like this: urlform.addeventlistener('submit',function(e) { e.preventdefault(); browser.src = urlbar.value; urlbar.blur(); }); we first call preventdefault() to stop the form just submitting and
reloading the page — which is really not what we want.
...And 9 more matches
source-editor.jsm
edito
relement element the element containing the editor.
... destroy() destroys the editor,
releasing resource it's allocated and removing event handlers it's installed.
...this value is
relative to the document being edited; that is, 0 is the top of the very first line of text in the document, regardless of vertical scroll position.
...And 9 more matches
Refcount tracing and balancing
refcount tracing logs calls to addref and
release, preferably for a particular set of classes, including call-stacks in symbolic form (on platforms that support this).
... xpcom_mem_comptr_log this environment variable enables logging of additions and
releases of objects into nscomptrs.
... however, having an nscomptr log and using it in the creation of the balance tree allows addref and
release calls that we know are matched to be eliminated from the tree, so it makes it much easier to debug reference count leaks of objects that have a large amount of reference counting traffic.
...And 9 more matches
NSS API Guidelines
nss api structure this section explains the structure and
relationships of the nss libraries.
...the areas which need the most work (both here and throughout the code) is: the
relationship of the certificate library with just about every other component (most noticeably pkcs #12, pkcs #7, and pkcs #11) splitting low key and high key components more clearly the crypto wrappers (pkcs #11 wrappers) and high key pkcs #12 and pkcs #5 libraries nss compiles into the libraries described below.
... low cert lib/certdb cdbhdl.h, certdb.h, cert.h, certt.h certhi provides high-level certificate-
related functions, that do not access the certificate database, nor individual certificate data directly.
...And 9 more matches
sslfnc.html
the set of available ssl cipher suites may grow from
release to
release of nss.
... applications will find it desirable to determine, at run time, what ssl2 cipher kinds and ssl3 cipher suites are actually implememted in a particular
release.
... it causes dynamic linking issues at run-time after an update of nss because the actual size of the array changes between
releases.
...And 9 more matches
IAccessible2
[propget] hresult localizedextendedrole([out] bstr localizedextendedrole ); [propget] hresult localizedextendedstates([in] long maxlocalizedextendedstates, [out, size_is(,maxlocalizedextendedstates), length_is(, nlocalizedextendedstates)] bstr localizedextendedstates, [out] long nlocalizedextendedstates ); [propget] hresult nextendedstates([out] long nextendedstates ); [propget] hresult n
relations([out] long n
relations ); [propget] hresult
relation([in] long
relationindex, [out] iaccessible
relation
relation ); [propget] hresult
relations([in] long max
relations, [out, size_is(max
relations), length_is( n
relations)] iaccessible
relation
relations, [out] long n
relations ); hresult role([out] long role ); hresult scrollto([in] enum ia2scrolltype scrolltype ); hresult scrolltopoin...
...n
relations() returns the number of accessible
relations for this object.
... [propget] hresult n
relations( [out] long n
relations ); parameters n
relations return value s_ok.
...And 9 more matches
Screen Wake Lock API - Web APIs
it can be
released by the system, again if the battery power is too low or the document is not active or visible.
... it can also be
released manually via the wakelocksentinel.
release() method.
... it is good practice to store a reference to the sentinel object to control
release later and also to reacquire the lock if need be.
...And 9 more matches
Populating the page: how browsers work - Web Performance
once the server receives the request, it will reply with
relevant response headers and the contents of the html.
... <!doctype html> <html> <head> <meta charset="utf-8"/> <title>my simple page</title> <link
rel="stylesheet" src="styles.css"/> <script src="myscript.js"></script> </head> <body> <h1 class="heading">my page</h1> <p>a paragraph with a <a href="https://example.com/about">link</a></p> <div> <img src="myimage.jpg" alt="image description"/> </div> <script src="anotherscript.js"></script> </body> </html> this response for this initial request contains the first byte of data received.
...the tree reflects the
relationships and hierarchies between different tags.
...And 9 more matches
SVG documentation index - SVG: Scalable Vector Graphics
versions of svg viewers prior to the
release of firefox 1.5 unfortunately paid scant attention to namespaces, but they are essential to multi-xml dialect supporting user agents such as gecko-based browsers which must be very strict.
... 32 baseline-shift needsexample, svg, svg attribute the baseline-shift attribute allows repositioning of the dominant-baseline
relative to the dominant-baseline of the parent text content element.
... 36 by svg, svg attribute the by attribute specifies a
relative offset value for an attribute that will be modified during an animation.
...And 9 more matches
Tamarin build documentation - Archive of obsolete content
the cross-platform build system is used for daily automated build testing so it is the most
reliable system.
...in the xcode project, this is the debug_debugger and
release_debugger configurations.
...nor does any other brand of make.) with the right prerequisites, use these commands to build tamarin: $ hg clone http://hg.mozilla.org/tamarin-redux/ $ cd tamarin-redux $ mkdir objdir-
release $ cd objdir-
release $ python ../configure.py $ make ...
...And 8 more matches
XULRunner Hall of Fame - Archive of obsolete content
version updates match the rapid
release cycle.
...source tomtom home 2 pc application to manage tomtom gps devices understanding faith (desktop version) a multimedia
religious education resource for catholic secondary schools in australia.
...latest
release: 0.0.2 november 2010 - source clines a clone of color lines (game).
...And 8 more matches
Anatomy of a video game - Game development
it might even loop based on something else enti
rely.
... /* * starting with the semicolon is in case whatever line of code above this example *
relied on automatic semicolon insertion (asi).
...expanding our last example, the main loop would now look like: /* * starting with the semicolon is in case whatever line of code above this example *
relied on automatic semicolon insertion (asi).
...And 8 more matches
2D maze game with device orientation - Game development
you can create this yourself if you want to follow along: <!doctype html> <html> <head> <meta charset="utf-8" /> <title>cyber orb demo</title> <style> body { margin: 0; background: #333; } </style> <script src="src/phaser-arcade-physics.2.2.2.min.js"></script> <script src="src/boot.js"></script> <script src="src/p
reloader.js"></script> <script src="src/mainmenu.js"></script> <script src="src/howto.js"></script> <script src="src/game.js"></script> </head> <body> <script> (function() { var game = new phaser.game(320, 480, phaser.canvas, 'game'); game.state.add('boot', ball.boot); game.state.add('p
reloader', ball.p
reloader); game.state.add('mainmenu', ball.mainmenu); game.state.ad...
...the basic states used in this game are: boot, p
reloader, mainmenu, howto and game.
... boot will take care of initializing a few settings, p
reloader will load all of the assets like graphics and audio, mainmenu is the menu with the start button, howto shows the "how to play" instructions and the game state lets you actually play the game.
...And 8 more matches
Creating hyperlinks - Learn web development
note: a link title is only revealed on mouse hover, which means that people
relying on keyboard controls or touchscreens to navigate web pages will have difficulty accessing title information.
...the second index.html would perhaps be the main landing page for project-
related information.
...use our <a href="contacts.html#mailing_address">mailing address</a>.</p> you can even use the document fragment reference on its own to link to another part of the same document: <p>the <a href="#mailing_address">company mailing address</a> can be found at the bottom of this page.</p> absolute versus
relative urls two terms you'll come across on the web are absolute url and
relative url: absolute url: points to a location defined by its absolute location on the web, including protocol and domain name.
...And 8 more matches
Handling common JavaScript problems - Learn web development
linters as with html and css, you can ensure better quality, less error-prone javascript code using a linter, which points out errors and can also flag up warnings about bad practices, etc., and be customized to be stricter or more
relaxed in their error/warning reporting.
... in the search packages text field, type "jslint" and press enter/return to search for linting-
related packages.
...install this first (using the install button), as other linters
rely on it to work.
...And 8 more matches
Package management basics - Learn web development
a simple example of a useful dependency that your project might need is some code to calculate
relative dates as human-readable text.
...moreover, a
reliable third-party dependency will likely have been tested in a lot of different situations, making it more robust and cross-browser compatible than your own solution.
... without modern build tools, dependencies like this might be included in your project using a simple <script> element, but this might not work right out of the box and you will likely need some modern tooling to bundle your code and dependencies together when they are
released on the web.
...And 8 more matches
Accessibility API cross-reference
fill out tagged pdf column (
relevant documents from pdf association) add missing aria properties fill out events cross reference table use this info to expand mozilla's accessibility api coverage to include mac, so that we can start to freeze them talk about the fact that msaa uses one interface (iaccessible), wherease gnome accessibility uses a lot of different interfaces depending on the type of object go through the atk...
... info and make sure it's up-to-date accessible roles description & notes msaa role (role_system_*) java accessibility role gnome accessibility role (atk_role_*) mac os x accessibility role aria (role=*) html tagged pdf
relevant xul for alerts, in java/gnome for any alert, in msaa if no other role applies.
...in such a case, they should be wrapped in a <reference> pragmatically however, user agents should expect to find <link> tags as direct children of <toci> abstract role - a perceivable section containing content that is
relevant to a specific, author-specified purpose and sufficiently important that users will likely want to be able to navigate to the section easily and to have it listed in a summary of the page.
...And 8 more matches
mach
mach expands
relative paths starting from the current working directory, so you can run commands like mach build .
...say, if you run a rolling
release arch linux distro or derivate thereof ("manjaro"), you have something less tedious: octopi!
...mach is still
relatively young ("born" in 2012) and there are a number of bugs and numerous areas for improvement.
...And 8 more matches
Power profiling overview
the exact
relationship is confusing, and chapter 13 of the intel optimization manual has more details.
... power and power-
related measurements there are several kinds of power and power-
related measurements.
... pp1: an uncore device, usually the gpu (not available on all processor models.) dram: main memory (not available on all processor models.) the following
relationship holds: pp0 + pp1 <= pkg.
...And 8 more matches
Web Replay
open a new tab in recording mode click the 'tools -> web developer -> web replay ->
reload and record tab' menu item.
... record/replay infrastructure broadly,
reliable record/replay is achieved by controlling for non-determinism in the browser.
... if we record and later replay the order in which threads acquire locks (and, by extension,
release locks and use condvars) then accesses on lock-protected memory will occur in the same order.
...And 8 more matches
nsIHTMLEditor
insertfromdrop(in nsidomevent aevent); void inserthtml(in astring ainputstring); void inserthtmlwithcontext(in astring ainputstring, in astring acontextstr, in astring ainfostr, in astring aflavor, in nsidomdocument asourcedoc, in nsidomnode adestinationnode, in long adestinationoffset, in boolean adeleteselection); void insertlinkaroundselection(in nsidomelement aancho
relement); boolean isanonymouselement(in nsidomelement aelement); void makeorchangelist(in astring alisttype, in boolean enti
relist, in astring abullettype); boolean nodeisblock(in nsidomnode node); void pastenoformatting(in long aselectiontype); void rebuilddocumentfromsource(in astring asourcestring); void removealldefaultproperties(); ...
...ibute); void removeinsertionlistener(in nsicontentfilter infilter); void removelist(in astring alisttype); void replaceheadcontentswithhtml(in astring asourcetoinsert); void selectelement(in nsidomelement aelement); void setbackgroundcolor(in astring acolor); void setbodyattribute(in astring aattr, in astring avalue); void setcaretafte
relement(in nsidomelement aelement); void setcssinlineproperty(in nsiatom aproperty, in astring aattribute, in astring avalue); void setdocumenttitle(in astring atitle); void setinlineproperty(in nsiatom aproperty, in astring aattribute, in astring avalue); void setparagraphformat(in astring aparagraphformat); void updatebaseurl(); attributes ...
... this does not
rely on the selection, and is not sensitive to context.
...And 8 more matches
nsIWindowsRegKey
method overview void close(); void create(in unsigned long rootkey, in astring
relpath, in unsigned long mode); nsiwindowsregkey createchild(in astring
relpath, in unsigned long mode); astring getchildname(in unsigned long index); astring getvaluename(in unsigned long index); unsigned long getvaluetype(in astring name); boolean haschanged(); boolean haschild(in astring name); boolean hasvalue(in astring name); ...
... boolean iswatching(); void open(in unsigned long rootkey, in astring
relpath, in unsigned long mode); nsiwindowsregkey openchild(in astring
relpath, in unsigned long mode); acstring readbinaryvalue(in astring name); unsigned long long readint64value(in astring name); unsigned long readintvalue(in astring name); astring readstringvalue(in astring name); void removechild(in astring
relpath); void removevalue(in astring name); void startwatching(in boolean recurse); void stopwatching(); void writebinaryvalue(in astring name, in acstring data); void writeint64value(in astring name, in unsigned long long data); void writeintvalue(in astring name, in unsigned long data); ...
...void create( in unsigned long rootkey, in astring
relpath, in unsigned long mode ); parameters rootkey a root key defined above or any valid hkey on 32-bit windows.
...And 8 more matches
Thunderbird Binaries
described below are three types of generally available thunderbird packages -
releases, early preview
releases, and nightly builds (including trunk development builds) - and their downloaded locations.
... additionally, ad-hoc packages called try builds are made available on an as-needed basis to allow for testing of certain patches, and are typically announced in
related bug reports.
...
releases thunderbird
releases have been extensively tested and are made available for anyone to download and use it.
...And 8 more matches
Migrating from Firebug - Firefox Developer Tools
persist logs in firebug you can click the persist button within the toolbar to keep the logged messages between page navigations and
reloads.
... inspector firebug has an html panel, which allows to edit html/xml/svg and the css
related to it.
... copy html and
related information firebug's html panel allows to copy the inner and outer html of an element as well as the css and xpath to it via the context menu of an element.
...And 8 more matches
SVGPathSeg - Web APIs
methods none properties unsigned short pathsegtype domstring pathsegtypeasletter constants pathseg_unknown = 0 pathseg_closepath = 1 pathseg_moveto_abs = 2 pathseg_moveto_
rel = 3 pathseg_lineto_abs = 4 pathseg_lineto_
rel = 5 pathseg_curveto_cubic_abs = 6 pathseg_curveto_cubic_
rel = 7 pathseg_curveto_quadratic_abs = 8 pathseg_curveto_quadratic_
rel = 9 pathseg_arc_abs = 10 pathseg_arc_
rel = 11 pathseg_lineto_horizontal_abs = 12 pathseg_lineto_horizonta...
...l_
rel = 13 pathseg_lineto_vertical_abs = 14 pathseg_lineto_vertical_
rel = 15 pathseg_curveto_cubic_smooth_abs = 16 pathseg_curveto_cubic_smooth_
rel = 17 pathseg_curveto_quadratic_smooth_abs = 18 pathseg_curveto_quadratic_smooth_
rel = 19 normative document svg 1.1 (2nd edition) constants name value description pathseg_unknown 0 the unit type is not one of predefined types.
... pathseg_moveto_
rel 3 corresponds to a "
relative moveto" (m) path data command.
...And 8 more matches
Inputs and input sources - Web APIs
this space's native origin is located at the point from which the target ray is emitted (such as the front tip of the controller, or the end of a gun bar
rel if the controller is being rendered as a gun, for example), and the space's orientation vector extends outward along the path of the target ray.
...
relative to the origin of the world space, w, the grip space's origin is located x units to the right, y units above, and z units farther away.
... if the primary action ends successfully (for example, due to the user
releasing the button or trigger), rather than because of an error, the select event is sent.
...And 8 more matches
Implementing a Microsoft Active Accessibility (MSAA) Server - Accessibility
a set of system messages that confer accessibility-
related events such as focus changes, changes to document content and state changes in ui objects like checkboxes.
... myth: msaa is too slow reality: assistive technology vendors have found ways around most of the performance problems
related to out-of-process com method calls.
...
related myth: msaa is not supported by at vendors reality: it's a standard, and it is supported by jaws, window-eyes, zoomtext, dragon and supernova/hal.
...And 8 more matches
Color picker tool - CSS: Cascading Style Sheets
"></div> </div> </div> css /* * color picker tool */ .ui-color-picker { width: 420px; margin: 0; border: 1px solid #ddd; background-color: #fff; display: table; -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; user-select: none; } .ui-color-picker .picking-area { width: 198px; height: 198px; margin: 5px; border: 1px solid #ddd; position:
relative; float: left; display: table; } .ui-color-picker .picking-area:hover { cursor: 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%, rgb...
...00 100%); } .ui-color-picker .alpha { border: 1px solid #ccc; background: url("https://mdn.mozillademos.org/files/5705/alpha.png"); } .ui-color-picker .alpha-mask { width: 100%; height: 100%; background: url("https://mdn.mozillademos.org/files/6089/alpha_mask.png"); } .ui-color-picker .slider-picker { width: 2px; height: 100%; border: 1px solid #777; background-color: #fff; position:
relative; top: -1px; } /* input hsv and rgb */ .ui-color-picker .info { width: 200px; margin: 5px; float: left; } .ui-color-picker .info * { float: left; } .ui-color-picker .input { width: 64px; margin: 5px 2px; float: left; } .ui-color-picker .input .name { height: 20px; width: 30px; text-align: center; font-size: 14px; line-height: 18px; float: left; } .ui-color-picker .input in...
...a-topic="hexa"] > input { width: 90px; height: 24px; padding: 2px 0; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } /* preview color */ .ui-color-picker .preview { width: 95px; height: 53px; margin: 5px; margin-top: 10px; border: 1px solid #ddd; background-image: url("https://mdn.mozillademos.org/files/5705/alpha.png"); float: left; position:
relative; } .ui-color-picker .preview:before { height: 100%; width: 50%; left: 50%; top: 0; content: ""; background: #fff; position: absolute; z-index: 1; } .ui-color-picker .preview-color { width: 100%; height: 100%; background-color: rgba(255, 0, 0, 0.5); position: absolute; z-index: 1; } .ui-color-picker .switch_mode { width: 10px; height: 20px; position:
relative; border-radiu...
...And 8 more matches
<input>: The Input (Form Input) element - HTML: Hypertext Markup Language
looks like a text input, but has validation parameters and
relevant keyboard in supporting browsers and devices with dynamic keyboards.
...looks like a text input, but has validation parameters and
relevant keyboard in supporting browsers and devices with dynamic keyboards.
...those with extra importance as it
relates to <input> are highlighted.
...And 8 more matches
HTML elements reference - HTML: Hypertext Markup Language
element description <base> the html <base> element specifies the base url to use for all
relative urls in a document.
... <link> the html external resource link element (<link>) specifies
relationships between the current document and an external resource.
... <meta> the html <meta> element represents metadata that cannot be represented by other html meta-
related elements, like <base>, <link>, <script>, <style> or <title>.
...And 8 more matches
How to convert an overlay extension to restartless - Archive of obsolete content
prior to firefox 10, the chrome.manifest file you
rely on wasn't loaded automatically for restartless add-ons.
... reportedly xmlhttprequest doesn't work
reliably when used in jsm under versions of firefox less than 16, however as previously mentioned, this guide should be taken as requiring firefox 17+.
...your restartless add-on won't actually
reload some types of files if they are in a jar and the add-on is updated without a restart.
...And 7 more matches
MCD, Mission Control Desktop, AKA AutoConfig - Archive of obsolete content
// pref("general.config.obscure_value", 0); // for mcd .cfg files pref('general.config.filename', 'thunderbird.cfg'); // for mcd .cfg files it used to be in previous
releases (up until 7.0) in /usr/lib/thunderbird-x.0/default/pref/autoconf.js the first pref just tells us that we won't encode the file (no more rotary 13 or 7 cf below), the second pref is the name of the file to be read: /usr/lib/thunderbird/thunderbird.cfg.
... thunderbird (previous
release) support of autoconfig and ldap calls below is a "try and catch" we had in previous
release of thunderbird where that feature wasn't compiled in by default, it can help if needed ...
...inally back here: $ rpm -ql thunderbird | grep autoconfig /usr/lib/thunderbird-1.0.2/chrome/locale/autoconfig /usr/lib/thunderbird-1.0.2/components/autoconfig.xpt /usr/lib/thunderbird-1.0.2/components/libautoconfig.so /usr/lib/thunderbird-1.0.2/defaults/autoconfig /usr/lib/thunderbird-1.0.2/defaults/autoconfig/platform.js /usr/lib/thunderbird-1.0.2/defaults/autoconfig/prefcalls.js bugs reports
related for the record, for old 1.0.x
releases...
...And 7 more matches
menupopup - Archive of obsolete content
« xul reference home [ examples | attributes | properties | methods |
related ] a container used to display the contents of a popup menu.
... position type: string the position attribute determines where the popup appears
relative to the element the user clicked to invoke the popup.
... note that a context menu will never respect this attribute, always appearing
relative to the mouse cursor.
...And 7 more matches
tooltip - Archive of obsolete content
« xul reference home [ examples | attributes | properties | methods |
related ] this element is used for the tooltip popups.
... example <tooltip id="pagetooltip" page="true"/> <browser tooltip="pagetooltip"/> position type: string the position attribute determines where the popup appears
relative to the element the user clicked to invoke the popup.
... note that a context menu will never respect this attribute, always appearing
relative to the mouse cursor.
...And 7 more matches
Handling common accessibility problems - Learn web development
people with hearing impairments
relying on captions/subtitles or other text alternatives for audio/video content.
...see desktop mouse and keyboard controls for some game-
related examples that can be adapted for any purpose.
...the simplest text alternative available is the humble alt attribute, which we should include on all images that contain
relevant content.
...And 7 more matches
Client-side tooling overview - Learn web development
although it is still enti
rely reasonable to write html, css, and javascript "by hand" there is now a wealth of tools that developers can use to speed up the process of building a web site, or app.
... there are some extremely well-established tools that have become common "household names" amongst the development community, and new tools are being written and
released every day to solve specific problems.
... this includes anything that makes your development process easier with respect to generating stable and
reliable code.
...And 7 more matches
Eclipse CDT
much of that page is redundant (taken care of by the mach setup), but there is still some information there that is
relevant that should make its way back here at some point.
... since the compiler options used to build the source change
relatively infrequently, the "build" step above doesn't need to be rerun all that often.
...select "c/c++ build > build variables", and add a variable "mozconfig", and set it to the path of your .mozconfig file
relative to the top source directory.
...And 7 more matches
Localization technical reviews
the merge date for migrating from one product
release channel to the next (e.g., aurora to beta, or beta to
release) is rapidly approaching.
... you need to make sure that your work can effectively be compiled into a build for the next
release channel.
... is only performed on the first revision a new locale wants to have
released to the public.
...And 7 more matches
Mozilla DOM Hacking Guide
mozilla's dom is coded almost enti
rely in c++.
... when, in javascript, a client tries to access a dom object or a dom method on a dom object, the js engine asks xpconnect to search for the
relevant c++ method to call.
...the
relevant code is at nsdomclassinfo.cpp, around line 4520.
...And 7 more matches
SpiderMonkey 1.8
the mozilla javascript team is pleased to announce the
release of spidermonkey 1.8
release candidate 1.
... please let us know about your experiences with this
release by posting in the mozilla.dev.tech.js-engine newsgroup.
... migrating to spidermonkey 1.8 spidermonkey 1.8 is not binary-compatible with previous
releases.
...And 7 more matches
SpiderMonkey 24
these
release notes are an incomplete draft and were initially seeded from the spidermonkey 17
release notes, so they're not necessarily complete or fully accurate.
... the mozilla javascript team is pleased to announce the
release of spidermonkey 24.
...it continues to improve performance over previous spidermonkey
releases, with a significantly improved garbage collector, a new jit compilation mode, and other features.
...And 7 more matches
SpiderMonkey 31
these
release notes are incomplete.
... the mozilla javascript team is pleased to announce the
release of spidermonkey 31.
...it continues to improve performance over previous spidermonkey
releases, with a significantly improved garbage collector and other features.
...And 7 more matches
WebIDL bindings
ns_impl_cycle_collection_wrappercache_0(myclass) ns_impl_cycle_collecting_addref(myclass) ns_impl_cycle_collecting_
release(myclass) ns_interface_map_begin_cycle_collection(myclass) ns_wrappercache_interface_map_entry ns_interface_map_entry(nsisupports) ns_interface_map_end if your class doesn't inherit from a class that implements getparentobject, then add a function of that name that, for a given instance of your class, returns the same object every time (unless you write explicit code that handles your p...
...static methods will be passed a const globalobject& for the
relevant global and can get a jscontext* by calling context() on it.
...the arguments of this method will be the arguments of the webidl constructor, with a const globalobject& for the
relevant global prepended.
...And 7 more matches
Add to iPhoto
this extension for mac os x serves as a demonstration of how to use js-ctypes to call mac os x carbon, core foundation, and other system frameworks from an extension written enti
rely in javascript.
...we'll be using a number of these methods, but for brevity's sake, since these are generally simple declarations, let's look at only the cf
release() and cfretain() declarations.
... in c, these are declared thusly: void cf
release(cftyperef cf); void cfretain(cftyperef cf); in javascript, this translates to: this.cf
release = this.lib.declare("cf
release", ctypes.default_abi, ctypes.void_t, ctypes.voidptr_t); // input: object to
release this.cfretain = this.lib.declare("cfretain", ctypes.default_abi, ctypes.void_t, ctypes.voidptr_t); // input: object to retain these methods are used to manage the reference counting for core foundation objects.
...And 7 more matches
KeyboardEvent.key - Web APIs
a keyup event is fired once the key is
released.
... try experimenting using the following two test cases: press and hold the shift key, then press 2 and
release it.
... next,
release the shift key.
...And 7 more matches
SVGPathElement - Web APIs
<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 x1="121" y1="25" x2=...
... svgpathelement.createsvgpathsegmoveto
rel() returns a stand-alone, parentless svgpathsegmoveto
rel object.
... svgpathelement.createsvgpathseglineto
rel() returns a stand-alone, parentless svgpathseglineto
rel object.
...And 7 more matches
WebGL model view projection - Web APIs
box.draw({ top : 0.9, // x bottom : 0, // x left : -0.9, // y right : 0.9, // y depth : 0.5, // z color : [0.4, 1, 0.4, 1] // green }); finally, for demonstration that clipping is actually going on, this box doesn't get drawn because it's enti
rely outside of clip space.
...then any objects which are enti
rely outside the viewing frustum are removed from the set.
... next, objects which partially extrude outside the viewing frustum are clipped by dropping any polygons which are enti
rely outside the frustum, and by clipping the polygons which cross outside the frustrum so that they no longer exit it.
...And 7 more matches
Cognitive accessibility - Accessibility
cognitive impairment refers to a broad range of disabilities, from people with intellectual disabilities who may have the most-limited capabilities, to age-
related issues with thinking and remembering.
...to this end, they define 17 specific guidelines, of which six are especially
relevant for cognitive accessibility.
... people who have poor wi
reless reception.
...And 7 more matches
Linear-gradient Generator - CSS: Cascading Style Sheets
v> </div> </div> css content /* * color picker tool */ .ui-color-picker { width: 420px; margin: 0; border: 1px solid #ddd; background-color: #fff; display: table; -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; user-select: none; } .ui-color-picker .picking-area { width: 198px; height: 198px; margin: 5px; border: 1px solid #ddd; position:
relative; float: left; display: table; } .ui-color-picker .picking-area:hover { cursor: default; } /* hsv format - hue-saturation-value(brightness) */ .ui-color-picker .picking-area { background: url("images/picker_mask.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-lin...
....66%, #f0f 83.33%, #f00 100%); background: -o-linear-gradient(left, #f00 0%, #ff0 16.66%, #0f0 33.33%, #0ff 50%, #00f 66.66%, #f0f 83.33%, #f00 100%); } .ui-color-picker .alpha { border: 1px solid #ccc; background: url("images/alpha_mask.png"); } .ui-color-picker .slider-picker { width: 2px; height: 100%; margin: 0 0 0 -2px; border: 1px solid #777; background-color: #fff; position:
relative; top: -1px; } /* input hsv and rgb */ .ui-color-picker .info { width: 200px; margin: 5px; float: left; } .ui-color-picker .info * { float: left; } .ui-color-picker .input { width: 64px; margin: 5px 2px; float: left; } .ui-color-picker .input .name { height: 20px; width: 30px; text-align: center; font-size: 14px; line-height: 18px; float: left; } .ui-color-picker .input in...
...e; } .ui-color-picker .input[data-topic="hexa"] > input { width: 90px; height: 24px; padding: 2px 0; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } /* preview color */ .ui-color-picker .preview { width: 95px; height: 53px; margin: 5px; margin-top: 10px; border: 1px solid #ddd; background-image: url("images/alpha.png"); float: left; position:
relative; } .ui-color-picker .preview:before { height: 100%; width: 50%; left: 50%; top: 0; content: ""; background: #fff; position: absolute; z-index: 1; } .ui-color-picker .preview-color { width: 100%; height: 100%; background-color: rgba(255, 0, 0, 0.5); position: absolute; z-index: 1; } .ui-color-picker .switch_mode { width: 10px; height: 20px; position:
relative; border-radiu...
...And 7 more matches
HTTP Index - HTTP
though often based on a tcp/ip layer, it can be used on any
reliable transport layer, that is, a protocol that doesn't lose messages silently like udp does.
... rudp — the
reliable update of udp — is a suitable alternative.
...it
relies on a few basic concepts like the notion of resources and uris, a simple structure of messages, and a client-server structure for the communication flow.
...And 7 more matches
An overview of HTTP - HTTP
it is an application layer protocol that is sent over tcp, or over a tls-encrypted tcp connection, though any
reliable transport protocol could theoretically be used.
...although important to diagnose network problems, the underlying layers are mostly ir
relevant to the description of http.
... proxies between the web browser and the server, numerous computers and machines
relay the http messages.
...And 7 more matches
Web video codec guide - Web media technologies
these colors have no intentional color
relationship to the contents of the frame.
...this technique works well when the camera is fixed in place, or the objects in the frame are
relatively stationary, but if there is a great deal of motion in the frame, the number of differences between frames can be so great that compression doesn't do any good.
... reduced frame rate similarly, you can remove frames from the video enti
rely and decrease the frame rate to compensate.
...And 7 more matches
Chapter 3: Introduction to XUL—How to build a more intuitive UI - Archive of obsolete content
because a xul document is also an xml document, it can contain xhtml, svg, mathml, and other elements; if you use external entity references, the xml document's contents are modularized; combined with other xml-
related technologies, such as dom, xlink, or xslt, you can use it for a number of different applications.
... if multiple elements have the same ordinal value, they will be laid out in the same
relative order they appear in the source code.
... creating the menu listing 9 shows how the menu element and its
related elements are combined.
...And 6 more matches
Index of archived content - Archive of obsolete content
ui/button/action ui/button/toggle ui/frame ui/id ui/sidebar ui/toolbar util/array util/collection util/deprecate util/list util/match-pattern util/object util/uuid window/utils
release notes tools cfx cfx to jpm console jpm jpm-mobile jpmignore package.json tutorials add a context menu item add a menu item to firefox adding a butto...
... bookmarks boxes canvas code snippets cookies customizing the download progress bar delayed execution dialogs and prompts downloading files drag & drop embedding svg examples and demos from articles file i/o finding window handles forms
related code snippets html in xul for rich tooltips html to dom isdefaultnamespace js xpcom javascript debugger service javascript timers javascript daemons management label and description lookupnamespaceuri lookupprefix ...
... progress listeners queryselector rosetta running applications svg animation svg general scrollbar sidebar stringview tabbox toolbar tree uri parsing view source for xul applications windows xml-
related code snippets xml:base support in old browsers xpath getattributens common pitfalls communication between html and your extension creating custom firefox extensions with the mozilla build system custom about: urls default preferences ...
...And 6 more matches
Multiple Rules - Archive of obsolete content
<hbox id="photoslist" datasources="template-guide-photos3.rdf" ref="http://www.xulplanet.com/rdf/myphotos"> <template> <query> <content uri="?start"/> <member container="?start" child="?photo"/> <triple subject="?photo" predicate="http://purl.org/dc/elements/1.1/title" object="?title"/> </query> <rule> <where subject="?title"
rel="equals" value="canal"/> <action> <button uri="?photo" image="?photo" label="view" orient="vertical"/> </action> </rule> <rule> <action> <image uri="?photo" src="?photo"/> </action> </rule> </template> </hbox> this template contains a query with two rules.
...the
rel specifies a
relation operator to compare with.
...here is another example for an xml source: <radiogroup datasources="people.xml" ref="*" querytype="xml"> <template> <query expr="person"/> <rule> <where subject="?gender"
rel="equals" value="male"/> <action> <radio uri="?" label="?name is male"/> </action> </rule> <rule> <action> <radio uri="?" label="?name is female" disabled="true"/> </action> </rule> </template> </radiogroup> in this example, all male people are matched with the first rule, and a radio button is generated for each one.
...And 6 more matches
RDF Query Syntax - Archive of obsolete content
<vbox datasources="http://www.xulplanet.com/ds/sample.rdf" ref="http://www.xulplanet.com/rdf/a"> <template> <query> <content uri="?start"/> <triple subject="?start" predicate="http://www.xulplanet.com/rdf/
relateditem" object="?
relateditem"/> </query> <rule> ...
...the content tag doesn't do anything else at this point, meaning it doesn't add anything else to the network of potential results, so processing continues on to the next statement, the triple, which looks like this: <triple subject="?start" predicate="http://www.xulplanet.com/rdf/
relateditem" object="?
relateditem"/> the triple statement is used to follow arcs or arrows in the rdf graph.
...in the triple used here, the predicate is 'http://www.xulplanet.com/rdf/
relateditem', so we know that the builder will look for arrows with that label.
...And 6 more matches
More Event Handlers - Archive of obsolete content
mouse events there are several events which can be used to handle mouse specific actions, which are described briefly below: click called when the mouse is pressed and
released on an element.
...the event handler will be called as soon as a mouse button is pressed, even if it hasn't been
released yet.
... mouseup called when a mouse button is
released on an element.
...And 6 more matches
Archived Mozilla and build documentation - Archive of obsolete content
web pages can reference generators via <link
rel="microsummary"> elements in their <head> elements.
...it reports javascript-
related errors and warnings, css errors and arbitrary messages from chrome code.
... firefox sync sync refers to a family of
related components and services which provide synchronization of data between mozilla application instances.
...And 6 more matches
What is RSS - Archive of obsolete content
a short history of rss in march of 1999 netscape
released rss 0.90.
... in july of 1999 netscape's rss 0.91 was
released.
... in june of 2000 userland's rss 0.91 was
released.
...And 6 more matches
Developing cross-browser and cross-platform pages - Archive of obsolete content
the browser identification approach is now known to be complicated, un
reliable and difficult to maintain.
... browser identification approach (aka "browser sniffing"): not best, not
reliable approach this approach, still commonly used nowadays, attempts to identify the browser and makes the web author at design time decide what that implies in terms of capabilities of the visiting browser.
...which is far from being a
reliable and easy task to achieve.
...And 6 more matches
Correctly Using Titles With External Stylesheets - Archive of obsolete content
external stylesheets are often associated with html documents using the <link
rel="stylesheeet"> element, but it is important to use the element's title attribute properly.
... this is because the title attribute on a <link
rel="stylesheeet"> element makes it either preferred or an alternative style sheet.
...a persistent stylesheet is one which has no title attribute and a value of stylesheet supplied for the
rel attribute.
...And 6 more matches
Windows Media in Netscape - Archive of obsolete content
for the sake of brevity, we've made the following code snippet shorter to illustrate the
relevant points about the api: var player; try { if(window.activexobject) { player = new activexobject("wmplayer.ocx.7"); } else if (window.geckoactivexobject) { player = new geckoactivexobject("wmplayer.ocx.7"); } } catch(e) { // handle error -- no wmp 7 or 9 control // can use wmp 6 also if necessary, but this is legacy software nowadays } if (player) { // windows media playe...
... this is the example: needs to be embedded in wiki page (can it just be put here?) <object id="playerex2" classid="clsid:6bf52a52-394a-11d3-b153-00c04f79faa6" height="200" width="200"> <param name="uimode" value="full"> <param name="autostart" value="true"> <param name="url" value="media/p
reludesteel.wma"> your browser does not support the activex windows media player </object> the same markup (used above and shown below) will work in both ie and netscape 7.1.
... <object id="playerex2" classid="clsid:6bf52a52-394a-11d3-b153-00c04f79faa6" height="200" width="200"> <param name="uimode" value="full" /> <param name="autostart" value="true" /> <param name="url" value="p
reludesteel.wma" /> your browser does not support the activex windows media player </object> the classid attribute references the clsid of windows media player 7 and above -- windows media player versions before 7 used a different clsid.
...And 6 more matches
Gecko FAQ - Gecko Redirect 1
netscape
released its own version of the browser branded as netscape navigator.
... other companies
release their own software and hardware products that use gecko.
... the original mozilla browser, first
released as navigator 1.0, was developed rapidly by a small team that was passionate about creating the next killer app, and they succeeded.
...And 6 more matches
How can we design for all types of users? - Learn web development
the calculation may seem pretty complicated, but we can
rely on tools to do the job for us.
... font size you can specify font size on a website either through
relative units or absolute units.
...
relative units also called proportional units,
relative units are computed
relative to a parent element.
...And 6 more matches
HTML text fundamentals - Learn web development
furthermore: users looking at a web page tend to scan quickly to find
relevant content, often just reading the headings to begin with.
... seve
rely visually impaired people often don't read web pages; they listen to them instead.
... to style content with css, or make it do interesting things with javascript, you need to have elements wrapping the
relevant content, so css/javascript can effectively target it.
...And 6 more matches
Introducing a complete toolchain - Learn web development
tools used in our toolchain in this article we're going to use the following tools and features: jsx, a react-
related set of syntax extensions that allow you to do things like defining component structures inside javascript.
... as mentioned previously, github is a source code repository service that adds community features such as issue tracking, following project
releases and much more.
... netlify is a hosting service for static websites (that is, websites that enti
rely consist of files that do not change in real time), which lets us deploy multiple times a day and freely hosts static sites of all kinds.
...And 6 more matches
Eclipse CDT Manual Setup
some of it like the section on building the index and usage tips are still
relevant, and other parts still may provide useful background information to understand it in more detail on how eclipse works.
...if
relative paths are used to specify the source file or any of its include paths (common in mozilla), and if you fail to take steps to make sure the build output specifies which directory the compiler is invoked from, this will not be possible.
...finally, the build must not be parallelized, since that would result in the interleaving of build output from different directories (breaking resolution of
relative paths by interleaving the "entering directory..."/"leaving directory..." lines), and the build must not be silenced/quietened.
...And 6 more matches
Performance
scroll-linked effects information on scroll-linked effects, their effect on performance,
related tools, and possible mitigation techniques.
...it also lets you do other memory-
related operations like trigger gc and cc, dump gc & cc logs, and dump dmd reports.
... valgrind valgrind is a tool that detects various memory-
related problems at runtime, including leaks.
...And 6 more matches
SpiderMonkey 1.8.8
these
release notes are an incomplete draft and were initially seeded from the 1.8.5
release notes, so lots of the information here isn't actually new to spidermonkey 1.8.8 (nor is it even the case that the version number will be 1.8.8!).
... the mozilla javascript team is pleased to announce the
release of spidermonkey 1.8.8.
... you can download full source code here: insert-actual-link-when-the-
release-happens (md5 checksum: insert-actual-hash-here).
...And 6 more matches
SpiderMonkey 38
these
release notes are incomplete.
... the mozilla javascript team is pleased to announce the
release of spidermonkey 38.
...it continues to improve performance over previous spidermonkey
releases, with xxx blah blah blah.
...And 6 more matches
SpiderMonkey 45
these
release notes are incomplete.
... the mozilla javascript team is pleased to announce the
release of spidermonkey 45.
... you can download full source code from https://ftp.mozilla.org/pub/spidermonkey/
releases/45.0.2/mozjs-45.0.2.tar.bz2 sha256: 570530b1e551bf4a459d7cae875f33f99d5ef0c29ccc7742a1b6f588e5eadbee md5: 2ca34f998d8b5ea79d8616dd26b5fbab spidermonkey 45 is the javascript engine that shipped in firefox 45.
...And 6 more matches
Using XPCOM Utilities to Make Things Easier
instead of implementing the nsisupports yourself, ns_impl_isupports1 can expand to the implementation of addref,
release, and queryinterface for any object.
... declaration macros ns_decl_nsisupports declares addref,
release, and queryinterface for you, and it also defines the mrefcnt required by ns_impl_isupports.
...leaking a reference by not
releasing an object, as the code below demonstrates, can be a major problem.
...And 6 more matches
Index
account interfaces provides an overview of the
related interfaces.
... see an overview of thunderbird components for a general description of the thunderbird user interface and
related programmatic interfaces.
...address book interfaces provides an overview of the
related interfaces.
...And 6 more matches
Accessibility Inspector - Firefox Developer Tools
states — a list of the different accessibility-
relevant states that can apply to the current item.
...
relations — a list of the accessiblity-
relevant
relationships between this item and other items.
... for example, in a form, an entry item could have a "labelled by"
relation with a label item, which in turn has a "label for"
relation to the entry item.
...And 6 more matches
RTCStatsReport - Web APIs
the statistics objects for each category of statistic information, there is a dictionary whose properties provide the
relevant information.
...the statistic category names are members of the enumerated type rtcstatstype, as follows: candidate-pair an rtcicecandidatepairstats object providing statistics
related to an rtcicetransport.
... certificate an rtccertificatestats object providing statistics
related to a certificate being used by an rtcicetransport.
...And 6 more matches
Rendering and the WebXR frame animation callback - Web APIs
hardare vertical refresh rate when the browser is ready to refresh the <canvas> within which your webxr content is displayed, it calls your frame rendering callback, which uses the specified timestamp and any other
relevant data, such as models and textures, as well as application state, to render the scene—as it should appear at the specified time—into the webgl backbuffer.
...not only that, but if your renderer itself runs longer than that amount of time, you can cause not just the frame to get dropped, but that time to be wasted enti
rely, blocking other code from getting to run at all for that frame.
...by combining that inferred depth information with other cues such as perspective, shadows, memories of what these
relationships mean, and so forth, we can figure out a great deal about the world around us.
...And 6 more matches
Starting up and shutting down a WebXR session - Web APIs
additionally, it is updated to maintain compatibility with browsers as their support for webxr and other technologies
related to it and to the implementation of the polyfill change over time.
... important: you should always test your code on actual ar and/or vr hardware before
releasing or shipping a product!
... context requirements a webxr compatible environment starts with a secu
rely-loaded document.
...And 6 more matches
ARIA live regions - Accessibility
using javascript, it is possible to dynamically change parts of a page without requiring the entire page to
reload — for instance, to update a list of search results on the fly, or to display a discreet alert or notification which does not require user interaction.
... simple live regions dynamic content which updates without a page
reload is generally either a region or a widget.
...below is a list of each
related aria live region property with a description.
...And 6 more matches
ARIA Test Cases - Accessibility
there are several purposes for providing this information: help browser vendors provide correct implementations help at vendors provide correct implementations inform authors as to what actually works
reliably in general we're testing with the latest public
releases.
... however, where things don't work we may test with nightly builds if they are available, in order to show what is already fixed in upcoming
releases.
...when documenting an issue, please also list it in the
relevant compatibility table below.
...And 6 more matches
Perceivable - Accessibility
success criteria how to conform to the criteria practical resource 1.3.1 info and
relationships (a) any content structure—or visual
relationship made between content—can also be determined programmatically, or be inferred from text description.
... the main situations in which this is
relevant are: text labels and the form elements they describe.
... 1.3.3 sensory characteristics (a) instructions for operating controls or understanding content do not
rely on a single sense.
...And 6 more matches
Box-shadow generator - CSS: Cascading Style Sheets
</div> <div id="output" class="category"> <div id="menu" class="menu"></div> <div class="title"> css code </div> <div class="group" style="border-top-left-radius: 0;"> <div class="output" data-topic="element" data-name="element" data-prop="width height background-color position=[
relative] box-shadow"> </div> <div class="output" data-topic="before" data-name="element:before" data-prop="content=[""] position=[absolute] width height top left z-index background-color box-shadow transform -webkit-transform -ms-transform"> </div> <div class="output" data-topic="after" ...
... width: 200px; margin: 4px 10px; display: block; border: 1px solid #999; border-radius: 3px; background: #eee; } .ui-slider:hover { cursor: pointer; } .ui-slider-name { width: 90px; padding: 0 10px 0 0; text-align: right; text-transform: lowercase; } .ui-slider-pointer { width: 13px; height: 13px; background-color: #eee; border: 1px solid #2c9fc9; border-radius: 3px; position:
relative; top: -3px; left: 0%; } .ui-slider-btn-set { width: 25px; background-color: #2c9fc9; border-radius: 3px; color: #fff; font-weight: bold; text-align: center; } .ui-slider-btn-set:hover { background-color: #379b4a; cursor: pointer; } .ui-slider-input > input { margin: 0 10px; padding: 0; width: 50px; text-align: center; -moz-box-sizing: border-box; -webkit-box-sizing: borde...
...-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; } #container { width: 100%; padding: 2px; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } /* container with shadows stacks */ #stack_container { height: 400px; overflow: hidden; position:
relative; border: 1px solid #ccc; border-radius: 3px; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } #stack_container .container { height: 100%; width: 100%; position: absolute; left: 100%; transition-property: left; transition-duration: 0.5s; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } #stack_contai...
...And 6 more matches
Basic concepts of Logical Properties and Values - CSS: Cascading Style Sheets
the logical properties and values specification introduces flow-
relative mappings for many of the properties and values in css.
... this article introduces the specification, and explains flow
relative properties and values.
...the logical properties and values specification defines mappings for these physical values to their logical, or flow
relative, counterparts — e.g.
...And 6 more matches
<length> - CSS: Cascading Style Sheets
units
relative length units
relative lengths represent a measurement in terms of some other distance.
... font-
relative lengths font-
relative lengths define the <length> value in terms of the size of a particular character or font attribute in the font currently in effect in an element or its parent.
... viewport-percentage lengths viewport-percentage lengths define the <length> value
relative to the size of the viewport, i.e., the visible portion of the document.
...And 6 more matches
Cross-browser audio basics - Developer guides
src contains the path to the audio file to be loaded (
relative or absolute).
...plus browsers have policies that will block autoplay enti
rely in many situations.
... p
reload the p
reload attribute allows you to specify a preference for how the browser p
reloads the audio, in other words, which part of the file it downloads when the <audio> element is initialized, and before the play button is pressed.
...And 6 more matches
Using HTML sections and outlines - Developer guides
they are intended to enhance the limited semantics of earlier versions of html, which included only the <div> tag as a generic mechanism for grouping
related content.
...many accessibility tools as well as reader views provided by some browsers
rely on semantic sectioning elements.
... html section element (<section>) defines a section of a document to indicate a
related grouping of semantic meaning.
...And 6 more matches
Strict-Transport-Security - HTTP
header type response header forbidden header name no syntax strict-transport-security: max-age=<expire-time> strict-transport-security: max-age=<expire-time>; includesubdomains strict-transport-security: max-age=<expire-time>; p
reload directives max-age=<expire-time> the time, in seconds, that the browser should remember that a site is only to be accessed using https.
... p
reload optional see p
reloading strict transport security for details.
... p
reloading strict transport security google maintains an hsts p
reload service.
...And 6 more matches
WebAssembly.Table - JavaScript
firefox for androidopera for androidsafari on iossamsung internetnode.jstablechrome full support 57edge full support 16firefox full support 52notes full support 52notes notes disabled in the firefox 52 extended support
release (esr).ie no support noopera full support 44safari full support 11webview android full support 57chrome android full support 57firefox android full support...
... 52notes full support 52notes notes disabled in the firefox 52 extended support
release (esr).opera android full support 43safari ios full support 11samsung internet android full support 7.0nodejs full support 8.0.0table() constructorchrome full support 57edge full support 16firefox full support 52notes full support 52notes notes disabled in the firefox 52 extended...
... support
release (esr).ie no support noopera full support 44safari full support 11webview android full support 57chrome android full support 57firefox android full support 52notes full support 52notes notes disabled in the firefox 52 extended support
release (esr).opera android full support 43safari ios full support 11samsung internet android full support ...
...And 6 more matches
Media container formats (file types) - Web media technologies
[2] firefox support for h.264
relies upon the operating system's media infrastructure, so it is available as long as the os supports it.
... [2] firefox support for aac
relies upon the operating system's media infrastructure, so it is available as long as the os supports it.
... audio codecs supported by adts codec browser support chrome edge firefox safari aac yes1 mp3 yes [1] firefox support for aac
relies upon the operating system's media infrastructure, so it is available as long as the os supports it.
...And 6 more matches
JavaScript Daemons Management - Archive of obsolete content
|*| |*| https://developer.mozilla.org/docs/javascript/timers/daemons |*| https://developer.mozilla.org/user:fusionchess |*| |*| this framework is
released under the gnu public license, version 3 or later.
...2 |*| |*| daemon.js - a javascript highly scalable daemons manager |*| |*| https://developer.mozilla.org/docs/javascript/timers/daemons |*| https://developer.mozilla.org/user:fusionchess |*| |*| this framework is
released under the gnu public license, version 3 or later.
... when a method requires the presence of another method (it is
relatively rare), there is a comment which explains why.
...And 5 more matches
Creating custom Firefox extensions with the Mozilla build system - Archive of obsolete content
in addition, binary components need to be recompiled for every major firefox
release, which can be frustrating.
...the process of creating a component is actually
relatively straightforward when the mozilla build system is used.
... your $(moz_objdir) and (from a bash-compatible shell) enter: ../build/autoconf/make-makefile extensions/myextension if your $(moz_objdir) is located outside your $(topsrcdir), you'll need to do: $(topsrcdir)/build/autoconf/make-makefile -t $(topsrcdir) extensions/myextension in order for the script to know where your source is (it'll use the extension path you gave it
relative to the current dir to figure out where you want your makefiles to go).
...And 5 more matches
Microsummary topics - Archive of obsolete content
differentiating between user-initiated and microsummary-
related requests when firefox updates a microsummary generated by a microsummary generator add-on, it automatically downloads the html content of the page being summarized.
... it does not generally download
related content like embedded images and javascript scripts referenced by the page.
...if the x-moz header is present, and its value is microsummary, then the request is a microsummary-
related request.
...And 5 more matches
XUL Events - Archive of obsolete content
attribute: onchange click this event is sent when a mouse button is pressed and
released.
... attribute: onfocus keydown the keydown event is sent to an element that has the focus while a key is pressed but not
released.
... attribute: onkeydown keypress the keypress event is sent to an element that has the focus when a key is pressed and
released.
...And 5 more matches
XUL accessibility guidelines - Archive of obsolete content
many screen reader users and those with physical disabilities
rely on the keyboard as their primary input tool.
...alternative text is not needed when an image serves a pu
rely decorative function.
... <checkbox id="rememberhistorydays" aria-labelledby="historydaysp
relabel historybox historydayspostlabel"> <label id="historydaysp
relabel">remember visited pages for the last</label> <textbox id="historydays" aria-labelledby="historydaysp
relabel historybox historydayspostlabel"/> <label id="historydayspostlabel" >days.</label> the aria-labelledby attribute comes in handy for controls embedded within controls (usually embedded within a checkbox or a radio b...
...And 5 more matches
CSS and JavaScript accessibility best practices - Learn web development
emphasised text inline markup that confers specific emphasis to the text that it wraps: <p>the water is <em>very hot</em>.</p> <p>water droplets collecting on surfaces is called <strong>condensation</strong>.</p> you might want to add some simple coloring to your emphasised text: strong, em { color: #a60000; } you will however ra
rely need to style emphasis elements in any significant way.
...you could style form focus/hover states to make this behaviour more consistent across browsers or fit in better with your page design, but don't get rid of it altogether — again, people
rely on these clues to help them know what is going on.
... another tip is to not
rely on color alone for signposts/information, as this will be no good for those who can't see the color.
...And 5 more matches
Mobile accessibility - Learn web development
if you've set a passcode or pattern for unlocking your device, you will then be taken to the
relevant entry screen to enter it.
...the former provides global options
relating to the device as a whole, and the latter provides options
relating just to the current app/screen you are in.
... hold your finger down on the virtual keyboard until you get the character you want, and then
release your finger to type it.
...And 5 more matches
What is accessibility? - Learn web development
some users will
rely on screen readers, which is software that reads digital text aloud.
... people with mobility impairments these people have disabilities concerning movement, which might involve pu
rely physical issues (such as loss of limb or paralysis), or neurological/genetic disorders that lead to weakness or loss of control in limbs.
... some people might have difficulty making the exact hand movements required to use a mouse, while others might be more seve
rely affected, perhaps being significantly paralyzed to the point where they need to use a head pointer to interact with computers.
...And 5 more matches
The box model - Learn web development
in this lesson, we will take a proper look at the css box model so that you can build more complex layout tasks with an understanding of how it works and the terminology that
relates to it.
...these characteristics refer to how the box behaves in terms of page flow, and in
relation to other boxes on the page: if a box is defined as a block, it will behave in the following ways: the box will break onto a new line.
... the type of box applied to an element is defined by display property values such as block and inline, and
relates to the outer value of display.
...And 5 more matches
How to build custom form controls - Learn web development
<!-- each option only contains the value to be displayed, we'll see later how to handle the real value that will be sent with the form data --> <li class="option">cherry</li> <li class="option">lemon</li> <li class="option">banana</li> <li class="option">strawberry</li> <li class="option">apple</li> </ul> </div> note the use of class names; these identify each
relevant part regardless of the actual underlying html elements used.
... .select { /* this will create a positioning context for the list of options; adding this to .select:focus-within will be a better option when fully supported */ position:
relative; /* this will make our control become part of the text flow and sizable at the same time */ display : inline-block; } we need an extra class active to define the look and feel of our control when it is in its active state.
... before starting, it's important to remember javascript in the browser is an un
reliable technology.
...And 5 more matches
CSS property compatibility table for form controls - Learn web development
no the property simply doesn't work or is so inconsistent that it's not
reliable.
... border and background background no no supported but there is too much inconsistency between browsers to be
reliable.
... property n t note css box model width no no height no no border no no margin yes yes padding no no text and font color yes yes font no[1] no[1] supported, but there is too much inconsistency between browsers to be
reliable.
...And 5 more matches
Document and website structure - Learn web development
usually, this is contextual to what is contained in the main content (for example on a news article page, the sidebar might contain the author's bio, or links to
related articles) but there are also cases where you'll find some recurring elements like a secondary navigation system.
...we use color and font size to draw sighted users' attention to the most useful parts of the content, like the navigation menu and
related links, but what about visually impaired people for example, who might not find concepts like "pink" and "large font" very useful?
... <!doctype html> <html> <head> <meta charset="utf-8"> <title>my page title</title> <link href="https://fonts.googleapis.com/css?family=open+sans+condensed:300|sonsie+one"
rel="stylesheet" type="text/css"> <link
rel="stylesheet" href="style.css"> <!-- the below three lines are a fix to get html5 semantic elements working in old versions of internet explorer--> <!--[if lt ie 9]> <script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.js"></script> <![endif]--> </head> <body> <!-- here is our main header that is used ...
...And 5 more matches
Client-side storage - Learn web development
however, this does not mean cookies are completely useless on the modern-day web — they are still used commonly to store data
related to user personalization and state, e.g.
...this state will also persist across page/browser
reloads, because the name is stored in web storage.
...if we don't do this, then the personalized greeting will not persist across page
reloads.
...And 5 more matches
Drawing graphics - Learn web development
in a real example you'd want to
relate the fallback content to the canvas content.
... parameters 2 and 3 define the coordinates of the top left corner of the area you want to cut out of the loaded image,
relative to the top-left corner of the image itself.
... parameters 6 and 7 define the coordinates at which you want to draw the top-left corner of the cut-out portion of the image,
relative to the top-left corner of the canvas.
...And 5 more matches
Overview of Mozilla embedding APIs
implemented interfaces: nsiservicemanager
related interfaces: nsishutdownlistener nsmemory the nsmemory service provides the global memory manager implementation for xpcom.
... in addition to memory allocation and
release, this service provides low memory notifications, called a memory pressure observers, which are notified when memory is low - thus allowing cached resources to be freed.
...contract-id: ns_memory_contractid implemented interfaces: nsimemory
related interfaces: nsiobserver nscomponentmanager the nscomponentmanager service is responsible for creating new instances of xpcom components.
...And 5 more matches
HTML parser threading
(for historical reasons, it also contains un
related fragment parsing code that should be refactored into a separate class in due course.) nshtml5streamparser contains the code for dealing with data from the network.
...however, if they
released on the parser thread, nshtml5streamparser could be deleted from the parser thread, which would lead to all sorts of badness, because nshtml5streamparser has fields that hold objects that aren't safe to
release except from the main thread.
...nshtml5refptr sends runnables back to the main thread to call
release on nshtml5streamparser on the main thread.
...And 5 more matches
Localization content best practices
note on localizers mozilla localizers are volunteers with very diverse technical skills: some of them
rely exclusively on translation tools, others prefer to work directly with text editors and don't have problems working with vcs systems.
... if a string is tied to an accesskey or a tooltip, use string ids that highlight this
relation: neweventbtn.label = add event neweventbtn.accesskey = a neweventbtn.tooltip = add a new event don't duplicate ids if you're adding new strings, check that you're not duplicating an existing id.
...sometimes they coincide with english, but they ra
rely do in other languages.
...And 5 more matches
An overview of NSS Internals
nss offers lots of functionality; we'll walk through the list of modules, design principles, and important
relevant standards.
...this strategy allows nss to work with many hardware devices (e.g., to speed up the calculations required for cryptographic operations, or to access smartcards that secu
rely protect a secret key) and software modules (e.g., to allow to load such modules as a plugin that provides additional algorithms or stores key or trust information) that implement the pkcs#11 interface.
...a certificate contains lots of other details; for example, it contains a signature by a third party that expresses trust in the ownership
relationship for the certificate.
...And 5 more matches
NSS tools : certutil
the command option -h will list all the command options available and their
relevant arguments.
...the format of the validity-time argument is yymmddhhmmss[+hhmm|-hhmm|z], which allows offsets to be set
relative to the validity end time.
... creating new security databases certificates, keys, and security modules
related to managing certificates are stored in three
related databases: * cert8.db or cert9.db * key3.db or key4.db * secmod.db or pkcs11.txt these databases must be created before certificates or keys can be generated.
...And 5 more matches
XPCOM array guide
in the case of scriptable arrays like nsiarray however, the enumeration mechanism is often preferred because it avoids the addref /
release overhead that comes from accessing each object.
...enumerators are used to access the elements in an ordered way, without
relying on the underlying array type.
...when the object goes out of scope, all its members are
released.
...And 5 more matches
Starting WebLock
this is where a new service that manages sets of
related data comes in handy.
...if you do not, the component will be created and then
released after the notification, which may cause the component to be deleted.
...a
related interface called nsilocalfile provides access to operations specific to local files, but the nsifile functionality is adequate for the weblock component.
...And 5 more matches
nsIFaviconService
apageuri); obsolete since gecko 22.0 nsiuri getfaviconimageforpage(in nsiuri apageuri); obsolete since gecko 22.0 nsiuri getfaviconlinkforicon(in nsiuri afaviconuri); boolean isfailedfavicon(in nsiuri afaviconuri); void removefailedfavicon(in nsiuri afaviconuri); void setandloadfaviconforpage(in nsiuri apageuri, in nsiuri afaviconuri, in boolean aforce
reload, in unsigned long afaviconloadtype, [optional] in nsifavicondatacallback acallback); obsolete since gecko 22.0 void setfavicondata(in nsiuri afaviconuri, [const,array,size_is(adatalen)] in octet adata, in unsigned long adatalen, in autf8string amimetype, in prtime aexpiration); obsolete since gecko 22.0 void setfavicondatafromdataurl(in nsiuri afaviconuri, in astring adataurl...
...use aforce
reload to force a
reload of the data.
...void setandloadfaviconforpage( in nsiuri apageuri, in nsiuri afaviconuri, in boolean aforce
reload, in unsigned long afaviconloadtype, in nsifavicondatacallback acallback optional from gecko 2.0 ); parameters apageuri uri of the page whose favicon is being set.
...And 5 more matches
nsINavHistoryQuery
begintimereference long one of the constants time_
relative_* which indicates how to interpret the corresponding begin time value.
... endtimereference long one of the constants time_
relative_* which indicates how to interpret the corresponding end time value.
... constants constant value description time_
relative_epoch 0 default value.
...And 5 more matches
HTMLLinkElement - Web APIs
the htmllinkelement interface represents reference information for external resources and the
relationship of those resources to a document and vice-versa (corresponds to <link> element; not to be confused with <a>, which is represented by htmlancho
relement).
... <div id="interfacediagram" style="display: inline-block; position:
relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25...
... htmllinkelement.
rel is a domstring representing the forward
relationship of the linked resource from the document to the resource.
...And 5 more matches
MouseEvent - Web APIs
<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/event" target="_top"><rect x="1" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="38.5" y="30" font...
... mouseevent.movementx read only the x coordinate of the mouse pointer
relative to the position of the last mousemove event.
... mouseevent.movementy read only the y coordinate of the mouse pointer
relative to the position of the last mousemove event.
...And 5 more matches
RTCStatsType - Web APIs
values candidate-pair an rtcicecandidatepairstats object providing statistics
related to an rtcicetransport.
... certificate an rtccertificatestats object providing statistics
related to a certificate being used by an rtcicetransport.
... csrc an rtccontributingsourcestats object which contains statistics
related to a contributing source (csrc) that contributed to an inbound rtp stream.
...And 5 more matches
WakeLockSentinel - Web APIs
the wakelocksentinel interface of the screen wake lock api provides a handle to the underlying platform wake lock and can be manually
released and reacquired.
... an acquired wakelocksentinel can be
released manually via the
release() method, or automatically via the platform wake lock.
...
releasing all wakelocksentinel instances of a given wake lock type will cause the underlying platform wake lock to be
released.
...And 5 more matches
WebXR Device API - Web APIs
positions in webxr are always expressed in
relation to a particular xrspace at the time at which a particular xframe takes place.
... xrreferencespace a subclass of xrspace which is used to identify a spatial
relationship in
relation to the user's physical environment.
...each view has an offset used to shift the position of the view
relative to the camera, in order to allow for creating stereographic effects.
...And 5 more matches
Web Locks API - Web APIs
the web locks api allows scripts running in one tab or worker to asynchronously acquire a lock, hold it while work is performed, then
release it.
... the lock is automatically
released when the task completes.
... await do_something(); await do_something_else(); // now the lock will be
released.
...And 5 more matches
Coordinate systems - CSS: Cascading Style Sheets
when specifying the location of a pixel in a graphics context (just like when specifying coordinate systems in algebra), its position is defined
relative to a fixed point in the context.
... for example, when a mouse event occurs, the position of the mouse as specified in the event's offsetx and offsety properties are given
relative to the top-left corner of the node to which the event has been delivered.
... on a desktop computer, for example, the mouseevent.clientx and mouseevent.clienty properties indicate the position of the mouse cursor at the moment the event occurred,
relative to the top-left corner of the browser window.
...And 5 more matches
font-weight - CSS: Cascading Style Sheets
syntax /* keyword values */ font-weight: normal; font-weight: bold; /* keyword values
relative to the parent */ font-weight: lighter; font-weight: bolder; /* numeric keyword values */ font-weight: 100; font-weight: 200; font-weight: 300; font-weight: 400;// normal font-weight: 500; font-weight: 600; font-weight: 700;// bold font-weight: 800; font-weight: 900; /* global values */ font-weight: inherit; font-weight: initial; font-weight: unset; the font-weight property is specified u...
... lighter one
relative font weight lighter than the parent element.
... note that only four font weights are considered for
relative weight calculation; see the meaning of
relative weights section below.
...And 5 more matches
Writing forward-compatible websites - Developer guides
this page explains how to write websites that do not break when new browser versions are
released.
...if they don't, you can't
rely on that library not breaking in the future.
...for example, if you have tested that your default code path runs properly in firefox aurora but firefox beta and the latest
release have a bug that make your default code path fail, it is ok to treat the firefox version number that is in aurora at the moment of testing as "current", and consider the beta version as a "past" version even though it hasn't been
released to the general public yet.
...And 5 more matches
<input type="text"> - HTML: Hypertext Markup Language
since character widths vary, this may or may not be exact and should not be
relied upon to be so; the resulting input may be narrower or wider than the specified number of characters, depending on the characters and the font (font settings in use).
...it can be used on any editable content, but here we consider specifics
related to the use of spellcheck on <input> elements.
...it's far too easy for someone to make adjustments to the html that allow them to bypass the validation, or to remove it enti
rely.
...And 5 more matches
Web Components
reference custom elements customelementregistry contains functionality
related to custom elements, most notably the customelementregistry.define() method used to register new custom elements so they can then be used in your document.
... css pseudo-classes pseudo-classes
relating specifically to custom elements: :defined: matches any element that is defined, including built in elements and custom elements defined with customelementregistry.define()).
... css pseudo-elements pseudo-elements
relating specifically to custom elements: ::part: represents any element within a shadow tree that has a matching part attribute.
...And 5 more matches
XUL Migration Guide - Archive of obsolete content
if your add-on only needs a little help from those techniques, and can accomplish most of what it needs using the supported apis, then it might still be worth migrating: we'll add more supported apis in future
releases to meet important use cases.
...in that directory you can keep your "content", "locale", and "skin" subdirectories: this allows you to refer to objects in these directories from "chrome.manifest" using a
relative path, like "chrome/content".
...because we expect to keep these apis compatible as new versions of firefox are
released, we call them the "supported" apis.
...And 4 more matches
Proxy UI - Archive of obsolete content
camino configured in os (networking preferences) (recently added - some support for reading os and account settings.)ui elements preferences panel overview the ui is based on selecting a proxy mode, then filling out any additional needed information in "
related" ui.
...the preference changes selecting the proxy "mode" all product's proxy preference panels share a basic design: a radio button that selects the proxy mode, then "
related proxy mode" ui when needed.
... "
related" ui elements only two proxy modes have
related ui.
...And 4 more matches
Template Builder Interface - Archive of obsolete content
for rdf datasources, the builder's refresh method, however, will
reload the datasources.
...to summarize, the refresh method
reloads the data, whereas the rebuild method reconstructs the content.
...this is convenient when you want to simply add a new datasource to an existing template without
reloading existing data.
...And 4 more matches
panel - Archive of obsolete content
« xul reference home [ examples | attributes | properties | methods |
related ] a panel is a used as a temporary floating popup window that may contain any type of content.
...if anchored, the child window maintains its
relative position to its parent window.
... position type: string the position attribute determines where the popup appears
relative to the element the user clicked to invoke the popup.
...And 4 more matches
Theme changes in Firefox 2 - Archive of obsolete content
file description of change browser/bookmarks/addbookmark.css updated to include microsummary-
related css changes.
... browser/bookmarks/bookmarksproperties.css new file; includes microsummary-
related css.
... changes in browser bookmarks/addbookmark.css the addbookmarks.css file should have the following lines added to the top: @namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); @namespace html url("http://www.w3.org/1999/xhtml"); some microsummary-
related css also needs to be added, to provide formatting for the microsummary picker.
...And 4 more matches
RDF in Mozilla FAQ - Archive of obsolete content
the datasource will remain "cached" until the last reference to the datasource is
released.
... how do i
reload an rdf/xml datasource?
... you can force an rdf/xml datasource (or any datasource that supports nsirdfremotedatasource) to
reload using the refresh() method of nsirdfremotedatasource.
...And 4 more matches
What is a URL? - Learn web development
each web server has its own rules regarding parameters, and the only
reliable way to know if a specific web server is handling parameters is by asking the web server owner.
... note: there are some extra parts and some extra rules regarding urls, but they are not
relevant for regular users or web developers.
... the html language — which will be discussed later on — makes extensive use of urls: to create links to other documents with the <a> element; to link a document with its
related resources through various elements such as <link> or <script>; to display media such as images (with the <img> element), videos (with the <video> element), sounds and music (with the <audio> element), etc.; to display other html documents with the <iframe> element.
...And 4 more matches
Advanced form styling - Learn web development
<input type="color"> date-
related controls such as <input type="datetime-local"> <input type="range"> <input type="file"> <progress> and <meter> let's first talk about the appearance property, which is pretty useful for making all of the above more stylable.
...let's start by unstyling the original check boxes: input[type="checkbox"] { -webkit-appearance: none; appearance: none; } we can use the :checked and :disabled pseudo-classes to change the appearance of our custom checkbox as its state changes: input[type="checkbox"] { position:
relative; width: 1em; height: 1em; border: 1px solid gray; /* adjusts the position of the checkboxes on the text baseline */ vertical-align: -2px; /* set here so that windows' high-contrast mode can override */ color: green; } input[type="checkbox"]::before { content: "✔"; position: absolute; font-size: 1.2em; right: -1px; top: -0.3em; visibility: hidden; } input[type="c...
... take the following example, which shows a number of the "ugly" form features in action: this example has the following css applied to it: body { font-family: 'josefin sans', sans-serif; margin: 20px auto; max-width: 400px; } form > div { margin-bottom: 20px; } select { -webkit-appearance: none; appearance: none; } .select-wrapper { position:
relative; } .select-wrapper::after { content: "▼"; font-size: 1rem; top: 6px; right: 10px; position: absolute; } button, label, input, select, progress, meter { display: block; font-family: inherit; font-size: 100%; padding: 0; margin: 0; box-sizing: border-box; width: 100%; padding: 5px; height: 30px; } input[type="text"], input[type="datetime-local"], input[type="co...
...And 4 more matches
What’s in the head? Metadata in HTML - Learn web development
specifying a description that includes keywords
relating to the content of your page is useful as it has the potential to make your page appear higher in
relevant searches performed in search engines (such activities are termed search engine optimization, or seo.) active learning: the description's use in search engines the description is also used on search engine result pages.
... note: in google, you will see some
relevant subpages of mdn web docs listed below the main homepage link — these are called sitelinks, and are configurable in google's webmaster tools — a way to make your site's search results better in the google search engine.
...for example, the keyword <meta> element (<meta name="keywords" content="fill, in, your, keywords, here">) — which is supposed to provide keywords for search engines to determine
relevance of that page for different search terms — is ignored by search engines, because spammers were just filling the keyword list with hundreds of keywords, biasing results.
...And 4 more matches
Third-party APIs - Learn web development
this typically involves first linking to a javascript library available on the server via a <script> element, as seen in our mapquest example: <script src="https://api.mqcdn.com/sdk/mapquest-js/v1.3.2/mapquest.js"></script> <link type="text/css"
rel="stylesheet" href="https://api.mqcdn.com/sdk/mapquest-js/v1.3.2/mapquest.css"/> you can then start using the objects available in that library.
... other apis may require that you include the key in a slightly different way, but the pattern is
relatively similar for most of them.
... adding a custom marker adding a marker (icon) at a certain point on the map is easy — you just use the l.marker() method (which seems to be documented in the
related leaflet.js docs).
...And 4 more matches
Getting started with React - Learn web development
familiarity with both html and javascript will help you to learn jsx, and better identify whether bugs in your application are
related to javascript or to the more specific domain of react.
...this file is not unique to react applications; create-react-app me
rely populates it.
...this file contains our first component, app, and a few other lines of code: import react from 'react'; import logo from './logo.svg'; import './app.css'; function app() { return ( <div classname="app"> <header classname="app-header"> <img src={logo} classname="app-logo" alt="logo" /> <p> edit <code>src/app.js</code> and save to
reload.
...And 4 more matches
Working with Svelte stores - Learn web development
we will also see how to develop our own custom store to persist the todo information to web storage, allowing our todos to persist over page
reloads.
... sometimes, your app state will need to be accessed by multiple components that are not hierarchically
related, or by a regular javascript module.
... moreover, when your app becomes complicated and your component hierarchy gets complex, it might become too difficult for components to
relay data between each other.
...And 4 more matches
Handling common HTML and CSS problems - Learn web development
linters can generally be customized to be stricter or more
relaxed in their error/warning reporting.
... in the search packages text field, type "lint" and press enter/return to search for linting-
related packages.
...install this first (using the install button), as other linters
rely on it to work.
...And 4 more matches
Gecko SDK
for gecko versions 2.0 and higher, you must recompile your component for each
release as cross-version compatibility is no longer supported.
... in addition to the below versions, you can find other versions (including beta) here: xulrunner
releases (files include "sdk" in the name).
... the sdk follows the same
release schedule as firefox/thunderbird.
...And 4 more matches
IME handling guide
when composition completely ends, it's unregistered from the list (and
released automatically).
... when editorbase receives an ecompositionend (dom "compositionend") event, it
releases the stored textcomposition instance.
...when the editor or windowless plugin loses focus, it notifies widget of ime losing focus, stops observing everything and is
released.
...And 4 more matches
Bootstrapping a new locale
when a localization team is registered and your hg repository is set up for a locale, you can then clone the existing mozilla
release branch (i.e.
... where active development of the upcoming
release of firefox occurs) and then begin the necessary work for translation.
... you will need to "hg clone" the existing
release branch for mozilla so you have all the files locally for you to begin localization.
...And 4 more matches
Localizing with Koala
url: http://hg.mozilla.org/
releases/mozilla-1.9.2.
...koala will now try to clone the en-us source repository from http://hg.mozilla.org/
releases/mozilla-1.9.2.
...the easy way involves opening the console and issuing the following commands: c:\users\stas> cd c:\mozilla\l10n\application\firefox c:\mozilla\l10n\application\firefox> rmdir 3.6 c:\mozilla\l10n\application\firefox> hg clone http://hg.mozilla.org/
releases/mozilla-1.9.2 3.6 requesting all changes adding changesets adding manifests adding file changes added 33099 changesets with 158636 changes to 50664 files (+9 heads) updating working directory 40357 files updated, 0 files merged, 0 files removed, 0 files unresolved configure the locale locale id: x-testing (put your locale's code) version: 3.6 location: choose the folder where you want t...
...And 4 more matches
Uplifting a localization from Central to Aurora
here some tips and tricks for syncing up both l10n-central and
releases/l10n/mozilla-aurora at the same time en-us goes from central to aurora.
...the
releases page on wikimo has the upcoming dates.
...let's pretend it's at
releases/l10n-mozilla-aurora/ab-cd here's how we do it: # set up a new local clone of your central repo hg clone l10n-central/ab-cd workrepo cd workrepo # pull in the changesets you have on aurora hg pull -r default ../
releases/l10n/mozilla-aurora/ab-cd now, there are two routes forward: 1) things are pretty silent.
...And 4 more matches
Scroll-linked effects
this article discusses scroll-linked effects, their effect on performance,
related tools, and possible mitigation techniques.
... <body style="height: 5000px" onscroll="document.getelementbyid('toolbar').style.top = math.max(100, window.scrolly) + 'px'"> <div id="toolbar" style="position: absolute; top: 100px; width: 100px; height: 20px; background-color: green"></div> </body> this implementation of sticky positioning
relies on the scroll event listener to reposition the "toolbar" div.
... as the scroll event listener runs in the javascript on the browser's main thread, it will be asynchronous
relative to the user-visible scrolling.
...And 4 more matches
sslerr.html
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 secu
rely.
... ssl_error_us_only_server -12287 "unable to communicate secu
rely.
... ssl_error_no_cypher_overlap -12286 "cannot communicate secu
rely with peer: no common encryption algorithm(s)." the local and remote systems share no cipher suites in common.
...And 4 more matches
certutil
the format of the validity-time argument is yymmddhhmmss[+hhmm|-hhmm|z], which allows offsets to be set
relative to the validity end time.
... creating new security databases certificates, keys, and security modules
related to managing certificates are stored in three
related databases: o cert8.db or cert9.db o key3.db or key4.db o secmod.db or pkcs11.txt these databases must be created before certificates or keys can be generated.
... certutil -a -n certname -t trustargs -d [sql:]directory [-a] [-i input-file] for example: $ certutil -a -n "cn=my ssl certificate" -t "u,u,u" -d sql:/home/my/sharednssdb -i /home/example-certs/cert.cer a
related command option, -e, is used specifically to add email certificates to the certificate database.
...And 4 more matches
Hacking Tips
this page list a few tips to help you investigate issues
related to spidermonkey.
...it is separated in 2 parts, one section
related to debugging and another section
related to drafting optimizations.
... many of these tips only apply to debug builds of the js shell; they will not function in a
release build.
...And 4 more matches
SpiderMonkey 17
these
release notes are an incomplete draft and were initially seeded from the (now-defunct) 1.8.8
release notes, which were themselves seeded from the 1.8.5
release notes, so lots of the information here isn't actually new to spidermonkey 17.
... the mozilla javascript team is pleased to announce the
release of spidermonkey 17.
...it continues to improve performance over previous spidermonkey
releases, with ongoing jit compilation work and with the introduction of type inference to enable faster jitted code.
...And 4 more matches
mozIStorageConnection
able(in string atablename, in string atableschema); mozistoragependingstatement executeasync([array, size_is(anumstatements)] in mozistoragebasestatement astatements, in unsigned long anumstatements, [optional] in mozistoragestatementcallback acallback ); void executesimplesql(in autf8string asqlstatement); boolean indexexists(in autf8string aindexname); void p
reload(); obsolete since gecko 1.9 void removefunction(in autf8string afunctionname); mozistorageprogresshandler removeprogresshandler(); void rollbacktransaction(); void setgrowthincrement(in print32 aincrement, in autf8string adatabasename); mozistorageprogresshandler setprogresshandler(in print32 agranularity, in mozistorageprogresshandler ahandler);...
... note: this is not
reliable if you are using asynchronous statements or if you are using the connection on multiple threads.
... note: this is not
reliable if you are using asynchronous statements or if you are using the connection on multiple threads.
...And 4 more matches
nsIAccessible
relations many accessibles are linked with each other, for example, if one accessible gives the accessible name for another accessible (for example, html:label and html control) then these accessibles are
related, please refer to
relations documentation for more information.
... you can get
related accessibles by methods nsiaccessible.getaccessible
related() nsiaccessible.get
relations() nsiaccessible.get
relation() and nsiaccessible.
relationscount.
... getaccessible
related this method returns an accessible
related to this one by the given
relation type.
...And 4 more matches
nsILivemarkService
toolkit/components/places/public/nsilivemarkservice.idlscriptable this interface is used to create and
reload livemarks.
...iuri feeduri, in long index); long long createlivemarkfolderonly(in long long folder, in astring name, in nsiuri siteuri, in nsiuri feeduri, in long index); nsiuri getfeeduri(in long long container); long long getlivemarkidforfeeduri(in nsiuri afeeduri); nsiuri getsiteuri(in long long container); boolean islivemark(in long long folder); void
reloadalllivemarks(); void
reloadlivemarkfolder(in long long folderid); void setfeeduri(in long long container, in nsiuri feeduri); void setsiteuri(in long long container, in nsiuri siteuri); void start(); void stopupdatelivemarks(); methods createlivemark() creates a new livemark.
...
reloadalllivemarks() this method
reloads all livemark subscriptions, whether or not they have expired.
...And 4 more matches
Using nsIDirectoryService
different providers can provide certain locations that are
relevant to them.
... for example, in seamonkey, the profile service is a provider for locations that are
relative to the current profile.
...the location of the components folder and the components registry, among other things, are
relative to the /bin directory.
...And 4 more matches
Using the Multiple Accounts API
it is also responsible for the creation of any new account-
related objects.
...an account is me
rely a container to bind incoming servers and identities together.
...news.mozilla.org +- netscape.public.mozilla.announce +- netscape.public.mozilla.mail-news
relevant api calls: nsimsgaccount.incomingserver nsimsgaccountmanager.allservers: a list of all servers held by all accounts.
...And 4 more matches
Using COM from js-ctypes
basis and reference for this article bugzilla :: bug 738501 - implement ability to create windows shortcuts from javascript - comment 4
relavent topic bugzilla :: bug 505907 - support c++ calling from jsctypes converting com code to c code to convert com code to js-ctypes, we need to write c++ vtable pointers in c.
... #include <sapi.h> int main(void) { if (succeeded(coinitialize(null))) { ispvoice* pvoice = null; hresult hr = cocreateinstance(clsid_spvoice, null, clsctx_all, iid_ispvoice, (void**)&pvoice); if (succeeded(hr)) { pvoice->speak(l"hello, firefox!", spf_default, null); pvoice->
release(); } } // msdn documentation says that even if coinitalize fails, counitialize // must be called couninitialize(); return 0; } to run the code, save it as test.cpp, and run following command in the directory (needs visual studio).
...nclude <sapi.h> int main(void) { if (succeeded(coinitialize(null))) { struct ispvoice* pvoice = null; hresult hr = cocreateinstance(&clsid_spvoice, null, clsctx_all, &iid_ispvoice, (void**)&pvoice); if (succeeded(hr)) { pvoice->lpvtbl->speak(pvoice, l"hello, firefox!", 0, null); pvoice->lpvtbl->
release(pvoice); } } // msdn documentation says that even if coinitalize fails, counitialize // must be called couninitialize(); return 0; } to run the code, save it as test.c, and run following command in the directory.
...And 4 more matches
Mozilla
any performance metrics gathered by such builds are largely un
related to what would be found in a
release browser.
... continuous integration when you push a commit to mozilla-central or a
related repository, it initiates a large chain of builds and tests across multiple types of infrastructure.
... firefox operational information database: sqlite a large amount of operational information about websites visited and browser configuration is stored in
relational databases in sqlite used by firefox.
...And 4 more matches
Version, UI, and Status Information - Plugins
you can also use the status line to notify the user of plug-in-
related information.
... the browser and plug-in api major version numbers represent code
release numbers, and their minor version numbers represent point
release numbers.
... for example, plug-in api version 6.03 has a major version number of 6 and a point
release number of 3.
...And 4 more matches
Document - Web APIs
<div id="interfacediagram" style="display: inline-block; position:
relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30"...
... document.exitpointerlock()
release the pointer lock.
... document.
releasecapture()
releases the current mouse capture if it's on an element in this document.
...And 4 more matches
Drag Operations - Web APIs
the second and third arguments to the setdragimage() method are offsets where the image should appear
relative to the mouse pointer.
...the move operation is used to indicate that the data being dragged will be moved, and the link operation is used to indicate that some form of
relationship or connection will be created between the source and drop locations.
...a
related property, dropeffect, should be set within one of these events to specify which single operation should be performed.
...And 4 more matches
Timing element visibility with the Intersection Observer API - Web APIs
.ad { height: 96px; padding: 6px; border-color: #555; border-style: solid; border-width: 1px; } .ad:not(:last-child) { margin-bottom: 8px; } .ad h2 { margin-top: 0; } .ad div { position:
relative; float: right; padding: 0 4px; height: 20px; width: 120px; font-size: 14px; bottom: 30px; border: 1px solid black; background-color: rgba(255, 255, 255, 0.5); } there's nothing magic in here.
... next we set up the options for the intersectionobserver which will monitor target elements (ads, in our case) for intersection changes
relative to the document.
...since intersection observer only cares about the intersection between the targeted elements and the intersection root, and not the tab's visibility (which is a different issue enti
rely), we need to use the page visibility api to detect these tab switches and disable our timers for the duration.
...And 4 more matches
KeyboardEvent - Web APIs
<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/event" target="_top"><rect x="1" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="38.5" y="30" font...
... keyup a key has been
released.
... when the user
releases the key, the keyup event is sent.
...And 4 more matches
Pointer events - Web APIs
tangentialpressure the normalized tangential pressure of the pointer input (also known as bar
rel pressure or cylinder stress) in the range -1 to 1, where 0 is the neutral position of the control.
... pointercancel onpointercancel a browser fires this event if it concludes the pointer will no longer be able to generate events (for example the
related device is deactived).
... lostpointercapture onlostpointercapture fired after pointer capture is
released for a pointer.
...And 4 more matches
Using Touch Events - Web APIs
a touch point's properties include a unique identifier, the touch point's target element as well as the x and y coordinates of the touch point's position
relative to the viewport, page, and screen.
...the state changes are starting contact with a touch surface, moving a touch point while maintaining contact with the surface,
releasing a touch point and canceling a touch event.
... together, these interfaces define a
relatively low-level set of features, yet they support many kinds of touch-based interaction, including the familiar multi-touch gestures such as multi-finger swipe, rotation, pinch and zoom.
...And 4 more matches
Spaces and reference spaces: Spatial tracking in WebXR - Web APIs
representing a position using a reference space as covered in defining spatial
relationships with reference spaces in geometry and reference spaces in webxr, reference spaces establish a local coordinate system which is offset from another coordinate system that is itself defined by some other space.
... describing a position
relative to a space there are two scenarios in which you may need to describe a position and/or orientation
relative to a space.
... poses once your reference space or spaces are established for the various key objects in the scene, you will have times when you need to describe another position
relative to the origin of a particular reference space.
...And 4 more matches
Web Authentication API - Web APIs
this resolves significant security problems
related to phishing, data breaches, and attacks against sms texts or other second-factor authentication methods while at the same time significantly increasing ease of use (since users don't have to manage dozens of increasingly complicated passwords).
... in order to understand how the create() and get() methods fit into the bigger picture, it is important to understand that they sit between two components that are outside the browser: server - the web authentication api is intended to register new credentials on a server (also referred to as a service or a
relying party) and later use those same credentials on that same server to authenticate a user.
... server sends challenge, user info, and
relying party info - the server sends a challenge, user information, and
relying party information to the javascript program.
...And 4 more matches
Window - Web APIs
<div id="interfacediagram" style="display: inline-block; position:
relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/window" target="_top"><rect x="1" y="1" width="75" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="38.5" y="30" ...
... window.performance read only returns a performance object, which includes the timing and navigation attributes, each of which is an object providing performance-
related data.
... window.orientation read only returns the orientation in degrees (in 90 degree increments) of the viewport
relative to the device's natural orientation.
...And 4 more matches
Web APIs
filesystemfileentry filesystemflags filesystemsync focusevent fontface fontfaceset fontfacesetloadevent formdata formdataentryvalue formdataevent fullscreenoptions g gainnode gamepad gamepadbutton gamepadevent gamepadhapticactuator geolocation geolocationcoordinates geolocationposition geolocationpositionerror geometryutils gestureevent globaleventhandlers gyroscope h htmlancho
relement htmlareaelement htmlaudioelement htmlb
relement htmlbaseelement htmlbasefontelement htmlbodyelement htmlbuttonelement htmlcanvaselement htmlcollection htmlcontentelement htmldlistelement htmldataelement htmldatalistelement htmldetailselement htmldialogelement htmldivelement htmldocument htmlelement htmlembedelement htmlfieldsetelement htmlfontelement htmlformcontrolscollection htmlfor...
...melement htmlframesetelement htmlh
relement htmlheadelement htmlheadingelement htmlhtmlelement htmlhyperlinkelementutils htmliframeelement htmlimageelement htmlinputelement htmlisindexelement htmlkeygenelement htmllielement htmllabelelement htmllegendelement htmllinkelement htmlmapelement htmlmarqueeelement htmlmediaelement htmlmenuelement htmlmenuitemelement htmlmetaelement htmlmete
relement htmlmodelement htmlolistelement htmlobjectelement htmloptgroupelement htmloptionelement htmloptionscollection htmlorforeignelement htmloutputelement htmlparagraphelement htmlparamelement htmlpictureelement htmlpreelement htmlprogresselement htmlquoteelement htmlscriptelement htmlselectelement htmlshadowelement htmlslotelement htmlsourceelement htmlspanelement htmlstyleelement htmltablecapti...
...trackevent mediatrackconstraints mediatracksettings mediatracksupportedconstraints merchantvalidationevent messagechannel messageevent messageport metadata mimetype mimetypearray mouseevent mousescrollevent mousewheelevent mutationevent mutationobserver mutationobserverinit mutationrecord n ndefmessage ndefreader ndefreadingevent ndefrecord ndefwriter namelist namednodemap navigationp
reloadmanager navigator navigatorconcurrenthardware navigatorid navigatorlanguage navigatoronline navigatorplugins navigatorstorage networkinformation node nodefilter nodeiterator nodelist nondocumenttypechildnode notation notification notificationaction notificationevent notifyaudioavailableevent o oes_element_index_uint oes_fbo_render_mipmap oes_standard_derivatives oes_texture_float o...
...And 4 more matches
Alternative style sheets - CSS: Cascading Style Sheets
an example: specifying the alternative stylesheets the alternate stylesheets are commonly specified using a <link> element with
rel="alternate stylesheet" and title="..." attributes.
... for example: <link href="reset.css"
rel="stylesheet" type="text/css"> <link href="default.css"
rel="stylesheet" type="text/css" title="default style"> <link href="fancy.css"
rel="alternate stylesheet" type="text/css" title="fancy"> <link href="basic.css"
rel="alternate stylesheet" type="text/css" title="basic"> in this example, the styles "default style", "fancy", and "basic" will be listed in the page style submenu, with "default style" pre-selected.
... details any stylesheet in a document falls into one of the following categories: persistent (no
rel="alternate", no title=""): always applies to the document.
...And 4 more matches
background-position - CSS: Cascading Style Sheets
the position is
relative to the position layer set by background-origin.
...a position defines an x/y coordinate, to place an item
relative to the edges of an element's box.
...this specifies the x coordinate
relative to the left edge, with the y coordinate set to 50%.
...And 4 more matches
Adding captions and subtitles to HTML5 video - Developer guides
if you are not interested in this, and just want to get straight into the javascript and more
relevant css, skip to the subtitle implementation section.
...we actually have our subtitles in three different languages — english, german, and spanish — so we will reference all three of the
relevant vtt files by adding <track> elements inside our html5 <video> element: <video id="video" controls p
reload="metadata"> <source src="video/sintel-short.mp4" type="video/mp4"> <source src="video/sintel-short.webm" type="video/webm"> <track label="english" kind="subtitles" srclang="en" src="captions/vtt/sintel-en.vtt" default> <track label="deutsch" kind="subtitles" srclang="de" src...
... src is assigned a valid url pointing to the
relevant webvtt subtitle file in each case.
...And 4 more matches
Video player styling basics - Developer guides
p
reliminary modifications from the original example this section summarises the modifications that were made to the original video player example to make the styling task easier, before the bulk of the work was started.
...ogress" value="0" min="0"> <span id="progress-bar"></span> </progress> </div> <button id="mute" type="button" data-state="mute">mute/unmute</button> <button id="volinc" type="button" data-state="volup">vol+</button> <button id="voldec" type="button" data-state="voldown">vol-</button> <button id="fs" type="button" data-state="go-fullscreen">fullscreen</button> </div>
related css alteration the previous article simply set the display property of the video controls to block in order to display them.
... note: in some cases some basic css is omitted from the code examples here as its use is either obvious or not specifically
relevant to styling the video player.
...And 4 more matches
Audio and Video Delivery - Developer guides
html audio <audio controls p
reload="auto"> <source src="audiofile.mp3" type="audio/mpeg"> <!-- fallback for browsers that don't support mp3 --> <source src="audiofile.ogg" type="audio/ogg"> <!-- fallback for browsers that don't support audio tag --> <a href="audiofile.mp3">download audio</a> </audio> the code above will create an audio player that attempts to p
reload as much audio as possible for smooth playback.
... note: the p
reload attribute may be ignored by some mobile browsers.
... note: currently safari does not support dash although dash.js will work on newer versions of safari scheduled for
release with osx yosemite.
...And 4 more matches
<a>: The Anchor element - HTML: Hypertext Markup Language
rel the
relationship of the linked url as space-separated link types.
... note: when using target, add
rel="noreferrer noopener" to avoid exploitation of the window.opener api; note: in newer browser versions (e.g.
... firefox 79+) setting target="_blank" on <a> elements implicitly provides the same
rel behavior as setting
rel="noopener".
...And 4 more matches
<input type="tel"> - HTML: Hypertext Markup Language
since character widths vary, this may or may not be exact and should not be
relied upon to be so; the resulting input may be narrower or wider than the specified number of characters, depending on the characters and the font (font settings in use).
... it's far too easy for someone to make adjustments to the html that allow them to bypass the validation, or to remove it enti
rely.
... it's also possible for someone to simply bypass your html enti
rely and submit the data directly to your server.
...And 4 more matches
<input type="time"> - HTML: Hypertext Markup Language
this property has some strange effects across browsers, so is not completely
reliable.
...this is helpful (assuming the time input is fully supported by the user agent), but you can't enti
rely
rely on the value to be a proper time string, since it might be an empty string (""), which is allowed.
... div { margin-bottom: 10px; position:
relative; } input[type="number"] { width: 100px; } input + span { padding-right: 30px; } input:invalid+span:after { position: absolute; content: '✖'; padding-left: 5px; } input:valid+span:after { position: absolute; content: '✓'; padding-left: 5px; } the result here is that: only times between 12:00 and 18:00 will be seen as valid; times outside that range will be denoted ...
...And 4 more matches
<video>: The Video Embed element - HTML: Hypertext Markup Language
crossorigin this enumerated attribute indicates whether to use cors to fetch the
related image.
... disableremoteplayback a boolean attribute used to disable the capability of remote playback in devices that are attached using wired (hdmi, dvi, etc.) and wi
reless technologies (miracast, chromecast, dlna, airplay, etc).
... p
reload this enumerated attribute is intended to provide a hint to the browser about what the author thinks will lead to the best user experience with regards to what content is loaded before the video is played.
...And 4 more matches
itemprop - HTML: Hypertext Markup Language
onic white 60l refrigerator</span> <img src="panasonic-fridge-60l-white.jpg" alt=""> <div itemprop="aggregaterating" itemscope itemtype="http://schema.org/aggregaterating"> <meter itemprop="ratingvalue" min=0 value=3.5 max=5>rated 3.5/5</meter> (based on <span itemprop="reviewcount">11</span> customer reviews) </div> </div> similarly, for date- and time-
related data, the time element and its datetime attribute can be used.
... an item with two properties, "favorite-color" and "favorite-fruit", both set to the value "orange" <div itemscope> <span itemprop="favorite-color favorite-fruit">orange</span> </div> note: there is no
relationship between the microdata and the content of the document where the microdata is marked up.
...the following two examples <figure> <img src="castle.jpeg"> <figcaption><span itemscope><span itemprop="name">the castle</span></span> (1986)</figcaption> </figure> <span itemscope><meta itemprop="name" content="the castle"></span> <figure> <img src="castle.jpeg"> <figcaption>the castle (1986)</figcaption> </figure> both have a figure with a caption, and both, completely un
related to the figure, have an item with a name-value pair with the name "name" and the value "the castle".
...And 4 more matches
Link prefetching FAQ - HTTP
the browser looks for either an html <link> or an http link: header with a
relation type of either next or prefetch.
... an example using the link tag follows: <link
rel="prefetch" href="/images/big.jpeg"> the same prefetching hint using an http link: header: link: </images/big.jpeg>;
rel=prefetch the format for the link: header is described in rfc 5988 section 5.
... some more examples follow: <link
rel="prefetch alternate stylesheet" title="designed for mozilla" href="mozspecific.css"> <link
rel="next" href="2.html"> are anchor (<a>) tags prefetched?
...And 4 more matches
A re-introduction to JavaScript (JS tutorial) - JavaScript
javascript was first
released with netscape 2 early in 1996.
... several months later, microsoft
released jscript with internet explorer 3.
... you can perform this conversion explicitly using the boolean() function: boolean(''); // false boolean(234); // true however, this is ra
rely necessary, as javascript will silently perform this conversion when it expects a boolean, such as in an if statement (see below).
...And 4 more matches
Memory Management - JavaScript
memory life cycle regardless of the programming language, the memory life cycle is pretty much always the same: allocate the memory you need use the allocated memory (read, write)
release the allocated memory when it is not needed anymore the second part is explicit in all languages.
...
release when the memory is not needed anymore the majority of memory management issues occur at this phase.
... low-level languages require the developer to manually determine at which point in the program the allocated memory is no longer needed and to
release it.
...And 4 more matches
Array.prototype.copyWithin() - JavaScript
var
relativetarget = target >> 0; var to =
relativetarget < 0 ?
... math.max(len +
relativetarget, 0) : math.min(
relativetarget, len); // steps 9-11.
... var
relativestart = start >> 0; var from =
relativestart < 0 ?
...And 4 more matches
FinalizationRegistry.prototype.unregister() - JavaScript
examples using unregister this example shows registering a target object using that same object as the unregister token, then later unregistering it via unregister: class thingy { #cleanup = label => { // ^^^^^−−−−− held value console.error( `the \`
release\` method was never called for the object with the label "${label}"` ); }; #registry = new finalizationregistry(this.#cleanup); /** * constructs a `thingy` instance.
... be sure to call `
release` when you're done with it.
... */ constructor(label) { // vvvvv−−−−− held value this.#registry.register(this, label, this); // target −−−−−^^^^ ^^^^−−−−− unregister token } /** *
releases resources held by this `thingy` instance.
...And 4 more matches
WebAssembly.Module - JavaScript
irefox for androidopera for androidsafari on iossamsung internetnode.jsmodulechrome full support 57edge full support 16firefox full support 52notes full support 52notes notes disabled in the firefox 52 extended support
release (esr).ie no support noopera full support 44safari full support 11webview android full support 57chrome android full support 57firefox android full support...
... 52notes full support 52notes notes disabled in the firefox 52 extended support
release (esr).opera android full support 43safari ios full support 11samsung internet android full support 7.0nodejs full support 8.0.0module() constructorchrome full support 57edge full support 16firefox full support 52notes full support 52notes notes disabled in the firefox 52 extende...
...d support
release (esr).ie no support noopera full support 44safari full support 11webview android full support 57chrome android full support 57firefox android full support 52notes full support 52notes notes disabled in the firefox 52 extended support
release (esr).opera android full support 43safari ios full support 11samsung internet android full support ...
...And 4 more matches
Strict mode - JavaScript
browsers not supporting strict mode will run strict mode code with different behavior from browsers that do, so don't
rely on strict mode without feature-testing for support for the
relevant aspects of strict mode.
...eval code, function code, event handler attributes, strings passed to windowtimers.settimeout(), and
related functions are entire scripts, and invoking strict mode in them works as expected.
...a leading zero syntax for the octals is ra
rely useful and can be mistakenly used, so strict mode makes it a syntax error: 'use strict'; var sum = 015 + // !!!
...And 4 more matches
The building blocks of responsive design - Progressive web apps (PWAs)
this tends to be termed responsive design or adaptive design, two
related but different approaches.
... this is much more
reliable, more maintainable, and more future proof.
... what's more
relevant to this article is that we didn't want the brick css and javascript files being applied to the markup unless we were looking at the mobile app view.
...And 4 more matches
Content type - SVG: Scalable Vector Graphics
using srgb provides an unambiguous and objectively measurable definition of the color, which can be
related to international standards.
... coordinate <coordinate> a <coordinate> is a length in the user coordinate system that is the given distance from the origin of the user coordinate system along the
relevant axis (the x-axis for x coordinates, the y-axis for y coordinates).
...to disambiguate a text string from a
relative iri, the functional notation <funciri> is used.
...And 4 more matches
Modules - Archive of obsolete content
unfortunately, javascript does not yet have native support for modules: it has to
rely on the host application to provide it with functionality such as loading subscripts, and exporting/ importing names.
... the module system used by the sdk is based on the commonjs specification: it is implemented using a loader object, which handles all the bookkeeping
related to module loading, such as resolving and caching urls.
...unfortunately, javascript does not provide any means to load scripts from other locations: we have to
rely on the host application to provide us with this functionality.
...And 3 more matches
remote/parent - Archive of obsolete content
you can use an absolute path to the module or a
relative path.
... if you use a
relative path, you must use the module parameter.
...to use a
relative path you must pass the module parameter.
...And 3 more matches
Preferences - Archive of obsolete content
look in the resources section below for the link to a list of preferences-
related interfaces.
... nsilocalfile and nsi
relativefilepref store paths in preferences.
... nsilocalfile is used to store absolute paths, while nsi
relativefilepref is used to store paths
relative to a "special" directory, such as the profile folder.
...And 3 more matches
Mozilla Documentation Roadmap - Archive of obsolete content
the mozilla developer center this is the official and most extensive guide to everything
related to mozilla.
...first of all, the in-site search is not
reliable, so we recommend using a search engine like google, with queries such as "mdc javascript code modules" or "javascript code modules site:developer.mozilla.org".
...xulplanet allowed you to navigate between interfaces and their
related components, which makes locating components very easy.
...And 3 more matches
XPCOM Objects - Archive of obsolete content
using xpcom components is
relatively simple, as you've seen in previous examples.
...their xpcom documentation is better in terms of seeing the
relationships between components and interfaces, so we'll use that.
...this is generated from source, and it's kept
relatively up to date.
...And 3 more matches
addFile - Archive of obsolete content
method of install object syntax public int addfile ( string registryname, installversion version, string xpisourcepath, object localdirspec, string
relativelocalpath, boolean forceupdate); public int addfile ( string registryname, string version, string xpisourcepath, object localdirspec, string
relativelocalpath, boolean forceupdate); public int addfile ( string xpisourcepath); public int addfile ( string registryname, string xpisourcepath, object localdirspec, string
relativelocalpath); public int addfile ( string registryname, string version, str...
...ing xpisourcepath, object localdirspec, string
relativelocalpath); parameters the addfile method has the following parameters: registryname the pathname in the client version registry about the file.
... this parameter can be an absolute pathname, such as /royalairways/royalsw/executable or a
relative pathname, such as executable.
...And 3 more matches
Using the Editor from XUL - Archive of obsolete content
you can find the
relevant xul parts in editor.xul, the javascript parts in editor.js, and the xbl binding for the editor element in editor.xml.
...we are currently only able to have one editor per composer window; in future,
relaxing this restriction would allow us to edit all the subdocuments in a frameset at the same time.
...when the last reference to the nseditorshell goes away (as a result of nseditorboxobject
releasing its reference) it
releases the owning reference on the editor.
...And 3 more matches
XUL element attributes - Archive of obsolete content
the pack attribute is
related to the alignment but is used to specify the position in the opposite direction.
...the datasources attribute may be placed on most elements, although it will usually be found on trees and menu
related elements.
...the actual value is not
relevant unless there are other flexible elements within the same container.
...And 3 more matches
tree - Archive of obsolete content
« xul reference home [ examples | attributes | properties | methods |
related ] a container which can be used to hold a tabular or hierarchical set of rows of elements.
...
relevant accessbility guidelines provide alternative access (for example, via menus) to column picker and for header behaviors like sorting (these have no default keyboard access).
...to enable the element, leave this attribute out enti
rely.
...And 3 more matches
2006-10-27 - Archive of obsolete content
discussions final ff
release already announced october 23rd: axel hecht posted an answer to cédric corazza posting.
... cédric's posting was about a french site which had already announced the availablity of ff 2.0 final
release and provided download links, even though the
release was on october 24.
... the owner of the site probably browsed on the
releases/2.0 dir on the ftp and got the
releases, which is kind of unpolite.
...And 3 more matches
Introduction to Public-Key Cryptography - Archive of obsolete content
public-key cryptography and
related standards and techniques underlie the security features of many products such as signed and encrypted email, single sign-on, and secure sockets layer (ssl) communications.
... neither password-based authentication nor certificate-based authentication address security issues
related to physical access to individual machines or passwords.
...administrators must keep track of a separate password database on each server and deal with potential security problems
related to the fact that passwords are sent over the network routinely and frequently.
...And 3 more matches
Reference - Archive of obsolete content
sevenspade 13:19, 2 july 2006 (pdt) after some thought, i removed the references to using language="javascript1.2", and all references are me
rely presented as information detailing past behavior.
...danbeck 07:02, 22 september 2005 (pdt) afaict , base64-
related functionality is not a part of the javascript engine, but a dom feature (probably non-standard).
...his user page is here: http://developer.mozilla.org/pt/docs...%c3%aas_xavier -- dria 08:19, 24 february 2006 (pst) object and function
relation here is my problem , it has been breaking my head for quite some time now.
...And 3 more matches
Choosing Standards Compliance Over Proprietary Practices - Archive of obsolete content
with processes, organizations can make
release schedules, implement marketing plans, analyze resource allocations, and make adjustments when needed.
...an organization must have the assurance that the standard they choose to incorporate into their development process will be
relevant in the future.
...when customers choose to use a particular product, they must have a positive experience with consistent,
reliable, and predictable behavior.
...And 3 more matches
Audio for Web games - Game development
buffering and p
reloading likely as an attempt to mitigate runaway mobile network data use, we also often find that buffering is disabled before playback has been initiated.
...however, p
reloading is still useful — without it, there would always need to be some client-server communication required before playing can commence.
... mobile support for web audio features mobile browser version concurrent play autoplay volume adjusting p
reload chrome (android) 69+ y y y y firefox (android) 62+ y y y y edge mobile y y y y opera mobile 46+ y y y y safari (ios) 7+ y/n* n n y android browser 67+ y y y y there's a full compatibility chart for mobile and desktop htmlmediaelement suppo...
...And 3 more matches
Desktop gamepad controls - Game development
oring the controller info and the pressed buttons: var controller = {}; var buttonspressed = []; function gamepadhandler(e) { controller = e.gamepad; output.innerhtml = "gamepad: " + controller.id; } the second line in the gamepadhandler function shows up on the screen when the device is connected: we can also show the id of the device — in the case above we're using the xbox 360 wi
reless controller.
...the d-pad right button have an index of 3 on the wi
reless xbox 360, but may have a different one on another device.
...n on/off the sounds } if(gamepadapi.buttons.pressed('y','hold')) { if(!this.screengamepadhelp.visible) { this.screengamepadhelp.visible = true; } } else { if(this.screengamepadhelp.visible) { this.screengamepadhelp.visible = false; } } } } when pressing the start button the
relevant function will be called to begin the game, and the same approach is used for turning the audio on and off.
...And 3 more matches
WAI-ARIA basics - Learn web development
as a result, developers quite often
rely on javascript libraries that generate such controls as a series of nested <div>s or table elements with classnames, which are then styled using css and controlled using javascript.
...content that updates without the entire page
reloading via a mechanism like xmlhttprequest, fetch, or dom apis.
... note: the aria-
relevant property is also quite useful for controlling what gets read out when a live region is updated.
...And 3 more matches
How much does it cost to do something on the Web? - Learn web development
price does not
reliably reflect a text editor's quality or usefulness.
...those programs are
relatively limited, you'll soon want a more robust editor to add layers, effects, and grouping.
... if you want to install an (s)ftp client, there are several
reliable and free options: for example, filezilla for all platforms, winscp for windows, cyberduck for mac or windows, and more.
...And 3 more matches
How to structure a web form - Learn web development
ideally, long forms should be spread across multiple pages, but if a form is getting long and must be on a single page, putting the different
related sections inside different fieldsets improves usability.
...this is the most important element if you want to build accessible forms — when implemented properly, screenreaders will speak a form element's label along with any
related instructions, as well as it being useful for sighted users.
... <label for="name"> name: <input type="text" id="name" name="user_name"> </label> even in such cases however, it is considered best practice to set the for attribute to ensure all assistive technologies understand the
relationship between label and widget.
...And 3 more matches
Tips for authoring fast-loading HTML pages - Learn web development
ideally, your basic minimum requirements should be based on the consideration of modern browsers that support the
relevant standards.
...minimize the number of files for performance while keeping un
related css in separate files for maintenance.
... javascript files for functions required during the loading of the page, but not any interaction
related javascript that can only run after page loads.
...And 3 more matches
Images in HTML - Learn web development
in this article we'll look at how to use it in depth, including the basics, annotating it with captions using <figure>, and detailing how it
relates to css background images.
... prerequisites: basic computer literacy, basic software installed, basic knowledge of working with files, familiarity with html fundamentals (as covered in getting started with html.) objective: to learn how to embed simple images in html, annotate them with captions, and how html images
relate to css background images.
...the src attribute contains a path pointing to the image you want to embed in the page, which can be a
relative or absolute url, in the same way as href attribute values in <a> elements.
...And 3 more matches
Deployment and next steps - Learn web development
} }), later on in the same file you'll also see how rollup minimizes our scripts in production mode and launches a local server in development mode: // in dev mode, call `npm run start` once // the bundle has been generated !production && serve(), // watch the `public` directory and refresh the // browser on changes when not in production !production && live
reload('public'), // if we're building for production (npm run build // instead of npm run dev), minify production && terser() ], there are many plugins for rollup that allow you to customize its behavior.
... since our app will be published at a subdirectory (like https://your-user.gitlab.io/mdn-svelte-todo), we'll have to make the references to the javascript and css files in our public/index.html file
relative.
... to do this, we just remove the leading slashes (/) from the /global.css, /build/bundle.css, and /build/bundle.js urls, like this: <title>svelte to-do list</title> <link
rel='icon' type='image/png' href='favicon.png'> <link
rel='stylesheet' href='global.css'> <link
rel='stylesheet' href='build/bundle.css'> <script defer src='build/bundle.js'></script> do this now.
...And 3 more matches
Accessibility information for UI designers and developers
this page describes a number of design-
related aspects to look out for, in no particular order.
... don't
rely on color alone when your interface uses color to distinguish between things, make sure the distinction is also made in other ways.
... or in this one, you could consider using patterns besides colored areas: again, if people are unable to distinguish the colors, they can
rely on the patterns instead.
...And 3 more matches
Software accessibility: Where are we today?
this tends to be somewhat less of a limitation in that most software doesn't
rely exclusively on audio to
relay feedback.
...ideally, intelligent decisions are made, so the user does not have to wade through as much non-
relevant data.
...for example to make a capital letter, first press the shift key,
release it, then press the letter to be capitalized.
...And 3 more matches
A bird's-eye view of the Mozilla framework
mozilla architectural modules are comprised of groups of
related xpcom objects that provide services to and access services from each other through dynamically queryable interfaces.
... [scriptable, uuid(00000000-0000-0000-c000-000000000046)] interface nsisupports { void queryinterface(in nsiidref uuid, iid_is(uuid),retval] out nsqiresult result); [noscript, notxpcom] nsrefcnt addref(); [noscript, notxpcom] nsrefcnt
release(); }; the uuid parameter to queryinterface() is the iid uniqely identifying the interface.
...it is up to the client to call
release() when it no longer needs the interface.
...And 3 more matches
Testopia
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 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.
...And 3 more matches
How Mozilla's build system works
a build backend is me
rely a tool used to build the tree — like gnu make or tup.
...there is roughly one moz.build file per directory or per set of
related directories.
...a tier is a grouping of
related directories containing makefiles of their own.
...And 3 more matches
Obsolete Build Caveats and Tips
from source_code/mercurial mozilla-2.0 (firefox 4.0) code for the firefox 4.0 (gecko 2.0)
release lives in
releases/mozilla-2.0.
... to get this code, do the following: # pull the mozilla source to the folder 20src/ - may take a while # as hundreds of megabytes of history is downloaded to .hg hg clone https://hg.mozilla.org/
releases/mozilla-2.0/ 20src cd 20src mozilla-1.9.2 (firefox 3.6) code for the firefox 3.6 (gecko 1.9.2)
release lives in
releases/mozilla-1.9.2.
... to get this code, do the following: # pull the mozilla source to the folder 192src/ - may take a while # as hundreds of megabytes of history is downloaded to .hg hg clone https://hg.mozilla.org/
releases/mozilla-1.9.2/ 192src cd 192src mozilla-1.9.1 (firefox 3.5) code for the firefox 3.5 (gecko 1.9.1)
release lives in
releases/mozilla-1.9.1.
...And 3 more matches
Storage access policy: Block cookies from trackers
this documentation describes the policy that we intend to ship to firefox
release users, but may not match what is implemented in the current
release version of firefox.
... that's because we document new aspects of the policy as soon as they land in firefox nightly, our pre-
release channel.
... firefox nightly may also contain experimental features that we don't yet plan to ship to
release users; experimental features will not be included in this documentation, but may nevertheless impact the functionality of domains classified as trackers.
...And 3 more matches
Firefox UI considerations for web developers
rich icons the high resolution icons—also known as rich icons—are specified by setting the
rel attribute to one of: apple-touch-icon apple-touch-icon-precomposed fluid-icon the size of each icon is taken from the size attribute specified on the <link>, if it's provided.
... providing a top sites ready icon the simple rule is to provide an icon which is at least 96x96 pixels in size, using a <link> element whose
rel attribute is a reference to a file containing an icon of a supported type.
... <link
rel="apple-touch-icon" sizes="128x128" href="touch-icon-128x128.png"> <link
rel="apple-touch-icon" sizes="46x46" href="touch-icon-46x46.png"> <link
rel="apple-touch-icon" sizes="256x256" href="touch-icon-256x256.png"> <link
rel="icon" href="favicon.ico"> in this code, the 128x128 pixel icon will be used by firefox, as it's the smallest icon which is larger than the 96-pixel size it requires.
...And 3 more matches
Browser API
they are necessary to be able to implement back, forward, stop, and
reload buttons.
... htmliframeelement.
reload() allows
reloading of the <iframe> element content.
... audio-
related methods the following methods allow direct control of sound in the browser element.
...And 3 more matches
MathML Demo: <mo> - operator, fence, separator, or accent
binary operators and
relations the following table contains instances of all operators found on the swp binary operations and binary
relations panels.
...in general, the lspace and rspace around the
relation should be greater than that around the operation.
... operator and
relations center vertically on the math axis.
...And 3 more matches
Activity Monitor, Battery Status Menu and top
this article describes the activity monitor, battery status menu, and top — three
related tools available on mac os x.
... power-
related measurements activity monitor has several tabs.
... the power-
related columns are as follows.
...And 3 more matches
Investigating leaks using DMD heap scan mode
however, in that case it may be easier to use refcount logging, or rr with a conditional breakpoint set on calls to
release() for the leaking object, to see what object actually does the
release that causes the leaked object to go away.
...creating this log during shutdown is nice because there are less things un
related to the leak in the log, and various cycle collector optimizations are disabled.
... the output will look something like this, after a message about loading progress: 0x7f0882fe3230 [fragmento
relement (xhtml) script https://www.example.com] --[[via hash] mlistenermanager]--> 0x7f0899b4e550 [eventlistenermanager] --[mlisteners event=onload listenertype=3 [i]]--> 0x7f0882ff8f80 [callbackobject] --[mincumbentglobal]--> 0x7f0897082c00 [nsglobalwindowinner # 2147483662 inner https://www.example.com] root 0x7f0882fe3230 is a ref counted object with 1 unknown edge(s).
...And 3 more matches
Introduction to NSPR
they achieve the cost reduction by
relying on their containing process to manage most of the resources that they access.
... nspr threads are scheduled in two separate domains: local threads are scheduled within a process only and are handled enti
rely by nspr, either by completely emulating threads on each host operating system (os) that doesn't support threads, or by using the threading facilities of each host os that does support threads to emulate a
relatively large number of local threads by using a
relatively small number of native threads.
...in general, an nspr thread of higher priority has a statistically better chance of running
relative to threads of lower priority.
...And 3 more matches
gtstd.html
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 understand the
relationships between the ssl interface, the pkcs #11 interface, pkcs #11 modules, and the default netscape security databases.
... figure 2.1 illustrates the
relationships between nspr, ssl, pkcs #11, and the available cryptographic modules.
...And 3 more matches
Network Security Services
for information on downloading nss
releases as tar files, see download pki source.
... getting started nss
releases this page contains information about the current and past
releases of nss.
... tools, testing, and other technical details build instructions for nss describe how to check out and build nss
releases.
...And 3 more matches
SpiderMonkey Build Documentation
refer the
release notes under command line tools -> new features the
release notes also states that this compatibility package will no longer be provided in the near future, so the build system on macos will have to be adapted to look for headers in the sdk until then, the following should help, open /library/developer/commandlinetools/packages/macos_sdk_headers_for_macos_10.14.pk this builds an execu...
...table named js in the directory build-
release/dist/bin.
... this can help debug memory leaks and other memory-
related problems.
...And 3 more matches
Bytecode Descriptions
format: jof_ic lt, gt, le, ge stack: lval, rval ⇒ (lval op rval)
relative operators (<, >, <=, >=).
...implements:
relational operators: evaluation.
...the spec says this operation takes one argument, but that argument is a record with two
relevant fields, [[iterator]] and [[nextmethod]].
...And 3 more matches
Setting up an update server
prebuilt mars for
release and beta can be found here.
...here is an example of an appropriate mar file to use: https://archive.mozilla.org/pub/firefox/
releases/69.0b9/update/win64/firefox-69.0b9.complete.mar.
...> <update type="minor" displayversion="2000.0a1" appversion="2000.0a1" platformversion="2000.0a1" buildid="21181002100236"> <patch type="complete" url="http://127.0.0.1:8000/<mar name>" hashfunction="sha512" hashvalue="<hash>" size="<size>"/> </update> </updates> if you've downloaded the mar you're using, you'll find the sha512 value in a file called sha512sums in the root of the
release directory on archive.mozilla.org for a
release or beta build (you'll have to search it for the file name of your mar, since it includes the sha512 for every file that's part of that
release), and for a nightly build you'll find a file with a .checksums extension adjacent to your mar that contains that information (for instance, for the mar file at https://archive.mozilla.org/pub/firefox/night...
...And 3 more matches
Embedded Dialog API
these new windows can be entire new browser windows opened in response to web page script, or dialogs or alerts which may arise from script or me
rely during normal operation of the browser.
...the complete windowing portion of the api is large and complex, but it need not be enti
rely implemented.
...many embedding applications will find them enti
rely sufficient.
...And 3 more matches
mozIAsyncFavicons
method overview void getfaviconurlforpage(in nsiuri apageuri, in nsifavicondatacallback acallback); void getfavicondataforpage(in nsiuri apageuri, in nsifavicondatacallback acallback); void setandfetchfaviconforpage(in nsiuri apageuri, in nsiuri afaviconuri, in boolean aforce
reload, in unsigned long afaviconloadtype, [optional] in nsifavicondatacallback acallback); void replacefavicondata(in nsiuri afaviconuri, [const,array,size_is(adatalen)] in octet adata, in unsigned long adatalen, in autf8string amimetype, [optional] in prtime aexpiration); void replacefavicondatafromdataurl(in nsiuri afaviconuri, in astring adataurl, [optional] in pr...
...if the icon data already exists, we will not try to
reload the icon unless aforce
reload is true.
... similarly, if the icon is in the failed favicon cache we will not do anything unless aforce
reload is true, in which case we'll try to
reload the favicon.
...And 3 more matches
nsIAccessibleRetrieval
e since gecko 2.0 nsiaccessible getapplicationaccessible(); nsiaccessible getattachedaccessiblefor(in nsidomnode anode); nsiaccessible getcachedaccessible(in nsidomnode anode, in nsiweakreference ashell); obsolete since gecko 2.0 nsiaccessnode getcachedaccessnode(in nsidomnode anode, in nsiweakreference ashell); obsolete since gecko 2.0 nsidomnode get
relevantcontentnodefor(in nsidomnode anode); astring getstringeventtype(in unsigned long aeventtype); astring getstring
relationtype(in unsigned long a
relationtype); astring getstringrole(in unsigned long arole); nsidomdomstringlist getstringstates(in unsigned long astates, in unsigned long aextrastates); methods getaccessiblefor() return an nsiaccessible...
...get
relevantcontentnodefor() return an dom node that is
relevant to attached accesible check.
...nsidomnode get
relevantcontentnodefor( in nsidomnode anode ); parameters anode the dom node to get
relevant content node.
...And 3 more matches
nsIDOMClientRect
1.0 66 introduced gecko 1.9 inherits from: nsisupports last changed in gecko 1.9.1 (firefox 3.5 / thunderbird 3.0 / seamonkey 2.0) attributes attribute type description bottom float y-coordinate,
relative to the viewport origin, of the bottom of the rectangle box.
... left float x-coordinate,
relative to the viewport origin, of the left of the rectangle box.
... right float x-coordinate,
relative to the viewport origin, of the right of the rectangle box.
...And 3 more matches
nsIURL
rvice) .newuri("http://developer.mozilla.org", null, null); try { var myurl = myuri.queryinterface(components.interfaces.nsiurl); } catch(e) { // the uri is not an url } or using instanceof: if (myuri instanceof components.interfaces.nsiurl) { // your code here } method overview autf8string getcommonbasespec(in nsiuri auritocompare); autf8string get
relativespec(in nsiuri auritocompare); attributes attribute type description directory autf8string directory portion of a url.
...and hence don't
rely on this for something to be a definitely be a file.
...note that this is pu
rely based on searching for the last trailing slash.
...And 3 more matches
nsIWebBrowserPersist
persist_flags_fixup_links_to_destination 256 fix links
relative to destination location (not origin) persist_flags_dont_fixup_links 512 do not make any adjustments to links.
... persist_flags_force_allow_cookies 65536 force
relevant cookies to be sent with this load even if normally they wouldn't be.
... aprivacycontext a context derived from a
relevant window or document (eg.
...And 3 more matches
nsIXULWindow
void assumechromeflagsarefrozen(); void center(in nsixulwindow a
relative, in boolean ascreen, in boolean aalert); nsixulwindow createnewwindow(in print32 achromeflags, in nsiappshell aappshell); nsidocshelltreeitem getcontentshellbyid(in wstring id); void removechildwindow(in nsixulwindow achild); void showmodal(); attributes attribute type description chromeflags pruint32 chromeflags are ...
... void center( in nsixulwindow a
relative, in boolean ascreen, in boolean aalert ); parameters a
relative if not null, the window
relative to which the window is moved.
... ascreen true to center the window
relative to the screen containing a
relative if a
relative is not null.
...And 3 more matches
Weak reference
a naive design for an observer/observable
relationship would require the observable to hold a owning reference to the observer.
... what is actually needed in this case, is either out-of-band signaling, where when the observer wants to go away, it unregisters itself from the observable, which then
releases its owning reference, allowing the observer to die, or else a new kind of reference.
...this technique can significantly simplify certain
relationships, and you should consider it when an owning reference is inappropriate, but where a raw pointer might end up dangling.
...And 3 more matches
Using the Mozilla symbol server
the mozilla project runs a symbol server for trunk firefox nightly and
release builds on windows.
... symbols are available for at least 30 previous days worth of nightly builds, and firefox
releases from 2.0.0.4.
... note that because mozilla
release builds are heavily optimized, debugging is not always easy.
...And 3 more matches
Using Objective-C from js-ctypes
while ([synth isspeaking]) {} [synth
release]; return 0; } save this file as test.m, and run with the following command, inside the same directory as the saved file (needs xcode).
...as [nsobject
release] returns nothing, we can also use objc_msgsend.
... id nsstring = (id)objc_getclass("nsstring"); sel initwithcstring_encoding = sel_registername("initwithcstring:encoding:"); int nsutf8stringencoding = 4; id tmp = objc_msgsend(nsstring, alloc); id text = objc_msgsend(tmp, initwithcstring_encoding, "hello, firefox!", nsutf8stringencoding); note that you need to
release this allocated nsstring instance.
...And 3 more matches
Drawing and Event Handling - Plugins
//the npwindow structure typedef enum { npwindowtypewindow = 1, npwindowtypedrawable } npwindowtype; typedef struct _npwindow { void* window; /* platform-specific handle */ uint32 x; /* position of top-left corner */ uint32 y; /*
relative to a netscape page */ uint32 width; /* maximum window size */ uint32 height; nprect cliprect; /* clipping rectangle in port coordinates */ #ifdef xp_unix void * ws_info; /* platform-dependent additional data */ #endif /* xp_unix */ npwindowtype type; /* whether this is a window or a drawable */ } npwindow; the window parameter is a platform-specific handle to a n...
... the x and y fields specify the top-left corner of the plug-in
relative to the page.
... on windows and unix, each instance receives its own child window within the browser window hierarchy, and imaging and event processing are
relative to this window.
...And 3 more matches
Responsive Design Mode - Firefox Developer Tools
ton - take a screenshot settings button - opens the rdm settings menu close button - closes rdm mode and returns to regular browsing the settings menu includes the following commands: left-align viewport - when checked moves the rdm viewport to the left side of the browser window show user agent - when checked displays the user agent string the final two options define when the page is
reloaded:
reload when touch simulation is toggled: when this option is enabled, the page is
reloaded whenever you toggle touch support.
...
reload when user agent is changed: when this option is enabled, the page is
reloaded whenever the user agent is changed.
...
reloading on these changes can be helpful because certain page behaviors would otherwise not be applied.
...And 3 more matches
about:debugging - Firefox Developer Tools
you can also
reload the page by clicking the
reload button next to the url bar, and (starting 79), navigate backward or forward in the browsing history with the back and forward buttons.
...
reload
reloads the temporary extension.
... for other changes, click the
reload button.
...And 3 more matches
Background Tasks API - Web APIs
in the past, there's been no way to do this
reliably other than by writing code that's as efficient as possible and by offloading as much work as possible to workers.
... let totaltaskcountelem = document.getelementbyid("totaltaskcount"); let currenttasknumbe
relem = document.getelementbyid("currenttasknumber"); let progressba
relem = document.getelementbyid("progress"); let startbuttonelem = document.getelementbyid("startbutton"); let logelem = document.getelementbyid("log"); next we have variables which reference the dom elements we need to interact with.
... currenttasknumbe
relem is the element used to display the number of tasks processed so far.
...And 3 more matches
How whitespace is handled by HTML, CSS, and in the DOM - Web APIs
this handles everything for you, and is definitely the preferred solution: ul { list-style-type: none; margin: 0; padding: 0; display: flex; } if you need to
rely on inline-block, you could set the font-size of the list to 0.
... */ /** * determine whether a node's text content is enti
rely whitespace.
... */ function is_ignorable( nod ) { return ( nod.nodetype == 8) || // a comment node ( (nod.nodetype == 3) && is_all_ws(nod) ); // a text node, all ws } /** * version of |previoussibling| that skips nodes that are enti
rely * whitespace or comments.
...And 3 more matches
Document Object Model (DOM) - Web APIs
in particular, the element interface is enhanced to become htmlelement and various subclasses, each representing one of (or a family of closely
related) elements.
... svg interfaces svg element interfaces svgaelement svgaltglyphelement svgaltglyphdefelement svgaltglyphitemelement svganimationelement svganimateelement svganimatecolo
relement svganimatemotionelement svganimatetransformelement svgcircleelement svgclippathelement svgcolorprofileelement svgcomponenttransferfunctionelement svgcurso
relement svgdefselement svgdescelement svgelement svgellipseelement svgfeblendelement svgfecolormatrixelement svgfecomponenttransfe
relement svgfecompositeelement svgfeconvolvematrixelement svgfediffuselightingelement s...
...vgfedisplacementmapelement svgfedistantlightelement svgfedropshadowelement svgfefloodelement svgfefuncaelement svgfefuncbelement svgfefuncgelement svgfefunc
relement svgfegaussianblu
relement svgfeimageelement svgfemergeelement svgfemergenodeelement svgfemorphologyelement svgfeoffsetelement svgfepointlightelement svgfespecularlightingelement svgfespotlightelement svgfetileelement svgfeturbulenceelement svgfilte
relement svgfilterprimitivestandardattributes svgfontelement svgfontfaceelement svgfontfaceformatelement svgfontfacenameelement svgfontfacesrcelement svgfontfaceurielement svgforeignobjectelement svggelement svggeometryelement svgglyphelement svgglyphrefelement svggradientelement svggraphicselement svghatchelement svghatchpathelement ...
...And 3 more matches
Element.getBoundingClientRect() - Web APIs
the element.getboundingclientrect() method returns the size of an element and its position
relative to the viewport.
...properties other than width and height are
relative to the top-left of the viewport.
...this means that the rectangle's boundary edges (top, right, bottom, left) change their values every time the scrolling position changes (because their values are
relative to the viewport and not absolute).
...And 3 more matches
Comparison of Event Targets - Web APIs
event.
relatedtarget dom mouseevent interface identifies a secondary target for the event.
... } </style> </head> <body> <table> <thead> <tr> <td class="standard">original target dispatching the event <small>event.target</small></td> <td class="standard">target who's event listener is being processed <small>event.currenttarget</small></td> <td class="standard">identify other element (if any) involved in the event <small>event.
relatedtarget</small></td> <td class="non-standard">if there was a retargetting of the event for some reason <small> event.explicitoriginaltarget</small> contains the target before retargetting (never contains anonymous targets)</td> <td class="non-standard">if there was a retargetting of the event for some reason <small> event.originaltarget</small> contains the target before...
... retargetting (may contain anonymous targets)</td> </tr> </thead> <tr> <td id="target"></td> <td id="currenttarget"></td> <td id="
relatedtarget"></td> <td id="explicitoriginaltarget"></td> <td id="originaltarget"></td> </tr> </table> <p>clicking on the text will show the difference between explicitoriginaltarget, originaltarget, and target</p> <script> function handleclicks(e) { document.getelementbyid('target').innerhtml = e.target; document.getelementbyid('currenttarget').innerhtml = e.currenttarget; document.getelementbyid('
relatedtarget').innerhtml = e.
relatedtarget; document.getelementbyid('explicitoriginaltarget').innerhtml = e.explicitoriginaltarget; document.getelementbyid('original...
...And 3 more matches
HTMLMediaElement - Web APIs
the htmlmediaelement interface adds to htmlelement the properties and methods needed to support basic media-
related capabilities that are common to audio and video.
... <div id="interfacediagram" style="display: inline-block; position:
relative; width: 100%; padding-bottom: 30%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 180" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2=...
...the time is specified
relative to the media's timeline.
...And 3 more matches
Using IndexedDB - Web APIs
note: as of firefox 40, indexeddb transactions have
relaxed durability guarantees to increase performance (see bug 1112702.) previously in a readwrite transaction idbtransaction.oncomplete was fired only when all data was guaranteed to have been flushed to disk.
...when you call open() with a greater version than the actual version of the database, all other open databases must explicitly acknowledge the request before you can start making changes to the database (an onblocked event is fired until they are closed or
reloaded).
...please
reload or close this tab!"); }; // do stuff with the database.
...And 3 more matches
compareVersion - Web APIs
method of installtrigger object syntax int compareversion ( string registryname, installversion version); int compareversion ( string registryname, string version); int compareversion ( string registryname, int major, int minor, int
release, int build); parameters the compareversion method has the following parameters: registryname the pathname in the client version registry for the component whose version is to be compared.
... this parameter can be an absolute pathname, such as /royalairways/royalsw or a
relative pathname, such as plugsin/royalairway/royalsw.
... version an installversion object containing version information or a string in the format major.minor.
release.build, where major, minor,
release, and build are integer values representing version information.
...And 3 more matches
Sensor APIs - Web APIs
} else if (event.error.name === 'notreadableerror' ) { console.log('cannot connect to the sensor.'); } }); accelerometer.addeventlistener('reading', () =>
reloadonshake(accelerometer)); accelerometer.start(); } catch (error) { // handle construction errors.
... sensor permissions sensor permission/feature policy name absoluteorientationsensor 'accelerometer', 'gyroscope', and 'magnetometer' accelerometer 'accelerometer' ambientlightsensor 'ambient-light-sensor' gyroscope 'gyroscope' linearaccelerationsensor 'accelerometer' magnetometer 'magnetometer'
relativeorientationsensor 'accelerometer', and 'gyroscope' readings sensor readings are received through the sensor.onreading callback which is inherited by all sensor types.
...ield along the x-axis " + magsensor.x); console.log("magnetic field along the y-axis " + magsensor.y); console.log("magnetic field along the z-axis " + magsensor.z); }) magsensor.addeventlistener('error', event => { console.log(event.error.name, event.error.message); }) magsensor.start(); interfaces absoluteorientationsensorsecure context describes the device's physical orientation in
relation to the earth's reference coordinate system.
...And 3 more matches
Touch - Web APIs
touch.screenx read only returns the x coordinate of the touch point
relative to the left edge of the screen.
... touch.screeny read only returns the y coordinate of the touch point
relative to the top edge of the screen.
... touch.clientx read only returns the x coordinate of the touch point
relative to the left edge of the browser viewport, not including any scroll offset.
...And 3 more matches
Signaling and video calling - Web APIs
each ice message suggests a communication protocol (tcp or udp), ip address, port number, connection type (for example, whether the specified ip is the peer itself or a
relay server), along with other information needed to link the two computers together.
... the contents of the sdp are ir
relevant to you in essentially all cases.
...in practice, this is ra
rely if ever necessary, since most of that work is done for you by getusermedia().
...And 3 more matches
WebRTC Statistics API - Web APIs
this way, we look only at the video-
related statistics for the local rtcrtpreceiver responsible for receiving the streamed media.
... rtcrtpcontributingsourcestats rtcstats data-channel statistics
related to one rtcdatachannel on the connection.
... rtcpeerconnectionstats rtcstats receiver statistics
related to a specific rtcrtpreceiver and the media associated with that receiver.
...And 3 more matches
Advanced techniques: Creating and sequencing audio - Web APIs
let's say our envelope has attack and
release.
... we can allow the user to control these using range inputs on the interface: <label for="attack">attack</label> <input name="attack" id="attack" type="range" min="0" max="1" value="0.2" step="0.1" /> <label for="
release">
release</label> <input name="
release" id="
release" type="range" min="0" max="1" value="0.5" step="0.1" /> now we can create some variables over in javascript and have them change when the input values are updated: let attacktime = 0.2; const attackcontrol = document.queryselector('#attack'); attackcontrol.addeventlistener('input', function() { attacktime = number(this.value); }, false); let
releasetime = 0.5; const
releasecontrol = document.queryselector('#
release');
releasecontrol.addeventlistener('input', function() {
releasetime = number(this.value); }, false)...
... for our attack and
release, we'll use the linearramptovalueattime method as mentioned above.
...And 3 more matches
Web audio spatialization basics - Web APIs
this is done by setting the different properties of the pannernode object instance in
relation to that movement, to emulate spacialization.
...the pannernode can then calculate its sound position
relative to the position of the listener.
...we can set this to: equalpower — the default and the general way panning is figured out hrtf — this stands for 'head-
related transfer function' and looks to take into account the human head when figuring out where the sound is.
...And 3 more matches
Logical properties for floating and positioning - CSS: Cascading Style Sheets
example: inset properties for positioned layout positioning generally allows us to position an element in a manner
relative to its containing block — we essentially inset the item
relative to where it would fall based on normal flow.
... these properties take a length or a percentage as a value, and
relate to the user's screen dimensions.
... new properties have been created in the logical properties specification for when you want the positioning to
relate to the flow of text in your writing mode.
...And 3 more matches
CSS values and units - CSS: Cascading Style Sheets
this may be an absolute url or a
relative url.
...there are two types of lengths in css:
relative and absolute.
...
relative length units specify a length in
relation to something else.
...And 3 more matches
left - CSS: Cascading Style Sheets
for
relatively positioned elements, the distance that the element is moved to the right of its normal position.
... for
relatively positioned elements, the distance of the element from its normal position is based on the right property; or if right is also auto, the element is not moved horizontally at all.
...(the containing block is the ancestor to which the element is
relatively positioned.) when position is set to
relative, the left property specifies the distance the element's left edge is moved to the right from its normal position.
...And 3 more matches
mask-origin - CSS: Cascading Style Sheets
values content-box the position is
relative to the content box.
... padding-box the position is
relative to the padding box.
... border-box the position is
relative to the border box.
...And 3 more matches
HTML attribute reference - HTML: Hypertext Markup Language
codebase <applet> this attribute gives the absolute or
relative url of the directory where applets' .class files referenced by the code attribute are stored.
... importance <iframe>, <img>, <link>, <script> indicates the
relative fetch priority for the resource.
... note: this attribute is obsolete, use <link
rel="manifest"> instead.
...And 3 more matches
<audio>: The Embed Audio element - HTML: Hypertext Markup Language
crossorigin this enumerated attribute indicates whether to use cors to fetch the
related audio file.
... disableremoteplayback a boolean attribute used to disable the capability of remote playback in devices that are attached using wired (hdmi, dvi, etc.) and wi
reless technologies (miracast, chromecast, dlna, airplay, etc).
... p
reload this enumerated attribute is intended to provide a hint to the browser about what the author thinks will lead to the best user experience.
...And 3 more matches
<input type="month"> - HTML: Hypertext Markup Language
using month inputs date-
related inputs (including month) sound convenient at first glance; they promise an easy ui for choosing dates, and they normalize the data format sent to the server, regardless of the user's locale.
... div { margin-bottom: 10px; position:
relative; } input[type="number"] { width: 100px; } input + span { padding-right: 30px; } input:invalid+span:after { position: absolute; content: '✖'; padding-left: 5px; } input:valid+span:after { position: absolute; content: '✓'; padding-left: 5px; } important: html form validation is not a substitute for scripts that ensure that the entered data is in the proper format.
... it's far too easy for someone to make adjustments to the html that allow them to bypass the validation, or to remove it enti
rely.
...And 3 more matches
Evolution of HTTP - HTTP
more than 15 years of extensions thanks to its extensibility – creating new headers or methods is easy – and even if the http/1.1 protocol was refined over two revisions, rfc 2616 published in june 1999 and the series of rfc 7230-rfc 7235 published in june 2014 in prevision of the
release of http/2, this protocol has been extremely stable over more than 15 years.
...ssl 1.0 was never
released outside the company, but ssl 2.0 and its successor ssl 3.0 allowed for the creation of e-commerce web sites by encrypting and guaranteeing the authenticity of the messages exchanged between the server and client.
... during the same time, the need for an encrypted transport layer raised: the web left the
relative trustiness of a mostly academic network, to a jungle where advertisers, random individuals or criminals compete to get as much private information about people, try to impersonate them or even to replace data transmitted by altered ones.
...And 3 more matches
Browser detection using the user agent - HTTP
it's worth re-iterating: it's very ra
rely a good idea to use user agent sniffing.
...while user agent sniffing can sometimes detect these, not all devices are the same: some mobile devices have big screen sizes, some desktops have a small touchscreen, some people use smart tv's which are an enti
rely different ballgame altogether, and some people can dynamically change the width and height of their screen by flipping their tablet on its side!
... also try to move less
relevant/important information down to the bottom and group the page's content together meaningfully.
...And 3 more matches
HTTP caching - HTTP
this page will mostly talk about browser and proxy caches, but there are also gateway caches, cdn, reverse proxy caches and load balancers that are deployed on web servers for better
reliability, performance and scaling of web sites and web applications.
... cache-control: no-store cache but revalidate a cache will send the request to the origin server for validation before
releasing a cached copy.
...contrary to expires, this directive is
relative to the time of the request.
...And 3 more matches
Firefox user agent string reference - HTTP
rv:geckoversion indicates the
release version of gecko (such as "17.0").
...firefoxversion will generally represent the equivalent firefox
release corresponding to the given gecko version.
...for example: mozilla/5.0 (android 4.4; mobile; rv:41.0) gecko/41.0 firefox/41.0 mozilla/5.0 (android 4.4; tablet; rv:41.0) gecko/41.0 firefox/41.0 the version numbers are not
relevant.
...And 3 more matches
Array.prototype.fill() - JavaScript
var start = arguments[1]; var
relativestart = start >> 0; // step 8.
... var k =
relativestart < 0 ?
... math.max(len +
relativestart, 0) : math.min(
relativestart, len); // steps 9-10.
...And 3 more matches
Intl.DateTimeFormat.prototype.formatToParts() - JavaScript
relatedyear the string used for the
related 4-digit gregorian year, in the event that the calendar's representation would be a yearname instead of a year, for example "2019".
... yearname the string used for the yearname in
relevant contexts, for example "geng-zi" polyfill a polyfill for this feature is available in the proposal repository.
... these years are disambiguated by
relationship to corresponding years on the gregorian calendar.
...And 3 more matches
WebAssembly.Memory - JavaScript
irefox for androidopera for androidsafari on iossamsung internetnode.jsmemorychrome full support 57edge full support 16firefox full support 52notes full support 52notes notes disabled in the firefox 52 extended support
release (esr).ie no support noopera full support 44safari full support 11webview android full support 57chrome android full support 57firefox android full support...
... 52notes full support 52notes notes disabled in the firefox 52 extended support
release (esr).opera android full support 43safari ios full support 11samsung internet android full support 7.0nodejs full support 8.0.0memory() constructorchrome full support 57edge full support 16firefox full support 52notes full support 52notes notes disabled in the firefox 52 extende...
...d support
release (esr).ie no support noopera full support 44safari full support 11webview android full support 57chrome android full support 57firefox android full support 52notes full support 52notes notes disabled in the firefox 52 extended support
release (esr).opera android full support 43safari ios full support 11samsung internet android full support ...
...And 3 more matches
Web audio codec guide - Web media technologies
some of these are a matter of the form of the source audio; others are
related to decisions made while encoding the audio.
...there is a cor
relation between the sample rate and the maxium sound frequency that can be represented by a waveform represented by a codec.
...instead, firefox
relies upon a platform's native support for aac.
...And 3 more matches
SDK API Lifecycle - Archive of obsolete content
developers using the sdk's apis need to know how far they can trust that a given api will not change in future
releases.
... deprecation process deprecation in the chosen
release, the sdk team will communicate the module's deprecation: update the module's stability index to be "deprecated" include a deprecation notice in the
release notes, the add-ons blog, and the jetpack google group.
... migration the deprecation period defaults to 18 weeks (that is, three
releases) although in some cases, generally those out of our control, it might be shorter than this.
...And 2 more matches
/loader - Archive of obsolete content
oks like this: let { loader } = require('toolkit/loader'); let loader = loader({ paths: { // resolve all modules starting with `toolkit/` as follows: // toolkit/foo -> resource://gre/modules/commonjs/toolkit/foo.js // toolkit/foo/bar -> resource://gre/modules/commonjs/toolkit/foo/bar.js 'toolkit/': 'resource://gre/modules/commonjs/toolkit/', // resolve all other non-
relative module requirements as follows: // devtools/gcli -> resource:///modules/devtools/gcli.js // panel -> resource:///modules/panel.js '': 'resource:///modules/', } }) all
relative url require() statements (those that start with ".") are first resolved
relative to the requirer module id and the result of it is then resolved using the paths option.
... you may still end up with a
relative module id if the entry point module id is itself
relative.
... in those cases you have to decide what the entry point module is
relative to and provide an appropriate mapping for it: let { loader } = require('toolkit/loader'); let loader = loader({ paths: { // resolve all modules starting with `toolkit/` as follows: // toolkit/foo -> resource://gre/modules/commonjs/toolkit/foo.js // toolkit/foo/bar -> resource://gre/modules/commonjs/toolkit/foo/bar.js 'toolkit/': 'resource://gre/modules/commonjs/toolkit/', // resolev all other non-
relative module requirements as follows: // devtools/gcli -> resource:///modules/devtools/gcli.js // panel -> resource:///modules/panel.js '': 'resource:///modules/', // allow
relative urls and resolve them to add-on root: // ./main -> resource://my-...
...And 2 more matches
jpm - Archive of obsolete content
any add-on which you are in the process of developing) in the branded
release or beta versions of firefox.
...assuming you don't want an old version of firefox, your options are firefox developer edition, firefox nightly, unbranded beta, or unbranded
release.
...binary may be specified as a full path or as a path
relative to the current directory.
...And 2 more matches
Introduction - Archive of obsolete content
version 1.0 of firefox was
released in november 2004, version 2.0 in october 2006, and version 3.0 in june 2008.
... this tutorial was written after firefox 3 was
released, and has been updated with time.
...a
release that is more than 6 months old is likely vulnerable to published security bugs.
...And 2 more matches
Setting Up a Development Environment - Archive of obsolete content
most xul tools and plugins you'll find online are me
rely templates that generate the folder structure for the project, and that's not much help.
...it's not common to sign extensions because most users will trust the official add-ons site (amo) rather than
rely on extension signatures.
...ideally this should be handled by a single person, and only done near the end of the
release process.
...And 2 more matches
An Interview With Douglas Bowman of Wired News - Archive of obsolete content
the visual design of wired news and the vignette templates were all so
rely stale, and we had no significant effort invested into either for more than two years.
...the breakdown: 1 master screen media file which imports 4 files: a base file (bulk of formatting) a file for finance/table formatting color file (override colors and background images for specific color scheme) temp file (used for styles associated with temporary features and ad-
related pages) 1 print media file 1 aural media file 3 master alternate style sheets which import 1 file each the 3 imported files set alternate font sizes (small, large, larger) how much did the size of a typical wired news page shrink?
...for sites that
rely on a left or right column for primary navigation, this content order requirement of float usage may produce desired and advantageous behavior.
...And 2 more matches
Inner-browsing extending the browser navigation paradigm - Archive of obsolete content
this model is also interesting because is optimized to access contextual data instead
reloading full web pages.
...extending traditional hypertext navigation the hypertext approach to developing web pages, in which developers format text layouts into pages and link those pages to
related content, is analogous to a book or a magazine: readers view pages, go to other pages for more information, and view resources listed as references on that page.
...if the data changes, it will not update unless you
reload the web page.
...And 2 more matches
MMgc - Archive of obsolete content
write barriers are not needed for c++ objects that exist pu
rely on the stack, and never in the heap.
...that means that it might occasionally turn up a "false positive." a false positive is a memory location that looks like it contains a pointer to a gc object, but it's really just some jpeg image data or an integer variable or some other un
related data.
...class object { public: object() { refcount = 0; } void addref() { refcount++; } void
release() { if (!--refcount) delete this; } int refcount; } reference counting is a kind of automatic memory management.
...And 2 more matches
Source code directories overview - Archive of obsolete content
extensions contains c interfaces, c code, xul and javascript code for various add-ins that are
related to browsing.
... modules contains c code for various different browsing
related features that are built into mozilla.
... rdf contains c interfaces and code for accessing various data and organizing their
relationships according to rdf.
...And 2 more matches
URIs and URLs - Archive of obsolete content
there are however two interfaces which loosely
relate to the distinction between uri and url as per the above definition: nsiuri and nsiurl.
... noteable differences necko does not support certain deprecated forms of
relative urls, based on the following part of rfc 2396: if the scheme component is defined, indicating that the reference starts with a scheme name, then the reference is interpreted as an absolute uri and we are done.
...due to a loophole in prior specifications (rfc1630), some parsers allow the scheme name to be present in a
relative uri if it is the same as the base uri scheme.
...And 2 more matches
Recursive Generation - Archive of obsolete content
in the graph, item c has a
relateditem arrow pointing out of it to item d.
...here is the content that was generated after one iteration: <vbox datasources="http://www.xulplanet.com/ds/sample.rdf" ref="http://www.xulplanet.com/rdf/a"> <template> <query> <content uri="?start"/> <triple subject="?start" predicate="http://www.xulplanet.com/rdf/
relateditem" object="?
relateditem"/> </query> <action> <hbox uri="?
relateditem"> <button label="?start"/> <button label="?
relateditem"/> </hbox> </action> </template> <hbox id="http://www.xulplanet.com/rdf/b"> <button label="http://www.xulplanet.com/rdf/a"/> <button label="http://www.xulplanet.com/rdf/b"/> </hbox> <hbox id="http://...
...to begin, b is evaluated and seeded with the right value: (?start = http://www.xulplanet.com/rdf/b) the <triple> statement is then examined, however, item b doesn't have a
relateditem arc out of it, so the result is rejected.
...And 2 more matches
XML - Archive of obsolete content
this article describes the
relationship of xul to xml, its parent language.
... when we say language, we mean that developers create a set of terms, orlexicon, and a
relationship between these terms, or what some people call agrammar.
...html -- which is a derived language like our memoml (see the appendix notes for information on the geneology of markup languages) -- has been created for the purposes of representing hypertext documents and the basic
relationships between them.
...And 2 more matches
listbox - Archive of obsolete content
« xul reference home [ examples | attributes | properties | methods |
related ] this element is used to create a list of items where one or more of the items may be selected.
...to enable the element, leave this attribute out enti
rely.
...be aware, however, that some elements, such as textbox will display the value visually, so in order to me
rely associate data with an element, you could 1) use another attribute like "value2" or "data-myatt" (as in the html5 draft), as xul does not require validation (less future-proof); 2) use setattributens() to put custom attributes in a non-xul namespace (serializable and future-proof); 3) use setuserdata() (future-proof and clean, but not easily serializable).
...And 2 more matches
menuitem - Archive of obsolete content
« xul reference home [ examples | attributes | properties | methods |
related ] a single choice in a menupopup element.
...to enable the element, leave this attribute out enti
rely.
...the following values are accepted, or leave out the attribute enti
rely for default handling: always the image is always checked to see whether it should be
reloaded.
...And 2 more matches
toolbarbutton - Archive of obsolete content
« xul reference home [ examples | attributes | properties | methods |
related ] a button that appears on a toolbar.
...
relevant accessbility guidelines all toolbar functionality should be duplicated elsewhere in the application where possible, provide keyboard alternatives.
...to enable the element, leave this attribute out enti
rely.
...And 2 more matches
window - Archive of obsolete content
« xul reference home [ examples | attributes | properties | methods |
related ] describes the structure of a top-level window.
... values for window type as found on mxr: http://mxr.mozilla.org/mozilla-
release/search?string=windowtype navigator:browser - looks like if window has gbrowser it has this window type devtools:scratchpad - scratchpad windows navigator:view-source - the view source windows properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidde...
...
related elements prefwindow, dialog, dialogheader
related topics user notes to change the icon to a window's title bar check this page on window icons.
...And 2 more matches
NPN_Version - Archive of obsolete content
syntax #include <npapi.h> void npn_version(int* plugin_major, int* plugin_minor, int* netscape_major, int* netscape_minor); parameters the function has the following parameters: plugin_major pointer to a plug-in's major version number; changes with major code
release number.
... plugin_minor pointer to a plug-in's minor version number; changes with point
release number.
... netscape_major pointer to the browser's major version; changes with major code
release number.
...And 2 more matches
Index - Game development
the correct decision enti
rely depends on the trade-offs that you are willing (and unwilling) to make.
...a testament to what can be done with javascript, webgl, and
related technologies.
...we can make the game scale to fit on any screen size automatically during the p
reload stage, so we don't have to worry about it later.
...And 2 more matches
Game promotion - Game development
you should also blog about everything
related to your gamedev activities.
...honesty is key and you should be authentic, because nobody likes boring press
releases or pushy advertisements.
...be sure to check first if they are dealing with specific genres of games or platforms, so you don't send them something that is not
relevant to them in the first place.
...And 2 more matches
Web fonts - Learn web development
examples include font squir
rel, dafont, and everything fonts.
...go to font squir
rel and choose two fonts — a nice interesting font for the headings (maybe a nice display or slab serif font), and slightly less flashy and more readable font for the paragraphs.
... go to the fontsquir
rel webfont generator.
...And 2 more matches
The web and web standards - Learn web development
in the next few years that followed, the web exploded, with multiple browsers being
released, thousands of web servers being set up, and millions of web pages being created.
...you wouldn't want a single company suddenly deciding to put the entire web behind a paywall, or
releasing a new version of html that everyone has to buy to continue making web sites, or worse still, just deciding they aren't interested any more and just turning it off.
... accessibility means making your websites usable by as many different kinds of people as possible (
related concepts are diversity and inclusion, and inclusive design).
...And 2 more matches
Introduction to events - Learn web development
the node.js event model
relies on listeners to listen for events and emitters to emit events periodically — it doesn't sound that different, but the code is quite different, making use of functions like on() to register an event listener, and once() to register an event listener that unregisters after it has run once.
... the other two are
relatively interchangeable, at least for simple uses: event handler properties have less power and options, but better cross-browser compatibility (being supported as far back as internet explorer 8).
... other event concepts in this section, we briefly cover some advanced concepts that are
relevant to events.
...And 2 more matches
Video and Audio APIs - Learn web development
nts/heydings_controls-webfont.eot'); src: url('fonts/heydings_controls-webfont.eot?#iefix') format('embedded-opentype'), url('fonts/heydings_controls-webfont.woff') format('woff'), url('fonts/heydings_controls-webfont.ttf') format('truetype'); font-weight: normal; font-style: normal; } button:before { font-family: heydingscontrolsregular; font-size: 20px; position:
relative; content: attr(data-icon); color: #aaa; text-shadow: 1px 1px 0px black; } first of all, at the top of the css we use a @font-face block to import a custom web font.
... last but not least, let's look at the css for the timer: .timer { line-height: 38px; font-size: 10px; font-family: monospace; text-shadow: 1px 1px 0px black; color: white; flex: 5; position:
relative; } .timer div { position: absolute; background-color: rgba(255,255,255,0.2); left: 0; top: 0; width: 0; height: 38px; z-index: 2; } .timer span { position: absolute; z-index: 3; left: 19px; } we set the outer .timer <div> to have flex: 5, so it takes up most of the width of the controls bar.
... we also give it position:
relative, so that we can position elements inside it conveniently according to it's boundaries, and not the boundaries of the <body> element.
...And 2 more matches
Multimedia: video - Learn web development
optimizing video delivery it's best to compress all video, optimize <source> order, set autoplay, remove audio from muted video, optimize video p
reload, and consider streaming the video.
...this is the ffmpeg command string to remove audio: ffmpeg -i original.mp4 -an -c:v copy audiofreeversion.mp4 video p
reload the p
reload attribute has three available options: auto|metadata|none.
... setting p
reload="none" results in none of the video being downloaded until playback.
...And 2 more matches
Introduction to automated testing - Learn web development
to update node, the most
reliable way is to download and install an updated installer package from their website (see link above).
...you could also try using other solutions: grunt works in a very similar way to gulp, except that it
relies on tasks specified in a config file, rather than using written javascript.
...the dashboard will provide you details
related to how many minutes you have consumed, how many concurrent sessions are running, your total number of tests to date, and more.
...And 2 more matches
Introduction to cross browser testing - Learn web development
note: make the web work for everyone provides more useful perspective on the different browsers people use, their market share, and
related cross browser compatibility issues.
...the site should work enti
rely in the last few versions of the most popular desktop and mobile (ios, android, windows phone) browsers — this should include chrome (and opera as it is based on the same rendering engine as chrome), firefox, ie/edge, and safari.
... testing on pre
release browsers it is often a good idea to test on pre
release versions of browsers; see the following links: firefox developer edition edge insider preview safari technology preview chrome canary opera developer this is especially prevalent if you are using very new technologies in your site, and you want to test against the latest implementations, or if you are coming across a bug in the ...
...And 2 more matches
Command line crash course - Learn web development
out of the box, here are just a few of the things the command line can do, along with names of
relevant tools in each case: navigate your computer’s file system along with base level tasks such as create, copy, rename and delete: move around your directory structure: cd create directories: mkdir create files (and modify their metadata): touch copy files: cp move files: mv delete files or directories: rm download files found at specific urls: curl search for fra...
...this usually becomes easier as you get more familiar with the structure of your file system, but if you are not sure of the path you can usually figure it out with a combination of the ls command (see below), and by clicking around in your explorer/finder window to see where a directory is,
relative to where you currently are.
...omitting the leading slash like we’ve done above makes the path
relative to the your present working directory.
...And 2 more matches
Multiprocess on Windows
this is a problem for smart pointers that are not apartment aware; they will try to addref() and
release() on whichever thread they happen to be running.
... the mscom library provides a set of smart pointers that are aware of com apartments: mscom smart pointer types pointer type
release semantics stauniqueptr<t> forces reference to be
released on the main thread.
... mtauniqueptr<t> forces reference to be
released on an mta thread.
...And 2 more matches
Creating reftest-based unit tests
and a browser may change the visual effect produced by a tag while still being compliant with
relevant standards.
...sorry about this, but the
released builds and the nightly builds are built with the "--disable-tests" option and reftest will not work - see bug 369809.
... reftests and elevated privileges in general, reftests that you intend to check-in must not
rely on behaviour that requires elevated privileges.
...And 2 more matches
Simple SeaMonkey build
ev libdbus-glib-1-dev libasound2-dev libcurl4-openssl-dev libnotify-dev libgstreamer0.10-dev libgstreamer-plugins-base0.10-dev libiw-dev libxt-dev mesa-common-dev libpulse-dev fedora linux centos rhel: sudo yum groupinstall 'development tools' 'development libraries' 'gnome software development' sudo yum install mercurial autoconf213 glibc-static libstdc++-static yasm wi
reless-tools-devel mesa-libgl-devel alsa-lib-devel libxt-devel gstreamer-devel gstreamer-plugins-base-devel pulseaudio-libs-devel # 'development tools' is defunct in fedora 19 and above use the following sudo yum groupinstall 'c development tools and libraries' sudo yum group mark install "x software development" mac: install xcode tools.
... # get the source # for aurora, use https://hg.mozilla.org/
releases/comm-aurora/ and comm-aurora instead # for beta, use https://hg.mozilla.org/
releases/comm-beta/ and comm-beta instead # for
release, use https://hg.mozilla.org/
releases/comm-
release/ and comm-
release instead hg clone https://hg.mozilla.org/comm-central/ cd comm-central python client.py checkout # set up a basic .mozconfig file echo 'ac_add_options --enable-application=suite' > .mozconfig ...
...echo 'mk_add_options moz_objdir=/path/to/comm-central/obj-sm-
release' >> .mozconfig # specify amount of parallel building.
...And 2 more matches
Simple Sunbird build
ubuntu linux: sudo apt-get build-dep sunbird sudo apt-get install mercurial libasound2-dev libcurl4-openssl-dev libnotify-dev libiw-dev autoconf2.13 cvs fedora linux: sudo yum groupinstall 'development tools' 'development libraries' 'gnome software development' sudo yum install mercurial autoconf213 glibc-static libstdc++-static yasm wi
reless-tools-devel mesa-libgl-devel mac: install xcode tools.
...echo 'mk_add_options moz_objdir=@topsrcdir@/objdir-sb-
release' >> .mozconfig # ...in this directory...
... parallel compilation on windows is # un
reliable now due to bug 524149.
...And 2 more matches
The Firefox codebase: CSS Guidelines
this document contains guidelines defining how css inside the firefox codebase should be written, it is notably
relevant for firefox front-end engineers.
...try to follow the style of existing or
related code.
...if this isn't possible, you can also try introducing a :not() to prevent the other rule from applying, this is especially
relevant for different element states (:hover, :active, [checked] or [disabled]).
...And 2 more matches
Script security
because the wrapper we choose is specific to the
relationship between the two compartments, the security policy it implements can be static: when the caller uses the wrapper, there's no need to check who is making the call or where it is going.
... privileged to unprivileged code the most obvious example of this kind of security
relation is between system-privileged chrome code and untrusted web content, but there are other examples in gecko.
... security checks to determine the security
relation between two compartments, gecko uses two concepts: security principals and the act of subsuming.
...And 2 more matches
Download
note: you shouldn't
rely on this property being equal to totalbytes to determine whether the download is completed.
... this property is
relevant while the download is in progress, and also if it failed or has been canceled.
... if the download has been completed successfully, this property is not
relevant anymore.
...And 2 more matches
Sqlite.jsm
this can be an absolute or
relative path.
... if a
relative path is given, it is interpreted as
relative to the current profile's directory.
...this is ra
rely needed by external callers.
...And 2 more matches
Using JavaScript code modules
sharing objects using code modules an extremely important behavior of components.utils.import() is that modules are cached when loaded and subsequent imports do not
reload a new version of the module, but instead use the previously cached version.
...once this method has been called, references to the module will continue to work but any subsequent import of the module will
reload it and give a new reference.
...the basic syntax of a resource url is as follows: resource://<alias>/<
relative-path>/<file.js|jsm> the <alias> is an alias to a location, usually a physical location
relative to the application or xul runtime.
...And 2 more matches
XPCOMUtils.jsm
w function definelazygetter(aobject, aname, alambda); function definelazymodulegetter(aobject, aname, aresource, [optional] asymbol); function definelazyservicegetter(aobject, aname, acontract, ainterfacename); function generatensgetfactory(componentsarray); function generateci(classinfo); function generateqi(interfaces); void import
relative(that, path, scope); generator itersimpleenumerator(enumerator, interface); generator iterstringenumerator(enumerator); attributes attribute type description categorymanager nsicategorymanager returns a reference to nsicategorymanager.
...} import
relative() imports a javascript code module given the calling javascript code module's global object (you should specify this) and a path
relative to that module.
... void import
relative( that, path, scope ); parameters that the javascript object of the calling javascript code module's global scope.
...And 2 more matches
Index
15
release phase localization you've made it!
...now you're ready for the final phase: becoming an official l10n
release.
... here, we'll continue to stay true to the original intent of this guide and only present you with the technical information you need to become an official
release.
...And 2 more matches
QA phase
since such is the case, this part of the guide may not be enti
rely applicable to you.
... p
reliminary instructions we will be using the following file directories for this example: your working directory (root)/ mozilla-aurora (en-us source, pulled from http://hg.mozilla.org/
releases/mozilla-aurora )/ l10n-central (directory for l10n directories, one per l10n; often referred to as "l10n base")/ your-locale-code (a directory with your l10n files, in this example we'll use ...
..../mach build config after step 4 update the mozilla source code: $ cd mozilla-aurora $ hg pull -u enter the following command to create the .mozconfig file: $ nano -w .mozconfig enter the following lines in your .mozconfig file: mk_add_options moz_objdir=@topsrcdir@/../firefox-build ac_add_options --disable-compile-environment ac_add_options --with-l10n-base=../l10n-central # path
relative to moz_objdir ac_add_options --enable-application=[browser or mail] you will need to specify which application you're localizing in the fourth line (e.g., for firefox, that's browser, thunderbird would be mail).
...And 2 more matches
McCoy
we hope to resolve this for the next
release - or around the year 2100.
... https://fireclipse.svn.sourceforge.net/svnroot/fireclipse/trunk/fireclipseextensions/chromebug/mccoy/signontheline/ bug 396525 - patch to mccoy https://bugzilla.mozilla.org/show_bug.cgi?id=396525 signing update manifests before you
release your add-on in order to verify the update manifests applications need to already have information from you for how to verify it.
... this is in the form of the public part of a cryptographic key included in the original add-on you
release.
...And 2 more matches
NSS FAQ
for the latest nss
release notes and detailed platform information, see project information.
...for complete details, see encryption technologies available in nss 3.11 what is the
relationship between nss and psm?
...(in recent nspr
releases, the nspr threading model is compatible with the native threading model if the os has native threads.) alternatively, you can adapt the open-source nspr implementation to be compatible with your existing application's threading models.
...And 2 more matches
Using JSS
using jss newsgroup: mozilla.dev.tech.crypto if you have already built jss, or if you are planning to use a binary
release of jss, here's how to get jss working with your code.
... jss dependencies core library name description binary
release location nspr4 nspr os abstraction layer http://ftp.mozilla.org/pub/mozilla.org/nspr/
releases plc4 nspr standard c library replacement functions plds4 nspr data structure types nss3 nss crypto, pkcs #11, and utilities http://ftp.mozilla.org/pub/mozilla.org/security/nss/
releases ssl3 n...
...if you are downloading binaries, get them from the binary
release locations in the above table.
...And 2 more matches
JSS
the jss project has been
relocated!
...ked out from the github: git clone git@github.com:dogtagpki/jss.git -- or -- git clone https://github.com/dogtagpki/jss.git all future upstream enquiries to jss should now use the pagure issue tracker system: https://pagure.io/jss/issues documentation regarding the jss project should now be viewed at: http://www.dogtagpki.org/wiki/jss note: as much of the jss documentation is so
rely out-of-date, updated information will be a work in progress, and many portions of any legacy documentation will be re-written over the course of time.
... for information on downloading nss
releases, see nss sources building testing.
...And 2 more matches
Rhino history
at the time, netscape was planning to produce a version of navigator written enti
rely in java and so it needed an implementation of javascript written in java.
... rhino was
released to mozilla.org in april 1998.
... originally rhino classfile generation had been held back from
release.
...And 2 more matches
JSAPI User Guide
your application will expose objects that are
relevant for the kind of scripts you want to write.
... keeping objects alive if your jsapi application crashes, it is likely due to a gc-
related error.
...these two functions, both available only in debug builds, are especially useful for debugging gc-
related crashes: use js_setgczeal to enable extra garbage collection.
...And 2 more matches
JSObjectOps.dropProperty
details of the api may change from one
release to the next.
... the jsobjectops.dropproperty callback
releases a jsproperty.
... prop jsproperty * the property to
release.
...And 2 more matches
Shell global objects
filename is
relative to the current working directory.
... load
relativetoscript(['foo.js' ...]) load files named by string arguments.
... filename is
relative to the calling script.
...And 2 more matches
History Service Design
this is possible through a
relevance algorithm that assigns a param called frecency to every page in history, see the places frecency algorithm for major informations.
... actual tasks executed by this service include: database creation, maintenance and initialization: all services
rely on a common shared database called places.sqlite.
...
relevance calculation: maintain and expire frecency values for pages.
...And 2 more matches
Component Internals
the illustration below shows the basic
relationship between the shared library containing the component implementation code you write and the xpcom framework itself.
... another, even more basic view of this
relationship of components to the files and interfaces that define them is shown in onion peel view of xpcom component creation in the next chapter.
...additionally, it
relates the components to the type libraries in which the binary representations of the interfaces they support are defined.
...And 2 more matches
Mozilla internal string guide
nsliteral[c]string which should ra
rely be constructed explicitly but usually through the ""_ns and u""_ns user-defined string literals.
...the web-
relevant ones are defined in the encoding standard.
...if your c++ code is interacting with rust code, using utf-8 in nsacstring and me
rely validating it when converting to rust strings is more efficient than using nsastring on the c++ side.
...And 2 more matches
IAccessibleComponent
locationinparent() returns the location of the upper left corner of the object's bounding box
relative to the immediate parent object.
... the coordinates of the bounding box are given
relative to the parent's coordinate system.
... the coordinates of the returned position are
relative to this object's parent or
relative to the screen on which this object is rendered if it has no parent.
...And 2 more matches
nsIDOMNSHTMLDocument
lean querycommandenabled(in domstring commandid); boolean querycommandindeterm(in domstring commandid); boolean querycommandstate(in domstring commandid); boolean querycommandsupported(in domstring commandid); domstring querycommandtext(in domstring commandid); obsolete since gecko 14.0 domstring querycommandvalue(in domstring commandid); void
releaseevents(in long eventflags); void routeevent(in nsidomevent evt); void write(); obsolete since gecko 2.0 void writeln(); obsolete since gecko 2.0 attributes attribute type description alinkcolor domstring same as body.alink bgcolor domstring same as body.bgcolor compatmode domstring returns "backcompat"...
... execcommandshowhelp() obsolete since gecko 14.0 (firefox 14.0 / thunderbird 14.0 / seamonkey 2.11) this method never did anything but throw an exception, and was removed enti
rely in gecko 14.0 (firefox 14.0 / thunderbird 14.0 / seamonkey 2.11).
... querycommandtext() obsolete since gecko 14.0 (firefox 14.0 / thunderbird 14.0 / seamonkey 2.11) this method never did anything but throw an exception, and was removed enti
rely in gecko 14.0 (firefox 14.0 / thunderbird 14.0 / seamonkey 2.11).
...And 2 more matches
nsIFile
void append
relativenativepath(in acstring
relativefilepath); void append
relativepath(in astring
relativefilepath); nsifile clone(); boolean contains(in nsifile infile); void copyto(in nsifile newparentdir, in astring newname); void copytofollowinglinks(in nsifile newparentdir, in astring newname); void copytofollowinglinksnative(in nsifile newparentdir, in a...
... void create(in unsigned long type, in unsigned long permissions); void createunique(in unsigned long type, in unsigned long permissions); boolean equals(in nsifile infile); boolean exists(); acstring get
relativedescriptor(in nsifile fromfile); void initwithfile(in nsifile afile); void initwithnativepath(in acstring filepath); void initwithpath(in astring filepath); boolean isdirectory(); boolean isexecutable(); boolean isfile(); boolean ishidden(); boolean isreadable(); boolean isspecial(); boolean issymlink(); boolean iswrit...
... void normalize(); file openansifiledesc(in string mode); prfiledescstar opennsprfiledesc(in long flags, in long mode); void renameto(in nsifile newparentdir, in astring newname); void remove(in boolean recursive); void reveal(); void set
relativedescriptor(in nsifile fromfile, in acstring
relativedesc); attributes attribute type description directoryentries nsisimpleenumerator returns an enumeration of the elements in a directory.
...And 2 more matches
nsIIOService
when in offline mode, attempts to access the network will fail (although this does not necessarily cor
relate with whether there is actually a network available -- that's hard to detect without causing the dialer to come up).
...this method is provided pu
rely as an optimization.
...for loads that are not
related to any document, such as loads coming from addons or internal browser features, use null here.
...And 2 more matches
nsISHistoryListener
method overview boolean onhistorygoback(in nsiuri abackuri); boolean onhistorygoforward(in nsiuri aforwarduri); boolean onhistorygotoindex(in long aindex, in nsiuri agotouri); void onhistorynewentry(in nsiuri anewuri); boolean onhistorypurge(in long anumentries); boolean onhistory
reload(in nsiuri a
reloaduri, in unsigned long a
reloadflags); methods onhistorygoback() called when navigating to a previous session history entry, for example due to an nsiwebnavigation.goback() call.
...onhistory
reload() called when the current document is
reloaded, for example due to an nsiwebnavigation.
reload() call.
... boolean onhistory
reload( in nsiuri a
reloaduri, in unsigned long a
reloadflags ); parameters a
reloaduri the uri of the document to be
reloaded.
...And 2 more matches
nsISessionStore
astring getclosedwindowdata(); astring gettabstate(in nsidomnode atab); astring gettabvalue(in nsidomnode atab, in astring akey); astring getwindowstate(in nsidomwindow awindow); astring getwindowvalue(in nsidomwindow awindow, in astring akey); void init(in nsidomwindow awindow); void persisttabattribute(in astring aname); void resto
relastsession(); void setbrowserstate(in astring astate); void settabstate(in nsidomnode atab, in astring astate); void settabvalue(in nsidomnode atab, in astring akey, in astring astringvalue); void setwindowstate(in nsidomwindow awindow, in astring astate, in boolean aoverwrite); void setwindowvalue(in nsidomwindow awindow, in astring akey, in astring ...
...astringvalue); nsidomnode undoclosetab(in nsidomwindow awindow, in unsigned long aindex); nsidomwindow undoclosewindow(in unsigned long aindex); attributes attribute type description canresto
relastsession boolean is it possible to restore the previous session.
... resto
relastsession() restore the previous session if possible.
...And 2 more matches
nsISupports
last changed in gecko 1.0 method overview nsrefcnt addref();violates the xpcom interface guidelines void queryinterface(in nsiidref uuid, [iid_is(uuid),retval] out nsqiresult result); nsrefcnt
release();violates the xpcom interface guidelines methods violates the xpcom interface guidelines addref() notifies the object that an interface pointer has been duplicated.
... note: the interface pointer, aresult, returned by queryinterface must be
released by a call to
release() when it is no longer needed.
... violates the xpcom interface guidelines
release() notifies the object that an interface pointer has been destroyed and any resources the object held on behalf of the client can be
released.
...And 2 more matches
nsITelemetry
returns false if the user has not opted into "extended telemetry" on the
release channel, when the user has explicitly opted out of telemetry on nightly/aurora/beta or if manually set to false during tests.
... canrecord
releasedata readonly boolean a flag indicating whether telemetry is recording
release data.
... canrecordpre
releasedata readonly boolean a flag indicating whether telemetry is recording pre-
release data.
...And 2 more matches
nsIURI
scheme userpass host port ref ftp :// username@password @ hostname : portnumber /pathname?query=value #ref method overview nsiuri clone(); nsiuri cloneignoringref(); boolean equals(in nsiuri other); boolean equalsexceptref(in nsiuri other); autf8string resolve(in autf8string
relativepath); boolean schemeis(in string scheme); attributes attribute type description asciihost acstring the uri host with an ascii compatible encoding.
... this is
related to the web origin concept of rfc6454.
... resolve() resolves a
relative uri string, using this uri as the base.
...And 2 more matches
nsIWebNavigation
method overview void goback void goforward void gotoindex( in long index ) void loaduri(in wstring uri , in unsigned long loadflags , in nsiuri referrer , in nsiinputstream postdata, in nsiinputstream headers) void
reload(in unsigned long
reloadflags) void stop(in unsigned long stopflags) constants load flags constant value description load_flags_mask 65535 this flag defines the range of bits that may be specified.
... load_flags_charset_change 1024 this flag specifies that a
reload was triggered as a result of detecting an incorrect character encoding while parsing a previously loaded document.
...
reload() tells the object to
reload the current page.
...And 2 more matches
Frequently Asked Questions
release an nscomptr before it goes out of scope?
...whenever an nscomptr takes on a new value, it always
releases its old value, if any.
...the old referent will be
released.
...And 2 more matches
Mail composition back end
this will contain all of the
relevant header information for message creation prbool digest_p, - this is a flag that says that most of the documents we are attaching are themselves messages, and so we should generate a multipart/digest container instead of multipart/mixed.
... const struct nsmsgattachedfile *p
reloaded_attachments, - attachments that are already locally stored on disk (note: both attachments and p
reloaded_attachments cannot be specified on a single call void *
relatedpart /* nsmsgsendpart */, - a
related part for multipart
related operations nsimsgsendlistener **alistenerarray) = 0; - an array of listeners...
...this will contain all of the
relevant header information for message delivery nsfilespec *sendfilespec, - the file spec for the message being sent prbool deletesendfileoncompletion, - tell the back end if it should delete the file upon successful completion prbool digest_...
...And 2 more matches
Thunderbird extensions
much of it may no longer be
relevant.
...gloda stands for « global database », and creates thunderbird-wide
relations between objects.
...all these concepts are
related : a conversation contains messages which are linked to identities (from field, to field) which are themselves part of a contact: indeed, a contact has multiple identities.
...And 2 more matches
Initialization and Destruction - Plugins
nperror np_initialize(void) { }; after the last plug-in instance is deleted, the browser calls np_shutdown, which
releases the memory or resources allocated by np_initialize.
...to reduce memory overhead, plug-ins are usually loaded only when needed and
released as soon as possible.
... shutdown when the application no longer needs the plug-in, it is shut down and
released.
...And 2 more matches
Plug-in Basics - Plugins
these functions are exported from the plug-in dll and accessed with a system table lookup, which means that they are not
related to any particular plug-in instance.
...there are also a couple of functions (i.e., np_initialize and np_shutdown) that are direct library entry points and not
related to any particular plug-in instance.
...embedded plug-ins are commonly used for multimedia images
relating to text in the page, such as the adobe flash plug-in.
...And 2 more matches
DevTools API - Firefox Developer Tools
reloadtarget(force)
reloads the current target of the toolbox.
... parameters: force {boolean} - if true the target is shift-
reloaded i.e.
... the cache is bypassed during the
reload.
...And 2 more matches
Examine and edit CSS - Firefox Developer Tools
for example, searching for "color" will highlight declarations containing border-bottom-color and background-color as well as just color.: if you enclose the search query in backticks, like this: `color`, the search is restricted to exact matches: expanding shorthand properties shorthand properties can be expanded to display their
related longhand properties by clicking the arrow besides them.
...you can tab through the filenames/line numbers; pressing enter/return will open up the
relevant file at that point in the style editor.
... typing in the search box performs a live filtering of the list, so, for example, if you just want to see font-
related settings, you can type "font" in the search box, and only properties with "font" in the name will be listed.
...And 2 more matches
Attr - Web APIs
<div id="interfacediagram" style="display: inline-block; position:
relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monac...
... owne
relement read only the element holding the attribute.
...while the type information contained in this attribute is guaranteed to be correct after loading the document or invoking document.normalizedocument, this property may not be
reliable if the node was moved.
...And 2 more matches
HTMLAreaElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position:
relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle"...
... htmlareaelement.
rel is a domstring that reflects the
rel html attribute, indicating
relationships of the current document to the linked resource.
... htmlareaelement.
rellist read only returns a domtokenlist that reflects the
rel html attribute, indicating
relationships of the current document to the linked resource, as a list of tokens.
...And 2 more matches
HTML Drag and Drop API - Web APIs
the user may select draggable elements with a mouse, drag those elements to a droppable element, and drop them by
releasing the mouse button.
...a typical drag operation begins when a user selects a draggable element, drags the element to a droppable element, and then
releases the dragged element.
... dragend ondragend …a drag operation ends (such as
releasing a mouse button or hitting the esc key; see finishing a drag.) dragenter ondragenter …a dragged item enters a valid drop target.
...And 2 more matches
Basic concepts - Web APIs
websql database is a
relational database access system, whereas indexeddb is an indexed table system.
...indexeddb is not a
relational database with tables representing collections of rows and columns.
... in a traditional
relational data store, you would have a table that stores a collection of rows of data and columns of named types of data.
...And 2 more matches
PublicKeyCredentialCreationOptions.attestation - Web APIs
this is a string whose value indicates the preference regarding the attestation transport, between the authenticator, the client and the
relying party.
... the attestation is a mean for the
relying party to verify the origin of the authenticator with an attestation certificate authority.
... syntax attestation = publickeycredentialcreationoptions.attestation value a string which may be "none": the
relying party is not interested in this attestation.
...And 2 more matches
PublicKeyCredentialCreationOptions - Web APIs
properties publickeycredentialcreationoptions.rp an object describing the
relying party which requested the credential creation.
... publickeycredentialcreationoptions.challenge a buffersource, emitted by the
relying party's server and used as a cryptographic challenge.
...this is provided by the
relying party to avoid creating new public key credentials for an existing user who already have some.
...And 2 more matches
RTCConfiguration.iceTransportPolicy - Web APIs
the permitted values are: all the ice agent is permitted to use any kind of candidate, including both local and
relay candidates.
...
relay the ice agent only considers media
relay candidates when evaluating candidates.
... this includes, for example, those candidates
relayed by a stun or turn server.
...And 2 more matches
RTCIceCandidateStats - Web APIs
the webrtc api's rtcicecandidatestats dictionary provides statistics
related to an rtcicecandidate.
... deleted optional a boolean value indicating whether or not the candidate has been
released or deleted; the default value is false.
... for local candidates, it's value is true if the candidate has been deleted or
released.
...And 2 more matches
Range - Web APIs
range.setstartbefore() sets the start position of a range
relative to another node.
... range.setstartafter() sets the start position of a range
relative to another node.
... range.setendbefore() sets the end position of a range
relative to another node.
...And 2 more matches
SVGAElement - Web APIs
svgaelement.download see htmlancho
relement.download.
... svgaelement.href see htmlancho
relement.href.
... svgaelement.referrerpolicy see htmlancho
relement.referrerpolicy.
...And 2 more matches
SVGSVGElement - Web APIs
<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-...
...t fragment using an svg view specification fragment identifier (i.e., #svgview(…)), then: the values for viewbox, preserveaspectratio, zoomandpan, transform and viewtarget within currentview will correspond to the values from the svg view specification fragment identifier svgsvgelement.currentscale on an outermost <svg> element, this float attribute indicates the current scale factor
relative to the initial view to take into account user magnification and panning operations.
... svgsvgelement.getcurrenttime() returns the current time in seconds
relative to the start time for the current svg document fragment.
...And 2 more matches
Using Service Workers - Web APIs
so documents will have to be
reloaded to actually be controlled.
... next, we use the serviceworkercontainer.register() function to register the service worker for this site, which is just a javascript file residing inside our app (note this is the file's url
relative to the origin, not the js file that references it.) the scope parameter is optional, and can be used to specify the subset of your content that you want the service worker to control.
... the path to your service worker file is not written correctly — it needs to be written
relative to the origin, not your app’s root directory.
...And 2 more matches
Using readable streams - Web APIs
this is done using the readablestream.getreader() method: // fetch the original image fetch('./tortoise.png') // retrieve its body as readablestream .then(response => response.body) .then(body => { const reader = body.getreader(); invoking this method creates a reader and locks it to the stream — no other reader may read this stream until this reader is
released, e.g.
... by invoking readablestreamdefaultreader.
releaselock().
... if the stream becomes errored, the promise will be rejected with the
relevant error.
...And 2 more matches
Touch.clientX - Web APIs
the touch.clientx read-only property returns the x coordinate of the touch point
relative to the viewport, not including any scroll offset.
... syntax touchitem.clientx; return value a long representing the x coordinate of the touch point
relative to the viewport, not including any scroll offset.
...the touch.clientx property is the horizontal coordinate of a touch point
relative to the browser's viewport excluding any scroll offset.
...And 2 more matches
Touch.clientY - Web APIs
the touch.clienty read-only property returns the y coordinate of the touch point
relative to the browser's viewport, not including any scroll offset.
... syntax touchitem.clienty; return value a long value representing the y coordinate of the touch point
relative to the viewport, not including any scroll offset.
...the touch.clientx property is the horizontal coordinate of a touch point
relative to the browser's viewport excluding any scroll offset.
...And 2 more matches
Touch.pageX - Web APIs
the touch.pagex read-only property returns the x coordinate of the touch point
relative to the viewport, including any scroll offset.
... syntax touchitem.pagex; return value a long representing the x coordinate of the touch point
relative to the viewport, including any scroll offset.
...the touch.pagex property is the horizontal coordinate of a touch point
relative to the viewport (in css pixels), including any scroll offset.
...And 2 more matches
Touch.pageY - Web APIs
the touch.pagey read-only property returns the y coordinate of the touch point
relative to the viewport, including any scroll offset.
... syntax touchitem.pagey; return value a long value that representes the y coordinate of the touch point
relative to the viewport, including any scroll offset.
...the touch.pagex property is the horizontal coordinate of a touch point
relative to the viewport (in css pixels), including any scroll offset.
...And 2 more matches
Touch.screenX - Web APIs
summary returns the x coordinate of the touch point
relative to the screen, not including any scroll offset.
... syntax var x = touchitem.screenx; return value x the x coordinate of the touch point
relative to the screen, not including any scroll offset.
...the touch.screenx property is the horizontal (x) coordinate of a touch point
relative to the screen in css pixels.
...And 2 more matches
UIEvent - Web APIs
<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/event" target="_top"><rect x="1" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="38.5" y="30" font...
... uievent.layerx read only returns the horizontal coordinate of the event
relative to the current layer.
... uievent.layery read only returns the vertical coordinate of the event
relative to the current layer.
...And 2 more matches
URL() - Web APIs
syntax const url = new url(url [, base]) parameters url a usvstring representing an absolute or
relative url.
... if url is a
relative url, base is required, and will be used as the base url.
... base optional a usvstring representing the base url to use in case url is a
relative url.
...And 2 more matches
Establishing a connection: The WebRTC perfect negotiation pattern - Web APIs
perfect negotiation works by assigning each of the two peers a role to play in the negotiation process that's enti
rely separate from the webrtc connection state: a polite peer, which uses ice rollback to prevent collisions with incoming offers.
... the perfect negotiation logic now we get into the true perfect negotiation logic, which functions enti
rely independently from the rest of the application.
...gnaler.send(description: pc.localdescription); } } else if (candidate) { try { await pc.addicecandidate(candidate); } catch(err) { if (!ignoreoffer) { throw err; } } } } catch(err) { console.error(err); } } while the difference in code size is minor, and the complexity isn't reduced much either, the code is much, much more
reliable.
...And 2 more matches
WebRTC API - Web APIs
webrtc consists of several inter
related apis and protocols which work together to achieve this.
... more details and links to
relevant guides and tutorials needed webrtc reference because webrtc provides interfaces that work together to accomplish a variety of tasks, we have divided up the reference by category.
... rtcpeerconnectioniceevent represents events that occur in
relation to ice candidates with the target, usually an rtcpeerconnection.
...And 2 more matches
Fundamentals of WebXR - Web APIs
this is an important fact to keep in mind; while webxr manages the timing, scheduling, and the various points of view
relevant when drawing the scene, it does not actually know how to load and manage models, render and texture them, and so forth.
... that part is enti
rely up to you.
... another key difference is that webxr has integrated support for the advanced input controllers that are used with most mixed reality headsets, while webvr
relied on the gamepad api to support the controllers.
...And 2 more matches
Lighting a WebXR setting - Web APIs
because the webxr device api
relies on other technologies—namely, webgl and frameworks based upon it—to perform all rendering, texturing, and lighting of a scene, the same general lighting concepts apply to webxr settings or scenes as to any other webgl-generated display.
... because the intensity of diffuse light depends on the angle of incidence (the angle between the vector representing the direction from which the light reaches the surface and the surface's normal vector or the vector perpendicular to the surface), the intensity or brightness of the light reflected by an object varies depending on the surface's orientation
relative to the light source.
... the color of each pixel in the final, rendered, scene is calculated using some intricate math that factors in things like: the color of the texture element (the pixel within the texture mapped onto the object; also known as a texel) corresponding to the screen pixel, given the object geometry, the viewer position and orientation
relative to each polygon, and so forth.
...And 2 more matches
Example and tutorial: Simple synth keyboard - Web APIs
idden; width: 660px; height: 110px; white-space: nowrap; margin: 10px; } .keyboard { width: auto; padding: 0; margin: 0; } .key { cursor: pointer; font: 16px "open sans", "lucida grande", "arial", sans-serif; border: 1px solid black; border-radius: 5px; width: 20px; height: 80px; text-align: center; box-shadow: 2px 2px darkgray; display: inline-block; position:
relative; margin-right: 3px; user-select: none; -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; } .key div { position: absolute; bottom: 0; text-align: center; width: 100%; pointer-events: none; } .key div sub { font-size: 10px; pointer-events: none; } .key:hover { background-color: #eef; } .key:active { background-color: #000; color: #fff; ...
...} .octave { display: inline-block; padding: 0 6px 0 0; } .settingsbar { padding-top: 8px; font: 14px "open sans", "lucida grande", "arial", sans-serif; position:
relative; vertical-align: middle; width: 100%; height: 30px; } .left { width: 50%; position: absolute; left: 0; display: table-cell; vertical-align: middle; } .left span, .left input { vertical-align: middle; } .right { width: 50%; position: absolute; right: 0; display: table-cell; vertical-align: middle; } .right span { vertical-align: middle; } .right input { vertical-align: baseline; } javascript the javascript code begins by initializing a number of variables.
...= document.createelement("div"); keyelement.classname = "key"; keyelement.dataset["octave"] = octave; keyelement.dataset["note"] = note; keyelement.dataset["frequency"] = freq; labelelement.innerhtml = note + "<sub>" + octave + "</sub>"; keyelement.appendchild(labelelement); keyelement.addeventlistener("mousedown", notepressed, false); keyelement.addeventlistener("mouseup", note
released, false); keyelement.addeventlistener("mouseover", notepressed, false); keyelement.addeventlistener("mouseleave", note
released, false); return keyelement; } after creating the elements that will represent the key and its label, we configure the key's element by setting its class to "key" (which establishes its appearance).
...And 2 more matches
XRFrame.getPose() - Web APIs
the xrframe method getpose() returns the
relative position and orientation—the pose—of one xrspace to that of another space.
... with this, you can observe the motion of objects
relative to each other and to fixed locations throughout the scene.
... for example, to get the position of a controller
relative to the viewer's head, you would compare the controller's gripspace to the xrreferencespace of type viewer.
...And 2 more matches
XRView - Web APIs
transform read only an xrrigidtransform which describes the current position and orientation of the viewpoint in
relation to the xrreferencespace specified when getviewerpose() was called on the xrframe being rendered.
... it's possible to have xrview objects which represent overlapping regions as well as enti
rely disparate regions; in a game, you might have views that can be presented to observe a remote site using a security camera or other device, for example.
... model view matrix the model view matrix is a matrix which defines the position of an object
relative to the space in which it's located: if objectmatrix is a transform applied to the object to provide its basic position and rotation, then the model view matrix can be computed by multiplying the object's matrix by the inverse of the view transform matrix, like this: mat4.multiply(modelviewmatrix, view.transform.inverse.matrix, objectmatrix); normal matrix the model view's normal matrix is...
...And 2 more matches
ARIA: article role - Accessibility
it is usually set on
related content items such as comments, forum posts, newspaper articles or other items grouped together on one page.
...</div> this example shows two articles side by side on one page that could be structured similarly and are
related.
...the aim of a set of article sections is to indicate their
relationship to one another.
...And 2 more matches
ARIA: row role - Accessibility
associated wai-aria roles, states, and properties context roles role="rowgroup" an optional contextual row parent, it establishes a
relationship between descendant rows.
...unlike a plain cell, the columnheader role establishes a
relationship between it and all cells in the corresponding column.
...unlike a plain cell, the rowheader role establishes a
relationship between it and all cells in the corresponding row.
...And 2 more matches
WAI-ARIA Roles - Accessibility
it is usually set on
related content items such as comments, forum posts, newspaper articles or other items grouped together on one page.aria: banner rolea banner role represents general and informative content frequently placed at the beginning of the page.
... this usually includes a logo, company name, search icon, photo
related to the page, or slogan.aria: button rolethe button role should be used for clickable elements that trigger a response when activated by the user.
...elements containing role="checkbox" must also include the aria-checked attribute to expose the checkbox's state to assistive technology.aria: comment rolethe comment landmark role semantically denotes a comment/reaction to some content on the page, or to a previous comment.aria: complementary rolethe complementary landmark role is used to designate a supporting section that
relates to the main content, yet can stand alone when separated.
...And 2 more matches
Border-image generator - CSS: Cascading Style Sheets
*********************************************/ /* * ui dropdown */ /* dropdown */ .ui-dropdown { height: 2em; width: 120px; font-family: "segoe ui", arial, helvetica, sans-serif; font-size: 12px; background-image: url("https://mdn.mozillademos.org/files/6037/drop_arrow_icon.png"); background-position: right center; background-repeat: no-repeat; background-color: #359740; position:
relative; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; user-select: none; } .ui-dropdown:hover { cursor: pointer; background-color: #208b20; } /* dropdown select button */ .ui-dropdown-select { height: inherit; padding: 0 0.75em; color: #fff; line-height: 2em; } /* drop...
...repeat; background-position: center center; } #remote-url { width: 200px; height: 23px; margin: 10px; padding: 0 5px; border: 1px solid #379b4a; border-radius: 2px; float: left; transition: width 0.5s; } #remote-url:focus { box-shadow: 0px 0px 3px -1px #379b4a; /*#68ace8; */ border-color: rgba(55, 155, 74, 0.5); width: 450px; } /* * visible area */ #preview_section { position:
relative; min-height: 400px; } /* image control */ #subject { width: 300px; height: 300px; background-repeat: no-repeat; background-size: 100%; background-color: #fff; border: 1px solid #ccc; position: absolute; z-index: 10; top: 15%; left: 10%; box-shadow: 0 0 3px 0 #bababa; transition-property: width, height; transition-duration: 0.1s; } #subject .guideline { background-color: r...
...ound-color: #f00; } #subject .guideline[data-active] { background-color: #f00; z-index: 10; } #subject .guideline[data-axis='x'] { width: 1px; height: 100%; top: -1px; } #subject .guideline[data-axis='y'] { width: 100%; height: 1px; left: -1px; } #subject .guideline[data-axis='x']:hover { cursor: w-resize; } #subject .guideline[data-axis='y']:hover { cursor: s-resize; } #subject .
relative { position:
relative; font-size: 12px; } #subject .tooltip, #subject .tooltip2 { width: 40px; height: 20px; line-height: 20px; font-size: 12px; text-align: center; position: absolute; opacity: 0.5; transition: opacity 0.25s; } #subject .tooltip { background: #eee; border-radius: 2px; border: 1px solid #ccc; } #subject .tooltip2{ color: #555; } #subject [data-active] > * { ...
...And 2 more matches
CSS Box Alignment - CSS: Cascading Style Sheets
the css box alignment module specifies css features that
relate to the alignment of boxes in the various css box layout models: block layout, table layout, flex layout, and grid layout.
...
relationship to writing modes alignment is linked to writing modes in that when we align an item we do not consider whether we are aligning it to the physical dimensions of top, right, bottom and left.
... positional alignment: specifying the position of an alignment subject with
relation to its alignment container.
...And 2 more matches
Viewport concepts - CSS: Cascading Style Sheets
we generally think of width and height media queries as being
relative to the width and height of the browser window.
... they are actually
relative to the viewport, which is the window in the main document but is the intrinsic size of the element's parent in a nested browsing context like objects, iframes and svg.
... a width-based media query within the iframe document is
relative to the iframe's viewport.
...And 2 more matches
font-variant - CSS: Cascading Style Sheets
<common-lig-values>, <discretionary-lig-values>, <historical-lig-values>, <contextual-alt-values> specifies the keywords
related to the font-variant-ligatures longhand property.
... stylistic(), historical-forms, styleset(), character-variant(), swash(), ornaments(), annotation() specifies the keywords and functions
related to the font-variant-alternates longhand property.
... small-caps, all-small-caps, petite-caps, all-petite-caps, unicase, titling-caps specifies the keywords and functions
related to the font-variant-caps longhand property.
...And 2 more matches
right - CSS: Cascading Style Sheets
for
relatively positioned elements, the distance that the element is moved to the left of its normal position.
... for
relatively positioned elements, the distance of the element from its normal position is based on the left property; or if left is also auto, the element is not moved horizontally at all.
... when position is set to
relative, the right property specifies the distance the element's right edge is moved to the left from its normal position.
...And 2 more matches
<shape> - CSS: Cascading Style Sheets
rect() rect(top, right, bottom, left) values top is a <length> representing the offset for the top of the rectangle
relative to the top border of the element's box.
... right is a <length> representing the offset for the right of the rectangle
relative to the left border of the element's box.
... bottom is a <length> representing the offset for the bottom of the rectangle
relative to the top border of the element's box.
...And 2 more matches
Creating a cross-browser video player - Developer guides
<figure id="videocontainer"> <video id="video" controls p
reload="metadata" poster="img/poster.jpg"> <source src="video/tears-of-steel-battle-clip-medium.mp4" type="video/mp4"> <source src="video/tears-of-steel-battle-clip-medium.webm" type="video/webm"> <source src="video/tears-of-steel-battle-clip-medium.ogg" type="video/ogg"> <!-- flash fallback --> <object type="application/x-shockwave-flash" data="flash-player.swf?videourl...
... a poster image is defined for the video, and the p
reload attribute is set to metadata, which informs the browser that it should initially only attempt to load the metadata from the video file rather than the entire video file.
...ie9 will only use the specified poster image in this way if p
reload="none" is set; otherwise, it will take the first still of the video and display that instead.
...And 2 more matches
Index - Developer guides
2 ajax ajax, dom, json, javascript, references, xmlhttprequest asynchronous javascript and xml, while not a technology in itself, is a term coined in 2005 by jesse james garrett, that describes a "new" approach to using a number of existing technologies together 3 community ajax if you know of useful mailing lists, newsgroups, forums, or other communities
related to ajax, please link to them here.
...s apps, audio, guide, html5, media, events this article provides: a basic guide to creating a cross-browser html5 audio player with all the associated attributes, properties, and events explained a guide to custom controls created using the media api 10 live streaming web audio and video guide, adaptive streaming live streaming technology is often employed to
relay live events such as sports, concerts and more generally tv and radio programmes that are output live.
... 38 printing dom, guide, needscontent, needs
relocation, printing there may be times in which your web site or application would like to improve the user's experience when printing content.
...And 2 more matches
Applying color to HTML elements using CSS - HTML: Hypertext Markup Language
see box properties in the box model to learn about the
relationship between elements and their borders, and the article styling borders using css to learn more about applying styles to borders.
...just as we associate green with the beverage mountain dew and one might think of the color blue in
relationship with the sky or the ocean, choosing an appropriate base color to represent your site is a good place to start.
... the advantage to averaging colors can be that often what looks like a solid color is actually a surprisingly varied number of
related colors all used in concert, blending to create a desired effect.
...And 2 more matches
<input type="datetime-local"> - HTML: Hypertext Markup Language
some browsers may resort to a text-only input element that validates that the results are legitimate date/time values before letting them be delivered to the server, as well, but you shouldn't
rely on this behavior since you can't easily predict it.
... it's far too easy for someone to make adjustments to the html that allow them to bypass the validation, or to remove it enti
rely.
... it's also possible for someone to simply bypass your html enti
rely and submit the data directly to your server.
...And 2 more matches
<input type="url"> - HTML: Hypertext Markup Language
since character widths vary, this may or may not be exact and should not be
relied upon to be so; the resulting input may be narrower or wider than the specified number of characters, depending on the characters and the font (font settings in use).
...it can be used on any editable content, but here we consider specifics
related to the use of spellcheck on <input> elements.
... it's far too easy for someone to make adjustments to the html that allow them to bypass the validation, or to remove it enti
rely.
...And 2 more matches
<th> - HTML: Hypertext Markup Language
scope this enumerated attribute defines the cells that the header (defined in the <th>) element
relates to.
... it may have the following values: row: the header
relates to all cells of the row it belongs to.
... col: the header
relates to all cells of the column it belongs to.
...And 2 more matches
Using the application cache - HTML: Hypertext Markup Language
since the document has already been loaded into the browser from the cache, the updated document will not be rendered until the document is
reloaded (either manually or programatically).
... the cache manifest file referencing a cache manifest file the manifest attribute in a web application can specify either the
relative path of a cache manifest file or an absolute url.
...resources can be specified using either absolute or
relative urls (e.g., index.html).
...And 2 more matches
JavaScript modules - JavaScript
the modules directory's two modules are described below: canvas.js — contains functions
related to setting up the canvas: create() — creates a canvas with a specified width and height inside a wrapper <div> with a specified id, which is itself appended inside a specified parent element.
...the simplest way to do this is as follows: import { name, draw, reportarea, reportperimeter } from './modules/square.js'; you use the import statement, followed by a comma-separated list of the features you want to import wrapped in curly braces, followed by the keyword from, followed by the path to the module file — a path
relative to the site root, which for our basic-modules example would be /js-examples/modules/basic-modules.
...this is much better than writing out the entire
relative path each time, as it is shorter, and it makes the url portable — the example will still work if you move it to a different location in the site hierarchy.
...And 2 more matches
FinalizationRegistry - JavaScript
it's also important to avoid
relying on any specific behaviors not guaranteed by the specification.
... notes on cleanup callbacks some notes on cleanup callbacks: developers shouldn't
rely on cleanup callbacks for essential program logic.
...when and whether it does so is enti
rely down to the implementation of the javascript engine.
...And 2 more matches
WebAssembly.Instance - JavaScript
efox for androidopera for androidsafari on iossamsung internetnode.jsinstancechrome full support 57edge full support 16firefox full support 52notes full support 52notes notes disabled in the firefox 52 extended support
release (esr).ie no support noopera full support 44safari full support 11webview android full support 57chrome android full support 57firefox android full support...
... 52notes full support 52notes notes disabled in the firefox 52 extended support
release (esr).opera android full support 43safari ios full support 11samsung internet android full support 7.0nodejs full support 8.0.0instance() constructorchrome full support 57edge full support 16firefox full support 52notes full support 52notes notes disabled in the firefox 52 exten...
...ded support
release (esr).ie no support noopera full support 44safari full support 11webview android full support 57chrome android full support 57firefox android full support 52notes full support 52notes notes disabled in the firefox 52 extended support
release (esr).opera android full support 43safari ios full support 11samsung internet android full support ...
...And 2 more matches
isNaN() - JavaScript
description the necessity of an isnan function unlike all other possible values in javascript, it is not possible to
rely on the equality operators (== and ===) to determine whether a value is nan or not, because both nan == nan and nan === nan evaluate to false.
...thus for non-numbers that when coerced to numeric type result in a valid non-nan numeric value (notably the empty string and boolean primitives, which when coerced give numeric values zero or one), the "false" returned value may be unexpected; the empty string, for example, is su
rely "not a number." the confusion stems from the fact that the term, "not a number", has a specific meaning for numbers represented as ieee-754 floating-point values.
...number.isnan(x) is a
reliable way to test whether x is nan or not.
...And 2 more matches
Autoplay guide for media and Web Audio APIs - Web media technologies
example: the autoplay attribute an <audio> element using the autoplay attribute might look like this: <audio id="musicplayer" autoplay> <source src="/music/chapter1.mp4"> </audio> example 2: detecting autoplay failure if you
rely on autoplay for anything important, or if autoplay failure will impact your app in any way, you will probably want to be able to tell when it autoplay didn't begin.
... a better approach, if you're able to adjust the direction you look at things from, is to instead
rely on knowing that playback of the media has successfully started, instead of when it fails to start.
... at this point, your site or app can begin whatever it needs to do that
relies upon the video having been started up.
...And 2 more matches
Digital audio concepts - Web media technologies
that's a lot of storage, but worse, it's an insane amount of network bandwidth to use for a
relatively short piece of audio.
... audio compression basics unlike text and many other kinds of data, audio data tends to be noisy, meaning the data ra
rely consists of a series of exactly repeated bytes or byte sequences.
... human speech uses a
relatively narrow frequency band (around 300 hz to 18,000 hz, though the exact range varies from person to person due to factors including gender).
...And 2 more matches
Image file type and format guide - Web media technologies
it is technically possible to tile multiple image blocks, each with its own color palette, to create truecolor images, but in practice this is ra
rely done.
... pixels are opaque, unless a specific color index is designated as transparent, in which case pixels colored that value are enti
rely transparent.
...as of july 7, 2004, all
relevant patents have expired and the gif format may be used freely ico (microsoft windows icon) the ico (microsoft windows icon) file format was designed by microsoft for desktop icons of windows systems.
...And 2 more matches
OpenSearch description format
to support autodiscovery, add a <link> element for each plugin to the <head> of your web page: <link
rel="search" type="application/opensearchdescription+xml" title="searchtitle" href="pluginurl"> replace the bolded items as explained below: searchtitle the name of the search to perform, such as "search mdc" or "yahoo!
...for example: <link
rel="search" type="application/opensearchdescription+xml" title="mysite: by author" href="http://example.com/mysiteauthor.xml"> <link
rel="search" type="application/opensearchdescription+xml" title="mysite: by title" href="http://example.com/mysitetitle.xml"> this way, your site can offer plugins to search by author, or by title.
...to support this, include an extra url element with type="application/opensearchdescription+xml" and
rel="self".
...And 2 more matches
Using dns-prefetch - Web Performance
the html <link> element offers this functionality by way of a
rel attribute value of dns-prefetch.
... the cross-origin domain is then specified in the href attribute: syntax <link
rel="dns-prefetch" href="https://fonts.gstatic.com/" > examples <html> <head> <link
rel="dns-prefetch" href="https://fonts.gstatic.com/"> <!-- and all other head elements --> </head> <body> <!-- your page content --> </body> </html> you should place dns-prefetch hints in the <head> element any time your site references resources on cross-origin domains, but there are some things to keep in mind.
... second, it’s also possible to specify dns-prefetch (and other resources hints) as an http header by using the http link field: link: <https://fonts.gstatic.com/>;
rel=dns-prefetch third, consider pairing dns-prefetch with the preconnect hint.
...And 2 more matches
Web Performance
if your animations are really complex, you may have to
rely on javascript-based animations instead.lazy loadinglazy loading is a strategy to identify resources as non-blocking (non-critical) and load these only when needed.
...there are many apis, developer tools, best practices, and bad practices
relating to web performance.
...this article explains the tls handshake process, and offers some tips for reducing this time, such as ocsp stapling, hsts p
reload headers, and the potential role of resource hints in masking tls latency for third parties.
...And 2 more matches
Mobile first - Progressive web apps (PWAs)
this article offers some
related ideas, looking at the concept of mobile first — the practice of designing a website so that the default layout/configuration is for mobile devices, and layouts and features for desktop browsers are then layered on top of that default.
... this guide looks at a few useful techniques inside the mobile first umb
rella.
... first things first — mobile as a default you may think that concentrating on the mobile experience first sounds pointless, as we are more used to dealing with desktop sites, and we su
rely need to consider the full gamut of features for the overall experience across desktop, mobile, etc., before then paring it down to a mobile experience that is simpler, more streamlined, or whatever.
...And 2 more matches
Paths - SVG: Scalable Vector Graphics
an uppercase letter specifies absolute coordinates on the page, and a lowercase letter specifies
relative coordinates (e.g., move 10px up and 7px to the left from the last point).
... z (or) z so our path above could be shortened to: <path d="m 10 10 h 90 v 90 h 10 z" fill="transparent" stroke="black"/> the
relative forms of these commands can also be used to draw the same picture.
...
relative commands are called by using lowercase letters, and rather than moving the cursor to an exact coordinate, they move it
relative to its last position.
...And 2 more matches
Compiling an Existing C Module to WebAssembly - WebAssembly
these libraries often
rely on c's standard library, an operating system, a file system and other things.
...a useful strategy is just gave it all the c files and
relied on the compiler to strip out everything that was unnecessary.
...many projects
rely on autoconf/automake to generate system-specific code before compilation.
...And 2 more matches
context-menu - Archive of obsolete content
contexts can be
related to page content or the page itself, but they should never be external to the page.
...a bad use would be to show a submenu that listed all the user's tabs, since tabs aren't
related to the page or the node the user clicked to open the menu.
...the menu that appears should contain the items "back", "forward", "
reload", "stop", and so on.
...node, data) {' + ' console.log("you clicked " + data);' + '});', items: [ cm.item({ label: "item 1", data: "item1" }), cm.item({ label: "item 2", data: "item2" }), cm.item({ label: "item 3", data: "item3" }) ] }); communicating with the add-on often you will need to collect some kind of information in the click listener and perform an action un
related to content.
File I/O - Archive of obsolete content
read path from prefs var file = prefs.getcomplexvalue("filename", components.interfaces.nsilocalfile);
relative path (nsi
relativefilepref) to store paths
relative to one of the predefined folders listed above, for example file
relative to profile folder, use the following code: // 1.
... write to prefs var
relfile = components.classes["@mozilla.org/pref-
relativefile;1"].
... createinstance(components.interfaces.nsi
relativefilepref);
relfile.
relativetokey = "profd"; // or any other string listed above
relfile.file = file; // |file| is nsilocalfile prefs.setcomplexvalue("filename", components.interfaces.nsi
relativefilepref,
relfile); // 2.
... read from prefs var value = prefs.getcomplexvalue("filename", components.interfaces.nsi
relativefilepref); // |value.file| is the file.
xml:base support in old browsers - Archive of obsolete content
note however, that this code is not based on a thorough examination of the specs
related to forming base uris and could well have a number of errors.
...h with slash } // alert(xmlbase + '::' + xlink); } var link = xmlbase + xlink; if (!link.match(scheme)) { // if there is no domain, we'll need to use the current domain var loc = window.location; if (link.indexof('/') === 0 ) { // if link is an absolute url, it should be from the host only link = loc.protocol + '//' + loc.host + link; } else { // if link is
relative, it should be from full path, minus the file var dirpath = loc.pathname.substring(0, loc.pathname.lastindexof('/')-1); if (link.lastindexof('/') !== link.length-1) { link += '/'; } link = loc.protocol + '//' + loc.host + dirpath + link; } } return link; } function getxmlbase (thisitem) { // fix: need to keep going up the chain if still a
relative url!!!!!
...o skip it in the separator search var att2 = att.indexof('/', protocolpos+skipfile); // find first path separator ('/') after protocol if (att2 !== -1) { att = att.substring(0, att2 - 1); // don't want any trailing slash, as the absolute path to be added already has one } } else if (!att.match(/\/$/)) { // if no trailing slash, add one, since it is being attached to a
relative path att += '/'; } xmlbase = att + xmlbase; // if previous path was not absolute, resolve against the full uri here' break; } else if (att.indexof('/') === 0) { // if absolute (/), need to prepare for next time to strip out after slash xmlbase = att + xmlbase; abs = true; // once the protocol is found on the next round, make sure any extra path is ignored } ...
... else { // if
relative, just add it xmlbase = att + xmlbase; } } thisitem = thisitem.parentnode; } //return (xmlbase === '') ?
Extension Versioning, Update and Compatibility - Archive of obsolete content
as a rough overview this is a version string split by periods, some examples: 2.0 1.0b1 3.0pre1 5.0.1.2 note: before firefox 1.5 the more basic firefox version format was used: major.minor.
release.build[+] where only digits were allowed.
...with compatibility updating it is not necessary to
release a whole new version of the extension just to increase its maxversion.
... within h1, h2, h3, p and li tags you may use: b or strong for bolder text i or em for italicized text formatting in firefox 4 and later from firefox 4 the restrictions are
relaxed somewhat.
...ut do have their contents displayed, so the following snippet: <span><q>text</q></span> would be rendered exactly the same as: <q>text</q> sample file <!doctype html public "-//w3c//dtd xhtml 1.0 strict//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-strict.dtd"> <html lang="en-us" dir="ltr" xmlns="http://www.w3.org/1999/xhtml"> <h2>my extension</h2> <ul> <li>this update fixes some stability
related issues.</li> </ul> </html> what end-user sees the content of updateinfourl will be displayed to user in the add-ons page, in a list of all available updates.
The Essentials of an Extension - Archive of obsolete content
there can be multiple skin and locale entries
relating to different skins and locales.
...we'll skip the first few lines because they
relate to skin and locale, and we'll cover them later.
... you will often want to include dynamic content as part of localized strings, like when you want to inform the user about some stat
related to the extension.
...it greatly complicates the work of localizers, and grammar rules on different languages may change the ordering of the sentence enti
rely.
Setting up an extension development environment - Archive of obsolete content
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.
...changes to xul overlays will still require
reloading of the document overlaid.
...although the bug has been closed, it is believed that this pref is still
relevant.
...if you choose a jared structure for
releasing, you can still develop with a directory structure by editing your chrome.manifest.
Promises - Archive of obsolete content
promise apis for common asynchronous operations due to the performance and stability costs of synchronous io, many apis which
rely on it have been deprecated.
... this interface replaces the previous, complicated xpcom nsifile and streams apis, and their
related javascript helper modules.
... notifyuser(resp.target.responsetext); }); example using promise-based helper the following example
relies on the helper function defined below.
... 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.
Updating addons broken by private browsing changes - Archive of obsolete content
20: openbrowserwindow gprivatebrowsingui finally, if your code watches for any of these observer notifications: private-browsing private-browsing-cancel-vote private-browsing-change-granted private-browsing-transition-complete then your addon will require updating to correctly support the new per-window private browser feature in firefox 20 (and will require updating to work correctly in
releases of firefox since the ones listed).
...use privatebrowsingutils.getprivacycontextfromwindow(win) to obtain it from the
relevant window.
...addprivacyawa
relistener should be used instead, or no notifications will be received for private downloads.
...any new private browsing session should be opened using openbrowserwindow, and any queries for private browsing status should use privatebrowsingutils.iswindowprivate(win) on a
relevant window object.
CSS3 - Archive of obsolete content
it also extends the
related css font-variant shorthand property and introduces the @font-feature-values at-rule.
... adds: definition for new font-
relative length units: rem and ch .
... definition for viewport-
relative length units: vw, vh, vmax, and vmin .
... precision about the real size of the absolute length units, which are not really absolute, but defined in
relation with the reference pixel .
Autodial for Windows NT - Archive of obsolete content
if the user has a modem and no lan card, this service will work
reliably for them.
...however, if the user has both a modem and a lan card, the service will be less
reliable for them.
...since the feature was implemented close to the
release of netscape 7, the pref was added so that we could include the feature in the 7.0
release with the feature turned off and enable it in specific cases.
...mozilla 1.1 also includes a fix to bug 157733, which allows our interaction with the autodial service to work a little more
reliably.
Creating a Microsummary - Archive of obsolete content
web pages can reference generators via <link
rel="microsummary"> elements in their <head> elements.
...then just link to the microsummaries from within the pages themselves using a <link
rel="microsummary"> element, f.e.: <head> <link
rel="microsummary" href="index.php?view=microsummary"> </head> when firefox encounters a <link
rel="microsummary"> element, it loads the url in the href attribute.
...if we were the spread firefox webmasters, we might simply reference the generator within the page itself by adding a <link
rel="microsummary"> tag to its <head> element: <head> <link
rel="microsummary" href="path/to/our/generator.xml"> </head> since we're not that site's webmasters, however, we can specify the page to which the generator applies within the generator itself and then make the generator available for download and installation.
...ypeof window.sidebar.addmicrosummarygenerator == "function") window.sidebar.addmicrosummarygenerator(url); else alert(warning); } </script> <button onclick="addgenerator('http://people.mozilla.com/~myk/microsummaries/tutorial/sfx-generator.xml')">install the spread firefox home page microsummary!</button> note that due to bug 341283, addmicrosummarygenerator() will not accept a
relative url.
Building Firefox with Rust code - Archive of obsolete content
our goal is to always ship a firefox
release build with a stable rust toolchain
release.
... if you don't have rust already, use the rustup tool to install it and update as new
releases become available, or use the ./mach bootstrap command.
... if this turns out to be a serious problem in practice, we can look into ways of
relaxing that check.
... if you need to locally patch a third-party crate, you'll need to add a [replace] section to the referencing cargo.toml to declare that the vendored source shouldn't match the upstream
release.
Frequently Asked Questions - Archive of obsolete content
the svg project is about mozilla's native implementation of svg, not adobe/co
rel/whoever's plug-in.
... does mozilla work with co
rel's svg plug-in?
...david continues to create svg enabled nightlies and answer build
related questions as he has done for some time.
...this is where most of us hang out to discuss issues
relating to the svg implementation.
Table Cellmap - Archive of obsolete content
79 // this union
relies on the assumption that an object (not primitive type) does 80 // not start on an odd bit boundary.
...entries which are only spanned don't have that direct
relationship.
... they belong to a entry which has a direct
relationship to a tablecellframe.
...the following routines seem to be hot spots performance wise: nscellmap::colhasspanningcells nscellmap::rowhasspanningcells nscellmap::rowisspannedinto users of nscellmap::getdataat outside nscellmap.cpp the border collapse code
relies on the cellmap.
Elements - Archive of obsolete content
notes in the current stable
releases of mozilla products (e.g.
...it doesn't have to (and often it doesn't) point to some actual schema or a namespace-
related resource.
...for example, mutation events define several new fields such as
relatedtarget that could be supported in the filtering syntax.] key - the key attribute has the same meaning as charcode.
...you can use this to p
reload a number of images for later use.
XML in Mozilla - Archive of obsolete content
mozilla has a
relatively good support for xml.
... several world wide web consortium (w3c) recommendations and drafts from the xml family of specifications are supported, as well as other
related technologies.
...another exception is an entity whose system identifier is a
relative path, and the xml declaration states that the document is not standalone (default), in which case mozilla will try to look for the entity under <bin>/res/dtd directory.
...for example, dom
related questions should probably be discussed in the mozilla.dev.tech.dom newsgroup, while style issues should be discussed on mozilla.dev.tech.css and so on.
Using XPInstall to Install Plugins - Archive of obsolete content
currently, all mozilla browsers
released by mozilla.org support xpinstall, and a family of browsers based on mozilla code support xpinstall.
...if you are developing a plugin and wish to make it scriptable, read the
relevant portions of the plugin api.
... a brief history of netscape installer technologies this section is
relevant if you are familiar with netscape communicator 4.x's smartupdate installer technology.
...not all the work needs to be done in javascript -- if you have a native installer (exe) that recognizes netscape gecko browsers, and you me
rely wish to wrap the exe installer in an xpi package for a streamlined delivery to the client, you can easily do so.
compareTo - Archive of obsolete content
method of installversion object syntax compareto ( installversion version); compareto ( string version); compareto ( int major, int minor, int
release, int build); parameters the compareto method has the following parameters: maj the major version number.
... -2 this version object has a smaller (earlier)
release number than version.
... 2 this version object has a larger (newer)
release number than version.
... the following constants are defined and available for checking the value returned by compareto: installversion.major_diff installversion.minor_diff installversion.
rel_diff installversion.bld_diff installversion.equal installversion.major_diff_minus installversion.minor_diff_minus installversion.
rel_diff_minus installversion.bld_diff_minus example this code uses the compareto method to determine whether or not version 3.2.1 of the royal airways software has been previously installed: existingvi = installtrigger.getversion("/royalairways/royalsw"); if ( existin...
patch - Archive of obsolete content
method of install object syntax int patch ( string registryname, string xpisourcepath, object localdirspec, string
relativelocalpath); int patch ( string registryname, installversion version, string xpisourcepath, object localdirspec, string
relativelocalpath); int patch ( string registryname, string version, string xpisourcepath, object localdirspec, string
relativelocalpath); parameters the patch method has the following parameters: registryname the pathname in the client version registry for the component that is to be patched.this parameter can be an absolute pathname, such as /royalairways/royalsw/executable or a
relative pathname, such as executable.
... typically,
relative pathnames are
relative to the main pathname specified in the initinstall method.
... this parameter can also be null, in which case the xpisourcepath parameter is used as a
relative pathname.
...
relativelocalpath a pathname
relative to the localdirspec parameter that identifies the subcomponent that is to be patched.
A XUL Bestiary - Archive of obsolete content
the chrome url this concept of a chrome as an integrated, dynamic thing in some way divorced from the "appcore" is realized in the use of the chrome url to point to chunks of xul and their
related files.
...the mozilla xparchitecture section below describes xpcom, xpidl, and xpconnect, three somewhat
related technologies for getting access to application code from the interface.
... the differences here are significant: xul is the universe of elements, attributes, syntax, rules, and
relationships, while xptoolkit is really the finite set of interface-specific elements created in xul.
...a loosely analogous
relationship might be that xul, xptoolkit, and xpfe are to one another what html, the actual html tags, and an html web page are to one another, respectively.
Building accessible custom components in XUL - Archive of obsolete content
this is not an accessibility requirement; as we'll see in the next section, the actual xul elements are ir
relevant because we will define the role of each element in a separate attribute.
...the final product looks like this: <caption>xul spreadsheet with 7 rows and 5 columns</caption> although this has the visual layout of a spreadsheet, assistive technologies will only see it as a collection of individual, un
related text labels.
... <caption>it looks like a column header, but it's not</caption> so, before we do anything else, we need to tell assistive technologies that all of these un
related elements are actually
related.
...if you want to navigate up one row, it is
relatively easy to find the right cell; it's the previous sibling of the currently focused cell.
Accessing Files - Archive of obsolete content
file and stream guide: [ nsiscriptableio | accessing files | getting file information | reading from files | writing to files | moving, copying and deleting files | uploading and downloading files | working with directories ] important note: the pages from the file and stream guide use the io object (nsiscriptableio), which was not available in any
released version of the platform (pending some fixes).
...other documentation on files and i/o not using the unavailable nsiscriptableio apis: code snippets: file i/o, open and save dialogs, reading textual data, writing textual data, list of file-
related error codes.
...because string paths are not used, references to files in a file object are made
relative to some starting directory.
...once one of these starting directories is determined, a file reference may be created
relative to this.
showPopup - Archive of obsolete content
there are two ways of specifying where the popup appears, either at a specific screen position, or
relative to some element in the window.
...if x and y are -1, the popup will be positioned
relative to the element specified as the first argument.
...in this latter case, the anchor and align arguments may be used to further control where the popup appears
relative to the element.
... to have a popup appear
relative to another element yet still offset by some number of pixels, determine the actual screen position of the element using the boxobject.screenx and boxobject.screeny properties of the element, and use those as the x and y arguments offset by the desired values.
RDF Modifications - Archive of obsolete content
the second situation when notifications are made is when a datasource is being loaded or
reloaded.
...when
reloading a datasource, you might think that the rdf parser removes all the existing data, loads the new data, and adds it to the datasource.
...when
reloading a datasource, it keeps the existing rdf triples intact, and only modifies the datasource based on what has changed.
...if the
reloaded datasource hasn't changed, the builder won't receive any notifications.
textbox (Toolkit autocomplete) - Archive of obsolete content
« xul reference home [ examples | attributes | properties | methods |
related ] this element is created by setting the type attribute of the textbox to autocomplete.
...to enable the element, leave this attribute out enti
rely.
...be aware, however, that some elements, such as textbox will display the value visually, so in order to me
rely associate data with an element, you could 1) use another attribute like "value2" or "data-myatt" (as in the html5 draft), as xul does not require validation (less future-proof); 2) use setattributens() to put custom attributes in a non-xul namespace (serializable and future-proof); 3) use setuserdata() (future-proof and clean, but not easily serializable).
...
related interfaces nsiaccessibleprovider, nsiautocompleteinput, nsidomxulmenulistelement articles how to implement custom autocomplete search component ...
Textbox (XPFE autocomplete) - Archive of obsolete content
« xul reference home [ examples | attributes | properties | methods |
related ] this element is created by setting the type attribute of a textbox to autocomplete.
...to enable the element, leave this attribute out enti
rely.
...be aware, however, that some elements, such as textbox will display the value visually, so in order to me
rely associate data with an element, you could 1) use another attribute like "value2" or "data-myatt" (as in the html5 draft), as xul does not require validation (less future-proof); 2) use setattributens() to put custom attributes in a non-xul namespace (serializable and future-proof); 3) use setuserdata() (future-proof and clean, but not easily serializable).
...
related interfaces nsiaccessibleprovider, nsidomxulmenulistelement ...
The Joy of XUL - Archive of obsolete content
overlays are a powerful mechanism for customizing and extending existing applications because they work in two
related but highly different ways.
...the netscape public license (npl) and mozilla public license (mpl) require developers who alter original work (source code files that are provided with mozilla) to
release the source code for these changes to their customers.
... xul provides a rich set of ui components.the user interface for the calendar is written enti
rely in xul, javascript, and css, which is a testament to the power and flexibility of this application building framework.
... xpinstall is easy for developers and for users.the calendar is not a planned deliverable for the mozilla 1.0
release, and therefore is not included as a standard component in regular nightly and milestone
release builds.
Box Objects - Archive of obsolete content
« previousnext » this section describes the box object, which holds display and layout
related information about a xul box as well as some details about xul layout.
...the layout tree holds the structure as the nodes are expected to be displayed there is not necessarily a one to one
relationship between content and layout nodes.
...it's
relatively simple to determine what kind of content tree node will be created for a given element.
...however, xul provides some helper objects, called box objects, which can provide some layout
related information.
Keyboard Shortcuts - Archive of obsolete content
key events there are three keyboard events that may be used if the key
related features described above aren't suitable.
... these events are: keypress called when a key is pressed and
released when an element has the focus.
...note that the event will be called as soon as the key is pressed, even if it hasn't been
released yet.
... keyup called when a key is
released while an element has the focus.
XUL Structure - Archive of obsolete content
for instance, you can use the xul layout types in other documents since they don't
rely on the xul document type to function.
...although you don't normally distribute a package this way, it is handy during development since you can edit the file directly and then
reload the xul file without having to repackage or reinstall the files.
...however, because of this, the xul will be not be
reloaded even when the source files are changed.
...in the example above, a directory exists for theme
related files for the browser and another for global theme
related files.
Using nsIXULAppInfo - Archive of obsolete content
this is not useful for scripts on webpages, which should continue using the navigator object when it's not possible to
rely on feature-detection.
...for example, one of unfrozen functions you're
relying on was changed.
...the latter is useful if you're trying to support nightly development builds of the application, and the former can be useful if you only support official
releases, and to distinguish between branch and trunk builds.
...cker.compare(appinfo.version, "1.5") >= 0) { // running under firefox 1.5 or later } see nsiversioncomparator for details example 2: dealing with nightlies var appinfo = components.classes["@mozilla.org/xre/app-info;1"] .getservice(components.interfaces.nsixulappinfo); if(appinfo.appbuildid >= "2005093006") { // running on a build after 2005093006 } you shouldn't
rely on build ids for
releases, as build id might be different for custom build or a localized version of an application.
command - Archive of obsolete content
« xul reference home [ examples | attributes | properties | methods |
related ] a command element can be used to invoke an operation that can come from multiple sources.
...to enable the element, leave this attribute out enti
rely.
...in future
releases, it won't receive them.
...ributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeeventlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata
related xul:list of commands ...
description - Archive of obsolete content
« xul reference home [ examples | attributes | properties | methods |
related ] this element is used to create a block of text.
...to enable the element, leave this attribute out enti
rely.
...be aware, however, that some elements, such as textbox will display the value visually, so in order to me
rely associate data with an element, you could 1) use another attribute like "value2" or "data-myatt" (as in the html5 draft), as xul does not require validation (less future-proof); 2) use setattributens() to put custom attributes in a non-xul namespace (serializable and future-proof); 3) use setuserdata() (future-proof and clean, but not easily serializable).
...
related label ...
key - Archive of obsolete content
« xul reference home [ examples | attributes | properties | methods |
related ] the key element defines a window-global keyboard shortcut and must be placed inside a keyset element.
...to enable the element, leave this attribute out enti
rely.
...this should be set to the value capturing to indicate during the event capturing phase or target to indicate at the target element or left out enti
rely for the bubbling phase.
...this allows keys to match more loosely for modifier keys that aren't
relevant, yet still allows specific modifiers to be required.
listitem - Archive of obsolete content
« xul reference home [ examples | attributes | properties | methods |
related ] a single row in a listbox.
...to enable the element, leave this attribute out enti
rely.
...be aware, however, that some elements, such as textbox will display the value visually, so in order to me
rely associate data with an element, you could 1) use another attribute like "value2" or "data-myatt" (as in the html5 draft), as xul does not require validation (less future-proof); 2) use setattributens() to put custom attributes in a non-xul namespace (serializable and future-proof); 3) use setuserdata() (future-proof and clean, but not easily serializable).
...
related elements listbox, listcell, listcol, listcols, listhead, listheader interfaces nsiaccessibleprovider, nsidomxulselectcontrolitemelement ...
menu - Archive of obsolete content
« xul reference home [ examples | attributes | properties | methods |
related ] an element, much like a button, that is placed on a menubar.
...to enable the element, leave this attribute out enti
rely.
...be aware, however, that some elements, such as textbox will display the value visually, so in order to me
rely associate data with an element, you could 1) use another attribute like "value2" or "data-myatt" (as in the html5 draft), as xul does not require validation (less future-proof); 2) use setattributens() to put custom attributes in a non-xul namespace (serializable and future-proof); 3) use setuserdata() (future-proof and clean, but not easily serializable).
...
related elements menubar, menuitem, menulist, menupopup, menuseparator interfaces nsiaccessibleprovider, nsidomxulcontaine
relement, nsidomxulcontaineritemelement, nsidomxulselectcontrolitemelement ...
menulist - Archive of obsolete content
« xul reference home [ examples | attributes | properties | methods |
related ] an element that can be used for drop-down choice lists.
...to enable the element, leave this attribute out enti
rely.
...be aware, however, that some elements, such as textbox will display the value visually, so in order to me
rely associate data with an element, you could 1) use another attribute like "value2" or "data-myatt" (as in the html5 draft), as xul does not require validation (less future-proof); 2) use setattributens() to put custom attributes in a non-xul namespace (serializable and future-proof); 3) use setuserdata() (future-proof and clean, but not easily serializable).
...
related elements menu, menubar, menuitem, menupopup, menuseparator interfaces nsiaccessibleprovider, nsidomxulmenulistelement ...
menuseparator - Archive of obsolete content
« xul reference home [ examples | attributes | properties | methods |
related ] used to create a separator between menu items.
...to enable the element, leave this attribute out enti
rely.
...be aware, however, that some elements, such as textbox will display the value visually, so in order to me
rely associate data with an element, you could 1) use another attribute like "value2" or "data-myatt" (as in the html5 draft), as xul does not require validation (less future-proof); 2) use setattributens() to put custom attributes in a non-xul namespace (serializable and future-proof); 3) use setuserdata() (future-proof and clean, but not easily serializable).
...ributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeeventlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata
related elements menu, menubar, menuitem, menulist, menupopup interfaces nsiaccessibleprovider, nsidomxulcontaineritemelement, nsidomxulselectcontrolitemelement ...
prefpane - Archive of obsolete content
« xul reference home [ examples | attributes | properties | methods |
related ] a single preference panel in a prefwindow.
... attributes helpuri, image, label, onpaneload, selected, src properties image, label, preferenceelements, preferences, selected, src examples methods preferencefo
relement <prefpane id="panegeneral" label="general" src="chrome://path/to/paneoverlay.xul"/> or <prefpane id="panegeneral" label="general" onpaneload="ongeneralpaneload(event);"> <preferences> <preference id="pref_one" name="extensions.myextension.one" type="bool"/> ...
... methods domelement getpreferenceelement(in domelement startelement) preferencefo
relement( uielement ) return type: preference element returns the preference element to which a user interface element is attached.
... </prefpane> <script type="application/javascript" src="chrome://myext/content/script0.js"> <script type="application/javascript" src="chrome://myext/content/script1.js"> </prefwindow> when opening a dialog with multiple panes you must include the toolbar feature in the call to opendialog, for example: window.opendialog("chrome://example/content/prefwin.xul", "", "chrome,toolbar");
related prefwindow preferences system documentation: introduction: getting started | examples | troubleshooting reference: prefwindow | prefpane | preferences | preference | xul attributes ...
prefwindow - Archive of obsolete content
« xul reference home [ examples | attributes | properties | methods |
related ] a specialized window used for preference dialogs.
...each pane will usually group together a set of
related preferences.
... important note for xulrunner-based applications: the preferences system - part of the toolkit - still
relies on two browser.* preferences.
... should not: <prefwindow> <script src="config.js"/> <prefpane label="pane1" src="pane1.xul"/> <prefpane label="pane2" src="pane2.xul"/> </prefwindow> should: <prefwindow> <prefpane label="pane1" src="pane1.xul"/> <prefpane label="pane2" src="pane2.xul"/> <script src="config.js"/> </prefwindow>
related prefpane preferences system documentation: introduction: getting started | examples | troubleshooting reference: prefwindow | prefpane | preferences | preference | xul attributes ...
radio - Archive of obsolete content
« xul reference home [ examples | attributes | properties | methods |
related ] an element that can be turned on and off.
...to enable the element, leave this attribute out enti
rely.
...be aware, however, that some elements, such as textbox will display the value visually, so in order to me
rely associate data with an element, you could 1) use another attribute like "value2" or "data-myatt" (as in the html5 draft), as xul does not require validation (less future-proof); 2) use setattributens() to put custom attributes in a non-xul namespace (serializable and future-proof); 3) use setuserdata() (future-proof and clean, but not easily serializable).
...ributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeeventlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata
related elements radiogroup, checkbox interfaces nsiaccessibleprovider, nsidomxulselectcontrolitemelement, nsidomxullabeledcontrolelement ...
radiogroup - Archive of obsolete content
« xul reference home [ examples | attributes | properties | methods |
related ] a group of radio buttons.
...to enable the element, leave this attribute out enti
rely.
...be aware, however, that some elements, such as textbox will display the value visually, so in order to me
rely associate data with an element, you could 1) use another attribute like "value2" or "data-myatt" (as in the html5 draft), as xul does not require validation (less future-proof); 2) use setattributens() to put custom attributes in a non-xul namespace (serializable and future-proof); 3) use setuserdata() (future-proof and clean, but not easily serializable).
...
related interfaces nsiaccessibleprovider, nsidomxulselectcontrolelement ...
richlistbox - Archive of obsolete content
« xul reference home [ examples | attributes | properties | methods |
related ] this element is used to create a list of listitems (richlistitems), similar to a listbox, but is designed to be used when the items do not contain simple text content.
...to enable the element, leave this attribute out enti
rely.
...be aware, however, that some elements, such as textbox will display the value visually, so in order to me
rely associate data with an element, you could 1) use another attribute like "value2" or "data-myatt" (as in the html5 draft), as xul does not require validation (less future-proof); 2) use setattributens() to put custom attributes in a non-xul namespace (serializable and future-proof); 3) use setuserdata() (future-proof and clean, but not easily serializable).
...
related interfaces nsiaccessibleprovider, nsidomxulmultiselectcontrolelement ...
richlistitem - Archive of obsolete content
« xul reference home [ examples | attributes | properties | methods |
related ] an individual item in a richlistbox.
...to enable the element, leave this attribute out enti
rely.
...be aware, however, that some elements, such as textbox will display the value visually, so in order to me
rely associate data with an element, you could 1) use another attribute like "value2" or "data-myatt" (as in the html5 draft), as xul does not require validation (less future-proof); 2) use setattributens() to put custom attributes in a non-xul namespace (serializable and future-proof); 3) use setuserdata() (future-proof and clean, but not easily serializable).
...ributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeeventlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata
related interfaces nsiaccessibleprovider, nsidomxulselectcontrolitemelement ...
scale - Archive of obsolete content
« xul reference home [ examples | attributes | properties | methods |
related ] a scale (sometimes referred to as a "slider") allows the user to select a value from a range.
...to enable the element, leave this attribute out enti
rely.
...be aware, however, that some elements, such as textbox will display the value visually, so in order to me
rely associate data with an element, you could 1) use another attribute like "value2" or "data-myatt" (as in the html5 draft), as xul does not require validation (less future-proof); 2) use setattributens() to put custom attributes in a non-xul namespace (serializable and future-proof); 3) use setuserdata() (future-proof and clean, but not easily serializable).
...
related interfaces nsidomxulcontrolelement ...
tab - Archive of obsolete content
« xul reference home [ examples | attributes | properties | methods |
related ] a single tab which should be placed inside a tabs element.
...to enable the element, leave this attribute out enti
rely.
...the following values are accepted, or leave out the attribute enti
rely for default handling: always the image is always checked to see whether it should be
reloaded.
...
related elements tabbox, tabs, tabpanels, tabpanel.
Getting started with XULRunner - Archive of obsolete content
therefore, either you need to compile xulrunner manually or download a binary
release from mozilla's ftp server.
... one way to achieve this is to run the following script everytime you want to install a new version: firefox_version=`grep -po "\d{2}\.\d+" /usr/lib/firefox/platform.ini` arch=`uname -p` xurl=https://ftp.mozilla.org/pub/mozilla.org/xulrunner/
releases/$firefox_version/runtimes/xulrunner-$firefox_version.en-us.linux-$arch.tar.bz2 cd /opt sudo sh -c "wget -o- $xurl | tar -xj" sudo ln -s /opt/xulrunner/xulrunner /usr/bin/xulrunner sudo ln -s /opt/xulrunner/xpcshell /usr/bin/xpcshell you could also save this script to a file for convenience.
... on linux, you only need to unpack the archive if you are using a pre-
release xulrunner.
...you need to move your existing chrome.manifest to the application root folder, remembering to update the
relative paths within the file.
2006-11-3 - Archive of obsolete content
summary: mozilla.dev.l10n - november 3, 2006 announcements mozip.net 1.2.0
released: the should have been 1.0
release mozip.net 1.2.0, a gui (graphic) version of piaip's mozip command line utility, is available here.
... mozillatranslator 5.13
released mozillatranslator 5.13 is available here.
... seamonkey 1.0.6 and 1.1 beta upcoming the seamonkey projet is planning a security
release of the stable 1.0 series as well as a beta for the 1.1 version, all possibly in the next days or week.
... discussions last check-ins on sun-calendar-event-dialog.* files last check-ins on sun-calendar-event-dialog.* files from 50 to 100 locales how to get from the 50 locales and
releasing 40 to a hundred.
2006-10-06 - Archive of obsolete content
announcements firefox 2
release candidate 2 is now available for download beltzner announced ff2 rc2 is availabe for all 3 major platforms in some 40 langauges.
... rc2 testing update tim riley announced minimum tests for rc2 have been run and that rc2 is go for the final staging of the
release.
...also invites people to help extension developers test for compatibility (link to a bunch of extension compatability bugs) discussions reining in the
release process a discussion of what can be done to speed up the
release process.
...dbaron and chris ilias respond with
relative dates but still no schedule.
NPAPI plugin reference - Archive of obsolete content
the articles below describe each of the apis
related to npapi plugins.
... npn_
releaseobject decrements the reference count of the given npobject.
... npn_
releasevariantvalue npn_
releasevariantvalue()
releases the value in the given variant.
... npn_
reloadplugins
reloads all of the installed plugins.
Examples - Archive of obsolete content
this page contains the source code of the examples
related to the "properly using css and javascript in xhtml documents" article.
...example 4 <!-- this file should have a .html extension --> <!doctype html public "-//w3c//dtd xhtml 1.0 strict//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en-us" xml:lang="en-us"> <head> <title>example 4 - xhtml 1.0 strict as text/html</title> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /> <link
rel="stylesheet" type="text/css" href="style.css" /> </head> <body> <h1>example 4 - xhtml 1.0 strict as text/html</h1> <p> this document is valid xhtml 1.0 strict served as <code>text/html</code>.
...rticle example 5 <!-- this file should have a .xml extension --> <!doctype html public "-//w3c//dtd xhtml 1.0 strict//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en-us" xml:lang="en-us"> <head> <title>example 5 - xhtml 1.0 strict as text/xml</title> <meta http-equiv="content-type" content="text/xml; charset=utf-8" /> <link
rel="stylesheet" type="text/css" href="style.css" /> </style> </head> <body> <h1>example 5 - xhtml 1.0 strict as text/xml</h1> <p> this document is valid xhtml 1.0 strict served as <code>text/xml</code>.
... file should have a .xhtml extension --> <!doctype html public "-//w3c//dtd xhtml 1.0 strict//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en-us" xml:lang="en-us"> <head> <title>example 6 - xhtml 1.0 strict as application/xhtml+xml</title> <meta http-equiv="content-type" content="application/xhtml+xml; charset=utf-8" /> <link
rel="stylesheet" type="text/css" href="style.css" /> </style> </head> <body> <h1>example 6 - xhtml 1.0 strict as application/xhtml+xml</h1> <p> this document is valid xhtml 1.0 strict served as <code>application/xhtml+xml</code>.
Styling the Amazing Netscape Fish Cam Page - Archive of obsolete content
getting the image back on top of the heading turned out to be a matter of
relatively positioning the floated image, and then giving it a z-index value.
... div.card {float: left; width: 45%; margin: 1em 2% 0 2%;} div.card img {float: left; position:
relative; z-index: 10; margin: 4px 0 0 0; border: 1px solid #339;} div.card h3 {margin: 0 0 0 4px; padding: 0.2em 0 1px 150px; border: 1px solid #339; border-left: 5px double #339; background: #eec url(body-bg-tan.jpg) bottom left no-repeat fixed; color: #339;} note how the image is pushed downward four pixels, while the h3 is pushed rightward four pixels.
... div.card {float: left; width: 45%; margin: 1em 2% 0 2%;} div.card img {float: left; position:
relative; z-index: 10; margin: 4px 0 0 0; border: 1px solid #339;} div.card h3 {margin: 0 0 0 4px; padding: 0.2em 0 1px 150px; border: 1px solid #339; border-left: 5px double #339; background: #eec url(body-bg-tan.jpg) bottom left no-repeat fixed; color: #339;} div.card p {margin: 0.5em 0.5em 0.5em 160px;} and voila!
...-
related links the amazing netscape fish cam page original document information author(s): eric meyer, standards evangelist, netscape communications last updated date: published 25 apr 2003 copyright information: copyright © 2001-2003 netscape.
Issues Arising From Arbitrary-Element hover - Archive of obsolete content
the most
reliable fix is to add the anchor element to the selectors, like this: a:hover {color: red;} a.nav:hover {color: red;} in an attempt to avoid causing problems for legacy documents, browsers based on mozilla 1.0 and later (netscape 7+) include code that causes bare pseudo-classes to be restricted only to links if the document is rendered in "quirks" mode.
... named anchor problems in addition to the effects described previously, there are two other
relatively common effects that authors may not expect.
...although authors may intend the selector a:hover to apply only to hyperlinks, it will also apply to named anchors, since the selector me
rely states that any a element which is in a hover state will be styled.
...thus, a:hover should always be used instead of just :hover, and a:link:hover (and a:visited:hover) are preferred to the simpler a:hover
related links the dynamic pseudo-classes: :hover, :active, and :focus :hover pseudo-class (msdn) original document information author(s): eric a.
Archive of obsolete content
element events archived event pages firefox developer tools these are articles
related to the firefox developer tools, which are no longer current.
... mozilla
release faq this document may be distributed and modified freely.
... security
relying on these obsolete security articles is highly discouraged.
... xquery xquery is a w3c standard language which is meant to be for xml what sql is for
relational data--i.e., the ability to search, sort, extract, and remold data.
Implementing game control mechanisms - Game development
the src folder contains the javascript files split as a separate states — boot.js, p
reloader.js, mainmenu.js and game.js — these are loaded into the index file in this exact order.
... the first one initializes phaser, the second p
reloads all the assets, the third one controls the main menu welcoming the player, and the fourth controls the actual gameplay.
... every state has its own default methods: p
reload(), create(), and update().
... the first one is needed for p
reloading required assets, create() is executed once the state had started, and update() is executed on every frame.
Paddle and keyboard controls - Game development
the
relevant variable in each case is set to true.
... when the key is
released, the variable is set back to false.
...if the left cursor is pressed, then the leftpressed variable is set to true, and when it is
released, the leftpressed variable is set to false.
... the paddle moving logic we've now set up the variables for storing the info about the pressed keys, event listeners, and
relevant functions.
Player paddle and controls - Game development
rendering the paddle from the framework point of view the paddle is very similar to the ball — we need to add a variable to represent it, load the
relevant image asset, and then do the magic.
... loading the paddle first, add the paddle variable we will be using in our game, right after the ball variable: var paddle; then, in the p
reload function, load the paddle image by adding the following new load.image() call: function p
reload() { // ...
... as you'll notice if you
reload your index.html at this point, the paddle is currently not exactly in the middle.
...update the previous line as follows: paddle.x = game.input.x || game.world.width*0.5; if you haven't already done so,
reload your index.html and try it out!
HTML: A good basis for accessibility - Learn web development
0">go!</button> </td> </tr> <!-- spacer row --> <tr id="spacer" height="10"> <td> </td> </tr> <!-- main content and aside row --> <tr id="main"> <td id="content" colspan="4" bgcolor="#ffffff"> <!-- main content goes here --> </td> <td id="aside" colspan="2" bgcolor="#ff80ff" valign="top"> <h2>
related</h2> <!-- aside content goes here --> </td> </tr> <!-- spacer row --> <tr id="spacer" height="10"> <td> </td> </tr> <!-- footer row --> <tr id="footer" bgcolor="#ffffff"> <td colspan="6"> <p>©copyright 2050 by nobody.
... table layouts are a
relic of the past — they made sense back when css support was not widespread in browsers, but now they just create confusion for screen reader users.
...omparing your previous experience with a more modern website structure example, which could look something like this: <header> <h1>header</h1> </header> <nav> <!-- main navigation in here --> </nav> <!-- here is our page's main content --> <main> <!-- it contains an article --> <article> <h2>article heading</h2> <!-- article content in here --> </article> <aside> <h2>
related</h2> <!-- aside content in here --> </aside> </main> <!-- and here is our main footer that is used across all the pages of our website --> <footer> <!-- footer content in here --> </footer> if you try our more modern structure example with a screen reader, you'll see that the layout markup no longer gets in the way and confuses the content readout.
... one thing to consider is whether your images have meaning inside your content, or whether they are pu
rely for visual decoration, and thus have no meaning.
HTML: A good basis for accessibility - Learn web development
0">go!</button> </td> </tr> <!-- spacer row --> <tr id="spacer" height="10"> <td> </td> </tr> <!-- main content and aside row --> <tr id="main"> <td id="content" colspan="4" bgcolor="#ffffff"> <!-- main content goes here --> </td> <td id="aside" colspan="2" bgcolor="#ff80ff" valign="top"> <h2>
related</h2> <!-- aside content goes here --> </td> </tr> <!-- spacer row --> <tr id="spacer" height="10"> <td> </td> </tr> <!-- footer row --> <tr id="footer" bgcolor="#ffffff"> <td colspan="6"> <p>©copyright 2050 by nobody.
... table layouts are a
relic of the past — they made sense back when css support was not widespread in browsers, but now they just create confusion for screen reader users.
...omparing your previous experience with a more modern website structure example, which could look something like this: <header> <h1>header</h1> </header> <nav> <!-- main navigation in here --> </nav> <!-- here is our page's main content --> <main> <!-- it contains an article --> <article> <h2>article heading</h2> <!-- article content in here --> </article> <aside> <h2>
related</h2> <!-- aside content in here --> </aside> </main> <!-- and here is our main footer that is used across all the pages of our website --> <footer> <!-- footer content in here --> </footer> if you try our more modern structure example with a screen reader, you'll see that the layout markup no longer gets in the way and confuses the content readout.
... one thing to consider is whether your images have meaning inside your content, or whether they are pu
rely for visual decoration, and thus have no meaning.
Debugging CSS - Learn web development
devtools can save you a lot of time editing a stylesheet and
reloading the page.
... a reduced test case is a code example that demonstrates the problem in the simplest possible way, with un
related surrounding content and styling removed.
...you could start by doing view source on the page and copying the html into codepen, then grab any
relevant css and javascript and include it too.
... in the instance that your problem is actually a bug in a browser, then a reduced test case can also be used to file a bug report with the
relevant browser vendor (e.g.
Beginner's guide to media queries - Learn web development
in practice, using minimum or maximum values is much more useful for responsive design so you will ra
rely see width or height used alone.
...rif; } a:link, a:visited { color: #333; } nav ul, aside ul { list-style: none; padding: 0; } nav a:link, nav a:visited { background-color: rgba(207, 232, 220, 0.2); border: 2px solid rgb(79, 185, 227); text-decoration: none; display: block; padding: 10px; color: #333; font-weight: bold; } nav a:hover { background-color: rgba(207, 232, 220, 0.7); } .
related { background-color: rgba(79, 185, 227, 0.3); border: 1px solid rgb(79, 185, 227); padding: 10px; } .sidebar { background-color: rgba(207, 232, 220, 0.5); padding: 10px; } article { margin-bottom: 1em; } we've made no layout changes, however the source of the document is ordered in a way that makes the content readable.
... </p> </div> <aside class="
related"> <p> ...
... @media screen and (min-width: 40em) { article { display: grid; grid-template-columns: 3fr 1fr; column-gap: 20px; } nav ul { display: flex; } nav li { flex: 1; } } this css gives us a two-column layout inside the article, of the article content and
related information in the aside element.
How CSS is structured - Learn web development
you reference an external css stylesheet from an html <link> element: <!doctype html> <html> <head> <meta charset="utf-8"> <title>my css experiment</title> <link
rel="stylesheet" href="styles.css"> </head> <body> <h1>hello world!</h1> <p>this is my first css example</p> </body> </html> the css stylesheet file might look like this: h1 { color: blue; background-color: yellow; border: 1px solid black; } p { color: red; } the href attribute of the <link> element needs to reference a file on your file system.
...here are three examples: <!-- inside a subdirectory called styles inside the current directory --> <link
rel="stylesheet" href="styles/style.css"> <!-- inside a subdirectory called general, which is in a subdirectory called styles, inside the current directory --> <link
rel="stylesheet" href="styles/general/style.css"> <!-- go up one directory level, then inside a subdirectory called styles --> <link
rel="stylesheet" href="../styles/style.css"> internal stylesheet an internal stylesheet resides within an html document.
...inside the folder, copy the text below to create two files: index.html: <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>my css experiments</title> <link
rel="stylesheet" href="styles.css"> </head> <body> <p>create your test html here</p> </body> </html> styles.css: /* create your test css here */ p { color: red; } when you find css that you want to experiment with, replace the html <body> contents with some html to style, and then add your test css code to your css file.
... functions while most values are
relatively simple keywords or numeric values, there are some values which take the form of a function.
CSS FAQ - Learn web development
the order of classes in the class attribute is not
relevant.
...for example, many developers only using the -webkit- prefixed version of a property when the non-prefixed version is supported across all browsers meant that a feature
relying on that property would break in non-webkit-based browsers, completely needlessly.
... how does z-index
relate to positioning?
...z-index will only work on elements that have a specified position (position:absolute, position:
relative, or position:fixed).
How do you make sure your website works properly? - Learn web development
open firefox's network tool (tools ➤ web developer ➤ network) and
reload the page: there's the problem, that "404" at the bottom.
...so correct the typo in your code editor by changing the image's src attribute: save, push to the server, and
reload the page in your browser: there you go!
... let's look at the http statuses again: 200 for / and for unicorn_pic.png means that we succeeded in
reloading the page and the image.
... open the console (tools ➤ web developer ➤ web console) and
reload the page: in this example, we learn (quite clearly) what the error is, and we can go fix it (we will cover javascript in another series of articles).
What do common web layouts contain? - Learn web development
contains information
relevant to all pages (like site name or logo) and an easy-to-use navigation system.
...it's
related to the main content, but the main content makes sense without it, so you could think of the image either as main content or as side content.
...what does matter is, if you put something right under the header, it should either be main content or directly
related to the main content.
...the opera example looks more complex than the mica example, but it's actually easier to implement (all right, "easy" is a
relative concept).
Common questions - Learn web development
how the web works this section covers web mechanics —questions
relating to general knowledge of the web ecosystem and how it works.
... in this article we describe various web-
related concepts: webpages, websites, web servers, and search engines.
... tools and setup questions
related to the tools/software you can use to build websites.
... design and accessibility this section lists questions
related to aesthetics, page structure, accessibility techniques, etc.
Client-side form validation - Learn web development
using built-in form validation one of the most significant features of html5 form controls is the ability to validate most user data without
relying on javascript.
...make them fruit-
related where possible so that your examples make sense!
...to style the html: form { font: 1em sans-serif; max-width: 320px; } p > label { display: block; } input[type="text"], input[type="email"], input[type="number"], textarea, fieldset { width : 100%; border: 1px solid #333; box-sizing: border-box; } input:invalid { box-shadow: 0 0 5px 1px red; } input:focus:invalid { box-shadow: none; } this renders as follows: see validation-
related attributes for a complete list of attributes that can be used to constrain input values and the input types that support them.
... if (output === false) return false; if (typeof previouseventcallback === 'function') { output = previouseventcallback(e); if(output === false) return false; } } }; // now we can rebuild our validation constraint // because we do not
rely on css pseudo-class, we have to // explicitly set the valid/invalid class on our email field addevent(window, "load", function () { // here, we test if the field is empty (remember, the field is not required) // if it is not, we check if its content is a well-formed e-mail address.
Advanced text formatting - Learn web development
here you'll learn about marking up quotations, description lists, computer code and other
related text, subscript and superscript, contact information, and more.
...let's look at an example of a set of terms and definitions: soliloquy in drama, where a character speaks to themselves, representing their inner thoughts or feelings and in the process
relaying them to the audience (but not to other characters.) monologue in drama, where a character speaks their thoughts out loud to share them with the audience and any other characters present.
...let's finish marking up our example: <dl> <dt>soliloquy</dt> <dd>in drama, where a character speaks to themselves, representing their inner thoughts or feelings and in the process
relaying them to the audience (but not to other characters.)</dd> <dt>monologue</dt> <dd>in drama, where a character speaks their thoughts out loud to share them with the audience and any other characters present.</dd> <dt>aside</dt> <dd>in drama, where a character shares a comment only with the audience for humorous or dramatic effect.
...this is usually a feeling, thought, or piece of additional background information.</dd> <dd>in writing, a section of content that is
related to the current topic, but doesn't fit directly into the main flow of content so is presented nearby (often in a box off to the side.)</dd> </dl> active learning: marking up a set of definitions it's time to try your hand at description lists; add elements to the raw text in the input field so that it appears as a description list in the output field.
Build your own function - Learn web development
when you save your code and
reload it in the browser, you'll see the little message box appear immediately, only once.
...if you try changing the line to btn.onclick = displaymessage(); and saving and
reloading, you'll see that the message box appears without the button being clicked!
...
reload and try the code again and you'll see that it still works just fine, except that now you can also vary the message inside the parameter to get different messages displayed in the box!
...in the next article we'll wrap up functions by explaining another essential
related concept — return values.
Functions — reusable blocks of code - Learn web development
for now, we just wanted to clear up any possible confusion of method versus function — you are likely to meet both terms as you look at the available
related resources across the web.
...try editing a() and b() so they look like this: function a() { let y = 2; output(y); } function b() { let z = 3; output(z); } save the code and
reload it in your browser, then try calling the a() and b() functions from the javascript console: a(); b(); you should see the y and z values output in the page.
... now try updating your code like this: function a() { let y = 2; output(x); } function b() { let z = 3; output(x); } save and
reload again, and try this again in your javascript console: a(); b(); both the a() and b() call should output the value of x — 1.
... finally, try updating your code like this: function a() { let y = 2; output(z); } function b() { let z = 3; output(y); } save and
reload again, and try this again in your javascript console: a(); b(); this time the a() and b() calls will both return an annoying referenceerror: variable name is not defined error — this is because the output() calls and the variables they are trying to print are not in the same function scopes — the variables are effectively invisible to those function calls.
Introduction to web APIs - Learn web development
relationship between javascript, apis, and other javascript tools so above, we talked about what client-side javascript apis are, and how they
relate to the javascript language.
...this seemingly small detail has had a huge impact on the performance and behaviour of sites — if you just need to update a stock listing or list of available new stories, doing it instantly without having to
reload the whole entire page from the server can make the site or app feel much more responsive and "snappy".
...textcontent = 'play'; } }); // if track ends audioelement.addeventlistener('ended', function() { playbtn.setattribute('class', 'paused'); playbtn.textcontent = 'play'; }); note: some of you may notice that the play() and pause() methods being used to play and pause the track are not part of the web audio api; they are part of the htmlmediaelement api, which is different but closely-
related.
...e found hanging off the document object, or an instance of an html element that you want to affect in some way, for example: const em = document.createelement('em'); // create a new em element const para = document.queryselector('p'); // reference an existing p element em.textcontent = 'hello there!'; // give em some text content para.appendchild(em); // embed em inside para the canvas api also
relies on getting a context object to use to manipulate things, although in this case, it's a graphical context rather than an audio context.
JavaScript object basics - Learn web development
objective: to understand the basic theory behind object-oriented programming, how this
relates to javascript ("most things are objects"), and how to start working with javascript objects.
... object basics an object is a collection of
related data and/or functionality (which usually consists of several variables and functions — which are called properties and methods when they are inside objects.) let's work through an example to understand what they look like.
... it is very common to create an object using an object literal when you want to transfer a series of structured,
related data items in some manner, for example sending a request to the server to be put into a database.
...you should also appreciate that objects are very useful as structures for storing
related data and functionality — if you tried to keep track of all the properties and methods in our person object as separate variables and functions, it would be inefficient and frustrating, and we'd run the risk of clashing with other variables and functions that have the same names.
Object-oriented JavaScript for beginners - Learn web development
objective: to understand the basic theory behind object-oriented programming, how this
relates to javascript ("everything is an object"), and how to create constructors and object instances.
... objects can contain
related data and code, which represent information about the thing you are trying to model, and functionality or behavior that you want it to have.
... add the following lines below your previous code addition: let person1 = new person('bob'); let person2 = new person('sarah'); save your code and
reload it in the browser, and try entering the following lines into your js console: person1.name person1.greeting() person2.name person2.greeting() cool!
... note that this set of tests
relies on some of the knowledge taught in the next two articles, so you might want to read them first before you try the tests.
Measuring performance - Learn web development
for example, you can use performance metrics to determine how your app performs in comparison to a competitor or you can compare your app's performance across
releases.
... the metrics you choose to measure should be
relevant to your users, site, and business goals.
...you can use the api for metrics
related to all of the navigation events displayed in the didagram below.
... the performance api, which provides access to performance-
related information for the current page, includes the performance timeline api, the navigation timing api, the user timing api, and the resource timing api.
What is web performance? - Learn web development
a general strategy is to make your files as small as possible, reduce the number of http requests made as much as possible, and employ clever loading techniques (such as p
reload) to make files available sooner.
... smoothness and interactivity: does the application feel
reliable and pleasurable to use?
...the browser follows a well-defined set of steps, and optimizing the critical rendering path to prioritize the display of content that
relates to the current user action will lead to significant improvements in content rendering time.
...this includes all the html attributes and the
relationships between the nodes.
TypeScript support in Svelte - Learn web development
structural typing is a way of
relating types based solely on their members, even if you do not explicitly define the type.
...replace your two filter-
related blocks with the following: let filter: filter = filter.all const filtertodos = (filter: filter, todos) => filter === filter.active ?
...'checked' : 'unchecked'} ${todos.length} todos` } const removecompletedtodos = () => { $alert = `removed ${todos.filter(t => t.completed).length} todos` todos = todos.filter(t => !t.completed) } </script> todosstatus.svelte we are encountering the following errors
related to passing todos to the todosstatus.svelte (and todo.svelte) components: ./src/components/todos.svelte:70:39 error: type 'todotype[]' is not assignable to type 'undefined'.
...update the let headingel line with the following: let headingel: htmlelement finally, you'll notice the following error reported,
related to where we set the tabindex attribute.
Componentizing our Svelte app - Learn web development
it will help you understand how they
relate to each other, it will promote reuse, and it will make your code easier to reason about, maintain, and extend.
... inside this file we will declare a filter prop, and then copy the
relevant markup over to it from todos.svelte.
... basically, this pattern
relies on child components receiving data from their parents via props and parent components updating their state by handling events emitted from child components.
...stores allows you to share reactive data among components that are not hierarchically
related.
Strategies for carrying out testing - Learn web development
of course, this
relies on you already having a site to use it on, so it isn't much good for completely new sites.
...maybe we could use some javascript to implement a keyboard control for the toggle, or use some other method enti
rely?
...you tend to choose the hard drive space you want for each install; you could get away with probably 10gb, but some sources recommend up to 50gb or more, so the operating system will run
reliably.
...it is useful to provide a set of steps (sometimes called a script) so that you get more
reliable results pertaining to what you were trying to test.
Mozilla’s UAAG evaluation report
(p1) na this
relates to multimedia players 2.6 respect synchronization cues.
... (p1) na this
relates to multimedia players 2.7 repair missing content.
...(p1) vg we
rely on color alone when showing which links have been recently visited.
... unfortunately, switching profiles requires the entire application to be
relaunched.
Gmake vs. Pymake
if you try to switch from gmake to pymake or pymake to gmake the build will fail unless you did a
relative configure.
... a
relative configure produces paths that look like "../../foo" which can be understood by gmake and pymake.
... to configure
relatively, invoke configure or client.mk from your objdir.
...note that typing "python build/pymake/make.py -f client.mk" does not trigger a
relative configure.
Updating NSPR or NSS in mozilla-central
(because some developers might not be aware that nspr/nss are separately maintained and
released, the mozilla hg server rejects accidental changes/forking, if the required keywords are missing in the commit comment.) if nspr or nss must be upgraded to a new static tag, follow this procedure: before starting, make sure your local repository is updated to mozilla-central tip and that there are no local changes: $ hg status -mard pull the new sources $ python client.py update_ns...
... moz_arg_with_bool(system-nss, [ --with-system-nss use system installed nss], _use_system_nss=1 ) if test -n "$_use_system_nss"; then am_path_nss(3.16.1, [moz_native_nss=1], [ac_msg_error([you don't have nss installed or your version is too old])]) fi commit the update: $ hg commit -a in order to eliminate any problems
related to how nss and nspr are built differently in firefox than they are standalone, you should push your commit to try first.
... if your update fails linking because of missing nss or nspr symbols, add the missing symbols to config/external/nss/nspr-dummy.def or config/external/nss/nss.def, whichever is
relevant.
... in your commit message, include the required keywords, upgrade_nspr_
release and/or upgrade_nss_
release.
Gecko Keypress Event
the changes were risky so late in the
release schedule, but they were necessary for fixing the many key handling bugs.
...this behavior is a bug, this behavior will be changed in a future major
release (bug 432951).
... for the us keyboard layout, a
related handler is defined with <key key="=" modifiers="accel"/>, so that users do not need to use the shift key to access the zoom-in shortcut.
...(chrome accesskey, including menu accesskey, handling is currently similar, but this should not be
relied on.
How Mozilla determines MIME Types
this means that, for example, if mozilla encounters a <link type="text/css"
rel="stylesheet" href="..."> element, a type of text/css will be assumed.
...this should allow
reliable detection of all image types mozilla supports.
... helper applications a somewhat
related issue are the helper applications.
...
related information document loading - from load start to finding a handler original document information author(s): christian biesinger last updated date: march 7, 2005 copyright information: copyright (c) christian biesinger ...
How to get a stacktrace with WinDbg
a firefox nightly or
release you need a firefox version for which symbols are availables from the mozilla symbol server to use with windbg.
... you can use any official nightly build or
released version of firefox from mozilla.
...(more details are available at using the mozilla symbol server.) .sympath srv*c:\symbols*http://symbols.mozilla.org/firefox;srv*c:\symbols*http://msdl.microsoft.com/download/symbols .symfix+ c:\symbols .
reload /f now wait for the symbols to download.
...to provide the information to the development community, submit this file with a support request or attach it to a
related bug on bugzilla.
Addon
api consumers should take care to verify the existence of these methods or properties before
relying on them.
... providesupdatessecu
rely read only boolean true if the add-on has a secure means of updating or cannot be updated at all.
...
releasenotesuri read only nsiuri a uri for
release notes for this version.
... error if an error has occured, an error object
relevant to the error, othereise null.
Application Translation with Mercurial
for aurora and german (language code 'de'), it is http://hg.mozilla.org/
releases/l10n/mozilla-aurora/de/ copy that url to the clipboard.
... copy the repository to your computer by running the following command: hg clone http://hg.mozilla.org/
releases/l10n/mozilla-aurora/de/ de-mozilla-aurora this should proceed pretty fast.
... save this comparison as project so you can easily
relaunch this comparision without selecting the directories again.
... press the f5 key or click the
reload button in winmerge's toolbar to re-compare the files.
About NSPR
today nspr may still be appropriate as the platform dependent layer under java, but its primary application is supporting clients written enti
rely in c or c++.
...it was originally intended to export synchronous i/o methods only,
relying on threads to provide the concurrency needed for complex applications.
...depending on the platform, the functions may be implemented almost enti
rely in the nspr runtime or simply shims that call immediately into the host operating system's offerings.
...as operating system vendors issue new
releases of their operating systems, nspr will be moved forward to these new
releases by interested players.
PR_Unlock
releases a specified lock object.
...
releasing an unlocked lock results in an error.
... attempting to
release a lock that was locked by a different thread causes undefined behavior.
... syntax #include <prlock.h> prstatus pr_unlock(prlock *lock); parameter pr_unlock has one parameter: lock a pointer to a lock object to be
released.
nss tech note5
also, this document does not attempt to be an exhaustive survey of all possible ways to do a certain task; it me
rely tries to show a certain way.
...iv is
relevant only when using cbc mode of encryption.
...iv is
relevant only when using cbc cipher mode.
...iv is
relevant only when using cbc cipher mode.
PKCS11 Implement
c_copyobject the nss ra
rely calls c_copyobject but may sometimes do so for non-token private keys.
...these values must match the equivalent values for
related keys and certificates and must be unique among key pairs on a given token.
...future
releases of nss will also support multipurpose tokens that are fips-140 compliant.
...nss doesn't require token public keys, but if they exist, nss expects the value of the cka_id attribute to be associated with private key and any
related certificates.
TLS Cipher Suite Discovery
in order to communicate secu
rely, an tls client and tls server must agree on the cryptographic algorithms and keys that they will both use on the secured connection.
... each new
release of a tls implementation may contain support for new cipher suites not supported in previous versions.
... when a new version of a tls implementation is made available for use by applications, those applications may wish to immediately use the newly supported cipher suites found in the new version, without the application needing to be modified and re-
released to know about these new cipher suites.
...the size of this table varies from
release to
release, and so libssl makes the number of entries in that table publicly available too.
NSS tools : signtool
similarly, if you are a network administrator, you should make sure, before signing any code, that it comes from a
reliable source and will run correctly with the software installed on the machines to which you are distributing it.
...this includes checking that the certificate for the issuer of the object-signing certificate is listed in the certificate database, that the ca's digital signature on the object-signing certificate is valid, that the
relevant certificates have not expired, and so on.
... o https://wiki.mozilla.org/nss_shared_db_howto o https://wiki.mozilla.org/nss_shared_db additional resources for information about nss and other tools
related to nss (like jss), check out the nss project wiki at [1]http://www.mozilla.org/projects/security/pki/nss/.
... the nss site
relates directly to nss code changes and
releases.
Download Rhino
binaries
release
release date change log download link rhino 1.7r4 2012-06-18 new in rhino 1.7r4 rhino1_7r4.zip rhino 1.7r5 2015-01-29
release notes rhino1_7r5.zip rhino 1.7.6 2015-04-15
release notes rhino1.7.6.zip rhino 1.7.7 2015-06-17
release notes rhino1.7.7.zip rhino 1.7.7.1 2016-02-01
release notes rhino1.7.7.1.zip rhino 1.7.7.2 2017-08-24
release notes rhino1.7.7.2.zip rhino 1.7.8 2018-01-22
release notes rhino1.7.8.zip rhino 1.7.9 2018-03-15
release notes rhino1.7.9.zip rhino 1.7.10 2018-04-09
release notes rhino1.7.10.zip ...
... rhino 1.7.11 2019-05-30
release notes rhino1.7.11.zip rhino 1.7.12 2020-01-13
release notes rhino1.7.12.zip to download older rhino versions, see the rhino downloads archive.
...as of
release 1.7r4 rhino is available under mpl 2.0.
... previous versions were
released under mpl 1.1/gpl 2.0 license.
Garbage collection
compartments are a fundamental cross-cutting concept in spidermonkey (see also compartments), though anything
related to memory is now more concerned with zones, especially gc.
... the spidermonkey incremental write barrier spidermonkey uses a (
relatively!) simple, common incremental write barrier called a snapshot-at-the-beginning allocate-black barrier.
...heapslot (and the
related class heapslotarray) is the same, but for object slots.
...the map/unmap functions are used by gc.cpp to allocate and
release chunks.
SpiderMonkey 52
these
release notes are incomplete.
... the mozilla javascript team is pleased to announce the
release of spidermonkey 52.
...it continues to improve performance over previous spidermonkey
releases.
... please let us know about your experiences with this
release by posting in the mozilla.dev.tech.js-engine newsgroup.
Signing Mozilla apps for Mac OS X
firefox and thunderbird
releases are both signed before shipping; this article describes the process.
... signing mozilla apps without the signing server firefox and thunderbird are built using mozilla's
release automation infrastructure.
...for projects that don't use mozilla's
release automation and would like to be signed for secure launching on os 10.8 mountain lion and later, this guide should provide some insight into how to make sure applications are signed correctly using apple's codesign tool.
... for
release creating a developer id requires a paid apple developer account.
The Publicity Stream API
[is this still doable?] the javascript library should be included from: https://myapps.mozillalabs.com/jsapi/publicity.js all apis
related to open web applications are accessed under the navigator.apps object.
... getpublicitystream( onsuccess: <function>, { [ onerror: <function> ], [ for_apps: <list> ], [ since: <date> ], [ before: <date> ], [ count: <int> ]): provides a means for a web store to receive a list of the current user's socially
relevant app activity by being called from an origin which hosts a web store.
... onsuccess will be called with a single argument: a json list of the current user's socially
relevant app activity in the fixme: deadlinkactivity streams open specification.
...possible error codes include: denied - if the user does not log in correctly permissiondenied - if the site is not allowed to access the publicity stream networkerror - if the publicity server is unreachable for_apps is a json list of apps that this store has (each represented as its origin url), so that stream events not
relating to applications in a given presentation context can be excluded from the return value.
Finishing the Component
* when they are finished they can ns_
release() the service as usual.
... * * a user of a service may keep references to particular services * indefinitely and only must call
release when it shuts down.
...but unfrozen interfaces are not supported in any formal way, and
relying upon a different iid for any change in the interface is not a good idea either.
...see the intro to the html 4 specification for more information about
relative urls.
Preface
for example, the introduction includes a discussion of components and what they are, and the first chapter - in which you compile the basic code and register it with mozilla - prompts a discussion of the
relationship between components and modules, of xpcom interfaces, and of the registration process in general.
...it is badly out of date, and much of what it says is either no longer remotely accurate, or is seve
rely deprecated.
...although, xpcom can be used in many environments which are un
related to web browsing, xpcom's main client is gecko, an open source, standards compliant, embeddable web browser, where it's easiest and most practical to illustrate xpcom's functionality.
...in order to build it, your gecko sdk or mozilla source tree needs to be version 1.2 or later (xpcom interfaces were not fully frozen in prior
releases).
nsAutoRef
nsautoref<t> is a template class implementing an object that holds a handle to a resource that must be
released, typically on destruction of the object.
... nsautoref has a role similar to nsautoptr and nsrefptr but does not require that the handle is a pointer to an object that was created with new or has addref() and
release() methods.
...no copy constructor nor copy assignment operators are available, so the handle to the resource will be held until
released on destruction of the nsautoref or until explicitly reset() or transferred through provided methods.
... in order to use nsautoref<t> for a class t associated with a particular resource type, the type of the handle to the resource and the method for
releasing the resource must be provided for class t.
IAccessibleText
[propget] hresult caretoffset( [out] long offset ); parameters offset the returned offset is
relative to the text() represented by this object.
...because it does not represent an existing character its bounding box is defined in
relation to preceding characters.
...coordtype specifies if the coordinates are
relative to the screen or to the parent window.
...coordinatetype specifies whether the coordinates are
relative to the screen or the parent object.
nsIAccessibleText
because it does not represent an existing character its bounding box is defined in
relation to preceding characters.
...coordtype specifies if the coordinates are
relative to the screen or to the parent window (see constants declared in nsiaccessiblecoordinatetype.constants).
...because it does not represent an existing character its bounding box is defined in
relation to preceding characters.
...coordtype specifies if the coordinates are
relative to the screen or to the parent window (see constants declared in nsiaccessiblecoordinatetype.constants.
nsIDOMWindowUtils
query_content_flag_offset_
relative_to_insertion_point 0x0800 one of values of aadditionalflags of sendquerycontentevent().
... <x, y> is
relative to the top-left of the css viewport.
...the displayport can approximately be thought of as a "persistent" drawwindow() (albeit with coordinates
relative to the css viewport): the bounds are remembered by the platform, and layer pixels are retained and updated inside the viewport bounds.
...this api is enti
rely separate from textzoom and fullzoom; a resolution scale can be applied together with both textzoom and fullzoom.
nsIMsgDBView
; void geturisforselection([array, size_is(count)] out string uris, out unsigned long count); void getindicesforselection([array, size_is(count)] out nsmsgviewindex indices, out unsigned long count); void loadmessagebymsgkey(in nsmsgkey amsgkey); void loadmessagebyviewindex(in nsmsgviewindex aindex); void loadmessagebyurl(in string aurl); void
reloadmessage(); void
reloadmessagewithallparts(); void selectmsgbykey(in nsmsgkey key); void selectfoldermsgbykey(in nsimsgfolder afolder, in nsmsgkey akey); void ondeletecompleted(in boolean succeeded); nsmsgviewindex findindexfromkey(in nsmsgkey amsgkey, in boolean aexpand); void expandandselectthreadbyindex(in nsmsgviewindex aindex, in boolean...
... void loadmessagebyurl(in string aurl); parameters aurl the url of the message
reloadmessage()
reload the currently shown message.
... void
reloadmessage();
reloadmessagewithallparts()
reload the currently shown message with fetchcompletemessage set to true.
... void
reloadmessagewithallparts(); selectmsgbykey() selects a message based on its key.
nsIMsgFolder
void copyfolder(in nsimsgfolder srcfolder, in boolean ismovefolder,in nsimsgwindow msgwindow, in nsimsgcopyservicelistener listener ); void copyfilemessage(in nsifile file, in nsimsgdbhdr msgtoreplace,in boolean isdraft, in unsigned long newmsgflags,in nsimsgwindow msgwindow,in nsimsgcopyservicelistener listener); void acquiresemaphore(in nsisupports semholder); void
releasesemaphore(in nsisupports semholder); boolean testsemaphore(in nsisupports semholder); void getnewmessages(in nsimsgwindow awindow, in nsiurllistener alistener); void writetofoldercache(in nsimsgfoldercache foldercache, in boolean deep); long getnumnewmessages(in boolean deep); void setnumnewmessages(in long numnewmessages); acstring generat...
... knowssearchnntpextension boolean readonly allowsposting boolean readonly
relativepathname acstring readonly sizeondisk unsigned long size of this folder on disk (not including .msf file) for imap, it's the sum of the size of the messages.
...for example, in the sent folder, recipients are more
relevant than the sender.
...istener); copyfilemessage() void copyfilemessage(in nsifile file, in nsimsgdbhdr msgtoreplace, in boolean isdraft, in unsigned long newmsgflags, in nsimsgwindow msgwindow, in nsimsgcopyservicelistener listener); acquiresemaphore() void acquiresemaphore(in nsisupports semholder);
releasesemaphore() void
releasesemaphore(in nsisupports semholder); testsemaphore() boolean testsemaphore(in nsisupports semholder); getnewmessages() void getnewmessages(in nsimsgwindow awindow, in nsiurllistener alistener); writetofoldercache() write out summary data for this folder to the given folder cache (i.e.
nsIMsgIncomingServer
playofflinemsg(in nsimsgwindow awindow); boolean equals(in nsimsgincomingserver server); void forgetpassword(); void forgetsessionpassword(); astring generateprettynameformigration(); boolean getboolattribute(in string name); boolean getboolvalue(in string attr); acstring getcharattribute(in string name); acstring getcharvalue(in string attr); nsilocalfile getfilevalue(in string
relpref, in string abspref); nsimsgfilterlist getfilterlist(in nsimsgwindow amsgwindow); long getintattribute(in string name); long getintvalue(in string attr); nsimsgfolder getmsgfolderfromuri(in nsimsgfolder afolderresource, in acstring auri); void getnewmessages(in nsimsgfolder afolder, in nsimsgwindow amsgwindow, in nsiurllistener aurllistener); acstring getpasswordwithui(in astring ...
...ow); void performexpand(in nsimsgwindow amsgwindow); void removefiles(); void setboolattribute(in string name, in boolean value); void setboolvalue(in string attr, in boolean value); void setcharattribute(in string name, in acstring value); void setcharvalue(in string attr, in acstring value); void setdefaultlocalpath(in nsilocalfile adefaultlocalpath); void setfilevalue(in string
relpref, in string abspref, in nsilocalfile avalue); void setfilterlist(in nsimsgfilterlist afilterlist); void setintattribute(in string name, in long value); void setintvalue(in string attr, in long value); void setunicharattribute(in string name, in astring value); void setunicharvalue(in string attr, in astring value); void shutdown(); void storepassword(); astring tostring(); vo...
...ribute( in string name ); parameters name missing description return value missing description exceptions thrown missing exception missing description getcharvalue() acstring getcharvalue( in string attr ); parameters attr missing description return value missing description exceptions thrown missing exception missing description getfilevalue() nsilocalfile getfilevalue( in string
relpref, in string abspref ); parameters
relpref missing description abspref missing description return value missing description exceptions thrown missing exception missing description getfilterlist() nsimsgfilterlist getfilterlist( in nsimsgwindow amsgwindow ); parameters amsgwindow missing description return value missing description exceptions thrown missing exception missing descrip...
...ring attr, in acstring value ); parameters attr missing description value missing description exceptions thrown missing exception missing description setdefaultlocalpath() void setdefaultlocalpath( in nsilocalfile adefaultlocalpath ); parameters adefaultlocalpath missing description exceptions thrown missing exception missing description setfilevalue() void setfilevalue( in string
relpref, in string abspref, in nsilocalfile avalue ); parameters
relpref missing description abspref missing description avalue missing description exceptions thrown missing exception missing description setfilterlist() void setfilterlist( in nsimsgfilterlist afilterlist ); parameters afilterlist missing description exceptions thrown missing exception missing description setintattribu...
nsIProcess
gecko 1.9.1 note this attribute is no longer implemented as of gecko 1.9.1, and is removed enti
rely in gecko 1.9.2.
... gecko 1.9.1 note this attribute is no longer implemented as of gecko 1.9.1, and is removed enti
rely in gecko 1.9.2.
... gecko 1.9.1 note this attribute is no longer implemented as of gecko 1.9.1, and is removed enti
rely in gecko 1.9.2.
... gecko 1.9.1 note this method is no longer implemented as of gecko 1.9.1, and is removed enti
rely in gecko 1.9.2.
nsIProtocolHandler
constants constant value description uri_std 0 a standard full uri with authority component and understanding
relative uris; this includes http and ftp, for example.
... uri_no
relative 1<<0 the protocol doesn't support
relative uris (for example, about and javascript).
...otherwise, aspec may be resolved
relative to abaseuri, depending on the protocol.
... if the protocol has no concept of
relative uris, this parameter is ignored.
nsIXPConnect
pruint32 aflags); nsivariant jstovariant(in jscontextptr ctx, in jsval value); nsivariant jsvaltovariant(in jscontextptr cx, in jsvalptr ajsval); void movewrappers(in jscontextptr ajscontext, in jsobjectptr aoldscope, in jsobjectptr anewscope); [noscript,notxpcom] void notejscontext(in jscontextptr ajscontext, in nscctraversalcallbackref acb); void
releasejscontext(in jscontextptr ajscontext, in prbool nogc); void removejsholder(in voidptr aholder); native code only!
... defer
releasesuntilaftergarbagecollection prbool obsolete since gecko 1.9 pendingexception nsiexception constants constant value description init_js_standard_classes 1 << 0 flag_system_global_object 1 << 1 omit_components_object 1 << 2 xpc_xow_clearscope 1 tells updatexows() to clear the scope of al...
... return value missing description exceptions thrown missing exception missing description
releasejscontext() void
releasejscontext( in jscontextptr ajscontext, in prbool nogc ); parameters ajscontext missing description nogc missing description exceptions thrown missing exception missing description native code only!removejsholder stop rooting the js objects held by aholder.
...it is a good idea to transfer the jsobject to some equally protected place before
releasing the holder (i.e., use js_setproperty to make this object a property of some other jsobject).
Using nsIPasswordManager
this code is tested, but ba
rely, and i am by no means an expert on this area.
...working with password manager extensions often need to secu
rely store passwords to external sites, web applications, and so on.
... to do so secu
rely, they can use nsipasswordmanager, which provides for secure storage of sensitive password information.
...of this information, the password is the only data that will be stored secu
rely.
customDBHeaders Preference
while i was going through the creating a custom column guide, i built and used thunderbird-2.0b1 checked-out from cvs with the thunderbird_2_0b1_
release tag.
... there is a high probability that your experience will be different should you use an earlier
release.
...when using the latest
releases, the line should look like: // space-delimited list in the latest code!
...depending on the
release you use one, both, or none of the methods may work.
Debugger.Source - Firefox Developer Tools
please note at the time of this writing, support for webassembly is very p
reliminary.
... sourcemapurl if the instance refers to javascript source, if this source was produced by a minimizer or translated from some other language, and we know the url of a source map document
relating the source positions in this source to the corresponding source positions in the original source, then this property’s value is that url.
...if one assigns a function, that function’s script’s source doesnot belong to the dom element; the function’s definition must appear elsewhere.) (if the sources attached to a dom element change, the debugger.source instances representing superceded code still refer to the dom element; this accessor only reflects origins, not current
relationships.) elementattributename if this source belongs to a dom element because it is an event handler content attribute or an event handler idl attribute, this is the name of that attribute, a string.
...
relating a worker to its creator, and other multi-threaded debugging concerns, are out of scope for debugger.
Network request list - Firefox Developer Tools
each request is displayed in its own row: by default, the network monitor is cleared each time you navigate to a new page or
reload the current page.
... each timeline is given a horizontal position in its row
relative to the other network requests, so you can see the total time taken to load the page.
...
reload the page to test it with the specified url blocked.
...those keywords are followed by a colon and a
related filter value.
Page inspector 3-pane mode - Firefox Developer Tools
the other css
related features — such as computed styles view, animations view, and fonts view — in tabs on the right hand side, as usual.
...you just need to have the
relevant tab open to see the effect.
... enabling the 3-pane inspector pre-firefox 62 in earlier versions of firefox (since firefox 59/60), you can enable 3 pane mode in
release/beta by going to about:config and flipping the following prefs to true: devtools.inspector.split-rule-enabled — this switches 3-pane mode on and off.
... in firefox 61, these preferences got renamed to: devtools.inspector.three-pane-enabled devtools.inspector.three-pane-toggle you need to flip these two to true in
release/beta to test the feature in firefox 61.
AuthenticatorAssertionResponse.authenticatorData - Web APIs
the authenticatordata property of the authenticatorassertionresponse interface returns an arraybuffer containing information from the authenticator such as the
relying party id hash (rpidhash), a signature counter, test of user presence, user verification flags, and any extensions processed by the authenticator.
... syntax var authnrdata = authenticatorassertionresponse.authenticatordata; value an arraybuffer that has a arraybuffer.bytelength of at least 37 bytes, containing the following fields: rpidhash (32 bytes) - a sha256 hash of the
relying party id that was seen by the browser.
...this is a sequence of bytes with the following format: aaguid (16 bytes) - authenticator attestation globally unique identifier, a unique number that identifies the model of the authenticator (not the specific instance of the authenticator) so that a
relying party can understand the characteristics of the authenticator by looking up its metadata statement.
... examples var options = { challenge: new uint8array(26), // will be another value, provided by the
relying party server timeout: 60000 }; navigator.credentials.get({ publickey: options }) .then(function (assertionpkcred) { var authenticatordata = assertionpkcred.response.authenticatordata; // maybe try to convert the authenticatordata to see what's inside // send response and client extensions to the server so that it can // go on with the authentication }).catch(function (...
AuthenticatorResponse.clientDataJSON - Web APIs
challenge the base64url encoded version of the cryptographic challenge sent from the
relying party's server.
...we should expect the
relying party's id to be a suffix of this value.
... tokenbindingid optional an object describing the state of the token binding protocol for the communication with the
relying party.
... it has two properties: status: a string which is either "supported" which indicates the client support token binding but did not negotiate with the
relying party or "present" when token binding was used already id: a domstring which is the base64url encoding of the token binding id which was used for the communication.
CSSPrimitiveValue - Web APIs
conversions are allowed between absolute values (from millimeters to centimeters, from degrees to radians, and so on) but not between
relative values.
... (for example, a pixel value cannot be converted to a centimeter value.) percentage values can't be converted since they are
relative to the parent value (or another property value).
... there is one exception for color percentage values: since a color percentage value is
relative to the range 0-255, a color percentage value can be converted to a number (see also the rgbcolor interface).
... <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/cssvalue" target="_top"><rect x="1" y="1" width="80" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="41" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">cssvalue</text></a><polyline points="81,25 91,20 91,30 81,25" stroke="#d4dde4" fill="none"/><line x1="91" y1="25" x2="121" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/cssprimitivevalu...
DocumentOrShadowRoot.elementFromPoint() - Web APIs
the elementfrompoint() method—available on both the document and shadowroot objects—returns the topmost element at the specified coordinates (
relative to the viewport).
... if the method is run on another document (like an <iframe>'s subdocument), the coordinates are
relative to the document where the method is being called.
... syntax const element = document.elementfrompoint(x, y) parameters x the horizontal coordinate of a point,
relative to the left edge of the current viewport.
... y the vertical coordinate of a point,
relative to the top edge of the current viewport.
Introduction to the DOM - Web APIs
attributes are nodes in the dom just like elements are, though you may ra
rely use them as such.
... namednodemap a namednodemap is like an array, but the items are accessed by name or index, though this latter case is me
rely a convenience for enumeration, as they are in no particular order in the list.
... but the
relationship between objects and the interfaces that they implement in the dom can be confusing, and so this section attempts to say a little something about the actual interfaces in the dom specification and how they are made available.
...to run examples that only demonstrate the basic
relationship of the interface to the html elements, you may want to set up a test page in which interfaces can be easily accessed from scripts.
Cross-global fetch usage - Web APIs
when a cross-origin fetch involving a
relative url is initiated from an <iframe>, the
relative url used to be resolved against the current global location, rather than the iframe's location.
...frame.contentwindow.fetch() the url passed to fetch needs to be
relative the problem in the past we would resolve the
relative url against the current global, for example: let absolute = new url(
relative, window.location.href) this is not a problem as such.
... the solution in firefox 60 onwards, mozilla resolves the
relative url against the global that owns the fetch() function being used (see bug 1432272).
... so in the case described above, it is resolved against the iframe's location: let absolute = new url(
relative, frame.contentwindow.location.href) there is a lot of discussion in progress about getting new specs to align with this behavior change, to mitigate potential problems going forward.
HTMLElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position:
relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyl...
... htmlelement.offsetheight read only returns a double containing the height of an element,
relative to the layout.
... htmlelement.offsetwidth read only returns a double containing the width of an element,
relative to the layout.
... lostpointercapture fired when a captured pointer is
released.
HTMLInputElement.webkitdirectory - Web APIs
understanding the results after the user makes a selection, each file object in files has its file.webkit
relativepath property set to the
relative path within the selected directory at which the file is located.
...the entry for pic2343.jpg will have a webkit
relativepath of photoalbums/birthdays/don's 40th birthday/pic2343.jpg.
... note: the behavior of webkit
relativepath is different in chromium < 72.
..."file" id="filepicker" name="filelist" webkitdirectory multiple /> <ul id="listing"></ul> javascript content document.getelementbyid("filepicker").addeventlistener("change", function(event) { let output = document.getelementbyid("listing"); let files = event.target.files; for (let i=0; i<files.length; i++) { let item = document.createelement("li"); item.innerhtml = files[i].webkit
relativepath; output.appendchild(item); }; }, false); result specifications specification status comment file and directory entries apithe definition of 'webkitdirectory' in that specification.
The HTML DOM API - Web APIs
the html dom api is made up of the interfaces that define the functionality of each of the elements in html, as well as any supporting types and interfaces they
rely upon.
...for example, consider a <a> element, which is represented in the dom by an object of type htmlancho
relement.
... html element interfaces these interfaces represent specific html elements (or sets of
related elements which have the same properties and methods associated with them).
... htmlancho
relement htmlareaelement htmlaudioelement htmlb
relement htmlbaseelement htmlbodyelement htmlbuttonelement htmlcanvaselement htmldlistelement htmldataelement htmldatalistelement htmldetailselement htmldialogelement htmldirectoryelement htmldivelement htmlelement htmlembedelement htmlfieldsetelement htmlformelement htmlh
relement htmlheadelement htmlheadingelement htmlhtmlelement htmliframeelement htmlimageelement htmlinputelement htmllielement htmllabelelement htmllegendelement htmllinkelement htmlmapelement htmlmediaelement htmlmenuelement htmlmetaelement htmlmete
relement htmlmodelement htmlolistelement htmlobjectelement htmloptgroupelement htmloptionelement htmloutputelement htmlparagraphelement htmlparamelement htmlpictureelement html...
Working with the History API - Web APIs
the popstate event won't be fired because the page has been
reloaded.
...the new url does not need to be absolute; if it's
relative, it's resolved
relative to the current url.
...with the hash-based approach, you need to encode all of the
relevant data into a short string.
...when the page
reloads, the page will receive an onload event, but no popstate event.
Intersection Observer API - Web APIs
historically, detecting visibility of an element, or the
relative visibility of two elements in
relation to each other, has been a difficult task for which solutions have been un
reliable and prone to causing the browser and the sites the user is accessing to become sluggish.
...to watch for intersection
relative to the root element, specify null.
...template"> <div class="samplebox"> <div class="label topleft"></div> <div class="label topright"></div> <div class="label bottomleft"></div> <div class="label bottomright"></div> </div> </template> <main> <div class="contents"> <div class="wrapper"> </div> </div> </main> .contents { position: absolute; width: 700px; height: 1725px; } .wrapper { position:
relative; top: 600px; } .samplebox { position:
relative; left: 175px; width: 150px; background-color: rgb(245, 170, 140); border: 2px solid rgb(201, 126, 17); padding: 4px; margin-bottom: 6px; } #box1 { height: 200px; } #box2 { height: 75px; } #box3 { height: 150px; } #box4 { height: 100px; } .label { font: 14px "open sans", "arial", sans-serif; position: absolute; ...
...we want to watch for changes in visibility of the target element
relative to the document's viewport, so root is null.
Location - Web APIs
changes done on it are reflected on the object it
relates to.
..."port">8888</span></span><span id="pathname" title="pathname">/foo/bar</span><span id="search" title="search">?q=baz</span><span id="hash" title="hash">#bang</span></span> css html, body {height:100%;} html {display:table; width:100%;} body {display:table-cell; text-align:center; vertical-align:middle; font-family:georgia; font-size:230%; line-height:1em; white-space:nowrap;} [title] {position:
relative; display:inline-block; box-sizing:border-box; /*border-bottom:.5em solid;*/ line-height:2em; cursor:pointer;} [title]:before {content:attr(title); font-family:monospace; position:absolute; top:100%; width:100%; left:50%; margin-left:-50%; font-size:40%; line-height:1.5; background:black;} [title]:hover:before, :target:before {background:black; color:yellow;} [title] [title]:before {margin-...
...top:1.5em;} [title] [title] [title]:before {margin-top:3em;} [title]:hover, :target {position:
relative; z-index:1; outline:50em solid rgba(255,255,255,.8);} javascript [].foreach.call(document.queryselectorall('[title][id]'), function (node) { node.addeventlistener("click", function(e) { e.preventdefault(); e.stoppropagation(); window.location.hash = '#' + $(this).attr('id'); }); }); [].foreach.call(document.queryselectorall('[title]'), function (node) { node.addeventlistener("click", function(e) { e.preventdefault(); e.stoppropagation(); window.location.hash = ''; }); }); result properties location.ancestororigins is a static domstringlist containing, in reverse order, the origins of all ancestor browsing contexts of the document associated with the...
... location.
reload()
reloads the current url, like the refresh button.
MediaDevices.getUserMedia() - Web APIs
navigator.mediadevices.getusermedia(constraints); /* use the stream */ } catch(err) { /* handle the error */ } } similarly, using the raw promises directly, the code looks like this: navigator.mediadevices.getusermedia(constraints) .then(function(stream) { /* use the stream */ }) .catch(function(err) { /* handle the error */ }); note: if the current document isn't loaded secu
rely, navigator.mediadevices will be undefined, and you cannot use getusermedia().
... see security for more information on this and other security issues
related to using getusermedia().
... security there are a number of ways security management and controls in a user agent can cause getusermedia() to return a security-
related error.
...a secure context is one the browser is reasonably confident contains a document which was loaded secu
rely, using https/tls, and has limited exposure to insecure contexts.
Using Navigation Timing - Web APIs
it also offers the advantage of being able to provide timing information as perceived by the user rather than data that has no cor
relation to what the user experiences.
...in particular, you need to know: was this a load or a
reload?
... window.addeventlistener("load", function() { let now = new date().gettime(); let loadingtime = now - performance.timing.navigationstart; output = "load time: " + loadingtime + " ms<br/>"; output += "navigation type: "; switch(performance.navigation.type) { case performancenavigation.type_navigate: output += "navigation"; break; case performancenavigation.type_
reload: output += "
reload"; break; case performancenavigation.type_back_forward: output += "history"; break; default: output += "unknown"; break; } output += "<br/>redirects: " + performance.navigation.redirectcount; document.queryselector(".output").innerhtml = output; }, false); this amends the previous example by looking at the conten...
...performance.navigation.type indicates what kind of load operation took place: a navigation, a
reload, or a shift through the browser's history.
Navigator - Web APIs
do not
rely on this property to return the correct value.
...do not
rely on this property to return the correct value.
...do not
rely on this property to return the correct value.
...do not
rely on this function to return a significant value.
Network Information API - Web APIs
var connection = navigator.connection || navigator.mozconnection || navigator.webkitconnection; var type = connection.effectivetype; function updateconnectionstatus() { console.log("connection type changed from " + type + " to " + connection.effectivetype); type = connection.effectivetype; } connection.addeventlistener('change', updateconnectionstatus); p
reload large resources the connection object is useful for deciding whether to p
reload resources that take large amounts of bandwidth or memory.
... this example would be called soon after page load to check for a connection type where p
reloading a video may not be desirable.
... if a cellular connection is found, then the p
reloadvideo flag is set to false.
... let p
reloadvideo = true; var connection = navigator.connection || navigator.mozconnection || navigator.webkitconnection; if (connection) { if (connection.effectivetype === 'slow-2g') { p
reloadvideo = false; } } interfaces networkinformation provides information about the connection a device is using to communicate with the network and provides a means for scripts to be notified if the connection type changes.
NotificationEvent - Web APIs
ndroidfirefox for androidopera for androidsafari on iossamsung internetnotificationevent experimentalchrome full support 42edge full support ≤18firefox full support 44notes full support 44notes notes extended support
releases (esr) before firefox 78 esr do not support service workers and the push api.ie ?
... full support 4.0notificationevent() constructor experimentalchrome full support 42edge full support ≤18firefox full support 44notes full support 44notes notes extended support
releases (esr) before firefox 78 esr do not support service workers and the push api.ie ?
...ung internet android full support 4.0action experimentalchrome full support 48edge full support ≤18firefox full support 44notes full support 44notes notes extended support
releases (esr) before firefox 78 esr do not support service workers and the push api.ie ?
...ternet android full support 5.0notification experimentalchrome full support 42edge full support ≤18firefox full support 44notes full support 44notes notes extended support
releases (esr) before firefox 78 esr do not support service workers and the push api.ie ?
PerformanceNavigationTiming - Web APIs
<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/performanceentry" target="_top"><rect x="1" y="1" width="160" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="81" y="30" font-size="12px" font-family="consolas,monaco,andale mono...
... performancenavigationtiming.requeststart read only a domhighrestimestamp representing the time immediately before the user agent starts requesting the resource from the server, or from
relevant application caches or from local resources.
... performancenavigationtiming.responsestart read only a domhighrestimestamp representing the time immediately after the user agent's http parser receives the first byte of the response from
relevant application caches, or from local resources or from the server.
...must be: "navigate", "
reload", "back_forward" or "prerender".
Pointer Lock API - Web APIs
basic concepts pointer lock is
related to mouse capture.
... mouse capture provides continued delivery of events to a target element while a mouse is being dragged, but it stops when the mouse button is
released.
... pointer lock is different from mouse capture in the following ways: it is persistent: pointer lock does not
release the mouse until an explicit api call is made or the user uses a specific
release gesture.
... method/properties overview this section provides a brief description of each property and method
related to the pointer lock specification.
PublicKeyCredential.response - Web APIs
the information contained in this response will be used by the
relying party's server to verify the demand is legitimate.
... in order to validate the creation of credentials, a
relying party's server needs both: this response the extensions of the client (given by publickeycredential.getclientextensionresults()) to validate the demand.
... note: when validating the fetching of existing credentials, the whole publickeycredential object and the client extensions are necessary for the
relying party's server.
... syntax response = publickeycredential.response value an authenticatorresponse object containing the data a
relying party's script will receive and which should be sent to the
relying party's server in order to validate the demand for creation or fetching.
PublicKeyCredentialCreationOptions.rp - Web APIs
the rp property of the publickeycredentialcreationoptions dictionary is an object describing the
relying party which requested the credential creation (via navigator.credentials.create()).
... syntax
relyingpartyobj = publickeycredentialcreationoptions.rp properties icon optional an url as a usvstring value which points to an image resource which can be the logo/icon of the
relying party.
... id a domstring uniquely identifying a
relying party.
... name a domstring giving a human-readable name for the
relying party.
RTCIceCandidate - Web APIs
this is used to help optimize ice performance while prioritizing and cor
relating candidates that appear on multiple rtcicetransport objects.
...
relatedaddress read only if the candidate is derived from another candidate,
relatedaddress is a domstring containing that host candidate's ip address.
...
relatedport read only for a candidate that is derived from another, such as a
relay or reflexive candidate, the
relatedport is a number indicating the port number of the candidate from which this candidate is derived.
... for host candidates, the
relatedport property is null.
RTCIceCandidateStats.deleted - Web APIs
the rtcicecandidatestats dictionary's deleted property indicates whether or not the candidate has been deleted or
released.
... syntax isdeleted = rtcicecandidatestats.deleted; value a boolean value indicating whether or not the candidate has been deleted or
released.
... host candidate a value of true indicates that the candidate's network resources have been
released.
... this generally mean sthat any associated socket(s) have been closed and
released.
RTCStats - Web APIs
the statistics type hierarchy the various dictionaries that are used to define the contents of the objects that contain each of the various types of statistics for webrtc are structured in such a way that they build upon the core rtcstats dictionary, each layer adding more
relevant information.
... rtcoutboundrtpstreamstats contains statistics
related to the receiver at the remote end of the rtp stream.
... rtcsentrtpstreamstats offers statistics
related to the sending end of an rtp stream.
... rtcremoteoutboundrtpstreamstats holds statistics
related to the remote sending end an rtp stream.
Using the Screen Capture API - Web APIs
a visible display surface is a surface which is enti
rely visible on the screen, such as the frontmost window or tab, or the entire screen.
... a logical display surface is one which is in part or completely obscured, either by being overlapped by another object to some extent, or by being enti
rely hidden or offscreen.
...
related to this, the devicechange event is never sent when there are changes to the sources available for getdisplaymedia().
... css the css is enti
rely cosmetic in this example.
Selection - Web APIs
if you make a selection with a desktop mouse, the anchor is placed where you pressed the mouse button, and the focus is placed where you
released the mouse button.
... selection and input focus selection and input focus (indicated by document.activeelement) have a complex
relationship that varies by browser.
...when making a selection with a mouse, the focus is where in the document the mouse button is
released.
... working draft the selection api specification is based on the html editing apis specification and focuses on the selection-
related functionality.
UIEvent.layerX - Web APIs
the uievent.layerx read-only property returns the horizontal coordinate of the event
relative to the current layer.
... this property takes scrolling of the page into account and returns a value
relative to the whole of the document unless the event occurs inside a positioned element, where the returned value is
relative to the top left of the positioned element.
...: 10px; } </style> </head> <body onmousedown="showcoords(event)"> <p>to display the mouse coordinates please click anywhere on the page.</p> <div id="d1"> <span>this is an un-positioned div so clicking it will return layerx/layery values almost the same as pagex/pagey values.</span> </div> <div id="d2"> <span>this is a positioned div so clicking it will return layerx/layery values that are
relative to the top-left corner of this positioned element.
...this is a positioned div so clicking it will return layerx/layery values that are
relative to the top-left corner of this positioned element.
UIEvent.layerY - Web APIs
the uievent.layery read-only property returns the vertical coordinate of the event
relative to the current layer.
... this property takes scrolling of the page into account, and returns a value
relative to the whole of the document, unless the event occurs inside a positioned element, where the returned value is
relative to the top left of the positioned element.
...: 10px; } </style> </head> <body onmousedown="showcoords(event)"> <p>to display the mouse coordinates please click anywhere on the page.</p> <div id="d1"> <span>this is an un-positioned div so clicking it will return layerx/layery values almost the same as pagex/pagey values.</span> </div> <div id="d2"> <span>this is a positioned div so clicking it will return layerx/layery values that are
relative to the top-left corner of this positioned element.
...this is a positioned div so clicking it will return layerx/layery values that are
relative to the top-left corner of this positioned element.
UIEvent.pageY - Web APIs
the uievent.pagey read-only property returns the vertical coordinate of the event
relative to the whole document.
... syntax var pagey = event.pagey; pagey is an integer value in pixels for the y-coordinate of the mouse pointer,
relative to the whole document, when the mouse event fired.
...g: 10px; } </style> </head> <body onmousedown="showcoords(event)"> <p>to display the mouse coordinates please click anywhere on the page.</p> <div id="d1"> <span>this is an un-positioned div so clicking it will return layerx/layery values almost the same as pagex/pagey values.</span> </div> <div id="d2"> <span>this is a positioned div so clicking it will return layerx/layery values that are
relative to the top-left corner of this positioned element.
...this is a positioned div so clicking it will return layerx/layery values that are
relative to the top-left corner of this positioned element.
URL.createObjectURL() - Web APIs
to
release an object url, call revokeobjecturl().
...each of these must be
released by calling url.revokeobjecturl() when you no longer need them.
... browsers will
release object urls automatically when the document is unloaded; however, for optimal performance and memory usage, if there are safe times when you can explicitly unload them, you should do so.
... important: if you still have code that
relies on createobjecturl() to attach streams to media elements, you need to update your code to simply set srcobject to the mediastream directly.
WebRTC connectivity - Web APIs
this article describes how the various webrtc-
related protocols interact with one another in order to create a connection and transfer data and/or media among peers.
...ideally, candidates are udp (since it's faster, and media streams are able to recover from interruptions
relatively easily), but the ice standard does allow tcp candidates as well.
...the stun server then replies to the initiator's request with a candidate whose ip address is un
related to the remote peer.
...
relay a
relay candidate is generated just like a server reflexive candidate ("srflx"), but using turn instead of stun.
Movement, orientation, and motion: A WebXR example - Web APIs
dependencies while we will not
rely upon any 3d graphics frameworks such as three.js or the like for this example, we do use the glmatrix library for matrix math, which we've used in other examples in the past.
...osition = vec3.fromvalues(0, 0, -10); const viewerstartorientation = vec3.fromvalues(0, 0, 1.0); const cubeorientation = vec3.create(); const cubematrix = mat4.create(); const mousematrix = mat4.create(); const inverseorientation = quat.create(); const radians_per_degree = math.pi / 180.0; the first two—viewerstartposition and viewerstartorientation—indicate where the viewer will be placed
relative to the center of the space, and the direction in which they'll initially be looking.
...finally, we pass the xrrigidtransform into the object's current xrreferencespace in order to obtain the reference space that integrates this transform to represent the placement of the cube
relative tot he user given the user's movements.
... after enabling and configuring depth testing, we check the value of the enablerotation constant to see if rotation of the cube is enabled; if it is, we use glmatrix to rotate the cubematrix (representing the cube's current orientation
relative to the world space) around the three axes.
Using the Web Speech API - Web APIs
the web speech api has a main controller interface for this — speechrecognition — plus a number of closely-
related interfaces for representing grammar, results, etc.
...this accepts as parameters the string we want to add, plus optionally a weight value that specifies the importance of this grammar in
relation of other grammars available in the list (can be from 0 to 1 inclusive.) the added grammar is available in the list as a speechgrammar object instance.
... the web speech api has a main controller interface for this — speechsynthesis — plus a number of closely-
related interfaces for representing text to be synthesised (known as utterances), voices to be used for the utterance, etc.
... finally, we set the speechsynthesisutterance.pitch and speechsynthesisutterance.rate to the values of the
relevant range form elements.
Using the Web Storage API - Web APIs
the web storage api provides mechanisms by which browsers can secu
rely store key/value pairs.
... the two mechanisms within web storage are as follows: sessionstorage maintains a separate storage area for each given origin that's available for the duration of the page session (as long as the browser is open, including page
reloads and restores).
...next, we set the values displayed in the form elements to those values, so that they keep in sync when you
reload the page.
... finally, we update the styles/decorative image on the page, so your customization options come up again on
reload.
WindowOrWorkerGlobalScope.setInterval() - Web APIs
var intervalid = window.setinterval(mycallback, 500, 'parameter 1', 'parameter 2'); function mycallback(a, b) { // your code here // parameters are pu
rely optional.
...-8" /> <title>javascript typewriter - mdn example</title> <script> function typewriter (sselector, nrate) { function clean () { clearinterval(nintervid); btyping = false; bstart = true; ocurrent = null; asheets.length = nidx = 0; } function scroll (osheet, npos, beraseandstop) { if (!osheet.hasownproperty('parts') || amap.length < npos) { return true; } var o
rel, bexit = false; if (amap.length === npos) { amap.push(0); } while (amap[npos] < osheet.parts.length) { o
rel = osheet.parts[amap[npos]]; scroll(o
rel, npos + 1, beraseandstop) ?
... amap[npos]++ : bexit = true; if (beraseandstop && (o
rel.ref.nodetype - 1 | 1) === 3 && o
rel.ref.nodevalue) { bexit = true; ocurrent = o
rel.ref; spart = ocurrent.nodevalue; ocurrent.nodevalue = ''; } osheet.ref.appendchild(o
rel.ref); if (bexit) { return false; } } amap.length--; return true; } function typewrite () { if (spart.length === 0 && scroll(asheets[nidx], 0, true) && nidx++ === asheets.length - 1) { clean(); return; } ocurrent.nodevalue += spart.charat(0); spart = spart.slice(1); } function sheet (onode) { this.ref = onode; if (!onode.haschildnodes()) { return; } this.parts = array.prototype.slice.call(onode.childnodes); for (var nchild = 0; nchild < this.parts.length; nchil...
... minidaemon.js /*\ |*| |*| :: minidaemon :: |*| |*| revision #2 - september 26, 2014 |*| |*| /docs/web/api/window.setinterval |*| https://developer.mozilla.org/user:fusionchess |*| https://github.com/madmurphy/minidaemon.js |*| |*| this framework is
released under the gnu lesser general public license, version 3 or later.
WritableStreamDefaultWriter - Web APIs
returns a promise that fulfills if the stream becomes closed or the writer's lock is
released, or rejects if the stream errors.
... writablestreamdefaultwriter.
releaselock()
releases the writer's lock on the corresponding stream.
... after the lock is
released, the writer is no longer active.
... if the associated stream is errored when the lock is
released, the writer will appear errored in the same way from now on; otherwise, the writer will appear closed.
XRWebGLLayerInit.ignoreDepthValues - Web APIs
the depth buffer is typically used to assist in ordering vertices and, by extension, polygons while compositing, to ensure that the scene is correctly composited, with objects the correct distance away and with clipping and other distance-
related computations performed as accurately as possible.
... without the depth buffer, these computations must
rely enti
rely on the coordinates of each pixel.
... this property differs from depth in that depth requests a webgl layer that does not have a depth buffer at all, while ignoredepthvalues me
rely asks that the depth layer be ignored.
... ignoring depth values causes the compositor to
rely solely upon the
relative position of objects to establish depth, and may result in less effective and less comfortable 3d effects.
Using the presentation role - Accessibility
the presentation role is used to remove semantic meaning from an element and any of its
related child elements.
... for example, a table used for layout purposes could have the presentation role applied to the table element to remove any semantic meaning from the table element and any of its table
related children elements, such as table headers and table data elements.
... non-table
related elements should retain their semantic meaning, however.
... examples example 1: <ul role="tablist"> <li role="presentation"> <a role="tab" href="#">tab 1</a> </li> <li role="presentation"> <a role="tab" href="#">tab 2</a> </li> <li role="presentation"> <a role="tab" href="#">tab 3</a> </li> </ul> working examples: notes aria attributes used
related aria techniques compatibility tbd: add support information for common ua and at product combinations additional resources using aria - 2.9 use of role=presentation or role=none: https://www.w3.org/tr/using-aria/#presentation ...
ARIA annotations - Accessibility
an editorial comment
related to a part of a document under review).
...note that these aren’t part of the new aria annotations features, but they are of central
relevance.
...aria-details has been updated so that it can support multiple ids — this makes sense, for example you can easily envisage having multiple comments
relating to the same bit of text.
... to use <ins> and <del> elements for some reason: <p>freida’s pet is a <span role="deletion">black cat called luna</span><span role="insertion">purple tyrannosaurus rex called tiny</span>.</p> however, this often isn’t enough — when you’ve got a content change like the one above that involves an insertion and a deletion, there is no way for a screenreader user to work out if the two are
related or not.
ARIA: cell role - Accessibility
it establishes a
relationship between descendant rows.
...unlike a plain cell, the columnheader role establishes a
relationship between it and all cells in the corresponding column.
...unlike a plain cell, the rowheader role establishes a
relationship between it and all cells in the corresponding row.
...a
relevant use case for the aria table role is when the native semantics of a table are overridden by css's display property, such as by display: grid.
ARIA: feed role - Accessibility
the list establishes an interoperability contract between the web page and assistive technologies that governs scroll interactions so that assistive technology users can read articles, jump forward and backward by article, and
reliably trigger new articles to load while in reading mode.
... examples include an rss feed, news feeds, social media feeds like facebook, instagram or twitter, or even a list of
related products on an ecommerce page.
...implementing the feed pattern allows a screen reader to
reliably read and trigger the loading of feed content while in reading mode.
... the feed pattern enables
reliable assistive technology reading mode interaction by establishing the following interoperability agreement between the web page and assistive technologies: in the context of a feed, the web page code is responsible for: appropriate visual scrolling of the content based on which article contains dom focus.
ARIA: gridcell role - Accessibility
by referencing the parent elements with roles of rowheader or columnheader applied to them via aria-describedby, it allows assistive technology to understand the position and
relationship of the gridcell element to the rest of the table-style grouping of content.
... aria-colindex identifies the position of an element in
relation to the rest of the table-style grouping of information's columns.
... aria-rowindex identifies the position of an element in
relation to the rest of the table-style grouping of information's rows.
....6</div> <div role="gridcell">67</div> </div> </div> <div role="rowgroup"> <div role="row"> <div role="gridcell">saturn</div> <div role="gridcell">120,536</div> <div role="gridcell">10.7</div> <div role="gridcell">1433.5</div> <div role="gridcell">62</div> </div> </div> </div> accessibility concerns support for gridcell and certain gridcell-
related aria roles and properties have poor support with assistive technologies.
Accessibility and Spacial Patterns - Accessibility
symbols which have the same luminance as their background are perceptually less secu
rely located in space and time than are symbols with higher luminance contrast.
... math spatial reasoning affects math learning; consequently, spatial
relationships in how math is presented affects cognition.
... for example, "how" an object looks when it is rotated, from different angles, how they look sliced, and how they
relate to each other in space all make a difference in an ability to understand math in spatial terms.
... for example, borders on svg can extend both inward and outward from its dimensions, or for newer versions of svg, enti
rely outward from it, thus reducing the space around the svg to enable perception.
Operable - Accessibility
mouse), so that users that
rely on keyboard controls can access them.
... see ui controls and building keyboard accessibility back in 2.1.4 character key shortcuts (a) added in 2.1 if a single character key shortcut exists, then at least one of the following is true: single character key shortcuts can be turned off, remapped or are only active when the
relevant user interface component is in focus.
... guideline 2.4 — navigable: provide ways to help users navigate, find content, and determine where they are the conformance criteria under this guideline
relate to ways in which users can be expected to orientate themselves, and find the content and functionality they are looking for on the current page or other pages of the site.
... 2.4.5 multiple navigation mechanisms (aa) you should provide at least two general navigation mechanisms to find pages on your web site, for example navigation menu, breadcrumb trail, site search, site map, list of
related links, etc.
Text labels and names - Accessibility
do not
rely on placeholder text, because it disappears as soon as the user starts typing.
...users of screen readers
rely on headings to understand the structure and content of a document.
...users of screen readers
rely on headings to understand the structure and content of a document.
... see also w3c aria toolbar example
related wcag success criteria 1.1.1 non-text content (a) all non-text content that is presented to the user has a text alternative that serves the equivalent purpose, except for the situations listed in the above link.
Border-radius generator - CSS: Cascading Style Sheets
-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } /******************************************************************************/ /******************************************************************************/ /* * preview area */ #preview { height: 500px; border: 1px solid #ccc; border-radius: 3px; text-align: center; overflow: hidden; position:
relative; } #preview .content { width: 100%; height: 100%; display: block; } #preview input { color: #333; border: 1px solid #ccc; border-radius: 3px; } #subject { width: 400px; height: 150px; margin: 0 auto; border: 3px solid #c60; background: #fff; position:
relative; } .radius { width: 50%; height: 50%; border: 1px solid #ccc; display: none; position: absolute; z-index: 1; -...
...om: 0; right: 0; } /* bottom left */ #bottom-left { bottom: 0; left: 0; } #bottom-left .radius { border-bottom-left-radius: 100%; bottom: 0; } /* input sliders */ #preview .ui-input-slider { margin: 10px; position: absolute; z-index: 10; } #radius-ui-sliders { width: 100%; height: 100%; min-height: 75px; min-width: 150px; padding: 20px 50px; top: -20px; left: -50px; position:
relative; } #tlr { top: -30px; left: -50px; display: none; } #tlw { top: -30px; left: 30px; } #tlh { top: 20px; left: -50px; } #trr { top: -30px; right: -50px; display: none; } #trw { top: -30px; right: 30px; } #trh { top: 20px; right: -50px; } #brr { bottom: -30px; right: -50px; display: none; } #brw { bottom: -30px; right: 30px; } #brh { bottom: 20px; right: -50px; } ...
..., #preview .ui-input-slider-right { visibility: hidden; } #preview .ui-input-slider-container:hover .ui-input-slider-left { visibility: visible; } #preview .ui-input-slider-container:hover .ui-input-slider-right { visibility: visible; } /* * */ #unit-selection { width: 200px; height: 75px; margin: 30px 30px 0 0; padding: 30px; border: 3px solid #555; border-radius: 10px; position:
relative; float: right; } #unit-selection .info { height: 20%; width: 100%; line-height: 20%; font-size: 20px; text-align: center; position:
relative; top: 40%; } #unit-selection .dropdown { width: 50px; height: 20px; margin: 10px; padding: 0; border-radius: 3px; position: absolute; overflow: hidden; } #unit-selection select { width: 50px; height: 20px; marign: 0; padding: 0 0 0...
...-22px; left: 30px; } #unit-selection .unit-bottom-left-h { bottom: 20px; left: -37px; } /******************************************************************************/ /******************************************************************************/ #radius-lock { width: 200px; height: 75px; margin: 30px 0 0 30px; padding: 30px; border: 3px solid #555; border-radius: 10px; position:
relative; float: left; } #radius-lock .ui-checkbox { color: #fff; position: absolute; } #radius-lock .ui-checkbox > label { height: 20px; width: 34px; padding: 0; } #radius-lock .info { height: 20%; width: 100%; line-height: 20%; font-size: 20px; text-align: center; position:
relative; top: 40%; } #radius-lock [data-topic="top-left"] { top: 10px; left: 10px; } #radius-lock [data-t...
Logical properties for sizing - CSS: Cascading Style Sheets
in this guide we will explain the flow-
relative mappings between physical dimension properties and logical properties used for sizing elements on our pages.
... when specifying the size of an item, the logical properties and values specification gives you the ability to indicate sizing as it
relates to the flow of text (inline and block) rather than physical sizing which
relates to the physical dimensions of horizontal and vertical (e.g.
...while these flow
relative mappings may well become the default for many of us, in a design you may well use both physical and logical sizing.
... you might want some features to always
relate to the physical dimensions whatever the writing mode.
The stacking context - CSS: Cascading Style Sheets
the stacking context is a three-dimensional conceptualization of html elements along an imaginary z-axis
relative to the user, who is assumed to be facing the viewport or the webpage.
... element with a position value absolute or
relative and z-index value other than auto.
...n a rendering order of 4.1 div #6 - z-index is 3, stacked under an element with a z-index of 4, which results in a rendering order of 4.3 div #4 - z-index is 6, stacked under an element with a z-index of 4, which results in a rendering order of 4.6 div #1 - z-index is 5 example html <div id="div1"> <h1>division element #1</h1> <code>position:
relative;<br/> z-index: 5;</code> </div> <div id="div2"> <h1>division element #2</h1> <code>position:
relative;<br/> z-index: 2;</code> </div> <div id="div3"> <div id="div4"> <h1>division element #4</h1> <code>position:
relative;<br/> z-index: 6;</code> </div> <h1>division element #3</h1> <code>position: absolute;<br/> z-index: 4;</code> <div id="div5"> <h1>div...
...ision element #5</h1> <code>position:
relative;<br/> z-index: 1;</code> </div> <div id="div6"> <h1>division element #6</h1> <code>position: absolute;<br/> z-index: 3;</code> </div> </div> css * { margin: 0; } html { padding: 20px; font: 12px/20px arial, sans-serif; } div { opacity: 0.7; position:
relative; } h1 { font: inherit; font-weight: bold; } #div1, #div2 { border: 1px dashed #696; padding: 10px; background-color: #cfc; } #div1 { z-index: 5; margin-bottom: 190px; } #div2 { z-index: 2; } #div3 { z-index: 4; opacity: 1; position: absolute; top: 40px; left: 180px; width: 330px; border: 1px dashed #900; background-color: #fdd; padding: 40px 20px 20px; } #div4, #div5 { border: 1px dashed #996; background-color: #ff...
Visual formatting model - CSS: Cascading Style Sheets
relationships between elements in the document tree.
... in this document we define the model and introduce some of the
related terms and concepts, linking to more specific pages on mdn for further details.
... normal flow in css, the normal flow includes block-level formatting of block boxes, inline-level formatting of inline boxes, and also includes
relative and sticky positioning of block-level and inline-level boxes.
... absolute positioning in the absolute positioning model (which also includes fixed positioning), a box is removed from the normal flow enti
rely and assigned a position with respect to a containing block (which is the viewport in the case of fixed positioning).
background-attachment - CSS: Cascading Style Sheets
values fixed the background is fixed
relative to the viewport.
...(this is not compatible with background-clip: text.) local the background is fixed
relative to the element's contents.
... if the element has a scrolling mechanism, the background scrolls with the element's contents, and the background painting area and background positioning area are
relative to the scrollable area of the element rather than to the border framing them.
... scroll the background is fixed
relative to the element itself and does not scroll with its contents.
bottom - CSS: Cascading Style Sheets
when position is set to
relative, the bottom property specifies the distance the element's bottom edge is moved above its normal position.
...in all other situations, if height is constrained in any way or position is set to
relative, the top property takes precedence and the bottom property is ignored.
... for
relatively positioned elements, the distance that the element is moved above its normal position.
... for
relatively positioned elements, the distance of the element from its normal position is based on the top property; or if top is also auto, the element is not moved vertically at all.
clear - CSS: Cascading Style Sheets
when applied to non-floating blocks, it moves the border edge of the element down until it is below the margin edge of all
relevant floats.
...when applied to floating elements, the margin edge of the bottom element is moved below the margin edge of all
relevant floats.
... the floats that are
relevant to be cleared are the earlier floats within the same block formatting context.
... 1chrome android full support 18firefox android full support 4opera android full support 10.1safari ios full support 1samsung internet android full support 1.0flow-
relative values inline-start and inline-endchrome no support noedge no support nofirefox full support 55ie no support noopera no support nosafari no support ...
font - CSS: Cascading Style Sheets
constituent properties this property is a shorthand for the following css properties: font-family font-size font-stretch font-style font-variant font-weight line-height syntax the font property may be specified as either a single keyword, which will select a system font, or as a shorthand for various font-
related properties.
... if font is specified as a shorthand for several font-
related properties, then: it must include values for: <font-size> <font-family> it may optionally include values for: <font-style> <font-variant> <font-weight> <font-stretch> <line-height> font-style, font-variant and font-weight must precede font-size font-variant may only specify the values defined in css 2.1, that is normal and small-caps font-stretch may only be a single keyword value.
... shorthand:font-size: refer to the parent element's font sizeline-height: refer to the font size of the element itselfcomputed valueas each of the properties of the shorthand:font-style: as specifiedfont-variant: as specifiedfont-weight: the keyword or the numerical value as specified, with bolder and lighter transformed to the real valuefont-stretch: as specifiedfont-size: as specified, but with
relative lengths converted into absolute lengthsline-height: for percentage and length values, the absolute length, otherwise as specifiedfont-family: as specifiedanimation typeas each of the properties of the shorthand:font-style: discretefont-variant: discretefont-weight: a font weightfont-stretch: a font stretchfont-size: a lengthline-height: either number or lengthfont-family: discrete formal sy...
...heckedvalue("font_weight") + " " + getcheckedvalue("font_size") + getcheckedvalue("line_height") + " " + getcheckedvalue("font_family"); return shorttext; } getcheckedvalue = function(radio_name) { oradio = document.forms[0].elements[radio_name]; for (var i = 0; i < oradio.length; i++) { if(oradio[i].checked) { var propinput = "input_" + radio_name, cu
relemname = "input_" + radio_name, cu
relem = document.getelementbyid(cu
relemname); cu
relem.value = oradio[i].value; return oradio[i].value; } } } setcss = function () { getproperties(); injectcss(shorttext); } injectcss = function(cssfragment) { old = document.body.getelementsbytagname("style"); if (old.length > 1) { old[1].parentelement.removechild(old[1]);...
margin-left - CSS: Cascading Style Sheets
syntax /* <length> values */ margin-left: 10px; /* an absolute length */ margin-left: 1em; /*
relative to the text size */ margin-left: 5%; /*
relative to the nearest block container's width */ /* keyword values */ margin-left: auto; /* global values */ margin-left: inherit; margin-left: initial; margin-left: unset; the margin-left property is specified as the keyword auto, or a <length>, or a <percentage>.
... <percentage> the size of the margin as a percentage,
relative to the width of the containing block.
...this table summarizes the different cases: value of display value of float value of position computed value of auto comment inline, inline-block, inline-table any static or
relative 0 inline layout mode block, inline, inline-block, block, table, inline-table, list-item, table-caption any static or
relative 0, except if both margin-left and margin-right are set to auto.
... block layout mode block, inline, inline-block, block, table, inline-table, list-item, table-caption left or right static or
relative 0 block layout mode (floating element) any table-*, except table-caption any any 0 internal table-* elements don't have margins, use border-spacing instead any, except flex, inline-flex, or table-* any fixed or absolute 0, except if both margin-left and margin-right are set to auto.
margin-right - CSS: Cascading Style Sheets
syntax /* <length> values */ margin-right: 20px; /* an absolute length */ margin-right: 1em; /*
relative to the text size */ margin-right: 5%; /*
relative to the nearest block container's width */ /* keyword values */ margin-right: auto; /* global values */ margin-right: inherit; margin-right: initial; margin-right: unset; the margin-right property is specified as the keyword auto, or a <length>, or a <percentage>.
... <percentage> the size of the margin as a percentage,
relative to the width of the containing block.
...this table summarizes the different cases: value of display value of float value of position computed value of auto comment inline, inline-block, inline-table any static or
relative 0 inline layout mode block, inline, inline-block, block, table, inline-table, list-item, table-caption any static or
relative 0, except if both margin-left and margin-right are set to auto.
... block layout mode block, inline, inline-block, block, table, inline-table, list-item, table-caption left or right static or
relative 0 block layout mode (floating element) any table-*, except table-caption any any 0 internal table-* elements don't have margins, use border-spacing instead any, except flex, inline-flex, or table-* any fixed or absolute 0, except if both margin-left and margin-right are set to auto.
<position> - CSS: Cascading Style Sheets
the <position> (or <bg-position>) css data type denotes a two-dimensional coordinate used to set a location
relative to an element box.
... if specified, an offset can be either a
relative <percentage> value or an absolute <length> value.
... /* 1-value syntax */ keyword /* either the horizontal or vertical position; the other axis defaults to center */ value /* the position on the x-axis; the y-axis defaults to 50% */ /* 2-value syntax */ keyword keyword /* a keyword for each direction (the order is ir
relevant) */ keyword value /* a keyword for horizontal position, value for vertical position */ value keyword /* a value for horizontal position, keyword for vertical position */ value value /* a value for each direction (horizontal then vertical) */ /* 4-value syntax */ keyword value keyword value /* each value is an offset from the keyword that preceeds it */ f...
... candidate recommendation
relists links to both definitions: if css backgrounds and borders module level 3 is supported, its definition of <position> must also be used.
top - CSS: Cascading Style Sheets
when position is set to
relative, the top property specifies the distance the element's top edge is moved below its normal position.
...in all other situations, if height is constrained in any way or position is set to
relative, the top property takes precedence and the bottom property is ignored.
... for
relatively positioned elements, the distance that the element is moved below its normal position.
... for
relatively positioned elements, the distance of the element from its normal position is based on the bottom property; or if bottom is also auto, the element is not moved vertically at all.
Overview of events and handlers - Developer guides
events and event handling provide a core technique in javascript for reacting to incidents occurring when a browser accesses a web page, including events from preparing a web page for display, from interacting with the content of the web page,
relating to the device on which the browser is running, and from many other causes such as media stream playback or animation timing.
... this code
relies on the agreement that there is a kind of event called 'click' which will call any listener (or 'handler') function with an event object argument (actually, in this case a derivative mouseevent object) and which will be fired by html button elements after user interaction.
...note that in this example, the code does not even name the event argument to the function because the code never needs to use the data structure describing the event; rather, the code me
rely needs to wait to run until after then event has happened.
... some notable events are: note: this list of events will need work to make
relevant; that work is awaiting some global reorganization work on the documents.
<input type="email"> - HTML: Hypertext Markup Language
however, if you add the multiple attribute, a list of zero e-mail addresses (an empty string, or one which is enti
rely whitespace) is a valid value.
...since character widths vary, this may or may not be exact and should not be
relied upon to be so; the resulting input may be narrower or wider than the specified number of characters, depending on the characters and the font (font settings in use).
...it's also possible for someone to simply bypass your html enti
rely and submit the data directly to your server.
... note: there are known specification issues
related to international domain names and the validation of e-mail addresses in html.
<input type="week"> - HTML: Hypertext Markup Language
div { margin-bottom: 10px; position:
relative; } input[type="number"] { width: 100px; } input + span { padding-right: 30px; } input:invalid+span:after { position: absolute; content: '✖'; padding-left: 5px; } input:valid+span:after { position: absolute; content: '✓'; padding-left: 5px; } the result here is that only weeks between w01 and w52 in 2017 will be seen as valid and be selectable in supporting browsers.
...it's far too easy for someone to make adjustments to the html that allow them to bypass the validation, or to remove it enti
rely.
... it's also possible for someone to simply bypass your html enti
rely and submit the data directly to your server.
... div { margin-bottom: 10px; position:
relative; } input[type="number"] { width: 100px; } input + span { padding-right: 30px; } input:invalid+span:after { position: absolute; content: '✖'; padding-left: 5px; } input:valid+span:after { position: absolute; content: '✓'; padding-left: 5px; } the other part of the code that may be of interest is the feature detection code.
Global attributes - HTML: Hypertext Markup Language
hidden a boolean attribute indicates that the element is not yet, or is no longer,
relevant.
...it can take several values: a negative value means that the element should be focusable, but should not be reachable via sequential keyboard navigation; 0 means that the element should be focusable and reachable via sequential keyboard navigation, but its
relative order is defined by the platform convention; a positive value means that the element should be focusable and reachable via sequential keyboard navigation; the order in which the elements are focused is the increasing value of the tabindex.
... if several elements share the same tabindex, their
relative order follows their
relative positions in the document.
... title contains a text representing advisory information
related to the element it belongs to.
HTML: Hypertext Markup Language
p
reloading content with
rel="p
reload" the p
reload value of the <link> element's
rel attribute allows you to write declarative fetch requests in your html <head>, specifying resources that your pages will need very soon after loading, which you therefore want to start p
reloading early in the lifecycle of a page load, before the browser's main rendering machinery kicks in.
...this article provides a basic guide to how p
reload works.
...a block-level element occupies the entire space of its parent element (container), thereby creating a "block." link types in html, various link types can be used to establish and define the
relationship between two documents.
...
related topics applying color to html elements using css this article covers most of the ways you use css to add color to html content, listing what parts of html documents can be colored and what css properties to use when doing so.
Configuring servers for Ogg media - HTTP
consider using the p
reload attribute the html <audio> and <video> elements provide the p
reload attribute, which tells the browser to attempt to download the entire media when the page loads.
... without p
reload, the browser only downloads enough of the media to display the first video frame, and to determine the media's duration.
... p
reload is off by default, so if getting to video is the point of your web page, your users may appreciate it if you include p
reload in your video elements.
... using p
reload="metadata" will p
reload the media file's metadata and possibly the first few frames of video.
HTTP headers - HTTP
headers can be grouped according to their contexts: general headers apply to both requests and responses, but with no
relation to the data transmitted in the body.
...(note:
related ms edge bug).
... fetch metadata request headers sec-fetch-site it is a request header that indicates the
relationship between a request initiator's origin and its target's origin.
... upgrade the
relevant rfc document for the upgrade header field is rfc 7230, section 6.7.
Redirections in HTTP - HTTP
besides the small performance hit of an additional round-trip, users ra
rely notice the redirection.
...machine-readable choices are encouraged to be sent as link headers with
rel=alternate.
...if you serve the response as the result of this request, a simple press of the
reload button will resend the request (possibly after a confirmation message).
...if the
reload button is pressed, only that page is redisplayed, without replaying the unsafe requests.
HTTP response status codes - HTTP
103 early hints this status code is primarily intended to be used with the link header, letting the user agent start p
reloading resources while the server prepares a response.
...the initial aim for creating this code was using it for digital payment systems, however this status code is used very ra
rely and no standard convention exists.
...also note that some servers me
rely shut down the connection without sending this message.
...the webmaster must also take care about the caching-
related headers that are sent along with this response, as these temporary condition responses should usually not be cached.
HTTP
though often based on a tcp/ip layer, it can be used on any
reliable transport layer, that is, a protocol that doesn't lose messages silently like udp does.
... rudp — the
reliable update of udp — is a suitable alternative.
... firefox developer tools network monitor mozilla observatory a project designed to help developers, system administrators, and security professionals configure their sites safely and secu
rely.
... redbot tools to check your cache-
related headers how browsers work a very comprehensive article on browser internals and request flow through http protocol.
Authoring MathML - MathML
note that ua string sniffing is not the most
reliable method and might break from version to version: var ua = navigator.useragent; var isgecko = ua.indexof("gecko") > -1 && ua.indexof("khtml") === -1 && ua.indexof('trident') === -1; var iswebkit = ua.indexof('applewebkit') > -1 && ua.indexof('chrome') === -1; mathematical fonts in order to get a good layout or to allow different style, it's important to have mathematical fonts available.
...<script type="text/javascript" src="latexmathml.js"></script> <link
rel="stylesheet" type="text/css" href="latexmathml.standardarticle.css" /> ...
...the installation is similar: download and copy the
relevant javascript and css files on your web site and reference them in your page header (see the copy-me.html file from the zip archive for an example).
...this command will generate an xhtml+mathml document foo.xml from a foo.tex latex source: mk4ht mzlatex foo.tex # linux/mac platforms mzlatex foo.tex # windows platform note that tex4ebook
relies on tex4ht to generate epub documents.
Codecs used by WebRTC - Web media technologies
for details on webrtc-
related considerations for each codec, see the sub-sections below by following the links on each codec's name.
...it's worth noting that the rfc covers a variety of video-
related requirements, including color spaces (srgb is the preferred, but not required, default color space), recommendations for webcam processing features (automatic focus, automatic white balance, automatic light level), and so on.
...in order to improve
reliability of webrtc media sharing across multiple platforms and browsers, it's required that webrtc endpoints that support avc handle certain parameters in specific ways.
...this is useful to note, since in rfc 6184 ("rtp payload format for h.264 video"), profile-level-id is enti
rely optional.
Navigation and resource timings - Web Performance
however, the duration, load events and dom
related timings have to do with the entire navigation, not this single asset.
...the request start is the moment immediately before the user agent starts requesting the resource from the server, or from
relevant application caches or from local resources.
... the response start is the time immediately after the user agent's http parser receives the first byte of the response from
relevant application caches, or from local resources or from the server, which happens after the request is received and processed.
... the performancenavigationtiming interface also provides information about what type of navigation you are measuring, returning navigate,
reload, back_forward or prerender.
Introduction to progressive web apps - Progressive web apps (PWAs)
with a
relatively small amount of effort required to implement the core pwa features, the benefits are huge.
...given their profit increase, and the
relatively low amount of work required for the conversion of these apps to pwas, the advantage is clear.
... the
relevant web standard here is the web app manifest, which defines features of an app such as name, icon, splash screen, and theme colors in a json-formatted manifest file.
... network independence modern web apps can work when the network is un
reliable, or even non-existent.
begin - SVG: Scalable Vector Graphics
each value can be one of the following: <offset-value> this value defines a clock-value that represents a point in time
relative to the beginning of the svg document (usually the load or domcontentloaded event).
...the element's animation start time is defined
relative to the begin or active end of another animation.
...the animation start time is defined
relative to the time that the specified event is fired.
...the element animation start time is defined
relative to the time that the repeat event is raised with the specified iteration value.
dx - SVG: Scalable Vector Graphics
if there are multiple values, dx defines a shift along the x-axis for each individual glyph
relative to the preceding glyph.
... if there are multiple values, dx defines a shift along the x-axis for each individual glyph
relative to the preceding glyph.
... if there are multiple values, dx defines a shift along the x-axis for each individual glyph
relative to the preceding glyph.
... if there are multiple values, dx defines a shift along the x-axis for each individual glyph
relative to the preceding glyph.
dy - SVG: Scalable Vector Graphics
if there are multiple values, dy defines a shift along the y-axis for each individual glyph
relative to the preceding glyph.
... if there are multiple values, dy defines a shift along the y-axis for each individual glyph
relative to the preceding glyph.
... if there are multiple values, dy defines a shift along the y-axis for each individual glyph
relative to the preceding glyph.
... if there are multiple values, dy defines a shift along the y-axis for each individual glyph
relative to the preceding glyph.
end - SVG: Scalable Vector Graphics
each value can be one of the following: <offset-value> this value defines a clock-value that represents a point in time
relative to the beginning of the svg document (usually the load or domcontentloaded event).
...the element's animation end time is defined
relative to the begin or active end of another animation.
...the animation end time is defined
relative to the time that the specified event is fired.
...the element animation end time is defined
relative to the time that the repeat event is raised with the specified iteration value.
rendering-intent - SVG: Scalable Vector Graphics
only one element is using this attribute: <color-profile> usage notes value auto | perceptual |
relative-colorimetric | saturation | absolute-colorimetric default value auto animatable yes auto this value allows the user agent to determine the best intent based on the content type.
... perceptual this value preserves the
relationship between colors.
... it attempts to maintain
relative color values among the pixels as they are mapped to the target device gamut.
...
relative-colorimetric this value preserves the
relative saturation (chroma) values of the original pixels.
Introduction - SVG: Scalable Vector Graphics
but all these extra features of the language
rely on this
relatively small set of elements to define the graphics area.
...however, this tutorial will
rely on the trusty xml or text editor (your choice).
...firefox has supported some svg content since version 1.5, and that support level has been growing with each
release since.
..."full" svg 1.2 was meant to be the next major
release of svg.
Compiling from Rust to WebAssembly - WebAssembly
by default, it installs the latest stable rust
release, which you can use for general rust development.
... let's write some rust let's put this code into src/lib.rs instead: use wasm_bindgen::p
relude::*; #[wasm_bindgen] extern { pub fn alert(s: &str); } #[wasm_bindgen] pub fn greet(name: &str) { alert(&format!("hello, {}!", name)); } this is the contents of our rust project.
... using wasm-bindgen to communicate between rust and javascript the first part looks like this: use wasm_bindgen::p
relude::*; libraries are called "crates" in rust.
...in this case, we're importing everything in the wasm_bindgen::p
relude module.
Module structure of the SDK - Archive of obsolete content
sdk modules the modules supplied by the sdk are divided into two sorts: high-level modules like panel and page-mod provide
relatively simple, stable apis for the most common add-on development tasks.
... to import a local module, specify a path
relative to the importing module.
... to import external modules, treat them like local modules: copy them somewhere under your add-ons "lib" directory and reference them with a path
relative to the importing module.
panel - Archive of obsolete content
however, doing this will cause any content scripts to be unloaded and then
reloaded, so it may be less efficient, and you'll lose any state associated with the scripts.
... if the panel's content is packaged along with your add-on and specified using an html file in your data directory, you can style it by embedding css directly in the html file or by referencing a css file stored under data: <!doctype html> <html> <head> <link href="panel-style.css" type="text/css"
rel="stylesheet"> </head> <body> my panel content </body> </html> from firefox 31 onwards, you can style panel content using the contentstyle or contentstylefile options.
...how(); // show the panel centered vertically and // aligned to the left of the content area require("sdk/panel").panel({ position: { left: 0 } }).show(); // centered panel, default behavior require("sdk/panel").panel({}).show(); as with the css top, bottom, left, and right properties, setting both top and bottom or both left and right will implicitly set the panel's height or width
relative to the content window: // show the panel centered horizontally, with: // - the top edge 40px from the top // of the content window // - the bottom edge 100px from the bottom // of the content window require("sdk/panel").panel({ position: { top: 40, bottom: 100 } }).show(); if you set both top and bottom, but also set the panel's height explicitly using the height prope...
widget - Archive of obsolete content
getview(window) retrieve a widgetview instance of this widget
relative to a browser window.
... arguments widgetview : the
related widgetview object.
... events detach the detach event is fired when the widget view is removed from its
related window.
ui/button/action - Archive of obsolete content
you can specify this in one of three ways: as a resource:// url pointing at an icon file in your add-on's "data" directory, typically constructed using self.data.url(iconfile) as a
relative path: a string in the form "./iconfile", where "iconfile" is a
relative path to the icon file beginning in your add-on's "data" directory as an object, or dictionary of key-value pairs.
...each key-value pair specifies an icon: each value specifies an image file as a resource:// url or
relative path.
... icon the button's icon or icons, as a url,
relative path, or object containing a set of key-value pairs.
ui/button/toggle - Archive of obsolete content
you can specify this in one of three ways: as a resource:// url pointing at an icon file in your add-on's "data" directory, typically constructed using self.data.url(iconfile) as a
relative path: a string in the form "./iconfile", where "iconfile" is a
relative path to the icon file beginning in your add-on's "data" directory as an object, or dictionary of key-value pairs.
...each key-value pair specifies an icon: each value specifies an image file as a resource:// url or
relative path.
... icon the button's icon or icons, as a url,
relative path, or object containing a set of key-value pairs.
ui/frame - Archive of obsolete content
for example, this html document defines a <select> element and a couple of <span> elements, and includes a css file to style the content and a javascript script to implement behavior: <!doctype html> <html> <head> <link href="city-info.css"
rel="stylesheet"></link> </head> <body> <select name="city" id="city-selector"></select> <span id="time" class="info-element"></span> <span id="weather" class="info-element"></span> <script type="text/javascript" src="city-info.js"></script> </body> </html> if we save this document as "city-info.html" under the add-on's "data" directory, we can create a frame hosting it and ...
...this toolbar might look something like: scripting frames to add scripts to frames, include them directly from the frame's html content, as with a normal web page: <script type="text/javascript" src="frame.js"></script> as usual, the path to the script is
relative to the html file's location.
...you can specify the url in one of two ways: as a resource:// url pointing at a file under your add-on's "data" directory, typically constructed using self.data.url(filename) as a
relative path: a string in the form "./
relativepath", where "
relativepath" is a
relative path to the file beginning in your add-on's "data" directory var { frame } = require("sdk/ui/frame"); var self = require("sdk/self"); var frame1 = new frame({ url: require("sdk/self").data.url("content1.html") }); var frame2 = new frame({ url: "./content2.html" }); optional options: ...
ui/sidebar - Archive of obsolete content
so you can rewrite the above code like this: var sidebar = require("sdk/ui/sidebar").sidebar({ id: 'my-sidebar', title: 'my sidebar', url: "./sidebar.html" }); you can include javascript and css from the html as you would with any web page, for example using <script> and <link> tags containing a path
relative to the html file itself.
... <!doctype html> <html> <head> <link href="stuff.css" type="text/css"
rel="stylesheet"> </head> <body> <script type="text/javascript" src="stuff.js"></script> </body> </html> you can update the sidebar's content by setting the sidebar's url property.
...the sidebar script may not be initialized yet, so you can't
reliably send messages to the sidebar script right away: however, you can start listening to messages from the script.
Creating annotations - Archive of obsolete content
warning: this tutorial
relies on the since-removed widget api and no longer works with firefox.
...you should see the highlight appearing when you move the mouse over certain elements: click on the highlight and you should see something like this in the console output: info: show info: http://blog.mozilla.com/addons/2011/02/04/overview-amo-review-process/, post-2249,when you submit a new add-on, you will have to choose between 2 review tracks: full review and p
reliminary review.
...you should see a panel with a text area for a note: enter the note and press the return key: you should see console output like this: info: http://blog.mozilla.com/addons/2011/02/04/overview-amo-review-process/, post-2249,when you submit a new add-on, you will have to choose between 2 review tracks: full review and p
reliminary review.
Storing annotations - Archive of obsolete content
warning: this tutorial
relies on the since-removed widget api and no longer works with firefox.
...in this chapter we will cover three topics
relating to persistent storage: using simple-storage to persist objects handling exhaustion of the storage quota allocated to you respecting private browsing storing new annotations in this section we are only touching the main.js file.
... annotation list html and css here's the html for the annotation list: <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>saved annotations</title> <link
rel="stylesheet" type="text/css" href="annotation-list.css" /> </head> <body> <div id="annotation-list"> </div> <div id="template"> <div class="annotation-details"> <a class="url"></a> <div class="selection-text"></div> <div class="annotation-text"></div> </div> </div> </body> </html> here's the corresponding css: #annotation-list .annotation-details { padding: 10px; mar...
Bootstrapped extensions - Archive of obsolete content
while this makes creating extensions that add to the application's user interface
relatively easy, it means that updating, installing, or disabling an extension requires an application restart.
... you need to look up the
relevant application ui elements by their id by calling document.getelementbyid(), then manipulate them to inject your ui.
...you can go to about:config and change the value of the preference general.useragent.locale to en-us and then to en-gb and then
reload the open pages to see the localization change.
Downloading Files - Archive of obsolete content
if, and only if, the url is not //
related to a window, null should be used instead.
...if, and only if, the url is not //
related to a window, null should be used instead.
...if, and only if, the url is not //
related to a window, null should be used instead.
Code snippets - Archive of obsolete content
window code opening and manipulating windows toolbar toolbar
related code sidebar sidebar
related code forms forms
related code xml code used to parse, write, manipulate, etc.
... files drag & drop code used to setup and handle drag and drop events dialogs code used to display and process dialog boxes alerts and notifications modal and non-modal ways to notify users preferences code used to read, write, and modify preferences js xpcom code used to define and call xpcom components in javascript running applications code used to run other applications <canvas>
related what wg canvas-
related code signing a xpi how to sign an xpi with pki delayed execution performing background operations.
... browser-oriented code tabbed browser code (firefox/seamonkey) basic operations, such as page loading, with the tabbed browser, which is the heart of mozilla's browser applications cookies reading, writing, modifying, and removing cookies page loading code used to load pages,
reload pages, and listen for page loads interaction between privileged and non-privileged code how to communicate from extensions to websites and vice-versa.
Enhanced Extension Installation - Archive of obsolete content
this boolean
relationship itself is not stored directly in the datasource.
... the startup process receives this "needsrestart" bit when the extension manager's startup completes, shuts down xpcom and
relaunches the application.
...extension metadata is structured and not
relational in the sense encouraged by rdf, and so a simple text storage format is probably desirable.
Extension Etiquette - Archive of obsolete content
ideally, the location would be below the add-ons item, grouped with the other extension-
related commands (menuitem:insertafter="javascriptconsole,devtoolsseparator").
... theming if you have xul buttons in your extension that do functions similar to ones that already exist in a browser — for example, a feed reader that
reloads and stops — use icons from the browser's theme.
... version numbering please follow the mozilla pattern: major version dot current incarnation dot security/bugfix
release (like 1.0.7).
Install Manifests - Archive of obsolete content
<em:strictcompatibility>true</em:strictcompatibility> usually, there is no need to restrict the compatibility: not all new
releases will break your extension and, if it is hosted on amo, you'll get notice several weeks in advance if a potential risk has been detected.
...you do not need to set this flag if your add-on has a binary component, since add-ons with binary components are always subject to strict compatibility checking (because binary components need to be rebuilt for every major application
release anyway).
... %update_type% update_type_compatibility(32), update_type_newversion(64) %compatibility_mode%
related to default to compatible, values could be normal, ignore or strict.
Listening to events in Firefox extensions - Archive of obsolete content
types of events there are multiple types of events that application and extension authors can use to receive notifications from <xul:browser> and <xul:tabbrowser> elements to hear about changes
relating to loads of the content contained within them.
...in order to listen to events from all browsers, including those not currently being displayed, the following example can be used: var tabsprogresslistener = { // add tabs progress listener implementation here } gbrowser.addtabsprogresslistener(tabsprogresslistener); this lets you receive events
related to all tabs.
... how events are used by the tabbrowser tabbrowser maintains a set of objects
relating to progress listening for each browser.
Chapter 2: Technologies used in developing extensions - Archive of obsolete content
if you've had experience developing with dynamic html, you'll probably find it
relatively easy to pick up the knowledge you'll need to develop firefox extensions.
...it was specified in 1998 by w3c, the organization that sets standards for web-
related technologies.
... also, because a series of security holes were discovered in javascript and the compatible technology jscript, there was an initial
reluctance to use javascript at all.
Custom XUL Elements with XBL - Archive of obsolete content
on the other hand, if your bindings are small and have a strong
relationship with each other, it makes sense to keep them together.
...the includes attribute gives you a little more flexibility with children, but it's ra
rely needed.
...this is likely due to some asynchronous operation
related to node insertion.
List of Former Mozilla-Based Applications - Archive of obsolete content
utodesk maya 3d modeling tool switched off of gecko for help browser in version 8.5 blam feed reader switched to webkit in version 1.8.6 boxee media center software switched to webkit in version 1.0 epiphany browser switched from gecko to webkit flock social browsing flock switched from being firefox-based to chromium-based when it
released a new beta on june 16, 2010 jolicloud web operating system as of march 2010, rw/w reports jolicloud is on chrome/chrome os joost tv over internet switched from xulrunner-based client to a web application liferea news aggregator switched to webkit in version 1.6 manyone browser browser originally mozilla-based but now i believe the h...
...ernet software no longer available beonex communicator internet software last news item on site from 2004 chameleon theme builder inactive civil netizen p2p file delivery (email attachment replacement) site not updated since 2006 compuserve client internet software no longer available doczilla sgml/xml/html browser last
release on site from july 2005 fabula language learning application inactive galeon browser last news item on site from september 2006 gencatrss rss reader domain switched over to domain parking service ghostzilla browser archived version of ghostzilla site from 2005 homebase desktop operating environment for internet computers ...
...uary 2007 mobidvd dvd/vcd/cd ripping software site down mozilla suite internet application suite development shifted to firefox, thunderbird and seamonkey applications netscape navigator browser support for netscape ended on february 1, 2008 nvu web authoring tool development stopped in 2005 and is being continued as an unofficial bugfix
release by the kompozer project pogo browser from at&t site no longer accessible as of may 2009 pyro desktop desktop environment last news item on site from july 2007 script editor editor inactive skipstone gtk+ browser last news item on site from february 2008 xabyl visual xbl editor inactive xulplayer media playe...
Working with BFCache - Archive of obsolete content
q: is the page
reloaded?
...a: in the non-bfcache case, the page is
reloaded in the sense of reparsing from the original html source.
...the dom is recreated during the parsing process, and scripts are recompiled (and also
reloaded, probably from the http cache).
Developing New Mozilla Features - Archive of obsolete content
develop
relationships with existing developers in the area of your feature if you want to add a big new feature to mail, spend some time helping the existing mail developers.
...reviewing the tree only at the milestone
releases is risky if you're doing significant development.
...if you think your feature can only be implemented and reviewed in one enormous chunk, ask for design help in the appropriate newsgroup and/or from the developers with whom you have established
relationships.
Error Console - Archive of obsolete content
it reports javascript-
related errors and warnings, css errors and arbitrary messages from chrome code.
... message very similar to warning, used very ra
rely.
...
related topics javascript, css web development ...
JavaScript Client API - Archive of obsolete content
therefore, developers outside of the sync core should know that their code could require significant refactoring in future
releases.
...(don't
rely on the record that is passed in to this method having any of its attributes set correctly except for .id.
...what events you listen for is enti
rely up to you.
Creating a Help Content Pack - Archive of obsolete content
nc:base contains the base url
relative to which the help content referenced in the descriptor file is located.
...(we're still not actually to the point where we're describing the actual data in each of these, so we'll just use some filler data for now.) add the following code inside the rdf:description element you just created: <nc:panellist> <rdf:seq> </rdf:seq> </nc:panellist> you'll create the
relevant information descriptions within the rdf:seq element.
...to add data to it, add one of the following per entry in your glossary within the rdf:seq above: <rdf:li> <rdf:description nc:name="" nc:link=""/> </rdf:li> the rdf:li element serves pu
rely to contain each separate entry.
JavaScript crypto - Archive of obsolete content
using the mozilla crypto object from javascript mozilla defines a special javascript object to allow web pages access to certain cryptographic-
related services.
... two smart card
related events are generated: smartcard-insert when smartcards are inserted, and smartcard-remove when smartcards are removed.
...<script> function onsmartcardchange() { window.location.
reload(); } function register() { window.crypto.enablesmartcardevents = true; document.addeventlistener("smartcard-insert", onsmartcardchange, false); document.addeventlistener("smartcard-remove", onsmartcardchange, false); } function deregister() { document.removeeventlistener("smartcard-insert", onsmartcardchange, false); document.removeeventlistener("smartcard-remove", onsmartcardchange, false); } document.body.onload = register; document.body.onunload = deregister; </script> with the above example, your web site will automatically
reload anytime a smartcard is inserted or...
Twitter - Archive of obsolete content
read the experiment report for what we learned from it and the blog post announcing the first sdk
release for what we're up to next!
...or you can simply
rely on firefox.
... see twitter's authentication documentation for
related information.
slideBar - Archive of obsolete content
read the experiment report for what we learned from it and the blog post announcing the first sdk
release for what we're up to next!
...jetpack.future.import("slidebar"); methods append(iconurihtmlhtml/xmlurluriwidthintpersistboolauto
reloadboolonclickfunctiononselectfunctiononreadyfunction)this is a list of options to specify modifications to your slidebar instance.
... iconhref oficon to show in the slidebaruri htmlhtml content for the featurehtml/xml urlurl to load content for the featureuri widthwidth of the content area and the selected slide sizeint persistdefault slide behavior when being selectedbool auto
reloadautomatically
reload content on selectbool onclickcallback when the icon is clickedfunction onselectcallback when the feature is selectedfunction onreadycallback when featured is loadedfunction an example: jetpack.slidebar.append({ url: "http://mozilla.com", width: 150, onclick: function(slide){ slide.icon.src = "chrome://branding/content/icon48.png"; }}); ...
Microsummary XML grammar reference - Archive of obsolete content
only
relevant for generators dynamically created by firefox code and extensions.
...xample identifies a generator as being able to summarize all pages on the www.example.com web site except pages named about.html: <pages> <include> ^http://www\.example\.com/ </include> <exclude>/about\.html</exclude> </pages> note: regular expressions intended to match the beginnings of page urls should start with the caret (^) to ensure they do not inadvertently match urls which me
rely contain the urls they intend to match.
...absolute or conditional update interval specified by this element, firefox will never update microsummaries more frequently than once per minute; because firefox checks for expired microsummaries every 15 seconds, it is possible for a microsummary update to begin up to 15 seconds later than its interval indicates; firefox respects the browser cache when updating microsummaries, so it will not
reload a page to update its microsummary if the cache contains a fresh copy of the page.
Mozilla Application Framework in Detail - Archive of obsolete content
related: xulrunner:what xulrunner provides, xulrunner hall of fame ui in mozilla mozilla's philosophy of using "the right tool for the right job" is manifested most prominently in the design of the user interface.
...in addition, if the organization maintains sophisticated, interactive websites, it will already possess a wealth of technical expertise that will be
relevant for creating xul applications.
... open source: gecko represents the first software
release from netscape and mozilla.org's open source initiative.
New Security Model for Web Services - Archive of obsolete content
white-listing by creating a white list of trusted uris from which scripts are trusted to not compromise internal resources, it is possible to
release domains from the stricter same-source sandbox.
... a white list is a good tool for including always-trusted domains, but on the web, it is often a script from a
relatively-untrusted domain that must be granted access to other untrusted domains, without compromising internal domains.
... using a declarations file a more robust solution is to
rely on getting a file named "web-scripts-access.xml" in the root directory of the server that the sandboxed script requests to communicate with.
RDF Datasource How-To - Archive of obsolete content
deciding on a vocabulary the vocabulary is the set of properties that you will use to express
relationships between elements (resources and literals) in your data model.
...when flush() is called, or the last reference to the datasource is
released, a routine walks the in-memory datasource and re-serializes the graph back to the original file format.
... ns_
release(mydatasource); } nsservicemanager::
releaseservice(krdfservicecid, rdf); } displaying rdf as content now that you've gone through all this pain to expose your information as a datasource, you probably want to see it.
Supporting per-window private browsing - Archive of obsolete content
to do this, import resource://gre/modules/privatebrowsingutils.jsm and use privatebrowsingutils.getprivacycontextfromwindow(win), passing a window object that is
related to the content in question.
... as an example, if an add-on adds a context menu item that accesses an api that requires an nsiloadcontext, the most
relevant window is the one that owns the element being targeted by the context menu (element.ownerdocument.defaultview).
... if some action triggered by a chrome element (such as a button) requires an api that takes a privacy context, the most
relevant window is the one that contains the chrome element.
Tamarin - Archive of obsolete content
releases
release tracking information on current, past, and upcoming
releases of tamarin.
... tamarin doxygen documentation documentation for the latest
release.
... log a bug against tamarin tamarin-devel mailing list #tamarin channel on irc.mozilla.org blogroll mason chang david mandelin
related topics javascript spidermonkey actionmonkey tamarin on mozilla.org ...
Treehydra Manual - Archive of obsolete content
instead of representing code in "easy" form like dehydra, treehydra
relies on gimple, the gcc internals "middle-end" intermediate representation.
...meet is a
relation on abstract values used to filter states at conditional statements.
...join is a
relation on abstract values used to merge states at control flow merge points.
Venkman - Archive of obsolete content
venkman development page older news and
releases.
... mozilla suite and seamonkey these
releases come with venkman pre-installed.
...
related topics javascript, web development, developing mozilla original document information author(s): robert ginda other contributors: doctor unclear last updated date: july 13, 2007 copyright information: portions of this content are © 1998–2007 by individual mozilla.org contributors; content available under a creative commons license | details.
addDirectory - Archive of obsolete content
method of install object syntax public int adddirectory ( string xpisourcepath); public int adddirectory ( string registryname, string xpisourcepath, object localdirspec, string
relativelocalpath); public int adddirectory ( string registryname, string version, string xpisourcepath, object localdirspec, string
relativelocalpath); public int adddirectory ( string registryname, string version, string xpisourcepath, object localdirspec, string
relativelocalpath, boolean forceupdate); public int adddirectory ( string registryname, installversion version, string xpisourcepath, object localdirspec, string
relativelocalpath, boolean forceupdate); parameter...
...s the adddirectory method has the following parameters: registryname the pathname in the client version registry for the root directory of the files that are to be installed.this parameter can be an absolute pathname (beginning with a /) or a
relative pathname, (not beginning with a slash).
...a
relative pathname is appended to the registry name of the package as specified by the package parameter to the initinstall method.this parameter can also be null, in which case the xpisourcepath parameter is used as a
relative pathname.note that the registry pathname is not the location of the software on the computer; it is the location of information about the software inside the client version registry.
initInstall - Archive of obsolete content
the name can be absolute or
relative.
... a
relative pathname is
relative to the netscape 6 namespace.
... a
relative pathname must start with plugins/, to be
relative to the plug-ins portion of that namespace or java/download/, to be
relative to the java portion.
Moving, Copying and Deleting Files - Archive of obsolete content
file and stream guide: [ nsiscriptableio | accessing files | getting file information | reading from files | writing to files | moving, copying and deleting files | uploading and downloading files | working with directories ] important note: the pages from the file and stream guide use the io object (nsiscriptableio), which was not available in any
released version of the platform (pending some fixes).
...other documentation on files and i/o not using the unavailable nsiscriptableio apis: code snippets: file i/o, open and save dialogs, reading textual data, writing textual data, list of file-
related error codes.
...for a list of possible file
related errors, see file errors.
OpenClose - Archive of obsolete content
the openpopup method is defined as follows: void openpopup(in domelement ancho
relement, in string position, in long x, in long y, in boolean iscontextmenu, in boolean attributesoverride); first an example: somepopup.openpopup(anchor, "after_start", 0, 0, false, false); this example will open a popup located just underneath another element referenced by 'anchor'.
...in this next example, the popup is opened
relative to the document element.
...this way, a popup can be positioned
relative to the window, rather than
relative to a specific node.
Popup Guide - Archive of obsolete content
a menu should only contain menu
related elements.
...usually it would contain tools
related to the main window, or an inspector which displays properties of a selected element.
...in addition, an extension may add an enti
rely new menu.
Containment Properties - Archive of obsolete content
it doesn't have any containers, but we may want to iterate over the
relateditem predicate using the simple query syntax.
...<vbox datasources="template-guide-ex1.rdf" ref="http://www.xulplanet.com/rdf/a" containment="http://www.xulplanet.com/rdf/
relateditem"> <template> <rule> <label uri="rdf:*" value="rdf:*"/> </rule> </template> </vbox> instead of iterating over a container, this example iterates over a specific predicate.
...<vbox datasources="template-guide-ex3.rdf" ref="http://www.xulplanet.com/rdf/a" containment="http://www.xulplanet.com/rdf/
relateditem"> <template> <query> <content uri="?start"/> <member container="?start" child="?child"/> </query> <action> <label uri="?child" value="?child"/> </action> </template> </vbox> try this example.
Sorting Results - Archive of obsolete content
this method of sorting a seq works best for the simple query syntax since it is obvious how the starting ref
relates to the end member results (they are just the children), or for extended syntax queries that follow a similar pattern.
...for example, the date 'may 15' would appear after 'august 24' when sorted pu
rely alphabetically but before it when sorted chronologically.
...changing the sort to change the sorting for a template's generated contents, you can either change the sort
related attributes and rebuild the template, or you can call the sort method of the sort service: var listbox = document.getelementbyid("alistbox"); var sortservice = components.classes["@mozilla.org/xul/xul-sort-service;1"].
Template and Tree Listeners - Archive of obsolete content
listening for tree changes the second type of listener is used to handle particular actions
related to trees.
...some useful functions of the observer are the drag and drop
related callbacks to handle when an item is dragged onto the tree.
...the tree observer receives drag
related events in three places: over a container row, before a row, and after a row.
Document Object Model - Archive of obsolete content
you might note that most of the properties listed in the reference cor
relate to common attributes on elements.
...in fact, the actual text used for the prefix is ir
relevant when determining what kind of element is used.
... the dom provides a number of namespace
related functions similar to the non-namespace ones.
The Chrome URL - Archive of obsolete content
if you were to move the file messenger.jar somewhere else and update the manifest file accordingly, thunderbird will still work since it doesn't
rely on its specific installed location.
...remember, the chrome url is not
related to where it is located on disk.
...while it is common to put the content files in a directory called 'content', this is pu
rely out of convention, and these files may be placed in an enti
rely different structure.
Trees - Archive of obsolete content
however, you can create a view enti
rely from scratch if necessary.
...thus, only a handful of attributes apply to the treeitem and
related elements.
... for instance, you cannot change the appearance of the tree rows using the style attribute or with other css properties and the box
related features such as flexibility and orientation cannot be used.
Using Remote XUL - Archive of obsolete content
[optionally show what this looks like] the value of the flex attribute determines the extent to which the element will stretch
relative to other flexible elements.
... [optionally add something about how flex only applies to one axis] note that for remote xul documents you can see changes you make to the ui by
reloading the document with your browser's "
reload" function, just as with a typical html page.
...<menuitem label="hacking" value="https://www.mozilla.org/hacking/" /> <menuitem label="get the source" value="https://www.mozilla.org/source.html" /> <menuitem label="build it" value="https://www.mozilla.org/build/" /> </menupopup> </menu> <menu label="testing"> <menupopup> <menuitem label="download" value="https://www.mozilla.org/
releases/" /> <menuitem label="report a bug" value="https://bugzilla.mozilla.org/enter_bug.cgi?format=guided" /> <menuitem label="bugzilla" value="https://www.mozilla.org/bugs/" /> <menuitem label="bug writing" value="https://www.mozilla.org/quality/bug-writing-guidelines.html" /> </menupopup> </menu> <menu label="tools"> <menupopup> <...
button - Archive of obsolete content
« xul reference home [ examples | attributes | properties | methods |
related ] a button that can be pressed by the user.
...to enable the element, leave this attribute out enti
rely.
...ributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeeventlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata
related interfaces nsiaccessibleprovider, nsidomxulbuttonelement ...
checkbox - Archive of obsolete content
« xul reference home [ examples | attributes | properties | methods |
related ] an element that can be turned on and off.
...to enable the element, leave this attribute out enti
rely.
...ributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeeventlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata
related interfaces nsiaccessibleprovider, nsidomxulcheckboxelement ...
colorpicker - Archive of obsolete content
« xul reference home [ examples | attributes | properties | methods |
related ] a palette of colors from which a user may select by clicking on one of the grid cells.
...to enable the element, leave this attribute out enti
rely.
...ributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeeventlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata
related interfaces nsidomxulcontrolelement bugs the onchange event only fires if attribute type is set to "button".
datepicker - Archive of obsolete content
« xul reference home [ examples | attributes | properties | methods |
related ] a datepicker allows the user to enter a date.
...to enable the element, leave this attribute out enti
rely.
...ributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeeventlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata
related interfaces nsidomxulcontrolelement ...
editor - Archive of obsolete content
« xul reference home [ examples | attributes | properties | methods |
related ] a frame which is expected to contain an editable document.
...it also contains the load constants used by
reloadwithflags and loaduriwithflags.
...ributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeeventlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata
related interfaces nsiaccessibleprovider ...
iframe - Archive of obsolete content
« xul reference home [ examples | attributes | properties | methods |
related ] an inner frame that works much like the html <iframe> element.
...it also contains the load constants used by
reloadwithflags and loaduriwithflags.
...ributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeeventlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata
related nsiaccessibleprovider ...
image - Archive of obsolete content
« xul reference home [ examples | attributes | properties | methods |
related ] summary an element that displays an image, much like the html img element.
...the following values are accepted, or leave out the attribute enti
rely for default handling: always the image is always checked to see whether it should be
reloaded.
...
related see also the image and icon attributes.
label - Archive of obsolete content
« xul reference home [ examples | attributes | properties | methods |
related ] this element is used to provide a label for a control element.
...to enable the element, leave this attribute out enti
rely.
...
related elements description attributes label interfaces nsiaccessibleprovider, nsidomxullabelelement notes labels are not focusable note: starting in gecko 2.0, labels are properly not focusable.
listcell - Archive of obsolete content
« xul reference home [ examples | attributes | properties | methods |
related ] a single cell of a listbox.
...to enable the element, leave this attribute out enti
rely.
... tips if you need to right-align a cell's contents, you can do so like this: cell = document.createelement("listcell"); cell.setattribute("label", "this is the cell's label"); cell.setattribute("style", "text-align:right");
related elements listbox, listcol, listcols, listhead, listheader, listitem ...
listhead - Archive of obsolete content
« xul reference home [ examples | attributes | properties | methods |
related ] a header row of a listbox.
...to enable the element, leave this attribute out enti
rely.
...ributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeeventlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata
related elements listbox, listcell, listcol, listcols, listheader, listitem ...
listheader - Archive of obsolete content
« xul reference home [ examples | attributes | properties | methods |
related ] a header for a single column in a listbox.
...to enable the element, leave this attribute out enti
rely.
...ributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeeventlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata
related elements listbox, listcell, listcol, listcols, listhead, listitem ...
menubar - Archive of obsolete content
« xul reference home [ examples | attributes | properties | methods |
related ] a container that usually contains menu elements.
... on the macintosh, the menubar is displayed along the top of the screen, and all non-menu
related elements inside the menubar will be ignored.
...ributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeeventlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata
related elements menu, menuitem, menulist, menupopup, menuseparator interfaces nsiaccessibleprovider ...
notification - Archive of obsolete content
« xul reference home [ examples | attributes | properties | methods |
related ] the notification is used to display an informative message.
...be aware, however, that some elements, such as textbox will display the value visually, so in order to me
rely associate data with an element, you could 1) use another attribute like "value2" or "data-myatt" (as in the html5 draft), as xul does not require validation (less future-proof); 2) use setattributens() to put custom attributes in a non-xul namespace (serializable and future-proof); 3) use setuserdata() (future-proof and clean, but not easily serializable).
...
related elements notificationbox ...
preference - Archive of obsolete content
« xul reference home [ examples | attributes | properties | methods |
related ] declares a preference that may be adjusted in a prefpane.
...to enable the element, leave this attribute out enti
rely.
...
related preferences system documentation: introduction: getting started | examples | troubleshooting reference: prefwindow | prefpane | preferences | preference | xul attributes ...
rows - Archive of obsolete content
« xul reference home [ examples | attributes | properties | methods |
related ] defines the rows of a grid.
... non-row
related elements placed inside a rows element occupy the full width of the grid and are placed in their corresponding positions between the rows.
...ributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeeventlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata
related elements grid, columns, column, row.
stack - Archive of obsolete content
« xul reference home [ examples | attributes | properties | methods |
related ] an element that renders its children on top of each other.
... note that bottom and right attributes, unlike rect, are
relative to the bottom and right of the stack.
...ributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeeventlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata
related deck ...
tabs - Archive of obsolete content
« xul reference home [ examples | attributes | properties | methods |
related ] a row of tabs.
...to enable the element, leave this attribute out enti
rely.
...
related elements tabbox, tab, tabpanels, tabpanel.
textbox - Archive of obsolete content
« xul reference home [ examples | attributes | properties | methods |
related ] an input field where the user can enter text.
...to enable the element, leave this attribute out enti
rely.
... the xul script: <textbox id="pnnote" multiline="true" rows="2" cols="70" onkeypress="return pncountnotechars(event);"/> the javascript: function pncountnotechars(evt) { //allow non character keys (delete, backspace and and etc.) if ((evt.charcode == 0) && (evt.keycode != 13)) return true; if (evt.target.value.length < 10) { return true; } else { return false; } }
related interfaces nsiaccessibleprovider, nsidomxultextboxelement ...
timepicker - Archive of obsolete content
« xul reference home [ examples | attributes | properties | methods |
related ] the timepicker is used to allow the user to enter a time.
...to enable the element, leave this attribute out enti
rely.
...ributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeeventlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata
related interfaces nsidomxulcontrolelement ...
toolbox - Archive of obsolete content
« xul reference home [ examples | attributes | properties | methods |
related ] a container for toolbars.
...rome://global/skin/" type="text/css"?> <window id="yourwindow" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" title="toolbox example" width="300"> <toolbox> <toolbar> <toolbarbutton label="back"/> <toolbarbutton label="forward"/> <toolbarbutton label="home"/> </toolbar> <toolbar> <toolbarbutton label="stop"/> <toolbarbutton label="
reload"/> </toolbar> </toolbox> <textbox multiline="true" value="we have two toolbars inside of one toolbox above." width="20"/> </window> attributes inherited from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafte...
...
related elements toolbar, toolbarbutton, toolbargrippy, toolbaritem, toolbarpalette, toolbarseparator, toolbarset, toolbarspacer, toolbarspring interfaces nsiaccessibleprovider ...
treecell - Archive of obsolete content
« xul reference home [ examples | attributes | properties | methods |
related ] a single cell in a tree.
...be aware, however, that some elements, such as textbox will display the value visually, so in order to me
rely associate data with an element, you could 1) use another attribute like "value2" or "data-myatt" (as in the html5 draft), as xul does not require validation (less future-proof); 2) use setattributens() to put custom attributes in a non-xul namespace (serializable and future-proof); 3) use setuserdata() (future-proof and clean, but not easily serializable).
...ributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeeventlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata
related elements tree, treecols, treecol, treechildren, treeitem, treerow and treeseparator.
treecol - Archive of obsolete content
« xul reference home [ examples | attributes | properties | methods |
related ] a column of a tree.
...
reload the page to see the checkbox.
...
related elements tree, treecols, treechildren, treeitem, treerow, treecell and treeseparator.
where - Archive of obsolete content
« xul reference home [ examples | attributes | properties | methods |
related ] indicate a condition that must match for a template result to be used.
... attributes ignorecase, multiple, negate,
rel, subject, value examples (example needed) attributes ignorecase type: boolean set to true to indicate that the case does not matter when making comparisons.
...
rel type: one of the values below the type of comparison to perform.
wizard - Archive of obsolete content
« xul reference home [ examples | attributes | properties | methods |
related ] this element is used to construct a step-by-step wizard found in some applications to guide users through a task.
... values for window type as found on mxr: http://mxr.mozilla.org/mozilla-
release/search?string=windowtype navigator:browser - looks like if window has gbrowser it has this window type devtools:scratchpad - scratchpad windows navigator:view-source - the view source windows properties canadvance type: boolean this property is set to true if the user can press the next button to go to the next page.
...
related wizardpage ...
Dialogs in XULRunner - Archive of obsolete content
here is the code needed to open a dialog: function opendialog() { window.opendialog("chrome://basicapp/content/dialog.xul", "newdlg", "modal"); } the resulting dialog looks like this on windows 2000, and will look similar on other operating systems: the first thing that caught my eye about dialog is the button-
related attributes on the element.
...newer
releases will allow using preferences to switch to a xul emulation filepicker, if you want to.
...that could change in future
releases.
2006-10-20 - Archive of obsolete content
summary: mozilla.dev.builds - october 14th to october 20th 2006 linux reference platform 1.8.1 october 18th: marcus is wondering about the linux platform that is currently used to compile both public
releases of firefox and xulrunner.
...he can be contacted via: email: preed@mozilla.com irc: preed on irc.mozilla.org phone: 650.903.0800 x256 uploading language packs to amo on october 17th benjamin smedberg brought the following to the attention of the localizers and the build team: that he is planning to upload the firefox 2 language packages currently located at http://
releases.mozilla.org/pub/mozi...rc3/win32/xpi/ to addons.mozilla.org in the next few days.
...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.
2006-10-13 - Archive of obsolete content
summary: mozilla.dev.l10n - october 13, 2006 announcements seamonkey 1.0.5 he-il seamonkey 1.0.5 in hebrew was
released a while ago firefox 2 rc2 is out firefox 2 rc2 is out, to download click here sunbird_0_3_
release tag being created sunbird_0_3_
release tag being created seamonkey 1.1 localization freeze and beta upcoming there are no open blockers left.
... l10n freeze on seamonkey 1.1 code is imminent in the next days, as well as beta
release.
... discussions mozillatranslator 5.13 rfes mozillatranslator 5.13 is ready to be
released in a few weeks.
2006-10-13 - Archive of obsolete content
announcements sunbird and lightning 0.3rc2 sunbird and lightning 0.3rc2 were
released on october 7th.
...10; the target
release date for rc3 is october 17 new tinderbox and bonsai servers the build team would like help testing out the new tinderbox and bonsai servers.
... sunbird and lighting 0.3 sunbird and lighting 0.3 were
released on october 11 discussions
release process discussion discussion from last week regarding speeding up and automation of the
release process continued.
NPEvent - Archive of obsolete content
type the type member is an int representing an event type, and indicating which structure is
relevant.
... the event type may be any of the ollowing: graphicsexpose focusin focusout enternotify leavenotify motionnotify buttonpress button
release keypress key
release description microsoft windows description the type npevent represents an event passed by npp_handleevent() to a windowless plug-in.
...mouse events have x and y coordinates
relative to the top-left corner of the plugin rectangle.
NPObject - Archive of obsolete content
npobjects are reference counted objects, so callers need to be careful to properly
release acquired references to them.
... to aid with the reference counting and ownership management in general, the functions npn_createobject(), npn_retainobject(), npn_
releaseobject(), and npn_
releasevariantvalue() are provided as part of this api.
... functions npn_createobject() npn_retainobject() npn_
releaseobject() npn_invoke() npn_invokedefault() npn_evaluate() npn_getproperty() npn_setproperty() npn_removeproperty() npn_hasproperty() npn_hasmethod() npn_setexception() see also npclass ...
Writing a plugin for Mac OS X - Archive of obsolete content
the sample is posted under a bsd-style license that means you can use it for anything, even if you don't plan to
release your source code.
... xcode will create a "build" directory next to the project file, and if you built it in
release mode, that folder in turn contains a "
release" directory with the plugin inside it.
... the three symbols that must always be visible are: np_initialize() np_getentrypoints() np_shutdown() the sample plugin is written enti
rely in c, using a standard xcode build configuration, so by default all of its symbols are c-style and visible.
Version - Archive of obsolete content
they are listed in chronological order of when they were
released.
... note: rss 0.93 and rss 0.94 were only ever
released as "drafts" and never became "final" and thus were not meant to actually be used.
... name status
release date based on author rss 0.90 march 1999 rdf netscape netscape's rss 0.91 (revision 1) ?
TCP/IP Security - Archive of obsolete content
the transport layer can optionally assure the
reliability of communications.
... although using tls may require modifying some applications, tls is a well-tested protocol that has several implementations that have been added to many applications, so it is a
relatively low-risk option compared to adding protection at the application layer.
... compared to controls at the other layers, data link layer controls are
relatively simple, which makes them easier to implement; also, they support other network layer protocols besides ip.
Security - Archive of obsolete content
relying on these obsolete security articles is highly discouraged.
...decryption is the process of transforming encrypted information so that it is intelligible again.introduction to public-key cryptographypublic-key cryptography and
related standards and techniques underlie the security features of many products such as signed and encrypted email, single sign-on, and secure sockets layer (ssl) communications.
...ssl has been universally accepted on the world wide web for authenticated and encrypted communication between clients and servers.nspr
release engineering guidethis paper is for engineers performing formal
release for the netscape portable runtime (nspr) across all platforms.ssl and tlsthe secure sockets layer (ssl) and transport layer security (tls) protocols are universally accepted standards for authenticated and encrypted communication between clients and servers.
Sunbird Theme Tutorial - Archive of obsolete content
fixing bug 320823 if you are using the sunbird 0.3a1
release, or a test build before 2005-12-21, then you must apply a fix for bug 320823 to allow sunbird to use themes.
...work with a recent test build so that your theme will be compatible with the next
release.
...you might prefer to use this method only while you are developing your theme, and to use the normal method for public
releases.
Scratchpad - Archive of obsolete content
reload and run the
reload and run option is only available in the execute menu.
... it first
reloads the page, then executes the code when the page's "load" event fires.
...atchpad shift + f4 shift + f4 shift + f4 run scratchpad code ctrl + r cmd + r ctrl + r run scratchpad code, display the result in the object inspector ctrl + i cmd + i ctrl + i run scratchpad code, insert the result as a comment ctrl + l cmd + l ctrl + l re-evaluate current function ctrl + e cmd + e ctrl + e
reload the current page, then run scratchpad code ctrl + shift + r cmd + shift + r ctrl + shift + r save the pad ctrl + s cmd + s ctrl + s open an existing pad ctrl + o cmd + o ctrl + o create a new pad ctrl + n cmd + n ctrl + n close scratchpad ctrl + w cmd + w ctrl + w pretty print the code in scratchpad ct...
RDF: Resource Description Framework for metadata - Archive of obsolete content
the predicate is a trait or aspect about that resource, and often expresses a
relationship between the subject and the object.
... the object is the object of the
relationship or value of that trait.
... mailing list newsgroup rss feed rdf-dev mailing list tools rdf editors and tools rdf validator
related topics xml categories interwiki language links ...
Standards-Compliant Authoring Tools - Archive of obsolete content
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: nvu is a standalone editor created from the remains of mozilla composer.
...newer versions of microsoft frontpage™ have improved, however be sure not to
rely on frontpage-specific extensions for critical website content or functionality.
...
related links validators html central ...
Building Mozilla XForms - Archive of obsolete content
the following table gives you an overview of which version you want to build: firefox version gecko/toolkit version source code notes status firefox 2.0 gecko 1.8.1 cvs, branch mozilla_1_8_branch not developed any more last
release: 0.8.5ff2 firefox 3.0 gecko 1.9.0 cvs, branch head not developed any more last
release: 0.8.5ff3 firefox 3.5 gecko 1.9.1 xforms/schema-validation code does not build with firefox 3.5 any more not supported firefox 3.6 gecko 1.9.2 xforms/schema-validation code does not build with firefox 3.6 any more not developed any more last
release: 0.8.6 firefox 4 gecko 2.0 mercurial, repositories...
... mozilla-central xforms schema-validation mostly works upcoming 0.8.7
release if you have your first working firefox build, you can go on with building the xforms extension.
...an old firefox 3.6
release) use this instead (see bug 601570 for details): ac_add_options --enable-extensions="default,xforms,schema-validation" a complete .mozconfig file for a
release build might look like that: .
XForms Custom Controls - Archive of obsolete content
for example, you might want to render images that are held inside an instance document or you would like to show a disabled trigger when its bound node becomes ir
relevant rather than having it not display (the current default behavior).
... */ boolean isreadonly(); /** * return true if the instance node is
relevant as determined by the mdg.
... */ boolean is
relevant(); /** * return true if the instance node is required as determined by the mdg.
Troubleshooting XForms Forms - Archive of obsolete content
always do this first make sure that you are running the latest
release of the extension.
... check for known bugs / missing features you can check the known bugs/missing features we have in the
release notes of the extension.
... you can also see the current list of open xforms bugs, or the list of fixed bugs that have not made it to the
release versions yet.
Implementation Status - Archive of obsolete content
we have listed the most
relevant bugs here, but check out the bugzilla xforms buglist for the complete list.
...model item properties section title status notes bugs 6.1.1 type partial limited to types mentioned above 6.1.2 readonly supported 6.1.3 required supported 6.1.4
relevant partial
relevancy applied via a bind to an element fails to apply to child attributes 342319; 6.1.5 calculate supported 6.1.6 constraint supported 6.1.7 p3ptype unsupported 279049; 6.2.1 atomic datatype partial w...
...and urlencoded-post submission methods supported 11.9.3 the put submission method supported 11.9.4 the delete submission method unsupported 11.9.5 serialization as application/xml supported 11.9.6 serialization as multipart/
related partial 330557; 11.9.7 serialization as multipart/form-data supported 11.9.8 serialization as application/x-www-form-urlencoded supported 11.10 replacing data with the submission response partial @replace with value of 'text' not supported ...
XForms Group Element - Archive of obsolete content
however, having a
relevant model item property on the bound node has an effect on a group.
...core form controls, groups, switches, repeats and host language content) within a non-
relevant group are handled as non-
relevant.
... if a group is non-
relevant, then the rendering approach used to signify non-
relevance is applied to the entire content of the group.
Mozilla XForms User Interface - Archive of obsolete content
they can be bound to instance nodes to define context for the xforms controls that they contain, should any of their child nodes happen to use
relative xpath expressions.
... binding these elements to instance data is also a way to apply model item properties (for example,
relevancy) to the elements.
...that node will serve as the context node for any
relative xpath expressions in that set of repeated markup.
Fixing Table Inheritance in Quirks Mode - Archive of obsolete content
this represented a violation of css inheritance rules, and led many authors to create workarounds such as: <style type="text/css"> body, table, td {font-size: 11px;} </style> recreating legacy behavior to avoid "breaking" older pages that were authored with old-browser behaviors in mind, mozilla and
related browsers will mimic old browsers when in "quirks" mode.
... /* rule to fix quirks-mode inheritance behavior */ table, caption { font-size: inherit; font-weight: inherit; font-style: inherit; font-variant: inherit; } this rule will override the rule in quirk.css and thus allow the author to have
reliable inheritance of font styles into tables when in "quirks" mode.
...
related resources mozilla's doctype sniffing original document information author(s): eric a.
The Business Benefits of Web Standards - Archive of obsolete content
one of the most important features of a successful site is constantly evolving
relevant content which in turn can act as fuel for social media dialogue with the user community.
... comporting with the
relevant legislation in the jurisdiction is an important driver particularly for developers who wish to access public funds, or who work with charities and other socially responsible organisations.
...in many cases, they are faced with poor html code quality that may also
rely on undocumented features or hacks and specific coding practices.
Obsolete: XPCOM-based scripting for NPAPI plugins - Archive of obsolete content
related sources the full sample plugin code can be found in the mozilla source tree under modules/plugin/samples/4x-scriptable/ ibm developer works has published a good article on xpcom.
... nsitestplugin *scriptablepeer = (nsitestplugin *)instance->pdata; // see if this is the first time and we haven't created it yet if (!scriptablepeer) { nsitestplugin *scriptablepeer = new nsscriptablepeer(); if (scriptablepeer) ns_addref(scriptablepeer); // addref for ourself, // don't forget to
release on // shutdown to trigger its destruction } // add reference for the caller requesting the object ns_addref(scriptablepeer); *(nsisupports **)value = scriptablepeer; } else if (variable == nppvpluginscriptableiid) { nsiid* ptr = (nsiid *)npn_memalloc(sizeof(nsiid)); *ptr = scriptableiid; ...
... *(nsiid **)value = ptr; } return rv; } nperror npp_destroy (npp instance, npsaveddata** save) { if(instance == null) return nperr_invalid_instance_error; //
release the scriptable object ns_if_
release(instance->pdata); } original document information author(s): arun k.
Introduction to game development for the Web - Game development
with modern web technologies and a recent browser, it's enti
rely possible to make stunning, top-notch games for the web.
...instead of
relying on someone else to make all the decisions about what analytics you need, you can collect your own -- or choose the third party that you like the best -- to gather information about your sales and your game's reach.
... you get to manage your customer
relationship more closely, in your own way.
Game monetization - Game development
add-ons and dlcs add-ons and downloadable content are a good way to provide extra value to an already
released game, but remember that you'll have to offer decent, entertaining content to attract people to buy it.
... advertisements instead of actively selling the games you can also try to get yourself a passive income — showing adverts and
relying on previous activities
related to promoting your game may benefit, but your game has to be addictive, which isn't as easy as it sounds.
... other non-game focused monetization strategies there are other ways you can earn money when building html5 games, and it doesn't even have to be game-
related.
Mobile touch controls - Game development
the good thing about using phaser is that it offers helper variables and functions for easier and faster development, but it's enti
rely up to you which approach you to choose.
... pure javascript approach we could implement touch events on our own — setting up event listeners and assigning
relevant functions to them would be quite straightforward: var el = document.getelementsbytagname("canvas")[0]; el.addeventlistener("touchstart", handlestart); el.addeventlistener("touchmove", handlemove); el.addeventlistener("touchend", handleend); el.addeventlistener("touchcancel", handlecancel); this way, touching the game's <canvas> on the mobile screen would emit events, and thus we could manipulate the game in any way we want (for example, moving the space ship around).
...for example, tapping on the right side of the screen will fire the weapon: this.buttonshoot = this.add.button(this.world.width*0.5, 0, 'button-alpha', null, this); this.buttonshoot.oninputdown.add(this.goshootpressed, this); this.buttonshoot.oninputup.add(this.goshoot
released, this); the code above will create a new button using a transparent image that covers the right half of the screen.
Implementing controls using the Gamepad API - Game development
the code discussed in this article was tested with a few gamepads, but the author's favorite configuration is a wi
reless xbox 360 controller and the firefox browser on mac os x.
...the first one is fired when the browser detects the connection of a new gamepad while the second one is fired when a gamepad is disconnected (either physically by the user or due to inactivity.) in the demo, the gamepadapi object is used to store everything
related to the api: var gamepadapi = { controller: {}, turbo: false, connect: function() {}, disconnect: function() {}, update: function() {}, buttonpressed: function() {}, buttons: [], buttonscache: [], buttonsstatus: [], axesstatus: [] }; the buttons array contains the xbox 360 button layout: buttons: [ 'dpad-up','dpad-down','dpad-left','dpad-right', 'start','back','axis-...
...without it you'd have to
release the button and press it again to have the desired effect.
Game over - Game development
for now we'll keep it simple, showing an alert message and restarting the game by
reloading the page.
... first, replace where you initially called setinterval() setinterval(draw, 10); with: var interval = setinterval(draw, 10); then replace the second if statement with the following: if(y + dy < ballradius) { dy = -dy; } else if(y + dy > canvas.height-ballradius) { alert("game over"); document.location.
reload(); clearinterval(interval); // needed for chrome to end game } letting the paddle hit the ball the last thing to do in this lesson is to create some kind of collision detection between the ball and the paddle, so it can bounce off it and get back into the play area.
...update the last bit of code you modified again, to the following: if(y + dy < ballradius) { dy = -dy; } else if(y + dy > canvas.height-ballradius) { if(x > paddlex && x < paddlex + paddlewidth) { dy = -dy; } else { alert("game over"); document.location.
reload(); clearinterval(interval); } } if the ball hits the bottom edge of the canvas we need to check whether it hits the paddle .
Initialize the framework - Game development
the game's html the html document structure is quite simple, as the game will be rendered enti
rely on the <canvas> element generated by the framework.
... index.html, in a sensible location, and add the following code to it: <!doctype html> <html> <head> <meta charset="utf-8" /> <title>gamedev phaser workshop - lesson 01: initialize the framework</title> <style>* { padding: 0; margin: 0; }</style> <script src="js/phaser.min.js"></script> </head> <body> <script> var game = new phaser.game(480, 320, phaser.canvas, null, { p
reload: p
reload, create: create, update: update }); function p
reload() {} function create() {} function update() {} </script> </body> </html> downloading the phaser code next, we need to go through the process of downloading the phaser source code and applying it to our html document.
... p
reload takes care of p
reloading the assets create is executed once when everything is loaded and ready update is executed on every frame.
Load the assets and print them on screen - Game development
block) and the p
reload() function: var ball; note: for the sake of this tutorial, we will use global variables.
...add the following new line just inside the p
reload() function, at the bottom: function p
reload() { // ...
...the second parameter is the
relative path to the graphic asset.
Scaling - Game development
we can make the game scale to fit on any screen size automatically during the p
reload stage, so we don't have to worry about it later.
...update your existing p
reload() function as follows: function p
reload() { game.scale.scalemode = phaser.scalemanager.show_all; game.scale.pagealignhorizontally = true; game.scale.pagealignvertically = true; } scalemode has a few different options available for how the canvas can be scaled: no_scale — nothing is scaled.
... user_scale — allows you to have custom dynamic scaling, calculating the size, scale and ratio on your own; again, this is more of an advanced mode the other two lines of code in the p
reload() function are responsible for aligning the canvas element horizontally and vertically, so it is always centered on screen regardless of size.
Backgrounds and borders - Learn web development
screen readers cannot parse background images, therefore they should be pu
rely decoration; any important content should be part of the html page and not contained in a background.
...mple: .box { border-top: 1px solid black; } the individual properties for these shorthands would be: .box { border-width: 1px; border-style: solid; border-color: black; } and for the longhands: .box { border-top-width: 1px; border-top-style: solid; border-top-color: black; } note: these top, right, bottom, and left border properties also have mapped logical properties that
relate to the writing mode of the document (e.g.
... rounded corners rounding corners on a box is achieved by using the border-radius property and associated longhands which
relate to each corner of the box.
Cascade and inheritance - Learn web development
while working through this lesson may seem less immediately
relevant and a little more academic than some other parts of the course, an understanding of these things will save you much pain later on!
...the cascade, and the closely-
related concept of specificity, are mechanisms that control which rule applies when there is such a conflict.
...really all three should su
rely apply, because rules later in the source order generally override earlier rules.
Sizing items in CSS - Learn web development
in css we have units which
relate to the size of the viewport — the vw unit for viewport width, and vh for viewport height.
... using these units you can size something
relative to the viewport of the user.
... if you change the vh and vw values this will change the size of the box or font; changing the viewport size will also change their sizes because they are sized
relative to the viewport.
Styling tables - Learn web development
link the css to the html by placing the following line of html inside your <head>: <link href="style.css"
rel="stylesheet" type="text/css"> spacing and layout the first thing we need to do is sort out the spacing/layout — default table styling is so cramped!
... first, add the following <link> element into your html head, just above your existing <link> element: <link href='https://fonts.googleapis.com/css?family=rock+salt'
rel='stylesheet' type='text/css'> now add the following css into your style.css file, below the previous addition: /* typography */ html { font-family: 'helvetica neue', helvetica, arial, sans-serif; } thead th, tfoot th { font-family: 'rock salt', cursive; } th { letter-spacing: 2px; } td { letter-spacing: 1px; } tbody td { text-align: center; } tfoot th { text-align: right; } t...
...here is nothing really specific to tables here; we are generally tweaking the font styling to make things easier to read: we have set a global sans-serif font stack; this is pu
rely a stylistic choice.
Grids - Learn web development
.container { display: grid; grid-template-columns: 200px 200px 200px; } add the 2nd declaration to your css rule, then
reload the page, and you should see that the items have rearranged themselves one into each cell of the created grid.
...our grid always has lines, which lines start at 1 and
relate to the writing mode of the document.
... .container { display: grid; grid-template-areas: "header header" "sidebar content" "footer footer"; grid-template-columns: 1fr 3fr; grid-gap: 20px; } header { grid-area: header; } article { grid-area: content; } aside { grid-area: sidebar; } footer { grid-area: footer; }
reload the page and you will see that your items have been placed just as before without us needing to use any line numbers!
Legacy layout methods - Learn web development
the calc() function allows us to do this calculation right inside the width value, so for any item spanning 4 columns we can do this, for example: .col.span4 { width: calc((6.25%*4) + (2.08333333%*3)); } try replacing your bottom block of rules with the following, then
reload it in the browser to see if you get the same result: .col.span2 { width: calc((6.25%*2) + 2.08333333%); } .col.span3 { width: calc((6.25%*3) + (2.08333333%*2)); } .col.span4 { width: calc((6.25%*4) + (2.08333333%*3)); } .col.span5 { width: calc((6.25%*5) + (2.08333333%*4)); } .col.span6 { width: calc((6.25%*6) + (2.08333333%*5)); } .col.span7 { width: calc((6.25%*7) + (2.08333333%*6)); } .col...
... include the skeleton and normalize css in the html page, by adding the following to its head: <link href="normalize.css"
rel="stylesheet"> <link href="skeleton.css"
rel="stylesheet"> skeleton includes more than a grid system — it also contains css for typography and other page elements that you can use as a starting point.
... .container { position:
relative; width: 100%; max-width: 960px; margin: 0 auto; padding: 0 20px; box-sizing: border-box; } elements can only be part of the grid if they are inside a row, so as with our earlier example we need an additional <div> or other element with a class of row nested between the content <div> and our actual content container <div>s.
Getting started with CSS - Learn web development
to link styles.css to index.html add the following line somewhere inside the <head> of the html document: <link
rel="stylesheet" href="styles.css"> this <link> element tells the browser that we have a stylesheet, using the
rel attribute, and the location of that stylesheet as the value of the href attribute.
...using your code editor add the following to your css file: h1 { color: red; } save your html and css files and
reload the page in a web browser.
...try adding a class of special to it, then
reload your page and see what happens.
create fancy boxes - Learn web development
i want to be fancy.</div> let's have an example by turning our box into a cloud: .fancy { text-align: center; /* same trick as previsouly used to make circles */ box-sizing: border-box; width : 150px; height : 150px; padding : 80px 1em 0 1em; /* we make room for the "ears" of our cloud */ margin : 0 100px; position:
relative; background-color: #a4c9cf; /* well, actually we are not making a full circle as we want the bottom of our cloud to be flat.
...<i>pierre desproges</i></blockquote> so here comes our style: blockquote { min-height: 5em; padding : 1em 4em; font : 1em/150% sans-serif; position :
relative; background-color: lightgoldenrodyellow; } blockquote::before, blockquote::after { position: absolute; height : 3rem; font : 6rem/100% georgia, "times new roman", times, serif; } blockquote::before { content: '“'; top : 0.3rem; left : 0.9rem; } blockquote::after { content: '”'; bottom : 0.3rem; right : 0.8rem; } blockquote:lang(fr)::before { content: '...
... .fancy { position:
relative; background-color: #ffc; padding: 2rem; text-align: center; max-width: 200px; } .fancy::before { content: ""; position : absolute; z-index : -1; bottom : 15px; right : 5px; width : 50%; top : 80%; max-width: 200px; box-shadow: 0px 13px 10px black; transform: rotate(4deg); } what's next in many ways, making a fancy box is mostly about adding c...
Styling lists - Learn web development
objective: to become familiar with the best practices and properties
related to styling lists.
... rules 2 and 3 set
relative font sizes for the headings, different list types (the children of the list elements inherit these), and paragraphs.
...the
relevant properties are as follows: background-image: this references the path to the image file you want to use as the bullet.
Basic native form controls - Learn web development
keep in mind this is just a user interface feature; unless you submit your form secu
rely, it will get sent in plain text, which is bad for security — a malicious party could intercept your data and steal passwords, credit card details, or whatever else you've submitted.
... for maximum usability/accessibility, you are advised to surround each list of
related items in a <fieldset>, with a <legend> providing an overall description of the list.
... <input type="image" alt="click me!" src="my-img.png" width="80" height="30"> if the image button is used to submit the form, this control doesn't submit its value — instead, the x and y coordinates of the click on the image are submitted (the coordinates are
relative to the image, meaning that the upper-left corner of the image represents the coordinate (0, 0)).
Example 1 - Learn web development
basic state html <div class="select"> <span class="value">cherry</span> <ul class="optlist hidden"> <li class="option">cherry</li> <li class="option">lemon</li> <li class="option">banana</li> <li class="option">strawberry</li> <li class="option">apple</li> </ul> </div> css /* --------------- */ /* required styles */ /* --------------- */ .select { position:
relative; display : inline-block; } .select.active, .select:focus { box-shadow: 0 0 3px 1px #227755; outline: none; } .select .optlist { position: absolute; top : 100%; left : 0; } .select .optlist.hidden { max-height: 0; visibility: hidden; } /* ------------ */ /* fancy styles */ /* ------------ */ .select { font-size : 0.625em; /* 10px */ font-family : verdana, ari...
...ctive state html <div class="select active"> <span class="value">cherry</span> <ul class="optlist hidden"> <li class="option">cherry</li> <li class="option">lemon</li> <li class="option">banana</li> <li class="option">strawberry</li> <li class="option">apple</li> </ul> </div> css /* --------------- */ /* required styles */ /* --------------- */ .select { position:
relative; display : inline-block; } .select.active, .select:focus { box-shadow: 0 0 3px 1px #227755; outline: none; } .select .optlist { position: absolute; top : 100%; left : 0; } .select .optlist.hidden { max-height: 0; visibility: hidden; } /* ------------ */ /* fancy styles */ /* ------------ */ .select { font-size : 0.625em; /* 10px */ font-family : verdana, ari...
...en state html <div class="select active"> <span class="value">cherry</span> <ul class="optlist"> <li class="option highlight">cherry</li> <li class="option">lemon</li> <li class="option">banana</li> <li class="option">strawberry</li> <li class="option">apple</li> </ul> </div> css /* --------------- */ /* required styles */ /* --------------- */ .select { position:
relative; display : inline-block; } .select.active, .select:focus { box-shadow: 0 0 3px 1px #227755; outline: none; } .select .optlist { position: absolute; top : 100%; left : 0; } .select .optlist.hidden { max-height: 0; visibility: hidden; } /* ------------ */ /* fancy styles */ /* ------------ */ .select { font-size : 0.625em; /* 10px */ font-family : verdana, ari...
From object to iframe — other embedding technologies - Learn web development
instead of
relying on adobe flash, you should use html5 video for your media needs, svg for vector graphics, and canvas for complex images and animations.
... peter elst was already writing some years ago that adobe flash is ra
rely the right tool for the job.
... summary the topic of embedding other content in web documents can quickly become very complex, so in this article, we've tried to introduce it in a simple, familiar way that will immediately seem
relevant, while still hinting at some of the more advanced features of the involved technologies.
Responsive images - Learn web development
note: the new features discussed in this article — srcset/sizes/<picture> — are all supported in
release versions of modern desktop and mobile browsers (including microsoft's edge browser, although not internet explorer.) how do you create responsive images?
... a space the width of the slot the image will fill when the media condition is true (480px) note: for the slot width, you may provide an absolute length (px, em) or a length
relative to the viewport (vw), but not percentages.
... when the browser starts to load a page, it starts to download (p
reload) any images before the main parser has started to load and interpret the page's css and javascript.
General asynchronous programming concepts - Learn web development
overview: asynchronous next in this article, we'll run through a number of important concepts
relating to asynchronous programming, and how this looks in web browsers and javascript.
...if a function
relies on the result of another function, it has to wait for the other function to finish and return, and until that happens, the entire program is essentially stopped from the perspective of the user.
...this becomes a problem when a function
relies on the results of multiple previous processes to function.
Introducing asynchronous JavaScript - Learn web development
related to blocking), many web api features now use asynchronous code to run, especially those that access or fetch some kind of resource from an external device, such as fetching a file from the network, accessing a database and returning data from it, accessing a video stream from a web cam, or broadcasting the display to a vr headset.
... it will then move to the next line and begin executing the fetch() block but, because fetch() executes asynchronously without blocking, code execution continues after the promise-
related code, thereby reaching the final console.log() statement (all done!) and outputting it to the console.
... in a less trivial code example, this kind of setup could cause a problem — you can't include an async code block that returns a result, which you then
rely on later in a sync code block.
Fetching data from the server - Learn web development
the ajax model involves using a web api as a proxy to more intelligently request data rather than just having the browser
reload the entire page.
...the content is only
reloaded from the server when it has been updated.
... function updatedisplay(verse) { } we'll start our function by constructing a
relative url pointing to the text file we want to load, as we'll need it later.
Manipulating documents - Learn web development
you will also encounter various terms used to describe the type of node, and their position in the tree in
relation to one another: element node: an element, as it exists in the dom.
...inside your script element, add the following line: const link = document.queryselector('a'); now we have the element reference stored in a variable, we can start to manipulate it using properties and methods available to it (these are defined on interfaces like htmlancho
relement in the case of <a> element, its more general parent interface htmlelement, and node — which represents all nodes in a dom).
... as an example, try adding these lines to our ongoing example: para.style.color = 'white'; para.style.backgroundcolor = 'black'; para.style.padding = '10px'; para.style.width = '250px'; para.style.textalign = 'center';
reload the page and you'll see that the styles have been applied to the paragraph.
What is JavaScript? - Learn web development
the meaning is slightly different in the two contexts, but
related, and both approaches (server-side and client-side) usually work together.
...when you
reload, you should find that all of the buttons when clicked will create a paragraph.
... for example, if you have the following script elements: <script async src="js/vendor/jquery.js"></script> <script async src="js/script2.js"></script> <script async src="js/script3.js"></script> you can't
rely on the order the scripts will load in.
Object prototypes - Learn web development
you will ra
rely see properties defined on the prototype property, because they are not very flexible when defined like this.
... note that this set of tests
relies on some of the knowledge taught in the next article, so you might want to read that first before you try them.
... summary this article has covered javascript object prototypes, including how prototype object chains allow objects to inherit features from one another, the prototype property and how it can be used to add methods to constructors, and other
related topics.
Test your skills: Object basics - Learn web development
albums: an array representing the albums
released by the band.
...
released: a number representing the year the album was
released.
... once you've done this, you should then write a string to the variable bandinfo, which will contain a small biography detailing their name, nationality, years active, and style, and the title and
release date of their first album.
Aprender y obtener ayuda - Learn web development
that just leads to frustration — it is often better to take a break, move around for a bit, then
relax with a drink before getting back to work, and as we said earlier, the diffuse learning you do in that time can often help you to figure out a solution to the problem you were facing.
... note: stack overflow is a really useful website — it is basically a huge database of curated questions and answers on various technologies and
related techniques.
... if you are not sure which article to read, then try searching mdn for some
related keywords (as indicated above), or try a general web search.
Web performance resources - Learn web development
using resource hints such as
rel=preconnect,
rel=dns-prefetch,
rel=prefetch, and
rel=p
reload keep the size of javascript to a minimum.
...as we learned in the critical rendering path document, linking css with a tradional link tag with
rel="stylesheet" is synchronous and blocks rendering.
... <link
rel="stylesheet" href="/path/to/my.css" media="print" onload="this.media='all'"> <noscript><link
rel="stylesheet" href="/path/to/my.css"></noscript> the downside with this approach is the flash of unstyled text (fout.) the simplist way to address this is by inlining css that is required for any content that is rendered above the fold, or what you see in the browser viewport before scrolling.
The business case for web performance - Learn web development
this article discusses how certain business metrics directly
relate to a user's web performance experience and how to apply service design to boost the user's experiences of web performance.
...when a site performance slowly, users are more likely to abandon the site prematu
rely which can lead to low time on site metrics.
... expectation versus reality in performance business performance (in revenue, operations, etc.) is directly
related to how to web performance.
The "why" of web performance - Learn web development
this would seem
relatively fast, and the file size would be largely ir
relevant.
...there is no single performance metric; and differing business objectives may mean different metrics are more
relavant to the goals of the site or the organization that it supports.
...good or bad website performance cor
relates powerfully to user experience, as well as the overall effectiveness of most sites.
Client-Server Overview - Learn web development
this discussion is however still very
relevant, because the described behaviour must be implemented by your server-side code, irrespective of which programming language or web framework you select.
...you would repeat a lot of code across each page (the basic page template, structure, etc.), and if you wanted to change anything about the page structure — like add a new "
related products" section for example — then you'd have to change every page individually.
...the parts of the site that make it dynamic are the web application (this is how we will refer to the server-side code that processes http requests and returns http responses), the database, which contains information about players, teams, coaches and their
relationships, and the html templates.
Server-side web frameworks - Learn web development
this abstraction layer is referred to as an object-
relational mapper (orm).
... performance of the framework/programming language: usually "speed" is not the biggest factor in selection because even
relatively slow runtimes like python are more than "good enough" for mid-sized sites running on moderate hardware.
... load balancers help to ensure redundancy and
reliability or allow geolocated handling of user requests to ensure responsiveness.
Getting started with Ember - Learn web development
developers are then more easily able to switch between projects and applications without having to completely
relearn the architecture, patterns, conventions, etc.
... how does ember
relate to vanilla javascript?
...(good suggestions are your "desktop" or "documents" directories, so that it is easy to find): ember new todomvc or, on windows: npx ember-cli new todomvc this generates a production-ready application development environment that includes the following features by default: development server with live
reload.
React interactivity: Events and state - Learn web development
there are a couple of other things to note: the camel-cased nature of onclick is important — jsx will not recognize onclick (again, it is already used in javascript for a specific purpose, which is
related but different — standard onclick handler properties).
... callback props in react applications, interactivity is ra
rely confined to just one component: events that happen in one component will affect other parts of the app.
...at called it, so it can delete the correct task from the state update the "delete" button inside todo.js, like so: <button type="button" classname="btn btn__danger" onclick={() => props.deletetask(props.id)} > delete <span classname="visually-hidden">{props.name}</span> </button> now when you click on any of the "delete" buttons in the app, your browser console should log the id of the
related task.
React resources - Learn web development
for larger applications with hundreds of unique views and lots of moving parts, it makes sense to limit the amount of ir
relevant code that's sent to your user.
...in more complex apps, this view is great for understanding parent/child
relationships at a glance.
... state and lifecycle in the react docs intro to react in the react docs read about javascript classes at mdn testing create-react-app provides some tools for testing your application out of the box — you may have deleted the
relevant files earlier in the tutorial.
Beginning our React todo list - Learn web development
if we were to use checked, as we would in regular html, react would log some warnings into our browser console
relating to handling events on the checkbox, which we want to avoid.
... 0; } .stack-small > * + * { margin-top: 1.25rem; } .stack-large > * + * { margin-top: 2.5rem; } @media screen and (min-width: 550px) { .stack-small > * + * { margin-top: 1.4rem; } .stack-large > * + * { margin-top: 2.8rem; } } .stack-exception { margin-top: 1.2rem; } /* end global styles */ .todoapp { background: #fff; margin: 2rem 0 4rem 0; padding: 1rem; position:
relative; box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 2.5rem 5rem 0 rgba(0, 0, 0, 0.1); } @media screen and (min-width: 550px) { .todoapp { padding: 4rem; } } .todoapp > * { max-width: 50rem; margin-left: auto; margin-right: auto; } .todoapp > form { max-width: 100%; } .todoapp > h1 { display: block; max-width: 100%; text-align: center; margin: 0; margin-bottom: 1rem; } ...
... flex: 0 0 100%; } .todo-text { width: 100%; min-height: 4.4rem; padding: 0.4rem 0.8rem; border: 2px solid #565656; } .todo-text:focus { box-shadow: inset 0 0 0 2px; } /* checkbox styles */ .c-cb { box-sizing: border-box; font-family: arial, sans-serif; -webkit-font-smoothing: antialiased; font-weight: 400; font-size: 1.6rem; line-height: 1.25; display: block; position:
relative; min-height: 44px; padding-left: 40px; clear: left; } .c-cb > label::before, .c-cb > input[type="checkbox"] { box-sizing: border-box; top: -2px; left: -2px; width: 44px; height: 44px; } .c-cb > input[type="checkbox"] { -webkit-font-smoothing: antialiased; cursor: pointer; position: absolute; z-index: 1; margin: 0; opacity: 0; } .c-cb > label { font-size: inherit...
Starting our Svelte Todo list app - Learn web development
but let's have a look at the markup and see how it
relates to our desired features: a label and a text box for entering new tasks.
...0; } .stack-small > * + * { margin-top: 1.25rem; } .stack-large > * + * { margin-top: 2.5rem; } @media screen and (min-width: 550px) { .stack-small > * + * { margin-top: 1.4rem; } .stack-large > * + * { margin-top: 2.8rem; } } .stack-exception { margin-top: 1.2rem; } /* end global styles */ .todoapp { background: #fff; margin: 2rem 0 4rem 0; padding: 1rem; position:
relative; box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 2.5rem 5rem 0 rgba(0, 0, 0, 0.1); } @media screen and (min-width: 550px) { .todoapp { padding: 4rem; } } .todoapp > * { max-width: 50rem; margin-left: auto; margin-right: auto; } .todoapp > form { max-width: 100%; } .todoapp > h1 { display: block; max-width: 100%; text-align: center; margin: 0; margin-bottom: 1rem; } ...
... flex: 0 0 100%; } .todo-text { width: 100%; min-height: 4.4rem; padding: 0.4rem 0.8rem; border: 2px solid #565656; } .todo-text:focus { box-shadow: inset 0 0 0 2px; } /* checkbox styles */ .c-cb { box-sizing: border-box; font-family: arial, sans-serif; -webkit-font-smoothing: antialiased; font-weight: 400; font-size: 1.6rem; line-height: 1.25; display: block; position:
relative; min-height: 44px; padding-left: 40px; clear: left; } .c-cb > label::before, .c-cb > input[type="checkbox"] { box-sizing: border-box; top: -2px; left: -2px; width: 44px; height: 44px; } .c-cb > input[type="checkbox"] { -webkit-font-smoothing: antialiased; cursor: pointer; position: absolute; z-index: 1; margin: 0; opacity: 0; } .c-cb > label { font-size: inherit...
Dynamic behavior in Svelte: working with variables and props - Learn web development
when a todo item's delete button is pressed, the
relevant todo is removed from the todos array, and the ui updates to no longer show it.
... in addition, we can now check the checkboxes, and the completed status of the
relevant todos will now update in the todos array.
...always remember that svelte analyzes our code to find out dependencies, so it's better to be explicit about it and not
rely on the visibility of top-level variables.
Getting started with Vue - Learn web development
this allows you to create markup managed enti
rely by vue, which can improve developer experience and performance when dealing with complex applications.
...this is enti
rely up to you.
...we've learnt about some of the ideas behind vue, created some scaffolding for our example app to live inside, inspected it, and made a few p
reliminary changes.
Understanding client-side JavaScript frameworks - Learn web development
how do they
relate to "vanilla" javascript or html?
...we will learn how to deal with reactivity issues
related to updating objects and arrays.
... note that we were hoping to have more frameworks included upon initial publication, but we decided to
release the content and then add more framework guides later, rather than delay it longer.
Implementing feature detection - Learn web development
we first use the media attribute to only apply the brick css to the page if the page width is 480px or less: <link href="dist/brick.css" type="text/css"
rel="stylesheet" media="all and (max-width: 480px)"> we then use matchmedia() in the javascript several times, to only run brick navigation functions if we are on the small screen layout (in wider screen layouts, everything can be seen at once, so we don't need to navigate between different views).
... update your <link> element in your html so it points to the correct css file (you should also update your <title> element to something more suitable!): <link href="modernizr-css.css"
rel="stylesheet"> above this <link> element, add a <script> element to apply the modernizr library to the page, as shown below.
...if you search through the class list, you'll also see others
relating to flexbox, like: flexboxlegacy for the old flexbox spec (2009).
Setting up your own test automation environment - Learn web development
next, you need to download the
relevant drivers to allow webdriver to control the browsers you want to test.
...we have tested this locally, but you could set this up on just about any server along with the
relevant browser drivers, and then connect your scripts to it using the url you choose to expose it at.
... integrating selenium with ci tools as another point, it is also possible to integrate selenium and
related tools like lambdatest, and sauce labs with continuous integration (ci) tools — this is useful, as it means you can run your tests via a ci tool, and only commit new changes to your code repository if the tests pass.
Deploying our app - Learn web development
deploying to hosting tends to be at the tail-end of the project life cycle, but with services such as netlify bringing down the cost of deployments (both in financial terms and also the time required to actually deploy) it's possible to deploy during development to either share work in progress or to have a pre-
release for some other purpose.
... this is where our code, github, and netlify need to be set up to talk to one another, so that each time we update our github code repository, netlify will automatically pick up the changes, run the build tasks, and finally
release a new update.
...this step isn't necessary, but it is a good best practice to get into the habit of setting up — across all our projects, we can then
rely on npm run build to always do the complete build step, without needing to remember the specific build command arguments for each project.
Accessibility/LiveRegionDevGuide
the "purge by timestamp" method will be used to remove old messages that are no longer deemed
relevant while "purge by politeness" is used to satisfy the aria live politeness specification.
...however, the channel property is also significant for single output applications that
rely on speech output only.
... container-
relevant politeness advancing setting all off persisting politeness level navigation navigate to next and previous live regions bookmarking ...
Mozilla accessibility architecture
it can read in an entire document at once, look only pieces of a document
related to recent events, or traverse the accessibility object model based on screen position.
...these crashes occur when the assistive techology
releases after some gecko modules have already been unloaded, when the necessary destructors no longer exist in memory.
... events: we must ensure that the accessible for an event is not
released before the accessible client has a chance to review its data.
Embedding API for Accessibility
for double-sized text, use nsidomwindow::settextzoom(2.0); using accessibility preferences there are a number of prefs
related to accessibility.
...a reframe fixes the appearance of the page to match the new prefs, without
reloading the document over the network.
..., acceptvideo); no audio setboolpref("browser.accept.audio", acceptaudio); no timed events setboolpref("browser.accept.timed_events", accepttimedevents); no timer speed setintpref("timer.
relative_speed", percent); /* 100 corresponds to normal speed, 200 to double speed */ no allow cycling in lists and links setboolpref("keyboardnav.allow_cycling", allowcycling); no mouse pointer moves with keyboard focus setboolpref("keyboardnav.mouse_follows_...
Benchmarking
any performance metrics gathered by such builds are largely un
related to what would be found in a
release browser.
... another option that is on by default in non-
release builds is the preference javascript.options.asyncstack, which provides better debugging information to developers.
... set it to false to match a
release build.
What to do and what not to do in Bugzilla
the build the bug is reported against is more than one stable
release old and the bug can't be reproduced with a current build.
... verifying wontfix or invalid bugs is
relatively easy if a developer or a trusted qa person has wontfixed or invalidated them.
... bug flags mozilla drivers use flags to identify bugs blocking a
release.
Chrome registration
the uri may be absolute or
relative to the location of the manifest file.
...also, the path inside overridden files is
relative to the overridden path, not the original one (this can be annoying and/or useful in css files, for example).
... note: there was a bug in gecko 1.8.1.5 (firefox 2.0.0.5) and earlier where you could not use a
relative url for the new-resolved-uri parameter.
Configuring Build Options
for example, a mozconfig-dbg: mk_add_options moz_objdir=@topsrcdir@/obj-ff-dbg ac_add_options --enable-debug and a mozconfig-
rel-opt: mk_add_options moz_objdir=@topsrcdir@/obj-ff-
rel-opt ac_add_options --disable-debug ac_add_options --enable-optimize allow for building both versions by specifiying the configuration via the mozconfig environment variable: $ env mozconfig=/path/to/mozconfig-dbg ./mach build $ env mozconfig=/path/to/mozconfig-
rel-opt ./mach build don't forget to set the mozconfig environment variable for...
...if you want to use the build regularly, you will want a
release build without extra debugging information; if you are a developer who wants to hack the source code, you probably want a non-optimized build with extra debugging macros.
... mozconfig-common: # add common options here, such as making an optimized
release build mk_add_options moz_make_flags="-j4" ac_add_options --enable-optimize --disable-debug mozconfig-firefox: # include the common mozconfig .
Old Thunderbird build
for example, to create a debug build instead of a
release build, that file would contain: ac_add_options --enable-debug for more on configuration options, see the page configuring build options.
... searched the bug database for issues
relating to your problem (e.g., platform-specific issues).
... check for @topsrcdir@ or
relative paths in your mozconfig.
Simple Instantbird build
build configuration by default, the build system creates a
release build of instantbird roughly equivalent to the official instantbird
release builds.
...for example, to create a debug build instead of a
release build, that file would contain: ac_add_options --enable-debug for more on configuration options, see the page configuring build options.
... have you searched the bug database for issues
relating to your problem (e.g., platform-specific issues)?
Simple Thunderbird build
for example, to create a debug build instead of a
release build, that file would also contain the line: ac_add_options --enable-debug each of these ac_add_options entries needs to be on its own line.
... searched the bug database for issues
relating to your problem (e.g., platform-specific issues).
... check for @topsrcdir@ or
relative paths in your mozconfig.
Interface Compatibility
these apis may be removed or replaced with standard interfaces in future
releases of mozilla.
... in micro/maintenance
releases, there should be no incompatible changes to interfaces, except as a last resort when a security fix leaves no other option.
... between major
releases, there is no guarantee of interface stability.
Contributing to the Mozilla code base
there are a number of ways to do this: search bugzilla for
relevant keywords.
...browse this component on bugzilla for
related bugs ask in our matrix channels : #introduction:mozilla.org or #developers:mozilla.org find a bug we've identified as a good fit for new contributors.
... the bug itself may contain a clear indication of the best person to ask for a review are there
related bugs on similar topics?
Developer guide
managing multiple profiles when working with pre
release versions of firefox, it's often helpful to have multiple firefox profiles, such as one for each channel, or for different kinds of testing.
... obsolete build caveats and tips a place to put build tips which are no longer
relevant to building the latest version of the code from main but are
relevant when building old codebases.
... taskcluster taskcluster is the task execution framework that supports mozilla's continuous integration and
release processes.
Linux compatibility matrix
distribution kernel glibc glib gtk+2 gtk+3 pixman stdc++ gcc clang python3
released eol fedora 16 3.1 2.14 2.30 2.24 3.2 0.22 4.6 4.6 2.9 n/a nov 2011 feb 2013 fedora 17 3.3 2.15 2.32 2.24 3.4 0.24 4.7 4.7 3.0 n/a may 2012 jul 2013 fedora 18 3.6 2.16 2.34 2.24 3.6 0.26 4.7 4.7 3.1 n/a jan 2013 jan 2014 fedora 19 3.9 2.17 2.36 2.24 3.8 0.30 4.8.1 4.8 3.3 n/a jul 2013 jan 2015 fedora 20 3.11 2.18 2.38 2.24 ...
... distribution kernel glibc glib gtk+2 gtk+3 pixman stdc++ gcc clang python3
released eol notes red backgrounds denote lack of compatibility with current versions of firefox.
... yellow backgrounds denote compatibility with esr78 green backgrounds denote compatibility with the current
release (as of writing, 78) greener backgrounds denote compatibility with the current mozilla-central (as of writing, 80).
Multiple Firefox profiles
the four channels are
release, beta, developer edition, and nightly.
... the
release channel is recommended for most users, as it is the "official
release" channel.
...the beta channel contains the features that are expected to be in the next
release of firefox and are in final stages of testing.
Performance best practices for Firefox front-end engineers
if you ever go back to the event loop (by yielding, waiting for an event, etc), style flushes un
related to your code are likely to run, and your test will give you a false positive.
... here's an example: async function matchwidth(elem, othe
relem) { let width = await window.promisedocumentflushed(() => { // do _not_ under any circumstances write to the dom in one of these // callbacks!
... return elem.clientwidth; }); requestanimationframe(() => { othe
relem.style.width = `${width}px`; }); } please see the section on promisedocumentflushed in detecting and avoiding synchronous style flushes for more information on how to use the api.
mozbrowsericonchange
<link
rel="icon"> or <link
rel="apple-touch-icon">) is available in the browser <iframe>'s content.
...the any keyword can also be used, to represent "any size."
rel a domstring representing the
rel attribute value from the <link> element used to link to the icon.
... example var browser = document.queryselector("iframe"); browser.addeventlistener("mozbrowsericonchange", function( event ) { console.log("the url of the new favicon is:" + event.details.href); });
related events mozbrowserasyncscroll mozbrowserclose mozbrowsercontextmenu mozbrowsererror mozbrowserloadend mozbrowserloadstart mozbrowserlocationchange mozbrowseropenwindow mozbrowsersecuritychange mozbrowsershowmodalprompt mozbrowsertitlechange mozbrowserusernameandpasswordrequired ...
overflow-clip-box-block
the overflow-clip-box-block css property specifies
relative to which box the clipping happens when there is an overflow — in the block direction.
... syntax values padding-box this keyword makes the clipping be
related to the padding box.
... content-box this keyword makes the clipping be
related to the content box.
overflow-clip-box-inline
the overflow-clip-box-inline css property specifies
relative to which box the clipping happens when there is an overflow — in the inline direction.
... syntax values padding-box this keyword makes the clipping be
related to the padding box.
... content-box this keyword makes the clipping be
related to the content box.
overflow-clip-box
the overflow-clip-box css property specifies
relative to which box the clipping happens when there is an overflow.
... initial valuepadding-boxapplies toall elementsinheritednomediavisualcomputed valueas specifiedanimation typediscretecanonical orderthe unique non-ambiguous order defined by the formal grammar syntax values padding-box this keyword makes the clipping be
related to the padding box.
... content-box this keyword makes the clipping be
related to the content box.
Embedding the editor
composer shouldn't
rely on certain xul document structure proposed solutions fixing editor rooting as described above, editor rooting needs to be changed so that an editor lives on top of an nsdocshell, rather than hanging off the nseditorboxobject.
...this will involve: making a new interface, nsieditorframe, that is implemented by nsdocshell or a
related class.
...nsieditorframe should contain methods for getting the editing session, and doing some generic editor-
related stuff (probably common to html and plain text editing).
Getting Started with Chat
relax and have fun!
... attention (nickname is the name of the user you want the attention of) nickname: pong respond to a user's ping (nickname is the name of the user who wants your attention) /query nickname opens a private chat with the specified user /quit message disconnects you from the current server displaying the message in all connected channels prior to quitting /
reload styles some irc clients, colloquy on mac in particular, stop displaying your messages in the channel window.
... firebot firebot is a bot which assists with mozilla
related activities on irc.
Extending a Protocol
in order to manage parent-child
relationships, ipdl uses a tree herirachy to manage the creation of children.
... constructs: by which we mean, pwindowglobal is in charge of contructing the parent/child
relationship.
...we've now set up the bi-directional
relationship between pwindowglobal and pecho at the protocol level.
IPDL Tutorial
it is possible to get into trouble with ca
reless uses of synchronous messages; while ipdl can check and/or guarantee that your code does not deadlock, it is easy to cause nasty performance problems by blocking.
...}; virtual pexamplechild* toplevelchild::allocpexample() { refptr<examplechild*> actor = new examplechild(); return actor.forget(); } virtual bool toplevelchild::deallocpexample(pexamplechild* actor) { ns_
release(static_cast<examplechild*>(actor)); return true; } if an object that implements a protocol can't be constructed inside allocpfoo, has been previously constructed and doesn't require an ipdl connection throughout its lifetime, or implements a refcounted protocol where the first form of constructor is not available, there is a second form of sendpfooconstructor which can be used: class exa...
... this is useful for actors with lifetimes outside of ipdl - for instance, a flag could be set indicating that ipdl-
related functions are no longer safe to use.
Downloads.jsm
the downloads.jsm javascript code module provides a single entry point to interact with the downloading capabilities of the platform, including starting new downloads, controlling ongoing downloads, and retrieving download-
related configuration.
... calling this function may cause the download list to be
reloaded from the previous session, if it wasn't loaded already.
... calling this function does not cause the list of public downloads to be
reloaded from the previous session.
PopupNotifications.jsm
this service is used, for example, to display geolocation
related notifications.
...for example, geolocation
related notifications have the id "geolocation".
...the ancho
relement property returns the notification's anchor element.
SourceMap.jsm
the url root from which all sources are
relative.
... sourceroot: an optional root for all
relative urls in this source map.
... source: the original source file (
relative to the sourceroot).
Localizing without a specialized tool
folder structure throughout this document, we will be using the following folder structure in all examples: your working directory (root) mozilla-1.9.2 (en-us source, pulled from http://hg.mozilla.org/
releases/mozilla-1.9.2) l10n-mozilla-1.9.2 (a directory containing localization directories, one dir per localization; often referred to as "l10n base") x-testing (a directory with your localization files) please either follow this structure closely or adjust all commands in the documentation as needed by your custom set-up.
...assuming that you have installed mercurial, issue the following command: $ hg clone http://hg.mozilla.org/
releases/mozilla-1.9.2 this will pull the mozilla 1.9.2 sources from the remote repository and create a mercurial clone in mozilla-1.9.2 inside your working directory.
... $ hg clone http://bitbucket.org/mozillal10n/x-testing if there is an hg.mozilla.org repository with localization files, you can pull from it too: $ hg clone http://hg.mozilla.org/
releases/l10n-mozilla-1.9.2/x-testing eventually, you should end up with a folder hierarchy described above in the folder structure section.
Patching a Localization
more specifically, it's a problem with an already
released localization.
...the repository for this version is
releases/l10n/mozilla-aurora.
... cd ~/localization-workdir clone the localization repository for your locale and for the version you want to patch: hg clone http://hg.mozilla.org/
releases/l10n/mozilla-aurora/gl now that you have the code and your working directory, edit the dtd and properties files to make your necessary changes.
What every Mozilla translator should know
when a development is started for an specific version, a new repository is created under hg.mozilla.org/
releases/.
... some branch/
release names identified: mozilla source + en-us localization files for [ab-cd] locale corresponding firefox version branches in hg mozilla-central l10n-central firefox.next (trunk) mozilla-1.9.2 l10n-mozilla-1.9.2 firefox 3.6 mozilla-1.9.1 l10n-mozilla-1.9.1 firefox 3.5 and, on the former revision control system, cvs: cvs trunk (the default branch) -> firefox/thunderbird 3.0.x branch mozilla_1_8_branch -> f...
... bugzilla, the bug-tracking system you do need an account in bugzilla you should configure the account to watch the following addresses: firefoxl10n@hotmail.com calendar-l10n@mozilla.bugs (specific for calendar
related bugs) this way you will receive mail for bugs affecting many or even all locales.
Fonts for Mozilla's MathML engine
note:cambria math is installed by default on windows 7 and later versions and should ensure
relatively good mathml rendering.
... note: a deprecated version of stix is preinstalled starting with os x lion and should ensure
relatively good mathml rendering.
... fonts with a math table you can actually render mathml using any font with a math table and
related open font format features.
Updates
march 22, 2011 firefox 4.0 has been
released!
... may 28, 2010 stix fonts version 1.0
released.
... june 5, 2002 mozilla 1.0
released "by virtue of embedding gecko, mozilla 1.0 and products based on mozilla code support more web standards, more deeply, more consistently across more platforms than any others.
Mozilla Web Developer FAQ
however, authoring new documents that
rely on quirks is discouraged.
...you should not
rely on mozilla’s document.all support on new pages.) the method document.getelementbyid() can be used instead.
... try asking in the newsgroup
relevant to your question in the comp.infosystems.www.authoring.* hierarchy or, if your question is about javascript/ecmascript or the dom, in comp.lang.javascript (after reading the group faqs first, of course).
Mozilla projects on GitHub
to do more—to contribute to the code, or to fork it and start your own project based on mozilla-
related code—you need a github account.
... project name description pdf.js a portable document format (pdf) reader written enti
rely in javascript.
... firefox-dev.tools a web page to help new mozilla contributors find bugs to work on that
relate to the firefox developer tools.
BloatView
if they aren't, then you're not using the ns_impl_addref and ns_impl_
release (or ns_impl_isupports which calls them) for xpcom objects, or moz_count_ctor and moz_count_dtor for non-xpcom objects.
...this could indicate a hand-written
release method (that doesn't use the ns_log_
release macro from nstracerefcnt.h), or perhaps you're just not freeing any of the instances you've allocated.
... the most likely configs you'll want to modify are listed below: linux: unittests/linux_unittest.py mac: unittests/mac_unittest.py windows: unittests/win_unittest.py android: android/androidarm_4_3.py how to instrument your objects for bloatview first, if your object is an xpcom object and you use the ns_impl_addref and ns_impl_
release (or a variation thereof) macro to implement your addref and
release methods, then there is nothing you need do.
Gecko Profiler FAQ
overview of the changes in the last (year?) to cleopatra/etc faster, hopefully more
reliable has a timeline tab lets you hide threads with a context menu supports symbolication for local builds on windows if you run “mach buildsymbols” first profiling non-nsthreads?
...when we are accessing a virtual memory page that needs to
reload from disk) the gecko profiler does not know about page faults.
... many times the reason you incur a page fault is me
rely that you are touching a memory page that hasn’t been touched in awhile.
Leak-hunting strategies and tips
--jesse) dropping a reference on the floor by: forgetting to
release (because you weren't using nscomptr when you should have been): see bug 99180 or bug 93087 for an example or bug 28555 for a slightly more interesting one.
... [obscure] double-assignment into the same variable: if you
release a member variable and then assign into it by calling another function that does the same thing, you can leak the object assigned into the variable by the inner function.
...this means that if there are leaked gc roots from which the wrapper is reachable, the wrapper will never
release its reference on the native object.
Preferences
mozilla networking preferences a guide to key networking-
related preferences.
... examples code snippets preference-
related code snippets.
...
related topics xul, javascript, xpcom, extensions, developing mozilla ...
NSPR Contributor Guide
general guidelines downward compatibility because many different applications, besides the mozilla client, use the nspr api, the api must remain downward compatible across even major
releases.
...your proposed api should encapsulate a
relatively low level capability as would be found in a system call or libc.
... generally useful platform abstractions you agree to sustain, bug fix may
rely on the nspr api may not
rely on any other library api new platform ports all nspr api items must be implemented platform specific headers in pr/include/md/_platformname.[h!cfg] platform specific code in pr/src/md/platform/*.c make rules in config/_platform.mk documentation the files for nspr's documentation are maintained using a proprietary word processing system [don't ask].
NSPR build instructions
--disable-debug --enable-optimize specify these two options to generate an optimized (
release) build.
...nspr debug build uses the
release c run-time library by default.
... makefile targets all (default) clean realclean distclean install
release running the test programs the tests were built above, in the pr/tests directory.
PR_DetachThread
the thread object and all
related data attached to it are destroyed.
... note: as of nspr
release v3.0, pr_attachthread and pr_detachthread are obsolete.
... in nspr
release 19980529b and earlier, it is necessary for a native thread not created by nspr to call pr_attachthread before it calls any nspr functions, and call pr_detachthread when it is done calling nspr functions.
PR_Wait
description a call to pr_wait causes the thread to
release the monitor's lock, just as if it had called pr_exitmonitor as many times as it had called pr_entermonitor.
...the resumption from the wait is me
rely a hint that a change of state has occurred.
... resuming from the wait is me
rely an opportunity to evaluate the expression, not an assertion that the expression is true.
Introduction to Network Security Services
figure 1, below, shows a simplified view of the
relationships among the three shared libraries listed above and nspr, which provides low-level cross platform support for operations such as threading and i/o.
... (note that nspr is a separate mozilla project; see netscape portable runtime for details.) figure 1
relationships among core nss libraries and nspr naming conventions and special libraries windows and unix use different naming conventions for static and dynamic libraries: windows unix static .lib .a dynamic .dll .so or .sl in addition, windows has "import" libraries that bind to dynamic libraries.
... platform for 32-bit cpus for 64-bit cpus solaris/sparc libfreebl_pure32_3.so libfreebl_hybrid_3.so hpux/parisc libfreebl_pure32_3.sl libfreebl_hybrid_3.sl aix (planned for a future
release) libfreebl_pure32_3_shr.a libfreebl_hybrid_3_shr.a an application should not link against these libraries, because they are dynamically loaded by nss at run time.
NSS Memory allocation
this makes it difficult to tell arenas that are truly leaked from those that are me
rely in the free list.
...after that function returns, any arenas that still appear to be leaked have truly been leaked, and are not me
rely on the free list.
...this can be done outside the program enti
rely, or can be done by the program itself, in the main() function.
PKCS #11 Module Specs
the
relative order of two pkcs#11 libraries which have the same trustorder value is undefined.
... slotparams - space separated list of name/value pairs where the name is a slotid and the value is a space separated list of parameters
related to that slotid.
... sample file: library= name="netscape internal crypto module" parameters="configdir=/u/
relyea/.netscape certprefix= secmod=secmod.db" nss="flags=internal,pkcs11module trustorder=1 cipherorder=-1 ciphers= slotparams={0x1=[slotflags='rsa,dsa,dh,rc4,rc2,des,md2,md5,sha1,ssl,tls,publiccerts,random'] 0x2=[slotflags='rsa' askpw=only]}" library=dkck32.dll name="datakey signasure 3600" nss="trustorder=50 ciphers= " library=swft32.dll name="netscape software fortezza" parameters="keyfile=/u/
rel...
FC_SignRecover
syntax ck_rv fc_signrecover( ck_session_handle hsession, ck_byte_ptr pdata, ck_ulong usdatalen, ck_byte_ptr psignature, ck_ulong_ptr pussignatu
relen ); parameters hsession [in] session handle.
...pussignatu
relen [in, out] pointer to the size of the output buffer, replaced by the length of the signature if the operation is successful.
...if psignature is null only the length of the signature is returned in *pussignatu
relen.
FC_VerifyRecover
syntax ck_rv fc_verifyrecover( ck_session_handle hsession, ck_byte_ptr psignature, ck_ulong ussignatu
relen, ck_byte_ptr pdata, ck_ulong_ptr pusdatalen ); parameters hsession [in] session handle.
...ussignatu
relen [in] handle of the key to be usedn.
...if psignature is null only the length of the signature is returned in *pussignatu
relen.
NSS environment variables
[0|n|n]: ssl_renegotiate_never never allow renegotiation - that was the default for 3.12.5
release.
... 3.12.8 nsdistmode string on operating systems other than windows, this controls whether copies, absolute symlinks, or
relative symlinks of the output files should be published to mozilla/dist.
... the possible values are: copy: copies of files are published absolute_symlink: symlinks whose targets are absolute pathnames are published if not specified, default to
relative symlinks (symlinks whose targets are
relative pathnames).
NSS functions
publickeynickname mxr 3.4 and later pk11_setslotpwvalues mxr 3.2 and later pk11_setsymkeynickname mxr 3.4 and later pk11_setsymkeyuserdata mxr 3.11 and later pk11_setwrapkey mxr 3.2 and later pk11_sign mxr 3.2 and later pk11_signatu
relen mxr 3.2 and later pk11_symkeyfromhandle mxr 3.2 and later pk11_tokenexists mxr 3.2 and later pk11_tokenkeygen mxr 3.6 and later pk11_tokenkeygenwithflags mxr 3.10.2 and later pk11_tokenrefresh mxr 3.7.1 and later pk11_traversecer...
... seckey_ecparamstokeysize mxr 3.12 and later seckey_destroypublickeylist mxr 3.4 and later seckey_destroysubjectpublickeyinfo mxr 3.2 and later seckey_getpublickeytype mxr 3.3 and later seckey_publickeystrengthinbits mxr 3.8 and later seckey_signatu
relen mxr 3.11.2 and later utility functions the public functions listed here perform initialization tasks and other services.
... nssrwlock_unlockwrite mxr 3.2 and later nsssmime_versioncheck mxr 3.2.1 and later port_alloc mxr 3.2 and later port_arenaalloc mxr 3.2 and later port_arenagrow mxr 3.2 and later port_arenamark mxr 3.2 and later port_arena
release mxr 3.2 and later port_arenastrdup mxr 3.2 and later port_arenaunmark mxr 3.2 and later port_arenazalloc mxr 3.2 and later port_free mxr 3.2 and later port_freearena mxr 3.2 and later port_geterror mxr 3.2 and later...
NSS tools : cmsutil
." sign message example cmsutil -s [-i infile] [-o outfile] [-d dbdir] [-p password] -n nickname[-tgp] [-y ekprefnick] see also certutil(1) see also additional resources nss is maintained in conjunction with pki and security-
related projects through mozilla dn fedora.
... the most closely-
related project is dogtag pki, with a project wiki at [1]http://pki.fedoraproject.org/wiki/.
...the nss site
relates directly to nss code changes and
releases.
NSS tools : crlutil
rom db: crlutil -e [-d keydir] [-p dbprefix] * deleting crl from db: crlutil -d -n nickname [-d keydir] [-p dbprefix] * erasing crls from db: crlutil -e [-d keydir] [-p dbprefix] * import crl from file: crlutil -i -i crl [-t crltype] [-u url] [-d keydir] [-p dbprefix] [-b] see also certutil(1) see also additional resources nss is maintained in conjunction with pki and security-
related projects through mozilla dn fedora.
... the most closely-
related project is dogtag pki, with a project wiki at [1]http://pki.fedoraproject.org/wiki/.
...the nss site
relates directly to nss code changes and
releases.
NSS tools : ssltab
additional resources nss is maintained in conjunction with pki and security-
related projects through mozilla dn fedora.
... the most closely-
related project is dogtag pki, with a project wiki at [2]http://pki.fedoraproject.org/wiki/.
...the nss site
relates directly to nss code changes and
releases.
NSS tools : ssltap
additional resources nss is maintained in conjunction with pki and security-
related projects through mozilla dn fedora.
... the most closely-
related project is dogtag pki, with a project wiki at [2]http://pki.fedoraproject.org/wiki/.
...the nss site
relates directly to nss code changes and
releases.
sslintro.html
upgraded documentation may be found in the current nss reference overview of an ssl application chapter 1 overview of an ssl application ssl and
related apis allow compliant applications to configure sockets for authenticated, tamper-proof, and encrypted communications.
...you should use only the ssl apis (and
related certificate, key, and pkcs #11 apis) that are described in this document, the ssl reference.
... initializing caches ssl peers frequently reconnect after a
relatively short time has passed.
NSS tools : cmsutil
." sign message example cmsutil -s [-i infile] [-o outfile] [-d dbdir] [-p password] -n nickname[-tgp] [-y ekprefnick] see also certutil(1) see also additional resources nss is maintained in conjunction with pki and security-
related projects through mozilla dn fedora.
... the most closely-
related project is dogtag pki, with a project wiki at [1]http://pki.fedoraproject.org/wiki/.
...the nss site
relates directly to nss code changes and
releases.
NSS tools : crlutil
] * deleting crl from db: crlutil -d -n nickname [-d keydir] [-p dbprefix] * erasing crls from db: crlutil -e [-d keydir] [-p dbprefix] * import crl from file: crlutil -i -i crl [-t crltype] [-u url] [-d keydir] [-p dbprefix] [-b] see also certutil(1) see also additional resources nss is maintained in conjunction with pki and security-
related projects through mozilla dn fedora.
... the most closely-
related project is dogtag pki, with a project wiki at [1]http://pki.fedoraproject.org/wiki/.
...the nss site
relates directly to nss code changes and
releases.
NSS tools : ssltap
additional resources nss is maintained in conjunction with pki and security-
related projects through mozilla dn fedora.
... the most closely-
related project is dogtag pki, with a project wiki at [2]http://pki.fedoraproject.org/wiki/.
...the nss site
relates directly to nss code changes and
releases.
Rhino downloads archive
release
release date change log download link rhino 1.7r4 2012-06-18 new in rhino 1.7r4 rhino1_7r4.zip rhino 1.7r3 2011-05-09 new in rhino 1.7r3 rhino1_7r3.zip rhino 1.7r2 2009-03-22 new in rhino 1.7r2 rhino1_7r2.zip rhino 1.7r1 2008-03-06 new in rhino 1.7r1 rhino1_7r1.zip rhino 1.6r7 2007-08-20 new in rhino 1.6r7 rhino1_6r7.zip rhino 1.6r6 2007-07-30 new in rhino 1.6r6 rhino1_6r6.zip rhino 1.6r5 2006-11-19 same code as 1.6r4, but
relicensed under mpl/gpl.
...r4.1 2003-04-21 changes in 1.5r4.1 rhino15r41.zip rhino 1.5r4 2003-02-10 changes in 1.5r4 rhino15r4.zip rhino 1.5r3 2002-01-27 changes in 1.5r3 rhino15r3.zip rhino 1.5r2 2001-07-27 changes in 1.5r2 rhino15r2.zip rhino 1.5r1 2000-09-10 changes in 1.5r1 rhino15r1.zip rhino 1.4r3 1999-05-10 initial public
release rhino14r3.zip rhino 1.6r1 through 1.6r6 implement e4x using xmlbeans library.
...in rhino 1.6r6 and later the e4x support has been rewritten to
rely solely on the dom3 apis supported natively by java 1.5.
Property cache
(informally: if another property shadows x'.p, the shape of x' will change.) o---->o---->o---->o ^x ^x' ^object.prototype, perhaps (----> indicates the proto
relation) scope chain shadowing guarantee — if at time t0 the object x has shape s and a name lookup for p starting at scope chain head x finds p on an object x' of shape s', where x !== x'; and the lookup called no resolve hooks or non-native lookup ops; and each object examined along the parent chain, except possibly the one along whose prototype chain x' was found, had no prototype or was...
... ↓ o ----> o ----> o ----> o ^global ^x' (----> indicates proto as before; downward arrows ↓ indicate the parent
relation) method guarantee — if at time t0 the object x has shape s; and x has an own property p that is a method property (transparently joined function); and at time t1 an object y has shape s; and no shape-regenerating gc occurred; then at time t1 y's own property p is the same method property.
... the jit uses a fourth kind of pcval, having pcval.isnull(), internally to indicate that a property lookup missed enti
rely.
SpiderMonkey Internals
not all macros are tested around
related code yet.
...contains well-known string constants, their atoms, the global atom hash table and
related state, the js_atomize() function that turns a counted string of bytes into an atom, and literal pool (jsatommap) methods.
... jsinterp.*, jscntxt.*, jsinvoke.cpp the bytecode interpreter, and
related functions such as call and allocstack, live in jsinterp.cpp.
JIT Optimization Strategies
the most commonplace operations that are
relevant for fast program execution are property accesses and function calls.
... for (var i = 0; i < array.length; i++) { if (array[i] > 100) return true; } when this optimization is successful, property access is eliminated enti
rely and replaced with an inline constant.
... when this optimization is successful, property access is eliminated enti
rely and replaced with an inline constant.
JS_SetOptions
mxr id search for jsoption_dont_report_uncaught jsoption_
relimit added in spidermonkey 1.8 throw an exception if a regular expression backtracks more than n3 times, where n is the length of the input string.
... mxr id search for jsoption_
relimit jsoption_anonfunfix added in spidermonkey 1.8 disallow function () {} in statement context, per ecma-262 edition 3.
... this behavior is the default in
releases where this option has been removed.
JSAPI reference
a note on versioning: up until the
release of firefox 4, spidermonkey, and thus the jsapi, was versioned in an ad-hoc way, with
releases happening at times that roughly, but not really, corresponded to firefox
releases.
... in the fall of 2012, the spidermonkey team decided to align
releases with those of firefox.
...firefox 4 is the last
release that has a corresponding spidermonkey
release with the old scheme, where the jsapi has the version 1.8.5.
TPS Tests
phases have an n to m
relationship with profiles, where n >= m (there can never be more phases than profiles).
... asset lists a test file will contain one or more asset lists, which are lists of bookmarks, passwords, or other types of browser data that are
relevant to sync.
...this will cause tps to set the firstsync pref to the
relevant value before syncing, so that the described actionwill take place logger.loginfo(msg) logs the given message to the tps log.
Redis Tips
so rather than thinking about redis as a database with some kind of non-existent
relationship to sql, think of it as a data structure server with a rich set of commands for querying and manipulating those data structures over a network connection.
...
related commands - an ever-growing list of
related commands is given on the right-hand side of the page.
...if they were written before redis 2.4 was
released, they are out-of-date and useless.
Secure Development Guidelines
introduction provide developers with information on specific security issues cover common coding mistakes and how they affect a product how to avoid making them how to mitigate them everything is oriented toward c/c++ introduction: gaining control specifics about the underlying architecture, using x86 as an example 6 basic registers (eax, ebx, ecx, edx, edi, esi) 2 stack-
related registers (esp, ebp) mark top and bottom of current stack frame status register (eflags) contains various state information instruction pointer (eip) points to register being executed; can’t be modified directly introduction: gaining control (2) eip is modified using call or jump instructions attacks usually
rely on obtaining control over the eip ot...
... buffer bounds validations (bbv) thou shalt check the array bounds of all strings (indeed, all arrays), for su
rely where thou typest "foo" someone someday shall type "supercalifragilisticexpialidocious".
...le: void *p; size_t new_size; p = realloc(p, new_size); if (p == null) { /* handle error */ } memory leaks: prevention tools like valgrind can help detect memory leaks writing secure code: object management reference counting issues real-life example (bug 440230) void addref() { ++mrefcnt; ns_log_addref(this, mrefcnt, "nscssvalue::array", sizeof(*this)); } void
release() { --mrefcnt; ns_log_
release(this, mrefcnt, "nscssvalue::array"); if (mrefcnt == 0) delete this; } reference counting issues: prevention use the largest data type available on your platform for your reference counter use a hard limit constructor/destructor issues if a constructor fails the destructor never gets called this can lead to memory leaks constr...
Implementation Details
es to get information of supported interfaces for interested at api: core: gecko interfaces windows: msaa, ia2, ienumvariant and isimpledom* interfaces linux: at-spi roles refer to specific pages to get information of supported roles for interested at api: gecko msaa ia2 at-spi states refer to specific pages to get information of supported states for interested at api: gecko msaa ia2 at-spi
relations refer to specific pages to get information of supported
relations for interested at api: gecko msaa ia2 at-spi attributes object attributes refer to specific pages to get information of supported object attributes for interested at api: gecko msaa ia2 at-spi text attributes refer to specific pages to get information of supported text attributes for interested at api: gecko msaa - doesn...
... msaa/iaccessible2 at-spi avoiding memory leaks it is the assistive technology's responsibility to watch for events that indicate when windows or content subtrees are being destroyed, and to
release all accessible objects
related to that window.
... in addition, state_defunct is set on objects that should be
released by the assistive technology.
Using the Places favicon service
this time is used by nsifaviconservice.setandloadfaviconforpage() to determine if the data is fresh or needs
reloading from the server.
...this makes sure that we aren't obsessively
reloading favicons into the database for every page viewed, but also that changes in the favicon will be picked up quickly.
...the expiration time is only used to determine whether data should be
reloaded from the network (or cache) or whether the version in the database is fresh enough.
Avoiding leaks in JavaScript XPCOM components
this is the strategy used by xpcom, partly because it can be used through a very simple api, addref and
release.
... in c++, we use nscomptr to help manage ownership, and we use macros to implement addref and
release.
...n has a pointer to j, so the wrapper wrapping j exists as long as n doesn't
release the pointer, and creates a garbage collection root that roots j.
XPCOM changes in Gecko 2.0
note: binary xpcom components must be recompiled for every new major
release of firefox starting with firefox 4.
...in theory, this is invisible to the user, but it's a costly process, since every component needs to be loaded and executed, then unloaded, then
reloaded again during the restart.
...instead of
relying on a potentially stale component cache on startup, we read the application's component registrations out of its manifest file and load those components.
Setting up the Gecko SDK
you may want to check for newer versions at gecko versions prior to 1.7: http://ftp.mozilla.org/pub/mozi...illa/
releases/ gecko versions after 1.8: http://ftp.mozilla.org/pub/mozi...nner/
releases/ once you download the sdk, you can expand it into any convenient location.
...also link against a number of libraries in the object/library modules line: nspr4.lib plds4.lib plc4.lib embedstring.lib xpcomglue.lib both of these settings are shown below: the last change you need to make to set up the gecko sdk in your project is to change the "use run-time library" setting to "multithreaded dll." since this change is configuration dependent, you must make set the
release configuration run-time library to the
release multithreaded dll runtime and the debug configuration to the debug multithreaded dll runtime (this needs clarification): after making these changes, press ok.
... tools needed gecko 1.9.2 sdk: http://
releases.mozilla.org/pub/mozi....win32.sdk.zip windows platform sdk: http://www.microsoft.com/downloads/e...displaylang=en moztools: http://ftp.mozilla.org/pub/mozilla.o...8-moztools.zip the windows platform sdk has the c++ compiler/linker needed, moztools has several tools and libraries needed for this example.
Detailed XPCOM hashtable guide
in most cases, the functions of this entry class can be enti
rely inline.
... before using nsthashtable, see if nsbasehashtable and
relatives will work for you.
...they provide the following features: hashtable operations can be completed without using an entry class, making code easier to read; optional thread-safety: the hashtable can manage a read-write lock around the table; predefined key classes provide automatic cleanup of strings/interfaces nsinterfacehashtable and nsclasshashtable automatically
release/delete objects to avoid leaks.
nsCountedRef
nscountedref<t> is a template class implementing an object that takes a strong reference to a reference-counted resource that must be
released, typically on destruction of the object.
... nscountedref has a role similar to nsrefptr but does not require that the handle is a pointer to an object that has addref() and
release() methods.
...in order to use nscountedref<t> for a class t associated with a particular resource type, the type of the handle to the resource and the methods for referencing and
releasing the resource must be provided for class t.
XPCOM glue classes
this class is typically used to represent unicode character arrays.nsastring (external)class declarationnsastring_internalclass declarationnsautorefnsautoref<t> is a template class implementing an object that holds a handle to a resource that must be
released, typically on destruction of the object.</t>nsautoreftraitsnsautoreftraits<t> is a template class describing traits of resources held by objects of class nsautoref<t> and/or nscountedref<t>.</t>nsautostringclass declarationnsautostring (external)class declarationnscautostringclass declarationnscautostring (external)class declarationnscomptrthis utility class simplifies managing xpcom interfa...
...ce references from c++ code.nscountedrefnscountedref<t> is a template class implementing an object that takes a strong reference to a reference-counted resource that must be
released, typically on destruction of the object.</t>nscstringclass declarationnscstring externalclass declarationnscstringcontainer (external)class declaration nscstringencodingthe nscstringencoding enumeration describes the set of character encodings understood by the ns_cstringtoutf16 and ns_utf16tocstring functions.nsdependentcstringclass declarationnsdependentcstring externalclass declarationnsdependentcsubstringclass declarationnsdependentcsubstring externalclass declarationnsdependentstringclass declarationnsdependentstring externalclass declarationnsdependentsubstringclass declarationnsdependentsubstring exter...
...this is done using the functions addref() and
release(), which respectively modify a variable of type nsautorefcnt, which basically is a wrapper around a count of the number of references refering to the class.nsstringclass declarationnsstring externalclass declarationnsstringcontainer (external)class declarationnssupportsweakreferenceinherit from this c++ class to add canonical support for nsisupportsweakreference.nsxpidlcstringclass declaratio...
IAccessibleHyperlink
as a result it may be removed in a later version of the idl and it is suggested that implementations should not
rely on the inheritance.
...the returned value is
related to the iaccessibletext interface of the object that owns this hyperlink.
...the returned value is
related to the iaccessibletext interface of the object that owns this hyperlink.
mozIRegistry
summary clients will
rely on nsrepository to create instances of a given class.
... there are some bootstrapping issues
related to using the service manager to access the moziregistry interface.
...it is intended to provide a (slightly) lighter-weight implementation that is enti
rely compatible with current libreg usage.
nsIAccessibleCoordinateType
constants constant value description coordtype_screen_
relative 0x00 the coordinates are
relative to the screen.
... coordtype_window_
relative 0x01 the coordinates are
relative to the window.
... coordtype_parent_
relative 0x02 the coordinates are
relative to the upper left corner of the bounding box of the immediate parent.
nsIDOMMouseScrollEvent
thod overview void initmousescrollevent(in domstring typearg, in boolean canbubblearg, in boolean cancelablearg, in nsidomabstractview viewarg, in long detailarg, in long screenxarg, in long screenyarg, in long clientxarg, in long clientyarg, in boolean ctrlkeyarg, in boolean altkeyarg, in boolean shiftkeyarg, in boolean metakeyarg, in unsigned short buttonarg, in nsidomeventtarget
relatedtargetarg, in long axis); attributes attribute type description axis long indicates which mouse wheel axis changed; this will be either horizontal_axis or vertical_axis.
...id initmousescrollevent( in domstring typearg, in boolean canbubblearg, in boolean cancelablearg, in nsidomabstractview viewarg, in long detailarg, in long screenxarg, in long screenyarg, in long clientxarg, in long clientyarg, in boolean ctrlkeyarg, in boolean altkeyarg, in boolean shiftkeyarg, in boolean metakeyarg, in unsigned short buttonarg, in nsidomeventtarget
relatedtargetarg, in long axis ); parameters typearg the type of event.
...
relatedtargetarg the event target
related to this event.
nsIDOMSimpleGestureEvent
method overview void initsimplegestureevent(in domstring typearg, in boolean canbubblearg, in boolean cancelablearg, in nsidomabstractview viewarg, in long detailarg, in long screenxarg, in long screenyarg, in long clientxarg, in long clientyarg, in boolean ctrlkeyarg, in boolean altkeyarg, in boolean shiftkeyarg, in boolean metakeyarg, in unsigned short buttonarg, in nsidomeventtarget
relatedtargetarg, in unsigned long directionarg, in double deltaarg); attributes attribute type description delta double the delta value indicating how far the gesture moved.
... note: on mac os x, the units used for magnification gestures by the underlying operating system api are not documented at this time; typical values appear to be in the range 0.0 to 100.0, but currently you can only
rely on the value being either positive or negative.
... initsimplegestureevent( in domstring typearg, in boolean canbubblearg, in boolean cancelablearg, in nsidomabstractview viewarg, in long detailarg, in long screenxarg, in long screenyarg, in long clientxarg, in long clientyarg, in boolean ctrlkeyarg, in boolean altkeyarg, in boolean shiftkeyarg, in boolean metakeyarg, in unsigned short buttonarg, in nsidomeventtarget
relatedtargetarg, in unsigned long directionarg, in double deltaarg ); parameters typearg canbubblearg cancelablearg viewarg detailarg screenxarg screenyarg clientxarg clientyarg ctrlkeyarg altkeyarg shiftkeyarg metakeyarg buttonarg
relatedtargetarg directionarg the value to assign to the direction attribute.
nsIPluginHost
void
reloadplugins(in boolean
reloadpages); void setisscriptableinstance(in nsiplugininstance ainstance, in boolean ascriptable); native code only!
...
reloadplugins() causes the plugins directory to be searched again for new plugin libraries.
... void
reloadplugins( in boolean
reloadpages ); parameters
reloadpages indicates whether currently visible pages should also be
reloaded.
nsIScriptableIO
file and stream guide: [ nsiscriptableio | accessing files | getting file information | reading from files | writing to files | moving, copying and deleting files | uploading and downloading files | working with directories ] important note: the pages from the file and stream guide use the io object (nsiscriptableio), which was not available in any
released version of the platform (pending some fixes).
...other documentation on files and i/o not using the unavailable nsiscriptableio apis: code snippets: file i/o, open and save dialogs, reading textual data, writing textual data, list of file-
related error codes.
... afilename the
relative path of the file to generate a reference for.
nsISeekableStream
inherits from: nsisupports last changed in gecko 1.7 method overview void seek(in long whence, in long long offset); void seteof(); long long tell(); constants constant value description ns_seek_set 0 specifies that the offset is
relative to the start of the stream.
... ns_seek_cur 1 specifies that the offset is
relative to the current position in the stream.
... ns_seek_end 2 specifies that the offset is
relative to the end of the stream.
nsISelectionPrivate
allowadjacent specifies whether the returned ranges are allowed to touch the input range rather than me
rely overlapping it.
... allowadjacent specifies whether the returned ranges are allowed to touch the input range rather than me
rely overlapping it.
... allowadjacent specifies whether the returned ranges are allowed to touch the input range rather than me
rely overlapping it.
nsITransactionManager
a value of zero means the transaction manager will execute each transaction, then immediately
release all references it has to the transaction without pushing it on the undo stack.
...the transaction's nsitransaction.
release() method will be called when the undo or redo stack is pruned or when the transaction manager is destroyed.
...the listener's nsitransactionlistener.
release() method is called.
Troubleshooting XPCOM components registration
if you are testing with a
release from mozilla.org, use the gecko sdk (and not your own compile of trunk firefox, etc.).
...(the -r switch from gnu ldd lists function
relocations; adjust as suitable for your version) trace shared library loading by setting the environment variable ld_debug=all while launching firefox (see `man ld.so` for details).
...the extension-
related places are often useful; please refer to the community section on the extensions page.
Xray vision
if chrome code
relies on such modified objects, it can be tricked into doing things it shouldn't.
...in cases like this you can waive xray protection, but then you can no longer
rely on any properties or functions being, or doing, what you expect.
... there are two main sorts of restrictions: first, the chrome code might expect to
rely on the prototype's integrity, so the object's prototype is protected: the xray has the standard object or array prototype, without any modifications that content may have done to that prototype.
LDAP Support
some notes about the
relationship: there is a many to one
relationship between ldap attributes and its address book counterpart.
... there is a one to one
relationship between a address book attribute and its ldap counterpart.
... these
relationships ensure: generality is maintained when mapping from ldap attributes to address book.
MailNews fakeserver
basic structure fakeserver is situated enti
rely under mailnews/test/fakeserver/.
... writing a new fakeserver since the number of protocols we use is very small, most people shouldn't have to write an enti
rely new daemon and handler setup by themselves.
...there are added in alphabetical order, which may help for purposes that
rely on article key orders.
Building a Thunderbird extension 3: install manifest
much of it may no longer be
relevant.
...it must be updated each time you
release a new version of your extension.
..."5.0.*" indicates that the extension works with thunderbird 5.0 and any subsequent 5.0.x
releases.
Zombie compartments
multiple compartments can share a zone, where a zone keeps track of things that can easily and secu
rely be shared between
related compartments such as string data and type information.
... open about:memory in another tab to confirm that the
relevant compartment is present.
... you could try waiting 20 minutes or so, then
reload about:memory again.
Standard OS Libraries
information on all
releases can be found on its official page x11 resources.
...the
release, string, etc.
... [ { "x" : cgfloat }, { "y" : cgfloat } ]); let cgeventgetlocation = coregraphics.declare("cgeventgetlocation", ctypes.default_abi, cgpoint, cgeventref); let cftyperef = ctypes.voidptr_t; let cf
release = corefoundation.declare("cf
release", ctypes.default_abi, ctypes.void_t, cgeventref); let event = cgeventcreate(null); let cursor = cgeventgetlocation(event); cf
release(event); components.utils.reporterror(cursor); coregraphics.close(); corefoundation.close(); resources f...
Using js-ctypes
ice", ctypes.default_abi, sint32, // return cftimeinterval, // timeout cfoptionflags, // flags cfurlref, // iconurl cfurlref, // soundurl cfurlref, // localizationurl cfstringref, // alertheader cfstringref, // alertmessage cfstringref // defaultbuttontitle ); /* https://developer.apple.com/library/mac/documentation/corefoundation/reference/cftyperef/#//apple_ref/c/func/cf
release * void cf
release ( * cftyperef cf * ); */ var cf
release = libcf.declare('cf
release', ctypes.default_abi, void, // return cftyperef // cf ); /* https://developer.apple.com/library/mac/documentation/corefoundation/reference/cfstringref/#//apple_ref/c/func/cfstringcreatewithcharacters * cfstringref cfstringcreatewithcharacters ( * cfallocatorref alloc, * const unichar *chars, *...
... cfindex numchars * ); */ var cfstringcreatewithcharacters = libcf.declare('cfstringcreatewithcharacters', ctypes.default_abi, cfstringref, // return cfallocatorref, // alloc unichar.ptr, // *chars cfindex // numchars ); // helper functions function makecfstr(jsstr) { // js str is just a string // returns a cfstr that must be
released with cf
release when done return cfstringcreatewithcharacters(null, jsstr, jsstr.length); } // main var mycfstrs = { head: makecfstr('core foundation says...'), body: makecfstr('we just called the equivalent of the "standardalert carbon function" for 64bit osx from javascript!') }; var rez = cfusernotificationdisplaynotice(0, kcfusernotificationcautionalertlevel, null, null, null, mycfstrs.head, mycfstrs.body, null); console.info('rez:', rez...
...:('); } for (var cfstr in mycfstrs) { if (mycfstrs.hasownproperty(cfstr)) { var rez_cf
release = cf
release(mycfstrs[cfstr]); // returns void } } libcf.close(); calling libc routines on linux/posix this example demonstrates how to use ctypes to call a libc function on linux.
Scripting plugins - Plugins
« previousnext » xxx: dummy p element this document describes the new cross-browser npapi extensions, commonly called npruntime, that have been developed by a group of browser and plugin vendors, including the mozilla foundation, adobe, apple, opera, and sun microsystems (see press
release).
... and as always when working with reference counted npobjects, the caller is responsible for calling npn_
releaseobject on the npobject to drop the reference.
...ementnpobject = 16 how to call plugin native methods the following html code will do the job: <embed type="application/plugin-mimetype"> <script> var embed = document.embeds[0]; embed.nativemethod(); alert(embed.nativeproperty); embed.nativeproperty.anothernativemethod(); </script> the api extensions the api extensions are based on four new structs: npstring npvariant npn_
releasevariantvalue npn_getstringidentifier npn_getstringidentifiers npn_getintidentifier npn_identifierisstring npn_utf8fromidentifier npn_intfromidentifier npobject npn_construct (since firefox 3.0b1) npn_createobject npn_retainobject npn_
releaseobject npn_invoke npn_invokedefault npn_enumerate (since mozilla 1.9a1) npn_evaluate npn_getproperty ...
Gecko Plugin API Reference - Plugins
he url and displaying the page posting urls posting data to an http server uploading files to an ftp server sending mail memory allocating and freeing memory mac os flushing memory (mac os only) version, ui, and status information displaying a status line message getting agent information getting the current version finding out if a feature exists
reloading a plug-in plug-in side plug-in api this chapter describes methods in the plug-in api that are available from the plug-in object.
... npn_
reloadplugins
reloads all plug-ins in the plugins directory.
... accessing browser objects from a plugin how to call plugin native methods the api extensions npstring npvariant npn_
releasevariantvalue npn_getstringidentifier npn_getstringidentifiers npn_getintidentifier npn_identifierisstring npn_utf8fromidentifier npn_intfromidentifier npobject npn_createobject npn_retainobject npn_
releaseobject npn_invoke npn_invokedefault npn_evaluate npn_getproperty npn_setproperty npn_removeproperty...
Debugger.Script - Firefox Developer Tools
please note at the time of this writing, support for webassembly is very p
reliminary.
... getalloffsets() if the instance refers to a jsscript, return an arrayl describing the
relationship between bytecode instruction offsets and source code positions in this script.l is sparse, and indexed by source line number.
... getallcolumnoffsets(): if the instance refers to a jsscript, return an array describing the
relationship between bytecode instruction offsets and source code positions in this script.
Debugger - Firefox Developer Tools
the promise’s state, fulfillment or rejection value, and the allocation and resolution stacks can be obtained using the promise-
related accessor properties of the debugger.object instance promise.
...whether such sources appear can be affected by the garbage collector’s behavior, so this function’s result is not enti
rely deterministic.
...whether such scripts appear can be affected by the garbage collector’s behavior, so this function’s behavior is not enti
rely deterministic.
Dominators view - Firefox Developer Tools
you can also see that these objects have a
relatively tiny "shallow size", so almost all of the retained size is in the objects that they dominate.
...each monster has a
relatively small shallow size of 160 bytes.
...see the
relevant section of the dominators concepts article.
CSS Grid Inspector: Examine grid layouts - Firefox Developer Tools
clicking the icon toggles the display of a grid overlay on the page, which appears over the element, laid out like a grid to show the position of its grid lines and tracks: the overlay is still shown when you select other elements, so you can edit
related css properties and see how the grid is affected.
... display area names: turn area names on and off, in the case of grids with named grid areas (on by default, where
relevant).
... a target icon that when clicked immediately selects the html element that this grid entry
relates to, inside the html pane.
Waterfall - Firefox Developer Tools
the markers, and their colors, are the same in the waterfall tool as in the waterfall overview, making is easy to cor
relate from one to the other.
... garbage collection red markers in the waterfall represent garbage collection (gc) events, in which spidermonkey (the javascript engine in firefox) walks the heap looking for memory that's no longer reachable and subsequently
releasing it.
... gc is
relevant to performance because while it's running the javascript engine must be paused, so your program is suspended and will be completely unresponsive.
View Source - Firefox Developer Tools
errors
related to the end-of-file aren't reported.
... tree builder errors
relating to text (as opposed to tags, comments, or doctypes) aren't reported.
... parse errors
related to xmlns attributes aren't reported.
about:debugging (before Firefox 68) - Firefox Developer Tools
there's a better way to handle the other cases: click the "
reload" button next to the "debug" button.
... this does what it says:
reloading any persistent scripts, such as background scripts parsing the manifest.json file again, so changes to permissions, content_scripts, browser_action or any other keys will take effect.
... note that in firefox 49 onwards, the
reload button is only enabled for temporary add-ons.
AbstractRange - Web APIs
<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/abstractrange" target="_top"><rect x="1" y="1" width="130" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="66" y...
... second, in order to support the mutability of the dom tree as much as possible, you need a way to represent positions
relative to nodes in the tree, rather than simply global positions within the entire document.
... third, using node-
relative positions to define the start and end positions will generally be easier to make perform well.
AudioContext.close() - Web APIs
the close() method of the audiocontext interface closes the audio context,
releasing any system audio resources that it uses.
... this function does not automatically
release all audiocontext-created objects, unless other references have been
released as well; however, it will forcibly
release any system audio resources that might prevent additional audiocontexts from being created and used, suspend the progression of audio time in the audio context, and stop processing audio data.
... the returned promise resolves when all audiocontext-creation-blocking resources have been
released.
AudioContext - Web APIs
<div id="interfacediagram" style="display: inline-block; position:
relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30"...
... audiocontext.close() closes the audio context,
releasing any system audio resources that it uses.
... audiocontext.getoutputtimestamp() returns a new audiotimestamp object containing two audio timestamp values
relating to the current audio context.
BluetoothCharacteristicProperties - Web APIs
reliablewriteread only returns a boolean that is true if
reliable writes to the characteristic is permitted.
... writableauxiliariesread only returns a boolean that is true if
reliable writes to the characteristic descriptor is permitted.
... nochrome android full support 56firefox android no support noopera android full support yessafari ios no support nosamsung internet android full support 6.0
reliablewrite experimentalchrome full support 56notes full support 56notes notes chromeos and macos only.
Using the CSS Painting API - Web APIs
we can use the css background-size and background-position properties to re-size or
relocate this background image, but this is the default size and placement of the yellow box we created in our paint worklet.
...it would be better if the background image was
relative to the size of the element — we can use the element's paintsize property to ensure the background image is proportional to the size of the element's box model size.
... we've changed the dimensions and positioning of our rectangle to be
relative to the size of the element box rather than absolute values.
CanvasRenderingContext2D.arcTo() - Web APIs
note: be aware that you may get unexpected results when using a
relatively large radius: the arc's connecting line will go in whatever direction it must to meet the specified radius.
... x: 90, y: 130 } const p2 = { x: 20, y: 20 } const labelpoint = function (p) { const offset = 15; ctx.filltext('(' + p.x + ',' + p.y + ')', p.x + offset, p.y + offset); } ctx.beginpath(); ctx.moveto(p0.x, p0.y); ctx.arcto(p1.x, p1.y, p2.x, p2.y, 50); ctx.lineto(p2.x, p2.y); labelpoint(p0); labelpoint(p1); labelpoint(p2); ctx.stroke(); result result of a large radius if you use a
relatively large radius, the arc may appear in a place you didn't expect.
...this happens because the radius is too large for the arc to fit enti
rely below the starting point.
Advanced animations - Web APIs
the click event
releases the ball and lets it bounce again.
...(!running) { clear(); ball.x = e.clientx; ball.y = e.clienty; ball.draw(); } }); canvas.addeventlistener('click', function(e) { if (!running) { raf = window.requestanimationframe(draw); running = true; } }); canvas.addeventlistener('mouseout', function(e) { window.cancelanimationframe(raf); running = false; }); ball.draw(); move the ball using your mouse and
release it with a click.
...check out our game development area for more gaming
related articles.
Document: lostpointercapture event - Web APIs
the lostpointercapture event is fired when a captured pointer is
released.
...when the user subsequently
releases the pointer, the lostpointercapture event will be fired.
... const para = document.queryselector('p'); document.addeventlistener('lostpointercapture', () => { console.log('i\'ve been
released!') }); para.addeventlistener('pointerdown', (event) => { para.setpointercapture(event.pointerid); }); the same example, but using the onlostpointercapture event handler property: const para = document.queryselector('p'); document.onlostpointercapture = () => { console.log('i\'ve been
released!') }; para.addeventlistener('pointerdown', (event) => { para.setpointercapture(event.pointerid); }); specifications specification status pointer events obsolete ...
Element: keyup event - Web APIs
the keyup event is fired when a key is
released.
...to ignore all keyup events that are part of composition, do something like this (229 is a special value set for a keycode
relating to an event that has been processed by an ime): eventtarget.addeventlistener("keyup", event => { if (event.iscomposing || event.keycode === 229) { return; } // do something }); examples addeventlistener keyup example this example logs the keyboardevent.code value whenever you
release a key inside the <input> element.
... <input placeholder="click here, then press and
release a key." size="40"> <p id="log"></p> const input = document.queryselector('input'); const log = document.getelementbyid('log'); input.addeventlistener('keyup', logkey); function logkey(e) { log.textcontent += ` ${e.code}`; } onkeyup equivalent input.onkeyup = logkey; specifications specification status ui events working draft ...
FetchEvent() - Web APIs
is
reload read only a boolean that signifies whether the page was
reloaded or not when the event was dispatched.
...typically, pressing the refresh button in a browser is a
reload, while clicking a link and pressing the back button is not.
... p
reloadresponse read only a promise which returns a previously-loaded response to the client.
FetchEvent.respondWith() - Web APIs
this means, for example, if a service worker intercepts a stylesheet or worker script, then the provided response.url will be used to resolve any
relative @import or importscripts() subresource loads (bug 1222008).
... if a worker script is intercepted, then the final url is used to set self.location and used as the base url for
relative urls in the worker script.
... if a stylesheet is intercepted, then the final url is used as the base url for resolving
relative @import loads.
Using Fetch - Web APIs
fetch also provides a single logical place to define other http-
related concepts such as cors and extensions to http.
... mode: 'cors', // no-cors, *cors, same-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, st...
...these are also only
relevant to service workers.
Using files from web applications - Web APIs
each of these must be
released.
... while they are
released automatically when the document is unloaded, if your page uses them dynamically you should
release them explicitly by calling url.revokeobjecturl(): url.revokeobjecturl(objecturl); example: using object urls to display images this example uses object urls to display image thumbnails.
... set up the image's load event handler to
release the object url since it's no longer needed once the image has been loaded.
FocusEvent - Web APIs
the focusevent interface represents focus-
related events, including focus, blur, focusin, and focusout.
... <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/event" target="_top"><rect x="1" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="38.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">event</text></a><polyline points="76,25 86,20 86,30 76,25" stroke="#d4dde4" fill="none"/><line x1="86" y1="25" x2="116" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/uievent" target="_to...
... focusevent.
relatedtarget is an eventtarget representing a secondary target for this event.
GlobalEventHandlers.onmouseup - Web APIs
the mouseup event fires when the user
releases the mouse button.
... example in this example, a piece of "toast" hides when you click down with the mouse, and reappears when you
release.
...radius: 10px 10px 0 0; } .toast { position: absolute; left: 50%; top: 50%; z-index: -1; width: 100px; height: 50px; padding: 10px; background: #ed9; border-radius: 10px 10px 0 0; transform: translate(-50%, -90px); transition: transform .3s; } .depressed { transform: translate(-50%, -50%); } javascript function depress() { toast.classlist.add('depressed'); } function
release() { toast.classlist.remove('depressed'); } const toaster = document.queryselector('.toaster'); const toast = document.queryselector('.toast'); toaster.onmousedown = depress; document.onmouseup =
release; result specification specification status comment html living standardthe definition of 'onmouseup' in that specification.
HTMLElement: lostpointercapture event - Web APIs
the lostpointercapture event is fired when a captured pointer is
released.
...when the user subsequently
releases the pointer, the lostpointercapture event will be fired.
... const para = document.queryselector('p'); para.addeventlistener('lostpointercapture', () => { console.log('i\'ve been
released!') }); para.addeventlistener('pointerdown', (event) => { para.setpointercapture(event.pointerid); }); the same example, but using the onlostpointercapture event handler property: const para = document.queryselector('p'); para.onlostpointercapture = () => { console.log('i\'ve been
released!') }; para.addeventlistener('pointerdown', (event) => { para.setpointercapture(event.pointerid); }); specifications specification status pointer events obsolete ...
HTMLImageElement.align - Web APIs
the obsolete align property of the htmlimageelement interface is a string which indicates how to position the image
relative to its container.
... baseline alignment these three values specify the alignment of the element
relative to the text baseline.
... floating images horizontally the left and right properties don't affect the baseline-
relative alignment.
HTMLImageElement.sizes - Web APIs
because a source size descriptor is used to specify the width to use for the image during layout of the page, the media condition is typically (but not necessarily) based enti
rely on width information.
...it may be specified using font-
relative units (such as em or ex), absolute units (such as px or cm), or the vw unit, which lets you specify the width as a percentage of the viewport width (1vw being 1% of the viewport width).
...al, helvetica, sans-serif; } article img { display: block; max-width: 100%; border: 1px solid #888; box-shadow: 0 0.5em 0.3em #888; margin-bottom: 1.25em; } javascript the javascript code handles the two buttons that let you toggle the third width option between 40em and 50em; this is done by handling the click event, using the javascript string object method replace() to replace the
relevant portion of the sizes string.
HTMLImageElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position:
relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25"...
... htmlimageelement.x read only an integer indicating the horizontal offset of the left border edge of the image's css layout box
relative to the origin of the <html> element's containing block.
... htmlimageelement.y read only the integer vertical offset of the top border edge of the image's css layout box
relative to the origin of the <html> element's containing block.
HTMLInputElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position:
relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,3...
...ment" target="_top"><rect x="331" y="65" width="160" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="411" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlinputelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties properties
related to the parent form form read only htmlformelement object: returns a reference to the parent <form> element.
...the type property must be enti
rely given in lowercase characters.
HTMLModElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position:
relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"...
... specifications specification status comment html living standardthe definition of 'htmlancho
relement' in that specification.
... html5the definition of 'htmlancho
relement' in that specification.
History.go() - Web APIs
syntax history.go([delta]) parameters delta optional the position in the history to which you want to move,
relative to the current page.
...if no value is passed or if delta equals 0, it has the same result as calling location.
reload().
... examples to move back one page (the equivalent of calling back()): history.go(-1) to move forward a page, just like calling forward(): history.go(1) to move forward two pages: history.go(2); to move backwards by two pages: history.go(-2); and, finally either of the following statements will
reload the current page: history.go(); history.go(0); specifications specification status comment html living standardthe definition of 'history.go()' in that specification.
MediaKeyMessageEvent - Web APIs
the mediakeymessageevent interface of the encryptedmediaextensions api contains the content and
related data when the content decryption module generates a message for the session.
... <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/event" target="_top"><rect x="1" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="38.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">event</text></a><polyline points="76,25 86,20 86,30 76,25" stroke="#d4dde4" fill="none"/><line x1="86" y1="25" x2="116" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/mediakeymessageevent...
...may be one of license-request, license-renewal, license-
release, or individualization-request.
MouseEvent.pageX - Web APIs
the pagex read-only property of the mouseevent interface returns the x (horizontal) coordinate (in pixels) at which the mouse was clicked,
relative to the left edge of the entire document.
... let's take a look at a simple example that shows you the mouse's position
relative to the page's origin.
...those will be updated each time an event occurs to contain the latest mouse coordinates
relative to the page.
NamedNodeMap - Web APIs
namednodemap.getnameditemns() returns a attr identified by a namespace and
related local name.
... namednodemap.setnameditemns() replaces, or adds, the attr identified in the map by the given namespace and
related local name.
... namednodemap.removenameditemns() removes the attr identified by the given namespace and
related local name.
Navigator.sendBeacon() - Web APIs
can be
relative or absolute.
...this solves all of the problems with submission of analytics data: the data is sent
reliably it's sent asynchronously it doesn't impact the loading of the next page in addition, the code is simpler to write than any of the older techniques!
... window.addeventlistener("unload", function logdata() { navigator.sendbeacon("/log", analyticsdata); }); the beacon sends an http request via the post method, with all
relevant cookies available when called.
NavigatorID - Web APIs
the navigatorid interface contains methods and properties
related to the identity of the browser.
...do not
rely on this property to return a useful value.
...do not
rely on this property to return a useful value.
Payment Request API - Web APIs
payment request concepts and usage many problems
related to online shopping-cart abandonment can be traced to checkout forms, which can be difficult and time consuming to fill out and often require multiple steps to complete.
... payererrors a dictionary containing strings providing descriptive explanations of any errors in
related to paymentresponse's email, phone, and name attributes.
...
related dictionaries for the basic card specification basiccardchangedetails an object providing redacted address information that is provided as the methoddetails on the paymentmethodchange event sent to the paymentrequest when the user changes payment information.
PointerEvent - Web APIs
pointerevent.tangentialpressure read only the normalized tangential pressure of the pointer input (also known as bar
rel pressure or cylinder stress) in the range -1 to 1, where 0 is the neutral position of the control.
... pointercancel a browser fires this event if it concludes the pointer will no longer be able to generate events (for example the
related device is deactived).
... lostpointercapture this event is fired after pointer capture is
released for a pointer.
PushEvent - Web APIs
full support 17firefox full support 44notes full support 44notes notes extended support
releases (esr) before firefox 78 esr do not support service workers and the push api.ie no support noopera full support 37safari no support nowebview android no support nochrome android full support ...
... full support 17firefox full support 44notes full support 44notes notes extended support
releases (esr) before firefox 78 esr do not support service workers and the push api.ie no support noopera full support 37safari no support nowebview android no support nochrome android full support ...
... full support 17firefox full support 44notes full support 44notes notes extended support
releases (esr) before firefox 78 esr do not support service workers and the push api.ie no support noopera full support 44safari no support nowebview android no support nochrome android full support ...
RTCDtlsTransport - Web APIs
<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/rtcdtlstransport" target="_top"><rect x="1" y="1" width="160" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="81...
...to be able to negotiate with such endpoints (or to exclude them enti
rely), the rtcconfiguration property bundlepolicy may be provided when creating the connection.
... you can, in turn, identify the rtcdtlstransport used to secu
rely encapsulate the data channels' sctp communications by looking at the rtcsctptransport object's transport property.
RTCIceCandidatePairStats.transportId - Web APIs
the transportid property uniquely identifies the rtcicetransport that was inspected to obtain the transport-
related statistics contained in the rtcicecandidatepairstats object.
... syntax transportid = rtcicecandidatepairstats.transportid; value a domstring which uniquely identifies the rtcicetransport object from which the transport-
related data was obtained for the statistics contained in this rtcicecandidatepairstats object.
... the transport-
related statistics come from the rtctransportstats dictionary's properties.
RTCPeerConnection.createOffer() - Web APIs
voiceactivitydetection optional some codecs and hardware are able to detect when audio begins and ends by watching for "silence" (or
relatively low sound levels) to occur.
... note: keep in mind that this is part of the signaling process, the transport layer for which is an implementation detail that's enti
rely up to you.
...the contents of the object being passed to the sendtoserver() function, along with everything else in the promise fulfillment handler, depend enti
rely on your design.
RTCPeerConnection - Web APIs
<div id="interfacediagram" style="display: inline-block; position:
relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d...
...this is a less stringent test than "failed" and may trigger intermittently and resolve just as spontaneously on less
reliable networks, or during temporary disconnections.
... "
relay" only ice candidates whose ip addresses are being
relayed, such as those being passed through a turn server, will be considered.
Request.cache - Web APIs
reload — the browser fetches the resource from the remote server without first looking in the cache, but then will update the cache with the downloaded resource.
...fetch("some.json", {cache: "
reload"}) .then(function(response) { /* consume the response */ }); // download a resource with cache busting when dealing with a // properly configured server that will send the correct etag // and date headers and properly handle if-modified-since and // if-none-match request headers, therefore we can
rely on the // validation to guarantee a fresh response.
...new date(date).gettime() : 0 if (dt < (date.now() - 86400000)) { // if older than 24 hours controller.abort() controller = new abortcontroller(); return fetch("some.json", {cache: "
reload", mode: "same-origin", signal: controller.signal}) } // other possible conditions if (dt < (date.now() - 300000)) // if it's older than 5 minutes fetch("some.json", {cache: "no-cache", mode: "same-origin"}) // no cancellation or return value.
SVGAnimationElement - Web APIs
the svganimationelement interface is the base interface for all of the animation element interfaces: svganimateelement, svgsetelement, svganimatecolo
relement, svganimatemotionelement and svganimatetransformelement.
... <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 x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/nod...
... svganimationelement.getcurrenttime() returns a float representing the current time in seconds
relative to time zero for the given time container.
SVGTextContentElement - Web APIs
it is inherited by various text-
related interfaces, such as svgtextelement, svgtspanelement, svgtrefelement, svgaltglyphelement and svgtextpathelement.
... <div id="interfacediagram" style="display: inline-block; position:
relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"...
...because the
relationship between characters and glyphs is not one-to-one, only the first character of the
relevant typographic character is returned svgtextcontentelement.selectsubstring() selects text within the element.
Storage Access API - Web APIs
in the case of breakage, site owners have often encouraged users to add their site as an exception or to disable the policy enti
rely.
... as a consequence, users who wish to continue to interact with embedded content are forced to greatly
relax their blocking policy for resources loaded from all embedded origins and possibly across all websites.
...from the user’s perspective, they only have a third-party
relationship with that origin.
SubtleCrypto.deriveKey() - Web APIs
it's not designed to derive keys from
relatively low-entropy inputs such as passwords.
...it's designed to derive key material from some
relatively low-entropy input, such as a password.
...ubtle.derivekey( { name: "ecdh", public: publickey }, privatekey, { name: "aes-gcm", length: 256 }, false, ["encrypt", "decrypt"] ); } async function agreesharedsecretkey() { // generate 2 ecdh key pairs: one for alice and one for bob // in more normal usage, they would generate their key pairs // separately and exchange public keys secu
rely let aliceskeypair = await window.crypto.subtle.generatekey( { name: "ecdh", namedcurve: "p-384" }, false, ["derivekey"] ); let bobskeypair = await window.crypto.subtle.generatekey( { name: "ecdh", namedcurve: "p-384" }, false, ["derivekey"] ); // alice then generates a secret key using her private key and bob's public key.
TouchEvent - Web APIs
<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/event" target="_top"><rect x="1" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="38.5" y="30" font...
...initial value: 1.0 touch event types there are several types of event that can be fired to indicate that touch-
related changes have occurred.
...you must not
rely on a specific granularity of these events.
Touch events - Web APIs
the touch events interfaces are
relatively low-level apis that can be used to support application-specific multi-touch interactions such as a two-finger gesture.
...the touch interface, which represents a single touchpoint, includes information such as the position of the touch point
relative to the browser viewport.
...this identifier is an opaque number, but we can at least
rely on it differing between the currently-active touches.
TreeWalker - Web APIs
non-matching nodes are skipped, but their children may be included, if
relevant.
... treewalker.filter read only returns a nodefilter used to select the
relevant nodes.
...(whether or not the node is visible on the screen is ir
relevant.) treewalker.parentnode() moves the current node to the first visible ancestor node in the document order, and returns the found node.
URL - Web APIs
you normally create a new url object by specifying the url as a string when calling its constructor, or by providing a
relative url and a base url.
... constructor new url() creates and returns a url object referencing the url specified using an absolute url string, or a
relative url string and a base url string.
... usage notes the constructor takes a url parameter, and an optional base parameter to use as a base if the url parameter is a
relative url: const url = new url('../cats', 'http://www.example.com/dogs'); console.log(url.hostname); // "www.example.com" console.log(url.pathname); // "/cats" url properties can be set to construct the url: url.hash = 'tabby'; console.log(url.href); // "http://www.example.com/cats#tabby" urls are encoded according to the rules found in rfc 3986.
USBEndpoint - Web APIs
usbendpoint.type returns the type of this endpoint, one of: "bulk" - provides
reliable data transfer for large payloads.
... "interrupt" - provides
reliable data transfer for small payloads.
... "isochronous" - provides un
reliable data transfer for payloads that must be delivered periodically.
VisualViewport - Web APIs
visualviewport.pageleft read only returns the x coordinate of the visual viewport
relative to the initial containing block origin of the top edge in css pixels.
... visualviewport.pagetop read only returns the y coordinate of the visual viewport
relative to the initial containing block origin of the top edge in css pixels.
... events listen to these events using addeventlistener() or by assigning an event listener to the
relevant oneventname property of this interface.
Introduction to the Real-time Transport Protocol (RTP) - Web APIs
since rtp is simply a data transport, it is augmented by the closely-
related rtp control protocol (rtcp), which is defined in rfc 3550, section 6.
... the very fact that rtcp is defined in the same rfc as rtp is a clue as to just how closely-inter
related these two protocols are.
...these are returned by the rtcpeerconnection.gettransceivers() method, and each mid and transceiver share a one-to-one
relationship, with the mid being unique for each rtcpeerconnection.
Using bounded reference spaces - Web APIs
however, it's enti
rely possible that the device will simply decline to support bounded spaces at all, so you should be prepared to fall back to some other type of reference space.
... <<<--- example --->>> creating a bounded reference space before creating a project that
relies on bounded reference spaces, it's important to keep in mind that not all xr devices are capable of creating them.
... it's important, however, to keep in mind that while a local-floor space provides a floor-
relative space and is always available for immersive sessions, it also has significant differences from bounded-floor, so you need to be prepared to handle these differences.
Web Animations API Concepts - Web APIs
all the animation's playback
relies on this timeline: seeking the animation moves the animation’s position along the timeline; slowing down or speeding up the playback rate condenses or expands its spread across the timeline; repeating the animation lines up additional iterations of it along the timeline.
...in the future we may see timeline objects that correspond to the length of the page, perhaps a scrolltimeline, or other things enti
rely.
...(see animating like you just don’t care with element.animate.) in some instances, it may negate the need for a fully fledged library enti
rely in the same way vanilla javascript can be used without jquery for many purposes.
WorkerNavigator - Web APIs
do not
rely on this property to return the correct value.
...do not
rely on this property to return the correct value.
...do not
rely on this property to return the correct value.
Using XMLHttpRequest - Web APIs
note: starting in gecko 9.0, progress events can now be
relied upon to come in for every chunk of data received, including the last chunk in cases in which the last packet is received and the connection closed before the progress event is fired.
...this lets you now
reliably monitor progress by only watching the "progress" event.
...or (var nidx = 0; nidx < nbytes; nidx++) { ui8data[nidx] = sdata.charcodeat(nidx) & 0xff; } /* send as arraybufferview...: */ this.send(ui8data); /* ...or as arraybuffer (legacy)...: this.send(ui8data.buffer); */ }; } /*\ |*| |*| :: ajax form submit framework :: |*| |*| https://developer.mozilla.org/docs/dom/xmlhttprequest/using_xmlhttprequest |*| |*| this framework is
released under the gnu public license, version 3 or later.
XRReferenceSpace.getOffsetReferenceSpace() - Web APIs
the xrreferencespace interface's getoffsetreferencespace() method returns a new reference space object which describes the
relative difference in position between the object on which the method is called and a given point in 3d space.
... in other words, when you have an object in 3d space and need to position another object
relative to that one, you can call getoffsetreferencespace(), passing into it the position and orientation you want the second object to have
relative to the position and orientation of the object on which you call getoffsetreferencespace().
... then, when drawing the scene, you can use the offset reference space to not only position objects
relative to one another, but to apply the needed transforms to render objects properly based upon the viewer's position.
XRReferenceSpace: reset event - Web APIs
note: a reset event will not occur if the reference space is able to regain tracking of its previous origin, since that means the origin has not been forced to be
relocated.
... this event is only fired when the origin has to be
relocated to recover from the tracking loss.
...first, you can use the addeventlistener() method: viewerrefspace.addeventlistener("reset", (event) => { /* perform reset
related tasks */ }); the second option is to set the xrreferencespace object's onreset event handler property: viewerrefspace.onreset = (event) => { /* perform reset
related tasks */ }; specifications specification status comment webxr device apithe definition of 'reset event' in that specification.
XRReferenceSpace - Web APIs
reset the reset event is sent to an xrreferencespace object when the browser detects a discontinuity has occurred wherein the tracked object's origin
relative to the user's environment or location.
... for devices with six degrees of freedom (6dof) tracking, the local reference space tries to keep the origin stable
relative to the environment.
... let offsettransform = new xrrigidtransform({x: 2, y: 0, z: 1}, {x: 0, y: 1, z: 0, w: 1}); xrreferencespace = xrreferencespace.getoffsetreferencespace(offsettransform); this replaces the xrreferencespace with a new one whose origin and orientation are adjusted to place the new origin at (2, 0, 1)
relative to the current origin and rotated given a unit quaternion that orients the space to put the viewer facing straight up
relative to the previous world orientation.
XRSession - Web APIs
event description end sent to the xrsession object after the webxr session has ended and all hardware-
related functions have completed.
...for example: for button or trigger actions, this means the button has been
released; for spoken commands, it means the user has finished speaking.
...this indicates that the device being squeezed has been
released, and may represent dropping a grabbed object, for example.
XRView.transform - Web APIs
the read-only transform property of the xrview interface is an xrrigidtransform object which provides the position and orientation of the viewpoint
relative to the xrreferencespace specified when the xrframe.getviewerpose() method was called to obtain the view object.
... examples for each view making up the presented scene, the view's transform represents the position and orientation of the viewer or camera
relative to the reference space's origin.
...the resulting model view matrix will apply all the transforms needed to move and rotate the object based on the
relative positions of the object and the camera.
Using the aria-labelledby attribute - Accessibility
description the aria-labelledby attribute establishes
relationships between objects and their label(s), and its value should be one or more element ids, which refer to elements that have the text needed for labeling.
...contents </div> example 5: inline definition in the example below, the definition of a term that is described in the natural flow of the narrative is associated with the term itself using the aria-labelledby attribute: <p>the doctor explained it had been a <dfn id="placebo">placebo</dfn>, or <span role="definition" aria-labelledby="placebo"> an inert preparation prescribed more for the mental
relief of the patient than for its actual effect on a disorder.</span> </p> example 6: definition lists in the example below, the definitions in a formal definition list are associated with the terms they define using the aria-labelledby attribute: <dl> <dt id="anathema">anathema</dt> <dd role="definition" aria-labelledby="anathema">a ban or curse solemnly pronounced by ecclesiastical aut...
...</div> notes the most common accessibility api mapping for a label is the accessible name property used by aria roles all elements of the base markup
related aria techniques using the aria-label attribute using the aria-describedby attribute compatibility tbd: add support information for common ua and at product combinations additional resources wai-aria specification for aria-labelledby ...
Using the group role - Accessibility
a group should be used to form a logical collection of items with
related functionality, such as children in a tree widget forming a collection of siblings in a hierarchy, or a collection of items having the same container in a directory.
...enuitem">custom folder 2</li> <li role="menuitem">custom folder 3</li> </ul> <ul role="group"> <li role="menuitem">new folder</li> </ul> </div> working examples: file directory treeview example using computed properties navigation treeview example using declared properties notes group members that are outside of the dom subtree of the group need to have explicit
relationships assigned to them in order to participate in the group.
... aria attributes used group
related aria techniques region role compatibility tbd: add support information for common ua and at product combinations additional resources aria authoring practices – accessible name guidance by role – group ...
ARIA: tab role - Accessibility
this combination identifies to assistive technology that the element is part of a group of
related elements.
...for the first panel</p> </div> <div id="panel-2" role="tabpanel" tabindex="0" aria-labelledby="tab-2" hidden> <p>content for the second panel</p> </div> <div id="panel-3" role="tabpanel" tabindex="0" aria-labelledby="tab-3" hidden> <p>content for the third panel</p> </div> </div> .tabs { padding: 1em; } [role="tablist"] { margin-bottom: -1px; } [role="tab"] { position:
relative; z-index: 1; background: white; border-radius: 5px 5px 0 0; border: 1px solid grey; border-bottom: 0; padding: 0.2em; } [role="tab"][aria-selected="true"] { z-index: 3; } [role="tabpanel"] { position:
relative; padding: 0 0.5em 0.5em 0.7em; border: 1px solid grey; border-radius: 0 0 5px 5px; background: white; z-index: 2; } [role="tabpanel"]:focus { border-colo...
... working draft precedence order what are the
related properties, and in what order will this attribute or property be read (which property will take precendence over this one, and which property will be overwritten.
Web applications and ARIA FAQ - Accessibility
aria is a
relatively new specification, but support for it is growing.
... how does html5
relate to aria?
...for more information, steve faulkner has written a good overview of the
relationship between html5 and aria.
Accessibility Information for Web Authors - Accessibility
automated checking & repair cynthia says™ from hisoftware® company "cynthia says™" is a free online webpage accessibility validation service that is designed to identify errors in webpage
related to section 508 standards and/or the wcag guidelines.
...the output data report is displayed in a clear and well structured table where each and all checkpoints are identified and described (along with an helpful clickable link to the
related reference guideline) into logical groups and according to measurable results: passed, warning, failed for automated verification, warning for manual verification, not selected, not available, not
related, etc.
... wave 4.0 beta (web accessibility versatile evaluator) from webaim and sponsored by temple university institute on disabilities wave 4.0 beta is another powerful, free online webpage accessibility validation service that identifies accessibility errors and reports accessibility warnings about webpage
related to section 508 standards and/or the wcag guidelines.
Web accessibility for seizures and physical reactions - Accessibility
in its article, "a revised definition of epilepsy" the epilepsy foundation notes that…"a seizure is an event and epilepsy is the disease involving recurrent unprovoked seizures." according to the epilepsy foundation's page "how serious are seizures?" , "sudden unexpected death in epilepsy (sudep) is likely the most common disease-
related cause of death in with epilepsy.
...zer iso iec 61966-2-2:2003(en) multimedia systems and equipment — colour measurement and management — part 2-2: colour management — extended rgb colour space — scrgb photosensitive epilepsy analysis tool along with the harding tool, is generaly recognized to be one of the two "gold standards" for analyzing flashes trace research and development center using peat to create seizu
reless web animations w3c css color module level 3 personalization semantics explainer 1.0.
... understanding wcag 2.0 (older, but contains some explanations of references made in the wcag 2.1 criteria) three flashes or below threshold understanding success criterion 2.3.1 understanding wcag 2.1 understanding success criteria 1.4.3: contrast (minimum) web accessibility initiative (wai) web animations model w3c working draft web content accessibility guidelines (wcag) 2.0 definition of
relative luminance web content accessibility guidelines (wcag) 2.1 contributers: heartfelt thanks to teal; wayne dick of the low vision task force of the w3c; tom jewett and eric eggert from knowbility; jim allan of the diagram center; and dr.
Understandable - Accessibility
however, the title contents are not accessible via keyboard, nor are they
reliably read out by screenreaders.
... success criteria how to conform to the criteria practical resource 3.3.1 error identification (a) when a user is filling out a form or choosing between options, any error that is detected should be clearly reported to the user, along with the form control that the error
relates to.
...client-side validation is too easy to turn off or otherwise get around, so it can't be
relied on alone.
:has() - CSS: Cascading Style Sheets
the :has() css pseudo-class represents an element if any of the selectors passed as parameters (
relative to the :scope of the given element) match at least one element.
... /* selects any <a>, as long as it has an <img> element directly inside it */ /* note that this is not supported in any browser yet */ let test = document.queryselector('a:has(> img)'); syntax :has( <
relative-selector-list> )where <
relative-selector-list> = <
relative-selector>#where <
relative-selector> = <combinator>?
...'='<attr-modifier> = i | s description the :has() pseudo-class takes a
relative selector list as an argument.
src - CSS: Cascading Style Sheets
syntax /* <url> values */ src: url(https://somewebsite.com/path/to/font.woff); /* absolute url */ src: url(path/to/font.woff); /*
relative url */ src: url(path/to/font.woff) format("woff"); /* explicit format */ src: url('path/to/font.woff'); /* quoted url */ src: url(path/to/svgfont.svg#example); /* fragment identifying font */ /* <font-face-name> values */ src: local(font); /* unquoted name */ src: local(some font); /* name containing space */ src: local("font"); /* quoted name */ /* multiple items */ src: local(font), url(path/to/font.svg) format("svg"), url(path/...
... as with other urls in css, the url may be
relative, in which case it is resolved
relative to the location of the style sheet containing the @font-face rule.
... formal definition
related at-rule@font-faceinitial valuen/a (required)computed valueas specified formal syntax [ <url> [ format( <string># ) ]?
height - CSS: Cascading Style Sheets
<length> a non-negative absolute or
relative length.
... <percentage> a percentage value
relative to the width or height of the initial viewport at zoom factor 1.0, for horizontal and vertical lengths respectively.
... formal definition
related at-rule@viewportinitial valueas each of the properties of the shorthand:min-height: automax-height: nonepercentagesas each of the properties of the shorthand:min-height: the percentage is calculated with respect to the height of the generated box's containing block.
max-height - CSS: Cascading Style Sheets
<length> a non-negative absolute or
relative length.
... <percentage> a percentage value
relative to the height of the initial viewport at zoom factor 1.0 for vertical lengths.
... formal definition
related at-rule@viewportinitial valueautopercentagesrefer to the height of the initial viewportcomputed valueif specified as a length, the corresponding absolute length; if specified as a percentage, the specified value; otherwise, auto formal syntax <viewport-length>where <viewport-length> = auto | <length-percentage>where <length-percentage> = <length> | <percentage> examples setting viewport max height in pixels @viewport { max-height: 600px; } specifications specification status comment css device adaptationthe definition of '"max-height" descriptor' in that specification.
max-width - CSS: Cascading Style Sheets
<length> a non-negative absolute or
relative length.
... <percentage> a percentage value
relative to the width of the initial viewport at zoom factor 1.0 for horizontal lengths.
... formal definition
related at-rule@viewportinitial valueautopercentagesrefer to the width of the initial viewportcomputed valueif specified as a length, the corresponding absolute length; if specified as a percentage, the specified value; otherwise, auto formal syntax <viewport-length>where <viewport-length> = auto | <length-percentage>where <length-percentage> = <length> | <percentage> examples setting viewport max width in pixels @viewport { max-width: 600px; } specifications specification status comment css device adaptationthe definition of '"max-width" descriptor' in that specification.
min-height - CSS: Cascading Style Sheets
<length> a non-negative absolute or
relative length.
... <percentage> a percentage value
relative to the height of the initial viewport at zoom factor 1.0 for vertical lengths.
... formal definition
related at-rule@viewportinitial valueautopercentagesrefer to the height of the initial viewportcomputed valueif specified as a length, the corresponding absolute length; if specified as a percentage, the specified value; otherwise, auto formal syntax <viewport-length>where <viewport-length> = auto | <length-percentage>where <length-percentage> = <length> | <percentage> examples setting viewport min height in pixels @viewport { min-height: 200px; } specifications specification status comment css device adaptationthe definition of '"min-height" descriptor' in that specification.
min-width - CSS: Cascading Style Sheets
<length> a non-negative absolute or
relative length.
... <percentage> a percentage value
relative to the width or height of the initial viewport at zoom factor 1.0, for horizontal and vertical lengths respectively.
... formal definition
related at-rule@viewportinitial valueautopercentagesrefer to the width of the initial viewportcomputed valueif specified as a length, the corresponding absolute length; if specified as a percentage, the specified value; otherwise, auto formal syntax <viewport-length>where <viewport-length> = auto | <length-percentage>where <length-percentage> = <length> | <percentage> examples setting viewport min width in pixels @viewport { min-width: 200px; } specifications specification status comment css device adaptationthe definition of '"min-width" descriptor' in that specification.
width - CSS: Cascading Style Sheets
<length> a non-negative absolute or
relative length.
... <percentage> a percentage value
relative to the width or height of the initial viewport at zoom factor 1.0, for horizontal and vertical lengths respectively.
... formal definition
related at-rule@viewportinitial valueas each of the properties of the shorthand:min-width: automax-width: nonepercentagesas each of the properties of the shorthand:min-width: refer to the width of the containing blockmax-width: refer to the width of the containing blockcomputed valueas each of the properties of the shorthand:min-width: the percentage as specified or the absolute lengthmax-width: the percentage as specified or the absolute length or none formal syntax <viewport-length>{1,2}where <viewport-length> = auto | <length-percentage>where <length-percentage> = <length> | <percentage> examples setting minimum and maximum width @viewport { width: 500px; } specifications specification status comment css devic...
Using CSS animations - CSS: Cascading Style Sheets
<p>the caterpillar and alice looked at each other for some time in silence: at last the caterpillar took the hookah out of its mouth, and addressed her in a languid, sleepy voice.</p> note:
reload page to see the animation, or click the codepen button to see the animation in the codepen environment.
... note:
reload page to see the animation, or click the codepen button to see the animation in the codepen environment.
... note:
reload page to see the animation, or click the codepen button to see the animation in the codepen environment.
CSS Containment - CSS: Cascading Style Sheets
if we give each <article> the contain property with a value of content, when new elements are inserted the browser understands it does not need to
relayout or repaint any area outside of the containing element's subtree, although if the <article> is styled such that its size depends on its contents (e.g.
...however browsers cannot guess at your intent and cannot assume that an article will be enti
rely self-contained.
...it does not apply size containment, so you would not be at risk of a box ending up zero-sized due to a
reliance on the size of its children.
Backwards Compatibility of Flexbox - CSS: Cascading Style Sheets
safari was the last of the major browsers to remove prefixes, with the
release of safari 9 in 2015.
... common issues the majority of issues with flexbox
relate to the changes in the specification, as it has been developed, and the fact that many of us were attempting to use an experimental specification in production.
...css creates anonymous boxes to represent these items so that you do not need to wrap each item in a wrapper to represent the html table row, and a second one to represent the table element itself, you can’t see or style these anonymous boxes; they are there pu
rely to fix up the tree.
Basic concepts of flexbox - CSS: Cascading Style Sheets
you can read more about the
relationship between flexbox and the writing modes specification in a later article; however, the following description should help explain why we do not talk about left and right and top and bottom when we describe the direction that our flex items flow in.
... shorthand values for the flex properties you will very ra
rely see the flex-grow, flex-shrink, and flex-basis properties used individually; instead they are combined into the flex shorthand.
...in the next article we will look at how this specification
relates to other parts of css.
Controlling Ratios of Flex Items Along the Main Axis - CSS: Cascading Style Sheets
these
relate to the natural size of flex items before any growing or shrinking takes place, and to the concept of free space.
... the flex-grow property the flex-grow property specifies the flex grow factor, which determines how much the flex item will grow
relative to the rest of the flex items in the flex container when the positive free space is distributed.
... the flex-shrink property the flex-shrink property specifies the flex shrink factor, which determines how much the flex item will shrink
relative to the rest of the flex items in the flex container when negative free space is distributed.
Ordering Flex Items - CSS: Cascading Style Sheets
remember that the start line
relates to writing modes.
... the row-
related examples above demonstrate how row and row-reverse work in a left-to-right language such as english.
...then use order for pu
rely visual design tweaks.
CSS Fonts - CSS: Cascading Style Sheets
css fonts is a module of css that defines font-
related properties and how font resources are loaded.
... specifications specification status comment css fonts module level 4 working draft adds font-variation-settings (and
related higher-level properties) and font-optical-sizing.
... css fonts module level 3 candidate recommendation adds font-feature-settings (and
related higher-level properties) css level 2 (revision 1) recommendation css level 1 recommendation initial definition ...
Stacking context example 1 - CSS: Cascading Style Sheets
in the root stacking context we have two divs (div #1 and div #3), both
relatively positioned, but without z-index properties.
... example html <div id="div1"> <br /><span class="bold">div #1</span> <br />position:
relative; <div id="div2"> <br /><span class="bold">div #2</span> <br />position: absolute; <br />z-index: 1; </div> </div> <br /> <div id="div3"> <br /><span class="bold">div #3</span> <br />position:
relative; <div id="div4"> <br /><span class="bold">div #4</span> <br />position: absolute; <br />z-index: 2; </div> </div> </body></html> css .bold { font-weight:...
... bold; font: 12px arial; } #div1, #div3 { height: 80px; position:
relative; border: 1px dashed #669966; background-color: #ccffcc; padding-left: 5px; } #div2 { opacity: 0.8; z-index: 1; position: absolute; width: 150px; height: 200px; top: 20px; left: 170px; border: 1px dashed #990000; background-color: #ffdddd; text-align: center; } #div4 { opacity: 0.8; z-index: 2; position: absolute; width: 200px; height: 70px; top: 65px; left: 50px; border: 1px dashed #000099; background-color: #ddddff; text-align: left; padding-left: 10px; } result ...
Stacking context example 3 - CSS: Cascading Style Sheets
the first-level menu is only
relatively positioned, so no stacking context is created.
... example source code <!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <html> <head><style type="text/css"> div { font: 12px arial; } span.bold { font-weight: bold; } div.lev1 { width: 250px; height: 70px; position:
relative; border: 2px outset #669966; background-color: #ccffcc; padding-left: 5px; } #container1 { z-index: 1; position: absolute; top: 30px; left: 75px; } div.lev2 { opacity: 0.9; width: 200px; height: 60px; position:
relative; border: 2px outset #990000; background-color: #ffdddd; padding-left: 5px; } #container2 { z-index: 1; position: absolute; ...
... top: 20px; left: 110px; } div.lev3 { z-index: 10; width: 100px; position:
relative; border: 2px outset #000099; background-color: #ddddff; padding-left: 5px; } </style></head> <body> <br /> <div class="lev1"> <span class="bold">level #1</span> <div id="container1"> <div class="lev2"> <br /><span class="bold">level #2</span> <br />z-index: 1; <div id="container2"> <div class="lev3"><span class="bold">level #3</span></div> <div class="lev3"><span class="bold">level #3</span></div> <div class="lev3"><span class="bold">level #3</span></div> <div class="lev3"><span class="bold">level #3</span></div> <div class="lev3"><span class="bold">level #3</span></div> <div cl...
Shorthand properties - CSS: Cascading Style Sheets
similarly, the most common font-
related properties can be defined using the shorthand font, and the different margins around a box can be defined using the margin shorthand.
...handling of these cases are grouped in several categories: shorthands handling properties
related to edges of a box, like border-style, margin or padding, always use a consistent 1-to-4-value syntax representing those edges: the 1-value syntax: border-width: 1em — the unique value represents all edges the 2-value syntax: border-width: 1em 2em — the first value represents the vertical, that is top and bottom, edges, the second the horizontal ...
... similarly, shorthands handling properties
related to corners of a box, like border-radius, always use a consistent 1-to-4-value syntax representing those corners: the 1-value syntax: border-radius: 1em — the unique value represents all corners the 2-value syntax: border-radius: 1em 2em — the first value represents the top left and bottom right corner, the second the top right and bottom left on...
attr() - CSS: Cascading Style Sheets
relative url are resolved
relatively to the original document, not
relatively to the style sheet.
... if the given unit is a
relative length, attr() computes it to an absolute length.
... if the given unit is a
relative length, attr() computes it to an absolute length.
background-origin - CSS: Cascading Style Sheets
values border-box the background is positioned
relative to the border box.
... padding-box the background is positioned
relative to the padding box.
... content-box the background is positioned
relative to the content box.
background-position-x - CSS: Cascading Style Sheets
the position is
relative to the position layer set by background-origin.
... syntax /* keyword values */ background-position-x: left; background-position-x: center; background-position-x: right; /* <percentage> values */ background-position-x: 25%; /* <length> values */ background-position-x: 0px; background-position-x: 1cm; background-position-x: 8em; /* side-
relative values */ background-position-x: right 3px; background-position-x: left 25%; /* multiple values */ background-position-x: 0px, center; /* global values */ background-position-x: inherit; background-position-x: initial; background-position-x: unset; the background-position-x property is specified as one or more values, separated by commas.
... <percentage> the offset of the given background image's horizontal position
relative to the container.
background-position-y - CSS: Cascading Style Sheets
the position is
relative to the position layer set by background-origin.
... syntax /* keyword values */ background-position-y: top; background-position-y: center; background-position-y: bottom; /* <percentage> values */ background-position-y: 25%; /* <length> values */ background-position-y: 0px; background-position-y: 1cm; background-position-y: 8em; /* side-
relative values */ background-position-y: bottom 3px; background-position-y: bottom 10%; /* multiple values */ background-position-y: 0px, center; /* global values */ background-position-y: inherit; background-position-y: initial; background-position-y: unset; the background-position-y property is specified as one or more values, separated by commas.
... <percentage> the offset of the given background image's vertical position
relative to the container.
caption-side - CSS: Cascading Style Sheets
the values are
relative to the writing-mode of the table.
... editor's draft defines the top and bottom values as
relative to the writing-mode value.
... nochrome android no support nofirefox android full support 4opera android no support nosafari ios no support nosamsung internet android no support notop and bottom are
relative to the writing-mode valuechrome no support noedge no support nofirefox full support 42ie no support noopera no support nosafari no support ...
Computed value - CSS: Cascading Style Sheets
the computation needed to reach a property's computed value typically involves converting
relative values (such as those in em units or percentages) to absolute values.
... however, for some properties (those where percentages are
relative to something that may require layout to determine, such as width, margin-right, text-indent, and top), percentage-specified values turn into percentage-computed values.
...the
relative values that remain in the computed value become absolute when the used value is determined.
fit-content() - CSS: Cascading Style Sheets
<percentage> a percentage
relative to the available space in the given axis.
... in grid properties it is
relative to the inline size of the grid container in column tracks and to the block size of the grid container for row tracks.
... otherwise it is
relative to the available inline size or block size of the laid out box depending on the writing mode.
flex-basis - CSS: Cascading Style Sheets
note: this value was not present in the initial
release of flexible box layout, and thus some older implementations will not support it.
... formal definition initial valueautoapplies toflex items, including in-flow pseudo-elementsinheritednopercentagesrefer to the flex container's inner main sizecomputed valueas specified, but with
relative lengths converted into absolute lengthsanimation typea length, percentage or calc(); formal syntax content | <'width'> examples setting flex item initial sizes html <ul class="container"> <li class="flex flex1">1: flex-basis test</li> <li class="flex flex2">2: flex-basis test</li> <li class="flex flex3">3: flex-basis test</li> <li class="flex flex4">4: flex-basis test</li> <l...
... </ul> <ul class="container"> <li class="flex flex6">6: flex-basis test</li> </ul> css .container { font-family: arial, sans-serif; margin: 0; padding: 0; list-style-type: none; display: flex; flex-wrap: wrap; } .flex { background: #6ab6d8; padding: 10px; margin-bottom: 50px; border: 3px solid #2e86bb; color: white; font-size: 14px; text-align: center; position:
relative; } .flex:after { position: absolute; z-index: 1; left: 0; top: 100%; margin-top: 10px; width: 100%; color: #333; font-size: 12px; } .flex1 { flex-basis: auto; } .flex1:after { content: 'auto'; } .flex2 { flex-basis: max-content; } .flex2:after { content: 'max-content'; } .flex3 { flex-basis: min-content; } .flex3:after { content: 'min-content'; } .flex4 { ...
repeat() - CSS: Cascading Style Sheets
<percentage> a non-negative percentage
relative to the inline size of the grid container in column grid tracks, and the block size of the grid container in row grid tracks.
... auto-fill if the grid container has a definite or maximal size in the
relevant axis, then the number of repetitions is the largest possible positive integer that does not cause the grid to overflow its grid container.
...otherwise, if the grid container has a definite minimal size in the
relevant axis, the number of repetitions is the smallest possible positive integer that fulfills that minimum requirement.
scroll-margin-inline - CSS: Cascading Style Sheets
the outer container is styled like this: .scroller { text-align: left; width: 250px; height: 250px; overflow-x: scroll; display: flex; box-sizing: border-box; border: 1px solid #000; scroll-snap-type: x mandatory; } the main parts
relevant to the scroll snapping are overflow-x: scroll, which makes sure the contents will scroll and not be hidden, and scroll-snap-type: x mandatory, which dictates that scroll snapping must occur along the horizontal axis, and the scrolling will always come to rest on a snap point.
... the child elements are styled as follows: .scroller > div { flex: 0 0 250px; width: 250px; background-color: #663399; color: #fff; font-size: 30px; display: flex; align-items: center; justify-content: center; scroll-snap-align: end; } .scroller > div:nth-child(2n) { background-color: #fff; color: #663399; } the most
relevant part here is scroll-snap-align: end, which specifies that the right-hand edges (the "ends" along the x axis, in our case) are the designated snap points.
... note: here we are setting scroll-margin on the start and end of the inline axis (x in our case), but only the end edge is really
relevant.
scroll-margin - CSS: Cascading Style Sheets
the outer container is styled like this: .scroller { text-align: left; width: 250px; height: 250px; overflow-x: scroll; display: flex; box-sizing: border-box; border: 1px solid #000; scroll-snap-type: x mandatory; } the main parts
relevant to the scroll snapping are overflow-x: scroll, which makes sure the contents will scroll and not be hidden, and scroll-snap-type: x mandatory, which dictates that scroll snapping must occur along the horizontal axis, and the scrolling will always come to rest on a snap point.
... the child elements are styled as follows: .scroller > div { flex: 0 0 250px; width: 250px; background-color: #663399; color: #fff; font-size: 30px; display: flex; align-items: center; justify-content: center; scroll-snap-align: start; } .scroller > div:nth-child(2n) { background-color: #fff; color: #663399; } the most
relevant part here is scroll-snap-align: start, which specifies that the left-hand edges (the "starts" along the x axis, in our case) are the designated snap points.
... note: here we are setting scroll-margin on all sides at once, but only the start edge is really
relevant.
url() - CSS: Cascading Style Sheets
the parameter is an absolute url, a
relative url, or a data uri.
...} @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 (not to the url of the web page).
... syntax values <string> <url> a url, which is a
relative or absolute address, or pointer, to the web resource to be included, or a data uri, optionally in single or double quotes.
WAI ARIA Live Regions/API Support - Developer guides
or can get the following object attributes from the event object, if they are defined on some ancestor element (closest ancestor wins): object attribute name possible values default value if not specified meaning aria markup if required container-live "off" | "polite" | "assertive" "off" interruption policy aria-live on ancestor element container-
relevant "[additions] [removals] [text]" | "all" "additions text" what types of mutations are possibly
relevant?
... aria-
relevant on ancestor element container-busy "true" | "false" | "error" "false" the current changes are not yet complete.
...if yes, member-of
relation will point to the root of the region (see next section) aria-atomic on ancestor element member-of if container-atomic=true, points to an ancestor accessible object (thus it is actually an accessible
relation, not object attribute) not in atomic region if not provided points to the root of the atomic container that this object is in.
Content categories - Developer guides
this is a loose grouping (it doesn't actually create a
relationship among elements of these categories), but they help define and describe the categories' shared behavior and their associated rules, especially when you come upon their intricate details.
... form-
related content categories, which describe rules common to form-
related elements.
... note: a more detailed discussion of these content categories and their comparative functionalities is beyond the scope of this article; for that, you may wish to read the
relevant portions of the html specification.
HTML attribute: pattern - HTML: Hypertext Markup Language
additionally, assistive technology may read the title aloud when the control gains focus, but this should not be
relied upon for accessibility.
... <div> <label for="uname">choose a username: </label> <input type="text" id="uname" name="name" required size="45" pattern="[a-z]{4,8}" title="4 to 8 lowercase letters"> <span class="validity"></span> <p>usernames must be lowercase and 4-8 characters in length.</p> </div> <div> <button>submit</button> </div> </form> div { margin-bottom: 10px; position:
relative; } p { font-size: 80%; color: #999; } input + span { padding-right: 30px; } input:invalid+span:after { position: absolute; content: '✖'; padding-left: 5px; } input:valid+span:after { position: absolute; content: '✓'; padding-left: 5px; } this renders like so: accessibility concerns when a control has a pattern attribute, the title attribute, if used, must desc...
...
relying on the title attribute for the visual display of text content is generally discouraged as many user agents do not expose the attribute in an accessible manner.
<applet>: The Embed Java Applet element - HTML: Hypertext Markup Language
dom interface htmlappletelement attributes align this attribute is used to position the applet on the page
relative to content that might flow around it.
...the url specified by code might be
relative to the codebase attribute.
... codebase this attribute gives the absolute or
relative url of the directory where applets' .class files referenced by the code attribute are stored.
<area> - HTML: Hypertext Markup Language
rel for anchors containing the href attribute, this attribute specifies the
relationship of the target object to the link object.
...the default
relationship, if no other is given, is void.
...firefox 79+) setting target="_blank" on <area> elements implicitly provides the same
rel behavior as setting
rel="noopener".
<aside>: The Aside element - HTML: Hypertext Markup Language
the html <aside> element represents a portion of a document whose content is only indirectly
related to the document's main content.
...the paragraph is only indirectly
related to the main article content: <article> <p> the disney movie <cite>the little mermaid</cite> was first
released to theatres in 1989.
... </p> <aside> <p> the movie earned $87 million during its initial
release.
<basefont> - HTML: Hypertext Markup Language
with this set, the font's size can then be varied
relative to the base size using the <font> element.
... size this attribute specifies the font size as either a numeric or
relative value.
... the <basefont> element was deprecated in the standard at the same time as all elements
related to styling only.
<font> - HTML: Hypertext Markup Language
though once normalized in html 3.2, it was deprecated in html 4.01, at the same time as all elements
related to styling only, then made obsolete in html5.
... size this attribute specifies the font size as either a numeric or
relative value.
...it can be defined using a
relative value, like +2 or -3, which set it
relative to the value of the size attribute of the <basefont> element, or
relative to 3, the default value, if none does exist.
<input type="checkbox"> - HTML: Hypertext Markup Language
let's now look at the other common checkbox-
related features and techniques you'll need.
...if they are completely un
related, then you can just deal with them all separately, as shown above.
... however, if they're all
related, things are not quite so simple.
<input type="number"> - HTML: Hypertext Markup Language
it's far too easy for someone to make adjustments to the html that allow them to bypass the validation, or to remove it enti
rely.
...it defaults to accepting a height in meters, but you can click the
relevant button to change the form to accept feet and inches instead.
... div { margin-bottom: 10px; position:
relative; } input[type="number"] { width: 100px; } input + span { padding-right: 30px; } input:invalid+span:after { position: absolute; content: '✖'; padding-left: 5px; } input:valid+span:after { position: absolute; content: '✓'; padding-left: 5px; } and finally, the javascript: let metersinputgroup = document.queryselector('.metersinputgroup'); let feetinputgroup = document...
<input type="radio"> - HTML: Hypertext Markup Language
<input> elements of type radio are generally used in radio groups—collections of radio buttons describing a set of
related options.
...let's now look at the other common radio-button-
related features and techniques you may need to know about.
... font-family: sans-serif; } div:first-of-type { display: flex; align-items: flex-start; margin-bottom: 5px; } label { margin-right: 15px; line-height: 32px; } input { -webkit-appearance: none; -moz-appearance: none; appearance: none; border-radius: 50%; width: 16px; height: 16px; border: 2px solid #999; transition: 0.2s all linear; margin-right: 5px; position:
relative; top: 4px; } input:checked { border: 6px solid black; } button, legend { color: white; background-color: black; padding: 5px 10px; border-radius: 0; border: 0; font-size: 14px; } button:hover, button:focus { color: #999; } button:active { background-color: white; color: black; outline: 1px solid black; } most notable here is the use of the -moz-appearance propert...
<input type="search"> - HTML: Hypertext Markup Language
since character widths vary, this may or may not be exact and should not be
relied upon to be so; the resulting input may be narrower or wider than the specified number of characters, depending on the characters and the font (font settings in use).
...it's far too easy for someone to make adjustments to the html that allow them to bypass the validation, or to remove it enti
rely.
... it's also possible for someone to simply bypass your html enti
rely and submit the data directly to your server.
<mark>: The Mark Text element - HTML: Hypertext Markup Language
the html mark text element (<mark>) represents text which is marked or highlighted for reference or notation purposes, due to the marked passage's
relevance or importance in the enclosing context.
... otherwise, <mark> indicates a portion of the document's content which is likely to be
relevant to the user's current activity.
... don't confuse <mark> with the <strong> element; <mark> is used to denote content which has a degree of
relevance, while <strong> indicates spans of text of importance.
itemscope - HTML: Hypertext Markup Language
a
related attribute, itemtype, is used to specify the valid url of a vocabulary (such as schema.org) that describes the item and its properties context.
...the example specifies the itemtype as "http://schema.org/movie", and specifies three
related itemprop attributes.
...a global identifier allows the item to
relate to other items found on pages across the web.
Choosing between www and non-www URLs - HTTP
this includes always linking to the chosen domain (which shouldn't be hard if you're using
relative urls in your website) and always sharing links (by email/social networks, etc.) to the same domain.
... using <link
rel="canonical"> it is possible to add a special html <link> element to a page to indicate what the canonical address of a page is.
...in the previous example, http://www.example.org/whaddup would serve the same content as http://example.org/whaddup, but with an additional <link> element in the head: <link href="http://example.org/whaddup"
rel="canonical"> unlike the previous case, browser history will consider non-www and www urls as independent entries.
HTTP conditional requests - HTTP
the different behaviors are defined by the method of the request used, and by the set of headers used for a precondition: for safe methods, like get, which usually tries to fetch a document, the conditional request can be used to send back the document, if
relevant only.
...ra
rely is such additional flexibility needed.
... for locking mechanisms, it is the opposite: web developers need to issue a request with the proper headers, while webmasters can mostly
rely on the application to carry out the checks for them.
Using HTTP cookies - HTTP
for example: set-cookie: id=a3fwa; expires=wed, 31 oct 2021 07:28:00 gmt; note: when an expires date is set, the time and date set is
relative to the client the cookie is being set on, not the server.
... restrict access to cookies there are a couple of ways to ensure that cookies are sent secu
rely and are not accessed by unintended parties or scripts: the secure attribute and the httponly attribute.
... cookie-
related regulations legislation or regulations that cover the use of cookies include: the general data privacy regulation (gdpr) in the european union the eprivacy directive in the eu the california consumer privacy act these regulations have global reach, because they apply to any site on the world wide web that is accessed by users from these jurisdictions (the eu and california, with the c...
Accept-Language - HTTP
browsers set adequate values for this header according to their user interface language and even if a user can change it, this happens ra
rely (and is frowned upon as it leads to fingerprinting).
...but, for a better user experience, this is ra
rely done and more common way is to ignore the accept-language header in this case.
... ;q= (q-factor weighting) any value placed in an order of preference expressed using a
relative quality value called weight.
Large-Allocation - HTTP
this message means that the browser saw the large-allocation header, and was able to
reload the page into a new process which should have more available contiguous memory.
... the document with the large-allocation header was loaded in a window which was opened by window.open(), <a target="_blank"> or other similar methods without
rel="noopener" or the "noopener" feature being set.
... the document with the large-allocation header has opened another window with window.open(), <a target="_blank"> or other similar methods without
rel="noopener" or the "noopener" feature being set.
HTTP Messages - HTTP
web developers, or webmasters, ra
rely craft these textual http messages themselves: software, a web browser, proxy, or web server, perform this action.
...a brief, pu
rely informational, textual description of the status code to help a human understand the http message.
...these are
relatively rare.
Proxy Auto-Configuration (PAC) file - HTTP
(of course, the javascripts must be edited to reflect your site's domain name and/or subnets.) predefined functions and environment these functions can be used in building the pac file: hostname based conditions isplainhostname() dnsdomainis() localhostordomainis() isresolvable() isinnet()
related utility functions dnsresolve() convert_addr() myipaddress() dnsdomainlevels() url/hostname based conditions shexpmatch() time based conditions weekdayrange() daterange() timerange() logging utility alert() there was one associative array (object) already defined, because at the time javascript code was unable to define it by itsel...
...for a
reliable way to use these regexp syntaxes, just use regexp instead.
...all the other autoconfig-
related functions are mere string-matching functions that don't require the use of a dns server.
451 Unavailable For Legal Reasons - HTTP
note: the link header might also contain a
rel="blocked-by"
relation identifying the entity and implementing blockage, not any other entity mandating it.
... any attempt to identify the entity ultimately responsible for the resource being unavailable belongs in the response body, not in the
rel="blocked-by" link.
... http/1.1 451 unavailable for legal reasons link: <https://spqr.example.org/legislatione>;
rel="blocked-by" content-type: text/html <html> <head><title>unavailable for legal reasons</title></head> <body> <h1>unavailable for legal reasons</h1> <p>this request may not be serviced in the roman province of judea due to the lex julia majestatis, which disallows access to resources hosted on servers deemed to be operated by the people's front of judea.</p> </body> </html> specifications specification title rfc 7725: 451 unavailable for legal reasons an http status code to report lega...
Details of the object model - JavaScript
determining instance
relationships property lookup in javascript looks within an object's own properties and, if the property name is not found, it looks within the special object property __proto__.
...so objects can be
related by 'prototype inheritance' to other objects.
...that is, an object can inherit the properties and values from un
related parent objects.
Expressions and operators - JavaScript
assignment operators comparison operators arithmetic operators bitwise operators logical operators string operators conditional (ternary) operator comma operator unary operators
relational operators javascript has both binary and unary operators, and one special ternary operator, the conditional operator.
...
relational operators a
relational operator compares its operands and returns a boolean value based on whether the comparison is true.
...~ - + ++ -- typeof void delete multiply/divide * / % addition/subtraction + - bitwise shift << >> >>>
relational < <= > >= in instanceof equality == != === !== bitwise-and & bitwise-xor ^ bitwise-or | logical-and && logical-or || conditional ?: assignment = += -= *= /= %= <<= >>= >>>= &= ^= |= &&= ||= ??= comma , a more detailed version of this table, complete with links to additiona...
Function.prototype.bind() - JavaScript
if (this.prototype) { // function.prototype doesn't have a prototype property fnop.prototype = this.prototype; } fbound.prototype = new fnop(); return fbound; }; })(); some of the many differences (there may well be others, as this list does not seriously attempt to be exhaustive) between this algorithm and the specified algorithm are: the partial implementation
relies on array.prototype.slice(), array.prototype.concat(), function.prototype.call() and function.prototype.apply(), built-in methods to have their original values.
... if you choose to use this partial implementation, you must not
rely on those cases where behavior deviates from ecma-262, 5th edition!
... thankfully, these deviations from the specification ra
rely (if ever) come up in most coding situations.
Intl - JavaScript
intl.
relativetimeformat() constructor for objects that enable language-sensitive
relative time formatting.
... for example: "hi": hindi (language) "de-at": german (language) as used in austria (region) "zh-hans-cn": chinese (language) written in simplified characters (script) as used in china (region) "en-emodeng": english (language) in the "early modern english" dialect (variant) the subtags identifying languages, scripts, regions (including countries), and (ra
rely used) variants in unicode bcp 47 locale identifiers are registered in the iana language subtag registry.
... this registry is periodically updated over time, and implementations may not always be up to date, so be careful not to
rely too much on tags being universally supported.
String.prototype.localeCompare() - JavaScript
in older implementations, which ignore the locales and options arguments, the locale and sort order used are enti
rely implementation-dependent.
...in implementations which ignore the locales and options arguments, the locale used and the form of the string returned are enti
rely implementation-dependent.
... negative when the referencestr occurs before comparestring positive when the referencestr occurs after comparestring returns 0 if they are equivalent do not
rely on exact return values of -1 or 1!
WebAssembly.CompileError - JavaScript
for androidopera for androidsafari on iossamsung internetnode.jscompileerrorchrome full support 57edge full support 16firefox full support 52notes full support 52notes notes disabled in the firefox 52 extended support
release (esr).ie no support noopera full support 44safari full support 11webview android full support 57chrome android full support 57firefox android full support...
... 52notes full support 52notes notes disabled in the firefox 52 extended support
release (esr).opera android full support 43safari ios full support 11samsung internet android full support 7.0nodejs full support 8.0.0compileerror() constructorchrome full support 57edge full support 16firefox full support 52notes full support 52notes notes disabled in the firefox 52 e...
...xtended support
release (esr).ie no support noopera full support 44safari full support 11webview android full support 57chrome android full support 57firefox android full support 52notes full support 52notes notes disabled in the firefox 52 extended support
release (esr).opera android full support 43safari ios full support 11samsung internet android full support ...
WebAssembly.LinkError - JavaScript
fox for androidopera for androidsafari on iossamsung internetnode.jslinkerrorchrome full support 57edge full support 16firefox full support 52notes full support 52notes notes disabled in the firefox 52 extended support
release (esr).ie no support noopera full support 44safari full support 11webview android full support 57chrome android full support 57firefox android full support...
... 52notes full support 52notes notes disabled in the firefox 52 extended support
release (esr).opera android full support 43safari ios full support 11samsung internet android full support 7.0nodejs full support 8.0.0linkerror() constructorchrome full support 57edge full support 16firefox full support 52notes full support 52notes notes disabled in the firefox 52 exte...
...nded support
release (esr).ie no support noopera full support 44safari full support 11webview android full support 57chrome android full support 57firefox android full support 52notes full support 52notes notes disabled in the firefox 52 extended support
release (esr).opera android full support 43safari ios full support 11samsung internet android full support ...
WebAssembly.RuntimeError - JavaScript
for androidopera for androidsafari on iossamsung internetnode.jsruntimeerrorchrome full support 57edge full support 16firefox full support 52notes full support 52notes notes disabled in the firefox 52 extended support
release (esr).ie no support noopera full support 44safari full support 11webview android full support 57chrome android full support 57firefox android full support...
... 52notes full support 52notes notes disabled in the firefox 52 extended support
release (esr).opera android full support 43safari ios full support 11samsung internet android full support 7.0nodejs full support 8.0.0runtimeerror() constructorchrome full support 57edge full support 16firefox full support 52notes full support 52notes notes disabled in the firefox 52 e...
...xtended support
release (esr).ie no support noopera full support 44safari full support 11webview android full support 57chrome android full support 57firefox android full support 52notes full support 52notes notes disabled in the firefox 52 extended support
release (esr).opera android full support 43safari ios full support 11samsung internet android full support ...
Lazy loading - Web Performance
<link href="style.css"
rel="stylesheet" media="all"> <link href="portrait.css"
rel="stylesheet" media="orientation:portrait"> <link href="print.css"
rel="stylesheet" media="print"> it is possible to perform some css optimizations to achieve that.
... it is possible to override the default behaviour and p
reload web font resources using <link
rel="p
reload">, the css font-display property, and the font loading api.
... <img src="image.jpg" loading="lazy" alt="..." /> <iframe src="video-player.html" loading="lazy"></iframe> the load event fires when the eagerly-loaded content has all been loaded; at that time, it's enti
rely possible (or even likely) that there may be lazily-loaded images that are within the visual viewport that haven't yet loaded.
Add to Home screen - Progressive web apps (PWAs)
the most
relevant one to a2hs is the splash screen displayed when the app icon on the home screen is tapped and it first starts to load (this currently appears only when apps have been added to the home screen by chrome).
...note that this has to be a
relative url pointing to the site index,
relative to the url of the manifest.
... link the html to the manifest to finish setting up your manifest, you need to reference it from the html of your application's home page: <link
rel="manifest" href="manifest.webmanifest"> browsers that support a2hs will know where to look for your manifest once this is in place.
Progressive loading - Progressive web apps (PWAs)
we can also split css files and add media types to them: <link
rel="stylesheet" href="style.css"> <link
rel="stylesheet" href="print.css" media="print"> this will tell the browser to load them only when the condition is met.
... here's what the
relevant code looks like: if('intersectionobserver' in window) { const observer = new intersectionobserver((items, observer) => { items.foreach((item) => { if(item.isintersecting) { loadimages(item.target); observer.unobserve(item.target); } }); }); imagestoload.foreach((img) => { observer.observe(img); }); } else { imagestoload.foreach((img) => { ...
... feel free to experiment with the code, enhance your existing app with pwa features, or build something enti
rely new on your own.
Structural overview of progressive web apps - Progressive web apps (PWAs)
another approach: streams an enti
rely different approach to server- or client-side rendering can be achieved with the streams api.
...the parts that are directly
relevant to the app shell model are found outside the <section> with the id content within this page.
...itle> <meta name="description" content="a list of a-frame entries submitted to the js13kgames 2017 competition, used as an example for the mdn articles about progressive web apps."> <meta name="author" content="end3r"> <meta name="theme-color" content="#b12a34"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta property="og:image" content="icons/icon-512.png"> <link
rel="shortcut icon" href="favicon.ico"> <link
rel="stylesheet" href="style.css"> <link
rel="manifest" href="js13kpwa.webmanifest"> <script src="data/games.js" defer></script> <script src="app.js" defer></script> </head> <body> <header> <p><a class="logo" href="http://js13kgames.com"><img src="img/js13kgames.png" alt="js13kgames"></a></p> </header> <main> <h1>js13kgames a-frame entries</h1> <p ...
Progressive web apps (PWAs)
most of the features
related to a pwa such as geolocation and even service workers are available only once the app has been loaded using https.
...with service workers, web developers can create
reliably fast web pages and offline experiences.
...but instead of
relying only on user actions, we can do more, using push messages and notifications to automatically re-engage and deliver new content whenever it is available.introduction to progressive web appsthis article provides an introduction to progressive web apps (pwas), discussing what they are and the advantages they offer over regular web apps.making pwas work offline with service workersin this article...
gradientUnits - SVG: Scalable Vector Graphics
percentages represent values
relative to the current svg viewport.
... percentages represent values
relative to the bounding box for the object.
...when the object's bounding box is not square, the gradient normal which is initially perpendicular to the gradient vector within object bounding box space may render non-perpendicular
relative to the gradient vector in user space.
side - SVG: Scalable Vector Graphics
the side attribute determines the side of a path the text is placed on (
relative to the path direction).
...xt right from the path</textpath> </text> <circle id="circle1" cx="100" cy="100" r="70" fill="transparent" stroke="silver"/> <circle id="circle2" cx="320" cy="100" r="70" fill="transparent" stroke="silver"/> </svg> usage notes value left | right default value left animatable yes left this value places the text on the left side of the path (
relative to the path direction).
... right this value places the text on the right side of the path (
relative to the path direction).
target - SVG: Scalable Vector Graphics
_parent the immediate parent browsing context of the svg image is replaced by the linked content, if it exists and can be secu
rely accessed from this document.
... _top the content of the full active window or tab is replaced by the linked content, if it exists and can be secu
rely accessed from this document _blank a new un-named window or tab is requested for the display of the linked content, if this document can secu
rely do so.
...if a context with this name already exists, and can be secu
rely accessed from this document, it is re-used, replacing the existing content.
Namespaces crash course - SVG: Scalable Vector Graphics
versions of svg viewers prior to the
release of firefox 1.5 unfortunately paid scant attention to namespaces, but they are essential to multi-xml dialect supporting user agents such as gecko-based browsers which must be very strict.
...the fact that doctype declarations (usually) match the content in single content type files is me
rely coincidental.
... the dom level 1 recommendation was created before the original namespaces in xml recommendation was
released; therefore, dom1 isn't namespace aware.
SVG In HTML Introduction - SVG: Scalable Vector Graphics
ctive, interactive background the approach is backwards compatible to browsers that do not support svg; simply, no background appears in them it's very simple and performs very well the picture dynamically sizes itself to the required size in an intelligent way we can have declarative style rules applying to both html and svg the same script manipulates both html and svg the document is enti
rely standards-based to add a linked image with dom methods to an embedded svg element, one has to use setattributens to set href.
... like in the following example: var img = document.createelementns("http://www.w3.org/2000/svg", "image"); img.setattributens("http://www.w3.org/1999/xlink", "xlink:href", "move.png"); details the viewbox attribute establishes a logical coordinate system which the svg picture's coordinates are
relative to.
...
related links another svg in html example: a swarm of motes working example that works in both mozilla and in internet explorer with adobe's svg viewer installed.
Same-origin policy - Web security
note: when using document.domain to allow a subdomain to access its parent secu
rely, you need to set document.domain to the same value in both the parent domain and the subdomain.
... css applied with <link
rel="stylesheet" href="…">.
... due to the
relaxed syntax rules of css, cross-origin css requires a correct content-type header.
How to turn off form autocompletion - Web security
note that the wcag 2.1 success criterion 1.3.5: identify input purpose does not require that autocomplete/autofill actually work - me
rely that form fields that
relate to specific personal user information are programmatically identified.
... this means that the criterion can be passed (by adding the
relevant autocomplete attributes to individual form fields) even when autocompletion for the form itself has been turned off.
...for example, firefox version 67 (see bug 1119063) stopped autofilling in this case; however, firefox 70 (see bug 1565407) can suggest secu
rely-generated passwords, but does not autofill a saved password.
Transport Layer Security - Web security
applications that use tls can choose their security parameters, which can have a substantial impact on the security and
reliability of data.
...clients that reconnect to the server can send requests immediately, eliminating the latency of the tls handshake enti
rely.
... the removal of renegotiation in tls 1.3 might affect some web servers that
rely on client authentication using certificates.
Web security
applications that use tls can choose their security parameters, which can have a substantial impact on the security and
reliability of data.
... secure contexts a secure context is a window or worker for which there is reasonable confidence that the content has been delivered secu
rely (via https/tls), and for which the potential for communication with contexts that are not secure is limited.
... security-
related glossary terms block cipher mode of operation certificate authority challenge-response authentication cipher cipher suite ciphertext cors cors-safelisted request header cors-safelisted response header cross-site scripting cryptanalysis cryptographic hash function cryptography csp csrf decryption ...
Tutorials
now it's time to look at how to place your boxes in the right place in
relation to the viewport, and one another.
...you can even create your own objects to encapsulate
related functions and variables into efficient packages.
... exploring es6
reliable and in-depth information on ecmascript 2015.
Using custom elements - Web Components
optionally, an options object containing an extends property, which specifies the built-in element your element inherits from, if any (only
relevant to customized built-in elements; see the definition below).
... for example, take a look at this code from our popup-info-box-external-stylesheet example (see the source code): // apply external styles to the shadow dom const linkelem = document.createelement('link'); linkelem.setattribute('
rel', 'stylesheet'); linkelem.setattribute('href', 'style.css'); // attach the created element to the shadow dom shadow.appendchild(linkelem); note that <link> elements do not block paint of the shadow root, so there may be a flash of unstyled content (fouc) while the stylesheet loads.
...classes please note that es2015 classes cannot
reliably be transpiled in babel 6 or typescript targeting legacy browsers.
XPath snippets - XPath
if you can
rely on id attributes, document.getelementbyid() is still powerful, but it's not nearly as powerful as xpath.
...context.ownerdocument : document); resolver = resolver || null; context = context || doc; result = doc.evaluate(expr, context, resolver, xpathresult.ordered_node_snapshot_type, null); for(i = 0; i < result.snapshotlength; i++) { a[i] = result.snapshotitem(i); } return a; } getxpathfo
relement the following function allows one to pass an element and an xml document to find a unique string xpath expression leading back to that element.
... example: defining a getxpathfo
relement() utility function function getxpathfo
relement(el, xml) { var xpath = ''; var pos, tempitem2; while(el !== xml.documentelement) { pos = 0; tempitem2 = el; while(tempitem2) { if (tempitem2.nodetype === 1 && tempitem2.nodename === el.nodename) { // if it is element_node of the same name pos += 1; } tempitem2 = tempitem2.previoussibling; } xpath = "*[name()='"+el.nodename+"' and namespace-uri()='"+(el.namespaceuri===null?'':el.namespaceuri)+"']["+pos+']'+'/'+xpath; el = el.parentnode; } xpath = '/*'+"[name()='"+xml.documentelement.nodename+"' and namespace-uri()='"+(el.namespaceuri===null?'':el.namespaceuri)+"']"+'/'+xpath; xpath = xpath.replace(/\/$/, ''); return xpath; } resources xpath forum discussio...
XPath
xpath is mainly used in xslt, but can also be used as a much more powerful way of navigating through the dom of any xml-like language document using xpathexpression, such as html and svg, instead of
relying on the document.getelementbyid() or parentnode.queryselectorall() methods, the node.childnodes properties, and other dom core features.
...axes are used to describe the
relationships between nodes.
...
related topics xslt, xquery, xml, dom, jxon, jsonpath comparison of css selectors and xpath ...
Content Scripts - Archive of obsolete content
lick: <html> <head> </head> <body> <script> window.onclick = function() { window.alert("it's my click now!"); } </script> </body> </html> for these reasons, it's better to add event listeners using addeventlistener(), defining the listener as a function: var themessage = "hello from content script!"; anelement.onclick = function() { alert(themessage); }; anothe
relement.addeventlistener("click", function() { alert(themessage); }); communicating with the add-on to enable add-on scripts and content scripts to communicate with each other, each end of the conversation has access to a port object.
...one option is that you can
relay messages through the main add-on code using the port api with the sending context script sending a message to the main add-on code and the the main add-on code sends the message to the other content script.
Testing the Add-on SDK - Archive of obsolete content
this suite builds add-ons which are tests (ie: their main.js script's me
rely run tests and close firefox when their tests are done), and runs them as cfx run would.
... with travis if you me
rely make a pull request for the mozilla/addon-sdk then all of the jpm tests mentioned above will be run on travis-ci automatically and you will see the pass/fail results with a link to the log in the github pull request.
Guides - Archive of obsolete content
firefox compatibility working out which firefox
releases a given sdk
release is compatible with, and dealing with compatibility problems.
... porting example a walkthrough of porting a
relatively simple xul-based add-on to the sdk.
page-mod - Archive of obsolete content
in earlier versions of this module, you couldn't use
relative urls in stylesheets loaded in this way, and you had to use a workaround.
... are attached to all documents whose url matches the rule: so if your rule matches a specific hostname and path, and the topmost document that satisfies the rule includes ten iframes using a
relative url, then your page-mod is applied eleven times.
self - Archive of obsolete content
parameters name : string the filename to be read,
relative to the package's data directory.
...so you can rewrite the above code like this: var mypanel = require("sdk/panel").panel({ contenturl: "./myfile.html" }); mypanel.show(); parameters name : string the filename to be read,
relative to the package's data directory.
dev/panel - Archive of obsolete content
// export the constructor exports.mypanel = mypanel; // create a new tool, initialized // with the new constructor const mytool = new tool({ panels: { mypanel: mypanel } }); panel document environment the panel document loaded from the url property can of course include css and javascript just like a normal web page: <html> <head> <meta charset="utf-8"> <link href="./my-panel.css"
rel="stylesheet"></link> <script src="resource://sdk/dev/volcan.js"></script> </head> <body> <div id="content"></div> </body> <script src="./my-panel.js"></script> </html> it doesn't have access to any privileged apis, including the add-on sdk apis.
... to use volcan.js, you can just include it from your panel's html like this: <html> <head> <meta charset="utf-8"> <link href="./my-panel.css"
rel="stylesheet"></link> <script src="resource://sdk/dev/volcan.js"></script> </head> <body> <div id = "content"></div> </body> <script src="./my-panel.js"></script> </html> here's a script that uses volcan.js to get the selected tab and display its url: // my-panel.js var content = document.getelementbyid("content"); window.addeventlistener("message", function(event) { var de...
io/file - Archive of obsolete content
globals functions basename(path) the path parameter must be an absolute path,
relative paths will cause an error.
... use the fs/path module for
relative path support.
net/xhr - Archive of obsolete content
this can probably be done most secu
rely by white-listing the protocols that can be used in the url passed to the open() method, and limiting them to http:, https:, and possibly a special scheme that can be used to access the add-on's packaged, read-only resources.
... functions forceallowthirdpartycookie(xhr) force
relevant cookies to be sent with this xmlhttprequest even if normally they would not be.
test/assert - Archive of obsolete content
deepequal(actual, expected, message) tests that two objects have a deep equality
relation.
... notdeepequal(actual, expected, message) tests that two objects do not have a deep equality
relation, using the negation of the test for deep equality: assert.notdeepequal({ a: "foo" }, object.create({ a: "foo" }), "object's inherit from different prototypes"); parameters actual : object the actual result.
cfx to jpm - Archive of obsolete content
requiring local modules suppose your add-on is structured into separate modules: my-addon lib main.js utils.js when you want to use the "utils" module in "main.js", you should use a path
relative to "main.js", and prefix the path with "./" to indicate that it's a
relative path: var utils = require("./utils"); however, with cfx you are also allowed to omit the "./": var utils = require("utils"); // this will not work with jpm!
... with jpm, you must specify the path to "my-addon" explicitly, using a
relative path: var my_addon = require("../lib/my-addon"); third-party modules the sdk has always supported third-party modules: developers can write their own modules that extend the sdk's apis or add new apis, and other add-on developers can make use of these modules in the same way that they use the sdk's built-in modules.
Displaying annotations - Archive of obsolete content
warning: this tutorial
relies on the since-removed widget api and no longer works with firefox.
...it could do with more beautiful styling, it certainly needs a way to delete annotations, it should deal with overquota more
reliably, and the matcher could be made to match more
reliably.
Rosetta - Archive of obsolete content
it
relies on the fact that unrecognized mime types will be simply ignored: this allows us to manually parse them.
...|*| |*| november 12, 2014 |*| |*| https://developer.mozilla.org/add-ons/code_snippets/rosetta |*| https://developer.mozilla.org/user:fusionchess |*| |*| this framework is
released under the gnu public license, version 3 or later.
StringView - Archive of obsolete content
&& isfinite(nval) && nval > -9007199254740992 && nval < 9007199254740992 && math.floor(nval) === nval; }; } /*\ |*| |*| stringview mdndeveloper network |*| |*| revision #12, march 21st, 2017 |*| |*| https://developer.mozilla.org/add-ons/code_snippets/stringview |*| https://developer.mozilla.org/docs/user:fusionchess |*| https://github.com/madmurphy/stringview.js |*| |*| this framework is
released under the gnu lesser general public license, version 3 or later.
...you ra
rely need to invoke the stringview.valueof() method yourself; javascript automatically invokes it when encountering an object where a primitive value is expected.
Jetpack Processes - Archive of obsolete content
however, the service has been removed enti
rely as of firefox 12.
... these processes are
relatively lightweight, do not have access to xpcom, and can innately do little other than compute.
Chapter 4: Using XPCOM—Implementing advanced processes - Archive of obsolete content
get window while you can use javascript to get child windows opened from the parent window, you cannot get dialogs or windows that have no
relation to that window.
...erterinputstream); converterstream.init(filestream, charset, filestream.available(), converterstream.default_replacement_character); var out = {}; converterstream.readstring(filestream.available(), out); var filecontents = out.value; converterstream.close(); filestream.close(); alert(filecontents); outputting text files fixme: not sure this example is
relevant in an english context, maybe something from the snippets listing 16 shows how to take text internally represented as unicode and output it to a file encoded using euc-jp (a japanese text encoding).
Adding sidebars - Archive of obsolete content
« previousnext » the sidebar in firefox is a
relatively large and flexible space to add rich interfaces without requiring new windows or complicated overlays.
...shortcut keys can be very valuable for advanced users, but don't
rely on them.
Adding windows and dialogs - Archive of obsolete content
if this value is null or empty, the default toolbars of the main window will be added to the new one, which is ra
rely what you want.
...you need some way of remembering the user-manipulated attribute values so that the window
reloads it last state when opened.
Handling Preferences - Archive of obsolete content
ion when describing the queryinterface method: this._prefservice.queryinterface(ci.nsiprefbranch2); this._prefservice.addobserver(prefname, this, false); this._prefservice.queryinterface(ci.nsiprefbranch); all the qi'ing is necessary because the addobserver method is in a different interface, and other than for adding and removing observers, we use the nsiprefbranch interface for everything
related to preferences.
...since there are some subtleties
related to preference management, there are some facilities provided in xul and firefox that make this much easier to deal with.
The Box Model - Archive of obsolete content
a common exception to this rule is when your css is directly
related to images, where you'll usually handle measurements in pixels (px).
... the description element is used for the rest of the cases, where the text is only meant as additional information and is not
related to input elements.
Session store API - Archive of obsolete content
in other words, it's now possible for sessions to be restored even without the browser quitting and being
relaunched.
... this is something you may need to keep in mind if you
rely on the behavior of the session store system.
Signing an XPI - Archive of obsolete content
download the latest network security services (nss) package from the mozilla ftp site at https://ftp.mozilla.org/pub/mozilla.or.../nss/
releases/.
...download the latest netscape portable runtime from the mozilla ftp site: http://ftp.mozilla.org/pub/mozilla.org/nspr/
releases/.
Using the Stylesheet Service - Archive of obsolete content
in firefox 3, the changes take effect immediately, though some declarations (especially those affecting xul) won't work until a
reload.
... backwards compatibility you can check for the availability and the functionality of the stylesheet service: if("@mozilla.org/content/style-sheet-service;1" in components.classes) { if(components.id('{41d979dc-ea03-4235-86ff-1e3c090c5630}') .equals(components.interfaces.nsistylesheetservice)) { // stylesheet service is available, but changes won't apply until
reload // (firefox 1.5 and 2 behaviour) } else { // stylesheet service is available and changes will apply immediately // (firefox 3 behaviour) } } else { // stylesheet service is not available (pre-firefox 1.5 behaviour) } ...
Case Sensitivity in class and id Names - Archive of obsolete content
therefore, authors should not
rely on case-sensitivity as a way of creating distinct identifiers, unless they are designing solely for a truly standards-compliant browser such as netscape 6.
...
related links html 4.01, section 7.5.2 html 4.01, section 12.2.3 original document information author(s): eric a.
Creating a status bar extension - Archive of obsolete content
although this sample extension only works in firefox, it's enti
rely possible to create extensions that work in multiple xul-based applications.
...this path is
relative to the extension's root folder in this case, but can be absolute if you want it to be.
List of Mozilla-Based Applications - Archive of obsolete content
kazehakase gecko-based web browser for unix kirix strata data browser kiwix offline version of wikipedia kneemail prayer, praise, and journal application komodo and komodo edit and open komodo development tools mozilla-based application (pre-xulrunner style), xul ui kompozer wysiwyg html editor unofficial bug-fix
release of nvu kylo video browser uses gecko biofortis labmatrix web-accessible software application used for information management and integration of patient clinical, specimen, genetic and molecular assay data based on xul liaison groupware client for novell’s email and collaboration server previously called mozngw linbox kiosk browser (fr) ...
... uox3 ultima online server-emulator uses mozilla spidermonkey verbosio xml editor no
releases available verseminder bible passage app virgin media security security tools seems to use xulrunner virtualbox virtualization tool use xpcom as its component model on linux waterfox 64-bit variant of firefox based on firefox webissimo web browser based on xulrunner websecurify web application security tes...
Images, Tables, and Mysterious Gaps - Archive of obsolete content
however, these techniques may be
relevant when the developer cannot assume that users have a modern browser, such as for html-based e-mail messages.
...
related links gecko's almost standards mode mozilla's quirks mode original document information author(s): eric a.
Installing plugins to Gecko embedding browsers on Windows - Archive of obsolete content
this information applies to mozilla based browsers that pull the mozilla codebase after the mozilla 0.9.1 milestone
release.
...netscape 6.1 and onwards, however, will write these keys, and so creating a plugin installer that puts the shared object (dll) in the right place becomes much easier, since the
relevant meta-information is present in the win32 system registry.
Using content preferences - Archive of obsolete content
var value = prefservice.getpref(uri, "devmo.somesetting"); built-in site-specific preferences preference name menu equivalent values notes browser.content.full-zoom view / zoom example: "1.10000002384186" (rounding variant of "1.1")
related about:config preferences: browser.zoom.full boolean, set by the menu item view / zoom / zoom text only.
... browser.zoom.sitespecific toolkit.zoommanager.zoomvalues zoom.maxpercent and zoom.minpercent browser.download.lastdir path of a filesystem directory
related about:config preferences: browser.download.lastdir the last directory for any site use downloadlastdir.jsm for access to these preferences.
How Thunderbird and Firefox find their configuration files - Archive of obsolete content
here is an example of what this may look like: [general] startwithlastprofile=1 [profile0] name=default is
relative=1 path=profiles/default.uda if you want to point this to a location of your choice (for example h:\thunderbird), you need to perform to changes: set is
relative to be 0 update the path to point to the desired place.
...you'd obtain a file such as the following: [general] startwithlastprofile=1 [profile0] name=default is
relative=0 path=h:\thunderbird a discussion about this file can be found here ...
Bookmark Keywords - Archive of obsolete content
laying the groundwork we're going to pick a
relatively easy example to illustrate this process: a keymark that will let the user jump straight to a specific bugzilla entry by entering its number.
...one such example, with the
relevant term highlighted, is shown in figure 7.
Installing Dehydra - Archive of obsolete content
cd $home # obtain gcc 4.5.3 (see http://gcc.gnu.org/mirrors.html for alternate mirrors) wget http://www.netgull.com/gcc/
releases/gcc-4.5.3/gcc-4.5.3.tar.bz2 tar -jxvf gcc-4.5.3.tar.bz2 # apply plugin_finish_decl patch wget https://bug559964.bugzilla.mozilla.o....cgi?id=457606 -o finish_decl.diff cd gcc-4.5.3 patch -p0 < ../finish_decl.diff # build gcc cd ..
...(obsolete dehydra
releases can be found on the mozilla ftp site.) hg clone http://hg.mozilla.org/rewriting-and-analysis/dehydra/ cd dehydra export cxx=/usr/bin/g++ ./configure \ --js-headers=$home/obj-js/dist/include \ --js-libs=$home/obj-js make # run dehydra and treehydra tests make check usage dehydra checking can be performed directly within the mozilla build.
Dehydra - Archive of obsolete content
dehydra faq answers to common questions static analyses analyses being worked on for mozilla 2 todo steps to dehydra 1.0
release community view dehydra forums...
... mailing list newsgroup rss feed #static on irc.mozilla.org blogs taras glek david mandelin benjamin smedberg
related topics pork c/c++ refactoring tools, mozilla 2, spidermonkey categories interwiki language links ...
Drag and Drop Example - Archive of obsolete content
this allows us to place the new element at the position where the mouse button was
released.
... this isn't quite the correct way to do this as we actually need to calculate the coordinates of the event
relative to the stack.
Block and Line Layout Cheat Sheet - Archive of obsolete content
brs_shrinkwrapwidth brs_needresizereflow
related to brs_shrinkwrapwidth.
... ll_understandsnwhitespace ll_textstartswithnbsp ll_firstletterstyleok ll_istopofpage ll_updatedband ll_impactedbyfloaters ll_lastfloaterwasletterframe ll_canplacefloater ll_knowstrictmode ll_instrictmode ll_lineendsinbr perframedata (why isn't this just stored in the frame?) mflags pfd_
relativepos pfd_istextframe pfd_isnonemptytextframe pfd_isnonwhitespacetextframe pfd_isletterframe pfd_issticky pfd_isbullet perspandata in nslinelayout, a "span" is a container inline frame, and a "frame" is one of its children.
Layout System Overview - Archive of obsolete content
this is presumably
related to the fact that layout is responsible for form submission, but this is a design flaw that is being corrected by moving form submission into the content world.
...block frame reflow state reflow metrics space manager styleset stylecontext see also layout faq document history 05/20/2002 - marc attinasi: created, wrote highest level introduction to general layout concepts, links to
relevant specs and existing documents.
Style System Overview - Archive of obsolete content
various rules in nshtmlstylesheet.cpp do other things with presentational color-
related attributes and with tables.
...[design flaw in frame/sc
relationship] three functions for creating style contexts on nsistyleset, wrapped by similarly named ones on nsiprescontext: resolvestylecontextfor: for elements.
Firefox Sync - Archive of obsolete content
components and services sync refers to a family of
related components and services which provide synchronization of data between mozilla application instances.
...
related info javascript client api (useful for interacting with sync from mozilla applications, including developing extensions against sync) syncing custom preferences (useful for extension developers) code snippets (demonstrates common actions with the javascript api) ...
Jetpack Snippets - Archive of obsolete content
read the experiment report for what we learned from it and the blog post announcing the first sdk
release for what we're up to next!
...ture.import("slidebar");jetpack.slidebar.append({ html: <html><head></head><body> <p>some slidbar you want to debug</p> <a href="javascript:console.log('hello!')">test</a> <script><![cdata[ //firebug lite bookmarklet code: var firebug=document.createelement('script'); firebug.setattribute('src','http://getfirebug.com/
releases/lite/1.2/firebug-lite-compressed.js'); document.body.appendchild(firebug); (function(){if(window.firebug.version){firebug.init();}else{settimeout(arguments.callee);}})();void(firebug); ]]></script> </body></html>, width: 800, //wide enough to use firebug onselect: function(slide) { slide.slide(800, true); }}); calling int...
Simple Storage - Archive of obsolete content
read the experiment report for what we learned from it and the blog post announcing the first sdk
release for what we're up to next!
...the object can also be forced to
reload its data from disk by calling jetpack.storage.simple.open(), although the data comes loaded automatically.
jspage - Archive of obsolete content
e=="css1compat")?k.html:k.body; var i={x:a.pagex||a.clientx+k.scrollleft,y:a.pagey||a.clienty+k.scrolltop};var c={x:(a.pagex)?a.pagex-f.pagexoffset:a.clientx,y:(a.pagey)?a.pagey-f.pageyoffset:a.clienty}; if(j.match(/dommousescroll|mousewheel/)){var h=(a.wheeldelta)?a.wheeldelta/120:-(a.detail||0)/3;}var e=(a.which==3)||(a.button==2);var l=null;if(j.match(/over|out/)){switch(j){case"mouseover":l=a.
relatedtarget||a.fromelement; break;case"mouseout":l=a.
relatedtarget||a.toelement;}if(!(function(){while(l&&l.nodetype==3){l=l.parentnode;}return true;}).create({attempt:browser.engine.gecko})()){l=false; }}}}return $extend(this,{event:a,type:j,page:i,client:c,rightclick:e,wheel:h,
relatedtarget:l,target:g,code:b,key:m,shift:a.shiftkey,control:a.ctrlkey,alt:a.altkey,meta:a.metakey}); }});event.keys=ne...
...});element.nativeevents={click:2,dblclick:2,mouseup:2,mousedown:2,contextmenu:2,mousewheel:2,dommousescroll:2,mouseover:2,mouseout:2,mousemove:2,selectstart:2,selectend:2,keydown:2,keypress:2,keyup:2,focus:2,blur:2,change:2,reset:2,select:2,submit:2,load:1,unload:1,beforeunload:2,resize:1,move:1,domcontentloaded:1,readystatechange:1,error:1,abort:1,scroll:1}; (function(){var a=function(b){var c=b.
relatedtarget;if(c==undefined){return true;}if(c===false){return false;}return($type(this)!="document"&&c!=this&&c.prefix!="xul"&&!this.haschild(c)); };element.events=new hash({mouseenter:{base:"mouseover",condition:a},mouseleave:{base:"mouseout",condition:a},mousewheel:{base:(browser.engine.gecko)?"dommousescroll":"mousewheel"}}); })();element.properties.styles={set:function(a){this.setstyles(a);}};...
Plug-n-Hack Phase1 - Archive of obsolete content
for testing); plug-n-hack requires tool and service manifests to be served from the same origin as the api endpoints but, for testing purposes, ringleader (the firefox addon implementation of the browser component) allows you to set a preference to
relax or disable origin checks.
...
related links plug-n-hack overview ...
New Skin Notes - Archive of obsolete content
i could probably just eliminate it enti
rely.
... that'd work, too; you'd mentioned that it was very ra
rely used --beltzner the category template must be improved, it looks very unpolished comparing to rest of devmo.
Running Tamarin acceptance tests - Archive of obsolete content
$ cd tamarin-redux/test/acceptance $ export asc=/users/build/hg/tamarin-redux/utils/asc.jar $ export builtinabc=/users/build/hg/tamarin-redux/generated/builtin.abc $ export shellabc=/users/build/hg/tamarin-redux/generated/shell_toplevel.abc $ export avm=/users/build/hg/tamarin-redux/objdir-
release/shell/avmshell $ python runtests.py tamarin tests started: 2010-09-28 10:37:06.410676 current configuration: x64-mac-tvm-
release avm version: 5260:6d1899261bac executing 2532 tests against vm: /users/build/hg/builds/5260-6d1899261bac/mac/avmshell_64 2532 running abcasm/abs_helper.as skipping...
...it's un
reliable, losing its adb connection frequently.
Tamarin Build System Documentation - Archive of obsolete content
the acceptance tests are the majority and are run on all shells (
release,
release-debugger, debug, debug-debugger).
...; cd scripts edit environment.sh, change the basedir and buildsdir settings (around line 51) basedir=~/hg/tamarin-redux (path to my test repository) (next line) buildsdir=~/hg/builds (a directory to store downloaded builds) always set current working directory to the scripts directory when running a script run a script (e.g.) ../all/run-acceptance-
release.sh <optional hg revision number like 1902> how do i navigate the build status page?
Tamarin Roadmap - Archive of obsolete content
the tamarin roadmap is intended to provide visibility into planned features and
release dates.
...tc jan '09 feature links status integrate the tt string class tamarin:string implementation tamarin:strings bug 465506 complete enhanced c++ profiler enhance memory profiler to work in
release builds and be more performant in progress enable lir for arm targets bug 460764 complete amd64 nanojit bug 464476 in progress port nanojit to powerpc bug 458077 complete add mac-x64 and linux-x64 buildbots complete fail build on assertion in acceptance tests complete merge tracking bug bug 469836 in progress tc feb '09 spring backlog tbd.
TraceVis - Archive of obsolete content
the log can be postprocessed into a visualization that can be used to rapidly diagnose many tracing-
related performance issues.
...cd js/src autoconf213 mkdir opt-tracevis cd opt-tracevis ../configure --enable-tracevis make -j2 the resulting binary will be at dist/bin/js
relative to the current directory.
Anonymous Content - Archive of obsolete content
if anonymous content that contains an insertion point is removed, then any explicit children found underneath the insertion point are
relocated to any other insertion points that match.
... again, if all the children cannot be
relocated, then the anonymous content is destroyed.
Example Sticky Notes - Archive of obsolete content
mouse events sent to bindings are refactored, so event.target / event.
relatedtarget always points to the bound element, even if it was originated to/from a child.
...nt.type + ' priority set to: ' + this.priority); window.alert(str); ]]></handler> <handler event="mouseover"><![cdata[ this.$bg = this.style.backgroundcolor || '#ffff00'; this.style.backgroundcolor = '#ffcc00'; ]]></handler> <handler event="mouseout"><![cdata[ this.style.backgroundcolor = this.$bg; ]]></handler> </handlers> </binding> </bindings> notes.css .sticker { position:
relative; left: 0px; right: 0px; float: left; clear: none; width: 10em; height: 10em; overflow: visible; margin: 1em 1em; padding: 0.5em 0.5em; border: 2px solid blue; background-color: yellow; font: 1em normal "times new roman",serif; font-style: italic; cursor: default; } view this example ...
Creating XPI Installer Modules - Archive of obsolete content
the
relatively simple process of finding the appropriate resources (i.e.
...for a package such as this one with its own content but no special localization or custom skin, the contents.rdf file describes package in terms of its
relation to the "root" package of mozilla.
Learn XPI Installer Scripting by Example - Archive of obsolete content
this installer script is
relatively short, but it exercises most of the important features of the xpinstall api, and it can easily be used as a template for other more general software installations.
...note that until this point, the install calls you have been making on the install object are p
reliminary only.
XPJS Components Proposal - Archive of obsolete content
each .js file (let's call it a module) is started up and run in the context of a
relatively 'raw' js global object.
...it the module oks it then the xpjsmanager will
release its root of the module's global object and
release any hold over the objects in the module.
flex - Archive of obsolete content
the actual value is not
relevant unless there are other flexible elements within the same container.
...specifying a flex value of 0 has the same effect as leaving the flex attribute out enti
rely.
popup.position - Archive of obsolete content
« xul reference home position type: string the position attribute determines where the popup appears
relative to the element the user clicked to invoke the popup.
... note that a context menu will never respect this attribute, always appearing
relative to the mouse cursor.
Working With Directories - Archive of obsolete content
file and stream guide: [ nsiscriptableio | accessing files | getting file information | reading from files | writing to files | moving, copying and deleting files | uploading and downloading files | working with directories ] important note: the pages from the file and stream guide use the io object (nsiscriptableio), which was not available in any
released version of the platform (pending some fixes).
...other documentation on files and i/o not using the unavailable nsiscriptableio apis: code snippets: file i/o, open and save dialogs, reading textual data, writing textual data, list of file-
related error codes.
Getting File Information - Archive of obsolete content
file and stream guide: [ nsiscriptableio | accessing files | getting file information | reading from files | writing to files | moving, copying and deleting files | uploading and downloading files | working with directories ] important note: the pages from the file and stream guide use the io object (nsiscriptableio), which was not available in any
released version of the platform (pending some fixes).
...other documentation on files and i/o not using the unavailable nsiscriptableio apis: code snippets: file i/o, open and save dialogs, reading textual data, writing textual data, list of file-
related error codes.
Reading from Files - Archive of obsolete content
file and stream guide: [ nsiscriptableio | accessing files | getting file information | reading from files | writing to files | moving, copying and deleting files | uploading and downloading files | working with directories ] important note: the pages from the file and stream guide use the io object (nsiscriptableio), which was not available in any
released version of the platform (pending some fixes).
...other documentation on files and i/o not using the unavailable nsiscriptableio apis: code snippets: file i/o, open and save dialogs, reading textual data, writing textual data, list of file-
related error codes.
Uploading and Downloading Files - Archive of obsolete content
file and stream guide: [ nsiscriptableio | accessing files | getting file information | reading from files | writing to files | moving, copying and deleting files | uploading and downloading files | working with directories ] important note: the pages from the file and stream guide use the io object (nsiscriptableio), which was not available in any
released version of the platform (pending some fixes).
...other documentation on files and i/o not using the unavailable nsiscriptableio apis: code snippets: file i/o, open and save dialogs, reading textual data, writing textual data, list of file-
related error codes.
Writing to Files - Archive of obsolete content
file and stream guide: [ nsiscriptableio | accessing files | getting file information | reading from files | writing to files | moving, copying and deleting files | uploading and downloading files | working with directories ] important note: the pages from the file and stream guide use the io object (nsiscriptableio), which was not available in any
released version of the platform (pending some fixes).
...other documentation on files and i/o not using the unavailable nsiscriptableio apis: code snippets: file i/o, open and save dialogs, reading textual data, writing textual data, list of file-
related error codes.
IO - Archive of obsolete content
file and stream guide: [ nsiscriptableio | accessing files | getting file information | reading from files | writing to files | moving, copying and deleting files | uploading and downloading files | working with directories ] important note: the pages from the file and stream guide use the io object (nsiscriptableio), which was not available in any
released version of the platform (pending some fixes).
...other documentation on files and i/o not using the unavailable nsiscriptableio apis: code snippets: file i/o, open and save dialogs, reading textual data, writing textual data, list of file-
related error codes.
TOC - Archive of obsolete content
file and stream guide: [ nsiscriptableio | accessing files | getting file information | reading from files | writing to files | moving, copying and deleting files | uploading and downloading files | working with directories ] important note: the pages from the file and stream guide use the io object (nsiscriptableio), which was not available in any
released version of the platform (pending some fixes).
...other documentation on files and i/o not using the unavailable nsiscriptableio apis: code snippets: file i/o, open and save dialogs, reading textual data, writing textual data, list of file-
related error codes.
Menus - Archive of obsolete content
firefox context menu element id description
relevant context contentareacontextmenu the popup for the context menu when a web page is displayed in the browser area.
...rd images context-saveimage saves an image images context-sendimage sends an image in an email images context-setdesktopbackground sets an image as the desktop background images context-blockimage blocks an image images context-back goes back a page context-forward goes forward a page context-
reload
reloads a page context-stop stops loading a page context-bookmarkpage bookmarks a page context-savepage saves a page context-sendpagetodevice send page to device context-sendpage send page in an email context-viewbgimage views a background image context-undo undo editabl...
Introduction to XUL - Archive of obsolete content
relative placement of widgets, their interactions with each other, and optionally some of their configuration, will be controlled by a ui layout specified in a script whose structure is defined in this and
related documents.
... javascript is most safely kept in a separate file and included in the xul file <html:script language="javascript" src="our.js"/> or
relegated to the contents of a cdata section, to prevent the xml parser from choking on javascript which may look like xml content (a < character, for instance.) <html:script type="application/javascript"> <![cdata[ function lesser(a,b) { return a < b ?
addTab - Archive of obsolete content
« xul reference home addtab( url, referreruri, charset, postdata, owner, allowthirdpartyfixup ) addtab( url, {referreruri: ..., charset: ..., postdata: ..., owner: ..., allowthirdpartyfixup: ...,
relatedtocurrent: ...
...it also adds the
relatedtocurrent parameter; firefox uses this to decide whether the new tab should be inserted next to the current tab.
loadOneTab - Archive of obsolete content
« xul reference home loadonetab( url, referreruri, charset, postdata, loadinbackground, allowthirdpartyfixup ) loadonetab( url, { referreruri: ..., charset: ..., postdata: ..., inbackground: ..., allowthirdpartyfixup: ...,
relatedtocurrent: ...
... firefox 3.6 note the second form of this method was added in firefox 3.6; it adds the
relatedtocurrent parameter, and allows the parameters to be specified by name, in any order.
openPopup - Archive of obsolete content
« xul reference home openpopup( anchor , position , x , y , iscontextmenu, attributesoverride, triggerevent ) return type: no return value opens the popup
relative to a specified node at a specific location.
...an unanchored popup appears at the position specified by x and y,
relative to the viewport of the document containing the popup node.
Methods - Archive of obsolete content
goforward goforwardgroup gohome goto gotoindex goup hidepopup increase increasepage insertitem insertitemat invertselection loadgroup loadonetab loadtabs loaduri loaduriwithflags makeeditable movebyoffset moveto movetoalertposition onsearchcomplete ontextentered ontextreverted openpopup openpopupatscreen opensubdialog openwindow preferencefo
relement
reload
reloadalltabs
reloadtab
reloadwithflags removeallitems removeallnotifications removealltabsbut removecurrentnotification removecurrenttab removeitemat removeitemfromselection removenotification removeprogresslistener removesession removetab removetabsprogresslistener removetransientnotifications replacegroup reset rewind scrollbyindex scroll...
...bypixels scrolltoindex select selectall selectitem selectitemrange selecttabatindex setselectionrange showpane showpopup sizeto startediting stop stopediting swapdocshells syncsessions timedselect toggleitemselection
related dom element methods dom:element.addeventlistener dom:element.appendchild dom:element.comparedocumentposition dom:element.dispatchevent dom:element.getattribute dom:element.getattributenode dom:element.getattributenodens dom:element.getattributens dom:element.getelementsbytagname dom:element.getelementsbytagnamens dom:element.getfeature fixme: brokenlink dom:element.getuserdata dom:element.hasattribute dom:element.hasattributens dom:element.hasattributes dom:element.haschildnodes dom:element.insertbefore...
Extensions - Archive of obsolete content
as you cannot predict this order, you should not
rely on any menuitems being in particular positions in the presence of other extensions.
...this would be used to enable or disable commands
related to text editing.
currentIndex - Archive of obsolete content
you cannot
rely on this property to change or determine a tree selection, except for trees with seltype="single".
... (all trees have seltype="multiple" by default.) to
reliably change or determine a selection, instead use the nsitreeselection interface methods available via tree.view.selection.
Sorting and filtering a custom tree view - Archive of obsolete content
bel="weapon" flex="1" persist="width ordinal hidden" onclick="sort(this)" class="sortdirectionindicator"/> </treecols> <treechildren id="tree-children"/> </tree> </window> sort.js var table = null; var data = null; var tree; var filtertext = ""; function init() { tree = document.getelementbyid("tree"); loadtable(); } //this function is called every time the tree is sorted, filtered, or
reloaded function loadtable() { //remember scroll position.
...opvisiblerow) { return tree.treeboxobject.scrolltorow(topvisiblerow); } function inputfilter(event) { //do this now rather than doing it at every comparison var value = prepareforcomparison(event.target.value); setfilter(value); document.getelementbyid("clearfilter").disabled = value.length == 0; } function clearfilter() { document.getelementbyid("clearfilter").disabled = true; var filte
relement = document.getelementbyid("filter"); filte
relement.focus(); filte
relement.value = ""; setfilter(""); } function setfilter(text) { filtertext = text; loadtable(); } ...
Complete - Archive of obsolete content
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.
Adding Event Handlers - Archive of obsolete content
you may use
relative or absolute urls.
... for example, you may use urls of the following form: <script src="findfile.js"/> <script src="chrome://findfiles/content/help.js"/> <script src="http://www.example.com/js/items.js"/> this tutorial does not attempt to describe how to use javascript (except as
related to event handling) as this is a fairly large topic and there are plenty of other resources that are available for this.
Creating a Window - Archive of obsolete content
the name can be anything you want although it should be something
relevant.
...this is the default value, so you may leave the attribute off enti
rely if you wish to have vertical orientation.
Creating a Wizard - Archive of obsolete content
each page contains a single question or a set of
related questions.
... there are also
related onwizardback, onwizardnext and onwizardcancel attributes, which are called when the back, next and cancel buttons are pressed respectively.
More Button Features - Archive of obsolete content
the image is loaded from the url, which can be a
relative or absolute url, and then the image is displayed on the button.
...by using the value normal, or leaving the attribute out enti
rely, the image will be placed on the left side of the text.
Skinning XUL Files by Hand - Archive of obsolete content
the parent-child
relationship is more economical than the aforementioned contextual subgrouping, which searches the entire subtree of an element for the subelement.
... when you
reload the xul file you have been working on, the box element you have used to create the navigation area in the xul file appear as follows: the skinned browser is not much to look at right now -- and you may note that this basic skin has transgressed upon some of the skinning guidelines because it overrides color information, but you can get a sense of what the possibilities are with the comb...
XUL Event Propagation - Archive of obsolete content
and sometimes elements raise different events for the pressing down of the click and the
release.
..."alert('menu handler')"> <menupopup> <menuitem oncommand="alert('new item alert')" label="new" /> <menuitem label="open" /> <menuitem oncommand="alert('close handler')" label="close" /> </menupopup> </menu> <menu class="menu" label="edit"> <menupopup> <menuitem oncommand="alert('edit source handler')" label="edit source" /> <menuitem label="
reload" /> <menuitem label="view source" /> </menupopup> </menu> </vbox> <spring flex="1" /> </vbox> </window> in this file, the lowest-down, or "leaf" elements are the menuitems.
arrowscrollbox - Archive of obsolete content
« xul reference home [ examples | attributes | properties | methods |
related ] a box which provides scroll arrows along its edges for scrolling through the contents of the box.
...to enable the element, leave this attribute out enti
rely.
binding - Archive of obsolete content
« xul reference home [ examples | attributes | properties | methods |
related ] should be contained within a bindings element.
...tributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeeventlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata
related tbd ...
bindings - Archive of obsolete content
« xul reference home [ examples | attributes | properties | methods |
related ] used to specify a set of variable bindings for a rule.
...ributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeeventlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata
related tbd ...
box - Archive of obsolete content
« xul reference home [ examples | attributes | properties | methods |
related ] a container element which can contain any number of child elements.
...ributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeeventlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata
related elements vbox, hbox ...
caption - Archive of obsolete content
« xul reference home [ examples | attributes | properties | methods |
related ] a header for a groupbox.
...tributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeeventlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata
related elements groupbox, checkbox ...
column - Archive of obsolete content
« xul reference home [ examples | attributes | properties | methods |
related ] a single column in a columns element.
...ributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeeventlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata
related elements grid, columns, rows, row ...
columns - Archive of obsolete content
« xul reference home [ examples | attributes | properties | methods |
related ] defines the columns of a grid.
...ributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeeventlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata
related elements grid, column, rows, row.
content - Archive of obsolete content
« xul reference home [ examples | attributes | properties | methods |
related ] Éste elemento debería pertenecer a query ("consulta").
...tributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeeventlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata
relacionados tbd ...
deck - Archive of obsolete content
« xul reference home [ examples | attributes | properties | methods |
related ] an element that displays only one of its children at a time.
...ributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeeventlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata
related stack ...
dialog - Archive of obsolete content
« xul reference home [ examples | attributes | properties | methods |
related ] this element should be used in place of the window element for dialog boxes.
...
related elements dialogheader ...
dialogheader - Archive of obsolete content
« xul reference home [ examples | attributes | properties | methods |
related ] a heading row for a dialog box.
...ributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeeventlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata
related elements dialog, window ...
grid - Archive of obsolete content
« xul reference home [ examples | attributes | properties | methods |
related ] a grid is a layout type that arranges elements in rows and columns.
...ributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeeventlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata
related elements columns, column, rows, row.
groupbox - Archive of obsolete content
« xul reference home [ examples | attributes | properties | methods |
related ] the groupbox is used to group
related elements together.
...ributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeeventlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata
related interfaces nsiaccessibleprovider ...
hbox - Archive of obsolete content
« xul reference home [ examples | attributes | properties | methods |
related ] a container element which can contain any number of child elements.
...ributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeeventlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata
related elements box, vbox ...
keyset - Archive of obsolete content
« xul reference home [ examples | attributes | properties | methods |
related ] a container element for key elements.
...to enable the element, leave this attribute out enti
rely.
listcol - Archive of obsolete content
« xul reference home [ examples | attributes | properties | methods |
related ] a column in a listbox.
...ributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeeventlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata
related elements listbox, listcell, listcols, listhead, listheader, listitem ...
listcols - Archive of obsolete content
« xul reference home [ examples | attributes | properties | methods |
related ] a container for the columns of a listbox, each of which are created with the listcol element.
...ributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeeventlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata
related elements listbox, listcell, listcol, listhead, listheader, listitem ...
notificationbox - Archive of obsolete content
« xul reference home [ examples | attributes | properties | methods |
related ] the notificationbox element is used to display notifications above an element.
...
related elements notification ...
popupset - Archive of obsolete content
« xul reference home [ examples | attributes | properties | methods |
related ] a container for menupopup, panel and tooltip elements.
...ributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeeventlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata
related elements popup, menupopup ...
preferences - Archive of obsolete content
« xul reference home [ examples | attributes | properties | methods |
related ] overview <preferences> is a container for <preference> elements.
...ributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeeventlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata
related preferences system documentation: introduction: getting started | examples | troubleshooting reference: prefwindow | prefpane | preferences | preference | xul attributes ...
progressmeter - Archive of obsolete content
« xul reference home [ examples | attributes | properties | methods |
related ] a meter which can be used to display the progress of a lengthy operation.
...ributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeeventlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata
related interfaces nsiaccessibleprovider ...
row - Archive of obsolete content
« xul reference home [ examples | attributes | properties | methods |
related ] a single row in a rows element.
...ributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeeventlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata
related elements grid, columns, column, rows.
scrollbox - Archive of obsolete content
« xul reference home [ examples | attributes | properties | methods |
related ] a box that has additional functions that can be used to scroll the content.
...do this instead: var xpcominterface =scrollbox_element.boxobject.queryinterface( components.interfaces.nsiscrollboxobject); xpcominterface.ensureelementisvisible(child_element_to_make_visible); see the nsiscrollboxobject api for other scroll-
related methods.
separator - Archive of obsolete content
« xul reference home [ examples | attributes | properties | methods |
related ] creates a small separating gap between elements.
...
related elements spacer, splitter, menuseparator, toolbarseparator, treeseparator.
spacer - Archive of obsolete content
« xul reference home [ examples | attributes | properties | methods |
related ] an element that takes up space but does not display anything.
...ributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeeventlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata
related elements separator, splitter ...
statusbar - Archive of obsolete content
« xul reference home [ examples | attributes | properties | methods |
related ] an element used to create a status bar, usually placed along the bottom of a window.
...tributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeeventlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata
related elements statusbarpanel interfaces nsiaccessibleprovider ...
stringbundle - Archive of obsolete content
« xul reference home [ examples | attributes | properties | methods |
related ] an element which can be used to load localized resources from property files.
...ributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeeventlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata
related xul property files ...
tabbox - Archive of obsolete content
« xul reference home [ examples | attributes | properties | methods |
related ] a container used to display a set of tabbed pages of elements.
...ributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeeventlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata
related elements tabs, tab, tabpanels, tabpanel.
tabpanel - Archive of obsolete content
« xul reference home [ examples | attributes | properties | methods |
related ] a individual panel in a tabpanels element.
...ributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeeventlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata
related elements tabbox, tabs, tab, tabpanels.
tabpanels - Archive of obsolete content
« xul reference home [ examples | attributes | properties | methods |
related ] a container to hold the set of pages in a tabbox.
...ributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeeventlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata
related elements tabbox, tabs, tab, tabpanel.
titlebar - Archive of obsolete content
« xul reference home [ examples | attributes | properties | methods |
related ] boxes created with the titlebar element behave just like a normal window titlebar: when the element is clicked and dragged, the window moves with it.
...it will close if the mouse button is
released.
toolbar - Archive of obsolete content
« xul reference home [ examples | attributes | properties | methods |
related ] a container which typically contains a row of buttons.
...
related elements toolbarbutton, toolbargrippy, toolbaritem, toolbarpalette, toolbarseparator, toolbarset, toolbarspacer, toolbarspring, toolbox interfaces nsiaccessibleprovider ...
toolbargrippy - Archive of obsolete content
« xul reference home [ examples | attributes | properties | methods |
related ] not in firefox the notch on the side of a toolbar which can be used to collapse and expand it.
...ributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeeventlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata
related elements toolbar, toolbarbutton, toolbaritem, toolbarpalette, toolbarseparator, toolbarset, toolbarspacer, toolbarspring, toolbox interfaces nsiaccessibleprovider ...
toolbaritem - Archive of obsolete content
« xul reference home [ examples | attributes | properties | methods |
related ] firefox only an item that appears on a toolbar.
...ributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeeventlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata
related elements toolbar, toolbarbutton, toolbargrippy, toolbarpalette, toolbarseparator, toolbarset, toolbarspacer, toolbarspring, toolbox ...
toolbarpalette - Archive of obsolete content
« xul reference home [ examples | attributes | properties | methods |
related ] firefox only the item is a palette of available toolbar items.
...ributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeeventlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata
related elements toolbar, toolbarbutton, toolbargrippy, toolbaritem, toolbarseparator, toolbarset, toolbarspacer, toolbarspring, toolbox ...
toolbarseparator - Archive of obsolete content
« xul reference home [ examples | attributes | properties | methods |
related ] creates a separator between groups of toolbar items.
...tributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeeventlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata
related elements toolbar, toolbarbutton, toolbargrippy, toolbaritem, toolbarpalette, toolbarset, toolbarspacer, toolbarspring, toolbox ...
toolbarset - Archive of obsolete content
« xul reference home [ examples | attributes | properties | methods |
related ] firefox only this element is used as a container for custom toolbars, which are added in the custom toolbar dialog.
...tributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeeventlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata
related elements toolbar, toolbarbutton, toolbargrippy, toolbaritem, toolbarpalette, toolbarseparator, toolbarspacer, toolbox ...
toolbarspacer - Archive of obsolete content
« xul reference home [ examples | attributes | properties | methods |
related ] firefox only a space between toolbar items.
...ributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeeventlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata
related elements toolbar, toolbarbutton, toolbargrippy, toolbaritem, toolbarpalette, toolbarseparator, toolbarset, toolbarspring, toolbox interfaces nsiaccessibleprovider ...
toolbarspring - Archive of obsolete content
« xul reference home [ examples | attributes | properties | methods |
related ] firefox only a flexible space between toolbar items.
...tributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeeventlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata
related elements toolbar, toolbarbutton, toolbargrippy, toolbaritem, toolbarpalette, toolbarseparator, toolbarset, toolbarspacer, toolbox interfaces nsiaccessibleprovider ...
treechildren - Archive of obsolete content
« xul reference home [ examples | attributes | properties | methods |
related ] this element is the body of the tree.
...ct" label="subject" flex="2"/> </treecols> <treechildren> <treeitem> <treerow> <treecell label="joe@somewhere.com"/> <treecell label="top secret plans"/> </treerow> </treeitem> <treeitem> <treerow> <treecell label="mel@whereever.com"/> <treecell label="let's do lunch"/> </treerow> </treeitem> </treechildren> </tree>
related elements tree, treecols, treecol, treeitem, treerow, treecell and treeseparator.
treecols - Archive of obsolete content
« xul reference home [ examples | attributes | properties | methods |
related ] a group of treecol elements.
...ributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeeventlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata
related elements tree, treecol, treechildren, treeitem, treerow, treecell and treeseparator.
treeitem - Archive of obsolete content
« xul reference home [ examples | attributes | properties | methods |
related ] a treeitem should be placed inside a treechildren element and should contain treerow elements.
...ributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeeventlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata
related elements tree, treecols, treecol, treechildren, treerow, treecell and treeseparator.
treerow - Archive of obsolete content
« xul reference home [ examples | attributes | properties | methods |
related ] a single row in a tree.
...ributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeeventlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata
related elements tree, treecols, treecol, treechildren, treeitem, treecell and treeseparator.
treeseparator - Archive of obsolete content
« xul reference home [ examples | attributes | properties | methods |
related ] used to place a separator row in a tree.
...ributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeeventlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata
related elements tree, treecols, treecol, treechildren, treeitem, treerow and treecell.
vbox - Archive of obsolete content
« xul reference home [ examples | attributes | properties | methods |
related ] a container element which can contain any number of child elements.
...ributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeeventlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata
related elements box, hbox ...
wizardpage - Archive of obsolete content
« xul reference home [ examples | attributes | properties | methods |
related ] this element defines a page in a wizard.
...), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeeventlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata
related wizard ...
Building XULRunner - Archive of obsolete content
a basic minimal mozconfig which will build a
release configuration of xulrunner is: mk_add_options moz_co_project=xulrunner mk_add_options moz_objdir=@topsrcdir@/obj-xulrunner ac_add_options --enable-application=xulrunner #uncomment the following line if you don't want to build javaxpcom: #ac_add_options --disable-javaxpcom cvs tags and xulrunner versions older xulrunner
releases where tagged in cvs with (for instance xulrunner_1_8_0_5_
rel...
... for instance xulrunner 1.8.1.3, the corresponding tag is cvs is : firefox_2_0_0_3_
release to find out how those firefox tags and xulrunner version maps, check out the file mozilla/config/milestone.txt .
Creating XULRunner Apps with the Mozilla Build System - Archive of obsolete content
in this case we're creating a debug build, so you'd have to change the
relevant options if you want a
release build instead.
...the public/ and src/ directories that you put in the components/ directory will look the same as for an extension that includes c++ components, so you can use the
relevant sections of creating custom firefox extensions with the mozilla build system as a reference.
Deploying XULRunner - Archive of obsolete content
current xulrunner is a stable developer preview
release.
... this means that while the
release is immature in some areas such as embedding, application deployment, and os integration, it can be used by developers that are
releasing standalone xul applications.
XULRunner FAQ - Archive of obsolete content
there is no intention to do this for official
release versions of firefox.
...this is a developer preview
release: additional features for installing and deploying xulrunner and applications based on xulrunner will be available in future
releases.
calICalendarView - Archive of obsolete content
in general, therefore, a calicalendarview will not provide its own controller, but rather
rely on other code to set this attribute.
...
related interfaces calicalendarviewcontroller calidecoratedview example code both calendar-multiday-view and calendar-month-view show examples, albeit complex, of implementations of this interface.
Format - Archive of obsolete content
summary: mozilla.dev.planning - july 17-23, 2006 announcements firefox 2/gecko 1.8.1 bug approvals starting on friday july 21 at 10:00a pdt the
release triage team will no longer be accepting bugs unless they meet one of the posted criteria.
... firefox 1.5.0.5 planned
release - 2006/07/26 discussions firefox survey feedback requested rachel werner (mozilla corp marketing intern) requested feedback on a proposed user survey.
2006-09-29 - Archive of obsolete content
updated l10n status for sunbird 0.3
release according to simon paquet, we now have a full l10n comparison on the trunk between en-us and all locales with a calendar localization.
... sept 20 brief status meeting the meeting consisted enti
rely of the status and details of sunbird 0.3.
2006-10-06 - Archive of obsolete content
summary: mozilla.dev.apps.calendar - september 29 - october 6, 2006 announcements sunbird and lightning 0.3rc1 available gordon announced the candidate (rc) builds for sunbird and lightning 0.3 are
released.
... sunbird
release notes lightning
release notes sunbird_0_3_
release tag being created lilmatt announced the sunbird 0.3 realse tag being created.
2006-10-06 - Archive of obsolete content
summary: mozilla.dev.apps.thunderbird - september 30-october 06, 2006 announcements mac user needed scott macgregor announced that .mac support and a dynamically add isp account feature has been added to the thunderbird account manager, however, testing is required before
release can be issued.
...
related: bug 342065 meetings none for this week.
2006-11-24 - Archive of obsolete content
summary: mozilla.dev.apps.thunderbird - november 18 - 24, 2006 announcements none for this week discussions issues with 2.0 features there's renewed discussion on why certain features were removed in the 2.0
release, and the addition of support for s/mime and not pgp/gpg encryption.
...exact cause is unknown but may be
related to multiprocessor platforms.
Extentsions FAQ - Archive of obsolete content
what is the valid location and things needed to to
release a mozilla extension on mozallia site?
...are there any fundamental rules
related to threading in xpcom, and if so, where are these defined?
2006-11-17 - Archive of obsolete content
.l10n - november 17, 2006 announcements seamonkey 1.1b in russian (ru-ru) seamonkey 1.1b in russian (ru-ru) is uploaded to ftp.mozilla.org seamonkey 1.0.6 in russian (ru-ru) seamonkey 1.0.6 in russian (ru-ru) is uploaded to ftp.mozilla.org seamonkey 1.0.6 in czech (cs-cz) seamonkey 1.0.6 in czech (cs-cz) is uploaded to ftp.mozilla.org seamonkey 1.0.6 he-il seamonkey 1.0.6 he-il is
released.
... seamonkey 1.0.6 in french seamonkey 1.0.6 in french (fr-fr) is
released.
2006-11-24 - Archive of obsolete content
summary: mozilla.dev.l10n - november 24, 2006 announcements thunderbird 2
release schedule for localizations beta 1 freeze for thunderbird 2 is scheduled on december 4th (en-us only).
...final
release date in in early 2007.
2006-07-17 - Archive of obsolete content
announcements sfirefox 2/gecko 1.8.1 bug approvals starting on friday july 21 at 10:00a pdt the
release triage team will no longer be accepting bugs unless they meet one of the posted criteria.
... firefox 1.5.0.5 planned
release - 2006/07/26 discussions firefox survey feedback requested rachel werner (mozilla corp marketing intern) requested feedback on a proposed user survey.
2006-11-10 - Archive of obsolete content
other important notes are contained in the link above firefox and thunderbird 1.5.0.8 were
released firefox and thunderbird 1.5.0.8 were
released on november 7, 2006 blocker nomination and code freeze for 1.5.0.9/2.0.0.1 blocker nomination is due on november 10.
... code freeze for these versions is on november 26 version numbering changes paul reed announced changes to the way version numbers are done for pre-
releases.
2006-10-27 - Archive of obsolete content
multiple presshells discussion on why current interfaces allow for multiple presshells and how the
relationships work for the following objects: docshell, presshell, prescontext, document, domwindow, widget, docshell and contentviewer.
... boris zbarsky explains in detail the
relationships between these objects.
2006-10-13 - Archive of obsolete content
summary: mozilla.dev.apps.calendar - october 6 - october 13, 2006 announcements sunbird and lightning 0.3rc2 available matthew willis announced the second
release candidate builds for sunbird and lightning 0.3 are
released.
... sunbird
release notes lightning
release notes inter-operability test day on tuesday october 17 interoperability testing for sunbird on tuesday.
NPN_SetValue - Archive of obsolete content
if unsuccessful, the function should return the most
relevant npapi error code.
...in windowless mode all the browser to plugin communications
related to drawing, mouse, and keyboard input are accomplished via npp_handleevent.
NPWindow - Archive of obsolete content
syntax typedef struct _npwindow { void* window; /* platform specific handle */ uint32_t x; /* coordinates of top left corner */ uint32_t y; /*
relative to a netscape page */ uint32_t width; /* maximum window size */ uint32_t height; nprect cliprect; /* clipping rectangle coordinates */ #ifdef xp_unix void * ws_info; /* platform-dependent additional data */ #endif /* xp_unix */ npwindowtype type; /* window or drawable target */ } npwindow; fields the data structure has the following fields: window platform-specific handle to a native window element in the ne...
... x, y the x and y coordinates for the top left corner of the plug-in
relative to the page (and thus
relative to the origin of the drawable).
Syndicating content with RSS - Archive of obsolete content
when this is the case, the html web page can let people and machines know about the feed by using the <link> element, like this: <link
rel="alternate" type="application/rss+xml" href="http://example.com/feed" /> adding the <a> while use of the html <link> element is powerful, it is mostly hidden.
... linking from the the html web page where the data in an rss feed is also contained makes the rss feed available for use: <a
rel="alternate" type="application/rss+xml" href="http://example.com/feed">...</a> feed icons rss (and other) feeds use a special icon.
Digital Signatures - Archive of obsolete content
tamper detection and
related authentication techniques
rely on a mathematical function called a one-way hash (also called a message digest).
...the keys are
related mathematically, but the parameters are chosen so that calculating the private key from the public key is either impossible or prohibitively expensive.the encrypted hash, along with other information, such as the hashing algorithm, is known as a digital signature.
Encryption and Decryption - Archive of obsolete content
in most cases, two
related functions are employed, one for encryption and the other for decryption.
... because it is
relatively trivial to break an rsa key, an rsa public-key encryption cipher must have a very long key, at least 1024 bits, to be considered cryptographically strong.
Introduction to SSL - Archive of obsolete content
in addition, ssl 2.0 support is enti
rely removed in firefox 8.
... however, since 40-bit ciphers can be broken
relatively quickly, administrators whose user communities can use stronger ciphers without violating export restrictions should disable the 40-bit ciphers if they are concerned about access to data by eavesdroppers.
Vulnerabilities - Archive of obsolete content
however, software flaws are pu
rely negative—they provide no positive benefit to security or functionality—while software feature misuse vulnerabilities occur as a result of providing additional features.
... for example, a setting that disables all use of html in emails has a significant impact on both security and functionality, so a vulnerability
related to this setting would be a misuse vulnerability.
Common Firefox theme issues and solutions - Archive of obsolete content
if your firefox button
relies on some button styling from toolbarbuttons.css you'll need to add comparable style rules for #appmenu-toolbar-button in browser.css.
...if you are using the extension console² you can easily filter out content
related messages to see just chrome issues.
Using IO Timeout And Interrupt On NT - Archive of obsolete content
the only
reliable way to cancel outstanding overlapped io request that works on both nt 3.51 and 4.0 is to close the file descriptor, hence the rule of thumb stated at the beginning of this memo.
... a
related known bug is that timeout and interrupt don't work for <tt>pr_connect()</tt> on nt.
azimuth - Archive of obsolete content
leftwards: moves the sound counter-clockwise by 20 degrees,
relative to the current angle.
... rightwards: moves the sound clockwise by 20 degrees,
relative to the current angle.
New in JavaScript 1.1 - Archive of obsolete content
netscape navigator 3.0 was
released on august 19, 1996.
... isnan() now works on every platform (not only unix anymore) parsefloat() and parseint() now return nan on all platforms, if the first character of the specified string cannot be converted to a number; in previous
releases, it returned nan on solaris and irix and zero on all other platforms.
New in JavaScript 1.5 - Archive of obsolete content
this version was included in netscape navigator 6.0 was
released on november 14, 2000 and was also used in later versions of netscape navigator and firefox 1.0.
... you can compare javascript 1.5 to jscript version 5.5 and internet explorer 5.5, which was
released in july 2000.
MSX Emulator (jsMSX) - Archive of obsolete content
they present an interesting testbed for pushing the current javascript implementations to their limits and for comparing their
relative speed.
...version 1.0 will
release an optimized javascript engine for msx 1.0.
Back to the Server: Server-Side JavaScript On The Rise - Archive of obsolete content
in recent developments we also see the advent of other performant engines for javascript such as v8 from google and squir
relfish for webkit, these engines are raising the bar on performance and help to maintain a competitive environment that will hopefully direct competitive focus on the performance aspect of all the major javascript implementations.
... listing 6 - creating the user interface <link href="/jaxer_examples/js/ext-2.1/resources/css/ext-all.css" type="text/css"
rel="stylesheet"/> <script src="/jaxer_examples/js/ext-2.1/adapter/ext/ext-base.js"/> <script src="/jaxer_examples/js/ext-2.1/ext-all.js"/> <link href="/jaxer_examples/css/main.css" type="text/css"
rel="stylesheet"/> <script runat="both" src="/jaxer_examples/js/validatecomments.js"/> <script> var txt_name; var txt_email; var txt_message; var btn_comments; var form_comments; ext.onready( function(...
Writing JavaScript for XHTML - Archive of obsolete content
the easy solution is to do away with the commenting enti
rely: <script type="text/javascript"> window.alert("hello world!"); </script> this will work so long as your code doesn't contain characters which are "special" in xml, which usually means < and &.
.../*]]>*/--></style> see this document for more on the issues
related to application/xhtml+xml and text/html (at least as far as xhtml 1.* and html 4; html5 addresses many of these problems).
XForms Select Element - Archive of obsolete content
the data binding restriction to simple content may be
relaxed when an itemset element is used, which allows the available choices to be obtained from an xforms model.
... the
relaxation happens when the itemset element specifies the item value using a copy (see spec) element.
XForms Select1 Element - Archive of obsolete content
the data binding restriction to simple content may be
relaxed when an itemset element is used, which allows the available choices to be obtained from an xforms model.
... the
relaxation happens when the itemset element specifies the item value using a copy (see spec) element.
XForms - Archive of obsolete content
the last official
release has been done for firefox 3.6 and is available for download on addons.mozilla.org.
... tools xforms validator xforms buddy
related topics extensions, html, xhtml, xml, xpath ...
RDF in Fifty Words or Less - Archive of obsolete content
first, rdf is a graph-based model for describing internetresources (like web pages and email messages), and how these resources
relate to one another.
...or you might want to
relate a bookmark to another bookmark, or keep it in multiple "folders" at once.
XQuery - Archive of obsolete content
xquery is a w3c standard language which is meant to be for xml what sql is for
relational data--i.e., the ability to search, sort, extract, and remold data.
... while xquery is currently not supported in firefox (whether through javascript to developers or to browser users), at least one extension has been developed to give a p
reliminary support for xquery for browser users (and serving as a simple model for how xquery can be implemented within extensions).
Common causes of memory leaks in extensions - Extensions
all zombie compartments in extensions are caused by a failure to
release resources appropriately in certain circumstances, such as when a window is closed, a page unloads, or an extension is disabled or removed.
...when your add-on gets updated and re-enabled, the previous module version that is still loaded will be used, which might break your add-on enti
rely.
Desktop mouse and keyboard controls - Game development
ning the key codes, for example: var keyboardhelper = { left: 37, up: 38, right: 39, down: 40 }; that way instead of using the codes to compare the input in the handler functions we could do something like this, which is arguably easier to remember: if(event.keycode == keyboardhelper.left) { leftpressed = true; } note: you can also find a list if the different keycodes and what keys they
relate to in the keycode reference page.
...we can assign actions directly to the buttons: this.buttonshoot = this.add.button(this.world.width*0.5, 0, 'button-alpha', null, this); this.buttonshoot.oninputdown.add(this.shootingpressed, this); this.buttonshoot.oninputup.add(this.shooting
released, this); the button used for shooting works perfectly fine on both the mobile and desktop approach.
Efficient animation for web games - Game development
to take a concrete example, if you start a css transition to move something from off-screen so that it is fully visible on-screen, the browser knows that the
related content will end up completely visible to the user and can then pre-render that content.
... measure performance there are some popular animation-
related libraries and ui toolkits with animation functions that still do things like using settimeout to drive their animations, drive all their animations completely individually, or other similar things that aren’t conducive to maintaining a high frame-rate.
WebRTC data channels - Game development
reliable channels guarantee that messages you send arrive at the other peer and in the same order in which they're sent.
... un
reliable channels make no such guarantees; messages aren't guaranteed to arrive in any particular order and, in fact, aren't guaranteed to arrive at all.
Mouse controls - Game development
add the following function to your code, below the previous line you added: function mousemovehandler(e) { var
relativex = e.clientx - canvas.offsetleft; if(
relativex > 0 &&
relativex < canvas.width) { paddlex =
relativex - paddlewidth/2; } } in this function we first work out a
relativex value, which is equal to the horizontal mouse position in the viewport (e.clientx) minus the distance between the left edge of the canvas and left edge of the viewport (canvas.offsetleft) — effectively thi...
...if the
relative x pointer position is greater than zero and lower than the canvas width, the pointer is within the canvas boundaries, and the paddlex position (anchored on the left edge of the paddle) is set to the
relativex value minus half the width of the paddle, so that the movement will actually be
relative to the middle of the paddle.
Track the score and win - Game development
ar b = bricks[c][r]; if(b.status == 1) { if(x > b.x && x < b.x+brickwidth && y > b.y && y < b.y+brickheight) { dy = -dy; b.status = 0; score++; if(score == brickrowcount*brickcolumncount) { alert("you win, congratulations!"); document.location.
reload(); clearinterval(interval); // needed for chrome to end game } } } } } } thanks to this, your users can actually win the game when they destroy all the bricks, which is quite important when it comes to games.
... the document.location.
reload() function
reloads the page and starts the game again once the alert button is clicked.
Build the brick field - Game development
rendering the brick image next, let's load the image of the brick — add the following load.image() call just below the others: function p
reload() { // ...
...info.padding))+brickinfo.offset.left; var bricky = (r*(brickinfo.height+brickinfo.padding))+brickinfo.offset.top; newbrick = game.add.sprite(brickx, bricky, 'brick'); game.physics.enable(newbrick, phaser.physics.arcade); newbrick.body.immovable = true; newbrick.anchor.set(0.5); bricks.add(newbrick); } } } if you
reload index.html at this point, you should see the bricks printed on screen, at an even distance from one another.
Extra lives - Game development
instead of executing an anonymous function and showing the alert right away : ball.events.onoutofbounds.add(function(){ alert('game over!'); location.
reload(); }, this); we will assign a new function called ballleavescreen; delete the previous event handler (shown above) and replace it with the following line: ball.events.onoutofbounds.add(ballleavescreen, this); we want to decrease the number of lives every time the ball leaves the canvas.
...lives); lifelosttext.visible = true; ball.reset(game.world.width*0.5, game.world.height-25); paddle.reset(game.world.width*0.5, game.world.height-5); game.input.ondown.addonce(function(){ lifelosttext.visible = false; ball.body.velocity.set(150, -150); }, this); } else { alert('you lost, game over!'); location.
reload(); } } instead of instantly printing out the alert when you lose a life, we first subtract one life from the current number and check if it's a non-zero value.
Game over - Game development
add the following lines just below the previous new one: ball.checkworldbounds = true; ball.events.onoutofbounds.add(function(){ alert('game over!'); location.
reload(); }, this); adding those lines will make the ball check the world (in our case canvas) bounds and execute the function bound to the onoutofbounds event.
... when you click on the resulting alert, the page will be
reloaded so you can play again.
Physics - Game development
final code check the latest code should look like this: var ball; function p
reload() { game.scale.scalemode = phaser.scalemanager.show_all; game.scale.pagealignhorizontally = true; game.scale.pagealignvertically = true; game.stage.backgroundcolor = '#eee'; game.load.image('ball', 'img/ball.png'); } function create() { game.physics.startsystem(phaser.physics.arcade); ball = game.add.sprite(50, 50, 'ball'); game.physics.enable(ball, phaser.phys...
...ics.arcade); ball.body.velocity.set(150, 150); } function update() { } try
reloading index.html again — the ball should now be moving constantly in the given direction.
Touch Event Horizon - Game development
this article is for touch event horizon and a game
related to it touch gestures and events link the example game github repository live demo setting up the canvas counting the taps touchstart, touchend collecting the bonus touchmove future developments summary this tutorial shows how to use touch events to create a game on a <canvas>.
... this is a multi-player game
relying on the tap and drag gestures.
Visual-js game engine - Game development
/socket.io/download/ ( also implemented intro build.js ) webgl2 based on : copyright (c) 2014 tappali ekanathan keestu (keestu@gmail.com) gnu general public license obj loader : https://github.com/frenchtoast747/webgl-obj-loader textures download from http://textures.com more texture downloads http://www.textures4photoshop.com/ female body v3.blend this file has been
released by andrescuccaro under the following license: creative commons attribution 3.0 about gui for windows (canvas2d part only) : windows gui application version 1.0 (using visual-js 0.9 lib) important : you will need net 4.5.2 minimum also redistribution pack for c++ how to start project ?
... i make strong
relation with webpack and project .
Pseudo-classes and pseudo-elements - Learn web development
once again the
relevant mdn page for each selector is helpful in explaining browser support.
... the ::first-line pseudo-element selector will do this for you
reliably — if the number of words increases and decreases it will still only select the first line.
Flexbox - Learn web development
for a long time, the only
reliable cross browser-compatible tools available for creating css layouts were things like floats and positioning.
...it is
relative to other flex items, meaning that giving each flex item a value of 400000 would have exactly the same effect.
Floats - Learn web development
nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate.</p> </div> in your css, add the following rule for the .wrapper class and then
reload the page: .wrapper { background-color: rgb(79,185,227); padding: 10px; color: #fff; } in addition, remove the original .cleared class: .cleared { clear: left; } you will see that, just like in the example where we put a background color on the paragraph, the background color runs behind the float.
... add the following css to our example: .wrapper::after { content: ""; clear: both; display: block; } now
reload the page and the box should clear.
Multiple-column layout - Learn web development
the column-count property will create as many columns as the value you give it, so if you add the following css to your stylesheet and
reload the page, you will get three columns: .container { column-count: 3; } the columns that you create have flexible widths — the browser works out how much space to assign each column.
... .card { break-inside: avoid; page-break-inside: avoid; background-color: rgb(207,232,220); border: 2px solid rgb(79,185,227); padding: 10px; margin: 0 0 1em 0; }
reload the page and your boxes should stay in one piece.
Practical positioning examples - Learn web development
here we simply set a fixed height to make sure the panels fit snugly inside the info-box, position
relative to set the <div> as the positioning context, so you can then place positioned child elements
relative to it and not the <html> element, and finally we clear the float set in the css above so that it doesn't interfere with the remainder of the layout.
... .info-box .panels { height: 352px; position:
relative; clear: both; } finally for this section, we will style the individual <article> elements that comprise our panels.
Responsive design - Learn web development
1vw is equal to one percent of the viewport width, meaning that if you set your font size using vw, it will always
relate to the size of the viewport.
... h1 { font-size: 6vw; } the problem with doing the above is that the user loses the ability to zoom any text set using the vw unit, as that text is always
related to the size of the viewport.
What is CSS? - Learn web development
it can be used to create layout — for example turning a single column of text into a layout with a main content area and a sidebar for
related information.
...it is however worth knowing that they exist, understanding the
relationship between the css you are using, browser support (see below), and the specs.
How does the Internet work? - Learn web development
deeper dive a simple network when two computers need to communicate, you have to link them, either physically (usually with an ethernet cable) or wi
relessly (for example with wifi or bluetooth systems).
... note: for the rest of this article, we will only talk about physical cables, but wi
reless networks work the same.
What is a web server? - Learn web development
hosting files first, a web server has to store the website's files, namely all html documents and their
related assets, including images, css stylesheets, javascript files, fonts, and video.
...for example,
relying on http alone, a server can't remember a password you typed or remember your progress on an incomplete transaction.
Sending form data - Learn web development
its value must be a valid
relative or absolute url.
... in this example, the data is sent to an absolute url — https://example.com: <form action="https://example.com"> here, we use a
relative url — the data is sent to a different url on the same origin: <form action="/somewhere_else"> when specified with no attributes, as below, the <form> data is sent to the same page that the form is present on: <form> note: it's possible to specify a url that uses the https (secure http) protocol.
Your first form - Learn web development
it's beyond the scope of this article to cover the user experience of forms, but if you want to dig into that topic you should read the following articles: smashing magazine has some good articles about forms ux, including an older but still
relevant extensive guide to web form usability article.
...ultiline text fields with their labels */ vertical-align: top; /* provide space to type some text */ height: 5em; } .button { /* align buttons with the text fields */ padding-left: 90px; /* same size as the label elements */ } button { /* this extra margin represent roughly the same space as the space between the labels and their text fields */ margin-left: .5em; } save and
reload, and you'll see that your form should look much less ugly.
Web forms — Working with user data - Learn web development
the above text is a good indicator as to why we've put web forms into its own standalone module, rather than trying to mix bits of it into the html, css, and javascript topic areas — form elements are more complex than most other html elements, and they also require a close marriage of
related css and javascript techniques to get the most out of them.
... the html5 input types here we continue our deep dive into the <input> element, looking at the additional input types provided when html5 was
released, and the various ui controls and data collection enhancements they provide.
CSS basics - Learn web development
paste the following line in the head (between the <head> and </head> tags): <link href="styles/style.css"
rel="stylesheet"> save index.html and load it in your browser.
...it looks something like this: <link href="https://fonts.googleapis.com/css?family=open+sans"
rel="stylesheet"> this code links your page to a style sheet that loads the open sans font family with your webpage.
Installing basic software - Learn web development
office document editors are not suitable for this use, as they
rely on hidden elements that interfere with the rendering engines used by web browsers.
...choose your operating system below and click the
relevant links to download installers for your favorite browsers: linux: firefox, chrome, opera, brave.
Define terms with HTML - Learn web development
in other words, there's an implicit
relationship between the <dfn> element and its container.
... if you want a more formal
relationship, or your definition consists of only one sentence rather than the whole paragraph, you can use the aria-describedby attribute to associate a term more formally with its definition: <p> <span id="ff"> <dfn aria-describedby="ff">firefox</dfn> is the web browser created by the mozilla foundation.
Getting started with HTML - Learn web development
while the names cor
relate by default, changing the css display type doesn't change the category of the element, and doesn't affect which elements it can contain and which elements it can be contained in.
...this is enti
rely acceptable.
Video and audio content - Learn web development
take a look at our next example: <video controls width="400" height="400" autoplay loop muted p
reload="auto" poster="poster.png"> <source src="rabbit320.mp4" type="video/mp4"> <source src="rabbit320.webm" type="video/webm"> <p>your browser doesn't support html video.
... p
reload used for buffering large files; it can take one of three values: "none" does not buffer the file "auto" buffers the media file "metadata" buffers only the metadata for the file you can find the above example available to play live on github (also see the source code.) note that we haven't included the autoplay attribute in the live version — if the video starts to play as s...
HTML table advanced features and accessibility - Learn web development
rather than have a screenreader read out the contents of many cells just to find out what the table is about, he or she can
rely on a caption and then decide whether or not to read the table in greater detail.
... using column and row headers screenreaders will identify all headers and use them to make programmatic associations between those headers and the cells they
relate to.
Looping code - Learn web development
skipping iterations with continue the continue statement works in a similar manner to break, but instead of breaking out of the loop enti
rely, it skips to the next iteration of the loop.
... if the square root is an integer, we skip past the if block enti
rely so the continue statement is not executed; instead, we concatenate the current i value plus a space on to the end of the paragraph content.
Function return values - Learn web development
this little page will allow you to enter a number into the text box, and display different numbers
related to it in the paragraph below.
... some extra function
related tips: look at another example of writing error handling into functions.
Test your skills: Events - Learn web development
events 1 in our first events-
related task, you need to create a simple event handler that causes the text inside the button (btn) to change when it is clicked on, and change back when it is clicked again.
... events 3 in our final events-
related task, you need to set an event listener on the <button>s' parent element (<div class="button-bar"> ...
Making decisions in your code — conditionals - Learn web development
go to the beach, or the park, and get an ice cream.'; } else if (choice === 'rainy') { para.textcontent = 'rain is falling outside; take a rain coat and an umb
rella, and don\'t stay out for too long.'; } else if (choice === 'snowing') { para.textcontent = 'the snow is coming down — it is freezing!
...go to the beach, or the park, and get an ice cream.'; break; case 'rainy': para.textcontent = 'rain is falling outside; take a rain coat and an umb
rella, and don\'t stay out for too long.'; break; case 'snowing': para.textcontent = 'the snow is coming down — it is freezing!
Client-side web APIs - Learn web development
fetching data from the server another very common task in modern websites and applications is retrieving individual data items from the server to update sections of a webpage without having to load an enti
rely new page.
... client-side storage modern web browsers feature a number of different technologies that allow you to store data
related to web sites and retrieve it when necessary allowing you to persist data long term, save sites offline, and more.
Basic math in JavaScript — numbers and operators - Learn web development
this is especially true when we are learning to program javascript (or any other language for that matter) — so much of what we do
relies on processing numerical data, calculating new values, and so on, that you won't be surprised to learn that javascript has a full-featured set of math functions available.
...for a start, we are just going to stick to decimal numbers throughout this course; you'll ra
rely come across a need to start thinking about other types, if ever.
Working with JSON - Learn web development
other notes json is pu
rely a data format — it contains only properties, no methods.
...images, text, json, even html snippets), meaning that we can update small sections of content without having to
reload the entire page.
HTML performance features - Learn web development
elements & attributes impacting performance the <picture> element the <video> element the <source> element the <img> srcset attribute responsive images p
reloading content with
rel="p
reload" - (https://w3c.github.io/p
reload/ ) async / defer attributes <iframe> <object> <script>
rel attribute conclusion previous overview: performance next in this module the "why" of web performance what is web performance?
... html performance features css performance features fonts and performance mobile performance focusing on performance see also the <picture> element the <video> element the <source> element the <img> srcset attribute responsive images p
reloading content with
rel="p
reload" - (https://w3c.github.io/p
reload/ ) ...
Ember Interactivity: Footer functionality, conditional rendering - Learn web development
we need to wire up the todo.hbs template to the service, so that checking the
relevant checkbox changes the state of each todo.
... try restarting the dev server and going to localhost:4200 again, and you'll now see that we have a fully-operational battlestation “todos left” counter and clear button: if you're asking yourself why we're not just doing the toggle on the component, since the function is enti
rely self-contained and not at all needing anything from the service, then you are 100% right to ask that question!
Accessibility in React - Learn web development
this could confuse a wide variety of users — particularly users who
rely on the keyboard, or users who use a screen reader.
...su
rely we could add a condition to our useeffect to focus on the edit button if isediting is false?
Getting started with Svelte - Learn web development
finally the file public/index.html includes the generated bundle.css and bundle.js files: <!doctype html> <html lang="en"> <head> <meta charset='utf-8'> <meta name='viewport' content='width=device-width,initial-scale=1'> <title>svelte app</title> <link
rel='icon' type='image/png' href='/favicon.png'> <link
rel='stylesheet' href='/global.css'> <link
rel='stylesheet' href='/build/bundle.css'> <script defer src='/build/bundle.js'></script> </head> <body> </body> </html> the minified version of bundle.js weighs a little more than 3kb, which includes the "svelte runtime" (just 300 lines of javascript code) and the app.svelte compiled component.
...this is useful when reporting issues
related to a specific version of svelte.
Vue conditional rendering: editing existing todos - Learn web development
we’ll also add a delete button since deletion is closely
related.
... so, let's implement the fix: remove the following line from inside our data() property: isdone: this.done, add the following block below the data() { } block: computed: { isdone() { return this.done; } }, now when you save and
reload, you'll find that the problem is solved — the checkbox state is now preserved when you switch between todo item templates.
Creating our first Vue component - Learn web development
note: prop validation only happens in development mode, so you can't strictly
rely on it in production.
... <template> <div id="app"> <h1>my to-do list</h1> <ul> <li> <to-do-item label="my todo item" :done="true"></to-do-item> </li> </ul> </div> </template> try changing true to false and back again,
reloading your app in between to see how the state changes.
Styling Vue components with CSS - Learn web development
rgin-top: 0; margin-bottom: 0; } .stack-small > * + * { margin-top: 1.25rem; } .stack-large > * + * { margin-top: 2.5rem; } @media screen and (min-width: 550px) { .stack-small > * + * { margin-top: 1.4rem; } .stack-large > * + * { margin-top: 2.8rem; } } /* end global styles */ #app { background: #fff; margin: 2rem 0 4rem 0; padding: 1rem; padding-top: 0; position:
relative; box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 2.5rem 5rem 0 rgba(0, 0, 0, 0.1); } @media screen and (min-width: 550px) { #app { padding: 4rem; } } #app > * { max-width: 50rem; margin-left: auto; margin-right: auto; } #app > form { max-width: 100%; } #app h1 { display: block; min-width: 100%; width: 100%; text-align: center; margin: 0; margin-bottom: 1rem; } </s...
...0c0c; border-radius: 0; -webkit-appearance: none; -moz-appearance: none; appearance: none; } .custom-checkbox > input:focus { outline: 3px dashed #fd0; outline-offset: 0; box-shadow: inset 0 0 0 2px; } .custom-checkbox { font-family: arial, sans-serif; -webkit-font-smoothing: antialiased; font-weight: 400; font-size: 1.6rem; line-height: 1.25; display: block; position:
relative; min-height: 40px; margin-bottom: 10px; padding-left: 40px; clear: left; } .custom-checkbox > input[type="checkbox"] { -webkit-font-smoothing: antialiased; cursor: pointer; position: absolute; z-index: 1; top: -2px; left: -2px; width: 44px; height: 44px; margin: 0; opacity: 0; } .custom-checkbox > .checkbox-label { font-size: inherit; font-family: inherit; l...
Accessibility Features in Firefox
assistive technology support on windows "i am a full firefox convert with the
release of 1.5.
...you can furthermore control javascript capabilities to remove scrollbars, toolbars or system buttons like minimize, close and maximize by editing the about:config
related properties or by editing accordingly the user.js file as explained in this "disable other javascript window features" document.
Links and Resources
cynthia says™ from hisoftware® company "cynthia says™" is a free online webpage accessibility validation service that identifies accessibility errors in webpage
related to section 508 standards and/or the wcag guidelines.
... wave 3.0 (web accessibility versatile evaluator) from webaim and sponsored by temple university institute on disabilities wave 3.0 is another powerful, mature, free online webpage accessibility validation service that identifies accessibility errors and reports accessibility warnings about webpage
related to section 508 standards and/or the wcag guidelines.
Adding a new event
textevents.h this header file should be used for defining input events from keyboard or ime and also other text edit
related events like querying focused content information.
...if acopytargets is false, don't copy its event target
related members.
Browser chrome tests
registercleanupfunction(function() { // clean up test
related stuff here.
... }); function test() { // add some test
related stuff.
Command line options
"profile_path" can either be an absolute path ("/path/to/profile") or a
relative path ("path/to/profile").
... note: on mac os x specifying a
relative path is not supported anymore from firefox 4.0 and up due to a regression, see bug 673955.
Continuous Integration
when you push a commit to mozilla-central or a
related repository, it initiates a large chain of builds and tests across multiple types of infrastructure.
... games benchmarking (firefox) under development, the games benchmarking harness (aka mozbench) will allow a number of games-
related benchmarks to be run against firefox and chrome.
Debugging on Mac OS X
as a result, it is not possible to attach a debugger to these official firefox
releases on macos 10.14+ without disabling system integrity protection (sip).
...if you try to do that then xcode will simply copy the source files under the project directory rather than link to them (still the case in xcode 10?) which breaks debugging and the possibility to modify-rebuild-
relaunch from inside xcode.
Debugging on Windows
debugging
release and nightly builds refer to the steps to use the mozilla symbol server and source server.
... if you attempt to use ns_debugbreak etc to perform post-mortem debugging on a 64bit windows 7, but as soon as you try and continue debugging the program crashes with an access violation, you may be hitting a windows bug
relating to avx support.
HTTP logging
this saves a log of http-
related information from your browser run into a file that you can examine (or upload to bugzilla if a developer has asked you for a log).
... turning off logging of socket-level transactions if you're not interested in socket-level log information, either because it's not
relevant to your bug or because you're debugging something that includes a lot of noise that's hard to parse through, you can do that.
Reviewer Checklist
android permissions should be 'grouped' into a common
release to avoid breaking auto-updates.
... consider adding prefs to disable the feature enti
rely in case bugs are found later in the
release cycle.
Displaying Places information using views
all of that information is
relevant here.
...you can therefore implement your own custom functionality on top of placestreeview while
relying on it for non-custom functionality and much of the tedious work.
Index
rust code first shipped in august 2016 with the
release of firefox 48.
... 169 privacy privacy, security this document lists privacy-
related documentation.
Limitations of chrome scripts
with the shim the shim intercepts chrome process code that adds listeners to xul elements and sets up listeners in the content process,
relaying the result back to the chrome process.
... the event object itself is
relayed to the chrome process as a cpow.
Performance
this highlights some performance pitfalls
related to frame scripts/message manager usage and alternative approaches to avoid them.
... clean up on addon unload bad: all the previous examples, *even the "better" ones* if your addon is restartless or uses the sdk then updates or the user turning it off and on will load to unload/
reload events.
mozbrowsercaretstatechanged
possible values are visibilitychange, updateposition, longpressonemptycontent, taponcaret, presscaret, and
releasecaret.
... examples var browser = document.queryselector("iframe"); browser.addeventlistener("mozbrowsercaretstatechanged", function( event ) { // do stuff with event.details });
related events mozbrowserclose mozbrowsercontextmenu mozbrowsererror mozbrowsericonchange mozbrowserloadend mozbrowserloadstart mozbrowserlocationchange mozbrowseropenwindow mozbrowsersecuritychange mozbrowsertitlechange mozbrowserusernameandpasswordrequired ...
mozbrowsercontextmenu
for example, if the user clicked on an image nested in an <a> tag, two menus are available — one with information
related to the image, and one for the link.
... example var browser = document.queryselector("iframe"); browser.addeventlistener("mozbrowsercontextmenu", function(event) { console.log("asking for menu:" + json.stringify(event.details)); });
related events mozbrowserasyncscroll mozbrowserclose mozbrowsererror mozbrowsericonchange mozbrowserloadend mozbrowserloadstart mozbrowserlocationchange mozbrowseropenwindow mozbrowsersecuritychange mozbrowsershowmodalprompt mozbrowsertitlechange mozbrowserusernameandpasswordrequired ...
mozbrowserloadend
example in this example the mozbrowserloadstart and mozbrowserloadend events are used to change the icon shown on the stop/
reload button between stop (x) and
reload (r), as appropriate.
... var browser = document.queryselector("iframe"); browser.addeventlistener('mozbrowserloadend',function(e) { stop
reload.textcontent = 'r'; console.log(e.detail.backgroundcolor); controls.style.background = e.detail.backgroundcolor; }); browser.addeventlistener('mozbrowserloadend',function() { stop
reload.textcontent = 'r'; });
related events mozbrowserasyncscroll mozbrowserclose mozbrowsercontextmenu mozbrowsererror mozbrowsericonchange mozbrowserloadstart mozbrowserlocationchange mozbrowserope...
mozbrowserloadstart
example in this example the mozbrowserloadend and mozbrowserloadstart events are used to change the icon shown on the stop/
reload button between stop (x) and
reload (r), as appropriate.
... var browser = document.queryselector("iframe"); browser.addeventlistener('mozbrowserloadstart',function() { stop
reload.textcontent = 'x'; }); browser.addeventlistener('mozbrowserloadend',function() { stop
reload.textcontent = 'r'; });
related events mozbrowserasyncscroll mozbrowserclose mozbrowsercontextmenu mozbrowsererror mozbrowsericonchange mozbrowserloadend mozbrowserlocationchange mozbrowseropenwindow mozbrowsersecuritychange mozbrowsershowmodalprompt mozbrowsertitlechange mozbrowserusernameandpasswordrequired ...
mozbrowsermanifestchange
by this, we are referring to the href of the manifest, as defined in <link
rel="manifest" href=" … ">.
... example var browser = document.queryselector("iframe"); browser.addeventlistener("mozbrowsermanifestchange", function(event) { console.log("new manifest url: " + event.details.href); });
related events mozbrowserasyncscroll mozbrowsercontextmenu mozbrowsererror mozbrowsericonchange mozbrowserloadend mozbrowserloadstart mozbrowserlocationchange mozbrowseropenwindow mozbrowsersecuritychange mozbrowsershowmodalprompt mozbrowsertitlechange mozbrowserusernameandpasswordrequired ...
mozbrowsermetachange
the mozbrowsermetachange event is fired when a <meta> element
related to web applications is added, removed or changed.
...its name is " + event.details.name + ", and its content is " + event.details.content + "."); });
related events mozbrowserasyncscroll mozbrowsercontextmenu mozbrowsererror mozbrowsericonchange mozbrowserloadend mozbrowserloadstart mozbrowserlocationchange mozbrowseropenwindow mozbrowsersecuritychange mozbrowsershowmodalprompt mozbrowsertitlechange mozbrowserusernameandpasswordrequired ...
mozbrowseropensearch
when an instance of <link
rel="search" type="application/opensearchdescription+xml"> is encountered.
... example var browser = document.queryselector("iframe"); browser.addeventlistener("mozbrowseropensearch", function( event ) { console.log("new search engine encountered: " + event.details.title); });
related events mozbrowserasyncscroll mozbrowserclose mozbrowsercontextmenu mozbrowsererror mozbrowsericonchange mozbrowserloadend mozbrowserloadstart mozbrowserlocationchange mozbrowseropenwindow mozbrowsersecuritychange mozbrowsertitlechange ...
HTMLIFrameElement.sendMouseEvent()
x a number representing the x position of the cursor
relative to the browser <iframe>'s visible area in css pixels.
... y a number representing the y position of the cursor
relative to the browser <iframe>'s visible area in css pixels.
HTMLIFrameElement.sendTouchEvent()
x an array of numbers representing the x position of each touch point
relative to the browser <iframe>'s visible area in css pixels.
... y an array of numbers representing the y position of each touch point
relative to the browser <iframe>'s visible area in css pixels.
Chrome-only CSS reference
ute.::-moz-tree-twistyactivated by the properties attribute.css -moz-bool-pref() @supports functionthe -moz-bool-pref() @supports condition is available to gecko chrome and ua stylesheets to check if a boolean preference is enabled.css <display-xul> component</display-xul>firefox supports the following -moz- prefixed xul display values:overflow-clip-boxthe overflow-clip-box css property specifies
relative to which box the clipping happens when there is an overflow.
... it is short hand for the overflow-clip-box-inline and overflow-clip-box-block properties.overflow-clip-box-blockthe overflow-clip-box-block css property specifies
relative to which box the clipping happens when there is an overflow — in the block direction.overflow-clip-box-inlinethe overflow-clip-box-inline css property specifies
relative to which box the clipping happens when there is an overflow — in the inline direction.
MozBeforePaint
the timestamp property of this event will be set to the time when the animation frame is sampled; this is
relevant when trying to synchronize mozrequestanimationframe animations with smil animations or css transitions.
... <!doctype html> <html> <body> <div id="d" style="width:100px; height:100px; background:lime; position:
relative;"></div> <script> var d = document.getelementbyid("d"); var start = window.mozanimationstarttime; function step(event) { var progress = event.timestamp - start; d.style.left = math.min(progress/10, 200) + "px"; if (progress < 2000) { window.mozrequestanimationframe(); } else { window.removeeventlistener("mozbeforepaint", step, false); } } window.addeventlistener("mozbeforep...
Getting from Content to Layout
the frame constructor takes these notifications and does the following: dispatches "restyle events" which trigger the reprocessing of
relevant css selectors and any restyling that needs to occur.
... these items are then examined in
relation to the location in the content tree that is being modified and either the
relevant frames are created/destroyed or the logic moves up to the parent frame.
HTTP Cache
ote: here is a potential for endless looping when recheck_after_write_finished is abused result == entry_needs_revalidation: state = revalidating, this prevents invocation of any callback until cacheentry::setvalid is called continue as in state entry_wanted (just bellow) result == entry_wanted: consumer reference ++ (dropped back when the consumer
releases the entry) oncacheentryavailable is invoked on the opener with anew = false and the entry opener is removed from the fifo result == entry_not_wanted: oncacheentryavailable is invoked on the opener with null for the entry opener is removed from the fifo state == writing or revalidating: do nothing and exit any other value of stat...
...mic): called when any consumer throws the cache entry away if the handle is not the handle given to the current writer, then exit state == writing: the writer failed to call metadataready on the entry - state = empty state == revalidating: the writer failed the re-validation process and failed to call setvalid on the entry - state = ready call to cacheentry::invokecallbacks all consumers
release the reference: the entry may now be purged (removed) from memory when found expired or least used on overrun of the memory pool limit when this is a disk cache entry, its cached data chunks are
released from memory and only meta data is kept intermediate memory caching of frequently used metadata (a.k.a.
Hacking with Bonsai
there is a web page, which records if the tree is open or closed what the date stamp of the last known good tree is who is on the hook for the current tree before the tree is opened, the list of checkins that happened when the tree was closed is reviewed to insure that only build
related checkins took place.
...the car pool lane is only available to those who arrange access ahead of time with the
release team.
How to add a build-time test
for now, enclose your test-
related code (in the makefile) with ifdef enable_tests run the test program from the "check" target in the makefile.
... in <tt>yourmoduledir/tests_type/makefile.in</tt> change depth, module, and xpcshell_tests appropriately: depth should be a
relative path pointing to <tt>mozilla/</tt>, e.g.
How to get a process dump with Windows Task Manager
a firefox nightly or
release you need a firefox version for which symbols are available from the mozilla symbol server.
... you can use any official nightly build or
released version of firefox from mozilla.
How to get a stacktrace for a bug report
please check the listed times to avoid copying the id of an un
related crash report.
...you can check the modified or creation time for each file to discern which crash reports are
relevant to your bug report.
Creating a New Protocol
building the new protocol to build the new protocol declaration and generate headers, make in ipc/ipdl: make -c objdir/ipc/ipdl if there are any protocol-level errors, the ipdl compiler will print the
relevant error messages and stop.
...it may be possible to test protocols un
related to a particular window using the xpcshell testing framework, which has additional primitives in electrolysis for launching and running js commands in a content process.
JavaScript-DOM Prototypes in Mozilla
nsscriptnamespacemanager also deals with other types of names, but those are un
related to the dom object prototype setup, so we will ignore those here.
...this means that the next time the name of a class constructor is resolved in the same scope, say htmlancho
relement, the code will resolve the name htmlancho
relement, find the parent name, which is htmlelement, and resolve that, but since we've already resolved htmlelement as a result of resolving the name htmlimageelement earlier, the recursion will stop right there.
JavaScript OS.Constants
os.constants.sys constants
related to system configuration.
... o_sync (linux only) open for pu
rely synchronous access.
OSFile.jsm
what are the
relationships with the html5 file api?
...shared components os.path and os.constants.path manipulation of paths os.file.error representation of file-
related errors os.file.info representation of file information (size, creation date, etc.) os.file.directoryiterator.entry file information obtained while visiting a directory ...
L10n Checks
installation (
releases) l10n checks needs to be installed.
...options reference locale in the source and xpi modes you can change the default reference locale (en-us) by setting the -r parameter, e.g.: check-l10n-completeness -r pl browser/locales/l10n.ini ../l10n/ de output mode you can change the look and feel of the output by setting the -o parameter to 0 (tree; default), 1 (full tree) or 2 (full
relative paths), e.g.: check-l10n-completeness -o 2 browser/locales/l10n.ini ../l10n/ de en-us in the locale directory in the source mode you can tell l10n checks to look for the en-us locale in the directory containing all other locales instead of the directory containing the source by setting the -l parameter (useful for e.g.
Initial setup
they're not required for you to begin contributing, but will be required when you are preparing to produce an official
release.
... locale-specific bugzilla component having a bugzilla component specific to your locale will help us to track your localization's progress from first steps to official
release.
Translation phase
the l10n tools are meant to help you maintain your localized content from
release to
release and leverage already localized materials when localizing new content.
... if you are creating your own localization, there are a number of mozilla websites that need to be localized before your efforts become an officially
released localization.
Localization quick start guide
we will take you through the steps to get started, from the initial environment setup to testing and
releasing your own localization.
...
release phase steps to shipping your localization work.
Creating localizable web applications
good: function num_format($num, $decimals) { $locale_info = localeconv(); return number_format($num, $decimals, $locale_info['decimal_point'], $locale_info['thousands_sep']); } printf(_("%s mb"), num_format($size, 1)); wrap as few html tags as possible when wrapping the localizable content with the gettext function calls, put all the code that ir
relevant to localization outside the function call.
...in either way, use a consistent prefix for localization-
related comments, e.g.
Creating localizable web content
sometimes you can leave some freedom of modification for a block of text so that the localizers link to
relevant local resources.
... if the screenshot shows the application that the website directly
relates to (firefox on mozilla.com/firefox, personas on getpersonas.com), try to use screenshots from the localized version.
Mozilla Framework Based on Templates (MFBT)
it also attempts to define its functionality in well-named files, such that simply skimming the contents of mfbt/ will quickly suggest the
relevant header to examine.
...the function macros control inlining, note whether a function returns, and enforce various c++-
related restrictions on inheritance and use.
Mozilla Development Tools
earlier
releases and other products use the cvs version control system.
... bugzilla bugzilla is where developers can report bugs in the mozilla source
releases, and browse an online database of already-reported bugs.
Mozilla Style System Documentation
however, siblings in the style context tree are unordered, since the order is not
relevant.
...i'm
reluctant to write it both since i don't know much about it.] problems:a bunch the code needs to be rewritten to prevent stylesheets from blocking the parser and to reduce string copying (although that partly goes with parsing).] parsing stylesheet representation problems: the stylesheet representation uses way too much memory.
Intel Power Gadget
intel power gadget provides real-time graphs of various power-
related measures and estimates, all taken from the intel rapl msrs.
... the main strengths of this tool are (a) it works on windows, unlike most other power-
related tools, and (b) it shows this data in graph form, which is occasionally useful.
Memory Profiler
this is helpful in exploring the
relationships among objects and identifying memory leaks.
...however, it still
relies on developers' wisdom, and sometimes chances, to dig out the problematical code snippet.
Profiling with the Firefox Profiler
install the latest pre-
release build in your host machine's firefox browser that has your phone reachable via adb.
...in the right panel, a visualization of the layer tree (based enti
rely on the aforementioned metrics) is shown.
Profiling with the Gecko Profiler and Local Symbols on Windows
for any official
release of firefox (nightly, beta, etc), you do not need to use these steps.
... if you're building a beta or
release channel version, and you want proper c++ callstacks in your profiles, add ac_add_options --enable-profiling to your firefox .mozconfig file.
about:memory
it also lets you do other memory-
related operations like trigger gc and cc, dump gc & cc logs, and dump dmd reports.
... various graphics-
related measurements ("gfx-*").
perf
this article discusses how it can be
relevant to power profiling.
... performance counter stats for 'system wide': 51.58 joules power/energy-pkg/ [100.00%] 14.80 joules power/energy-cores/ [100.00%] 9.93 joules power/energy-gpu/ [100.00%] 27.38 joules power/energy-ram/ [100.00%] 5.003049064 seconds time elapsed it's not clear from the output, but the following
relationship holds.
powermetrics
powermetrics is a mac-only command-line utility that provides many high-quality power-
related measurements.
... --show-process-coalition tells it to group coalitions of
related processes, e.g.
tools/power/rapl
windows unfortunately, rapl does not work on windows, and porting it would be difficult because windows does not have apis that allow easy access to the
relevant model-specific registers.
... if the processor does not support gpu or ram estimates then " n/a " will be printed in the
relevant column instead of a number, and it will contribute zero to the total.
Phishing: a short definition
a
relatively simple, yet effective, phishing scheme is sending an email with a fake invoice of a person’s favorite shopping site.
...earlier responses by affected banks, and payment providers, was to attempt educating users to not click links in emails, along with requesting to verify email legitimacy through checking for
relevant personal information.
Patches and pushes
write up something like this for your comment: landed this on aurora, http://hg.mozilla.org/
releases/l10n/mozilla-aurora/ab-cd/rev/adfe1234feac, marking fixed.
... update your sign-offs on the l10n dashboard to include the change into the next
release.
Research and prep
productization is the process of determining a user's choice of default search engines, content and protocol handlers (rss readers, web mail and web calendar), bookmarks, and links to recommended sites on the in-product pages as it
relates to their locale.
...if this is your first localization for a product, the l10n drivers will file this bug as part of the new product localization
release process.
A guide to searching crash reports
the columns show each group's rank, signature, size (both a count and a proportion of matching crash reports), and finally a list of bugs that have been marked as
relating to this signature.
...they apply to the "crash reports" tab of any search results, and are not
related to grouping.) the "facet on" field is the one that controls grouping.
Emscripten
other articles of interest on mdn our games zone contains some useful content
related to games development, which is a common area of use for emscripten.
... our emscripten techniques page is a place to store useful emscripten-
related ideas that haven't made it onto the emscripten wiki.
Leak And Bloat Tests
ccounts", "account1,account2"); user_pref("mail.accountmanager.defaultaccount", "account2"); user_pref("mail.accountmanager.localfoldersserver", "server1"); user_pref("mail.identity.id1.fullname", "tinderbox"); user_pref("mail.identity.id1.smtpserver", "smtp1"); user_pref("mail.identity.id1.useremail", "tinderbox@invalid.com"); user_pref("mail.identity.id1.valid", true); user_pref("mail.root.none-
rel", "[profd]mail"); user_pref("mail.root.pop3-
rel", "[profd]mail"); user_pref("mail.server.server1.directory-
rel", "[profd]mail/local folders"); user_pref("mail.server.server1.hostname", "local folders"); user_pref("mail.server.server1.name", "local folders"); user_pref("mail.server.server1.type", "none"); user_pref("mail.server.server1.username", "nobody"); user_pref("mail.server.server2.check_new...
..._mail", false); user_pref("mail.server.server2.directory-
rel", "[profd]mail/tinderbox"); user_pref("mail.server.server2.download_on_biff", true); user_pref("mail.server.server2.hostname", "tinderbox"); user_pref("mail.server.server2.login_at_startup", false); user_pref("mail.server.server2.name", "tinderbox@invalid.com"); user_pref("mail.server.server2.type", "pop3"); user_pref("mail.server.server2.username", "tinderbox"); user_pref("mail.smtp.defaultserver", "smtp1"); user_pref("mail.smtpserver.smtp1.hostname", "tinderbox"); user_pref("mail.smtpserver.smtp1.username", "tinderbox"); user_pref("mail.smtpservers", "smtp1"); user_pref("mail.startup.enabledmailcheckonce", true); user_pref("mailnews.start_page_override.mstone", "1.9pre"); user_pref("mail.shell.checkdefaultclient", false); // ensur...
NSPR Poll Method
this requirement may be
relaxed in a future nspr
release.
...(note: this may change in a future nspr
release if we make the semantic change to *out_flags mentioned above.
Long Long (64-bit) Integers
the functions define a portable api that can be used
reliably in any environment.
... limits and initialization
relational operators logical operators arithmetic operators shift operators conversion operators ...
PRThreadPriority
pr_priority_last placeholder description in general, an nspr thread of higher priority has a statistically better chance of running
relative to threads of lower priority.
...at best they are intended to specify a preference in the amount of cpu time that a higher-priority thread might expect
relative to a lower-priority thread.
PR_AttachThread
note: as of nspr
release v3.0, pr_attachthread and pr_detachthread are obsolete.
... in nspr
release 19980529b and earlier, it is necessary for a native thread not created by nspr to call pr_attachthread before it calls any nspr functions, and call pr_detachthread when it is done calling nspr functions.
PR_ExitMonitor
decrements the entry count associated with a specified monitor and, if the entry count reaches zero,
releases the monitor's lock.
... description if the decremented entry count is zero, pr_exitmonitor
releases the monitor's lock.
PR_TicksPerSecond
the
relationship between a printervaltime tick and standard clock units is platform-dependent.
... pr_pr_tickspersecond() allows you to discover exactly what that
relationship is.
PR_WaitCondVar
the value pr_interval_no_wait causes the thread to
release the lock, possibly causing a rescheduling within the runtime, then immediately attempt to reacquire the lock and resume.
...after a call to pr_waitcondvar, the lock is
released and the thread is blocked in a "waiting on condition" state until another thread notifies the condition or a caller-specified amount of time expires.
NSPR
nspr
release process how to prepare an nspr
release.
... mailing list newsgroup rss feed
related topics necko, nss ...
Building NSS
this is recommended, as the build is faster and more
reliable.
...to check out the latest sources for nss and nspr--which may not be part of a stable
release--use the following commands: hg clone https://hg.mozilla.org/projects/nspr hg clone https://hg.mozilla.org/projects/nss to get the source of a specific
release, see nss
releases.
Cryptography functions
publickeynickname mxr 3.4 and later pk11_setslotpwvalues mxr 3.2 and later pk11_setsymkeynickname mxr 3.4 and later pk11_setsymkeyuserdata mxr 3.11 and later pk11_setwrapkey mxr 3.2 and later pk11_sign mxr 3.2 and later pk11_signatu
relen mxr 3.2 and later pk11_symkeyfromhandle mxr 3.2 and later pk11_tokenexists mxr 3.2 and later pk11_tokenkeygen mxr 3.6 and later pk11_tokenkeygenwithflags mxr 3.10.2 and later pk11_tokenrefresh mxr 3.7.1 and later pk11_traversecer...
... seckey_ecparamstokeysize mxr 3.12 and later seckey_destroypublickeylist mxr 3.4 and later seckey_destroysubjectpublickeyinfo mxr 3.2 and later seckey_getpublickeytype mxr 3.3 and later seckey_publickeystrengthinbits mxr 3.8 and later seckey_signatu
relen mxr 3.11.2 and later ...
FIPS Mode - an explanation
generally speaking, any use of a computer by us government personnel must conform to all the
relevant fips regulations.
... if you're a us government worker, and you want to use a mozilla software product such as firefox, or any product that uses nss, you will want to use it in a way that is fully conformant with all the
relevant fips regulations.
JSS FAQ
nss has three callbacks
related to certificates.
...in general, a key is a handle to an underlying object on a pkcs #11 token, not me
rely a java object residing in memory.
NSS Developer Tutorial
to stress this fact, we often explicitly assign numeric values to enumerators, rather than
relying on the values assigned by the compiler.
...for critical code reviews, such as a patch
release of a stable branch, two reviews may be more reasonable.
nss tech note8
however since nss was delivered as archive libraries, client programs me
rely declared these two variables for themselves, and then were able to alter those variables directly.
... however, none of the callers
relied on the ability of the respective cache functions to be able to compute the expiration time.
Notes on TLS - SSL 3.0 Intolerant Servers
netscape 6.1 preview
release 1, or mozilla 0.9.1 and earlier these versions shipped with the tls option turned on as the default but with no way to deal with the problem servers.
... 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.
Migration to HG
the nspr, nss and
related projects have stopped using mozilla'a cvs server, but have migrated to mozilla's hg (mercurial) server.
...the first
releases using the new code layout will be nspr 4.10 and nss 3.15 ...
FC_Sign
syntax ck_rv fc_sign( ck_session_handle hsession, ck_byte_ptr pdata, ck_ulong usdatalen, ck_byte_ptr psignature, ck_ulong_ptr pussignatu
relen ); parameters hsession [in] session handle.
...pussignatu
relen [in, out] pointer to the maximum size of the output buffer, replaced by the length of the signature if the operation is successful.
FC_SignFinal
syntax ck_rv fc_signfinal( ck_session_handle hsession, ck_byte_ptr psignature, ck_ulong_ptr pussignatu
relen ); parameters hsession [in] session handle.
...pussignatu
relen [in, out] pointer to location containing the maximum buffer size.
FC_Verify
syntax ck_rv fc_verify( ck_session_handle hsession, ck_byte_ptr pdata, ck_ulong usdatalen, ck_byte_ptr psignature, ck_ulong ussignatu
relen ); parameters hsession [in] session handle.
...ussignatu
relen [in] length of the signature in bytes.
FC_VerifyFinal
syntax ck_rv fc_verifyfinal( ck_session_handle hsession, ck_byte_ptr psignature, ck_ulong ussignatu
relen ); parameters hsession [in] session handle.
...ussignatu
relen [in] length of the signature in bytes.
NSS tools : pk12util
o https://wiki.mozilla.org/nss_shared_db_howto o https://wiki.mozilla.org/nss_shared_db additional resources for information about nss and other tools
related to nss (like jss), check out the nss project wiki at [1]http://www.mozilla.org/projects/security/pki/nss/.
... the nss site
relates directly to nss code changes and
releases.
NSS tools : vfychain
additional resources for information about nss and other tools
related to nss (like jss), check out the nss project wiki at [1]http://www.mozilla.org/projects/security/pki/nss/.
... the nss site
relates directly to nss code changes and
releases.
NSS tools : vfyserv
name vfyserv — tbd synopsis vfyserv description the vfyserv tool verifies a certificate chain options additional resources for information about nss and other tools
related to nss (like jss), check out the nss project wiki at [1]http://www.mozilla.org/projects/security/pki/nss/.
... the nss site
relates directly to nss code changes and
releases.
OLD SSL Reference
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.
... nss shutdown function nss_shutdown deprecated functions ssl_enabledefault ssl_enable ssl_enablecipher ssl_setpolicy ssl_redohandshake 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.
NSS tools : pk12util
o https://wiki.mozilla.org/nss_shared_db_howto o https://wiki.mozilla.org/nss_shared_db additional resources for information about nss and other tools
related to nss (like jss), check out the nss project wiki at [1]http://www.mozilla.org/projects/security/pki/nss/.
... the nss site
relates directly to nss code changes and
releases.
NSS tools : signver
o setting up the shared nss database https://wiki.mozilla.org/nss_shared_db_howto o engineering and technical information about the shared nss database https://wiki.mozilla.org/nss_shared_db additional resources for information about nss and other tools
related to nss (like jss), check out the nss project wiki at [1]http://www.mozilla.org/projects/security/pki/nss/.
... the nss site
relates directly to nss code changes and
releases.
NSS tools : vfychain
additional resources for information about nss and other tools
related to nss (like jss), check out the nss project wiki at [1]http://www.mozilla.org/projects/security/pki/nss/.
... the nss site
relates directly to nss code changes and
releases.
Necko FAQ
any resemblance in flavor to the necco candy is pu
rely coincidental.
... todo when is the next stable
release of this library going to be available?
Renaming With Pork
run renamer through pork-bar
rel.
... this makes it easier to refer to any diagnostics touch /tmp/err.txt tail -f /tmp/err.txt & ~/work/pork-bar
rel/pork-bar
rel 4 /tmp/ls.txt ./renamer -rename-class string sm::string > /tmp/string.diff 2>/tmp/err.txt pork-bar
rel runs multiple copies of the renamer and merges their output.
Pork
old pork page pork details that haven't been moved to mdc renaming with pork sample pork application todos pork 1.0
release tracking bug pork
releases download pork here community view pork forums...
... mailing list newsgroup rss feed #static on irc.mozilla.org
related topics dehydra, treehydra, mozilla 2, spidermonkey ...
Rhino overview
see the specification for more information on the standard, and rhino version 1.6r1
release notes for details on the implementation in rhino.
...this will provide rhino the support functionality it needs to perform security-
related tasks.
Rhino serialization
beginning with rhino 1.5
release 3 it is possible to serialize javascript objects, including functions and scripts.
...this isn't that interesting an example since compiling a function to a class and then loading it accomplishes the same as serializing an interpreted function, but it becomes more
relevant if you wish to serialize javascript objects that have references to compiled functions.
Shumway
the whats and whys of shumway shumway is a renderer for adobe flash built enti
rely in web standards (javascript, webgl, and others).
...there are two places where shumway bugs are tracked: github (via issues and pull requests) manages problems
relating to shumway, itself.
64-bit Compatibility
if you use these bits to squir
rel away a payload, they must be adjusted before attempting to dereference the pointer.
...the following table contains the most
relevant opcodes: platform alias 32-bit op 64-bit op ldp ld ldq ldcp ldc ldcq piadd add qiadd piand and qiand pilsh lsh qilsh pirsh rsh qirsh pursh ush qursh pcmov cmov qcmov pior or qior pxor xor qxor addp iaddp qaddp ...
Statistics API
overview each time a garbage collection occurs, spidermonkey keeps track of how long each phase of the collection took, along with some
related data.
... when: number (milliseconds) - the time this slice started,
relative to the first slice's start time.
JS::Value
embeddings should not
rely on observed representation details or upon the size of js::value.
...these confusing semantics led to this method being removed from the jsapi in more recent
releases, but older code might still use it.
JSFunction
for native functions and jsapi-compiled functions - that is, functions returned by the apis listed above-there is a simple one-to-one
relationship between the jsfunction and the corresponding javascript function object.
...for other function objects - that is, functions created by running javascript code containing function declarations or function-expressions-the
relationship between the jsfunction * and the jsobject * is not well-defined.
JSObject
the javascript engine sometimes uses this
relationship to implement lexical scoping.
... security-sensitive applications can use this
relationship to make every object a member of some security domain.
JS_SetGCCallback
callback
related to finalization is separated to js_setfinalizecallback in jsapi 13.
...the callback executes on the same thread that performed gc, after the gc lock has been
released.
JS_SetGCZeal
this article covers features introduced in spidermonkey 1.8 enable gc zeal, a testing and debugging feature that helps find gc-
related bugs in jsapi applications.
... with gc zeal enabled, gc-
related crashes are much easier to reproduce (they happen more
reliably) and debug (they happen sooner, closer to the source of the bug).
JS_SetParent
applications that use spidermonkey's security features typically use the parent
relation to determine both (a) what security principals are attached to the currently executing script; and (b) what security principals are attached to the object being accessed.
...the javascript engine
relies on this invariant.
Property attributes
the value is determined enti
rely by the getter.
... for enumerate hooks, triggering the resolve hook would be me
rely silly, not fatal, except in some cases involving non-configurable properties.
SpiderMonkey: The Mozilla JavaScript runtime
standalone source code
releases can be found on the
releases page.
... spidermonkey internals: gc separate internals article on the gc spidermonkey internals: hacking tips collection of helpful tips & tools for hacking on the engine
related topics javascript foss projects using or based on spidermonkey
releases spidermonkey
release notes current and past versions: 52, 45, 38, 31, 24, 17 community mailing list spidermonkey questions on stack overflow report a bug ...
Thread Sanitizer
the version of clang you need to use depends on what firefox
release you are compiling if you are building from mozilla-central, you must use clang 3.6 or later.
... you can find precompiled binaries for llvm/clang 3.3 on the llvm
releases page.
Zest implementation
the first version of zest has been
released but is intentionally very basic.
...
related links zest overview ...
Mozinfo
mozinfo is a bridge interface, making the underlying (complex) plethora of os and architecture combinations conform to a subset of values of
relevance to mozilla software.
... the current implementation exposes
relevant key, values: os, version, bits, and processor.
Mozilla Projects
rhino rhino is an open-source implementation of javascript written enti
rely in java.
... spidermonkey: the mozilla javascript runtime standalone source code
releases can be found on the
releases page.
Using RAII classes in Mozilla
raii classes are useful when two operations (e.g., lock/unlock, addref/
release, pushstate/popstate) must be paired.
...for example, instead of writing: autolock lock(mmutex); which causes the lock to be held until the end of the block, one might write: autolock(mmutex); which erroneously causes the lock to be
released at the end of the statement.
A Web PKI x509 certificate primer
if you wish to do this, you should read the
relevant part of the mozilla ca faq before doing so.
...this type of hierarchy allows for a
relatively simple long term root to be distributed to clients, and some flexibility on the intermediate cert so that you can change parameters based on best practices and security research.
Gecko events
« at apis support page this page offers a list of accessibility-
related events supported by gecko.
... is supported: yes event_document_
reload the document contents are being
reloaded.
Feed content access API
nsifeedcontainer a base class subclassed by several of the feed-
related interfaces.
... nsifeedelementbase a base class subclassed by several of the other feed-
related interfaces.
Mork
mork is a database file format invented by david mccusker for the mozilla code since the original netscape database information was proprietary and could not be
released open source.
...values are me
rely an opaque sequence of bytes, so their actual content is dependent on the mork consumer.
Places Developer Guide
overview places is the umb
rella term for a set of apis for managing browsing history and uri metadata first introduced in firefox 3.
... accessing bookmarks and
related items accessing item properties for all items: string getitemtitle(aitemid) - returns an item's title int64 getitemindex(aitemid) - returns an item's position in it's parent folder prtime getitemtype(aitemid) - returns the type of an item (bookmark, folder, separator) prtime getitemdateadded(aitemid) - returns the time in microseconds that an item was added prtime getitemlastmodifi...
Querying Places
basic query search parameters const unsigned long time_
relative_epoch = 0 const unsigned long time_
relative_today = 1 const unsigned long time_
relative_now = 2 attribute prtime begintime attribute unsigned long begintimereference readonly attribute boolean hasbegintime readonly attribute prtime absolutebegintime attribute prtime endtime attribute unsigned long endtimereference readonly attribute boolean hasendtime readonly attribute prtime abso...
... // first query object searches for "firefox" in title/url var query1 = placesutils.history.getnewquery(); query1.searchterms = "firefox"; // second query object searches for visited in past 24 hours and from mozilla.org var query2 = placesutils.history.getnewquery(); query2.begintimereference = query2.time_
relative_now; query2.begintime = -24 * 60 * 60 * 1000000; // 24 hours ago in microseconds query2.endtimereference = query2.time_
relative_now; query2.endtime = 0; // now query2.domain = "mozilla.org"; var result = placesutils.history.executequeries([query1, query2], 2, options); note: keyword searching doesn't work correctly across or queries.
Using the Places livemark service
the livemark service, offered by the nsilivemarkservice interface, is used to create, edit, and
reload livemarks.
...note: the caller is responsible for
reloading the livemark after changing its feed uri (since the contents are likely to be different given a different feed).
XML Extras
the qa owner will manage the tests associated with their component, act as qa contact for
related bugs and help with regression testing.
... for xmlhttprequest object you can mostly
rely on the microsoft xmlhttprequest documentation, with some caveats: all functions and property names begin with a lower case letter and the object creation is different.
How to build a binary XPCOM component using Visual Studio
not the simplest thing to do and it may be incompatible with production
releases of firefox, thunderbird, and xulrunner from mozilla.
...recap: use the right gecko sdk for your xulrunner
release use a microsoft compiler use pre-built glib-1.2.dll & libidl-0.6.dll libraries from wintools.zip download the sample project here is what the folder structure looks like: create a vc++ project visual studio project and file templates (or wizards) for creating xpcom modules and components do not currently exist.
PyXPCOM
current
releases are now integrated with the mozilla build system.
...
related topics xpcom pydom: replace javascript with python python-spidermonkey ...
NS_NewLocalFile
it is an error to pass a
relative filesystem path.
...this error is returned if a
relative file path is passed to ns_newlocalfile.
NS_NewNativeLocalFile
it is an error to pass a
relative filesystem path.
...this error is returned if a
relative file path is passed to ns_newnativelocalfile.
nsAutoRefTraits
when the handle to the resource is a pointer to t the specialization may be derived from nspointerreftraits<t>, so that only definitions of the
release(t*) static method and possibly the addref(t*) static method need to be added.
...for example: ns_specialize_template class nsautoreftraits<prfiledesc> : public nspointerreftraits<prfiledesc> { public: static void
release(prfiledesc *ptr) { pr_close(ptr); } }; or ns_specialize_template class nsautoreftraits<fcpattern> : public nspointerreftraits<fcpattern> { public: static void
release(fcpattern *ptr) { fcpatterndestroy(ptr); } static void addref(fcpattern *ptr) { fcpatternreference(ptr); } }; nsautoreftraits is described in xpcom/base/nsautoref.h.
RefPtr
this is done using the functions addref() and
release(), which respectively modify a variable of type nsautorefcnt, which basically is a wrapper around a count of the number of references refering to the class.
... so for xpcom interfaces: nscomptr<nsisupports> a; nscomptr<nsifoo> foo; and for concrete classes: refptr<nsfoo> foo; // class that implements nsifoo; refptr<bar> bar; // some random class that i want ref-counted but has nothing to do with xpcom: // just implement addref() and
release() and it will work with refptr it is important that nscomptr is not used to hold a pointer to a concrete class since this can cause compile time errors or runtime errors.
imgICache
use the following snippet to obtain a
relevant image cache for a given document or channel (where
relevantdocument is a document object that contains images you care about, or
relevantchannel is an nsichannel that is used for fetching images): var tools = components.classes["@mozilla.org/image/tools;1"].getservice(components.interfaces.imgitools); var cache = tools.getimgcachefordocument(
relevantdocument); // alternatively, tools.getimgcacheforchannel(
relevan...
...tchannel) if there is no
relevant document or channel, null may be passed, but this will cause any image cache requests to use the permanent storage cache (ie.
imgIRequest
do not
rely on it.
...if an html img element has the crossorigin attribute set, the imgirequest will be validated for cross-origin usage with cors, and, if successful, will have its cors mode set to the
relevant type.
mozIStorageStatement
finalize() finalizes a statement which
releases all resources that were allocated for it.
... void finalize(); note: this method does not need to be used from native callers because you have to
release the statement in order to not leak.
nsIAccessNode
the nsiaccessnode tree for a given dom window has a one to one
relationship to the dom tree.
... void scrolltopoint( in unsigned long acoordinatetype, in long ax, in long ay ); parameters acoordinatetype specifies whether the coordinates are
relative to the screen or the parent object (for available constants refer to nsiaccessiblecoordinatetype.constants.
nsIAccessibleEvent
isfromuserinput boolean returns true if the event was caused by explicit user input, as opposed to pu
rely originating from a timer or mouse movement.
... event_document_
reload 0x002c 0x0028 the document contents are being
reloaded.
nsIAccessibleHyperLink
the returned value is
related to the nsiaccessiblehyperlink interface of the object that owns this hyperlink.
...the returned value is
related to the nsiaccessiblehyperlink interface of the object that owns this hyperlink.
nsIBoxObject
screenx long the x coordinate of the box
relative to the screen origin, in device pixels.
... screeny long the y coordinate of the box
relative to the screen origin, in device pixels.
nsICommandLine
this method gracefully handles
relative or absolute file paths, according to the working directory of this command line.
...this method has platform-specific logic for converting an absolute uri or a
relative file-path into the appropriate uri object; it gracefully handles win32 c:\ paths which would confuse the i/o service if passed directly.
nsIDOMEvent
timestamp domtimestamp used to specify the time (in milliseconds
relative to the epoch) at which the event was created.
...this method will be removed in future
releases, see bug 691151.
nsIDOMMozTouchEvent
in long screenyarg, in long clientxarg, in long clientyarg, in boolean ctrlkeyarg, in boolean altkeyarg, in boolean shiftkeyarg, in boolean metakeyarg, in unsigned short buttonarg, in nsidomeventtarget
relatedtargetarg, in unsigned long streamidarg); attributes attribute type description streamid unsigned long a unique identifier for each finger, so that each finger's movement can be tracked separately.
... initsimplegestureevent( in domstring typearg, in boolean canbubblearg, in boolean cancelablearg, in nsidomabstractview viewarg, in long detailarg, in long screenxarg, in long screenyarg, in long clientxarg, in long clientyarg, in boolean ctrlkeyarg, in boolean altkeyarg, in boolean shiftkeyarg, in boolean metakeyarg, in unsigned short buttonarg, in nsidomeventtarget
relatedtargetarg, in unsigned long streamidarg ); parameters streamidarg the value to assign to the streamid attribute; this uniquely identifies the finger generating the touch events.
nsIDebug2
this is normally zero in
release builds, but does include calls to nsidebug.assertion().
...this often cor
relates to whether other code (for example, firefox, xulrunner) was compiled with debug defined.
nsIDirectoryService
the providers will be
released when the service is destroyed at xpcom shutdown.
... call unregisterprovider() to force the directory service to
relinquish ownership of a particular provider instance.
nsIDocShell
load_cmd_
reload 0x2 returned by the loadtype attribute for
reloads.
...for instance, if the user tries to
reload the page, then this is the url that will be
reloaded.
nsIEditorSpellCheck
for spell checking clients with no modal ui (such as inline spell checkers), this flag is not
relevant.
... uninitspellchecker() call this to
release the spell checking object.
nsIFeed
note: this field is ra
rely implemented.
... note: this field is ra
rely implemented.
nsIFeedTextConstruct
various other feed-
related interfaces, such as nsifeed, nsifeedentry, and nsifeedcontainer have attributes that return objects implementing nsifeedtextconstruct.
... method overview nsidomdocumentfragment createdocumentfragment(in nsidomelement element); astring plaintext(); attributes attribute type description base nsiuri if the text construct contains html or xhtml,
relative references in the content should be resolved against this base uri.
nsIFocusManager
if astartelement is specified, then movement is done
relative to astartelement.
... if astartelement is null, then movement is done
relative to the currently focused element.
Using nsILoginManager
working with the login manager extensions often need to secu
rely store passwords to external sites, web applications, and so on.
... to do so secu
rely, they can use nsiloginmanager, which provides for secure storage of sensitive password information and nsilogininfo, which provides a way of storing login information.
nsIMessenger
acstring getmsguriatnavigatepos(in long apos); parameters apos the position to get the url from
relative to the current history cursor.
... acstring getfolderuriatnavigatepos(in long apos); parameters apos the position to get the url from
relative to the current history cursor.
Component; nsIPrefBranch
atopic - the string defined by ns_prefbranch_prefchange_topic_id adata - the name of the preference which has changed,
relative to the "root" of the asubject branch.
... it is not safe to change observers during this callback in
releases before gecko 1.9.
nsIPrefBranch2
atopic - the string defined by ns_prefbranch_prefchange_topic_id adata - the name of the preference which has changed,
relative to the "root" of the asubject branch.
... it is not safe to change observers during this callback in
releases before gecko 1.9.
nsIPrincipal
id a semi-unique id
relating to either the fingerprint or the origin.
...this may change in a future
release; note that nsiprincipal is unfrozen, not slated to be frozen.
nsISHEntry
this is typically loadhistory except when
reload is pressed, it has the appropriate
reload flag.
...isdynamicallyadded() returns true if the
related docshell was added because of dynamic addition of an iframe/frame.
nsISHistory
to create an instance, use: var shistory = components.classes["@mozilla.org/browser/shistory;1"] .createinstance(components.interfaces.nsishistory); method overview void addshistorylistener(in nsishistorylistener alistener); nsishentry getentryatindex(in long index, in boolean modifyindex); void purgehistory(in long numentries); void
reloadcurrententry(); void removeshistorylistener(in nsishistorylistener alistener); attributes attribute type description count long the number of toplevel documents currently available in session history.
...
reloadcurrententry() void
reloadcurrententry(); parameters none.
nsIScreen
unlockminimumbrightness()
releases a lock on the minimum brightness of the screen, which was previously established through a corresponding call to lockminimumbrightness().
... void unlockminimumbrightness( in unsigned long brightness ); parameters brightness the brightness level to
release; this must be one of the values specified in screen brightness constants.
nsISelection2
allowadjacent specifies whether the returned ranges are allowed to touch the input range rather than me
rely overlapping it.
... allowadjacent specifies whether the returned ranges are allowed to touch the input range rather than me
rely overlapping it.
nsIServiceManager
when they are finished they should call nsisupports.
release() on the service as they would with any interface pointer.
... see also ns_getservicemanager do_getservice mozilla::services c++ namespace services.jsm nsisupports.
release() ...
nsISmsRequestManager
nsismsrequestmanager dom/sms/interfaces/nsismsrequestmanager.idlscriptable used to manage sms
related requests and notifications for the websms api 1.0 66 introduced gecko 13.0 inherits from: nsisupports last changed in gecko 15.0 (firefox 15.0 / thunderbird 15.0 / seamonkey 2.12) implemented by: @mozilla.org/sms/smsrequestmanager;1.
...fynomessageinlist(in long arequestid); void notifyreadmessagelistfailed(in long arequestid, in long aerror); void notifysmsdeleted(in long arequestid, in bool adeleted); void notifysmsdeletefailed(in long arequestid, in long aerror); void notifysmssendfailed(in long arequestid, in long aerror); void notifysmssent(in long arequestid, in nsidommozsmsmessage amessage); constants all sms
related errors that could apply to smsrequest objects.
nsIStandardURL
it supports initialization from a
relative path and provides some customization on how urls are normalized.
...otherwise, aspec will be resolved
relative to abaseuri.
nsISupports proxies
when you are finished with a proxy object, you should call ns_
release on it.
...ns_
release(ptestobj); pproxy->bar(); ns_
release(pproxy); original document information author: doug turner last updated date: january 27, 2007 copyright information: portions of this content are © 1998–2007 by individual mozilla.org contributors; content available under a creative commons license | details.
nsITransactionList
the list returned is addref'd so it is up to the caller to
release the transaction when it is done.
...the transaction returned is addref'd so it is up to the caller to
release the transaction when it is done.
nsIWebBrowserChrome3
1.0 66 introduced gecko 2.0 inherits from: nsiwebbrowserchrome2 last changed in gecko 2.0 (firefox 4 / thunderbird 3.3 / seamonkey 2.1) method overview astring onbefo
relinktraversal(in astring originaltarget, in nsiuri linkuri, in nsidomnode linknode, in prbool isapptab); methods onbefo
relinktraversal() determines the appropriate target for a link.
... astring onbefo
relinktraversal( in astring originaltarget, in nsiuri linkuri, in nsidomnode linknode, in prbool isapptab ); parameters originaltarget the original link target.
nsIWebProgressListener
inherits from: nsisupports last changed in gecko 15 (firefox 15 / thunderbird 15 / seamonkey 2.12) nsiwebprogress describes the parent-child
relationship of nsiwebprogress instances.
... .getinterface(ci.nsidomwindowutils) .outerwindowid; sendasyncmessage("myaddonmessage", { name: "onlocationchange", outerwindowid: outerwindowid, uri: auri.spec, charset: auri.charset, flag: aflag, }); }, // for definitions of the remaining functions see
related documentation onprogresschange: function(awebprogress, arequest, curself, maxself, curtot, maxtot) {}, onstatuschange: function(awebprogress, arequest, astatus, amessage) {}, onsecuritychange: function(awebprogress, arequest, astate) {} } let filter = cc["@mozilla.org/appshell/component/browser-status-filter;1"] .createinstance(ci.nsiwebprogress); filter.addprogre...
nsIWifiAccessPoint
rawssid acstring the public name of the wi
reless network, as an ascii string.
... ssid astring the access point's public wi
reless network name, as an ascii string.
nsIXULBrowserWindow
method overview astring onbefo
relinktraversal(in astring originaltarget, in nsiuri linkuri, in nsidomnode linknode, in prbool isapptab); void setjsdefaultstatus(in astring status); void setjsstatus(in astring status); void setoverlink(in astring link, in nsidomelement element); methods onbefo
relinktraversal() called before traversing a link to determine the appropriate target into which to load the link.
...astring onbefo
relinktraversal( in astring originaltarget, in nsiuri linkuri, in nsidomnode linknode, in prbool isapptab ); parameters originaltarget the specified target for the link.
nsIXULTemplateBuilder
refresh()
reloads any rdf datasources that support nsirdfremotedatasource.
... note: this is a temporary hack so that remote-xul authors can
reload remote datasources.
nsIXULTemplateQueryProcessor
there is a one-to-one
relationship between a template builder and a query processor.
...there is a one-to-one
relationship between a template builder and a query processor.
nsIZipWriter
https://developer.mozilla.org/docs/xpcom_interface_reference/nsifile if (entry.path == xpi.path) { cu.reporterror('skipping entry - will not add this entry to the zip file - as this is the zip itself: "' + xpi.path + '" leafname:"' + xpi.leafname + '"'); continue; } if (entry.isdirectory()) { dirarr.push(entry); } var
relpath = entry.path.replace(dirarr[0].path, ''); //need
relative because we need to use this for telling addentryfile where in the zip it should create it, and because zip is a copy of the directory cu.reporterror('+' +
relpath); //makes it
relative to directory the parent dir (dir[0]) so it can succesfully populate files with same names but different folders in this parent dir, needed b...
...ecause recursviely going through all dirs var saveinzipas =
relpath.substr(1); //need to get ride of the first '\' forward slash at start otherwise it puts every file added in a folder of its own.
XPCOM Interface Reference
component; nsiprefbranchextensionmanager (toolkit)iaccessible2iaccessibleactioniaccessibleapplicationiaccessiblecomponentiaccessibleeditabletextiaccessiblehyperlinkiaccessiblehypertextiaccessibleimageiaccessible
relationiaccessibletableiaccessibletable2iaccessibletablecelliaccessibletextiaccessiblevalueidispatchijsdebuggeramiinstallcallbackamiinstalltriggeramiwebinstallinfoamiwebinstalllisteneramiwebinstallpromptamiwebinstallerimgicacheimgicontainerimgicontainerobserverimgidecoderimgidecoderobserverimgiencoderimgiloaderimgirequestinidomutilsjsdistackframemoziasyncfaviconsmoziasynchistorymozicoloranalyzermozijssubscriptloadermozipersonaldictionarymoziplaceinfomoziplacesautocompletemoziregistrymozirepresentati...
...mozithirdpartyutilmozivisitinfomozivisitinfocallbackmozivisitstatuscallbacknsiabcardnsiaboutmodulensiabstractworkernsiaccelerometerupdatensiaccessnodensiaccessibilityservicensiaccessiblensiaccessiblecaretmoveeventnsiaccessiblecoordinatetypensiaccessibledocumentnsiaccessibleeditabletextnsiaccessibleeventnsiaccessiblehyperlinknsiaccessiblehypertextnsiaccessibleimagensiaccessibleprovidernsiaccessible
relationnsiaccessibleretrievalnsiaccessiblerolensiaccessiblescrolltypensiaccessibleselectablensiaccessiblestatechangeeventnsiaccessiblestatesnsiaccessibletablensiaccessibletablecellnsiaccessibletablechangeeventnsiaccessibletextnsiaccessibletextchangeeventnsiaccessibletreecachensiaccessiblevaluensiaccessiblewin32objectnsialertsservicensiannotationobservernsiannotationservicensiappshellnsiappshellservi...
NS_ADDREF
ns_addref(foo) is equivalent to foo->addref(); this macro exists mainly for historical reasons, but for consistency and for symmetry with ns_
release it should still be used.
... syntax ns_addref(foo); see also ns_if_addref ns_
release ...
NS_CStringContainerInit
therefore, it is generally better to use nsembedcstring, to instantiate a nsacstring object, since it automatically
releases allocated memory when the object goes out of scope.
... // call this function to
release any memory owned by |str| when done.
NS_StringContainerInit
therefore, it is generally better to use nsembedstring, to instantiate a nsastring object, since it automatically
releases allocated memory when the object goes out of scope.
... // be sure to call this function to
release any memory owned by |str| when done.
XPCOM string functions
this is a low-level api.ns_cstringclonedatathe ns_cstringclonedata function returns a null-terminated, heap allocated copy of the string's internal buffer.ns_cstringcontainerfinishthe ns_cstringcontainerfinish function
releases any memory allocated by a nscstringcontainer instance.ns_cstringcontainerinitthe ns_cstringcontainerinit function initializes a nscstringcontainer instance for use as a nsacstring.ns_cstringcontainerinit2the ns_cstringcontainerinit2 function initializes a nscstringcontainer instance for use as a nsacstring.ns_cstringcopythe ns_cstringcopy function copies the value from one nsacstring instanc...
...this is a low-level api.ns_stringclonedatathe ns_stringclonedata function returns a null-terminated, heap allocated copy of the string's internal buffer.ns_stringcontainerfinishthe ns_stringcontainerfinish function
releases any memory allocated by a nsstringcontainer instance.
XPCOM
however, such decoders
relied on servers sending correct mime types; images sent with incorrect mime types would not be correctly displayed.xpcom gluethe xpcom glue is a static library which component developers and embedders can link against.
...this is no accident, as mozilla:: primitives are me
rely bare-minimum wrappers around nspr's.xptcall faqxptcall is a small low level xpcom method call library.
XPIDL
for interface pointers, the callee does the addref on behalf of the caller, and the caller must call
release.
...buffers must be deallocated with ns_free, and interface pointers must be
release'd.
Mozilla technologies
at the moment, the transition from webshell to docshell is not fully completed, but the long-term goal is to remove webshell and switch over enti
rely to docshell.embedded dialog apifeed content access apifirefox 2 and thunderbird 2 introduce a series of interfaces that make it easy for extension authors to access rss and atom feeds.life after xul: building firefox interfaces with htmlthis page gathers technical solutions to common problems encountered by teams shipping html-based interfaces inside firefox.morkmork is a database file format in...
...vented by david mccusker for the mozilla code since the original netscape database information was proprietary and could not be
released open source.
The Valgrind Test Job
the valgrind test job builds the browser and runs it under valgrind, which can detect various common memory-
related errors.
... alternatively, bugs
relating to the test job can be filed in the "testing" product, under the "general" component.
Address Book examples
address book interfaces provides an overview of the
related interfaces.
... see an overview of thunderbird components for a general description of the thunderbird user interface and
related programmatic interfaces.
Autoconfiguration in Thunderbird
in many cases, people should be able to download and install thunderbird, enter their real name, email address and password in the account setup wizard and have a fully functioning mail client and get and send their mail as secu
rely as possible.
...you are "hoster.com", but your customers have "fred@flintstone.com" and "louis@kent.com" as domains, with only a few users per domain, you need to set up a configuration server (or
rely on dns mx).
Mail and RDF
here is the rational behind this design: it keeps all rdf datasource-
related code in one place and out of the messages and folders themselves.
...this design allows each datasource to manage its own observers, and lets each mail session manage a list of folder listeners without necessarily knowing that some of these listeners are rdf-
related.
Thunderbird API documentation
much of it may no longer be
relevant.
... these pages have been moved from mozilla.org, and may or may not be
relevant.
Constants - Plugins
plug-in version constants constant value description np_version_major 0 major version number; changes with major code
release number.
... np_version_minor 22 minor version number; changes with point
release number.
DOM Inspector internals - Firefox Developer Tools
(the browser pane is not a viewer panel in the sense that document and object panels are, i.e., the sorts of panels as defined above in
relation to the panelset; "pane" is used here with regard to the browser pane in a loose sense to describe the generic ui fixture.) toolboxoverlay.xul this overlay fills in the inspector toolbox, including toolbar buttons and the location bar and its "inspect" button.
...dom inspector doesn't have a status bar, so this is enti
rely useless.
Inspecting web app manifests - Firefox Developer Tools
when you open the application panel’s manifest view on a page that doesn't have an app manifest successfully deployed, you'll get the following output shown: deploying a manifest to get a manifest deployed successfully, you need to include a <link> element in the <head> of your document that points to your .webmanifest file: <link
rel="manifest" href="/manifest.webmanifest"> the .webmanifest extension is recommended in the spec, and should be served with an application/manifest+json mime type, although browsers generally tend to support manifests with other appropriate extensions like .json (mime type: application/json).
... it also loads all the icon files into the view, so you can see the
relative size of them all, and any other information associated with them.
Set a breakpoint - Firefox Developer Tools
these are called column breakpoints, and allow you to set the breakpoint to happen exactly on any one of the function calls in the line (or multiple calls), by clicking on each
relevant one.
...now when execution pauses, you can view
relevant variables immediately.
Set a logpoint - Firefox Developer Tools
the logpoint is especially useful in cases where breaking the execution breaks testing procedures, such as when you are debugging popup windows, or executing focus-
related logic.
... if you need to execute additional logic
related to the source code and you can’t change the source code itself, you can use a logpoint.
JSON viewer - Firefox Developer Tools
to enable this feature in other
release channels, set the devtools.jsonview.enabled preference to true.
... from firefox 53 onwards, the json viewer is also enabled by default in beta and the normal
release version of firefox.
Throttling - Firefox Developer Tools
simply choose an option from the menu, and it will persist across
reloads.
... the characteristics emulated are: download speed upload speed minimum latency the table below lists the numbers associated with each network type, but please do not
rely on this feature for exact performance measurements; it's intended to give an approximate idea of the user experience in different conditions.
Network request details - Firefox Developer Tools
see https://en.wikipedia.org/wiki/special:centralautologin/p3p for more info.\"" }, { "name": "server", "value": "mw1316.eqiad.wmnet" }, { "name": "server-timing", "value": "cache;desc=\"pass\"" }, { "name": "strict-transport-security", "value": "max-age=106384710; includesubdomains; p
reload" }, { "name": "vary", "value": "accept-encoding,treat-as-untrusted,x-forwarded-proto,cookie,authorization,x-seven" }, { "name": "via", "value": "1.1 varnish (varnish/5.1), 1.1 varnish (varnish/5.1)" }, { "name": "x-analytics", "value": "ns=-1;special=badtitle;wmf-last-access=11-jun-2019;wmf-last-access-global=1...
...if all connections are in use, the browser can't download more resources until a connection is
released.
Examine and edit HTML - Firefox Developer Tools
now children are indicated in the tree with this icon: at the right side of some nodes there are markers shown indicating different pieces of information
related to it: event the element has one or several event listeners attached to it.
...when you
release the mouse button, the element will be inserted at the corresponding position: you can cancel the drag and drop by pressing the esc key.
Reposition elements in the page - Firefox Developer Tools
if an element has its position property set to absolute,
relative or fixed and one or more of the top, bottom , left or right properties, the box model view displays a button: if you click that button, two handles appear next to the element: you can use these handles to drag the element around the page.
...for
relatively positioned elements the dashed lines indicate the original position of the node.
Paint Flashing Tool - Firefox Developer Tools
layers are painted independently and then composited, so a change in the appearance of one layer does not trigger a repaint in any other layers, and when only the
relation of two layers changes (in an animation, for example) no repaints are required at all.
...so when the element is moved, all that's changed is the
relation of the two layers to each other, which is handled in composition: neither layer needs a repaint.
Call Tree - Firefox Developer Tools
functions with a
relatively high self cost are good candidates for optimization, either because they take a long time to run, or because they are called very often.
...these aren't
relevant to the performance of your site.
Animating CSS properties - Firefox Developer Tools
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.
...but next, we'll see how using transform instead of margin eliminates those expensive paints enti
rely.
Console messages - Firefox Developer Tools
by default, the console is cleared each time you navigate to a new page or
reload the current page.
... bug 863874 is the meta-bug for logging
relevant security messages to the web console.
AnalyserNode.frequencyBinCount - Web APIs
for technical reasons
related to how the fast fourier transform is defined, it is always half the value of analysernode.fftsize.
...for more complete applied examples/information, check out our voice-change-o-matic demo (see app.js lines 128–205 for
relevant code).
AnalyserNode - Web APIs
number of inputs 1 number of outputs 1 (but may be left unconnected) channel count mode "max" channel count 2 channel interpretation "speakers" inheritance this interface inherits from the following parent interfaces: <div id="interfacediagram" style="display: inline-block; position:
relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30"...
...for more complete applied examples/information, check out our voice-change-o-matic demo (see app.js lines 128–205 for
relevant code).
AnimationEvent - Web APIs
the animationevent interface represents events providing information
related to animations.
... <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/event" target="_top"><rect x="1" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="38.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">event</text></a><polyline points="76,25 86,20 86,30 76,25" stroke="#d4dde4" fill="none"/><line x1="86" y1="25" x2="116" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/animationevent" targ...
AudioListener - Web APIs
all pannernodes spatialize in
relation to the audiolistener stored in the baseaudiocontext.listener attribute.
... in a previous version of the specification, the dopplerfactor and speedofsound properties and the setposition() method could be used to control the doppler effect applied to audiobuffersourcenodes connected downstream — these would be pitched up and down according to the
relative speed of the pannernode and the audiolistener.
AudioNode - Web APIs
a filter like biquadfilternode or convolvernode), or volume control (like gainnode) <div id="interfacediagram" style="display: inline-block; position:
relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30"...
...the exact processing done varies from one audionode to another but, in general, a node reads its inputs, does some audio-
related processing, and generates new values for its outputs, or simply lets the audio pass through (for example in the analysernode, where the result of the processing is accessed separately).
AudioParam - Web APIs
the web audio api's audioparam interface represents an audio-
related parameter, usually a parameter of an audionode (such as gainnode.gain).
... var compressor = audioctx.createdynamicscompressor(); compressor.threshold.setvalueattime(-50, audioctx.currenttime); compressor.knee.setvalueattime(40, audioctx.currenttime); compressor.ratio.setvalueattime(12, audioctx.currenttime); compressor.attack.setvalueattime(0, audioctx.currenttime); compressor.
release.setvalueattime(0.25, audioctx.currenttime); specifications specification status comment web audio apithe definition of 'audioparam' in that specification.
AudioTrackList.getTrackById() - Web APIs
the tracks are searched in their natural order; that is, in the order defined by the media resource itself, or, if the resource doesn't define an order, the
relative order in which the tracks are declared by the media resource.
...this function allows the game to disable a specific character's audio in order to adjust the movie's performance based on occurrences within the game; if the character's dialog isn't
relevant, it gets left out.
AuthenticatorAssertionResponse.userHandle - Web APIs
such an identifier can be used by the
relying party's server to link the user account with its corresponding credentials and other data.
...username, e-mail, phone number, etc.) examples var options = { challenge: new uint8array(26), // will be another value, provided by the
relying party server timeout: 60000 }; navigator.credentials.get({ publickey: options }) .then(function (assertionpkcred) { var userhandle = assertionpkcred.response.userhandle; // send response and client extensions to the server so that it can // go on with the authentication }).catch(function (err) { console.error(err); }); specifications specification status ...
AuthenticatorAttestationResponse - Web APIs
this response should be sent to the
relying party's server to complete the creation of the credential.
...example.com" }, user: { id: new uint8array(16), name: "jdoe@example.com", displayname: "john doe" }, pubkeycredparams: [ { type: "public-key", alg: -7 } ] }; navigator.credentials.create({ publickey }) .then(function (newcredentialinfo) { var response = newcredentialinfo.response; // do something with the response // (sending it back to the
relying party server maybe?) }).catch(function (err) { console.error(err); }); specifications specification status comment web authentication: an api for accessing public key credentials level 1the definition of 'authenticatorattestationresponse interface' in that specification.
BluetoothAdvertisingData - Web APIs
bluetoothadvertisingdata.manufacturerdata read only returns a map that
relates company identifier codes to arraybuffers.
... bluetoothadvertisingdata.servicedata read only returns a map that
relates uuids to arraybuffers.
CSS - Web APIs
the css interface holds useful css-
related methods.
... static properties css.paintworklet secure context provides access to the worklet responsible for all the classes
related to painting.
Using dynamic styling information - Web APIs
note also that, as with individual element's dom styles, when speaking of manipulating the stylesheets, this is not actually manipulating the physical document(s), but me
rely the internal representation of the document.
... more important than the two properties noted here is the use of the style object to set individual style properties on an element: <!doctype html> <html> <head> <title>style property example</title> <link
rel="stylesheet" href="example.css" type="text/css"> <script type="text/javascript"> function stilo() { document.getelementbyid('d').style.color = 'orange'; } function resetstyle() { document.getelementbyid('d').style.color = 'black'; } </script> </head> <body> <div id="d" class="thunder">thunder</div> <button onclick="stilo()">click here to change text color</b...
Manipulating video using canvas - Web APIs
canvas c1 is used to display the current frame of the original video, while c2 is used to display the video after performing the chroma-keying effect; c2 is p
reloaded with the still image that will be used to replace the green background in the video.
... every pixel in the frame's image data that is found that is within the parameters that are considered to be part of the green screen has its alpha value replaced with a zero, indicating that the pixel is enti
rely transparent.
Compositing example - Web APIs
the example: window.onload = function() { // lum in srgb var lum = { r: 0.33, g: 0.33, b: 0.33 }; // resize canvas canvas1.width = width; canvas1.height = height; canvas2.width = width; canvas2.height = height; lightmix() colorsphere(); runcomposite(); return; }; and this code, runcomposite(), handles the bulk of the work,
relying on a number of utility functions to do the hard parts.
...0.8)"; ctx.fillrect(0, height/2 - 20, width/2, 20); ctx.fillstyle = "#fff"; ctx.font = "14px arial"; ctx.filltext('new content', 5, height/2 - 5); ctx.restore(); dd.appendchild(canvastodrawon); dd.appendchild(canvastodrawfrom); dd.appendchild(canvastodrawresult); dl.appendchild(dd); } }; utility functions the program
relies on a number of utility functions.
Drawing shapes with canvas - Web APIs
all elements are placed
relative to this origin.
...x and y specify the position on the canvas (
relative to the origin) of the top-left corner of the rectangle.
Optimizing canvas - Web APIs
use multiple layered canvases for complex scenes in your application, you may find that some objects need to move or change frequently, while others remain
relatively static.
... <div id="stage"> <canvas id="ui-layer" width="480" height="320"></canvas> <canvas id="game-layer" width="480" height="320"></canvas> <canvas id="background-layer" width="480" height="320"></canvas> </div> <style> #stage { width: 480px; height: 320px; position:
relative; border: 2px solid black; } canvas { position: absolute; } #ui-layer { z-index: 3; } #game-layer { z-index: 2; } #background-layer { z-index: 1; } </style> use plain css for large background images if you have a static background image, you can draw it onto a plain <div> element using the css background property and position it under the canvas.
Canvas API - Web APIs
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.
DataTransfer.effectAllowed - Web APIs
the move operation is used to indicate that the data being dragged will be moved, and the link operation is used to indicate that some form of
relationship or connection will be created between the source and drop locations.
... = " + ev.datatransfer.effectallowed); ev.preventdefault(); // set the dropeffect to move ev.datatransfer.dropeffect = "move" } </script> <body> <h1>examples <code>datatransfer</code>.{<code>dropeffect</code>, <code>effectallowed</code>} properties</h1> <div> <p id="source" ondragstart="dragstart_handler(event);" draggable="true"> select this element, drag it to the drop zone and then
release the selection to move the element.</p> </div> <div id="target" ondrop="drop_handler(event);" ondragover="dragover_handler(event);">drop zone</div> </body> </html> specifications specification status comment html living standardthe definition of 'effectallowed' in that specification.
DataTransfer.setDragImage() - Web APIs
the method's x and y coordinates define how the image should appear
relative to the mouse pointer.
...; ev.preventdefault(); // get the data, which is the id of the drop target var data = ev.datatransfer.getdata("text"); ev.target.appendchild(document.getelementbyid(data)); } </script> <body> <h1>example of <code>datatransfer.setdragimage()</code></h1> <div> <p id="source" ondragstart="dragstart_handler(event);" draggable="true"> select this element, drag it to the drop zone and then
release the selection to move the element.</p> </div> <div id="target" ondrop="drop_handler(event);" ondragover="dragover_handler(event);">drop zone</div> </body> </html> specifications specification status comment html living standardthe definition of 'setdragimage()' in that specification.
Detecting device orientation - Web APIs
increasingly, web-enabled devices are capable of determining their orientation; that is, they can report data indicating changes to their orientation with
relation to the pull of gravity.
... so let's imagine a ball in a garden: <div class="garden"> <div class="ball"></div> </div> <pre class="output"></pre> this garden is 200 pixel wide (yes, it's a tiny one), and the ball is in the center: .garden { position:
relative; width : 200px; height: 200px; border: 5px solid #ccc; border-radius: 10px; } .ball { position: absolute; top : 90px; left : 90px; width : 20px; height: 20px; background: green; border-radius: 100%; } now, if we move our device, the ball will move accordingly: var ball = document.queryselector('.ball'); var garden = document.queryselector('.garden'); var output...
DirectoryEntrySync - Web APIs
void getfile ( in domstring path, in optional flags options ) raises (fileexception); parameter path either an absolute path or a
relative path from the directory to the file to be looked up or created.
... void getdirectory ( in domstring path, in optional flags options ) raises (fileexception); parameter path either an absolute path or a
relative path from the directory to the file to be looked up or created.
Document: DOMContentLoaded event - Web APIs
function dosomething() { console.info('dom loaded'); } if (document.readystate === 'loading') { // loading hasn't finished yet document.addeventlistener('domcontentloaded', dosomething); } else { // `domcontentloaded` has already fired dosomething(); } live example html <div class="controls"> <button id="
reload" type="button">
reload</button> </div> <div class="event-log"> <label>event log:</label> <textarea readonly class="event-log-contents" rows="8" cols="30"></textarea> </div> css body { display: grid; grid-template-areas: "control log"; } .controls { grid-area: control; display: flex; align-items: center; justify-content: center; } .event-log { grid-area: log; } .event-l...
...og-contents { resize: none; } label, button { display: block; } #
reload { height: 2rem; } js const log = document.queryselector('.event-log-contents'); const
reload = document.queryselector('#
reload');
reload.addeventlistener('click', () => { log.textcontent =''; window.settimeout(() => { window.location.
reload(true); }, 200); }); window.addeventlistener('load', (event) => { log.textcontent = log.textcontent + 'load\n'; }); document.addeventlistener('readystatechange', (event) => { log.textcontent = log.textcontent + `readystate: ${document.readystate}\n`; }); document.addeventlistener('domcontentloaded', (event) => { log.textcontent = log.textcontent + `domcontentloaded\n`; }); result specifications specification status comment ...
Document: keyup event - Web APIs
the keyup event is fired when a key is
released.
...to ignore all keyup events that are part of composition, do something like this (229 is a special value set for a keycode
relating to an event that has been processed by an ime): eventtarget.addeventlistener("keyup", event => { if (event.iscomposing || event.keycode === 229) { return; } // do something }); examples this example logs the keyboardevent.code value whenever you
release a key.
Document: readystatechange event - Web APIs
bubbles no cancelable no interface event event handler property onreadystatechange examples live example html <div class="controls"> <button id="
reload" type="button">
reload</button> </div> <div class="event-log"> <label>event log:</label> <textarea readonly class="event-log-contents" rows="8" cols="30"></textarea> </div> css body { display: grid; grid-template-areas: "control log"; } .controls { grid-area: control; display: flex; align-items: center; justify-content: center; } .event-log { grid-area: log; } .event-log-contents { resize: none; } label, button { display: block; } #
reload { height: 2rem; } ...
... js const log = document.queryselector('.event-log-contents'); const
reload = document.queryselector('#
reload');
reload.addeventlistener('click', () => { log.textcontent =''; window.settimeout(() => { window.location.
reload(true); }, 200); }); window.addeventlistener('load', (event) => { log.textcontent = log.textcontent + 'load\n'; }); document.addeventlistener('readystatechange', (event) => { log.textcontent = log.textcontent + `readystate: ${document.readystate}\n`; }); document.addeventlistener('domcontentloaded', (event) => { log.textcontent = log.textcontent + `domcontentloaded\n`; }); result specifications specification status comment html living standardthe definition of 'readystatechange' in that specification.
DynamicsCompressorNode - Web APIs
dynamicscompressornode.
release read only is a k-rate audioparam representing the amount of time, in seconds, required to increase the gain by 10 db.
... into it var source = audioctx.createmediaelementsource(myaudio); // create a compressor node var compressor = audioctx.createdynamicscompressor(); compressor.threshold.setvalueattime(-50, audioctx.currenttime); compressor.knee.setvalueattime(40, audioctx.currenttime); compressor.ratio.setvalueattime(12, audioctx.currenttime); compressor.attack.setvalueattime(0, audioctx.currenttime); compressor.
release.setvalueattime(0.25, audioctx.currenttime); // connect the audiobuffersourcenode to the destination source.connect(audioctx.destination); button.onclick = function() { var active = button.getattribute('data-active'); if(active == 'false') { button.setattribute('data-active', 'true'); button.innerhtml = 'remove compression'; source.disconnect(audioctx.destination); sourc...
EffectTiming.fill - Web APIs
ent .main { width: 300px; height:300px; border: 1px solid black; } .button { cursor: pointer; width: 300px; border: 1px solid black; font-size: 16px; text-align: center; margin-top: 0px; padding-top: 2px; padding-bottom: 4px; color: white; background-color: darkgreen; font: 14px "open sans", "arial", sans-serif; } #text { width: 160px; padding: 10px; position:
relative; text-align: center; align-self: center; color: white; font: bold 2em "lucida grande", "open sans", sans-serif; } while there's other css involved in this example, the part that really matters for our purposes is the css that styles the "box" element that we'll be animating.
... that css looks like this: #box { width: 200px; height: 200px; left: 50px; top: 50px; border: 1px solid #7788ff; margin: 0; position:
relative; background-color: #2233ff; display: flex; justify-content: center; } all this does is specify the size, border, and color information, as well as indicate that the box should be centered both vertically and horizontally inside its container.
Element: click event - Web APIs
an element receives a click event when a pointing device button (such as a mouse's primary mouse button) is both pressed and
released while the pointer is located inside the element.
... bubbles yes cancelable yes interface mouseevent event handler property onclick if the button is pressed on one element and the pointer is moved outside the element before the button is
released, the event is fired on the most specific ancestor element that contained both elements.
Element.getClientRects() - Web APIs
each domrect object contains read-only left, top, right and bottom properties describing the border box, in pixels, with the top-left
relative to the top-left of the viewport.
...when called on svg elements other than an outer-<svg>, the "viewport" that the resulting rectangles are
relative to is the viewport that the element's outer-<svg> establishes (and to be clear, the rectangles are also transformed by the outer-<svg>'s viewbox transform, if any).
Element.insertAdjacentElement() - Web APIs
the insertadjacentelement() method of the element interface inserts a given element node at a given position
relative to the element it is invoked upon.
... syntax targetelement.insertadjacentelement(position, element); parameters position a domstring representing the position
relative to the targetelement; must match (case-insensitively) one of the following strings: 'beforebegin': before the targetelement itself.
Element.insertAdjacentText() - Web APIs
the insertadjacenttext() method of the element interface inserts a given text node at a given position
relative to the element it is invoked upon.
... syntax element.insertadjacenttext(position, element); parameters position a domstring representing the position
relative to the element; must be one of the following strings: 'beforebegin': before the element itself.
Element.setPointerCapture() - Web APIs
subsequent events for the pointer will be targeted at the capture element until capture is
released (via element.
releasepointercapture()).
... html <div id="slider">slide me</div> css div { width: 140px; height: 50px; display: flex; align-items: center; justify-content: center; background: #fbe; } javascript function beginsliding(e) { slider.onpointermove = slide; slider.setpointercapture(e.pointerid); } function stopsliding(e) { slider.onpointermove = null; slider.
releasepointercapture(e.pointerid); } function slide(e) { slider.style.transform = `translate(${e.clientx - 70}px)`; } const slider = document.getelementbyid('slider'); slider.onpointerdown = beginsliding; slider.onpointerup = stopsliding; result specifications specification status comment pointer events – level 2the definition of 'setpointercapture' in that s...
ErrorEvent - Web APIs
the errorevent interface represents events providing information
related to errors in scripts or in files.
... <div id="interfacediagram" style="display: inline-block; position:
relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/event" target="_top"><rect x="1" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="38.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">event</text></a><polyline points="76,25 86,20 86,30 76,25" stroke="#d4dde4" fill="none"/><line x1="86" y1="25" x2="116" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/errorevent" target="_top"><rect x="...
ExtendableEvent - Web APIs
<div id="interfacediagram" style="display: inline-block; position:
relative; width: 100%; padding-bottom: 8.571428571428571%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-20 0 700 60" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/event" target="_top"><rect x="1" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="38.5" y="30" font-...
... note: in chrome, logging statements are visible via the "inspect" interface for the
relevant service worker accessed via chrome://serviceworker-internals.
Fetch API - Web APIs
it also defines
related concepts such as cors and the http origin header semantics, supplanting their separate definitions elsewhere.
... fetch mixin body provides methods
relating to the body of the response/request, allowing you to declare what its content type is and how it should be handled.
File.type - Web APIs
moreover, file.type is generally
reliable only for common file types like images, html documents, audio and video.
...developers are advised not to
rely on this property as a sole validation scheme.
File - Web APIs
<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/blob" target="_top"><rect x="1" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="38.5" y="30" font-...
... file.prototype.webkit
relativepath read only returns the path the url of the file is
relative to.
FileSystemDirectoryEntry.getDirectory() - Web APIs
syntax filesystemdirectoryentry.getdirectory([path][, options][, successcallback][, errorcallback]); parameters path optional a usvstring representing an absolute path or a path
relative to the directory on which the method is called, describing which directory entry to return.
... [1] when create is false, the value of exclusive is ir
relevant and ignored.
FileSystemDirectoryEntry.getFile() - Web APIs
syntax filesystemdirectoryentry.getfile([path][, options][, successcallback][, errorcallback]); parameters path optional a usvstring specifying the path,
relative to the directory on which the method is called, describing which file's entry to return.
... [1] when create is false, the value of exclusive is ir
relevant and ignored.
FileSystemDirectoryEntry - Web APIs
getdirectory() returns a filesystemdirectoryentry object representing a directory located at a given path,
relative to the directory on which the method is called.
... getfile() returns a filesystemfileentry object representing a file located within the directory's hierarchy, given a path
relative to the directory on which the method is called.
FileHandle API - Web APIs
if you want a file to survive a page refresh/app
relaunch, you need to store the handle in a more permanent location, like the database itself.
...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).
FocusEvent() - Web APIs
when the event has both a source and a destination, the
relatedtarget value must be set to the other target.
... focuseventinit optional is a focuseventinit dictionary, having the following fields: "
relatedtarget", optional and defaulting to null, is an eventtarget representing the secondary target of a focusevent.
GeolocationCoordinates.altitude - Web APIs
the geolocationcoordinates.altitude read-only property is a double representing the altitude of the position in meters,
relative to sea level.
... syntax let alt = geolocationcoordinatesinstance.altitude value a double representing the altitude of the position in meters,
relative to sea level.
Geolocation API - Web APIs
concepts and usage you will often want to retrieve a user's location information in your web app, for example to plot their location on a map, or display personalized information
relevant to their location.
... geolocationcoordinates represents the coordinates of a user's position; a geolocationcoordinates instance contains latitude, longitude, and other important
related information.
GlobalEventHandlers.onanimationcancel - Web APIs
px; } .main { width: 300px; height: 300px; border: 1px solid black; } .button { cursor: pointer; width: 300px; border: 1px solid black; font-size: 16px; text-align: center; margin-top: 0; padding-top: 2px; padding-bottom: 4px; color: white; background-color: darkgreen; font: 14px "open sans", "arial", sans-serif; } #text { width: 46px; padding: 10px; position:
relative; text-align: center; align-self: center; color: white; font: bold 1.4em "lucida grande", "open sans", sans-serif; } leaving out some bits of the css that don't matter for the discussion here, let's take a look at the styles for the box that we're animating.
... #box { width: var(--boxwidth); height: var(--boxwidth); left: 0; top: 0; border: 1px solid #7788ff; margin: 0; position:
relative; background-color: #2233ff; display: flex; justify-content: center; animation: 5s ease-in-out 0s infinite alternate both slidebox; } the animation's keyframes are described next, plotting a course from the top-left corner of the content box to the bottom-right corner.
GlobalEventHandlers.onanimationend - Web APIs
0px; } .main { width: 300px; height:300px; border: 1px solid black; } .button { cursor: pointer; width: 300px; border: 1px solid black; font-size: 16px; text-align: center; margin-top: 0; padding-top: 2px; padding-bottom: 4px; color: white; background-color: darkgreen; font: 14px "open sans", "arial", sans-serif; } #text { width: 46px; padding: 10px; position:
relative; text-align: center; align-self: center; color: white; font: bold 1.4em "lucida grande", "open sans", sans-serif; } leaving out some bits of the css that don't matter for the discussion here, let's take a look at the styles for the box that we're animating.
... #box { width: var(--boxwidth); height: var(--boxwidth); left: 0; top: 0; border: 1px solid #7788ff; margin: 0; position:
relative; background-color: #2233ff; display: flex; justify-content: center; } the animation sequence is described next.
GlobalEventHandlers.onanimationiteration - Web APIs
0px; } .main { width: 300px; height:300px; border: 1px solid black; } .button { cursor: pointer; width: 300px; border: 1px solid black; font-size: 16px; text-align: center; margin-top: 0; padding-top: 2px; padding-bottom: 4px; color: white; background-color: darkgreen; font: 14px "open sans", "arial", sans-serif; } #text { width: 46px; padding: 10px; position:
relative; text-align: center; align-self: center; color: white; font: bold 1.4em "lucida grande", "open sans", sans-serif; } leaving out some bits of the css that don't matter for the discussion here, let's take a look at the styles for the box that we're animating.
... #box { width: var(--boxwidth); height: var(--boxwidth); left: 0; top: 0; border: 1px solid #7788ff; margin: 0; position:
relative; background-color: #2233ff; display: flex; justify-content: center; animation: 2s ease-in-out 0s infinite alternate both paused slidebox; } the animation's keyframes are defined next; they describe an animation which causes the box to migrate from the top-left corner of the container to the bottom-right corner.
GlobalEventHandlers.onanimationstart - Web APIs
0px; } .main { width: 300px; height:300px; border: 1px solid black; } .button { cursor: pointer; width: 300px; border: 1px solid black; font-size: 16px; text-align: center; margin-top: 0; padding-top: 2px; padding-bottom: 4px; color: white; background-color: darkgreen; font: 14px "open sans", "arial", sans-serif; } #text { width: 46px; padding: 10px; position:
relative; text-align: center; align-self: center; color: white; font: bold 1.4em "lucida grande", "open sans", sans-serif; } leaving out some bits of the css that don't matter for the discussion here, let's take a look at the styles for the box that we're animating.
... #box { width: var(--boxwidth); height: var(--boxwidth); left: 0; top: 0; border: 1px solid #7788ff; margin: 0; position:
relative; background-color: #2233ff; display: flex; justify-content: center; } the animation sequence is described next.
GlobalEventHandlers.onkeyup - Web APIs
the keyup event fires when the user
releases a key that was previously pressed.
... example this example logs the keyboardevent.code value whenever you
release a key inside the <input> element.
HTMLAudioElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position:
relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="mi...
... examples basic usage you can create a htmlaudioelement enti
rely with javascript using the audio() constructor: var audioelement = new audio('car_horn.wav'); then you can invoke the play() method on the element audioelement.play(); a common gotcha is trying to play an audio element immediately on page load.
HTMLBaseElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position:
relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="11...
... htmlbaseelement.href is a domstring that reflects the href html attribute, containing a base url for
relative urls in the document.
HTMLBaseFontElement - Web APIs
htmlbasefontelement.size is a domstring representing the font size as either a numeric or
relative value.
...
relative value starts with a '+' or a '-'.
HTMLBodyElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position:
relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,...
... living standard technically, the event-
related properties onafterprint, onbeforeprint, onbeforeunload, onblur, onerror, onfocus, onhashchange, onlanguagechange, onload, onmessage, onoffline, ononline, onpopstate, onresize, onstorage, and onunload, have been moved to windoweventhandlers.
HTMLButtonElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position:
relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a>...
... if the button is not a descendant of a form element, then the attribute can be the id of any form element in the same document it is
related to, or the null value if none matches.
HTMLElement.offsetLeft - Web APIs
for block-level elements, offsettop, offsetleft, offsetwidth, and offsetheight describe the border box of an element
relative to the offsetparent.
... syntax left = element.offsetleft; left is an integer representing the offset to the left in pixels from the closest
relatively positioned parent element.
HTMLElement.offsetTop - Web APIs
the htmlelement.offsettop read-only property returns the distance of the current element
relative to the top of the offsetparent node.
... syntax toppos = element.offsettop; parameters toppos is the number of pixels from the top of the closest
relatively positioned parent element.
HTMLFieldSetElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position:
relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignme...
... if the field set is not a descendant of a form element, then the attribute can be the id of any form element in the same document it is
related to, or the null value if none matches.
HTMLFontElement.size - Web APIs
it contains either an integer number in the range of 1-7 or a
relative value to increase/decrease the value of the size attribute of the <basefont> element.
... the format of the string must follow one of the following html microsyntaxes: microsyntax description examples valid size number string integer number in the range of 1-7 6
relative size string +x or -x, where x is the number
relative to the value of the size attribute of the <basefont> element (the result should be in the same range of 1-7) +2 -1 syntax sizestring = fontobj.size; fontobj.size = sizestring; examples // assumes there is <font id="f"> element in the html var f = document.getelementbyid("f"); f.size = "6"; specifications the <font> tag is not supported in html5 and as a result neither is <font>.size .
HTMLHyperlinkElementUtils - Web APIs
the htmlhyperlinkelementutils mixin defines utility methods and properties to work with htmlancho
relement and htmlareaelement.
... there are no objects of this type, but several objects such as htmlancho
relement and htmlareaelement implement it.
HTMLImageElement.x - Web APIs
the read-only htmlimageelement property x indicates the x-coordinate of the <img> element's left border edge
relative to the root element's origin.
...if the image is in an <iframe>, its x is
relative to that frame.
HTMLImageElement.y - Web APIs
the read-only htmlimageelement property y indicates the y-coordinate of the <img> element's top border edge
relative to the root element's origin.
...if the image is in an <iframe>, its y is
relative to that frame.
HTMLLegendElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position:
relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 ...
... htmllegendelement.align is a domstring representing the alignment
relative to the form set methods no specific method; inherits methods from its parent, htmlelement.
HTMLObjectElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position:
relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fil...
... htmlobjectelement.codebase is a domstring that reflects the codebase html attribute, specifying the base path to use to resolve
relative uris.
HTMLScriptElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position:
relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12p...
...these algorithms describe the core ideas, but they
rely on the parsing rules for <script> start and end tags in html, in foreign content, and in xml; the rules for the document.write() method; the handling of scripting; and so on.
HTMLVideoElement - Web APIs
you should either provide your video in a single format that all the
relevant browsers supports, or provide multiple video sources in enough different formats that all the browsers you need to support are covered.
... <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 x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/nod...
In depth: Microtasks and the JavaScript runtime environment - Web APIs
it was designed in an era in which this was a positive choice; there were few multi-processor computers available to the general public, and the expected amount of code that would be handled by javascript was
relatively low at that time.
...across multiple instances and across all browsers and javascript runtimes, a standardized microqueue mechanism means these microtasks will operate
reliably in the same order, thus avoiding potentially difficult to find bugs.
History.pushState() - Web APIs
the new url does not need to be absolute; if it's
relative, it's resolved
relative to the current url.
...with the hash-based approach, you need to encode all of the
relevant data into a short string.
History - Web APIs
go() asynchronously loads a page from the session history, identified by its
relative location to the current page, for example -1 for the previous page or 1 for the next page.
...calling go() without parameters or a value of 0
reloads the current page.
History API - Web APIs
similarly, you can move forward (as if the user clicked the forward button), like this: window.history.forward() moving to a specific point in history you can use the go() method to load a specific page from session history, identified by its
relative position to the current page.
... (the current page's
relative position is 0.) to move back one page (the equivalent of calling back()): window.history.go(-1) to move forward a page, just like calling forward(): window.history.go(1) similarly, you can move forward 2 pages by passing 2, and so forth.
IDBCursor.update() - Web APIs
return value an idbrequest object on which subsequent events
related to this operation are fired.
...if the albumtitle of the current cursor is "a farewell to kings", we update year the album was
released using var request = cursor.update();.
IDBDatabase.transaction() - Web APIs
valid values are: "default", "strict", and "
relaxed".
... if you need to open the object store in readwrite mode to change data, you would use the following: var transaction = db.transaction('my-store-name', "readwrite"); as of firefox 40, indexeddb transactions have
relaxed durability guarantees to increase performance (see bug 1112702), which is the same behaviour as other indexeddb-supporting browsers.
IDBDatabaseException - Web APIs
constants note: do not
rely on the numeric values of the constants, which might change as the specifications continue to change.
... unknown_err 1 the operation failed for reasons un
related to the database itself, and it is not covered by any other error code--for example, a failure due to disk io errors.
IDBRequest.error - Web APIs
syntax var myerror = request.error; value a domerror containing the
relevant error.
... unknownerror if the operation failed for reasons un
related to the database itself.
IDBTransaction - Web APIs
<div id="interfacediagram" style="display: inline-block; position:
relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30"...
... firefox durability guarantees note that as of firefox 40, indexeddb transactions have
relaxed durability guarantees to increase performance (see bug 1112702.) previously in a readwrite transaction idbtransaction.oncomplete was fired only when all data was guaranteed to have been flushed to disk.
InstallEvent - Web APIs
<div id="interfacediagram" style="display: inline-block; position:
relative; width: 100%; padding-bottom: 8.571428571428571%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-20 0 700 60" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/event" target="_top"><rect x="1" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="38.5" y="30" font-...
... note: logging statements are visible in google chrome via the "inspect" interface for the
relevant service worker accessed via chrome://serviceworker-internals.
LockManager.request() - Web APIs
steal optional: if true, then any held locks with the same name will be
released, and the request will be granted, preempting any queued requests for it.
...since the lock is only granted if it was available, this call avoids needing to wait on the lock being
released elsehwere.
MediaDevices.ondevicechange - Web APIs
: white; background-color: darkgreen; } h2 { margin-bottom: 4px; } .left { float:left; width: 48%; margin-right: 2% } .right { float:right; width: 48%; margin-left: 2% } .devicelist { border: 1px solid black; list-style-type: none; margin-top: 2px; padding: 6px; } javascript content other code below is other code which, while needed to make this example work, isn'tt
related directly to ondevicechange, so we won't go into any detail.
... elem = document.createelement("li"); let [kind, type, direction] = device.kind.match(/(\w+)(input|output)/i); elem.innerhtml = "<strong>" + device.label + "</strong> (" + direction + ")"; if (type === "audio") { audiolist.appendchild(elem); } else if (type === "video") { videolist.appendchild(elem); } }); }); } updatedevicelist() consists enti
rely of a call to the function enumeratedevices() on the mediadevices object referenced in the navigator.mediadevices property, as well as the code that's run when the promise returned by enumeratedevices() is fulfilled.
MediaDevices - Web APIs
var video = document.queryselector('video'); var constraints = window.constraints = { audio: false, video: true }; var erro
relement = document.queryselector('#errormsg'); navigator.mediadevices.getusermedia(constraints) .then(function(stream) { var videotracks = stream.getvideotracks(); console.log('got stream with constraints:', constraints); console.log('using video device: ' + videotracks[0].label); stream.onremovetrack = function() { console.log('stream ended'); }; window.stream = stream; // make var...
...ght.exact + ' px is not supported by your device.'); } else if (error.name === 'permissiondeniederror') { errormsg('permissions have not been granted to use your camera and ' + 'microphone, you need to allow the page access to your devices in ' + 'order for the demo to work.'); } errormsg('getusermedia error: ' + error.name, error); }); function errormsg(msg, error) { erro
relement.innerhtml += '<p>' + msg + '</p>'; if (typeof error !== 'undefined') { console.error(error); } } specifications specification status comment media capture and streamsthe definition of 'mediadevices' in that specification.
MediaError.message - Web APIs
the read-only property mediaerror.message returns a domstring which contains a human-readable string offering specific diagnostic details
related to the error described by the mediaerror object, or an empty string ("") if no diagnostic information can be determined or provided.
... only the
relevant parts of the code are displayed; you can see the complete source code here.
MediaStreamAudioSourceNode - Web APIs
as such, you can't easily
rely on the order matching between any two browsers or browser versions.
... this is why it is typically wiser to use mediastreamtrackaudiosourcenode, which provides similar capabilities but was better-defined upon being added to the specification, so it's more
reliable.
Media Capture and Streams API (Media Stream) - Web APIs
the media capture and streams api, often called the media streams api or simply mediastream api, is an api
related to webrtc which provides support for streaming audio and video data.
... concepts and usage the api is based on the manipulation of a mediastream object representing a flux of audio- or video-
related data.
MessageEvent - Web APIs
the action triggered by this event is defined in a function set as the event handler for the
relevant message event (e.g.
... <div id="interfacediagram" style="display: inline-block; position:
relative; width: 100%; padding-bottom: 13.333333333333334%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 80" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/event" target="_top"><rect x="1" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="38.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">event</text></a><polyline points="76,25 86,20 86,30 76,25" stroke="#d4dde4" fill="none"/><line x1="86...
Microdata DOM API - Web APIs
each item is represented in the dom by the element on which the
relevant itemscope attribute is found.
...getvalues() returns an array of the various values that the
relevant elements have.
MouseEvent() - Web APIs
"button", optional and defaulting to 0, of type short, that describes which button is pressed during events
related to the press or
release of a button: value meaning 0 main button pressed (usually the left button) or un-initialized 1 auxiliary button pressed (usually the middle button) 2 secondary button pressed (usually the right button) "buttons", optional and defaulting to 0,...
...tons are pressed when the event is launched: bit-field value meaning 0 no button pressed 1 main button pressed (usually the left button) 2 secondary button pressed (usually the right button) 4 auxiliary button pressed (usually the middle button) "
relatedtarget", optional and defaulting to null, of type eventtarget, that is the element just left (in case of a mouseenter or mouseover) or is entering (in case of a mouseout or mouseleave).
MouseEvent.button - Web APIs
this property only guarantees to indicate which buttons are pressed during events caused by pressing or
releasing one or multiple buttons.
... as such, it is not
reliable for events such as mouseenter, mouseleave, mouseover, mouseout or mousemove.
MouseEvent.initMouseEvent() - Web APIs
syntax event.initmouseevent(type, canbubble, cancelable, view, detail, screenx, screeny, clientx, clienty, ctrlkey, altkey, shiftkey, metakey, button,
relatedtarget); parameters type the string to set the event's type to.
...
relatedtarget the event's
related eventtarget.
NavigatorID.userAgent - Web APIs
browser identification based on detecting the user agent string is un
reliable and is not recommended, as the user agent string is user configurable.
... syntax var ua = navigator.useragent; value a domstring specifying the complete user agent string the browser provides both in http headers and in response to this and other
related methods on the navigator object.
Node.compareDocumentPosition() - Web APIs
the node.comparedocumentposition() method reports the position of the given node
relative to another node in any document — not just the given node’s document.
... return value an integer value whose bits represent the othernode's
relationship to the calling node.
Node.isConnected - Web APIs
syntax var isitconnected = nodeobjectinstance.isconnected return value a boolean that is true if the node is connected to its
relevant context object, and false if not.
...cted); // returns false document.body.appendchild(test); console.log(test.isconnected); // returns true shadow dom a shadow dom example: // create a shadow root var shadow = this.attachshadow({mode: 'open'}); // create some css to apply to the shadow dom var style = document.createelement('style'); console.log(style.isconnected); // returns false style.textcontent = ` .wrapper { position:
relative; } .info { font-size: 0.8rem; width: 200px; display: inline-block; border: 1px solid black; padding: 10px; background: white; border-radius: 10px; opacity: 0; transition: 0.6s all; positions: absolute; bottom: 20px; left: 10px; z-index: 3 } `; // attach the created style element to the shadow dom shadow.appendchild(style); console.log(style.isconnected); // retur...
Node - Web APIs
<div id="interfacediagram" style="display: inline-block; position:
relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30"...
... node.getboxquads() returns a list of the node's css boxes
relative to another node.
NodeIterator - Web APIs
non-matching nodes are skipped, but their children may be included, if
relevant.
... nodeiterator.filter read only returns a nodefilter used to select the
relevant nodes.
Notification.close() - Web APIs
a valid use for this api would be to remove a notification that is no longer
relevant (e.g.
...at the end of the function, it also calls close() inside a addeventlistener() function to remove the notification when the
relevant content has been read on the webpage.
performance.clearMarks() - Web APIs
performance.mark("squir
rel"); performance.mark("squir
rel"); performance.mark("monkey"); performance.mark("monkey"); performance.mark("dog"); performance.mark("dog"); logmarkcount() // "found this many entries: 6" // delete just the "squir
rel" performancemark entries.
... performance.clearmarks('squir
rel'); logmarkcount() // "found this many entries: 4" // delete all of the performancemark entries.
Performance - Web APIs
the performance interface provides access to performance-
related information for the current page.
... performance.timing read only a legacy performancetiming object containing latency-
related performance information.
PerformanceNavigationTiming.type - Web APIs
the value must be one of the following: navigate navigation started by clicking a link, entering the url in the browser's address bar, form submission, or initializing through a script operation other than
reload and back_forward as listed below.
...
reload navigation is through the browser's
reload operation or location.
reload().
Performance API - Web APIs
the timing property returns a performancetiming object containing latency-
related performance information such as the start of navigation time, start and end times for redirects, start and end times for responses, etc.
... interfaces performance provides methods and properties containing timing-
related performance information for the given page.
PublicKeyCredentialCreationOptions.challenge - Web APIs
this is randomly generated then sent from the
relying party's server.
...contains a cryptographic challenge emitted from the
relying party's server which must be signed by the authenticator's private key and sent back (within the response) to the
relying party's server for verification.
PublicKeyCredentialRequestOptions.challenge - Web APIs
this is randomly generated then sent from the
relying party's server.
...contains a cryptographic challenge emitted from the
relying party's server which must be signed by the authenticator's private key and sent back (within the response) to the
relying party's server for verification.
PublicKeyCredentialRequestOptions.rpId - Web APIs
the rpid property, of the publickeycredentialrequestoptions dictionary, is an optional property which indicates the
relying party's identifier as a usvstring.
... syntax rpid = publickeycredentialrequestoptions.rpid value a usvstring for the identifier of the
relying party.
PublicKeyCredentialRequestOptions - Web APIs
properties publickeycredentialrequestoptions.challenge a buffersource, emitted by the
relying party's server and used as a cryptographic challenge.
... publickeycredentialrequestoptions.rpid optional a usvstring which indicates the
relying party's identifier (ex.
RTCConfiguration - Web APIs
a value of
relay limits the candidates to those
relayed through another server, such as a stun or turn server.
... "
relay" only ice candidates whose ip addresses are being
relayed, such as those being passed through a turn server, will be considered.
RTCIceCandidate.address - Web APIs
applications being built with user privacy and security in mind can choose to limit the permitted candidates to
relay candidates only.
...to do this, configure the ice agent's ice transport policy using rtcconfiguration, like this: var rtcconfig = { iceservers: [ { urls: "turn:myturn.server.ip", username: "username", credential: "password" } ], icetransportpolicy: "
relay" } by setting rtcconfiguration.icetransportpolicy to "
relay", any host candidates (candidates where the ip address is the peer's own ip address) are left out of the pool of candidates, as are any other candidates which aren't
relay candidates.
RTCIceCandidate.type - Web APIs
relay the candidate is a
relay candidate, obtained from a turn server.
... the
relay candidate's ip address is an address the turn server uses to forward the media between the two peers.
RTCIceCandidateStats.address - Web APIs
if the value of address is comprised enti
rely of digits from 0-9 with periods as separators, the value is interpreted as an ipv4 address.
... if the value is enti
rely comprised of hexadecimal digits and colon (":") characters, it is interpreted as an ipv6 address.
RTCIceCandidateStats.candidateType - Web APIs
relay the candidate is a
relay candidate, obtained from a turn server.
... the
relay candidate's ip address is an address the turn server uses to forward the media between the two peers.
RTCIceCandidateStats.mozLocalTransport - Web APIs
the non-standard mozilla extension to the rtcicecandidatestats dictionary, mozlocaltransport, has been supplanted by the standard
relayprotocol property.
... syntax instead of using mozlocaltransport, you should use code like this: localtransport = rtcicecandidatestats.
relayprotocol; specifications not part of any specification.
RTCIceCandidateType - Web APIs
relay the candidate is a
relay candidate, obtained from a turn server.
... the
relay candidate's ip address is an address the turn server uses to forward the media between the two peers.
RTCOutboundRtpStreamStats.sliCount - Web APIs
sli packet is used by a decoder to let the encoder (the sender) know that it's detected corruption of one or more consecutive macroblocks, in scan order, in the received media.in general, what's usually of interest is that the higher this number is, the more the stream data is becoming corrupted between the sender and the receiver, causing the receiver to request retransmits or to drop frames enti
rely.
...a high value of slicount may be an indication of an un
reliable network.
RTCPeerConnection.createAnswer() - Web APIs
keep in mind that this is part of the signaling process, the transport layer for which is an implementation detail that's enti
rely up to you.
...the contents of the object being passed to the sendtoserver() function, along with everything else in the promise fulfillment handler, depend enti
rely on your design pc.createanswer().then(function(answer) { return pc.setlocaldescription(answer); }) .then(function() { // send the answer to the remote peer through the signaling server.
RTCPeerConnection.createDataChannel() - Web APIs
maxpacketlifetime optional the maximum number of milliseconds that attempts to transfer a message may take in un
reliable mode.
... maxretransmits optional the maximum number of times the user agent should attempt to retransmit a message which fails the first time in un
reliable mode.
RTCRtpReceiver.getCapabilities() static function - Web APIs
it is enti
rely possible that certain combinations of options may fail to work when you actually try to use them.
...for that reason, in privacy-sensitive contexts, the browser may choose to obscure the capabilities; this might be done, for example, by leaving out ra
rely-used codec configurations.
RTCRtpSender.getCapabilities() static function - Web APIs
it is enti
rely possible that certain combinations of options may fail to work when you actually try to use them.
...for that reason, in privacy-sensitive contexts, the browser may choose to obscure the capabilities; this might be done, for example, by leaving out ra
rely-used codec configurations.
RTCStats.id - Web APIs
using the id, you can cor
relate two or more rtcstats-based objects in order to monitor statistics over time for a given webrtc object, such as an rtp stream, an rtcpeerconnection, or an rtcdatachannel.
... the format of the id string is not defined by the specification, so you cannot
reliably make any assumptions about the contents of the string, or assume that the format of the string will remain unchanged for a given object type.
RTCStats.timestamp - Web APIs
for reports
related to rtcp packets, for instance, this indicates the time at which the data covered by the statistics was received at the corresponding endpoint.
...this should be accurate to within a few milliseconds but may not be enti
rely pricise, either because of hardware or operating system limitations or because of fingerprinting protection in the form of reduced clock precision or accuracy.
ReadableStream - Web APIs
while the stream is locked, no other reader can be acquired until this one is
released.
...while the stream is locked, no other reader can be acquired until this one is
released.
ReadableStreamBYOBReader - Web APIs
returns a promise that fulfills if the stream becomes closed or the reader's lock is
released, or rejects if the stream errors.
... readablestreambyobreader.
releaselock()
releases the reader's lock on the stream.
ReadableStreamDefaultReader - Web APIs
returns a promise that fulfills if the stream becomes closed or the reader's lock is
released, or rejects if the stream errors.
... readablestreamdefaultreader.
releaselock()
releases the reader's lock on the stream.
Reporting API - Web APIs
reports sent to endpoints can be retrieved independently of the running of the websites they
relate to, which is useful — a crash for example could bring down a web site and stop anything running, but a report could still be obtained to give the developer some clues as to why it happened.
... available report types the spec defines the following report types: deprecation report indicates that a webapi or other browser feature being used in the website is expected to stop working in a future
release.
SVGRenderingIntent - Web APIs
<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/svgrenderingintent" target="_top"><rect x="1" y="1" width="180" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="91" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgrenderingintent</text></a></svg></div> a:hover...
... rendering_intent_
relative_colorimetric 3 corresponds to the value
relative-colorimetric.
Screen Capture API - Web APIs
screen capture api concepts and usage the screen capture api is
relatively simple to use.
... mediatrackconstraints.logicalsurface indicates whether or not the video in the stream represents a logical display surface (that is, one which may not be enti
rely visible onscreen, or may be completely offscreen).
ServiceWorker - Web APIs
a serviceworker object is available in the serviceworkerregistration.active property, and the serviceworkercontainer.controller property — this is a service worker that has been activated and is controlling the page (the service worker has been successfully registered, and the controlled page has been
reloaded.) the serviceworker interface is dispatched a set of lifecycle events — install and activate — and functional events including fetch.
... a serviceworker object has an associated serviceworker.state,
related to its lifecycle.
Storage API - Web APIs
there are two modes: "best-effort" the user agent will try to retain the data contained in the box for as long as it can, but will not warn users if storage space runs low and it becomes necessary to clear the box in order to
relieve the storage pressure.
...the "persistent-storage" feature's permission-
related flags, algorithms, and types are all set to the standard defaults for a permission, except that the permission state must be the same across the entire origin, and that if the permission state isn't "granted" (meaning that for whatever reason, access to the persistent storage feature was denied), the origin's site storage unit's box mode is always "best-effort".
Using writable streams - Web APIs
it should do whatever is necessary to finalize writes to the underlying sink, and
release access to it.
... we also create a new textencoder instance using the
relevant constructor to encode the message into chunks to be put into the stream.
Streams API - Web APIs
related stream apis and operations bytelengthqueuingstrategy provides a built-in byte length queuing strategy that can be used when constructing streams.
... bytestream-
related interfaces important: these are not implemented anywhere as yet, and questions have been raised as to whether the spec details are in a finished enough state for them to be implemented.
Touch.screenY - Web APIs
summary returns the y coordinate of the touch point
relative to the screen, not including any scroll offset.
... syntax var y = touchitem.screeny; return value y the y coordinate of the touch point
relative to the screen, not including any scroll offset.
UIEvent.pageX - Web APIs
the non-standard, read-only uievent property pagex returns the horizontal coordinate of the event
relative to the whole document.
...this value is
relative to the left edge of the entire document, regardless of the current horizontal scrolling offset of the document.
USBDevice - Web APIs
usbdevice.close() returns a promise that resolves when all open interfaces are
released and the device session has ended.
... usbdevice.
releaseinterface() returns a promise that resolves when a cliamed interface is
released from exclusive access.
VideoPlaybackQuality.corruptedVideoFrames - Web APIs
the videoplaybackquality interface's read-only corruptedvideoframes property the number of corrupted video frames that have been received since the <video> element was last loaded or
reloaded.
... syntax corruptframefount = videoplaybackquality.corruptedvideoframes; value the number of corrupted video frames that have been received since the <video> element was last loaded or
reloaded.
Visual Viewport API - Web APIs
the visual viewport lets web developers solve this by positioning elements
relative to what's shown on screen.
...these events allow you to position elements
relative to the visual viewport that would normally be anchored to the layout viewport.
WebGLRenderingContext.makeXRCompatible() - Web APIs
addeventlistener("load", (event) => { loadsceneresources(currentscene); glstartbutton.addeventlistener("click", handlestartbuttonclick); xrstartbutton.addeventlistener("click", handlestartbuttonclick); }); outputcanvas.addeventlistener("webglcontextlost", (event) => { /* the context has been lost but can be restored */ event.canceled = true; }); /* when the gl context is reconnected,
reload the resources for the current scene.
... handlers are provided for both webglcontextlost and webglcontextrestored; in the first case, we make sure we're aware that the state can be recovered, while in the latter we actually
reload the scene to ensure we have the correct resources for the current screen or headset configuration.
Introduction to WebRTC protocols - Web APIs
it needs to bypass firewalls that would prevent opening connections, give you a unique address if like most situations your device doesn’t have a public ip address, and
relay data through a server if your router doesn’t allow you to directly connect with peers.
... traversal using
relays around nat (turn) is meant to bypass the symmetric nat restriction by opening a connection with a turn server and
relaying all information through that server.
Using WebRTC data channels - Web APIs
in this guide, we'll examine how to add a data channel to a peer connection, which can then be used to secu
rely exchange arbitrary data; that is, any kind of data we wish, in any format we choose.
...it was expected that messages would be
relatively small.
Writing WebSocket servers - Web APIs
keeping track of clients this doesn't directly
relate to the websocket protocol, but it's worth mentioning here: your server must keep track of clients' sockets so you don't keep handshaking again with clients who have already completed the handshake.
...
related websocket handshake library in c++ writing websocket client applications tutorial: websocket server in c# tutorial: websocket server in vb.net tutorial: websocket server in java ...
The WebSocket API (WebSockets) - Web APIs
note: while a websocket connection is functionally somewhat similar to standard unix-style sockets, they are not
related.
...
related topics ajax javascript specifications specification status comments html living standardthe definition of 'websocket api' in that specification.
Using the Web Animations API - Web APIs
we no longer need to
rely on dom-heavy techniques such as writing css properties and scoping classes onto elements to control playback direction.
... conclusion these are the basic features of the web animations api, most of which are already supported across the latest
release versions of firefox and chrome.
Migrating from webkitAudioContext - Web APIs
t(); xhr.open("get", "/path/to/audio.ogg", true); xhr.responsetype = "arraybuffer"; xhr.send(); xhr.onload = function() { var decodedbuffer = context.createbuffer(xhr.response, false); if (decodedbuffer) { // decoding was successful, do something useful with the audio buffer } else { alert("decoding the audio buffer failed"); } }; converting this code to use decodeaudiodata() is
relatively simple, as can be seen below: var xhr = new xmlhttprequest(); xhr.open("get", "/path/to/audio.ogg", true); xhr.responsetype = "arraybuffer"; xhr.send(); xhr.onload = function() { context.decodeaudiodata(xhr.response, function onsuccess(decodedbuffer) { // decoding was successful, do something useful with the audio buffer }, function onfailure() { alert("decoding the audio buff...
... note that these bounds are not enforced by the engine, and are me
rely used for informational purposes.
Web Audio API - Web APIs
it can be used to simply incorporate audio into your website or application, by providing atmosphere like futu
relibrary.no, or auditory feedback on forms.
... audioparam the audioparam interface represents an audio-
related parameter, like one of an audionode.
WheelEvent - Web APIs
therefore, do not
rely on delta* properties to get the content's scrolling direction.
... <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/event" target="_top"><rect x="1" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="38.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">event</text></a><polyline points="76,25 86,20 86,30 76,25" stroke="#d4dde4" fill="none"/><line x1="86...
Window.closed - Web APIs
refreshing a previously opened popup in this example the function refreshpopupwindow() calls the
reload() method of the popup's location object to refresh its data.
... const popupwindow = null; function refreshpopupwindow() { if (popupwindow && !popupwindow.closed) { // popupwindow is open, refresh it popupwindow.location.
reload(true); } else { // open a new popup window popupwindow = window.open('popup.html', 'datawindow'); } } specification specification status comment html living standardthe definition of 'window.closed' in that specification.
Window.event - Web APIs
idsafari on iossamsung interneteventchrome full support 1edge full support 12firefox full support 63notes disabled full support 63notes disabled notes this was briefly enabled by default in 65, then removed again while
related compatibility issues are sorted out (see bug 1520756).disabled from version 63: this feature is behind the dom.window.event.enabled preference (needs to be set to true).
... 1.1webview android full support 1chrome android full support 18firefox android full support 63notes disabled full support 63notes disabled notes this was briefly enabled by default in 65, then removed again while
related compatibility issues are sorted out (see bug 1520756).disabled from version 63: this feature is behind the dom.window.event.enabled preference (needs to be set to true).
Window: load event - Web APIs
interface event event handler property onload examples log a message when the page is fully loaded: window.addeventlistener('load', (event) => { console.log('page is fully loaded'); }); the same, but using the onload event handler property: window.onload = (event) => { console.log('page is fully loaded'); }; live example html <div class="controls"> <button id="
reload" type="button">
reload</button> </div> <div class="event-log"> <label>event log:</label> <textarea readonly class="event-log-contents" rows="8" cols="30"></textarea> </div> css body { display: grid; grid-template-areas: "control log"; } .controls { grid-area: control; display: flex; align-items: center; justify-content: center; } .event-log { grid-area: log; } .event-l...
...og-contents { resize: none; } label, button { display: block; } #
reload { height: 2rem; } js const log = document.queryselector('.event-log-contents'); const
reload = document.queryselector('#
reload');
reload.addeventlistener('click', () => { log.textcontent =''; window.settimeout(() => { window.location.
reload(true); }, 200); }); window.addeventlistener('load', (event) => { log.textcontent = log.textcontent + 'load\n'; }); document.addeventlistener('readystatechange', (event) => { log.textcontent = log.textcontent + `readystate: ${document.readystate}\n`; }); document.addeventlistener('domcontentloaded', (event) => { log.textcontent = log.textcontent + `domcontentloaded\n`; }); result specifications specification status comment ...
window.location - Web APIs
location.assign("http://www.mozilla.org"); // or location = "http://www.mozilla.org"; example #2: force
reloading the current page from the server location.
reload(true); example #3 consider the following example, which will
reload the page by using the replace() method to insert the value of location.pathname into the hash: function
reloadpagewithhash() { var initialpage = location.pathname; location.replace('http://example.com/#' + initialpage); } example #4: display the properties of the cu...
...nclick="showloc();">show location properties</button> example #5: send a string of data to the server by modifying the search property: function senddata (sdata) { location.search = sdata; } // in html: <button onclick="senddata('some data');">send data</button> the current url with "?some%20data" appended is sent to the server (if no action is taken by the server, the current document is
reloaded with the modified search string).
Privileged features - Web APIs
centerscreen centers the window in
relation to its parent's size and position.
... the exact behavior of modal windows depends on the platform and on the mozilla
release version.
Window.requestAnimationFrame() - Web APIs
the element moves at a speed of 0.1px/ms to the right, so its
relative position (in css pixels) can be calculated in function of the time elapsed since the start of the animation (in milliseconds) with 0.1 * elapsed.
... element.style.transform = 'translatex(' + math.min(0.1 * elapsed, 200) + 'px)'; if (elapsed < 2000) { // stop the animation after 2 seconds window.requestanimationframe(step); } } window.requestanimationframe(step); notes edge versions below 17 and internet explorer do not
reliably fire requestanimationframe before the paint cycle.
Window.resizeBy() - Web APIs
example // shrink the window window.resizeby(-200, -200); notes this method resizes the window
relative to its current size.
... // create resizable window myexternalwindow = window.open("http://myurl.domain", "mywindowname", "resizable"); // resize window to 500x500 myexternalwindow.resizeto(500, 500); // make window
relatively smaller to 400x400 myexternalwindow.resizeby(-100, -100); the window you create must respect the same origin policy.
WindowOrWorkerGlobalScope.setTimeout() - Web APIs
note: 4 ms is specified by the html5 spec and is consistent across browsers
released in 2010 and onward.
... firefox for android uses a timeout value of 15 minutes for background tabs since bug 736602 in firefox 14, and background tabs can also be unloaded enti
rely.
HTML in XMLHttpRequest - Web APIs
var xhr = new xmlhttprequest(); xhr.onload = function() { console.log(this.responsexml.title); } xhr.open("get", "file.html"); xhr.responsetype = "document"; xhr.send(); feature detection method 1 this method
relies on the "force async" nature of the feature.
... function htmlinxhr() { if (!window.xmlhttprequest) return false; var req = new window.xmlhttprequest(); req.open('get', window.location.href, false); try { req.responsetype = 'document'; } catch(e) { return true; } return false; } view on jsfiddle this method is synchronous, does not
rely on external assets though it may not be as
reliable as method 2 described below since it does not check the actual feature but an indication of that feature.
XRFrame.getViewerPose() - Web APIs
the getviewerpose() method, a member of the xrframe interface, returns a xrviewerpose object which describes the viewer's pose (position and orientation)
relative to the specified reference space.
... return value a xrviewerpose describing the viewer's position and orientation
relative to the specified reference space.
XRFrame - Web APIs
in addition to providing a reference to the xrsession for which this frame is to be rendered, the getviewerpose() method is provided to obtain the xrviewerpose describing the viewer's position and orientation in space, and getpose() can be used to create an xrpose describing the
relative position of one xrspace
relative to another.
... methods getpose() returns an xrpose object representing the spatial
relationship between the two specified xrspace objects.
XRInputSource.targetRaySpace - Web APIs
<<<--- needs diagram showing targetrayspace
relative to gripspace and world space --->>> to obtain an xrspace representing the input controller's position and orientation in virtual space, use the gripspace property.
... the code should continue to perform tasks such as drawing controllers or any objects representative of the user's hands' positions in the virtual space, as well as any other input-
related tasks.
XRInputSource - Web APIs
once the action is completed and the user has
released the trigger or the grip, a squeeze event is sent.
...when the action has completed (such as when the user
releases the button), a select event is sent.
XRPermissionDescriptor.optionalFeatures - Web APIs
syntax xrpermissiondescriptor = { mode: xrsessionmode, requiredfeatures: reqfeatu
relist, optionalfeatures: optfeatu
relist }; xrpermissiondescriptor.optionalfeatures = optfeatu
relist; optfeatu
relist = xrpermissiondescriptor.optionalfeatures; value an array of strings taken from the xrreferencespacetype enumerated type, indicating set of features that your app would like to use, but can operate without if permission to use them isn't available.
... for devices with six degrees of freedom (6dof) tracking, the local reference space tries to keep the origin stable
relative to the environment.
XRPermissionDescriptor.requiredFeatures - Web APIs
syntax xrpermissiondescriptor = { mode: xrsessionmode, requiredfeatures: reqfeatu
relist, optionalfeatures: optfeatu
relist }; xrpermissiondescriptor.requiredfeatures = reqfeatu
relist; reqfeatu
relist = xrpermissiondescriptor.requiredfeatures; value an array of strings indicating the webxr features which must be available for use by the app or site.
... for devices with six degrees of freedom (6dof) tracking, the local reference space tries to keep the origin stable
relative to the environment.
XRPose.transform - Web APIs
the transform read-only attribute of the xrpose interface is a xrrigidtransform object providing the position and orientation of the pose
relative to the base xrspace as specified when the pose was obtained by calling xrframe.getpose().
... syntax let posetransform = xrpose.transform; value an xrrigidtransform which provides the position and orientation of the xrpose
relative to the xrframe to which this xrpose is aligned.
XRPose - Web APIs
xrpose is a webxr api interface representing a position and orientation in the 3d space,
relative to the xrspace within which it resides.
... properties xrpose.transform read only a xrrigidtransform which provides the position and orientation of the pose
relative to the base xrspace.
XRRigidTransform - Web APIs
xrrigidtransform is used to specify transforms throughout the webxr apis, including: the offset and orientation
relative to the parent reference space to use when creating a new reference space with getoffsetreferencespace().
... example this code snippet creates an xrrigidtransform to specify the offset and orientation in
relation to the current reference space to use when creating a new reference space.
XRSession.onselectend - Web APIs
the onselectend attribute of the xrsession object is the event handler for the selectend event, which is dispatched when user finishes making some sort of selection by
releasing a trigger, touchpad, or button, finishes speaking a command, or makes a hand gesture.
... for example, this might include
releasing a button or joystick.
XRSpace - Web APIs
spatial data in webxr is always expressed
relative to an object based upon one of the descendant interfaces of xrspace, at the time at which a given xrframe takes place.
... numeric values such as pose positions are thus coordinates in the corresponding xrspace,
relative to that space's origin.
XRViewerPose - Web APIs
an xrviewerpose is always obtained and referenced
relative to an existing xrreferencespace.
... this ensures that positions and orientations are reported using the expected
relative coordinate system.
Using the alert role - Accessibility
this allows the developer to reiterate information that has become more
relevant or urgent to the user.
... aria attributes used alert
related aria techniques using the alertdialog role using the aria-invalid property compatibility tbd: add support information for common ua and at product combinations additional resources aria best practices - alert role: http://www.w3.org/tr/wai-aria-practices/#alert ...
Using the aria-describedby attribute - Accessibility
it is used to establish a
relationship between widgets or groups and text that described them.
... used by aria roles all elements of the base markup
related aria techniques using the aria-labelledby attribute compatibility tbd: add support information for common ua and at product combinations additional resources wai-aria specification for aria-describedby ...
Using the aria-valuetext attribute - Accessibility
value string representation of a number possible effects on user agents and assistive technology if the aria-valuetext attribute is absent, assistive technologies will
rely solely on the aria-valuenow attribute for the current value.
... <div role="slider" aria-valuenow="1" aria-valuemin="1" aria-valuemax="7" aria-valuetext="sunday"> working examples: notes used with aria roles progressbar scrollbar slider spinbutton
related aria techniques aria-valuenow compatibility tbd: add support information for common ua and at product combinations additional resources wai-aria specification for the aria-valuetext attribute ...
Using the log role - Accessibility
<div id="chatarea" role="log"> <ul id="chatregion" aria-live="polite" aria-atomic="false"> <li>please choose a user name to begin using ajax chat.</li> </ul> <ul id="userlistregion" aria-live="off" aria-
relevant="additions removals text"> </ul> </div> working examples: http://websiteaccessibility.donaldevans.com/2011/07/12/aria-log/ notes using the log role on an element implies that element has aria-live="polite".
... aria attributes used log
related aria techniques marquee role compatibility tbd: add support information for common ua and at product combinations additional resources aria best practices – mplementing live regions: http://www.w3.org/tr/wai-aria-practices/#liveregions ...
Using the status role - Accessibility
if another part of the page controls what appears in the status, the
relationship should be made explicit via the aria-controls attribute.
... <p role="status">your changes were automatically saved.</p> working examples: notes aria attributes used status
related aria techniques alert role live region roles live region attributes compatibility the paciello group published some data on compatibility via their 2014 blog post: screen reader support for aria live regions tbd: add updated support information for common ua and at product combinations additional resources previous recommendations from wai-aria 1.0 (2014) for the st...
x-ms-aria-flowfrom - Accessibility
the property serves to define element
relationships utilizing aria
relationship attributes and the aria-flowto property.
... example <div tabindex="0" class="foo" id="element2" role="option" aria-posinset="1" aria-setsize="15" aria-flowto="element8" x-ms-aria-flowfrom="element5"> see also aria
relationship attributes microsoft api extensions ...
ARIA: timer role - Accessibility
the timer role does not have a
related html widget and xxx.
...however, this can sometimes be un
reliable, as it's dependent on the exact timing of these two updates.
ARIA: figure role - Accessibility
examples we could extend the initial example on the page to also identify a paragraph that provides a descriptive label for the figure by referencing its id in aria-labelledby: <div role="figure" aria-labelledby="figure-1"> <img src="diagram.png" alt="diagram showing the four layers of awesome and their
relative priority order — music, cats, nature, and ice cream"> <pre><code> let awesome = ['music', 'cats', 'nature', 'ice cream']; </code></pre> <p id="figure-1">figure 1: the four layers of awesome.</p> </div> best practices only use role="figure" if you have to — for example if you don't have control over your html but are able to improve accessibility dynamically after ...
...for example, our above example should be rewritten as follows: <figure> <img src="diagram.png" alt="diagram showing the four layers of awesome and their
relative priority order — music, cats, nature, and ice cream"> <pre><code> let awesome = ['music', 'cats', 'nature', 'ice cream']; </code></pre> <figcaption>figure 1: the four layers of awesome.</figcaption> </figure> specifications specification status accessible rich internet applications (wai-aria) 1.1the definition of 'figure' in that specification.
ARIA: grid role - Accessibility
-- more columns --> </tr> <tr> <th scope="row">aisle 2</th> <td tabindex="-1"> <button id="2a" tabindex="-1">2a</button> </td> <td tabindex="-1"> <button id="2b" tabindex="-1">2b</button> </td> <!-- more columns --> </tr> </tbody> </table> description a grid widget contains one or more rows with one or more cells of thematically
related interactive content.
... while it does not imply a specific visual presentation, it implies a
relationship among elements.
ARIA: Main role - Accessibility
the main content area consists of content that is directly
related to or expands upon the central topic of a document, or the central functionality of an application.
...if this is the case, include aria-owns to identify the
relationship of the main to it's document or application ancestor.
ARIA: rowgroup role - Accessibility
n role="columnheader"aria-sort="none">population</span> </div> </div> <div role="rowgroup"> <div role="row"> <span role="cell">finland</span> <span role="cell">5.5 million</span> </div> <div role="row"> <span role="cell">france</span> <span role="cell">67 million</span> </div> </div> </div> description rowgroup establishes a
relationship between owned row elements and is a structural equivalent to the thead, tfoot and tbody elements in html.
...a
relevant use case for the aria table role is when the css's display property overrides the native semantics of a table, such as by display: grid.
ARIA: table role - Accessibility
realize, it is much simpler to simply use the <table> element, along with all the
related semantic elements and attributes that are all supported by all assistive technologies.
...a
relevant use case for the aria table role is when css's display property overrides the native semantics of a table, such as by display: grid.
Basic form hints - Accessibility
when implementing forms using traditional html form-
related elements, it is important to provide labels for controls, and explicitly associate a label with its control.
...abel for="wine-2">pinot blanc</label> </li> <li> <input id="wine-3" type="checkbox" value="pinot-grigio"/> <label for="wine-3">pinot grigio</label> </li> <li> <input id="wine-4" type="checkbox" value="gewurztraminer"/> <label for="wine-4">gewürztraminer</label> </li> </ul> </form> labeling with aria the html <label> element is appropriate for form-
related elements, but many form controls are implemented as a dynamic javascript widget, using <div>s or <span>s.
ARIA - Accessibility
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.
...
related topics accessibility, ajax, javascript ...
Keyboard-navigable JavaScript widgets - Accessibility
tabindex="0") yes in tab order
relative to element's position in document (note that interactive elements like <a> have this behavior by default, they don't need the attribute).
... don't
rely on consistent behavior for key repeat, at this point unfortunately onkeydown may or may not repeat depending on what browser and os you're running on.
Color contrast - Accessibility
ontent minimum ratio (aa rating) enhanced ratio (aaa rating) body text 4.5 : 1 7 : 1 large-scale text (120-150% larger than body text) 3 : 1 4.5 : 1 active user interface components and graphical objects such as icons and graphs 3 : 1 not defined these ratios do not apply to "incidental" text, such as inactive controls, logotypes, or pu
rely decorative text.
...
related wcag success criteria 1.4.3 minimum contrast (aa) the color contrast between background and foreground content should be at a minimum level to ensure legibility: text and its background should have a contrast ratio of at least 4.5:1.
Robust - Accessibility
robust states that content must be robust enough that it can be interpreted
reliably by a wide variety of user agents, including assistive technologies.
... note: to read the w3c definitions for robust and its guidelines and success criteria, see principle 4: robust — content must be robust enough that it can be interpreted
reliably by a wide variety of user agents, including assistive technologies.
-webkit-border-before - CSS: Cascading Style Sheets
it
relates to -webkit-border-after, -webkit-border-start, and -webkit-border-end, which define the other borders of the element.
...alpha-value> = <number> | <percentage><hue> = <number> | <angle> examples applying a border with vertical text html <div> <p class="exampletext">example text</p> </div> css div { background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: vertical-rl; -webkit-border-before: 5px dashed blue; } result specifications not part of any standard, but it
relates to the standards-track border-block-start property.
:active - CSS: Cascading Style Sheets
styles defined by the :active pseudo-class will be overridden by any subsequent link-
related pseudo-class (:link, :hover, or :visited) that has at least equal specificity.
... to style links appropriately, put the :active rule after all other link-
related rules, as defined by the lvha-order: :link — :visited — :hover — :active.
:link - CSS: Cascading Style Sheets
/* selects any <a> that has not been visited yet */ a:link { color: red; } styles defined by the :link pseudo-class will be overridden by any subsequent link-
related pseudo-class (:active, :hover, or :visited) that has at least equal specificity.
... to style links appropriately, put the :link rule before all other link-
related rules, as defined by the lvha-order: :link — :visited — :hover — :active.
:target - CSS: Cascading Style Sheets
this technique
relies on the ability of anchor links to point to elements that are initially hidden on the page.
... quisque quis neque arcu, nec gravida magna.</figcaption> </figure> </div> css /* unopened lightbox */ .lightbox { display: none; } /* opened lightbox */ .lightbox:target { position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; } /* lightbox content */ .lightbox figcaption { width: 25rem; position:
relative; padding: 1.5em; background-color: lightpink; } /* close button */ .lightbox .close { position:
relative; display: block; } .lightbox .close::after { right: -1rem; top: -1rem; width: 2rem; height: 2rem; position: absolute; display: flex; z-index: 1; align-items: center; justify-content: center; background-color: black; border-radius: 50%; color: white; con...
:valid - CSS: Cascading Style Sheets
id and invalid form fields in this example, we use structures like this, which include extra <span>s to generate content on; we'll use these to provide indicators of valid/invalid data: <div> <label for="fname">first name *: </label> <input id="fname" name="fname" type="text" required> <span></span> </div> to provide these indicators, we use the following css: input + span { position:
relative; } input + span::before { position: absolute; right: -20px; top: 5px; } input:invalid { border: 2px solid red; } input:invalid + span::before { content: '✖'; color: red; } input:valid + span::before { content: '✓'; color: green; } we set the <span>s to position:
relative so that we can position the generated content
relative to them.
...people who have certain types of color blindness will be unable to determine the input's state unless it is accompanied by an additional indicator that does not
rely on color to convey meaning.
:visited - CSS: Cascading Style Sheets
/* selects any <a> that has been visited */ a:visited { color: green; } styles defined by the :visited pseudo-class will be overridden by any subsequent link-
related pseudo-class (:link, :hover, or :active) that has at least equal specificity.
...the alpha component of the element's non-:visited state will be used instead, except when that component is 0, in which case the style set in :visited will be ignored enti
rely.
speak-as - CSS: Cascading Style Sheets
do not
rely on it to convey information critical to understanding the page's purpose.
... let's talk about speech css | css tricks formal definition
related at-rule@counter-styleinitial valueautocomputed valueas specified formal syntax auto | bullets | numbers | words | spell-out | <counter-style-name>where <counter-style-name> = <custom-ident> examples setting the spoken form for a counter html <ul class="list"> <li>one</li> <li>two</li> <li>three</li> <li>four</li> <li>five</li> </ul> css @counter-style speak-as-example { system: fixed; symbols: ; suffix: " "; speak-as: numbers; } .list { list-style: speak-as-example; } result specifications specification status comment css counter styles level 3the definition of 'speak-as' in that specification.
@font-face - CSS: Cascading Style Sheets
the ability to specify the name of a locally-installed font to look for and use makes it possible to customize the font beyond the basics while making it possible to do so without
relying on an internet connection.
... font mime types format mime type truetype font/ttf opentype font/otf web open font format font/woff web open font format 2 font/woff2 notes web fonts are subject to the same domain restriction (font files must be on the same domain as the page using them), unless http access controls are used to
relax this restriction.
prefers-reduced-data - CSS: Cascading Style Sheets
user preferences currently no user agent implements this feature, although various operating systems do support such preferences and if this media query is ever implemented user agents will likely
rely on the settings provided by the operating system.
... in this example the montserrat-regular.woff2 font file will neither be p
reloaded nor downloaded if the user prefers reduced data, in this case the "system font stack" will serve as the fallback font: html <head> <link
rel="p
reload" href="fonts/montserrat-regular.woff2" as="font" media="(prefers-reduced-data: no-preference)" crossorigin> <link
rel="stylesheet" href="style.css"> </head> css @media (prefers-reduced-data: no-preference) { @font-face { font-family: montserrat; font-style: normal; font-weight: 400; font-display: swap; /* latin */ src: local('montserrat regular'), local('montserrat-regular'), url('fonts/montserrat-regu...
Using multi-column layouts - CSS: Cascading Style Sheets
unfortunately this is impossible to do with css and html without forcing column breaks at fixed positions, or seve
rely restricting the markup allowed in the text, or using heroic scripting.
...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.
CSS Multi-column Layout - CSS: Cascading Style Sheets
relationship to fragmentation multiple-column layout is closely
related to paged media, in that each column box becomes a fragment, much like a printed page becomes a fragment of an overall document.
... reference multiple-column layout properties column-count column-fill column-gap column-rule column-rule-color column-rule-style column-rule-width column-span column-width columns
related css fragmentation properties break-after break-before break-inside orphans widows guides basic concepts of multicol an overview of the multiple-column layout specification styling columns how to use column rules and manage the spacing between columns.
Typical use cases of Flexbox - CSS: Cascading Style Sheets
you can read more about the difference between flexbox and css grid layout in
relationship of flexbox to other layout methods, where we discuss how flexbox fits into the overall picture of css layout.
... some things that you might want to try in this live example
relate to the different ways you might want to constrain the media object in your design.
Flow Layout and Overflow - CSS: Cascading Style Sheets
flow
relative properties in the guide to writing modes and flow layout, we looked at the newer properties of block-size and inline-size which make more sense when working with different writing modes than tying our layout to the physical dimensions of the screen.
... the level 3 overflow module also includes flow
relative properties for overflow - overflow-block and overflow-inline.
In Flow and Out of Flow - CSS: Cascading Style Sheets
relative positioning and flow if you give an item
relative positioning with position:
relative it remains in flow, however you are then able to use the offset values to push it around.
...in the next guide we will look at a
related issue, that of creating a block formatting context, in formatting contexts explained.
Variable fonts guide - CSS: Cascading Style Sheets
bold and italic and bold italic), rather than
relying upon the browser to synthesize them.
...the term 'grade' refers to the
relative weight or density of the typeface design, but differs from traditional 'weight' in that the physical space the text occupies does not change, so changing the text grade doesn't change the overall layout of the text or elements around it.
CSS grids, logical values, and writing modes - CSS: Cascading Style Sheets
in the code snippet below, the item is placed 20 pixels from the top, and 30 pixels from the left of the container: .container { position:
relative; } .item { position: absolute; top: 20px; left: 30px; } <div class="container"> <div class="item">item</div> </div> another place you might see physical keywords in use, is when using text-align: right to align text to the right.
... we call these keywords and properties physical because they
relate to the screen you are looking at.
CSS Grid Layout and Accessibility - CSS: Cascading Style Sheets
returning to the source if at any time in the design process you find yourself using grid to
relocate the position of an element, consider whether you should return to your document and make a change to the logical order too.
...for more information about this interaction see the guide on the
relationship of grid layout to other layout methods and the section on display: contents.
Line-based placement with CSS Grid - CSS: Cascading Style Sheets
it may help to realize that this is due to grid using the flow-
relative directions defined in the css writing modes specification.
... we will explore how grids work with writing modes in a later article however we have the concept of four flow-
relative directions: block-start block-end inline-start inline-end we are working in english, a left-to-right language.
CSS Grid Layout - CSS: Cascading Style Sheets
css grid layout excels at dividing a page into major regions or defining the
relationship in terms of size, position, and layer, between parts of a control built from html primitives.
...ows grid-auto-flow grid grid-row-start grid-column-start grid-row-end grid-column-end grid-row grid-column grid-area row-gap column-gap gap css functions repeat() minmax() fit-content() css data types <flex> glossary entries grid grid lines grid tracks grid cell grid area gutters grid axis grid row grid column guides basic concepts of grid layout
relationship of grid layout to other layout methods layout using line-based placement grid template areas layout using named grid lines auto-placement in css grid layout box alignment in css grid layout css grid, logical values and writing modes css grid layout and accessibility css grid and progressive enhancement realising common layouts using css grid subgrid external resources css...
Using z-index - CSS: Cascading Style Sheets
source code for the example html <div id="abs1"> <b>div #1</b> <br />position: absolute; <br />z-index: 5; </div> <div id="
rel1"> <b>div #2</b> <br />position:
relative; <br />z-index: 3; </div> <div id="
rel2"> <b>div #3</b> <br />position:
relative; <br />z-index: 2; </div> <div id="abs2"> <b>div #4</b> <br />position: absolute; <br />z-index: 1; </div> <div id="sta1"> <b>div #5</b> <br />no positioning <br />z-index: 8; </div> css div { padding: 10px; opacity: 0.7; text-align: center...
...; } b { font-family: sans-serif; } #abs1 { z-index: 5; position: absolute; width: 150px; height: 350px; top: 10px; left: 10px; border: 1px dashed #900; background-color: #fdd; } #
rel1 { z-index: 3; height: 100px; position:
relative; top: 30px; border: 1px dashed #696; background-color: #cfc; margin: 0px 50px 0px 50px; } #
rel2 { z-index: 2; height: 100px; position:
relative; top: 15px; left: 20px; border: 1px dashed #696; background-color: #cfc; margin: 0px 50px 0px 50px; } #abs2 { z-index: 1; position: absolute; width: 150px; height: 350px; top: 10px; right: 10px; border: 1px dashed #900; background-color: #fdd; } #sta1 { z-index: 8; height: 70px; border: 1px dashed #996; background-color: #ffc; margin: 0px 50px 0...
Stacking context example 2 - CSS: Cascading Style Sheets
example source code <!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <html> <head><style type="text/css"> div { font: 12px arial; } span.bold { font-weight: bold; } #div2 { z-index: 2; } #div3 { z-index: 1; } #div4 { z-index: 10; } #div1,#div3 { height: 80px; position:
relative; border: 1px dashed #669966; background-color: #ccffcc; padding-left: 5px; } #div2 { opacity: 0.8; position: absolute; width: 150px; height: 200px; top: 20px; left: 170px; border: 1px dashed #990000; background-color: #ffdddd; text-align: center; } #div4 { opacity: 0.8; position: absolute; width: 200px; height: 70px; top: 65px; left: 50...
...px; border: 1px dashed #000099; background-color: #ddddff; text-align: left; padding-left: 10px; } </style></head> <body> <br /> <div id="div1"><br /> <span class="bold">div #1</span><br /> position:
relative; <div id="div2"><br /> <span class="bold">div #2</span><br /> position: absolute;<br /> z-index: 2; </div> </div> <br /> <div id="div3"><br /> <span class="bold">div #3</span><br /> position:
relative;<br /> z-index: 1; <div id="div4"><br /> <span class="bold">div #4</span><br /> position: absolute;<br /> z-index: 10; </div> </div> </body> </html> ...
Stacking without the z-index property - CSS: Cascading Style Sheets
source code for the example html <div id="abs1" class="absolute"> <b>div #1</b><br />position: absolute;</div> <div id="
rel1" class="
relative"> <b>div #2</b><br />position:
relative;</div> <div id="
rel2" class="
relative"> <b>div #3</b><br />position:
relative;</div> <div id="abs2" class="absolute"> <b>div #4</b><br />position: absolute;</div> <div id="sta1" class="static"> <b>div #5</b><br />position: static;</div> css b { font-family: sans-serif; } div { padding: 10px; border: 1px dashed; text-ali...
...gn: center; } .static { position: static; height: 80px; background-color: #ffc; border-color: #996; } .absolute { position: absolute; width: 150px; height: 350px; background-color: #fdd; border-color: #900; opacity: 0.7; } .
relative { position:
relative; height: 80px; background-color: #cfc; border-color: #696; opacity: 0.7; } #abs1 { top: 10px; left: 10px; } #
rel1 { top: 30px; margin: 0px 50px 0px 50px; } #
rel2 { top: 15px; left: 20px; margin: 0px 50px 0px 50px; } #abs2 { top: 10px; right: 10px; } #sta1 { background-color: #ffc; margin: 0px 50px 0px 50px; } ...
Overview of CSS Shapes - CSS: Cascading Style Sheets
this allows the overlay of wrapped content around an image, or the use of an image which is never displayed on the page pu
rely as a method of creating a complex shape without needing to carefully map a polygon.
...
relationship to clip-path the basic shapes and box values used to create shapes are the same as those used as values for clip-path.
Shapes From Images - CSS: Cascading Style Sheets
many demos do this as it helps to show the shape we are following, however the shape-outside 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 could also try removing the background image completely, thus using the gradient pu
rely to create the shape and not displaying it on the page at all.
Layout and the containing block - CSS: Cascading Style Sheets
identifying the containing block the process for identifying the containing block depends enti
rely on the value of the element's position property: if the position property is static,
relative, or sticky, the containing block is formed by the edge of the content box of the nearest ancestor element that is either a block container (such as an inline-block, block, or list-item element) or establishes a formatting context (such as a table container, flex container, grid container, or the bloc...
... if the position property is absolute, the containing block is formed by the edge of the padding box of the nearest ancestor element that has a position value other than static (fixed, absolute,
relative, or sticky).
Pseudo-classes - CSS: Cascading Style Sheets
/* any button over which the user's pointer is hovering */ button:hover { color: blue; } pseudo-classes let you apply a style to an element not only in
relation to the content of the document tree, but also in
relation to external factors like the history of the navigator (:visited, for example), the status of its content (like :checked on certain form elements), or the position of the mouse (like :hover, which lets you know if the mouse is over an element or not).
... html5 recommendation copies the
relevant section from the canonical (whatwg) html spec.
CSS reference - CSS: Cascading Style Sheets
note that css rule definitions are enti
rely (ascii) text-based, whereas dom-css / cssom (the rule management system) is object-based.
... combinators combinators are selectors that establish a
relationship between two or more simple selectors, such as "a is a child of b" or "a is adjacent to b." adjacent sibling combinator a + b specifies that the elements selected by both a and b have the same parent and that the element selected by b immediately follows the element selected by a horizontally.
Scaling of SVG backgrounds - CSS: Cascading Style Sheets
if background-size specifies a fixed dimension (that is, percentages and
relative units are fixed by their context), that dimension wins.
...in this case, rule 1 isn't
relevant, so rule 2 is applied: we try to preserve any intrinsic ratio (while respecting contain or cover).
animation-fill-mode - CSS: Cascading Style Sheets
me encountered normal even or odd 100% or to reverse even or odd 0% or from alternate even 0% or from alternate odd 100% or to alternate-reverse even 100% or to alternate-reverse odd 0% or from backwards the animation will apply the values defined in the first
relevant keyframe as soon as it is applied to the target, and retain this during the animation-delay period.
... the first
relevant keyframe depends on the value of animation-direction: animation-direction first
relevant keyframe normal or alternate 0% or from reverse or alternate-reverse 100% or to both the animation will follow the rules for both forwards and backwards, thus extending the animation properties in both directions.
appearance (-moz-appearance, -webkit-appearance) - CSS: Cascading Style Sheets
{ color: black; -moz-appearance: caret; -webkit-appearance: caret; } <div>lorem</div> firefox chrome safari edge checkbox-container div { color: black; -moz-appearance: checkbox-container; -webkit-appearance: checkbox-container; } <div>lorem</div> firefox the element is drawn like a container for a checkbox, which may include a p
relighting background effect under certain platforms.
... firefox range-thumb div { color: black; -moz-appearance: range-thumb; -webkit-appearance: range-thumb; } <div>lorem</div> firefox rating-level-indicator div{ color: black; -moz-appearance: rating-level-indicator; -webkit-appearance: rating-level-indicator; } <div>lorem</div> safari
relevancy-level-indicator div{ color: black; -moz-appearance:
relevancy-level-indicator; -webkit-appearance:
relevancy-level-indicator; } <div>lorem</div> safari scale-horizontal div { color: transparent; -moz-appearance: scale-horizontal; -webkit-appearance: scale-horizontal; } <div>lorem</div> firefox scalet...
background-size - CSS: Cascading Style Sheets
be careful about
relying on the behavior described above, and test in multiple browsers to be sure the results are acceptable.
...it also applies to ::first-letter and ::first-line.inheritednopercentages
relative to the background positioning areacomputed valueas specified, but 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 please see scaling background images fo...
background - CSS: Cascading Style Sheets
it also applies to ::first-letter and ::first-line.inheritednopercentagesas each of the properties of the shorthand:background-position: refer to the size of the background positioning area minus size of background image; size refers to the width for horizontal offsets and to the height for vertical offsetsbackground-size:
relative to the background positioning areacomputed valueas each of the properties of the shorthand:background-image: as specified, but with <url> values made absolutebackground-position: a list, each item consisting of two keywords representing the origin and two offsets from that origin, each given as an absolute length (if given a <length>), otherwise as a percentagebackground-size: as specified, ...
...but with
relative lengths converted into absolute lengthsbackground-repeat: a list, each item consisting of two keywords, one per dimensionbackground-origin: as specifiedbackground-clip: as specifiedbackground-attachment: as specifiedbackground-color: computed coloranimation typeas each of the properties of the shorthand:background-color: a colorbackground-image: discretebackground-clip: discretebackground-position: repeatable list of simple list of length, percentage, or calcbackground-size: repeatable list of simple list of length, percentage, or calcbackground-repeat: discretebackground-attachment: discrete formal syntax [ <bg-layer> , ]* <final-bg-layer>where <bg-layer> = <bg-image> | <bg-position> [ / <bg-size> ]?
block-size - CSS: Cascading Style Sheets
syntax /* <length> values */ block-size: 300px; block-size: 25em; /* <percentage> values */ block-size: 75%; /* keyword values */ block-size: max-content; block-size: min-content; block-size: fit-content(20em); block-size: auto; /* global values */ block-size: inherit; block-size: initial; block-size: unset; if the writing mode is vertically oriented, the value of block-size
relates to the width of the element; otherwise, it
relates to the height of the element.
... a
related property is inline-size, which defines the other dimension of the element.
border-bottom-width - CSS: Cascading Style Sheets
4opera android full support 10.1safari ios full support 1samsung internet android full support 1.0legend full support full support see also the other border-width-
related css properties: border-left-width, border-right-width, border-top-width, and border-width.
... the other border-bottom-
related css properties: border, border-bottom, border-bottom-style, and border-bottom-color.
border-image-width - CSS: Cascading Style Sheets
percentages are
relative to the width of the border image area for horizontal offsets and the height of the border image area for vertical offsets.
...it also applies to ::first-letter.inheritednopercentagesrefer to the width or height of the border image areacomputed valueas specified, but with
relative lengths converted into absolute lengthsanimation typeby computed value type formal syntax [ <length-percentage> | <number> | auto ]{1,4}where <length-percentage> = <length> | <percentage> examples tiling a border image this example creates a border image using the following ".png" file, which is 90 by 90 pixels: thus, each circle in the source image is 30 by 30 pixels.
border-image - CSS: Cascading Style Sheets
it also applies to ::first-letter.inheritednopercentagesas each of the properties of the shorthand:border-image-slice: refer to the size of the border imageborder-image-width: refer to the width or height of the border image areacomputed valueas each of the properties of the shorthand:border-image-outset: as specified, but with
relative lengths converted into absolute lengthsborder-image-repeat: as specifiedborder-image-slice: one to four percentage(s) (as specified) or absolute length(s), plus the keyword fill if specifiedborder-image-source: none or the image with its uri made absoluteborder-image-width: as specified, but with
relative lengths converted into absolute lengthsanimation typediscrete formal syntax <'border-...
...it also applies to ::first-letter.inheritednopercentagesas each of the properties of the shorthand:border-image-slice: refer to the size of the border imageborder-image-width: refer to the width or height of the border image areacomputed valueas each of the properties of the shorthand:border-image-outset: as specified, but with
relative lengths converted into absolute lengthsborder-image-repeat: as specifiedborder-image-slice: one to four percentage(s) (as specified) or absolute length(s), plus the keyword fill if specifiedborder-image-source: none or the image with its uri made absoluteborder-image-width: as specified, but with
relative lengths converted into absolute lengthsanimation typediscrete ...
border-left-style - CSS: Cascading Style Sheets
see also the other style-
related border properties: border-bottom-style, border-right-style, border-top-style, and border-style.
... the other left-border-
related properties: border-left, border-left-color, and border-left-width.
border-right-style - CSS: Cascading Style Sheets
see also the other style-
related border properties: border-bottom-style, border-left-style, border-top-style, and border-style.
... the other bottom-border-
related properties: border-right, border-right-color, and border-right-width.
display - CSS: Cascading Style Sheets
please note that the css display level 3 spec defines how the contents value should affect "unusual elements" — elements that aren’t rendered pu
rely by css box concepts such as replaced elements.
...block, display: inline) block and inline layout in normal flow flow layout and overflow flow layout and writing modes formatting contexts explained in flow and out of flow display: flex basic concepts of flexbox aligning items in a flex container controlling ratios of flex items along the main axis cross-browser flexbox mixins mastering wrapping of flex items ordering flex items
relationship of flexbox to other layout methods backwards compatibility of flexbox typical use cases of flexbox display: grid basic concepts of grid layout
relationship to other layout methods line-based placement grid template areas layout using named grid lines auto-placement in grid layout box alignment in grid layout grids, logical values and writing modes css grid layout and acces...
<easing-function> - CSS: Cascading Style Sheets
they cor
relate a time ratio to an output ratio, both expressed as <number>s.
... <option>ease</option> <option>ease-in</option> <option>ease-in-out</option> <option>ease-out</option> <option>cubic-bezier(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; ...
flex - CSS: Cascading Style Sheets
it is fully inflexible: it neither shrinks nor grows in
relation to the flex container.
... formal definition initial valueas each of the properties of the shorthand:flex-grow: 0flex-shrink: 1flex-basis: autoapplies toflex items, including in-flow pseudo-elementsinheritednocomputed valueas each of the properties of the shorthand:flex-grow: as specifiedflex-shrink: as specifiedflex-basis: as specified, but with
relative lengths converted into absolute lengthsanimation typeas each of the properties of the shorthand:flex-grow: a numberflex-shrink: a numberflex-basis: a length, percentage or calc(); formal syntax none | [ <'flex-grow'> <'flex-shrink'>?
font-size-adjust - CSS: Cascading Style Sheets
the font-size-adjust css property sets the size of lower-case letters
relative to the current font size (which defines the size of upper-case letters).
...it also applies to ::first-letter and ::first-line.inheritedyescomputed valueas specifiedanimation typea number formal syntax none | <number> examples adjusting lower-case letter sizes html <p class="times">this text uses the times font (10px), which is hard to read in small sizes.</p> <p class="verdana">this text uses the verdana font (10px), which has
relatively large lowercase letters.</p> <p class="adjtimes">this is the 10px times, but now adjusted to the same aspect ratio as the verdana.</p> css .times { font-family: times, serif; font-size: 10px; } .verdana { font-family: verdana, sans-serif; font-size: 10px; } .adjtimes { font-family: times, serif; font-size-adjust: 0.58; font-size: 10px; } results specifications ...
grid-template-columns - CSS: Cascading Style Sheets
<percentage> is a non-negative <percentage> value
relative to the inline size of the grid container.
... formal definition initial valuenoneapplies togrid containersinheritednopercentagesrefer to corresponding dimension of the content areacomputed valueas specified, but with
relative lengths converted into absolute lengthsanimation typesimple list of length, percentage, or calc, provided the only differences are in the values of the length, percentage, or calc components in the list formal syntax none | <track-list> | <auto-track-list> | subgrid <line-name-list>?where <track-list> = [ <line-names>?
grid-template-rows - CSS: Cascading Style Sheets
<percentage> is a non-negative <percentage> value,
relative to the block size of the grid container.
... formal definition initial valuenoneapplies togrid containersinheritednopercentagesrefer to corresponding dimension of the content areacomputed valueas specified, but with
relative lengths converted into absolute lengthsanimation typesimple list of length, percentage, or calc, provided the only differences are in the values of the length, percentage, or calc components in the list formal syntax none | <track-list> | <auto-track-list> | subgrid <line-name-list>?where <track-list> = [ <line-names>?
inline-size - CSS: Cascading Style Sheets
syntax /* <length> values */ inline-size: 300px; inline-size: 25em; /* <percentage> values */ inline-size: 75%; /* keyword values */ inline-size: max-content; inline-size: min-content; inline-size: fit-content(20em); inline-size: auto; /* global values */ inline-size: inherit; inline-size: initial; inline-size: unset; if the writing mode is vertically oriented, the value of inline-size
relates to the height of the element; otherwise, it
relates to the width of the element.
... a
related property is block-size, which defines the other dimension of the element.
margin-block-end - CSS: Cascading Style Sheets
syntax /* <length> values */ margin-block-end: 10px; /* an absolute length */ margin-block-end: 1em; /*
relative to the text size */ margin-block-end: 5%; /*
relative to the nearest block container's width */ /* keyword values */ margin-block-end: auto; /* global values */ margin-block-end: inherit; margin-block-end: initial; margin-block-end: unset; it corresponds to the margin-top, margin-right, margin-bottom, or margin-left property depending on the values defined for writing-mode, direction,...
... it
relates to margin-block-start, margin-inline-start, and margin-inline-end, which define the other margins of the element.
margin-block-start - CSS: Cascading Style Sheets
syntax /* <length> values */ margin-block-start: 10px; /* an absolute length */ margin-block-start: 1em; /*
relative to the text size */ margin-block-start: 5%; /*
relative to the nearest block container's width */ /* keyword values */ margin-block-start: auto; /* global values */ margin-block-start: inherit; margin-block-start: initial; margin-block-start: unset; it corresponds to the margin-top, margin-right, margin-bottom, or margin-left property depending on the values defined for writing-mode, ...
... it
relates to margin-block-end, margin-inline-start, and margin-inline-end, which define the other margins of the element.
margin-bottom - CSS: Cascading Style Sheets
syntax /* <length> values */ margin-bottom: 10px; /* an absolute length */ margin-bottom: 1em; /*
relative to the text size */ margin-bottom: 5%; /*
relative to the nearest block container's width */ /* keyword values */ margin-bottom: auto; /* global values */ margin-bottom: inherit; margin-bottom: initial; margin-bottom: unset; the margin-bottom property is specified as the keyword auto, or a <length>, or a <percentage>.
... <percentage> the size of the margin as a percentage,
relative to the width of the containing block.
margin-top - CSS: Cascading Style Sheets
syntax /* <length> values */ margin-top: 10px; /* an absolute length */ margin-top: 1em; /*
relative to the text size */ margin-top: 5%; /*
relative to the nearest block container's width */ /* keyword values */ margin-top: auto; /* global values */ margin-top: inherit; margin-top: initial; margin-top: unset; the margin-top property is specified as the keyword auto, or a <length>, or a <percentage>.
... <percentage> the size of the margin as a percentage,
relative to the width of the containing block.
mask-border-width - CSS: Cascading Style Sheets
percentages are
relative to the width of the border area for horizontal offsets and the height of the border area for vertical offsets.
... formal definition initial valueautoapplies toall elements; in svg, it applies to container elements excluding the defs element and all graphics elementsinheritednopercentages
relative to width/height of the mask border image areacomputed valueas specified, but with
relative lengths converted into absolute lengthsanimation typediscrete formal syntax [ <length-percentage> | <number> | auto ]{1,4}where <length-percentage> = <length> | <percentage> examples basic usage this property doesn't appear to be supported anywhere yet.
mask-border - CSS: Cascading Style Sheets
and:mask-border-mode: alphamask-border-outset: 0mask-border-repeat: stretchmask-border-slice: 0mask-border-source: nonemask-border-width: autoapplies toall elements; in svg, it applies to container elements excluding the defs element and all graphics elementsinheritednopercentagesas each of the properties of the shorthand:mask-border-slice: refer to size of the mask border imagemask-border-width:
relative to width/height of the mask border image areacomputed valueas each of the properties of the shorthand:mask-border-mode: as specifiedmask-border-outset: as specified, but with
relative lengths converted into absolute lengthsmask-border-repeat: as specifiedmask-border-slice: as specifiedmask-border-source: as specified, but with <url> values made absolutemask-border-width: as specified, but wi...
...th
relative lengths converted into absolute lengthsanimation typeas each of the properties of the shorthand:mask-border-mode: discretemask-border-outset: discretemask-border-repeat: discretemask-border-slice: discretemask-border-source: discretemask-border-width: discretecreates stacking contextyes formal syntax <'mask-border-source'> | <'mask-border-slice'> [ / <'mask-border-width'>?
mask-position - CSS: Cascading Style Sheets
the mask-position css property sets the initial position,
relative to the mask position layer set by mask-origin, for each defined mask image.
...
relative or absolute offsets can be given.
max-inline-size - CSS: Cascading Style Sheets
if the writing mode is vertically oriented, the value of max-inline-size
relates to the maximal height of the element, otherwise it
relates to the maximal width of the element.
... it
relates to max-block-size, which defines the other dimension of the element.
min-block-size - CSS: Cascading Style Sheets
x /* <length> values */ min-block-size: 100px; min-block-size: 5em; /* <percentage> values */ min-block-size: 10%; /* keyword values */ min-block-size: max-content; min-block-size: min-content; min-block-size: fit-content(20em); /* global values */ min-block-size: inherit; min-block-size: initial; min-block-size: unset; if the writing mode is vertically oriented, the value of min-block-size
relates to the minimum width of the element; otherwise, it
relates to the minimum height of the element.
... a
related property is min-inline-size, which defines the other dimension of the element.
min-inline-size - CSS: Cascading Style Sheets
gth> values */ min-inline-size: 100px; min-inline-size: 5em; /* <percentage> values */ min-inline-size: 10%; /* keyword values */ min-inline-size: max-content; min-inline-size: min-content; min-inline-size: fit-content(20em); /* global values */ min-inline-size: inherit; min-inline-size: initial; min-inline-size: unset; if the writing mode is vertically oriented, the value of min-inline-size
relates to the minimum height of the element; otherwise, it
relates to the minimum width of the element.
... a
related property is min-block-size, which defines the other dimension of the element.
mix-blend-mode - CSS: Cascading Style Sheets
{ display: flex; flex: 1 auto; 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-ori...
...iv> </div> css .circle { width: 80px; height: 80px; border-radius: 50%; mix-blend-mode: screen; position: absolute; } .circle-1 { background: red; } .circle-2 { background: lightgreen; left: 40px; } .circle-3 { background: blue; left: 20px; top: 40px; } .isolate { isolation: isolate; /* without isolation, the background color will be taken into account */ position:
relative; } result using mix-blend-mode with svg svg <svg> <g class="isolate"> <circle cx="40" cy="40" r="40" fill="red"/> <circle cx="80" cy="40" r="40" fill="lightgreen"/> <circle cx="60" cy="80" r="40" fill="blue"/> </g> </svg> css circle { mix-blend-mode: screen; } .isolate { isolation: isolate; } /* without isolation, the background color will be taken into account */ r...
offset-anchor - CSS: Cascading Style Sheets
<position> a <position> defines an x/y coordinate, to place an item
relative to the edges of an element's box.
... formal definition initial valueautoapplies totransformable elementsinheritednopercentages
relativetowidthandheightcomputed valuefor <length> the absolute value, otherwise a percentageanimation typea position formal syntax auto | <position>where <position> = [ [ left | center | right ] | [ top | center | bottom ] | [ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ]?
opacity - CSS: Cascading Style Sheets
thus, the element and its children all have the same opacity
relative to the element's background, even if they have different opacities
relative to one another.
..., guideline 1.4 explanations understanding success criterion 1.4.3 | w3c understanding wcag 2.0 formal definition initial value1.0applies toall elementsinheritednocomputed valuethe specified value, clipped in the range [0,1]animation typea number formal syntax <alpha-value>where <alpha-value> = <number> | <percentage> examples setting background opacity html <div class="light">you can ba
rely see this.</div> <div class="medium">this is easier to see.</div> <div class="heavy">this is very easy to see.</div> css div { background-color: yellow; } .light { opacity: 0.2; /* ba
rely see the text over the background */ } .medium { opacity: 0.5; /* see the text more clearly over the background */ } .heavy { opacity: 0.9; /* see the text very clearly over the background */ } result ...
padding-block-end - CSS: Cascading Style Sheets
syntax /* <length> values */ padding-block-end: 10px; /* an absolute length */ padding-block-end: 1em; /* a length
relative to the text size */ /* <percentage> value */ padding-block-end: 5%; /* a padding
relative to the block container's width */ /* global values */ padding-block-end: inherit; padding-block-end: initial; padding-block-end: unset; values the padding-block-end property takes the same values as the padding-left property.
... it
relates to padding-block-start, padding-inline-start, and padding-inline-end, which define the other paddings of the element.
padding-block-start - CSS: Cascading Style Sheets
syntax /* <length> values */ padding-block-start: 10px; /* an absolute length */ padding-block-start: 1em; /* a length
relative to the text size */ /* <percentage> value */ padding-block-start: 5%; /* a padding
relative to the block container's width */ /* global values */ padding-block-start: inherit; padding-block-start: initial; padding-block-start: unset; values the padding-block-start property takes the same values as the padding-left property.
... it
relates to padding-block-end, padding-inline-start, and padding-inline-end, which define the other paddings of the element.
padding-inline-end - CSS: Cascading Style Sheets
syntax /* <length> values */ padding-inline-end: 10px; /* an absolute length */ padding-inline-end: 1em; /* a length
relative to the text size */ /* <percentage> value */ padding-inline-end: 5%; /* a padding
relative to the block container's width */ /* global values */ padding-inline-end: inherit; padding-inline-end: initial; padding-inline-end: unset; values the padding-inline-end property takes the same values as the padding-left property.
... it
relates to padding-block-start, padding-block-end, and padding-inline-start, which define the other paddings of the element.
padding-inline-start - CSS: Cascading Style Sheets
syntax /* <length> values */ padding-inline-start: 10px; /* an absolute length */ padding-inline-start: 1em; /* a length
relative to the text size */ /* <percentage> value */ padding-inline-start: 5%; /* a padding
relative to the block container's width */ /* global values */ padding-inline-start: inherit; padding-inline-start: initial; padding-inline-start: unset; values the padding-inline-start property takes the same values as the padding-left property.
... it
relates to padding-block-start, padding-block-end, and padding-inline-end, which define the other paddings of the element.
perspective-origin - CSS: Cascading Style Sheets
it can have one of the following values: <length-percentage> indicating the position as an absolute length value or
relative to the width of the element.
...it can have one of the following values: <length-percentage> indicating the position as an absolute length value or
relative to the height of the element.
scroll-margin-inline-end - CSS: Cascading Style Sheets
the outer container is styled like this: .scroller { text-align: left; width: 250px; height: 250px; overflow-x: scroll; display: flex; box-sizing: border-box; border: 1px solid #000; scroll-snap-type: x mandatory; } the main parts
relevant to the scroll snapping are overflow-x: scroll, which makes sure the contents will scroll and not be hidden, and scroll-snap-type: x mandatory, which dictates that scroll snapping must occur along the horizontal axis, and the scrolling will always come to rest on a snap point.
... the child elements are styled as follows: .scroller > div { flex: 0 0 250px; width: 250px; background-color: #663399; color: #fff; font-size: 30px; display: flex; align-items: center; justify-content: center; scroll-snap-align: end; } .scroller > div:nth-child(2n) { background-color: #fff; color: #663399; } the most
relevant part here is scroll-snap-align: end, which specifies that the right-hand edges (the "ends" along the x axis, in our case) are the designated snap points.
scroll-margin-inline-start - CSS: Cascading Style Sheets
the outer container is styled like this: .scroller { text-align: left; width: 250px; height: 250px; overflow-x: scroll; display: flex; box-sizing: border-box; border: 1px solid #000; scroll-snap-type: x mandatory; } the main parts
relevant to the scroll snapping are overflow-x: scroll, which makes sure the contents will scroll and not be hidden, and scroll-snap-type: x mandatory, which dictates that scroll snapping must occur along the horizontal axis, and the scrolling will always come to rest on a snap point.
... the child elements are styled as follows: .scroller > div { flex: 0 0 250px; width: 250px; background-color: #663399; color: #fff; font-size: 30px; display: flex; align-items: center; justify-content: center; scroll-snap-align: start; } .scroller > div:nth-child(2n) { background-color: #fff; color: #663399; } the most
relevant part here is scroll-snap-align: start, which specifies that the left-hand edges (the "starts" along the x axis, in our case) are the designated snap points.
scroll-snap-points-x - CSS: Cascading Style Sheets
repeat(<length-percentage>) defines an interval at which snap points are defined, starting from the container's
relevant start edge.
... formal definition initial valuenoneapplies toscroll containersinheritednopercentages
relative to same axis of the padding-box of the scroll containercomputed valueas specified, but with
relative lengths converted into absolute lengthsanimation typediscrete formal syntax none | repeat( <length-percentage> )where <length-percentage> = <length> | <percentage> examples setting horizontal scroll snap points html <div id="container"> <div>1</div> <div>2</div> <div>3</div> </div> css #container { width: 200px; overflow: auto; white-space: nowrap; scroll-snap-points-x: repeat(100%); scroll-snap-type: mandatory; font-size: 0; } #container > div { width: 200px; height: 200px; display:...
scroll-snap-points-y - CSS: Cascading Style Sheets
repeat(<length-percentage>) defines an interval at which snap points are defined, starting from the container's
relevant start edge.
... formal definition initial valuenoneapplies toscroll containersinheritednopercentages
relative to same axis of the padding-box of the scroll containercomputed valueas specified, but with
relative lengths converted into absolute lengthsanimation typediscrete formal syntax none | repeat( <length-percentage> )where <length-percentage> = <length> | <percentage> examples setting vertical scroll snap points html <div id="container"> <div>1</div> <div>2</div> <div>3</div> </div> css #container { height: 200px; width: 220px; overflow-x: hidden; overflow-y: auto; scroll-snap-points-y: repeat(200px); scroll-snap-type: mandatory; font-size: 0; } #container > div { width: 200px; height: ...
translateZ() - CSS: Cascading Style Sheets
html <div>static</div> <div class="moved">moved</div> css div { position:
relative; width: 60px; height: 60px; left: 100px; background-color: skyblue; } .moved { transform: perspective(500px) translatez(200px); background-color: pink; } what really matters here is the class "moved"; let's take a look at what it does.
... first, the perspective() function positions the viewer
relative to the plane that lies where z=0 (in essence, the surface of the screen).
transition-timing-function - CSS: Cascading Style Sheets
step-start equal to steps(1, jump-start) step-end equal to steps(1, jump-end) accessibility concerns some animations can be helpful such as to guide users to understand what actions are expected, to show
relationships within the user interface, and to inform users as to what actions have occurred.
... animations can help reduce cognitive load, prevent change blindness, and establish better recall in spatial
relationships.
translate - CSS: Cascading Style Sheets
formal definition initial valuenoneapplies totransformable elementsinheritednopercentagesrefer to the size of bounding boxcomputed valueas specified, but with
relative lengths converted into absolute lengthsanimation typea transformcreates stacking contextyes formal syntax none | <length-percentage> [ <length-percentage> <length>?
... initial valuenoneapplies totransformable elementsinheritednopercentagesrefer to the size of bounding boxcomputed valueas specified, but with
relative lengths converted into absolute lengthsanimation typea transformcreates stacking contextyes ...
vertical-align - CSS: Cascading Style Sheets
values for inline elements parent-
relative values these values vertically align the element
relative to its parent element: baseline aligns the baseline of the element with the baseline of its parent.
... line-
relative values the following values vertically align the element
relative to the entire line: top aligns the top of the element and its descendants with the top of the entire line.
Ajax - Developer guides
when these technologies are combined in the ajax model, web applications are able to make quick, incremental updates to the user interface without
reloading the entire browser page.
... see also ajax: a new approach to web applications jesse james garrett, of adaptive path, wrote this article in february 2005, introducing ajax and its
related concepts.
Live streaming web audio and video - Developer guides
live streaming technology is often employed to
relay live events such as sports, concerts and more generally tv and radio programmes that are output live.
... the key consideration when streaming media to a browser is the fact that rather than playing a finite file we are
relaying a file that is being created on the fly and has no pre-determined start or end.
Media buffering, seeking, and time ranges - Developer guides
the html for our player looks like this: <audio id="my-audio" p
reload controls> <source src="music.mp3" type="audio/mpeg"> </audio> <div class="buffered"> <span id="buffered-amount"></span> </div> <div class="progress"> <span id="progress-amount"></span> </div> we'll use the following css to style the buffering display: .buffered { height: 20px; position:
relative; background: #555; width: 300px; } #buffered-amount { display: block; height:...
... 100%; background-color: #777; width: 0; } .progress { margin-top: -20px; height: 20px; position:
relative; width: 300px; } #progress-amount { display: block; height: 100%; background-color: #595; width: 0; } and the following javascript provides our functionality: window.onload = function(){ var myaudio = document.getelementbyid('my-audio'); myaudio.addeventlistener('progress', function() { var duration = myaudio.duration; if (duration > 0) { for (var i = 0; i < myaudio.buffered.length; i++) { if (myaudio.buffered.start(myaudio.buffered.length - 1 - i) < myaudio.currenttime) { document.getelementbyid("buffered-amount").style.width = (myaudio.buffered.end(myaudio.buffered.length - 1 - i) / duration) * 100 + "%"; ...
Orientation and motion data explained - Developer guides
note: on a phone or tablet, the orientation of the device is always considered in
relation to the standard orientation of the screen; this is the "portrait" orientation on most devices.
... on a laptop computer, the orientation is considered in
relation to the keyboard.
Constraint validation - Developer guides
by setting values on validation-
related attributes, allowing basic constraints to be described in a simple way, without the need for javascript.
... validation-
related attributes in addition to the type attribute described above, the following attributes are used to describe basic constraints: attribute input types supporting the attribute possible values constraint description associated violation pattern text, search, url, tel, email, password a javascript regular expression (compiled with the ecmascript 5 global,...
HTML5 Parser - Developer guides
dozens of long-standing parser
related bugs are now fixed.
... performance improvement with speculative parsing un
related to the requirements of html5 specification, the gecko 2 parser uses speculative parsing, in which it continues parsing a document while scripts are being downloaded and executed.
User input and controls - Developer guides
relevant apis and events include touch events, pointer lock api, screen orientation api, fullscreen api, drag & drop and more.
... drag & drop drag & drop allows your application’s users to click and hold the mouse button down over an element, drag it to another location, and
release the mouse button to drop the element there.
Developer guides
ajax ajax is a term that defines a group of technologies allowing web applications to make quick, incremental updates to the user interface without
reloading the entire browser page.
... glossary defines numerous technical terms
related to the web and the internet.
disabled - HTML: Hypertext Markup Language
often browsers grey out such controls and it won't receive any browsing events, like mouse clicks or focus-
related ones.
... usability browsers display disabled form controls greyed as disabled form controls are immutable, won't receive focus or any browsing events, like mouse clicks or focus-
related ones, and aren't submitted with the form.
<abbr>: The Abbreviation element - HTML: Hypertext Markup Language
this is especially important in languages with more than two numbers, such as arabic, but is also
relevant in english.
... default styling the purpose of this element is pu
rely for the convenience of the author and all browsers display it inline (display: inline) by default, though its default styling varies from one browser to another: some browsers, like internet explorer, do not style it differently than a <span> element.
<dl>: The Description List element - HTML: Hypertext Markup Language
<dl> <div> <dt>name</dt> <dd>godzilla</dd> </div> <div> <dt>born</dt> <dd>1952</dd> </div> <div> <dt>birthplace</dt> <dd>japan</dd> </div> <div> <dt>color</dt> <dd>green</dd> </div> </dl> notes do not use this element (nor <ul> elements) to me
rely create indentation on a page.
...because of this, make sure each list item's content is written in such a way that it communicates its
relationship to the other list items in the list grouping.
<i>: The Idiomatic Text element - HTML: Hypertext Markup Language
clude the lang attribute to identify the language technical terms transliterations thoughts (such as "she wondered,what is this writer talking about, anyway?") ship or vessel names in western writing systems (such as "they searched the docks for the empress of the galaxy, the ship to which they were assigned.") in earlier versions of the html specification, the <i> element was me
rely a presentational element used to display text in italics, much like the <b> element was used to display text in bold letters.
... use <mark> to indicate
relevance.
<input type="date"> - HTML: Hypertext Markup Language
it's easy for someone to modify the html, or bypass your html enti
rely and submit the data directly to your server.
... span { position:
relative; } span::after { right: -18px; position: absolute; } input:invalid + span::after { content: '✖'; } input:valid + span::after { content: '✓'; } at the moment, the best way to deal with dates in forms in a cross-browser way is to have the user enter the day, month, and year in separate controls, or to use a javascript library such as jquery date picker.
<input type="file"> - HTML: Hypertext Markup Language
however, even though it has
relatively broad support, it is still not standard and should not be used unless you have no alternative.
... webkit
relativepath a string specifying the file's path
relative to the base directory selected in a directory picker (that is, a file picker in which the webkitdirectory attribute is set).
<input type="password"> - HTML: Hypertext Markup Language
<input> elements of type password provide a way for the user to secu
rely enter a password.
...since character widths vary, this may or may not be exact and should not be
relied upon to be so; the resulting input may be narrower or wider than the specified number of characters, depending on the characters and the font (font settings in use).
<meta>: The Document-level Metadata element - HTML: Hypertext Markup Language
the html <meta> element represents metadata that cannot be represented by other html meta-
related elements, like <base>, <link>, <script>, <style> or <title>.
... refresh this instruction specifies: the number of seconds until the page should be
reloaded - only if the content attribute contains a positive integer.
<nextid>: The NeXT ID element (Obsolete) - HTML: Hypertext Markup Language
html "1.k" - version 1 (first
release) in this first published draft of html, <nextid> is the same as it would take in html 2, finally allowing the use of a name instead of only a number for its attribute value.
... html "1.m" - version 1 (second
release) in the next published draft of html, <nextid> <nextid> can be individually deselected for display with a simple sgml command.
<strong>: The Strong Importance element - HTML: Hypertext Markup Language
this could be a sentence that is of great importance to the whole page, or you could me
rely try to point out that some words are of greater importance compared to nearby content.
...this is very dangerous.") both <strong> and <em> can be nested to increase the
relative degree of importance or stress emphasis, respectively.
<table>: The Table element - HTML: Hypertext Markup Language
in complex tables, scope can be specified so as to provide necessary information about the cells
related to a header.
... ideally, consider alternate ways to present the table's content, including breaking it apart into a collection of smaller,
related tables that don't have to
rely on using the colspan and rowspan attributes.
<tr>: The Table Row element - HTML: Hypertext Markup Language
this attribute is not only obsolete, but was ra
rely implemented anyway.
... table { border: 1px solid black; } th, td { border: 1px solid black; } result the output is enti
rely unchanged, despite the addition of useful contextual information under the hood: basic styling as is the case with all parts of a table, you can change the appearance of a table row and its contents using css.
hidden - HTML: Hypertext Markup Language
the hidden global attribute is a boolean attribute indicating that the element is not yet, or is no longer,
relevant.
...if the content is not applicable or
relevant, then there is no reason to link to it.
tabindex - HTML: Hypertext Markup Language
if multiple elements share the same positive tabindex value, their order
relative to each other follows their position in the document source.
...doing so makes it difficult for people who
rely on assistive technology to navigate and operate page content.
title - HTML: Hypertext Markup Language
the title global attribute contains text representing advisory information
related to the element it belongs to.
... if this attribute is set to the empty string, it means its ancestors' titles are ir
relevant and shouldn't be used in the tooltip for this element.
Link types: noopener - HTML: Hypertext Markup Language
the noopener keyword for the
rel attribute of the <a>, <area>, and <form> elements instructs the browser to navigate to the target resource without granting the new browsing context access to the document that opened it — by not setting the window.opener property on the opened window (it returns null).
... this is especially useful when opening untrusted links, in order to ensure they cannot tamper with the originating document via the window.opener property (see about
rel=noopener for more details), while still providing the referer http header (unless noreferrer is used as well).
Microdata - HTML: Hypertext Markup Language
search engines benefit greatly from direct access to this structured data because it allows search engines to understand the information on web pages and provide more
relevant results to users.
...
rely on the schema.org vocabulary to improve search results.
Microformats - HTML: Hypertext Markup Language
search engines benefit greatly from direct access to this structured data because it allows them to understand the information on web pages and provide more
relevant results to users.
...ings and individual event pages <div class="h-event"> <h1 class="p-name">microformats meetup</h1> <p>from <time class="dt-start" datetime="2013-06-30 12:00">30<sup>th</sup> june 2013, 12:00</time> to <time class="dt-end" datetime="2013-06-30 18:00">18:00</time> at <span class="p-location">some bar in sf</span></p> <p class="p-summary">get together and discuss all things microformats-
related.</p> </div> properties property description p-name event name (or title) p-summary short summary of the event dt-start datetime the event starts dt-end datetime the event ends p-location where the event takes place, optionally embedded h-card parsed h-event example <div class="h-event"> <h2 class="p-name">in...
Data URLs - HTTP
formatting in html a data url provides a file within a file, which can potentially be very wide
relative to the width of the enclosing document.
...to mitigate such issues, top-level navigation to data:// urls has been blocked in firefox 59+ (
release version, nightly/beta from 58), and we hope to see other browsers follow suit soon.
MIME types (IANA media types) - HTTP
example can also be used as a subtype; for instance, in an example
related to working with audio on the web, the mime type audio/example can be used to indicate that the type is a placeholder and should be replaced with an appropriate one when using the code in the real world.
...not all file types have magic numbers, so this is not 100%
reliable either.
CORS errors - HTTP
cross-origin resource sharing (cors) is a standard that allows a server to
relax the same-origin policy.
...for example, if a site offers an embeddable service, it may be necessary to
relax certain restrictions.
Compression in HTTP - HTTP
nowadays, only two are
relevant: gzip, the most common one, and br the new challenger.
... in practice, hop-by-hop compression is transparent for the server and the client, and is ra
rely used.
Connection management in HTTP/1.x - HTTP
http mostly
relies on tcp for its transport protocol, providing a connection between the client and the server.
... 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.
Content negotiation - HTTP
it is comma-separated lists of mime types, each combined with a quality factor, a parameter indicating the
relative degree of preference between the different mime types.
... the user-agent header though there are legitimate uses of this header for selecting content, it is considered bad practice to
rely on it to define what features are supported by the user agent.
Accept-Charset - HTTP
but for a better user experience, this is ra
rely done and the accept-charset header is ignored.
... ;q=<weight> any encoding is placed in an order of preference, expressed using a
relative quality value called the weight.
Accept-Encoding - HTTP
it doesn't mean that any algorithm is supported; me
rely that no preference is expressed.
... ;q= (qvalues weighting) any value is placed in an order of preference expressed using a
relative quality value called weight.
Cache-Control - HTTP
unlike expires, this directive is
relative to the time of the request.
... revalidation and
reloading must-revalidate indicates that once a resource becomes stale, caches must not use their stale copy without successful validation on the origin server.
Content-Language - HTTP
in most cases, a language tag consists of a primary language subtag that identifies a broad family of
related languages (e.g., "en" = english), which is optionally followed by a series of subtags that refine or narrow that language's range (e.g., "en-ca" = the variety of english as communicated in canada).
... note: language tags are formaly defined in rfc 5646, which
rely on the iso 639 standard (quite often the iso 639-1 code list) for language codes to be used.
Pragma - HTTP
note: pragma is not specified for http responses and is therefore not a
reliable replacement for the general http/1.1 cache-control header, although it does behave the same as cache-control: no-cache, if the cache-control header field is omitted in a request.
...forces caches to submit the request to the origin server for validation before
releasing a cached copy.
Referrer-Policy - HTTP
referrer-policy: no-referrer referrer-policy: no-referrer-when-downgrade referrer-policy: origin referrer-policy: origin-when-cross-origin referrer-policy: same-origin referrer-policy: strict-origin referrer-policy: strict-origin-when-cross-origin referrer-policy: unsafe-url directives no-referrer the referer header will be omitted enti
rely.
...for example, you can set the referrer policy for the entire document with a <meta> element with a name of referrer: <meta name="referrer" content="origin"> or set it for individual requests with the referrerpolicy attribute on <a>, <area>, <img>, <iframe>, <script>, or <link> 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.
Sec-Fetch-Site - HTTP
the sec-fetch-site fetch metadata header indicates the
relationship between a request initiator's origin and the origin of the resource.
... header type fetch metadata request header forbidden header name yes, since it has prefix sec- cors-safelisted response header cors-safelisted request header syntax sec-fetch-site: cross-site sec-fetch-site: same-origin sec-fetch-site: same-site sec-fetch-site: none values cross-site same-origin same-site none this request does not
relate to any context like site, origin, or frame.
User-Agent - HTTP
rv:geckoversion indicates the
release version of gecko (such as "17.0").
... examples mozilla/5.0 (x11; linux x86_64) applewebkit/537.36 (khtml, like gecko) chrome/51.0.2704.106 safari/537.36 opr/38.0.2220.41 older, presto-based opera
releases used: opera/9.80 (macintosh; intel mac os x; u; en) presto/2.2.15 version/10.00 opera/9.60 (windows nt 6.0; u; en) presto/2.1.1 safari ua string in this example, the user agent string is mobile safari’s version.
X-DNS-Prefetch-Control - HTTP
forcing lookup of specific hostnames you can force the lookup of specific hostnames without providing specific anchors using that hostname by using the
rel attribute on the <link> element with a link type of dns-prefetch: <link
rel="dns-prefetch" href="https://www.mozilla.org/contribute/"> in this example, the domain name "www.mozilla.org/contribute" will be pre-resolved.
... similarly, the link element can be used to resolve hostnames without providing a complete url, but only, by preceding the hostname with two slashes: <link
rel="dns-prefetch" href="//www.mozilla.org/contribute/"> forced prefetching of hostnames might be useful, for example, on the homepage of a site to force pre-resolution of domain names that are referenced frequently throughout the site even though they are not used on the home page itself.
406 Not Acceptable - HTTP
proactive content negotiation headers include: accept accept-charset accept-encoding accept-language in practice, this error is very ra
rely used.
... instead of responding using this error code, which would be cryptic for the end user and difficult to fix, servers ignore the
relevant header and serve an actual page to the user.
CSS Houdini
the houdini apis below you can find links to the main reference pages covering the apis that fall under the houdini umb
rella, along with links to guides to help you if you need guidance in learning how to use them.
... worklets reference other topics
related topics which may be of interest, since they can be used in tandem with houdini apis in interesting ways.
JavaScript data types and data structures - JavaScript
this is me
rely a special shorthand for functions, though every function constructor is derived from object constructor.
... indexed collections: arrays and typed arrays arrays are regular objects for which there is a particular
relationship between integer-key-ed properties and the length property.
Indexed collections - JavaScript
writing 0 empties it enti
rely: let cats = ['dusty', 'misty', 'twiggy'] console.log(cats.length) // 3 cats.length = 2 console.log(cats) // logs "dusty, misty" - twiggy has been removed cats.length = 0 console.log(cats) // logs []; the cats array is empty cats.length = 3 console.log(cats) // logs [ <3 empty items> ] iterating over arrays a common operation is to iterate over the values of an array, processing each o...
...i < 4; i++) { a[i] = new array(4) for (let j = 0; j < 4; j++) { a[i][j] = '[' + i + ', ' + j + ']' } } this example creates an array with the following rows: row 0: [0, 0] [0, 1] [0, 2] [0, 3] row 1: [1, 0] [1, 1] [1, 2] [1, 3] row 2: [2, 0] [2, 1] [2, 2] [2, 3] row 3: [3, 0] [3, 1] [3, 2] [3, 3] using arrays to store other properties arrays can also be used like objects, to store
related information.
Loops and iteration - JavaScript
(if the condition expression is omitted enti
rely, the condition is assumed to be true.) the statement executes.
...in contrast to the break statement, continue does not terminate the execution of the loop enti
rely.
Deprecated and obsolete features - JavaScript
deprecated features these deprecated features can still be used, but should be used with caution because they are expected to be removed enti
rely sometime in the future.
...…" obsolete features these obsolete features have been enti
rely removed from javascript and can no longer be used as of the indicated version of javascript.
Date.prototype.toLocaleDateString() - JavaScript
in older implementations, which ignore the locales and options arguments, the locale used and the form of the string returned are enti
rely implementation dependent.
...in implementations, which ignore the locales and options arguments, the locale used and the form of the string returned are enti
rely implementation dependent.
Date.prototype.toLocaleString() - JavaScript
in older implementations, which ignore the locales and options arguments, the locale used and the form of the string returned are enti
rely implementation-dependent.
...in implementations, which ignore the locales and options arguments, the locale used and the form of the string returned are enti
rely implementation dependent.
Date.prototype.toLocaleTimeString() - JavaScript
in older implementations, which ignore the locales and options arguments, the locale used and the form of the string returned are enti
rely implementation dependent.
...in implementations, which ignore the locales and options arguments, the locale used and the form of the string returned are enti
rely implementation dependent.
Date - JavaScript
instead, it is defined in ecma-262 that a maximum of ±100,000,000 (one hundred million) days
relative to january 1, 1970 utc (that is, april 20, 271821 bce ~ september 13, 275760 ce) can be represented by the standard date object (equivalent to ±8,640,000,000,000,000 milliseconds).
...function printelapsedtime(ftest) { let nstarttime = date.now(), vreturn = ftest(), nendtime = date.now() console.log(`elapsed time: ${ string(nendtime - nstarttime) } milliseconds`) return vreturn } let yourfunctionreturn = printelapsedtime(yourfunction) note: in browsers that support the web performance api's high-resolution time feature, performance.now() can provide more
reliable and precise measurements of elapsed time than date.now().
Function.prototype.apply() - JavaScript
su
rely not?
... function.prototype.construct = function(aargs) { let onew = object.create(this.prototype); this.apply(onew, aargs); return onew; }; note: the object.create() method used above is
relatively new.
Function.name - JavaScript
if you
rely on function.name, like in the example above, make sure your build pipeline doesn't change function names, or don't assume a function to have a particular name.
... therefore you may not
rely on the built-in function.name property to always hold a class's name.
Object.isFrozen() - JavaScript
var nonconfigurable = {
release: 'the kraken!' }; object.preventextensions(nonconfigurable); object.defineproperty(nonconfigurable, '
release', { configurable: false }); object.isfrozen(nonconfigurable); // === false // changing that property to non-writable // then makes the object frozen.
... object.defineproperty(nonconfigurable, '
release', { writable: false }); object.isfrozen(nonconfigurable); // === true // a non-extensible object with a configurable // accessor property isn't frozen.
Set - JavaScript
) } return _difference } // examples let seta = new set([1, 2, 3, 4]) let setb = new set([2, 3]) let setc = new set([3, 4, 5, 6]) issuperset(seta, setb) // => true union(seta, setc) // => set [1, 2, 3, 4, 5, 6] intersection(seta, setc) // => set [3, 4] symmetricdifference(seta, setc) // => set [1, 2, 5, 6] difference(seta, setc) // => set [1, 2]
relation with array objects let myarray = ['value1', 'value2', 'value3'] // use the regular set constructor to transform an array into a set let myset = new set(myarray) myset.has('value1') // returns true // use the spread operator to transform a set into an array.
... console.log([...myset]) // will show you exactly the same array as myarray remove duplicate elements from the array // use to remove duplicate elements from the array const numbers = [2,3,4,4,2,3,3,4,4,5,5,6,6,7,5,32,3,4,5] console.log([...new set(numbers)]) // [2, 3, 4, 5, 6, 7, 32]
relation with strings let text = 'india' let myset = new set(text) // set ['i', 'n', 'd', 'i', 'a'] myset.size // 5 //case sensitive & duplicate ommision new set("firefox") // set(7) [ "f", "i", "r", "e", "f", "o", "x" ] new set("firefox") // set(6) [ "f", "i", "r", "e", "o", "x" ] specifications specification ecmascript (ecma-262)the definition of 'set' in that specification.
String.prototype.fontsize() - JavaScript
when you specify size as a string such as "-2", you adjust the font size of str
relative to the size set in the <basefont> tag.
...ar worldstring = 'hello, world'; console.log(worldstring.small()); // <small>hello, world</small> console.log(worldstring.big()); // <big>hello, world</big> console.log(worldstring.fontsize(7)); // <font size="7">hello, world</fontsize> with the element.style object you can get the element's style attribute and manipulate it more generically, for example: document.getelementbyid('you
relemid').style.fontsize = '0.7em'; specifications specification ecmascript (ecma-262)the definition of 'string.prototype.fontsize' in that specification.
WeakRef - JavaScript
it's also important to avoid
relying on any specific behaviors not guaranteed by the specification.
...this is primarily to avoid making the behavior of any given javascript engine's garbage collector apparent in code — because if it were, people would write code
relying on that behavior, which would break when the garbage collector's behavior changed.
WebAssembly.CompileError() constructor - JavaScript
era for androidsafari on iossamsung internetnode.jscompileerror() constructorchrome full support 57edge full support 16firefox full support 52notes full support 52notes notes disabled in the firefox 52 extended support
release (esr).ie no support noopera full support 44safari full support 11webview android full support 57chrome android full support 57firefox android full support...
... 52notes full support 52notes notes disabled in the firefox 52 extended support
release (esr).opera android full support 43safari ios full support 11samsung internet android full support 7.0nodejs full support 8.0.0legend full support full support no support no supportsee implementation notes.see implementation notes.
WebAssembly.Instance() constructor - JavaScript
idopera for androidsafari on iossamsung internetnode.jsinstance() constructorchrome full support 57edge full support 16firefox full support 52notes full support 52notes notes disabled in the firefox 52 extended support
release (esr).ie no support noopera full support 44safari full support 11webview android full support 57chrome android full support 57firefox android full support...
... 52notes full support 52notes notes disabled in the firefox 52 extended support
release (esr).opera android full support 43safari ios full support 11samsung internet android full support 7.0nodejs full support 8.0.0legend full support full support no support no supportsee implementation notes.see implementation notes.
WebAssembly.Instance.prototype.exports - JavaScript
refox for androidopera for androidsafari on iossamsung internetnode.jsexportschrome full support 57edge full support 16firefox full support 52notes full support 52notes notes disabled in the firefox 52 extended support
release (esr).ie no support noopera full support 44safari full support 11webview android full support 57chrome android full support 57firefox android full support...
... 52notes full support 52notes notes disabled in the firefox 52 extended support
release (esr).opera android full support 43safari ios full support 11samsung internet android full support 7.0nodejs full support 8.0.0legend full support full support no support no supportsee implementation notes.see implementation notes.
WebAssembly.LinkError() constructor - JavaScript
dopera for androidsafari on iossamsung internetnode.jslinkerror() constructorchrome full support 57edge full support 16firefox full support 52notes full support 52notes notes disabled in the firefox 52 extended support
release (esr).ie no support noopera full support 44safari full support 11webview android full support 57chrome android full support 57firefox android full support...
... 52notes full support 52notes notes disabled in the firefox 52 extended support
release (esr).opera android full support 43safari ios full support 11samsung internet android full support 7.0nodejs full support 8.0.0legend full support full support no support no supportsee implementation notes.see implementation notes.
WebAssembly.Memory() constructor - JavaScript
roidopera for androidsafari on iossamsung internetnode.jsmemory() constructorchrome full support 57edge full support 16firefox full support 52notes full support 52notes notes disabled in the firefox 52 extended support
release (esr).ie no support noopera full support 44safari full support 11webview android full support 57chrome android full support 57firefox android full support...
... 52notes full support 52notes notes disabled in the firefox 52 extended support
release (esr).opera android full support 43safari ios full support 11samsung internet android full support 7.0nodejs full support 8.0.0shared flagchrome full support 74edge full support 79firefox full support 78ie no support noopera full support ...
WebAssembly.Memory.prototype.buffer - JavaScript
irefox for androidopera for androidsafari on iossamsung internetnode.jsbufferchrome full support 57edge full support 16firefox full support 52notes full support 52notes notes disabled in the firefox 52 extended support
release (esr).ie no support noopera full support 44safari full support 11webview android full support 57chrome android full support 57firefox android full support...
... 52notes full support 52notes notes disabled in the firefox 52 extended support
release (esr).opera android full support 43safari ios full support 11samsung internet android full support 7.0nodejs full support 8.0.0legend full support full support no support no supportsee implementation notes.see implementation notes.
WebAssembly.Memory.prototype.grow() - JavaScript
dfirefox for androidopera for androidsafari on iossamsung internetnode.jsgrowchrome full support 57edge full support 16firefox full support 52notes full support 52notes notes disabled in the firefox 52 extended support
release (esr).ie no support noopera full support 44safari full support 11webview android full support 57chrome android full support 57firefox android full support...
... 52notes full support 52notes notes disabled in the firefox 52 extended support
release (esr).opera android full support 43safari ios full support 11samsung internet android full support 7.0nodejs full support 8.0.0legend full support full support no support no supportsee implementation notes.see implementation notes.
WebAssembly.Module() constructor - JavaScript
roidopera for androidsafari on iossamsung internetnode.jsmodule() constructorchrome full support 57edge full support 16firefox full support 52notes full support 52notes notes disabled in the firefox 52 extended support
release (esr).ie no support noopera full support 44safari full support 11webview android full support 57chrome android full support 57firefox android full support...
... 52notes full support 52notes notes disabled in the firefox 52 extended support
release (esr).opera android full support 43safari ios full support 11samsung internet android full support 7.0nodejs full support 8.0.0legend full support full support no support no supportsee implementation notes.see implementation notes.
WebAssembly.Module.customSections() - JavaScript
or androidopera for androidsafari on iossamsung internetnode.jscustomsectionschrome full support 57edge full support 16firefox full support 52notes full support 52notes notes disabled in the firefox 52 extended support
release (esr).ie no support noopera full support 44safari full support 11webview android full support 57chrome android full support 57firefox android full support...
... 52notes full support 52notes notes disabled in the firefox 52 extended support
release (esr).opera android full support 43safari ios full support 11samsung internet android full support 7.0nodejs full support 8.0.0legend full support full support no support no supportsee implementation notes.see implementation notes.
WebAssembly.Module.exports() - JavaScript
refox for androidopera for androidsafari on iossamsung internetnode.jsexportschrome full support 57edge full support 16firefox full support 52notes full support 52notes notes disabled in the firefox 52 extended support
release (esr).ie no support noopera full support 44safari full support 11webview android full support 57chrome android full support 57firefox android full support...
... 52notes full support 52notes notes disabled in the firefox 52 extended support
release (esr).opera android full support 43safari ios full support 11samsung internet android full support 7.0nodejs full support 8.0.0legend full support full support no support no supportsee implementation notes.see implementation notes.
WebAssembly.Module.imports() - JavaScript
refox for androidopera for androidsafari on iossamsung internetnode.jsimportschrome full support 57edge full support 16firefox full support 52notes full support 52notes notes disabled in the firefox 52 extended support
release (esr).ie no support noopera full support 44safari full support 11webview android full support 57chrome android full support 57firefox android full support...
... 52notes full support 52notes notes disabled in the firefox 52 extended support
release (esr).opera android full support 43safari ios full support 11samsung internet android full support 7.0nodejs full support 8.0.0legend full support full support no support no supportsee implementation notes.see implementation notes.
WebAssembly.RuntimeError() constructor - JavaScript
era for androidsafari on iossamsung internetnode.jsruntimeerror() constructorchrome full support 57edge full support 16firefox full support 52notes full support 52notes notes disabled in the firefox 52 extended support
release (esr).ie no support noopera full support 44safari full support 11webview android full support 57chrome android full support 57firefox android full support...
... 52notes full support 52notes notes disabled in the firefox 52 extended support
release (esr).opera android full support 43safari ios full support 11samsung internet android full support 7.0nodejs full support 8.0.0legend full support full support no support no supportsee implementation notes.see implementation notes.
WebAssembly.Table() constructor - JavaScript
droidopera for androidsafari on iossamsung internetnode.jstable() constructorchrome full support 57edge full support 16firefox full support 52notes full support 52notes notes disabled in the firefox 52 extended support
release (esr).ie no support noopera full support 44safari full support 11webview android full support 57chrome android full support 57firefox android full support...
... 52notes full support 52notes notes disabled in the firefox 52 extended support
release (esr).opera android full support 43safari ios full support 11samsung internet android full support 7.0nodejs full support 8.0.0legend full support full support no support no supportsee implementation notes.see implementation notes.
WebAssembly.Table.prototype.get() - JavaScript
idfirefox for androidopera for androidsafari on iossamsung internetnode.jsgetchrome full support 57edge full support 16firefox full support 52notes full support 52notes notes disabled in the firefox 52 extended support
release (esr).ie no support noopera full support 44safari full support 11webview android full support 57chrome android full support 57firefox android full support...
... 52notes full support 52notes notes disabled in the firefox 52 extended support
release (esr).opera android full support 43safari ios full support 11samsung internet android full support 7.0nodejs full support 8.0.0legend full support full support no support no supportsee implementation notes.see implementation notes.
WebAssembly.Table.prototype.grow() - JavaScript
dfirefox for androidopera for androidsafari on iossamsung internetnode.jsgrowchrome full support 57edge full support 16firefox full support 52notes full support 52notes notes disabled in the firefox 52 extended support
release (esr).ie no support noopera full support 44safari full support 11webview android full support 57chrome android full support 57firefox android full support...
... 52notes full support 52notes notes disabled in the firefox 52 extended support
release (esr).opera android full support 43safari ios full support 11samsung internet android full support 7.0nodejs full support 8.0.0legend full support full support no support no supportsee implementation notes.see implementation notes.
WebAssembly.Table.prototype.length - JavaScript
irefox for androidopera for androidsafari on iossamsung internetnode.jslengthchrome full support 57edge full support 16firefox full support 52notes full support 52notes notes disabled in the firefox 52 extended support
release (esr).ie no support noopera full support 44safari full support 11webview android full support 57chrome android full support 57firefox android full support...
... 52notes full support 52notes notes disabled in the firefox 52 extended support
release (esr).opera android full support 43safari ios full support 11samsung internet android full support 7.0nodejs full support 8.0.0legend full support full support no support no supportsee implementation notes.see implementation notes.
WebAssembly.Table.prototype.set() - JavaScript
idfirefox for androidopera for androidsafari on iossamsung internetnode.jssetchrome full support 57edge full support 16firefox full support 52notes full support 52notes notes disabled in the firefox 52 extended support
release (esr).ie no support noopera full support 44safari full support 11webview android full support 57chrome android full support 57firefox android full support...
... 52notes full support 52notes notes disabled in the firefox 52 extended support
release (esr).opera android full support 43safari ios full support 11samsung internet android full support 7.0nodejs full support 8.0.0legend full support full support no support no supportsee implementation notes.see implementation notes.
WebAssembly.compile() - JavaScript
refox for androidopera for androidsafari on iossamsung internetnode.jscompilechrome full support 57edge full support 16firefox full support 52notes full support 52notes notes disabled in the firefox 52 extended support
release (esr).ie no support noopera full support 44safari full support 11webview android full support 57chrome android full support 57firefox android full support...
... 52notes full support 52notes notes disabled in the firefox 52 extended support
release (esr).opera android full support 43safari ios full support 11samsung internet android full support 7.0nodejs full support 8.0.0legend full support full support no support no supportsee implementation notes.see implementation notes.
WebAssembly.instantiate() - JavaScript
x for androidopera for androidsafari on iossamsung internetnode.jsinstantiatechrome full support 57edge full support 16firefox full support 52notes full support 52notes notes disabled in the firefox 52 extended support
release (esr).ie no support noopera full support 44safari full support 11webview android full support 57chrome android full support 57firefox android full support...
... 52notes full support 52notes notes disabled in the firefox 52 extended support
release (esr).opera android full support 43safari ios full support 11samsung internet android full support 7.0nodejs full support 8.0.0legend full support full support no support no supportsee implementation notes.see implementation notes.
WebAssembly.validate() - JavaScript
efox for androidopera for androidsafari on iossamsung internetnode.jsvalidatechrome full support 57edge full support 16firefox full support 52notes full support 52notes notes disabled in the firefox 52 extended support
release (esr).ie no support noopera full support 44safari full support 11webview android full support 57chrome android full support 57firefox android full support...
... 52notes full support 52notes notes disabled in the firefox 52 extended support
release (esr).opera android full support 43safari ios full support 11samsung internet android full support 7.0nodejs full support 8.0.0legend full support full support no support no supportsee implementation notes.see implementation notes.
globalThis - JavaScript
this distinction is ra
rely
relevant in common usage, but important to be aware of.
... examples search for the global across environments prior to globalthis, the only
reliable cross-platform way to get the global object for an environment was function('return this')().
parseInt() - JavaScript
always specify a radix to avoid this un
reliable behavior.
... this differs from ecmascript 3, which me
rely discouraged (but allowed) octal interpretation.
Greater than (>) - JavaScript
syntax x > y description the operands are compared using the abstract
relational comparison algorithm.
...g(true > 0); // true console.log(true > 1); // false console.log(null > 0); // false console.log(1 > null); // true console.log(undefined > 3); // false console.log(3 > undefined); // false console.log(3 > nan); // false console.log(nan > 3); // false specifications specification ecmascript (ecma-262)the definition of '
relational operators' in that specification.
Greater than or equal (>=) - JavaScript
syntax x >= y description the operands are compared using the abstract
relational comparison algorithm.
... false console.log(true >= 0); // true console.log(true >= 1); // true console.log(null >= 0); // true console.log(1 >= null); // true console.log(undefined >= 3); // false console.log(3 >= undefined); // false console.log(3 >= nan); // false console.log(nan >= 3); // false specifications specification ecmascript (ecma-262)the definition of '
relational operators' in that specification.
Less than (<) - JavaScript
syntax x < y description the operands are compared using the abstract
relational comparison algorithm, which is roughly summarised below: first, objects are converted to primitives using symbol.toprimitive.
...g(0 < true); // true console.log(true < 1); // false console.log(null < 0); // false console.log(null < 1); // true console.log(undefined < 3); // false console.log(3 < undefined); // false console.log(3 < nan); // false console.log(nan < 3); // false specifications specification ecmascript (ecma-262)the definition of '
relational operators' in that specification.
Less than or equal (<=) - JavaScript
syntax x <= y description the operands are compared using the abstract
relational comparison algorithm.
... console.log(true <= 0); // false console.log(true <= 1); // true console.log(null <= 0); // true console.log(1 <= null); // false console.log(undefined <= 3); // false console.log(3 <= undefined); // false console.log(3 <= nan); // false console.log(nan <= 3); // false specifications specification ecmascript (ecma-262)the definition of '
relational operators' in that specification.
instanceof - JavaScript
for instance, you can secu
rely check if a given object is, in fact, an array using array.isarray(myobj) for example, checking if a nodes is a svgelement in a different context, you can use mynode instanceof mynode.ownerdocument.defaultview.svgelement.
... specifications specification ecmascript (ecma-262)the definition of '
relational operators' in that specification.
this - JavaScript
primitives like 7 or 'foo' will be converted to an object using the
related constructor, so the primitive number 7 is converted to an object as if by new number(7) and the string 'foo' to an object as if by new string('foo'), e.g.
... // when called as a listener, turns the
related element blue function bluify(e) { // always true console.log(this === e.currenttarget); // true when currenttarget and target are the same object console.log(this === e.target); this.style.backgroundcolor = '#a5d9f3'; } // get a list of every element in the document var elements = document.getelementsbytagname('*'); // add bluify as a click listener so when the // element is click...
JavaScript reference - JavaScript
weakmap weakset structured data arraybuffer sharedarraybuffer atomics dataview json control abstraction promise generator generatorfunction asyncfunction reflection reflect proxy internationalization intl intl.collator intl.datetimeformat intl.displaynames intl.listformat intl.locale intl.numberformat intl.pluralrules intl.
relativetimeformat webassembly webassembly webassembly.module webassembly.instance webassembly.memory webassembly.table webassembly.compileerror webassembly.linkerror webassembly.runtimeerror statements javascript statements and declarations control flowblock break continue empty if...else switch throw try...catch declarations var let const...
... arithmetic operators + - / * % **
relational operators in instanceof < > <= >= equality operators == != === !== bitwise shift operators << >> >>> binary bitwise operators& | ^ binary logical operators && || conditional (ternary) operator (condition ?
JavaScript
since then, ecmascript standards are on yearly
release cycles.
... javascript versions and
release notes browse javascript's feature history and implementation status.
scope - Web app manifests
if the scope is a
relative url, the base url will be the url of the manifest.
... examples if the scope is
relative, the manifest url is used as a base url: "scope": "/app/" the following scope limits navigation to the current site: "scope": "https://example.com/" finally, the following example limits navigation to a subdirectory of the current site: "scope": "https://example.com/subdirectory/" specification specification status comment feedback web app manifestthe definition of 'scope' in that specification.
start_url - Web app manifests
note: the start_url member is pu
rely advisory, and a user agent may ignore it or allow the user to alter it at install time or afterwards.
... examples absolute url "start_url": "https://example.com"
relative url if the url is
relative, the manifest url is used as the base url to resolve it.
Web app manifests
click each one for more information about it: background_colorcategoriesdescriptiondirdisplayiarc_rating_idiconslangnameorientationprefer_
related_applications
related_applicationsscopescreenshotsserviceworkershort_nameshortcutsstart_urltheme_color example manifest { "name": "hackerweb", "short_name": "hackerweb", "start_url": ".", "display": "standalone", "background_color": "#fff", "description": "a simply readable hacker news app.", "icons": [{ "src": "images/touch/homescreen48.png", "sizes": "48x48", "type...
... "src": "images/touch/homescreen96.png", "sizes": "96x96", "type": "image/png" }, { "src": "images/touch/homescreen144.png", "sizes": "144x144", "type": "image/png" }, { "src": "images/touch/homescreen168.png", "sizes": "168x168", "type": "image/png" }, { "src": "images/touch/homescreen192.png", "sizes": "192x192", "type": "image/png" }], "
related_applications": [{ "platform": "play", "url": "https://play.google.com/store/apps/details?id=cheeaun.hackerweb" }] } deploying a manifest web app manifests are deployed in your html pages using a <link> element in the <head> of a document: <link
rel="manifest" href="/manifest.webmanifest"> note: the .webmanifest extension is specified in the media type registration section of th...
Animation performance and frame rate - Web Performance
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.
...but next, we'll see how using transform instead of margin eliminates those expensive paints enti
rely.
Critical rendering path - Web Performance
nodes contain all
relevant information about the html element.
...the layout step determines where and how the elements are positioned on the page, determining the width and height of each element, and where they are in
relation to each other.
Progressive web app structure - Progressive web apps (PWAs)
different concept: streams an enti
rely different approach to server- or client-side rendering can be achieved with the streams api.
...itle> <meta name="description" content="a list of a-frame entries submitted to the js13kgames 2017 competition, used as an example for the mdn articles about progressive web apps."> <meta name="author" content="end3r"> <meta name="theme-color" content="#b12a34"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta property="og:image" content="icons/icon-512.png"> <link
rel="shortcut icon" href="favicon.ico"> <link
rel="stylesheet" href="style.css"> <link
rel="manifest" href="js13kpwa.webmanifest"> <script src="data/games.js" defer></script> <script src="app.js" defer></script> </head> <body> <header> <p><a class="logo" href="http://js13kgames.com"><img src="img/js13kgames.png" alt="js13kgames"></a></p> </header> <main> <h1>js13kgames a-frame entries</h1> <p ...
kernelUnitLength - SVG: Scalable Vector Graphics
if the attribute is not specified, the x and y values represent very small deltas
relative to a given position, which might be implemented in some cases as one pixel in the intermediate image offscreen bitmap, which is a pixel-based coordinate system, and thus potentially not scalable.
...if the attribute is not specified, the x and y values represent very small deltas
relative to a given position, which might be implemented in some cases as one pixel in the intermediate image offscreen bitmap, which is a pixel-based coordinate system, and thus potentially not scalable.
markerHeight - SVG: Scalable Vector Graphics
only one element is using this attribute: <marker> usage notes value <length-percentage> | <number> default value 3 animatable yes <length-percentage> this value defines either an absolute or a
relative height of the marker.
...
relative values refer to the height specified via the viewbox and preserveaspectratio attributes.
markerWidth - SVG: Scalable Vector Graphics
only one element is using this attribute: <marker> usage notes value <length-percentage> | <number> default value 3 animatable yes <length-percentage> this value defines either an absolute or a
relative width of the marker.
...
relative values refer to the width specified via the viewbox and preserveaspectratio attributes.
tabindex - SVG: Scalable Vector Graphics
the tabindex attribute allows you to control whether an element is focusable and to define the
relative order of the element for the purposes of sequential focus navigation.
...wbox="0 0 260 260" xmlns="http://www.w3.org/2000/svg"> <circle cx="60" cy="60" r="15" tabindex="1" /> <circle cx="60" cy="160" r="30" tabindex="3" /> <circle cx="160" cy="60" r="30" tabindex="2" /> <circle cx="160" cy="160" r="60" tabindex="4" /> </svg> usage notes value valid integer default value none animatable no valid integer
relative order of the element for the purposes of sequential focus navigation.
targetX - SVG: Scalable Vector Graphics
the targetx attribute determines the positioning in horizontal direction of the convolution matrix
relative to a given target pixel in the input image.
... only one element is using this attribute: <feconvolvematrix> usage notes value <integer> default value floor(orderx / 2) animatable yes <integer> this value indicates the positioning in horizontal direction of the convolution matrix
relative to a given target pixel in the input image.
targetY - SVG: Scalable Vector Graphics
the targety attribute determines the positioning in vertical direction of the convolution matrix
relative to a given target pixel in the input image.
... only one element is using this attribute: <feconvolvematrix> usage notes value <integer> default value floor(ordery / 2) animatable yes <integer> this value indicates the positioning in vertical direction of the convolution matrix
relative to a given target pixel in the input image.
viewBox - SVG: Scalable Vector Graphics
html,body,svg { height:100% } svg:not(:root) { display: inline-block; } <svg viewbox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"> <!-- with
relative unit such as percentage, the visual size of the square looks unchanged regardless of the viewbox --> <rect x="0" y="0" width="100%" height="100%"/> <!-- with a large viewbox the circle looks small as it is using user units for the r attribute: 4 resolved against 100 as set in the viewbox --> <circle cx="50%" cy="50%" r="4" fill="white"/> </svg> <svg viewbox="0 0 10 10" xm...
...lns="http://www.w3.org/2000/svg"> <!-- with
relative unit such as percentage, the visual size of the square looks unchanged regardless of the viewbox` --> <rect x="0" y="0" width="100%" height="100%"/> <!-- with a small viewbox the circle looks large as it is using user units for the r attribute: 4 resolved against 10 as set in the viewbox --> <circle cx="50%" cy="50%" r="4" fill="white"/> </svg> <svg viewbox="-5 -5 10 10" xmlns="http://www.w3.org/2000/svg"> <!-- the point of coordinate 0,0 is now in the center of the viewport, and 100% is still resolve to a width or height of 10 user units so the rectangle looks shifted to the bottom/right corner of the viewport --> <rect x="0" y="0" width="100%" height="100%"/> <!-- with the point of coordinate 0,0 i...
<a> - SVG: Scalable Vector Graphics
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.
..., aria-current, aria-describedby, aria-details, aria-disabled, aria-dropeffect, aria-errormessage, aria-expanded, aria-flowto, aria-grabbed, aria-haspopup, aria-hidden, aria-invalid, aria-keyshortcuts, aria-label, aria-labelledby, aria-level, aria-live, aria-modal, aria-multiline, aria-multiselectable, aria-orientation, aria-owns, aria-placeholder, aria-posinset, aria-pressed, aria-readonly, aria-
relevant, aria-required, aria-roledescription, aria-rowcount, aria-rowindex, aria-rowspan, aria-selected, aria-setsize, aria-sort, aria-valuemax, aria-valuemin, aria-valuenow, aria-valuetext, role usage notes categoriescontainer elementpermitted contentany number of the following elements, in any order:animation elementsdescriptive elementsshape elementsstructural elementsgradient elements<a>, <al...
<altGlyph> - SVG: Scalable Vector Graphics
value type: <list-of-coordinates> ; default value:
relative x-coordinate of ancestor <text> or <tspan>; animatable: yes dy this attribute indicates a shift along the x-axis on the position of the element.
... value type: <list-of-coordinates> ; default value:
relative y-coordinate of ancestor <text> or <tspan>; animatable: yes rotate this attribute defines the supplemental rotation that will be applied to the element.
<marker> - SVG: Scalable Vector Graphics
value type: <length> ; default value: 3; animatable: yes orient this attribute defines the orientation of the marker
relative to the shape it is attached to.
..., aria-current, aria-describedby, aria-details, aria-disabled, aria-dropeffect, aria-errormessage, aria-expanded, aria-flowto, aria-grabbed, aria-haspopup, aria-hidden, aria-invalid, aria-keyshortcuts, aria-label, aria-labelledby, aria-level, aria-live, aria-modal, aria-multiline, aria-multiselectable, aria-orientation, aria-owns, aria-placeholder, aria-posinset, aria-pressed, aria-readonly, aria-
relevant, aria-required, aria-roledescription, aria-rowcount, aria-rowindex, aria-rowspan, aria-selected, aria-setsize, aria-sort, aria-valuemax, aria-valuemin, aria-valuenow, aria-valuetext, role usage notes categoriescontainer elementpermitted contentany number of the following elements, in any order:animation elementsdescriptive elementsshape elementsstructural elementsgradient elements<a>, <al...
Using shadow DOM - Web Components
rl = this.getattribute('img'); } else { imgurl = 'img/default.png'; } let img = document.createelement('img'); img.src = imgurl; icon.appendchild(img); styling the shadow dom after that we create a <style> element and populate it with some css to style it: // create some css to apply to the shadow dom let style = document.createelement('style'); style.textcontent = ` .wrapper { position:
relative; } .info { font-size: 0.8rem; width: 200px; display: inline-block; border: 1px solid black; padding: 10px; background: white; border-radius: 10px; opacity: 0; transition: 0.6s all; position: absolute; bottom: 20px; left: 10px; z-index: 3; } img { width: 1.2rem; } .icon:hover + .info, .icon:focus + .info { opacity: 1; }`; attaching the shadow dom to the sha...
... for example, take a look at this code from our popup-info-box-external-stylesheet example (see the source code): // apply external styles to the shadow dom const linkelem = document.createelement('link'); linkelem.setattribute('
rel', 'stylesheet'); linkelem.setattribute('href', 'style.css'); // attach the created element to the shadow dom shadow.appendchild(linkelem); note that <link> elements do not block paint of the shadow root, so there may be a flash of unstyled content (fouc) while the stylesheet loads.
document - XPath
syntax document(uri [,node-set] ) arguments uri an absolute or
relative uri of the document to be retrieved.
... since the uri is
relative to the xsl document, document("") would return the root node of the current document.
Index - XSLT: Extensible Stylesheet Language Transformations
the structure of an xml document is designed to reflect and clarify important
relationships among the individual aspects of the content itself, unhindered by a need to provide any indication about how this data should eventually be presented.
... 38 <xsl:namespace-alias> element, reference, xslt, namespace-alias the <xsl:namespace-alias> element is a ra
rely used device that maps a namespace in the stylesheet to a different namespace in the output tree.
Understanding WebAssembly text format - WebAssembly
this article explains how that text format works, in terms of the raw syntax, and how it is
related to the underlying bytecode it represents — and the wrapper objects representing wasm in javascript.
... in the current iteration, there can be at most 1 return type, but later this will be
relaxed to any number.
IsDefaultNamespace - Archive of obsolete content
return false; // unknown; } case 9: // document_node return isdefaultnamespace(node.documentelement, namespaceuri); case 6: // entity_node case 12: // notation_node case 10: // document_type_node case 11: // document_fragment_node return false; // unknown case 2: // attribute_node: if (node.owne
relement ) { return isdefaultnamespace(node.owne
relement , namespaceuri); } else { return false; // unknown } default: if (node.parentnode) { // entityreferences may have to be skipped to get to it return isdefaultnamespace(node.parentnode, namespaceuri); } else ...
LookupNamespaceURI - Archive of obsolete content
return null; case 9: // document_node return lookupnamespaceurihelper(node.documentelement, prefix); case 6: // entity_node case 12: // notation_node case 10: // document_type_node case 11: // document_fragment_node return null; // unknown case 2: // attribute_node if (node.owne
relement) { return lookupnamespaceurihelper(node.owne
relement, prefix); } return null; // unknown default: // text_node (3), cdata_section_node (4), entity_reference_node (5), // processing_instruction_node (7), comment_node (8) if (node.parentnode) { // entityreferences may...
LookupPrefix - Archive of obsolete content
de.element_node return _lookupnamespaceprefix(namespaceuri, node); case 9: // node.document_node return _lookupnamespaceprefix(namespaceuri, node.documentelement); case 6: // node.entity_node case 12: // node.notation_node case 11: // node.document_fragment_node case 10: // node.document_type_node return null; // type is unknown case 2: // node.attribute_node if (node.owne
relement) { return _lookupnamespaceprefix(namespaceuri, node.owne
relement); } return null; default: if (node.parentnode) { // entityreferences may have to be skipped to get to it return _lookupnamespaceprefix(namespaceuri, node.parentnode); } return null; } } // private function for lookupprefix only function _lookupnamespaceprefix (namespaceuri, originalelement) { va...
Miscellaneous - Archive of obsolete content
ollarea"); elm.addeventlistener("dommousescroll", function scroll(event){ //event.detail is positive for a downward scroll, negative for an upward scroll alert("scrolling " + event.detail + " lines"); }, false); </script> if you do not receive a dommousescroll event while holding any of the modifier keys (ctrl,shift,alt,meta) you should check the mousewheel.withcontrolkey.action and
related preferences.
Progress Listeners - Archive of obsolete content
}, // for definitions of the remaining functions see
related documentation onprogresschange: function(awebprogress, arequest, curself, maxself, curtot, maxtot) {}, onstatuschange: function(awebprogress, arequest, astatus, amessage) {}, onsecuritychange: function(awebprogress, arequest, astate) {} } attach the progress listener to a <browser> or a <tabbrowser> element using addprogresslistener, for example for firefox put the following co...
Toolbar - Archive of obsolete content
you must not insert your toolbar button between any of the following elements: the combined back/forward button, the location bar, the stop botton, or the
reload button.
Displaying web content in an extension without security issues - Archive of obsolete content
icted document and can execute without restrictions): <iframe type="content" onclick="handleclick(event);"/> and the event handler would look like that: function handlebrowserclick(event) { // only react to left mouse clicks if (event.button != 0) return; // default action on link clicks is to go to this link, cancel it event.preventdefault(); if (event.target instanceof htmlancho
relement && event.target.href) openlinkinbrowser(event.target.href); } safe html manipulation functions when it comes to displaying the data, it is tempting to generate some html code and to insert it into the document via innerhtml.
Inline options - Archive of obsolete content
see mxr for what all this holds: http://mxr.mozilla.org/mozilla-
release/source/toolkit/mozapps/extensions/content/setting.xml for example you can fire this.inputchanged() etc etc.
Property - Archive of obsolete content
bundle strings style subject suppressonselect tabcontainer tabindex tabs tabscrolling tabpanels tag textlength textvalue timeout title toolbarname toolbarset tooltip tooltiptext top treeboxobject type uri useraction value valuenumber view webbrowserefind webnavigation webprogress width wizardpages wraparound year yearleadingzero
related dom element properties dom:element.attributes dom:element.baseuri dom:element.childelementcount dom:element.childnodes dom:element.children dom:element.clientheight dom:element.clientleft dom:element.clienttop dom:element.clientwidth dom:element.clonenode dom:element.firstchild dom:element.firstelementchild dom:element.lastchild dom:element.lastelementchild dom:...
Additional Navigation - Archive of obsolete content
<query> <content uri="?start"/> <triple subject="?
relateditem" predicate="http://www.xulplanet.com/rdf/
relateditem" object="?start"/> </query> the triple is evaluated in the same manner except that the value of the object can be filled in with the value of the ?start variable.
Building Menus With Templates - Archive of obsolete content
after the first level of the menu has been generated, the content will be equivalent to the following (ignoring the template
related content): <button label="houses in my neighbourhood" type="menu"> <menupopup> <menu uri="http://www.xulplanet.com/rdf/marion" label="marion street"/> <menu uri="http://www.xulplanet.com/rdf/garden" label="garden avenue"/> </menupopup> </button> the inner pass through the data handles the houses.
Result Generation - Archive of obsolete content
<?xml version="1.0"?> <rdf:rdf xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:
rel="http://www.xulplanet.com/rdf/"> <rdf:description rdf:about="http://www.xulplanet.com/rdf/a"> <
rel:
relateditem rdf:resource="http://www.xulplanet.com/rdf/b"/> <
rel:
relateditem rdf:resource="http://www.xulplanet.com/rdf/c"/> <
rel:
relateditem rdf:resource="http://www.xulplanet.com/rdf/d"/> </rdf:description> <rdf:description rdf:about="http://www.xulplanet.com/rdf/c"> <
rel:r...
Using Recursive Templates - Archive of obsolete content
<vbox datasources="people.xml" ref="*" querytype="xml"> <template> <query expr="*"> <assign var="?type" expr="local-name(.)"/> </query> <rule> <where subject="?type"
rel="equals" value="group"/> <action> <groupbox uri="?"> <caption label="?name"/> </groupbox> </action> </rule> <rule> <action> <label uri="?" value="?name"/> </action> </rule> </template> </vbox> the first rule contains a where clause which matches only those results that have a type of group.
Creating toolbar buttons (Customize Toolbar Window) - Archive of obsolete content
<li resource="urn:mozilla:skin:classic/1.0:myextension"/> </seq> </chrome:packages> </description> <seq about="urn:mozilla:stylesheets"> <li resource="chrome://global/content/customizetoolbar.xul"/> </seq> <seq about="chrome://global/content/customizetoolbar.xul"> <li>chrome://myextension/skin/toolbar-button.css</li> </seq> </rdf> the skin/contents.rdf file is denigrated in developing for later
releases of firefox.
Custom toolbar button - Archive of obsolete content
supported applications you can use the steps on this page with any or all of these mozilla applications: firefox 1.5 or a later version seamonkey 2.0 or a later version thunderbird 1.5 or a later version sunbird 0.3 or a later version pre-
release versions of these (alphas, betas and
release candidates) are also ok.
Animations and tweens - Game development
next, we will load the spritesheet — put the following line at the bottom of your p
reload() function: game.load.spritesheet('ball', 'img/wobble.png', 20, 20); instead of loading a single image of the ball we can load the whole spritesheet — a collection of different images.
Bounce off the walls - Game development
add the following line below the previous one: ball.body.bounce.set(1); try
reloading index.html again — now you should see the ball bouncing off all the walls and moving inside the canvas area.
Buttons - Game development
add the following to the bottom of the p
reload() function: game.load.spritesheet('button', 'img/button.png', 120, 40); a single button frame is 120 pixels wide and 40 pixels high.
The score - Game development
this can be done using the settext() method — add the two new lines seen below to the ballhitbrick() function: function ballhitbrick(ball, brick) { brick.kill(); score += 10; scoretext.settext('points: '+score); } that's it for now —
reload your index.html and check that the score updates on every brick hit.
Win the game - Game development
o your ballhitbrick() function: function ballhitbrick(ball, brick) { brick.kill(); score += 10; scoretext.settext('points: '+score); var count_alive = 0; for (i = 0; i < bricks.children.length; i++) { if (bricks.children[i].alive == true) { count_alive++; } } if (count_alive == 0) { alert('you won the game, congratulations!'); location.
reload(); } } we loop through the bricks in the group using bricks.children, checking for the aliveness of each with each brick's .alive() method.
Accessibility - Learn web development
get started prerequisites to get the most out of this module, it would be a good idea to either work through at least the first two modules of the html, css, and javascript topics, or perhaps even better, work through the
relevant parts of the accessibility module as you work through the
related technology topics.
Advanced styling effects - Learn web development
t each one is now sat on top of a simple <div> with a purple background, to show how the elements will blend together: <article> no mix blend mode <div> </div> <div> </div> </article> <article> multiply mix <div class="multiply-mix"> </div> <div> </div> </article> here's the css we'll style this with: article { width: 280px; height: 180px; margin: 10px; position:
relative; display: inline-block; } div { width: 250px; height: 130px; padding: 10px; margin: 10px; } article div:first-child { position: absolute; top: 10px; left: 0; background: url(https://mdn.mozillademos.org/files/13090/colorful-heart.png) no-repeat center 20px; background-color: green; } article div:last-child { background-color: purple; position: absolute; bottom: -...
Fundamental CSS comprehension - Learn web development
the final step before you move on is to attempt the assessment for the module — this involves a number of
related exercises that must be completed in order to create the final design — a business card/gamer card/social media profile.
Combinators - Learn web development
previous overview: building blocks next the final selectors we will look at are called combinators, because they combine other selectors in a way that gives them a useful
relationship to each other and the location of content in the document.
Example 3 - Learn web development
<li class="option">lemon</li> <li class="option">banana</li> <li class="option">strawberry</li> <li class="option">apple</li> </ul> </div> </form> css content .widget select, .no-widget .select { position : absolute; left : -5000em; height : 0; overflow : hidden; } /* --------------- */ /* required styles */ /* --------------- */ .select { position:
relative; display : inline-block; } .select.active, .select:focus { box-shadow: 0 0 3px 1px #227755; outline: none; } .select .optlist { position: absolute; top : 100%; left : 0; } .select .optlist.hidden { max-height: 0; visibility: hidden; } /* ------------ */ /* fancy styles */ /* ------------ */ .select { font-size : 0.625em; /* 10px */ font-family : verdana, ari...
Example 4 - Learn web development
<li class="option">lemon</li> <li class="option">banana</li> <li class="option">strawberry</li> <li class="option">apple</li> </ul> </div> </form> css content .widget select, .no-widget .select { position : absolute; left : -5000em; height : 0; overflow : hidden; } /* --------------- */ /* required styles */ /* --------------- */ .select { position:
relative; display : inline-block; } .select.active, .select:focus { box-shadow: 0 0 3px 1px #227755; outline: none; } .select .optlist { position: absolute; top : 100%; left : 0; } .select .optlist.hidden { max-height: 0; visibility: hidden; } /* ------------ */ /* fancy styles */ /* ------------ */ .select { font-size : 0.625em; /* 10px */ font-family : verdana, ari...
Example 5 - Learn web development
i class="option" role="option">banana</li> <li class="option" role="option">strawberry</li> <li class="option" role="option">apple</li> </ul> </div> </form> css content .widget select, .no-widget .select { position : absolute; left : -5000em; height : 0; overflow : hidden; } /* --------------- */ /* required styles */ /* --------------- */ .select { position:
relative; display : inline-block; } .select.active, .select:focus { box-shadow: 0 0 3px 1px #227755; outline: none; } .select .optlist { position: absolute; top : 100%; left : 0; } .select .optlist.hidden { max-height: 0; visibility: hidden; } /* ------------ */ /* fancy styles */ /* ------------ */ .select { font-size : 0.625em; /* 10px */ font-family : verdana, ari...
Example - Learn web development
lid #999; } input[type=checkbox], input[type=radio] { width: auto; border: none; } input:focus, textarea:focus { border-color: #000; } textarea { vertical-align: top; height: 5em; resize: vertical; } fieldset { width: 250px; box-sizing: border-box; margin-left: 136px; border: 1px solid #999; } button { margin: 20px 0 0 124px; } label { position:
relative; } label em { position: absolute; right: 5px; top: 20px; } result ...
Dealing with files - Learn web development
when you are working on a website locally on your computer, you should keep all the
related files in a single folder that mirrors the published website's file structure on the server.
HTML basics - Learn web development
if you save and
reload the page, you should see something like this in place of the image: the keywords for alt text are "descriptive text".
Publishing your website - Learn web development
generally speaking, these tools are
relatively easy, great for learning, good for sharing code (for example, if you want to share a technique with or ask for debugging help from colleagues in a different office), and free (for basic features).
HTML Cheatsheet - Learn web development
can mark a phrase in the text in <i>italics</i> you can mark a phrase in the text in italics bold some text <b>bold a word or phrase</b>within the text bold a word or phrase within the text mark text as important <strong>i'm important</strong> i'm important highlight some text <mark>notice me</mark> notice me draw a line through ir
relevant text <s>i'm ir
relevant</s> i'm ir
relevant underline a non-textual annotation this is <u>mispelled</u> this is mispelled text displayed lower than normal text h<sub>2</sub>o h2o small text used to represent the <small>small print </small>of a document used to represent the small print of a document used for an address <address>main...
Mozilla splash page - Learn web development
adding responsive images to the further info links inside the <div> with the class of further-info you will find four <a> elements — each one linking to an interesting mozilla-
related page.
CSUN Firefox Materials
assistive technology support on windows "i am a full firefox convert with the
release of 1.5.
Information for users
assistive technology compatibility this is a wiki page which users can edit to provide up to date information on any issues
related to compatibility with assistive technologies such as screen readers, screen magnifiers, voice input software and on screen keyboards.
Mozilla's Section 508 Compliance
part of section 508 (§1194.21) specifically
relates to mozilla, and the ability of us government agencies to buy software that contains mozilla software components.
Accessible Toolkit Checklist
make sure that parent-child
relationships are exposed correctly in each window's msaa tree general msaa support focus events handling event callbacks, which requires a unique id for each non-windowed child of every widget that can be focused or have any other event associated with it.
ZoomText
read the
release notes if you're interested.
Accessibility and Mozilla
this page describes a number of design-
related aspects to look out for, in no particular order.accessibility/liveregiondevguidethis page is currently under construction.
Index
676 index add-ons, glossary, guide, index found 689 pages: 677 signing and distributing your add-on add-ons, extensions, webextensions, distribution, publication, reviews, signing add-ons need to be signed before they can be installed into
release and beta versions of firefox.
Lightweight themes
keep in mind that a reviewer may reject your theme if it is obvious that your category and/or tags are un
related to your theme.
Theme concepts
opera takes an enti
rely different approach, and microsoft edge themes are not yet open to developers.
Themes
tools & resources browser theme manifest.json keys browser extensions theme api discourse forum theme
related blog posts archived resources ...
Add-ons
nd: overview of the firefox extension features tools and processes for developing and testing how to publish your extension on addons.mozilla.org or distribute it yourself how to manage your published extension an enterprise guide for developing and using extensions how to develop themes for firefox firefox developer communities extensions for firefox for android in 2020, mozilla will
release a new firefox for android experience.
Adding a new CSS property
(again, see the gecko overview for more information.) it should generally be grouped with
related properties.
Building SpiderMonkey with UBSan
/bin/sh if [ -z $1 ] ; then echo "usage: $0 <dirname>" elif [ -d $1 ] ; then echo "directory $1 already exists" else autoconf2.13 autoconf213 mkdir $1 cd $1 llvm_root="$home/llvm" sanflag="-fsanitize=undefined -fno-sanitize=alignment,float-cast-overflow,float-divide-by-zero,vptr -dxmalloc=myxmalloc" \ cc="$llvm_root/build/
release+asserts/bin/clang" \ cxx="$llvm_root/build/
release+asserts/bin/clang++" \ cflags="$sanflag" \ cxxflags="$sanflag" \ moz_llvm_hacks=1 \ ../configure --enable-debug --disable-optimize make -j 8 fi 3.
Creating a Language Pack
pre-build steps in the .mozconfig, you want to have mk_add_options moz_objdir=@topsrcdir@/obj-firefox-build ac_add_options --disable-compile-environment ac_add_options --with-l10n-base=../l10n-central # path
relative to moz_objdir ac_add_options --enable-application=[browser or mail] the given path should have your localization directory as child (i.e., a subdirectory ab-cd where ab-cd is your locale code).
Blocked: All third-party storage access requests
the permission can be changed or removed by: going to preferences > content blocking and either adding an exception with the manage exceptions… button choosing the custom content blocking and unchecking the cookies checkbox if the resource that is being blocked doesn't need authentication, you can fix the warning message by adding a crossorigin="anonymous" attribute to the
relevant element.
Blocked: Storage access requests from trackers
the permission can be changed or removed by: going to preferences > content blocking and either adding an exception with the manage exceptions… button choosing the custom content blocking and unchecking the tracker checkbox if the blocked resource doesn't need authentication, you can fix the warning message by adding a crossorigin="anonymous" attribute to the
relevant element.
Tracking Protection
you will also be able to disable tracking protection enti
rely if you choose by accessing the tracking settings.
Privacy
this document lists privacy-
related documentation.
Firefox and the "about" protocol
(question mark) > troubleshooting information) about:sync-log displays a synchronization protocol
related to the sync feature about:telemetry displays telemetry data collected and sent to mozilla while firefox is running (in case the user enabled telemetry) about:url-classifier displays the status of the url classifier services that firefox uses (for example for safe browsing) about:webrtc information about webrtc usage about:welcome page first disp...
Firefox
always keep in mind the side effects your changes may have, from blocking other tasks, to interfering with other user interface elements.privacythis document lists privacy-
related documentation.security best practices for firefox front-end engineersthis article will help firefox developers understand the security controls in place and avoid common pitfalls when developing front-end code for firefox.site identity buttonthe site identity button is a feature in firefox that gives users more information about the sites they visit.
HTMLIFrameElement.findAll()
the findall() method of the htmliframeelement searches for a string in a browser <iframe>'s text content; if found, the first instance of the string
relative to the caret position will be highlighted.
HTMLIFrameElement.goBack()
by calling this method, the browser <iframe> changes its location for the previous location available in its navigation history, which sends a series of
related events: mozbrowserlocationchange, mozbrowserloadstart, and so on.
HTMLIFrameElement.goForward()
by calling this method, the browser <iframe> changes its location to the next location available in its navigation history, which sends a series of
related events: mozbrowserlocationchange, mozbrowserloadstart and so on.
mozbrowseractivitydone
examples var browser = document.queryselector("iframe"); browser.addeventlistener("mozbrowseractivitydone", function(event) { if(event.details.success) { console.log('activity completed successfully'); } else { console.log('activity not completed successfully'); } });
related events mozbrowserclose mozbrowsercontextmenu mozbrowsererror mozbrowsericonchange mozbrowserloadend mozbrowserloadstart mozbrowserlocationchange mozbrowseropenwindow mozbrowsersecuritychange mozbrowsertitlechange mozbrowserusernameandpasswordrequired ...
mozbrowserasyncscroll
examples var browser = document.queryselector("iframe"); browser.addeventlistener("mozbrowserasyncscroll", function( event ) { console.log("the scroll top position of the document is:" + event.details.top + "px"); });
related events mozbrowserclose mozbrowsercontextmenu mozbrowsererror mozbrowsericonchange mozbrowserloadend mozbrowserloadstart mozbrowserlocationchange mozbrowseropenwindow mozbrowsersecuritychange mozbrowsertitlechange mozbrowserusernameandpasswordrequired ...
mozbrowseraudioplaybackchange
examples var browser = document.queryselector("iframe"); browser.addeventlistener("mozbrowseraudioplaybackchange", function(event) { console.log(event.details); });
related events mozbrowserclose mozbrowsercontextmenu mozbrowsererror mozbrowsericonchange mozbrowserloadend mozbrowserloadstart mozbrowserlocationchange mozbrowseropenwindow mozbrowsersecuritychange mozbrowsertitlechange mozbrowserusernameandpasswordrequired ...
mozbrowserclose
example var browser = document.queryselector("iframe"); browser.addeventlistener("mozbrowserclose", function() { console.log("browser window has been closed; iframe will be destroyed."); });
related events mozbrowserasyncscroll mozbrowsercontextmenu mozbrowsererror mozbrowsericonchange mozbrowserloadend mozbrowserloadstart mozbrowserlocationchange mozbrowseropenwindow mozbrowsersecuritychange mozbrowsershowmodalprompt mozbrowsertitlechange mozbrowserusernameandpasswordrequired ...
mozbrowserdocumentfirstpaint
example var browser = document.queryselector("iframe"); browser.addeventlistener("mozbrowserdocumentfirstpaint", function() { console.log("first content painted."); });
related events mozbrowserasyncscroll mozbrowsercontextmenu mozbrowsererror mozbrowsericonchange mozbrowserloadend mozbrowserloadstart mozbrowserlocationchange mozbrowseropenwindow mozbrowsersecuritychange mozbrowsershowmodalprompt mozbrowsertitlechange mozbrowserusernameandpasswordrequired ...
mozbrowsererror
nownsockettype netreset notcached isprinting deniedportaccess proxyresolvefailure proxyconnectfailure contentencodingfailure remotexul unsafecontenttype corruptedcontenterror certerror other example var browser = document.queryselector("iframe"); browser.addeventlistener("mozbrowsererror", function( event ) { console.log("an error occurred:" + event.detail); });
related events mozbrowserasyncscroll mozbrowserclose mozbrowsercontextmenu mozbrowsericonchange mozbrowserloadend mozbrowserloadstart mozbrowserlocationchange mozbrowseropenwindow mozbrowsersecuritychange mozbrowsershowmodalprompt mozbrowsertitlechange mozbrowserusernameandpasswordrequired ...
mozbrowserfindchange
example var browser = document.queryselector("iframe"); browser.addeventlistener("mozbrowserfindchange", function(event) { console.log("currently highlighted: " + event.details.activematchordinal + " out of " + event.details.numberofmatches); });
related events mozbrowserasyncscroll mozbrowsercontextmenu mozbrowsererror mozbrowsericonchange mozbrowserloadend mozbrowserloadstart mozbrowserlocationchange mozbrowseropenwindow mozbrowsersecuritychange mozbrowsershowmodalprompt mozbrowsertitlechange mozbrowserusernameandpasswordrequired ...
mozbrowserfirstpaint
example var browser = document.queryselector("iframe"); browser.addeventlistener("mozbrowserfirstpaint", function(event) { console.log("first content painted."); });
related events mozbrowserasyncscroll mozbrowsercontextmenu mozbrowsererror mozbrowsericonchange mozbrowserloadend mozbrowserloadstart mozbrowserlocationchange mozbrowseropenwindow mozbrowsersecuritychange mozbrowsershowmodalprompt mozbrowsertitlechange mozbrowserusernameandpasswordrequired ...
mozbrowserlocationchange
var browser = document.queryselector("iframe"); browser.addeventlistener('mozbrowserlocationchange', function (event) { urlbar.value = event.detail.url; });
related events mozbrowserasyncscroll mozbrowserclose mozbrowsercontextmenu mozbrowsererror mozbrowsericonchange mozbrowserloadend mozbrowserloadstart mozbrowseropenwindow mozbrowsersecuritychange mozbrowsershowmodalprompt mozbrowsertitlechange mozbrowserusernameandpasswordrequired ...
mozbrowseropentab
example var browser = document.queryselector("iframe"); browser.addeventlistener("mozbrowseropentab", function( event ) { console.log("a new document has opened containing the content at " + event.details.url + "."); });
related events mozbrowserasyncscroll mozbrowserclose mozbrowsercontextmenu mozbrowsererror mozbrowsericonchange mozbrowserloadend mozbrowserloadstart mozbrowserlocationchange mozbrowsersecuritychange mozbrowsertitlechange mozbrowserusernameandpasswordrequired ...
mozbrowseropenwindow
example var browser = document.queryselector("iframe"); browser.addeventlistener("mozbrowseropenwindow", function( event ) { console.log("a new window has opened containing the content at " + event.details.url + "."); });
related events mozbrowserasyncscroll mozbrowserclose mozbrowsercontextmenu mozbrowsererror mozbrowsericonchange mozbrowserloadend mozbrowserloadstart mozbrowserlocationchange mozbrowsersecuritychange mozbrowsertitlechange mozbrowserusernameandpasswordrequired ...
mozbrowserresize
example var browser = document.queryselector("iframe"); browser.addeventlistener("mozbrowserresize", function( event ) { console.log("the new window size is " + event.details.width + " x " + event.details.height + "."); });
related events mozbrowserasyncscroll mozbrowserclose mozbrowsercontextmenu mozbrowsererror mozbrowsericonchange mozbrowserloadend mozbrowserloadstart mozbrowserlocationchange mozbrowsersecuritychange mozbrowsertitlechange mozbrowserusernameandpasswordrequired ...
mozbrowserscroll
example var browser = document.queryselector("iframe"); browser.addeventlistener("mozbrowserscroll", function( event ) { console.log("the new scroll position is " + event.details.left + " across and " + event.details.top + "down."); });
related events mozbrowserasyncscroll mozbrowserclose mozbrowsercontextmenu mozbrowsererror mozbrowsericonchange mozbrowserloadend mozbrowserloadstart mozbrowserlocationchange mozbrowsersecuritychange mozbrowsertitlechange mozbrowserusernameandpasswordrequired ...
mozbrowserscrollareachanged
example var browser = document.queryselector("iframe"); browser.addeventlistener("mozbrowserscrollareachanged", function( event ) { console.log("the new scroll area is " + event.details.width + " x " + event.details.height + "."); });
related events mozbrowserasyncscroll mozbrowserclose mozbrowsercontextmenu mozbrowsererror mozbrowsericonchange mozbrowserloadend mozbrowserloadstart mozbrowserlocationchange mozbrowsersecuritychange mozbrowsertitlechange mozbrowserusernameandpasswordrequired ...
mozbrowserscrollviewchange
example var browser = document.queryselector("iframe"); browser.addeventlistener("mozbrowserscrollviewchange", function( event ) { console.log("scrolling has " + event.details.state + "."); });
related events mozbrowserasyncscroll mozbrowserclose mozbrowsercontextmenu mozbrowsererror mozbrowsericonchange mozbrowserloadend mozbrowserloadstart mozbrowserlocationchange mozbrowsersecuritychange mozbrowsertitlechange mozbrowserusernameandpasswordrequired ...
mozbrowsersecuritychange
example var browser = document.queryselector("iframe"); browser.addeventlistener("mozbrowsersecuritychange", function( event ) { console.log("the ssl state is:" + event.details.state); });
related events mozbrowserasyncscroll mozbrowserclose mozbrowsercontextmenu mozbrowsererror mozbrowsericonchange mozbrowserloadend mozbrowserloadstart mozbrowserlocationchange mozbrowseropenwindow mozbrowsertitlechange mozbrowserusernameandpasswordrequired ...
mozbrowserselectionstatechanged
example var browser = document.queryselector("iframe"); browser.addeventlistener("mozbrowserselectionstatechanged", function( event ) { if(event.details.visible) { console.log("the current selection is visible."); } else { console.log("the current selection is not visible."); } });
related events mozbrowserasyncscroll mozbrowserclose mozbrowsercontextmenu mozbrowsererror mozbrowsericonchange mozbrowserloadend mozbrowserloadstart mozbrowserlocationchange mozbrowseropenwindow mozbrowsertitlechange mozbrowserusernameandpasswordrequired ...
mozbrowsershowmodalprompt
example var browser = document.queryselector("iframe"); browser.addeventlistener("mozbrowsershowmodalprompt", function( event ) { console.log("asking for prompt:" + json.stringify(event.detail)); });
related events mozbrowserasyncscroll mozbrowserclose mozbrowsercontextmenu mozbrowsererror mozbrowsericonchange mozbrowserloadend mozbrowserloadstart mozbrowserlocationchange mozbrowseropenwindow mozbrowsersecuritychange mozbrowsertitlechange mozbrowserusernameandpasswordrequired ...
mozbrowsertitlechange
example var browser = document.queryselector("iframe"); browser.addeventlistener("mozbrowsertitlechange", function( event ) { console.log("the title of the document is:" + event.detail); });
related events mozbrowserasyncscroll mozbrowserclose mozbrowsercontextmenu mozbrowsererror mozbrowsericonchange mozbrowserloadend mozbrowserloadstart mozbrowserlocationchange mozbrowseropenwindow mozbrowsersecuritychange mozbrowsershowmodalprompt mozbrowserusernameandpasswordrequired ...
UpdateInfo
updateinfourl string a url containing simple
release notes for the update.
Assert.jsm
undefined notequal( actual, expected, message ); parameters actual test subject to be evaluated as not equivalent to expected expected test reference to evaluate against actual message short explanation of the expected result deepequal() the equivalence assertion tests a deep equality
relation.
CustomizableUI.jsm
in particular, if you're wanting to check it in
relation to a widget's node, your dom node might not be a direct child of the customize target in a window if, for instance, the window is in customization mode, or if this is an overflowable toolbar and the widget has been overflowed.
DownloadTarget
it currently indicates the size of the main file (such as the html document) rather than the sum of all of the files' sizes, but you must not
rely upon this behavior, as it is subject to change.
FxAccountsOAuthClient.jsm
parameters none teardown() call this function to manually
release all channels and callbacks that are in use by this client.
Geometry.jsm
note: although this module is usable from mobile, and is present in firefox 4, it's currently not used in firefox 4 and attempting to use it may produce un
reliable results there.
JavaScript OS
os.constants os-
related constants, including errors, file opening modes, system configuration, etc.
NetUtil.jsm
the netutil.jsm javascript code module provides easy-to-use apis for performing common network
related tasks.
OS.File.Error
instances of os.file.error are used by os.file to notify of file-
related errors.
OS.File for the main thread
promise<number> getposition() promise<number> read([optional] in number bytes) promise<void> setdates(in date|number accessdate, in date|number modificationdate); promise<void> setposition(in number bytes) promise<file.info> stat() promise<number> write(in arraybufferview source, [optional] in object options) methods close() close a file and
release any associated resource.
Promise.jsm
to use it, you first need to import the code module into your javascript scope: components.utils.import("resource://gre/modules/promise.jsm"); note: a p
reliminary promise module is also available starting from gecko 17, though it didn't conform to the promises/a+ proposal until gecko 25: components.utils.import("resource://gre/modules/commonjs/promise/core.js"); // gecko 17 to 20 components.utils.import("resource://gre/modules/commonjs/sdk/core/promise.js"); // gecko 21 to 24 this implementation also includes helper functions that are specifi...
PromiseUtils.jsm
the promiseutils.jsm javascript code module offers some useful functions
related to dom promise.
Webapps.jsm
getdefaultcspbylocalid: function(alocalid) getapplocalidbystoreid: function(astoreid) getappbylocalid: function(alocalid) getmanifesturlbylocalid: function(alocalid) getapplocalidbymanifesturl: function(amanifesturl) getcoreappsbasepath: function() getwebappsbasepath: function() _islaunchable: function(aapp) _notifycategoryandobservers: function(subject, topic, data, msg) registerbrowse
relementparentforapp: function(amsg, amn) receiveappmessage: function(appid, message) _clearprivatedata: function(appid, browseronly, msg) _sendprogressevent: function() updatestatechanged: function appobs_update(aupdate, astate) applicationcacheavailable: function appobs_cacheavail(aapplicationcache) ...
Localization and Plurals
additionally, the localizer has control over where the placeholder is, in
relation to the rest of the text.
Localization formats
html/php maybe you are designing a project that has
relatively small translation needs like three to four lines (or more) of content asking users to update to the next version of software available.
Enc Dec MAC Using Key Wrap CertReq PKCS10 CSR
secupwdata *pwdata, const char *nicknamestr, const char *headerfilename, const char *infilename) { secstatus rv; prfiledesc *headerfile = null; prfiledesc *infile = null; certcertificate *cert = null; unsigned int signatu
relen = 0; seckeyprivatekey *privkey = null; secitem sigitem; secoidtag hashoidtag; /* open the header file to write padding */ headerfile = pr_open(headerfilename, pr_create_file | pr_rdwr | pr_append, 00660); if (!headerfile) { pr_fprintf(pr_stderr, "unable to open \"%s\" for writing.\n", headerfi...
sample2
finds the private key from db and signs the contents * of infilename and writes to signaturefilename */ secstatus findkeyandsign(pk11slotinfo *slot, certcertdbhandle* certhandle, secupwdata *pwdata, const char *nicknamestr, const char *headerfilename, const char *infilename) { secstatus rv; prfiledesc *headerfile = null; prfiledesc *infile = null; certcertificate *cert = null; unsigned int signatu
relen = 0; seckeyprivatekey *privkey = null; secitem sigitem; secoidtag hashoidtag; /* open the header file to write padding */ headerfile = pr_open(headerfilename, pr_create_file | pr_rdwr | pr_append, 00660); if (!headerfile) { pr_fprintf(pr_stderr, "unable to open \"%s\" for writing.\n", headerfilename); rv = secfailure; goto cleanup; } /* get the certificate by nick name and write to header file ...
NSS sources building testing
getting source code, and a quick overview the easiest way is to download archives of nss
releases from mozilla's download server.
nss tech note1
it is normally
relative to the dest argument passed to the decoder.
nss tech note4
also, this document does not attempt to be an exhaustive survey of all possible ways to do a certain task; it me
rely tries to show a certain way.
nss tech note6
it is
released as part of the nss binary distributions.
nss tech note7
use pk11_freesymkey() to
release a reference to a symmetric key (pk11symkey *); the symmetric key is destroyed when its reference count becomes zero.
Overview of NSS
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.
Build instructions
hg clone https://hg.mozilla.org/projects/nspr hg clone https://hg.mozilla.org/projects/nss if you want to build a
releases other than the tips of these repositories, then switch to the
release tags: cd nspr hg update nspr_4_9_5_rtm cd ../nss hg update nss_3_14_2_rtm cd ..
FC_InitToken
ckr_token_write_protected we don't have a reference to the key database (we failed to open the key database or we have
released our reference).
NSC_InitToken
slot 1 doesn't have a key database.) we don't have a reference to the key database (we failed to open the key database or we have
released our reference).
NSS_Initialize
nss_init_pk11
reload - ignore the ckr_cryptoki_already_initialized error when loading pkcs#11 modules.
sslcrt.html
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.
ssltyp.html
<a name="> many of the structures presented here (certcertdbhandle, certcertificate, pk11slotinfo, and seckeyprivatekey) are opaque--that is, they are types defined as structures (for example, certcertdbhandlestr) that may change in future
releases of network security services.
Preferences API
it is
relatively easy to use, while providing a number of useful user and developer features, including support for default preferences, user overrides via user.js, and locking.
FUEL
jects extiapplication objects extiapplication exticonsole extieventitem extieventlistener extievents extiextension extiextensions extipreference extipreferencebranch extisessionstorage fueliapplication objects fueliannotations fueliapplication fuelibookmark fuelibookmarkfolder fuelibookmarkroots fuelibrowsertab fueliwindow xpcom although the fuel application object is p
reloaded into xul scripts, it is not p
reloaded into javascript xpcom code.
SMILE
objects extiapplication objects exticonsole extieventitem extieventlistener extievents extiextension extiextensions extipreference extipreferencebranch extisessionstorage smileiapplication objects smileibookmarkroots smileiwindow smileibrowsertab smileiapplication xpcom although the extiapplication object is p
reloaded into xul scripts, it is not p
reloaded into javascript xpcom code.
STEEL
objects extiapplication objects extiapplication exticonsole extieventitem extieventlistener extievents extiextension extiextensions extipreference extipreferencebranch extisessionstorage steeliapplication objects steeliapplication xpcom although the steel steeliapplication object is p
reloaded into xul scripts, it is not p
reloaded into javascript xpcom code.
extIApplication
xpcom although the application object is p
reloaded into xul scripts, it is not p
reloaded into javascript xpcom code.
extIPreferenceBranch
all preference "aname" parameters used in this interface are
relative to the root branch.
Aggregating the In-Memory Datasource
for example, while writing the bookmarks datasource, i wanted to be able to trap assert() to enforce the bookmarks datasource would only accept "bookmarks
related" assertions.
Generic factory
it seems to me that we can cut down on code size (all those queryinterface, addref,
release implementations) if we just use the following class for all of the simple factories: // idea: why not create a generic factory facility so we can avoid // duplication of so much nsifactory code?
Building the WebLock UI
wlocked = 0; then the functions that get called from the interface and call through to the lock and unlock methods of the weblock component must also adjust this variable accordingly: function wlock() { // check to see if locking is on or off weblock.lock(); wlocked = 1; } function wunlock() { // check to see if locking is on or off weblock.unlock(); wlocked = 0; } an important p
reliminary of these functions is that the weblock component be made available to the javascript in the form of the weblock object being used in the snippets above.
Packaging WebLock
the chrome registry lives in a series of rdf/xml files in the application directory of mozilla and other gecko-based browsers, where new installs, user configurable data, skins, and other information are
related to one another and the application itself.
Resources
weblock resources weblock installer and information the sdk download linux: http://ftp.mozilla.org/pub/mozilla/
releases/mozilla1.4a/gecko-sdk-i686-pc-linux-gnu-1.4a.tar.gz windows: http://ftp.mozilla.org/pub/mozilla/
releases/mozilla1.4a/gecko-sdk-win32-1.4a.zip other mozilla downloads gecko resources internal string guide external string guide the gecko networking library ("necko") the netscape portable runtime environment embedding mozilla current module owners xpinstall xul xpcom resources the xpcom project page xulplanet's online xpcom reference information on xpconnect and scripta...
Using XPCOM Components
the xpcom component viewer can be extremely useful for this sort of gross interrogation, but again: it displays all of the components and interfaces in your build, many of which are not practical for actual reuse or stable enough to be used
reliably in your own application development.
Creating XPCOM components
for example, the introduction includes a discussion of components and what they are, and the first chapter - in which you compile the basic code and register it with mozilla - prompts a discussion of the
relationship between components and modules, of xpcom interfaces, and of the registration process in general.
Interfacing with the XPCOM cycle collector
or if that doesn't work: ns_interface_table_head(nsfoo) ns_interface_table2(nsfoo, nsibar, nsibaz) ns_interface_table_to_map_segue_cycle_collection(nsfoo) ns_interface_map_end change the line ns_impl_addref(nsfoo) to ns_impl_cycle_collecting_addref(nsfoo) in nsfoo.cpp, and similarly change the line ns_impl_
release(nsfoo) to ns_impl_cycle_collecting_
release(nsfoo) in nsfoo.cpp.
nsILoginManagerPrompter
void init( in nsidomwindow awindow ); parameters awindow the in which the user is doing some login-
related action that is resulting in a need to prompt them for something.
nsIMacDockSupport
this is created by using the dockmenu attribute of nsimacdocksupport here: http://mxr.mozilla.org/mozilla-
release/source/browser/base/content/browser.js#1562 this is seen here: if you were to copy and follow that example you would replace the default native menu.
nsIMemory
a client that wishes to be notified of low memory situations (for example, because the client maintains a large memory cache that could be
released when memory is tight) should register with the observer service (see nsiobserverservice) using the topic "memory-pressure".
nsIMsgDBHdr
for the currently selected message, thunderbird provides a utility function: setmsghdrpropertyand
reload(aproperty, avalue); which duplicates this functionality without requiring you to grab the current header.
nsIMsgFilterList
lterlist::writewstrattr ( in nsmsgfilterfileattribvalue attrib, in string value, in nsioutputstream stream ) matchorchangefiltertarget() boolean nsimsgfilterlist::matchorchangefiltertarget ( in acstring olduri, in acstring newuri, in boolean caseinsensitive ) clearlog() void nsimsgfilterlist::clearlog () ensu
relogfile() void nsimsgfilterlist::ensu
relogfile () flushlogifnecessary () void nsimsgfilterlist::flushlogifnecessary () const const nsmsgfilterfileattribvalue nsimsgfilterlist::attribnone = 0 const nsmsgfilterfileattribvalue nsimsgfilterlist::attribversion = 1 const nsmsgfilterfileattribvalue nsimsgfilterlist::attriblogging = 2 const nsmsgfilterfileattribvalue nsimsgfilterlist::attribname...
nsIMsgMessageService
objects that implements nsimsgmessageservice give the user top level routines
related to messages like copying, displaying, attachment's manipulation, printing, streaming the message content to eml format string, etc.
nsIMutableArray
clear() clear the entire array,
releasing all stored objects.
nsINavBookmarksService
this method exists because complex delete->undo operations
rely on recreated folders to have the same id they had before they were deleted, so that any other items deleted in different transactions can be re-inserted correctly.
nsINavHistoryResultNode
using places services after quit-application is not
reliable, so make sure to do any shutdown work on quit-application, or history synchronization could fail, losing latest changes.
nsINavHistoryResultTreeViewer
when you sort by date, the multiple entries will then appear because they will be separated (unless you clicked
reload a bunch of times in a row).
nsIOutputStream
for this reason, it is generally the case that a blocking output stream should be implemented using thread-safe addref and
release.
Int64
warning: do not
rely on the value returned by this method, as it's subject to change at any time, depending on the debugging needs of the developers.
UInt64
warning: do not
rely on the value returned by this method, as it's subject to change at any time, depending on the debugging needs of the developers.
js-ctypes
mailing list newsgroup rss feed stackoverflow - jsctypes
related topics xpcom in gecko 2 - binary components ...
Blocking By Domain - Plugins
rather than block plugins enti
rely, firefox is limiting the impact of plugins by blocking certain domains from using plugins.
Flash Activation: Browser Comparison - Plugins
-shockwave-flash' in navigator.mimetypes by default when flash is inactive yes no no 'application/x-shockwave-flash' in navigator.mimetypes when user enables flash yes yes yes <object> with fallback content triggers ui yes, with exceptions no yes small/hidden flash triggers additional ui yes no no enabling flash automatically
reloads the page no yes yes other features
related to flash domain blocking plugin power saver peripheral content pause each of the browser vendors has a roadmap about the future of flash and changes to the user experience.
URLs - Plugins
the notifydata parameter contains private plug-in data that can be used to associate the request with the subsequent npp_urlnotify call (which returns this value) and/or to pass a pointer to some request-
related payload.
DOM Inspector FAQ - Firefox Developer Tools
these can include chrome documents, but it's not suggested that you inspect xul documents by directly inspecting them via url, since some behavior may
rely on the document being contained in another xul document, or the converse, where it won't behave correctly because it doesn't expect to be loaded as a framed document.
Access debugging in add-ons - Firefox Developer Tools
window.addeventlistener("debugger:editorunloaded")
relevant files: chrome://browser/content/devtools/debugger-controller.js chrome://browser/content/devtools/debugger-toolbar.js chrome://browser/content/devtools/debugger-view.js chrome://browser/content/devtools/debugger-panes.js unfortunately there is not yet any api to evaluate watches/expressions within the debugged scope, or highlight elements on the page that are referenced as variables ...
Set event listener breakpoints - Firefox Developer Tools
so if we choose to log keyboard events, for example, the code no longer pauses as each event is fired: instead, we can then switch to the console, and whenever we press a key we are given a log of where
related events were fired.
Source map errors - Firefox Developer Tools
this message will show an error message, the resource url, and the source map url: here, the resource url tells us that bundle.js mentions a source map, and the source map url tells us where to find the source map data (in this case,
relative to the resource).
AuthenticatorAttestationResponse.attestationObject - Web APIs
example.com", displayname: "john doe" }, pubkeycredparams: [ { type: "public-key", alg: -7 } ] }; navigator.credentials.create({ publickey }) .then(function (newcredentialinfo) { var attestationobj = newcredentialinfo.response.attestationobject; // this will be a cbor encoded arraybuffer // do something with the response // (sending it back to the
relying party server maybe?) }).catch(function (err) { console.error(err); }); specifications specification status comment web authentication: an api for accessing public key credentials level 1the definition of 'attestationobject' in that specification.
BaseAudioContext.createDynamicsCompressor() - Web APIs
into it var source = audioctx.createmediaelementsource(myaudio); // create a compressor node var compressor = audioctx.createdynamicscompressor(); compressor.threshold.setvalueattime(-50, audioctx.currenttime); compressor.knee.setvalueattime(40, audioctx.currenttime); compressor.ratio.setvalueattime(12, audioctx.currenttime); compressor.attack.setvalueattime(0, audioctx.currenttime); compressor.
release.setvalueattime(0.25, audioctx.currenttime); // connect the audiobuffersourcenode to the destination source.connect(audioctx.destination); button.onclick = function() { var active = button.getattribute('data-active'); if(active == 'false') { button.setattribute('data-active', 'true'); button.innerhtml = 'remove compression'; source.disconnect(audioctx.destination); sourc...
BaseAudioContext.createPanner() - Web APIs
the panner node is spatialized in
relation to the audiocontext's audiolistener (defined by the audiocontext.listener attribute), which represents the position and orientation of the person listening to the audio.
BaseAudioContext - Web APIs
<div id="interfacediagram" style="display: inline-block; position:
relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30"...
BasicCardResponse - Web APIs
the basiccardresponse dictionary (
related to the payment request api, although defined in the basic card payment spec) defines an object structure for payment response details such as the number/expiry date of the card used to make the payment, and the billing address.
Beacon API - Web APIs
not only do these techniques represent poor coding patterns, some of them are un
reliable and result in the perception of poor page load performance for the next navigation.
BeforeInstallPromptEvent - Web APIs
<div id="interfacediagram" style="display: inline-block; position:
relative; width: 100%; padding-bottom: 8.571428571428571%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-20 0 700 60" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/event" target="_top"><rect x="1" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="38.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment...
BeforeUnloadEvent - Web APIs
<div id="interfacediagram" style="display: inline-block; position:
relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/event" target="_top"><rect x="1" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="38.5" y="30" font-size="12px" fo...
BiquadFilterNode() - Web APIs
allpass: an allpass filter allows all frequencies through, but changes the phase
relationship between the various frequencies.
manufacturerData - Web APIs
the manufacturerdata read-only property of the bluetoothadvertisingdata interface returns a map that
relates company identifier codes to arraybuffers.
serviceData - Web APIs
the servicedata read-only property of the bluetoothadvertisingdata interface returns a map that
relates uuids to arraybuffers.
BluetoothDevice - Web APIs
<div id="interfacediagram" style="display: inline-block; position:
relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 ...
BroadcastChannel - Web APIs
<div id="interfacediagram" style="display: inline-block; position:
relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30"...
CDATASection - Web APIs
<div id="interfacediagram" style="display: inline-block; position:
relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12p...
CSSCounterStyleRule - Web APIs
inheritance this interface inherits from the following parent interfaces: <div id="interfacediagram" style="display: inline-block; position:
relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/cssrule" target="_top"><rect x="1" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="38.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">cssrule</text></a><polyline points="76,25 86,20...
CSSPseudoElement.element - Web APIs
examples the example below demonstrates the
relationship between csspseudoelement.element and element.pseudo(): const myelement = document.queryselector('q'); const csspseudoelement = myelement.pseudo('::after'); const originatingelement = csspseudoelement.element; console.log(myelement === originatingelement); // outputs true console.log(myelement.parentelement === originatingelement); // outputs false console.log(myelement.lastelementchild === csspseudoelement); ...
CSSPseudoElement.type - Web APIs
syntax var typeofpseudoelement = csspseudoelement.type; value a cssomstring containing one of the following values: "::before" "::after" "::marker" examples the example below demonstrates the
relationship between csspseudoelement.type and element.pseudo(): const myelement = document.queryselector('q'); const myselector = '::after'; const csspseudoelement = myelement.pseudo(myselector); const typeofpseudoelement = csspseudoelement.type; console.log(myselector === typeofpseudoelement); // outputs true specifications specification status comment css pseudo-elements level 4the definition of 'type' ...
CSSRule - Web APIs
the
relationships between these constants and the interfaces are: type value rule-specific interface comments and examples cssrule.style_rule 1 cssstylerule the most common kind of rule: selector { prop1: val1; prop2: val2; } cssrule.import_rule 3 cssimportrule an @import rule.
CSSStyleDeclaration - Web APIs
the cssstyledeclaration interface represents an object that is a css declaration block, and exposes style information and various style-
related methods and properties.
CSSValueList - Web APIs
<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/cssvalue" target="_top"><rect x="1" y="1" width="80" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="41" y="30" fon...
Managing screen orientation - Web APIs
nullam quis malesuada est.</p> css
relies on the orientation media query to handle specific styles based on the screen orientation /* first let's define some common styles */ html, body { width : 100%; height: 100%; } body { border: 1px solid black; -moz-box-sizing: border-box; box-sizing: border-box; } p { font : 1em sans-serif; margin : 0; padding: .5em; } ul { list-style: none; font : 1em monospace; ...
CSS Object Model (CSSOM) - Web APIs
elist cssstyledeclaration cssstylesheet cssstylerule csssupportsrule cssvariablesmap cssviewportrule elementcssinlinestyle fontface fontfaceset fontfacesetloadevent geometryutils getstyleutils linkstyle medialist mediaquerylist mediaquerylistevent mediaquerylistlistener screen stylesheet stylesheetlist transitionevent several other interfaces are also extended by the cssom-
related specifications: document, window, element, htmlelement, htmlimageelement, range, mouseevent, and svgelement.
CSS Painting API - Web APIs
the css painting api — part of the css houdini umb
rella of apis — allows developers to write javascript functions that can draw directly into an element's background, border, or content.
Using the CSS properties and values API - Web APIs
the css properties and values api — part of the css houdini umb
rella of apis — allows the registration of css custom properties, allowing for property type checking, default values, and properties that do or do not inherit their value.
CSS Properties and Values API - Web APIs
the css properties and values api — part of the css houdini umb
rella of apis — allows developers to explicitly define their css custom properties, allowing for property type checking, default values, and properties that do or do not inherit their value.
CSS Typed Object Model API - Web APIs
css typed object model api provides interfaces to interact with underlying values, by representing them with specialized js objects that can be manipulated and understood more easily and more
reliably than string parsing and concatenation.
Applying styles and colors - Web APIs
the position is a number between 0.0 and 1.0 and defines the
relative position of the color in the gradient, and the color argument must be a string representing a css <color>, indicating the color the gradient should reach at that offset into the transition.
Transformations - Web APIs
note how the call to fillrect() uses the same coordinates each time,
relying on translate() to adjust the drawing position.
CharacterData - Web APIs
<div id="interfacediagram" style="display: inline-block; position:
relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco...
Clients.claim() - Web APIs
example the following example uses claim() inside service worker's "activate" event listener so that clients loaded in the same scope do not need to be
reloaded before their fetches will go through this service worker.
Clipboard - Web APIs
clipboard availability the asynchronous clipboard api is a
relatively recent addition, and the process of implementing it in browsers is not yet complete.
ClipboardEvent() - Web APIs
the clipboardevent() constructor returns a newly created clipboardevent, representing an event providing information
related to modification of the clipboard, that is cut, copy, and paste events.
ClipboardEvent - Web APIs
the clipboardevent interface represents events providing information
related to modification of the clipboard, that is cut, copy, and paste events.
Clipboard API - Web APIs
the specification refers to this as the 'async clipboard api.' clipboardevent secure context represents events providing information
related to modification of the clipboard, that is cut, copy, and paste events.
Comment - Web APIs
<div id="interfacediagram" style="display: inline-block; position:
relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size...
CompositionEvent - Web APIs
<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/event" target="_top"><rect x="1" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="38.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">event</text></a><polyline points="76,25 86,20 86,30 76,25" stroke="#d4dde4" fill="none"/><line x1="...
Console.group() - Web APIs
using groups in the console requires gecko 9.0(firefox 9.0 / thunderbird 9.0 / seamonkey 2.6) you can use nested groups to help organize your output by visually associating
related messages.
Console.timeStamp() - Web APIs
this lets you cor
relate a point in your code with the other events recorded in the timeline, such as layout and paint events.
console - Web APIs
using groups in the console you can use nested groups to help organize your output by visually combining
related material.
ContentIndex.getAll() - Web APIs
ge = document.createelement('p'); message.innertext = 'you currently have no articles saved for offline reading.' readinglistelem.append(message); } else { // if entries are present, display in a list of links to the content const listelem = document.createelement('ul'); for (const entry of entries) { const listitem = document.createelement('li'); const ancho
relem = document.createelement('a'); ancho
relem.innertext = entry.title; ancho
relem.setattribute('href', entry.url); listelem.append(listitem); } readinglistelem.append(listelem); } } specifications specification status comment unknownthe definition of 'getall' in that specification.
ContentIndex - Web APIs
ge = document.createelement('p'); message.innertext = 'you currently have no articles saved for offline reading.' readinglistelem.append(message); } else { // if entries are present, display in a list of links to the content const listelem = document.createelement('ul'); for (const entry of entries) { const listitem = document.createelement('li'); const ancho
relem = document.createelement('a'); ancho
relem.innertext = entry.title; ancho
relem.setattribute('href', entry.url); listelem.append(listitem); } readinglistelem.append(listelem); } } unregistering indexed content below is an asynchronous function, that removes an item from the content index.
Content Index API - Web APIs
ge = document.createelement('p'); message.innertext = 'you currently have no articles saved for offline reading.' readinglistelem.append(message); } else { // if entries are present, display in a list of links to the content const listelem = document.createelement('ul'); for (const entry of entries) { const listitem = document.createelement('li'); const ancho
relem = document.createelement('a'); ancho
relem.innertext = entry.title; ancho
relem.setattribute('href', entry.url); listelem.append(listitem); } readinglistelem.append(listelem); } } unregistering indexed content below is an asynchronous function, that removes an item from the content index.
CustomElementRegistry.define() - Web APIs
if(this.hasattribute('img')) { imgurl = this.getattribute('img'); } else { imgurl = 'img/default.png'; } var img = document.createelement('img'); img.src = imgurl; icon.appendchild(img); // create some css to apply to the shadow dom var style = document.createelement('style'); style.textcontent = '.wrapper {' + 'position:
relative;' + '}' + '.info {' + 'font-size: 0.8rem;' + 'width: 200px;' + 'display: inline-block;' + 'border: 1px solid black;' + 'padding: 10px;' + 'background: white;' + ...
DOMImplementation - Web APIs
this function is un
reliable and kept for compatibility purpose alone: except for svg-
related queries, it always returns true.
DOMRect - Web APIs
<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/domrectreadonly" target="_top"><rect x="1" y="1" width="150" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="76" y=...
DOMTimeStamp - Web APIs
the domtimestamp type represents an absolute or
relative number of milliseconds, depending on the specification in which it appears.
DOMTokenList - Web APIs
such a set is returned by element.classlist, htmllinkelement.
rellist, htmlancho
relement.
rellist, htmlareaelement.
rellist, htmliframeelement.sandbox, or htmloutputelement.htmlfor.
DataTransfer.clearData() - Web APIs
html <span class="tweaked" id="source" draggable="true"> select this element, drag it to the drop zone and then
release the selection to move the element.
DataTransfer.dropEffect - Web APIs
html content <div> <p id="source" ondragstart="dragstart_handler(event);" draggable="true"> select this element, drag it to the drop zone and then
release the selection to move the element.
DataTransfer.setData() - Web APIs
(document.getelementbyid(data)); // clear the drag data cache (for all formats/types) ev.datatransfer.cleardata(); } </script> <body> <h1>examples of <code>datatransfer</code>: <code>setdata()</code>, <code>getdata()</code>, <code>cleardata()</code></h1> <div> <p id="source" ondragstart="dragstart_handler(event);" draggable="true"> select this element, drag it to the drop zone and then
release the selection to move the element.</p> </div> <div id="target" ondrop="drop_handler(event);" ondragover="dragover_handler(event);">drop zone</div> </body> </html> specifications specification status comment html living standardthe definition of 'setdata()' in that specification.
DataTransferItemList.DataTransferItem() - Web APIs
dropeffect to move ev.datatransfer.dropeffect = "move" } function dragend_handler(ev) { console.log("dragend"); var datalist = ev.datatransfer.items; // clear any remaining drag data datalist.clear(); } html <div> <p id="source" ondragstart="dragstart_handler(event);" ondragend="dragend_handler(event);" draggable="true"> select this element, drag it to the drop zone and then
release the selection to move the element.</p> </div> <div id="target" ondrop="drop_handler(event);" ondragover="dragover_handler(event);">drop zone</div> css div { margin: 0em; padding: 2em; } #source { color: blue; border: 1px solid black; } #target { border: 1px solid black; } result drag and drop demo link specifications specification status comment h...
DataTransferItemList.add() - Web APIs
html <div> <p id="source" ondragstart="dragstart_handler(event);" ondragend="dragend_handler(event);" draggable="true"> select this element, drag it to the drop zone and then
release the selection to move the element.</p> </div> <div id="target" ondrop="drop_handler(event);" ondragover="dragover_handler(event);">drop zone</div> css div { margin: 0em; padding: 2em; } #source { color: blue; border: 1px solid black; } #target { border: 1px solid black; } javascript function dragstart_handler(ev) { console.log("dragstart"); // add this element's id to the dr...
DataTransferItemList.clear() - Web APIs
html <div> <p id="source" ondragstart="dragstart_handler(event);" ondragend="dragend_handler(event);" draggable="true"> select this element, drag it to the drop zone and then
release the selection to move the element.</p> </div> <div id="target" ondrop="drop_handler(event);" ondragover="dragover_handler(event);">drop zone</div> css div { margin: 0em; padding: 2em; } #source { color: blue; border: 1px solid black; } #target { border: 1px solid black; } javascript function dragstart_handler(ev) { console.log("dragstart"); // add thi...
DataTransferItemList.length - Web APIs
dropeffect to move ev.datatransfer.dropeffect = "move" } function dragend_handler(ev) { console.log("dragend"); var datalist = ev.datatransfer.items; // clear any remaining drag data datalist.clear(); } html <div> <p id="source" ondragstart="dragstart_handler(event);" ondragend="dragend_handler(event);" draggable="true"> select this element, drag it to the drop zone and then
release the selection to move the element.</p> </div> <div id="target" ondrop="drop_handler(event);" ondragover="dragover_handler(event);">drop zone</div> css div { margin: 0em; padding: 2em; } #source { color: blue; border: 1px solid black; } #target { border: 1px solid black; } result drag and drop demo link specifications specification status comment h...
DataTransferItemList.remove() - Web APIs
for (var i = 0; i < datalist.length; i++) { datalist.remove(i); } // clear any remaining drag data datalist.clear(); } html <h1>example uses of <code>datatransferitemlist</code> methods and property</h1> <div> <p id="source" ondragstart="dragstart_handler(event);" ondragend="dragend_handler(event);" draggable="true"> select this element, drag it to the drop zone and then
release the selection to move the element.</p> </div> <div id="target" ondrop="drop_handler(event);" ondragover="dragover_handler(event);">drop zone</div> css div { margin: 0em; padding: 2em; } #source { color: blue; border: 1px solid black; } #target { border: 1px solid black; } specifications specification status comment html living...
Document.characterSet - Web APIs
(a character encoding is a set of characters and how to interpret bytes into those characters.) a “character set” and a “character encoding” are
related, but different.
DocumentType - Web APIs
<div id="interfacediagram" style="display: inline-block; position:
relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x...
Events and the DOM - Web APIs
the event interface itself is described, as well as the interfaces for event registration on nodes in the dom, and event listeners, and several longer examples that show how the various event interfaces
relate to one another.
DragEvent - Web APIs
dragend this event is fired when a drag operation is being ended (by
releasing a mouse button or hitting the escape key).
DynamicsCompressorNode.attack - Web APIs
into it var source = audioctx.createmediaelementsource(myaudio); // create a compressor node var compressor = audioctx.createdynamicscompressor(); compressor.threshold.setvalueattime(-50, audioctx.currenttime); compressor.knee.setvalueattime(40, audioctx.currenttime); compressor.ratio.setvalueattime(12, audioctx.currenttime); compressor.attack.setvalueattime(0, audioctx.currenttime); compressor.
release.setvalueattime(0.25, audioctx.currenttime); // connect the audiobuffersourcenode to the destination source.connect(audioctx.destination); button.onclick = function() { var active = button.getattribute('data-active'); if(active == 'false') { button.setattribute('data-active', 'true'); button.innerhtml = 'remove compression'; source.disconnect(audioctx.destination); sourc...
DynamicsCompressorNode.knee - Web APIs
into it var source = audioctx.createmediaelementsource(myaudio); // create a compressor node var compressor = audioctx.createdynamicscompressor(); compressor.threshold.setvalueattime(-50, audioctx.currenttime); compressor.knee.setvalueattime(40, audioctx.currenttime); compressor.ratio.setvalueattime(12, audioctx.currenttime); compressor.attack.setvalueattime(0, audioctx.currenttime); compressor.
release.setvalueattime(0.25, audioctx.currenttime); // connect the audiobuffersourcenode to the destination source.connect(audioctx.destination); button.onclick = function() { var active = button.getattribute('data-active'); if(active == 'false') { button.setattribute('data-active', 'true'); button.innerhtml = 'remove compression'; source.disconnect(audioctx.destination); sourc...
DynamicsCompressorNode.ratio - Web APIs
into it var source = audioctx.createmediaelementsource(myaudio); // create a compressor node var compressor = audioctx.createdynamicscompressor(); compressor.threshold.setvalueattime(-50, audioctx.currenttime); compressor.knee.setvalueattime(40, audioctx.currenttime); compressor.ratio.setvalueattime(12, audioctx.currenttime); compressor.attack.setvalueattime(0, audioctx.currenttime); compressor.
release.setvalueattime(0.25, audioctx.currenttime); // connect the audiobuffersourcenode to the destination source.connect(audioctx.destination); button.onclick = function() { var active = button.getattribute('data-active'); if(active == 'false') { button.setattribute('data-active', 'true'); button.innerhtml = 'remove compression'; source.disconnect(audioctx.destination); sourc...
DynamicsCompressorNode.threshold - Web APIs
into it var source = audioctx.createmediaelementsource(myaudio); // create a compressor node var compressor = audioctx.createdynamicscompressor(); compressor.threshold.setvalueattime(-50, audioctx.currenttime); compressor.knee.setvalueattime(40, audioctx.currenttime); compressor.ratio.setvalueattime(12, audioctx.currenttime); compressor.attack.setvalueattime(0, audioctx.currenttime); compressor.
release.setvalueattime(0.25, audioctx.currenttime); // connect the audiobuffersourcenode to the destination source.connect(audioctx.destination); button.onclick = function() { var active = button.getattribute('data-active'); if(active == 'false') { button.setattribute('data-active', 'true'); button.innerhtml = 'remove compression'; source.disconnect(audioctx.destination); sourc...
EffectTiming.duration - Web APIs
exceptions typeerror the specified value is either a string other than "auto", a number less than zero, nan, or some other type of object enti
rely.
Element: auxclick event - Web APIs
the auxclick event is fired at an element when a non-primary pointing device button (any mouse button other than the primary—usually leftmost—button) has been pressed and
released both within the same element.
Element.insertAdjacentHTML() - Web APIs
syntax element.insertadjacenthtml(position, text); parameters position a domstring representing the position
relative to the element; must be one of the following strings: 'beforebegin': before the element itself.
Element: keydown event - Web APIs
to ignore all keydown events that are part of composition, do something like this (229 is a special value set for a keycode
relating to an event that has been processed by an ime): eventtarget.addeventlistener("keydown", event => { if (event.iscomposing || event.keycode === 229) { return; } // do something }); examples addeventlistener keydown example this example logs the keyboardevent.code value whenever you press down a key inside the <input> element.
Element: mousedown event - Web APIs
note: this differs from the click event in that click is fired after a full click action occurs; that is, the mouse button is pressed and
released while the pointer remains inside the same element.
Element: mouseup event - Web APIs
the mouseup event is fired at an element when a button on a pointing device (such as a mouse or trackpad) is
released while the pointer is located inside it.
Element.setCapture() - Web APIs
call this method during the handling of a mousedown event to retarget all mouse events to this element until the mouse button is
released or document.
releasecapture() is called.
Event - Web APIs
deviceproximityevent domtransactionevent dragevent editingbeforeinputevent errorevent fetchevent focusevent gamepadevent hashchangeevent idbversionchangeevent inputevent keyboardevent mediastreamevent messageevent mouseevent mutationevent offlineaudiocompletionevent overconstrainederror pagetransitionevent paymentrequestupdateevent pointerevent popstateevent progressevent
relatedevent rtcdatachannelevent rtcidentityerrorevent rtcidentityevent rtcpeerconnectioniceevent sensorevent storageevent svgevent svgzoomevent timeevent touchevent trackevent transitionevent uievent userproximityevent webglcontextevent wheelevent constructor event() creates an event object, returning it to the caller.
EventTarget.removeEventListener() - Web APIs
removeeventlistener("mousedown", handlemousedown, { capture: true }); // fails element.removeeventlistener("mousedown", handlemousedown, { passive: false }); // succeeds element.removeeventlistener("mousedown", handlemousedown, false); // succeeds element.removeeventlistener("mousedown", handlemousedown, true); // fails it's worth noting that some browser
releases have been inconsistent on this, and unless you have specific reasons otherwise, it's probably wise to use the same values used for the call to addeventlistener() when calling removeeventlistener().
EventTarget - Web APIs
<div id="interfacediagram" style="display: inline-block; position:
relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="...
FetchEvent - Web APIs
fetchevent.p
reloadresponse read only a promise for a response, or undefined if this fetch is not a navigation, or navigation p
reload is not enabled.
FileError - Web APIs
error codes note: do not
rely on the numeric values of the constants, which might change as the specifications continue to change.
FileException - Web APIs
constants note: do not
rely on the numeric values of the constants, which might change as the specifications continue to change.
FileSystemEntry - Web APIs
fullpath read only a usvstring object which provides the full, absolute path from the file system's root to the entry; it can also be thought of as a path which is
relative to the root directory, prepended with a "/" character.
File and Directory Entries API support in Firefox - Web APIs
chrome deviations from the specification the largest compatibility issue still remaining is that chrome is still using older names for many of the interfaces in the api, since they implemented a
related but different specification: name in specification name in google chrome filesystemdirectoryentry directoryentry filesystemdirectoryentrysync directoryentrysync filesystemdirectoryreader directoryreader filesystemdirectoryreadersync directoryreadersync filesystementry entry filesystementrysync entrysync ...
Force Touch events - Web APIs
event properties the following property is known to be available on the webkitmouseforcewillbegin, mousedown, webkitmouseforcechanged, webkitmouseforcedown, webkitmouseforceup, mousemove, and mouseup event objects: mouseevent.webkitforce read only the amount of pressure currently being applied to the trackpad/touchscreen constants these constants are useful for determining the
relative intensity of the pressure indicated by mouseevent.webkitforce: mouseevent.webkit_force_at_mouse_down read only minimum force necessary for a normal click mouseevent.webkit_force_at_force_mouse_down read only minimum force necessary for a force click specifications not part of any specification.
Using the Frame Timing API - Web APIs
this data, along with the waterfall data, gives an indication of where a site might be having frame
related performance problems (for example, by cor
relating the recording's minimum rates with their respective waterfall events).
GeolocationCoordinates - Web APIs
geolocationcoordinates.altitude read only secure context returns a double representing the position's altitude in meters,
relative to sea level.
GlobalEventHandlers.ondrag - Web APIs
er_handler(ev) { console.log("dragover"); ev.preventdefault(); } </script> <body> <h1>examples of <code>ondrag</code>, <code>ondrop</code>, <code>ondragstart</code>, <code>ondragover</code></h1> <div> <!-- <div class="source"> --> <p id="source" ondrag="drag_handler(event);" ondragstart="dragstart_handler(event);" draggable="true"> select this element, drag it to the drop zone and then
release the selection to move the element.</p> </div> <div id="target" ondrop="drop_handler(event);" ondragover="dragover_handler(event);">drop zone</div> </body> </html> specifications specification status comment html living standardthe definition of 'ondrag' in that specification.
GlobalEventHandlers.ondragend - Web APIs
ndragleave = dragleave_handler; el.ondragend = dragend_handler; el.ondragexit = dragexit_handler; } </script> <body onload="init();"> <h1>examples of <code>ondragenter</code>, <code>ondragleave</code>, <code>ondragend</code>, <code>ondragexit</code></h1> <div> <p id="source" ondragstart="dragstart_handler(event);" draggable="true"> select this element, drag it to the drop zone and then
release the selection to move the element.</p> </div> <div id="target" ondrop="drop_handler(event);" ondragover="dragover_handler(event);">drop zone</div> </body> </html> specifications specification status comment html living standardthe definition of 'ondragend' in that specification.
GlobalEventHandlers.ondragenter - Web APIs
ndragleave = dragleave_handler; el.ondragend = dragend_handler; el.ondragexit = dragexit_handler; } </script> <body onload="init();"> <h1>examples of <code>ondragenter</code>, <code>ondragleave</code>, <code>ondragend</code>, <code>ondragexit</code></h1> <div> <p id="source" ondragstart="dragstart_handler(event);" draggable="true"> select this element, drag it to the drop zone and then
release the selection to move the element.</p> </div> <div id="target" ondrop="drop_handler(event);" ondragover="dragover_handler(event);">drop zone</div> </body> </html> specifications specification status comment html living standardthe definition of 'ondragenter' in that specification.
GlobalEventHandlers.ondragexit - Web APIs
ndragleave = dragleave_handler; el.ondragend = dragend_handler; el.ondragexit = dragexit_handler; } </script> <body onload="init();"> <h1>examples of <code>ondragenter</code>, <code>ondragleave</code>, <code>ondragend</code>, <code>ondragexit</code></h1> <div> <p id="source" ondragstart="dragstart_handler(event);" draggable="true"> select this element, drag it to the drop zone and then
release the selection to move the element.</p> </div> <div id="target" ondrop="drop_handler(event);" ondragover="dragover_handler(event);">drop zone</div> </body> </html> specifications specification status comment html living standardthe definition of 'ondragexit' in that specification.
GlobalEventHandlers.ondragleave - Web APIs
ndragleave = dragleave_handler; el.ondragend = dragend_handler; el.ondragexit = dragexit_handler; } </script> <body onload="init();"> <h1>examples of <code>ondragenter</code>, <code>ondragleave</code>, <code>ondragend</code>, <code>ondragexit</code></h1> <div> <p id="source" ondragstart="dragstart_handler(event);" draggable="true"> select this element, drag it to the drop zone and then
release the selection to move the element.</p> </div> <div id="target" ondrop="drop_handler(event);" ondragover="dragover_handler(event);">drop zone</div> </body> </html> specifications specification status comment html living standardthe definition of 'ondragleave' in that specification.
GlobalEventHandlers.ondragover - Web APIs
yid(data)); } function dragover_handler(ev) { console.log("dragover"); ev.preventdefault(); } </script> <body> <h1>examples of <code>ondrag</code>, <code>ondrop</code>, <code>ondragstart</code>, <code>ondragover</code></h1> <div> <p id="source" ondrag="drag_handler(event);" ondragstart="dragstart_handler(event);" draggable="true"> select this element, drag it to the drop zone and then
release the selection to move the element.</p> </div> <div id="target" ondrop="drop_handler(event);" ondragover="dragover_handler(event);">drop zone</div> </body> </html> specifications specification status comment html living standardthe definition of 'ondragover' in that specification.
GlobalEventHandlers.ondragstart - Web APIs
yid(data)); } function dragover_handler(ev) { console.log("dragover"); ev.preventdefault(); } </script> <body> <h1>examples of <code>ondrag</code>, <code>ondrop</code>, <code>ondragstart</code>, <code>ondragover</code></h1> <div> <p id="source" ondrag="drag_handler(event);" ondragstart="dragstart_handler(event);" draggable="true"> select this element, drag it to the drop zone and then
release the selection to move the element.</p> </div> <div id="target" ondrop="drop_handler(event);" ondragover="dragover_handler(event);">drop zone</div> </body> </html> specifications specification status comment html living standardthe definition of 'ondragstart' in that specification.
GlobalEventHandlers.ondrop - Web APIs
function dragover_handler(ev) { console.log("dragover"); ev.preventdefault(); } </script> <body> <h1>examples of <code>ondrag</code>, <code>ondrop</code>, <code>ondragstart</code>, <code>ondragover</code></h1> <div class="source"> <p id="source" ondrag="drag_handler(event);" ondragstart="dragstart_handler(event);" draggable="true"> select this element, drag it to the drop zone and then
release the selection to move the element.</p> </div> <div id="target" ondrop="drop_handler(event);" ondragover="dragover_handler(event);">drop zone</div> </body> </html> specifications specification status comment html living standardthe definition of 'ondrop' in that specification.
GlobalEventHandlers.onemptied - Web APIs
the emptied event is fired when the media has become empty; for example, this event is sent if the media has already been loaded (or partially loaded), and the load() method is called to
reload it.
GlobalEventHandlers.onpointerdown - Web APIs
we also have a handler for pointerup events: targetbox.onpointerup = handleup; function handleup(evt) { targetbox.innerhtml = "tap me, click me, or touch me!"; evt.preventdefault(); } this code's job is to just restore the original text into the target box after the user's interaction with the element ends (for example, when they
release the mouse button, or when they lift the stylus or finger from the screen).
Audio() - Web APIs
return value a new htmlaudioelement object, configured to be used for playing back the audio from the file specified by url.the new object's p
reload property is set to auto and its src property is set to the specified url or null if no url is given.
HTMLCanvasElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position:
relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor=...
HTMLCollection - Web APIs
currently htmlcollections does not recognize pu
rely numeric ids, which would cause conflict with the array-style access, though html5 does permit these.
HTMLDListElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position:
relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">even...
HTMLDataElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position:
relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polylin...
HTMLDataListElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position:
relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtar...
HTMLDetailsElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position:
relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/htmldetailselement" target="_top"><rect x="1" y="1" width="180" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="91" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmldetailsele...
HTMLDialogElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position:
relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/htmldialogelement" target="_top"><rect x="1" y="1" width="170" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="86" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmldialogelement</text></a></svg></div>...
HTMLDivElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position:
relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline ...
HTMLDocument - Web APIs
<div id="interfacediagram" style="display: inline-block; position:
relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baselin...
HTMLElement.hidden - Web APIs
appropriate use cases for hidden include: content that isn't yet
relevant but may be needed later content that was previously needed but is not any longer content that is reused by other parts of the page in a template-like fashion creating an offscreen canvas as a drawing buffer inappropriate use cases include: hiding panels in a tabbed dialog box hiding content in one presentation while intending it to be visible in others elements that are not hidde...
HTMLEmbedElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position:
relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12p...
HTMLFontElement - Web APIs
htmlfontelement.size is a domstring that reflects the size html attribute, containing either a font size number ranging from 1 to 7 or a
relative size to the size attribute of the <basefont> element, for example -2 or +1.
HTMLFormControlsCollection - Web APIs
<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/htmlcollection" target="_top"><rect x="1" y="1" width="140" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="71" y="30" fon...
HTMLFormElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position:
relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget<...
HTMLHeadElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position:
relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</tex...
HTMLHeadingElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position:
relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline poi...
HTMLHtmlElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position:
relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,mona...
HTMLIFrameElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position:
relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignm...
HTMLImageElement.complete - Web APIs
while ideally this command wouldn't even be executed if the image hasn't fully loaded, for improved
reliability you want to check to ensure this is the case.
HTMLImageElement.srcset - Web APIs
if you happen to have both standard and high density displays, try moving this window between them and
reloading the page to see the results change.
HTMLLIElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position:
relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle...
HTMLLabelElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position:
relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 ...
HTMLMapElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position:
relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="...
HTMLMarqueeElement - Web APIs
<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/htmlmarqueeelement" target="_top"><rect x="1" y="1" width="180" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="91" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlmarqueeelement</text></a>...
HTMLMediaElement: emptied event - Web APIs
the emptied event is fired when the media has become empty; for example, this event is sent if the media has already been loaded (or partially loaded), and the load() method is called to
reload it.
HTMLMediaElement: loadstart event - Web APIs
ull; function handleevent(event) { eventlog.textcontent = eventlog.textcontent + `${event.type}\n`; } video.addeventlistener('loadstart', handleevent); video.addeventlistener('progress', handleevent); video.addeventlistener('canplay', handleevent); video.addeventlistener('canplaythrough', handleevent); loadvideo.addeventlistener('click', () => { if (source) { document.location.
reload(); } else { loadvideo.textcontent = "reset example"; source = document.createelement('source'); source.setattribute('src', 'https://interactive-examples.mdn.mozilla.net/media/examples/flower.webm'); source.setattribute('type', 'video/webm'); video.appendchild(source); } }); result specifications specification status ...
HTMLMediaElement.networkState - Web APIs
<audio id="example" p
reload="auto"> <source src="sound.ogg" type="audio/ogg" /> </audio> var obj = document.getelementbyid('example'); obj.addeventlistener('playing', function() { if (obj.networkstate === 2) { // still loading...
HTMLMediaElement.onencrypted - Web APIs
<div id="interfacediagram" style="display: inline-block; position:
relative; width: 100%; padding-bottom: 8.571428571428571%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-20 0 700 60" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-base...
HTMLMediaElement.onwaitingforkey - Web APIs
<div id="interfacediagram" style="display: inline-block; position:
relative; width: 100%; padding-bottom: 8.571428571428571%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-20 0 700 60" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" te...
HTMLMediaElement: progress event - Web APIs
ull; function handleevent(event) { eventlog.textcontent = eventlog.textcontent + `${event.type}\n`; } video.addeventlistener('loadstart', handleevent); video.addeventlistener('progress', handleevent); video.addeventlistener('canplay', handleevent); video.addeventlistener('canplaythrough', handleevent); loadvideo.addeventlistener('click', () => { if (source) { document.location.
reload(); } else { loadvideo.textcontent = "reset example"; source = document.createelement('source'); source.setattribute('src', 'https://interactive-examples.mdn.mozilla.net/media/examples/flower.webm'); source.setattribute('type', 'video/webm'); video.appendchild(source); } }); result specifications specification status htm...
HTMLMediaElement.readyState - Web APIs
<audio id="example" p
reload="auto"> <source src="sound.ogg" type="audio/ogg" /> </audio> var obj = document.getelementbyid('example'); obj.addeventlistener('loadeddata', function() { if(obj.readystate >= 2) { obj.play(); } }); specifications specification status comment html living standardthe definition of 'htmlmediaelement.readystate' in that specification.
HTMLMenuElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position:
relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarge...
HTMLMenuItemElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position:
relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">ev...
HTMLMetaElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position:
relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,...
HTMLOListElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position:
relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="mid...
HTMLOptGroupElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position:
relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="mid...
HTMLOptionElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position:
relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="...
HTMLOptionsCollection - Web APIs
<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/htmlcollection" target="_top"><rect x="1" y="1" width="140" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="71" y="30" font-size="12px" font-family="consolas...
HTMLElement.focus() - Web APIs
obsolete notes if you call htmlelement.focus() from a mousedown event handler, you must call event.preventdefault() to keep the focus from leaving the htmlelement behaviour of the focus in
relation to different html features like tabindex or shadow dom, which previously remained under-specified, were recently updated (as october of 2019).
HTMLOutputElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position:
relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline poi...
HTMLParagraphElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position:
relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline ...
HTMLParamElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position:
relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill=...
HTMLPictureElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position:
relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" str...
HTMLPreElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position:
relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-base...
HTMLProgressElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position:
relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignme...
HTMLQuoteElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position:
relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-ancho...
HTMLScriptElement.referrerPolicy - Web APIs
syntax refstr = scriptelem.referrerpolicy; scriptelem.referrerpolicy = refstr; value a domstring; one of the following: no-referrer the referer header will be omitted enti
rely.
HTMLSelectElement.autofocus - Web APIs
setting this property doesn't set the focus to the associated <select> element: it me
rely tells the browser to focus to it when the element is inserted in the document.
HTMLSelectElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position:
relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><pol...
HTMLShadowElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position:
relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x...
HTMLSourceElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position:
relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text><...
HTMLSpanElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position:
relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111...
HTMLStyleElement.media - Web APIs
example <!doctype html> <html> <head> <link id="linkedstyle"
rel="stylesheet" href="document.css" type="text/css" media="screen" /> <style id="inlinestyle"
rel="stylesheet" type="text/css" media="screen, print"> p { color: blue; } </style> </head> <body> <script> alert('linkedstyle: ' + document.getelementbyid('linkedstyle').media); // 'screen' alert('inlinestyle: ' + document.getelementbyid('inlinestyle').media); // 'screen, print' </script> </body> </html> specifications specification status comment html living stand...
HTMLStyleElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position:
relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12p...
HTMLTableCaptionElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position:
relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</...
HTMLTableCellElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position:
relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,...
HTMLTableColElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position:
relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</...
HTMLTableElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position:
relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="midd...
HTMLTableRowElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position:
relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-bas...
HTMLTableSectionElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position:
relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fil...
HTMLTemplateElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position:
relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="...
HTMLTextAreaElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position:
relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 1...
HTMLTimeElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position:
relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polylin...
HTMLTitleElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position:
relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 ...
HTMLTrackElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position:
relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alig...
HTMLUListElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position:
relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="m...
HTMLUnknownElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position:
relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline p...
HTMLVideoElement.getVideoPlaybackQuality() - Web APIs
this value includes any dropped or corrupted frames, so it's not the same as "total number of frames played." var videoelem = document.getelementbyid("my_vid"); var counte
relem = document.getelementbyid("counter"); var quality = videoelem.getvideoplaybackquality(); counte
relem.innertext = quality.totalvideoframes; specifications specification status comment media playback qualitythe definition of 'htmlvideoelement.getvideoplaybackquality()' in that specification.
Dragging and Dropping Multiple Items - Web APIs
event.datatransfer.mozcleardataat("text/plain", 1); caution: removing the last format for a particular index will remove that item enti
rely, shifting the remaining items down, so the later items will have different indices.
Recommended Drag Types - Web APIs
atransferable.gettransferdata('application/x-moz-file-promise-dir', dirprimitive, datasize); var dir = dirprimitive.value.queryinterface(components.interfaces.nsilocalfile); console.log("target folder is = " + dir.path); var file = cc['@mozilla.org/file/local;1'].createinstance(components.interfaces.nsilocalfile); file.initwithpath(dir.path); file.append
relativepath(name); console.log("output final path is =" + file.path); // now you can write or copy the file yourself… } } } see also html drag and drop api (overview) drag operations dragging and dropping multiple items html5 living standard: drag and drop ...
HashChangeEvent - Web APIs
<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/event" target="_top"><rect x="1" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="38.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middl...
Ajax navigation example - Web APIs
href="first_page.php">first example</a> | <a class="ajax-nav" href="second_page.php">second example</a> | <a class="ajax-nav" href="third_page.php">third example</a> | <a class="ajax-nav" href="unexisting.php">unexisting page</a> ] </p> include/header.php: <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <script type="text/javascript" src="js/ajax_nav.js"></script> <link
rel="stylesheet" href="css/style.css" /> js/ajax_nav.js: "use strict"; const ajaxrequest = new (function () { function closereq () { oloadingbox.parentnode && document.body.removechild(oloadingbox); bisloading = false; } function abortreq () { if (!bisloading) { return; } oreq.abort(); closereq(); } function ajaxerror () { al...
IDBCursor.continuePrimaryKey() - Web APIs
0; let unreadlist = []; request.onsuccess = (event) => { let cursor = event.target.result; if (!cursor) { return; } let lastprimarykey = getlastiteratedarticleid(); if (lastprimarykey > cursor.primarykey) { cursor.continueprimarykey("javascript", lastprimarykey); return; } // update lastiteratedarticleid setlastiteratedarticleid(cursor.primarykey); // p
reload 5 articles into the unread list; unreadlist.push(cursor.value); if (++count < 5) { cursor.continue(); } }; specifications specification status comment indexed database api draftthe definition of 'continueprimarykey()' in that specification.
IDBCursor.delete() - Web APIs
syntax myidbcursor.delete(); returns an idbrequest object on which subsequent events
related to this operation are fired.
IDBOpenDBRequest - Web APIs
<div id="interfacediagram" style="display: inline-block; position:
relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,...
IDBRequest - Web APIs
<div id="interfacediagram" style="display: inline-block; position:
relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30"...
IDBTransaction.oncomplete - Web APIs
as of firefox 40, indexeddb transactions have
relaxed durability guarantees to increase performance (see bug 1112702), which is the same behaviour as other indexeddb-supporting browsers.
InputDeviceCapabilities - Web APIs
the inputdevicecapabilities interface of the input device capabilities api provides information about the physical device or a group of
related devices responsible for generating input events.
InputEvent - Web APIs
<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/event" target="_top"><rect x="1" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="38.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">event</text></a><polyline points="76,25 86,20 86,30 76,25" stroke="#d4dde4" fill="none"/><line x1="86"...
install - Web APIs
returns install returns true if the function succeeded and false if it did not, but these values are not always
reliable as a determinant of the success of the operation.
installChrome - Web APIs
url url is a string containing a full or
relative url to download name name is displayed in the dialog, but is also used to *select* the theme somust match exactly the name in the internal manifest.rdf file.
IntersectionObserverEntry.time - Web APIs
the intersectionobserverentry interface's read-only time property is a domhighrestimestamp that indicates the time at which the intersection change occurred
relative to the time at which the document was created.
IntersectionObserverEntry - Web APIs
intersectionobserverentry.time read only a domhighrestimestamp indicating the time at which the intersection was recorded,
relative to the intersectionobserver's time origin.
KeyboardEvent.code - Web APIs
most real games would watch for keydown events, start motion when that happens, and stop the motion when the corresponding keyup occurs, instead of
relying on key repeats.
Location: assign() - Web APIs
example // navigate to the location.
reload article window.location.assign('/docs/web/api/location/
reload'); specifications specification status comment html living standardthe definition of 'location.assign()' in that specification.
Location: replace() - Web APIs
examples // navigate to the location.
reload article by replacing this page window.location.replace('/docs/web/api/location.
reload'); specifications specification status comment html living standardthe definition of 'location.replace()' in that specification.
LockedFile.abort() - Web APIs
summary the abort method is used to
release the lock on the lockedfile object, making it inactive: its active property is set to false and all ongoing operations are canceled.
MediaDeviceInfo.groupId - Web APIs
syntax var groupid = mediadeviceinfo.groupid; value a domstring which uniquely identifies the group of
related devices to which this device belongs.
close() - Web APIs
the mediakeysession.close() method notifies that the current media session is no longer needed, and that the content decryption module should
release any resources associated with this object and close it.
MediaKeySession.onkeystatuseschange - Web APIs
<div id="interfacediagram" style="display: inline-block; position:
relative; width: 100%; padding-bottom: 8.571428571428571%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-20 0 700 60" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,m...
MediaKeySession.onmessage - Web APIs
<div id="interfacediagram" style="display: inline-block; position:
relative; width: 100%; padding-bottom: 8.571428571428571%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-20 0 700 60" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t...
MediaKeySession - Web APIs
methods mediakeysession.close() returns a promise after notifying the current media session is no longer needed and that the cdm should
release any resources associated with this object and close it.
MediaPositionState.playbackRate - Web APIs
syntax let positionstate = { playbackrate: rate }; let playbackrate = positionstate.playbackrate; value a floating-point value specifying a multiplier corresponding to the current
relative rate at which the media being performed is playing.
MediaPositionState - Web APIs
playbackrate a floating-point value indicating the rate at which the media is being played, as a ratio
relative to its normal playback speed.
MediaStreamTrackEvent - Web APIs
<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/event" target="_top"><rect x="1" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="38.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" tex...
MediaTrackConstraints.logicalSurface - Web APIs
for example, if your app needs to know if the selected display surface is a logical one: let islogicalsurface = displaystream.getvideotracks()[0].getsettings().logicalsurface; following this code, islogicalsurface is true if the display surface contained in the stream is a logical surface; that is, one which may not be enti
rely onscreen, or may even be enti
rely offscreen.
MediaTrackSettings.logicalSurface - Web APIs
logical surfaces are those which are not necessarily enti
rely onscreen, or may even be off-screen, such as windows' backing buffers (where only part of the buffer is visible without scrolling the containing window) and offscreen rendering contexts.
MediaTrackSupportedConstraints.logicalSurface - Web APIs
it adds the logicalsurface constraint (requesting that only logical display surfaces—those which may not be enti
rely visible onscreen—be included among the options available to the user) only if it is known to be supported by the browser.
MouseEvent.buttons - Web APIs
the mouseevent.buttons property indicates the state of buttons pressed during any kind of mouse event, while the mouseevent.button property only guarantees the correct value for mouse events caused by pressing or
releasing one or multiple buttons.
MouseEvent.pageY - Web APIs
the pagey read-only property of the mouseevent interface returns the y (vertical) coordinate in pixels of the event
relative to the whole document.
MouseScrollEvent - Web APIs
method overview void initmousescrollevent(in domstring typearg, in boolean canbubblearg, in boolean cancelablearg, in nsidomabstractview viewarg, in long detailarg, in long screenxarg, in long screenyarg, in long clientxarg, in long clientyarg, in boolean ctrlkeyarg, in boolean altkeyarg, in boolean shiftkeyarg, in boolean metakeyarg, in unsigned short buttonarg, in nsidomeventtarget
relatedtargetarg, in long axis); attributes attribute type description axis read only long indicates scroll direction.
msPlayToPreferredSourceUri - Web APIs
catalogid=1234" /> var video = document.createelement('video'); document.body.appendchild(video); video.src = "http://www.contoso.com/videos/video.mp4"; video.msplaytopreferredsourceuri = "http://www.contoso.com/catalogid=1234"; see also microsoft playready content access and protection technology is a set of technologies that can be used to distribute audio/video content more secu
rely over a network, and help prevent the unauthorized use of this content.
msRealTime - Web APIs
low-latency playback is useful in communication and some gaming scenarios, but is more demanding on power consumption and less
reliable for smooth media playback.
MutationObserver.disconnect() - Web APIs
usage notes if the element being observed is removed from the dom, and then subsequently
released by the browser's garbage collection mechanism, the mutationobserver is likewise deleted.
Navigation Timing API - Web APIs
unlike javascript-based libraries that have historically been used to collect similar information, the navigation timing api can be much more accurate and
reliable.
performance.mark() - Web APIs
performance.mark("squir
rel"); performance.mark("squir
rel"); performance.mark("monkey"); performance.mark("monkey"); performance.mark("dog"); performance.mark("dog"); // get all of the performancemark entries.
Performance.timing - Web APIs
the legacy performance.timing read-only property returns a performancetiming object containing latency-
related performance information.
PerformanceFrameTiming - Web APIs
<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/performanceframetiming" target="_top"><rect x="1" y="1" width="220" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text ...
PerformanceLongTaskTiming - Web APIs
<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/performanceentry" target="_top"><rect x="1" y="1" width="160" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="81" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">performanceentry</text></a><polyline points="161,25 171,20 171,30 161,25" stroke="#d...
PerformanceMark - Web APIs
<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/performanceentry" target="_top"><rect x="1" y="1" width="160" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="81" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill=...
PerformanceMeasure - Web APIs
<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/performanceentry" target="_top"><rect x="1" y="1" width="160" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="81" y="30" font-size="12px" font-family="consolas,monac...
PerformancePaintTiming - Web APIs
<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/performanceentry" target="_top"><rect x="1" y="1" width="160" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="81" y...
PerformanceResourceTiming - Web APIs
<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/performanceentry" target="_top"><rect x="1" y="1" width="160" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="81" y...
Permissions.query() - Web APIs
by the user, in the
relevant permissions dialog), navigator.permissions.query() will return true for both notifications and push.
Permissions.revoke() - Web APIs
by the user, in the
relevant permissions dialog), navigator.permissions.query() will return true for both notifications and push.
Using the Permissions API - Web APIs
most of the code is simple and unremarkable — below we'll just be walking through the permissions api-
related code, so check the code yourself if you want to study any of the other parts.
Permissions API - Web APIs
once you have this object you can then perform permission-
related tasks, for example querying a permission using the permissions.query() method to return a promise that resolves with the permissionstatus for a specific api.
PluginArray - Web APIs
pluginarray.refresh refreshes all plugins on the current page, optionally
reloading documents.
Point - Web APIs
although it is not directly
related to this defunct interface, you are probably looking for dompoint, which is part of the geometry interfaces module level 1 specification.
PointerEvent.tangentialPressure - Web APIs
the tangentialpressure read-only property of the pointerevent interface represents the normalized tangential pressure of the pointer input (also known as bar
rel pressure or cylinder stress).
ProcessingInstruction - Web APIs
<div id="interfacediagram" style="display: inline-block; position:
relative; width: 100%; padding-bottom: 10%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 700 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px...
ProgressEvent - Web APIs
<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/event" target="_top"><rect x="1" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="38.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middl...
PromiseRejectionEvent - Web APIs
<div id="interfacediagram" style="display: inline-block; position:
relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/event" target="_top"><rect x="1" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="38.5" y="30" font-size="12px" font-family="consolas,monac...
PushEvent.PushEvent() - Web APIs
full support 17firefox full support 44notes full support 44notes notes extended support
releases (esr) before firefox 78 esr do not support service workers and the push api.ie no support noopera full support 37safari no support nowebview android no support nochrome android full support ...
PushEvent.data - Web APIs
full support 17firefox full support 44notes full support 44notes notes extended support
releases (esr) before firefox 78 esr do not support service workers and the push api.ie no support noopera full support 44safari no support nowebview android no support nochrome android full support ...
PushManager.hasPermission() - Web APIs
full support 17firefox full support 44notes full support 44notes notes extended support
releases (esr) before firefox 78 esr do not support service workers and the push api.ie no support noopera full support 29safari no support nowebview android no support nochrome android full support ...
PushManager.supportedContentEncodings - Web APIs
full support 17firefox full support 44notes full support 44notes notes extended support
releases (esr) before firefox 78 esr do not support service workers and the push api.ie no support noopera full support 47safari no support nowebview android no support nochrome android full support ...
PushMessageData.arrayBuffer() - Web APIs
for androidfirefox for androidopera for androidsafari on iossamsung internetarraybuffer experimentalchrome full support 50edge full support ≤79firefox full support 44notes full support 44notes notes extended support
releases (esr) before firefox 78 esr do not support service workers and the push api.ie no support noopera full support 37safari no support nowebview android no support nochrome android full support ...
PushMessageData.blob() - Web APIs
wchrome for androidfirefox for androidopera for androidsafari on iossamsung internetblob experimentalchrome full support 50edge full support ≤79firefox full support 44notes full support 44notes notes extended support
releases (esr) before firefox 78 esr do not support service workers and the push api.ie no support noopera full support 37safari no support nowebview android no support nochrome android full support ...
PushMessageData.json() - Web APIs
wchrome for androidfirefox for androidopera for androidsafari on iossamsung internetjson experimentalchrome full support 50edge full support ≤79firefox full support 44notes full support 44notes notes extended support
releases (esr) before firefox 78 esr do not support service workers and the push api.ie no support noopera full support 37safari no support nowebview android no support nochrome android full support ...
PushMessageData.text() - Web APIs
wchrome for androidfirefox for androidopera for androidsafari on iossamsung internettext experimentalchrome full support 50edge full support ≤79firefox full support 44notes full support 44notes notes extended support
releases (esr) before firefox 78 esr do not support service workers and the push api.ie no support noopera full support 37safari no support nowebview android no support nochrome android full support ...
PushSubscription.getKey() - Web APIs
droid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetgetkey()chrome full support 42edge full support 16firefox full support 44notes full support 44notes notes extended support
releases (esr) before firefox 78 esr do not support service workers and the push api.ie no support noopera full support 29safari no support nowebview android no support nochrome android full support ...
PushSubscription.options - Web APIs
ndroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetoptionschrome full support 42edge full support 16firefox full support 44notes full support 44notes notes extended support
releases (esr) before firefox 78 esr do not support service workers and the push api.ie no support noopera full support 29safari no support nowebview android no support nochrome android full support ...
RTCDTMFSender - Web APIs
<div id="interfacediagram" style="display: inline-block; position:
relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30"...
RTCDataChannel - Web APIs
if no protocol was specified when the data channel was created, then this property's value is "" (the empty string).readystate read only the read-only rtcdatachannel property readystate returns an enum of type rtcdatachannelstate which indicates the state of the data channel's underlying data connection.
reliable read only the read-only rtcdatachannel property
reliable indicates whether or not the data channel is
reliable.stream read only the deprecated (and never part of the official specification) read-only rtcdatachannel property stream returns an id number (between 0 and 65,535) which uniquely identifies the rtcdatachannel.event handlersalso inherits event handlers from: eventtargetonbuff...
RTCDataChannelEvent() - Web APIs
you will ra
rely if ever construct an rtcdatachannelevent by hand; these events are normally created and sent by the webrtc layer itself.
RTCDataChannelEvent - Web APIs
you will ra
rely if ever construct an rtcdatachannelevent by hand; instead, the webrtc layer will generate and deliver them to you at the appropriate time.
RTCIceCandidate.RTCIceCandidate() - Web APIs
the following fields are initialized to null if they are not included in the rtcicecandidate.candidate property: foundation, component, priority , ip, protocol, port, type, tcptype,
relatedaddress, and
relatedport.
RTCIceCandidate.foundation - Web APIs
as such, the foundation can be used to cor
relate candidates that are present on multiple rtcicetransport objects syntax var foundation = rtcicecandidate.foundation; value a domstring which uniquely identifies the candidate across all rtcicetransports on which it is available.
Request - Web APIs
properties request.cache read only contains the cache mode of the request (e.g., default,
reload, no-cache).
Resource Timing API - Web APIs
this would be a nice place to have a diagram showing the
relationships between these segments of the resource loading time.
Response.error() - Web APIs
note: this is mainly
relevant to serviceworkers; the error method is used to return an error if you so wish it.
Response.redirected - Web APIs
relying on redirected to filter out redirects makes it easy for a forged redirect to prevent your content from working as expected.
SVGAltGlyphDefElement - Web APIs
<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/svgaltglyphdefelement" target="_top"><rect x="1" y="1" width="210" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="106" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgaltglyphdefelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;...
SVGAltGlyphItemElement - Web APIs
<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/svgaltglyphitemelement" target="_top"><rect x="1" y="1" width="220" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="111" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgaltglyphitemelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: ...
SVGAnimateElement - Web APIs
<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 x1="121" y1="2...
SVGAnimateMotionElement - Web APIs
<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 x1...
SVGAnimateTransformElement - Web APIs
<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"/><l...
SVGCircleElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position:
relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 700 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y...
SVGClipPathElement - Web APIs
<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...
SVGComponentTransferFunctionElement - Web APIs
<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 1...
SVGDefsElement - Web APIs
<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 x1="121" y1="25" x2=...
SVGDescElement - Web APIs
<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 x1="121" y1="25" x2=...
SVGElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position:
relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,...
SVGEllipseElement - Web APIs
<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"/><...
SVGEvent - Web APIs
the svgevent interface represents the event object for most svg-
related events.
SVGExternalResourcesRequired - Web APIs
<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/svgexternalresourcesrequired" target="_top"><rect x="1" y="1" width="280" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="141" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="mid...
SVGFEBlendElement - Web APIs
<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 x1="121" y1="2...
SVGFEColorMatrixElement - Web APIs
<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 x1...
SVGFECompositeElement - Web APIs
<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 x1="12...
SVGFEConvolveMatrixElement - Web APIs
<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"/><l...
SVGFEDiffuseLightingElement - Web APIs
<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"/>...
SVGFEDisplacementMapElement - Web APIs
<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"/>...
SVGFEDistantLightElement - Web APIs
<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 ...
SVGFEDropShadowElement - Web APIs
<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 x1="...
SVGFEFloodElement - Web APIs
<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 x1="121" y1="2...
SVGFEFuncAElement - Web APIs
<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 x1="121" y1="2...
SVGFEFuncBElement - Web APIs
<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 x1="121" y1="2...
SVGFEFuncGElement - Web APIs
<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 x1="121" y1="2...
SVGFEImageElement - Web APIs
<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 x1="121" y1="2...
SVGFEMergeElement - Web APIs
<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 x1="121" y1="2...
SVGFEMergeNodeElement - Web APIs
<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 x1="12...
SVGFEMorphologyElement - Web APIs
<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 x1="...
SVGFEOffsetElement - Web APIs
<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 x1="121" y1=...
SVGFEPointLightElement - Web APIs
<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 x1="...
SVGFESpecularLightingElement - Web APIs
<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"...
SVGFESpotLightElement - Web APIs
<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 x1="12...
SVGFETileElement - Web APIs
<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 x1="121" y1="25"...
SVGFETurbulenceElement - Web APIs
<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 x1="...
SVGFilterPrimitiveStandardAttributes - Web APIs
<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/svgfilterprimitivestandardattributes" target="_top"><rect x="1" y="1" width="360" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="181" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgfilterprimitivestand...
SVGFontElement - Web APIs
<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/svgfontelement" target="_top"><rect x="1" y="1" width="140" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="71" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgfontelement</text><...
SVGFontFaceElement - Web APIs
<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/svgfontfaceelement" target="_top"><rect x="1" y="1" width="180" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="91" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgf...
SVGFontFaceFormatElement - Web APIs
<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/svgfontfaceformatelement" target="_top"><rect x="1" y="1" width="240" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="121" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" align...
SVGFontFaceNameElement - Web APIs
<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/svgfontfacenameelement" target="_top"><rect x="1" y="1" width="220" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="111" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-bas...
SVGFontFaceSrcElement - Web APIs
<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/svgfontfacesrcelement" target="_top"><rect x="1" y="1" width="210" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="106" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baselin...
SVGFontFaceUriElement - Web APIs
<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/svgfontfaceurielement" target="_top"><rect x="1" y="1" width="210" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="106" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baselin...
SVGForeignObjectElement - Web APIs
<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,...
SVGGElement - Web APIs
<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 x1="121" y1="25" x2="151" ...
SVGGeometryElement - Web APIs
<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="...
SVGGlyphElement - Web APIs
<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/svgglyphelement" target="_top"><rect x="1" y="1" width="150" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="76" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgglyphelement</tex...
SVGGlyphRefElement - Web APIs
<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/svgglyphrefelement" target="_top"><rect x="1" y="1" width="180" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="91" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgglyphrefelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} pro...
SVGGradientElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position:
relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4...
getBBox() - Web APIs
getbbox returns different values than getboundingclientrect(), as the latter returns value
relative to the viewport syntax let bboxrect = object.getbbox(); return value the returned value is a svgrect object, which defines the bounding box.
SVGGraphicsElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position:
relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4d...
SVGHKernElement - Web APIs
<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/svghkernelement" target="_top"><rect x="1" y="1" width="150" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="76" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svghkernelement</t...
SVGImageElement - Web APIs
<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 x1="121" y1="25" x...
SVGLineElement - Web APIs
<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...
SVGLinearGradientElement - Web APIs
<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 ...
SVGMPathElement - Web APIs
<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 x1="121" y1="25" x...
SVGMaskElement - Web APIs
<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...
SVGMeshElement - Web APIs
<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/svgmeshelement" target="_top"><rect x="1" y="1" width="140" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="71" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgmeshelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;}...
SVGMetadataElement - Web APIs
<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 x1="121" y1=...
SVGMissingGlyphElement - Web APIs
<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/svgmissingglyphelement" target="_top"><rect x="1" y="1" width="220" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="111" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-basel...
SVGPatternElement - Web APIs
<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 x1="121" y1="2...
SVGPolygonElement - Web APIs
<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 ...
SVGPolylineElement - Web APIs
<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...
SVGRadialGradientElement - Web APIs
<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 ...
The 'X' property - Web APIs
ge’, ‘foreignobject’ inherited no percentages refer to the size of the current viewport (see units) media visual computed value absolute length or percentage animatable yes simple usage a <coordinate> is a length in the user coordinate system that is the given distance from the origin of the user coordinate system along the
relevant axis (the x-axis for x coordinates, the y-axis for y coordinates).
SVGRect - Web APIs
<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/svgrect" target="_top"><rect x="1" y="1" width="75" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="38.5" y="30...
SVGRectElement - Web APIs
<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...
SVGScriptElement - Web APIs
<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 x1="121" y1=...
SVGSetElement - Web APIs
<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 x1="121" y1="25" x2="1...
SVGStopElement - Web APIs
<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 x1="121" y1="25" x2=...
SVGStyleElement - Web APIs
<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"/...
SVGSwitchElement - Web APIs
<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 x1="121" y1="25"...
SVGSymbolElement - Web APIs
<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 x1="121" y1="25"...
SVGTRefElement - Web APIs
<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/svgtrefelement" target="_top"><rect x="1" y="1" width="140" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="71" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgtrefelement</text><...
SVGTSpanElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position:
relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke...
SVGTextElement - Web APIs
<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 x1="121" y1="25" x2...
SVGTextPathElement - Web APIs
<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 x1="121" y1=...
SVGTextPositioningElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position:
relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseli...
SVGTitleElement - Web APIs
<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 x1="121" y1="25" x...
SVGURIReference - Web APIs
<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/svgurireference" target="_top"><rect x="1" y="1" width="150" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="76" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgurireference</text></a></svg></div> a:hover text { fill: #0095dd; poin...
SVGUnitTypes - Web APIs
<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> ...
SVGUseElement - Web APIs
<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...
SVGVKernElement - Web APIs
<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/svgvkernelement" target="_top"><rect x="1" y="1" width="150" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="76" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgvkernelement</t...
SVGZoomAndPan - Web APIs
<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/svgzoomandpan" target="_top"><rect x="1" y="1" width="130" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="66" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgzoomandpan</text></a></svg></div...
Screen.availLeft - Web APIs
on windows, this property depends on which screen is set as your primary, returning the x coordinate of the leftmost available pixel
relative to the primary screen.
Selection API - Web APIs
working draft the selection api specification is based on the html editing apis specification and focuses on the selection-
related functionality.
SensorErrorEvent - Web APIs
the sensorerrorevent interface of the sensor apis provides information about errors thrown by a sensor or
related interface.
Server-sent events - Web APIs
living standard see also tools eventsource polyfill for node.js remy sharp’s eventsource polyfill yaffle’s eventsource polyfill rick waldron’s jquery plugin intercooler.js declarative sse support
related topics ajax javascript websockets other resources a twitter like application powered by server-sent events and its code on github.
ServiceWorkerGlobalScope: pushsubscriptionchange event - Web APIs
bubbles no cancelable no interface pushsubscriptionchangeevent event handler property onpushsubscriptionchange usage notes although examples demonstrating how to share subscription
related information with the application server tend to use fetch(), this is not necessarily the best choice for real-world use, since it will not work if the app is offline, for example.
ServiceWorkerGlobalScope - Web APIs
<div id="interfacediagram" style="display: inline-block; position:
relative; width: 100%; padding-bottom: 12.142857142857142%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-20 0 700 85" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30"...
ServiceWorkerRegistration - Web APIs
an active worker will control a serviceworkerclient if the client's url falls within the scope of the registration (the scope option set when serviceworkercontainer.register is first called.) serviceworkerregistration.navigationp
reload read only returns the instance of navigationp
reloadmanager associated with the current service worker registration.
SourceBuffer.abort() - Web APIs
in this case you would want to manually call abort() on the source buffer to stop the decoding of the current buffer, then fetch and append the newly requested segment that
relates to the current new position of the video.
SourceBuffer - Web APIs
<div id="interfacediagram" style="display: inline-block; position:
relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtar...
SourceBufferList - Web APIs
<div id="interfacediagram" style="display: inline-block; position:
relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30"...
StaticRange - Web APIs
<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/abstractrange" target="_top"><rect x="1" y="1" width="130" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="66" y="3...
StorageEstimate - Web APIs
it's possible that there's more than this amount of space available though you can't
rely on that being the case.
StorageEvent - Web APIs
<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/event" target="_top"><rect x="1" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="38.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">event</text></a><polyline points="76,25 86,20 86,30 76,25" stroke="#d4dd...
Streams API concepts - Web APIs
pipe chains the streams api makes it possible to pipe streams into one another (or at least it will do when browsers implement the
relevant functionality) using a structure called a pipe chain.
StylePropertyMap - Web APIs
<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/stylepropertymap" target="_top"><rect x="1" y="1" width="160" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="81" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">stylepropertym...
Stylesheet.href - Web APIs
example // on a local machine: <html> <head> <link
rel="stylesheet" href="example.css" type="text/css" /> <script> function sref() { alert(document.stylesheets[0].href); } </script> </head> <body> <div class="thunder">thunder</div> <button onclick="sref()">ss</button> </body> </html> // returns "file:////c:/windows/desktop/example.css notes if the style sheet is a linked style sheet, the value of its attribute is its location.
StyleSheet.media - Web APIs
example <!doctype html> <html> <head> <link
rel="stylesheet" href="document.css" type="text/css" media="screen" /> <style
rel="stylesheet" type="text/css" media="screen, print"> body { background-color: snow; } </style> </head> <body> <script> for (var isheetindex = 0; isheetindex < document.stylesheets.length; isheetindex++) { console.log('document.stylesheets[' + string(isheetindex) + '].media: ' + json.stringify(document.stylesheets[isheetindex].media)); if (isheetindex === 0) document.stylesheets[isheetindex].media.appendmedium('handheld'); if (i...
StyleSheet.ownerNode - Web APIs
syntax noderef = stylesheet.ownernode example <html lang="en"> <head> <link
rel="stylesheet" href="example.css"> </head> <body> <button onclick="alert(document.stylesheets[0].ownernode)">show example.css’s ownernode</button> </body> </html> // displays "object htmllinkelement" notes for style sheets that are included by other style sheets, such as with @import, the value of this property is null.
SubtleCrypto.deriveBits() - Web APIs
lasslist.add("fade-in"); sharedsecretvalue.addeventlistener("animationend", () => { sharedsecretvalue.classlist.remove("fade-in"); }); sharedsecretvalue.textcontent = `${buffer}...[${sharedsecret.bytelength} bytes total]`; } // generate 2 ecdh key pairs: one for alice and one for bob // in more normal usage, they would generate their key pairs // separately and exchange public keys secu
rely const generatealiceskeypair = window.crypto.subtle.generatekey( { name: "ecdh", namedcurve: "p-384" }, false, ["derivebits"] ); const generatebobskeypair = window.crypto.subtle.generatekey( { name: "ecdh", namedcurve: "p-384" }, false, ["derivebits"] ); promise.all([generatealiceskeypair, generatebobskeypair]).then(values => { const aliceskeypair = values[0]; ...
SyncEvent - Web APIs
<div id="interfacediagram" style="display: inline-block; position:
relative; width: 100%; padding-bottom: 8.571428571428571%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-20 0 700 60" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/event" target="_top"><rect x="1" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="38.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">event</text></a...
TaskAttributionTiming - Web APIs
<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/performanceentry" target="_top"><rect x="1" y="1" width="160" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="81" y="30" font-size="12px" font-family="conso...
Text - Web APIs
<div id="interfacediagram" style="display: inline-block; position:
relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30"...
TextRange - Web APIs
this property should only be used as one of the solutions when you need to be compatible with lower versions of ie, rather than
relying on it completely in cross browser scripts.
getTrackById() - Web APIs
the tracks are searched in their natural order; that is, in the order defined by the media resource itself, or, if the resource doesn't define an order, the
relative order in which the tracks are declared by the media resource.
TimeEvent - Web APIs
<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/event" target="_top"><rect x="1" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="38.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">event</text></a><polyline points="76,25 86,20 86,30 76,25" stroke="#d4...
Touch() - Web APIs
"force", optional and defaulting to 0, of type float, that is the
relative value of pressure applied, in the range 0 to 1, where 0 is no pressure, and 1 is the highest level of pressure the touch device is capable of sensing; 0 if no value is known.
Touch.force - Web APIs
this property is a
relative value of pressure applied, in the range 0.0 to 1.0, where 0.0 is no pressure, and 1.0 is the highest level of pressure the touch device is capable of sensing.
Touch.radiusX - Web APIs
this may be a
relatively large ellipse representing the contact between a fingertip and the screen or a small area representing the tip of a stylus, for example.
Touch.rotationAngle - Web APIs
this may be a
relatively large ellipse representing the contact between a fingertip and the screen or a small area representing the tip of a stylus, for example.
Multi-touch interaction - Web APIs
id = " + ev.targettouches[i].identifier + " "; } o.innerhtml += s; } } function clearlog(event) { var o = document.getelementsbytagname('output')[0]; o.innerhtml = ""; }
related topics and resources pointer events ...
Supporting both TouchEvent and MouseEvent - Web APIs
end mousemove mousedown mouseup click if the touchstart, touchmove or touchend event is canceled during an interaction, no mouse or click events will be fired, and the resulting sequence of events would just be: touchstart zero or more touchmove events, depending on movement of the finger(s) touchend community touch events community group mail list w3c #touchevents irc channel
related topics and resources touch events overview using touch events touch and mouse (together again for the first time) ...
TrackDefault.type - Web APIs
the type read-only property of the trackdefault interface returns the type of track that this sourcebuffer's media segment data
relates to (i.e.
TrackDefault - Web APIs
properties trackdefault.type read only returns the type of track that this sourcebuffer's media segment data
relates to (i.e.
Transferable - Web APIs
this interface does not define any method or property; it is me
rely a tag indicating objects that can be used in specific conditions, such as being transfered to a worker using the worker.postmessage() method.
TransitionEvent() - Web APIs
the transitionevent() constructor returns a newly created transitionevent, representing an event in
relation with an transition.
WaveShaperNode - Web APIs
for applied examples/information, check out our voice-change-o-matic demo (see app.js for
relevant code).
WebGLContextEvent - Web APIs
<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/event" target="_top"><rect x="1" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="38.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospac...
Boilerplate 1 - Web APIs
this would allow us to focus on the interesting pieces of code that are most
relevant for learning webgl.
Hello vertex attributes - Web APIs
" + "error log: " + linkerrlog; return; } initializeattributes(); gl.useprogram(program); gl.drawarrays(gl.points, 0, 1); document.queryselector("canvas").addeventlistener("click", function (evt) { var clickx
relativtocanvas = evt.pagex - evt.target.offsetleft; var clickxinwebglcoords = 2.0 * (clickx
relativtocanvas- gl.drawingbufferwidth/2) / gl.drawingbufferwidth; gl.bufferdata(gl.array_buffer, new float32array([clickxinwebglcoords]), gl.static_draw); gl.drawarrays(gl.points, 0, 1); }, false); } var buffer; function initializeattributes() { g...
Raining rectangles - Web APIs
timer = settimeout(drawanimation, 17); } function playerclick (evt) { // we need to transform the position of the click event from // window coordinates to
relative position inside the canvas.
Lighting in WebGL - Web APIs
, numcomponents, type, normalize, stride, offset); gl.enablevertexattribarray( programinfo.attriblocations.vertexnormal); } finally, we need to update the code that builds the uniform matrices to generate and deliver to the shader a normal matrix, which is used to transform the normals when dealing with the current orientation of the cube in
relation to the light source: const normalmatrix = mat4.create(); mat4.invert(normalmatrix, modelviewmatrix); mat4.transpose(normalmatrix, normalmatrix); ...
Using shaders to apply color in WebGL - Web APIs
source = ` void main() { gl_fragcolor = vec4(1.0, 1.0, 1.0, 1.0); } `; in order to pick up the interpolated color for each pixel, we need to change this to fetch the value from the vcolor varying: const fssource = ` varying lowp vec4 vcolor; void main(void) { gl_fragcolor = vcolor; } `; each fragment receives the interpolated color based on its position
relative to the vertex positions instead of a fixed value.
A simple RTCDataChannel sample - Web APIs
note: in a real-world scenario in which the two peers aren't running in the same context, the process is a bit more involved; each side provides, one at a time, a suggested way to connect (for example, udp, udp with a
relay, tcp, etc.) by calling rtcpeerconnection.addicecandidate(), and they go back and forth until agreement is reached.
Using DTMF with WebRTC - Web APIs
webrtc currently ignores these payloads; this is because webrtc's dtmf support is primarily intended for use with legacy telephone services that
rely on dtmf tones to perform tasks such as: teleconferencing systems menu systems voicemail systems entry of credit card or other payment information passcode entry note: while the dtmf is not sent to the remote peer as audio, browsers may choose to play the corresponding tone to the local user as part of their user experience, since users are typically used to hearing their phone play the...
Writing WebSocket client applications - Web APIs
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.
Writing a WebSocket server in C# - Web APIs
function dosend(message) { writetoscreen("sent: " + message); websocket.send(message); } function writetoscreen(message) { output.insertadjacenthtml("afterbegin", "<p>" + message + "</p>"); } function onclickbutton() { var text = textarea.value; text && dosend(text); textarea.value = ""; textarea.focus(); } </script>
related writing websocket servers ...
Writing a WebSocket server in Java - Web APIs
= new byte[6]; byte[] encoded = new byte[] { (byte) 198, (byte) 131, (byte) 130, (byte) 182, (byte) 194, (byte) 135 }; byte[] key = new byte[] { (byte) 167, (byte) 225, (byte) 225, (byte) 210 }; for (int i = 0; i < encoded.length; i++) { decoded[i] = (byte) (encoded[i] ^ key[i & 0x3]); } } } finally { s.close(); } } finally { server.close(); } } }
related writing websocket servers ...
WebXR performance guide - Web APIs
that means that for every frame, the javascript runtime has to allocate memory for those and set them up—possibly triggering garbage collection—and then when each interaction of the loop is completed, the memory is
released.
Controlling multiple parameters with ConstantSourceNode - Web APIs
button"> ▶️ </div> </div> <div class="right"> <span>volume: </span> <input type="range" min="0.0" max="1.0" step="0.01" value="0.8" name="volume" id="volumecontrol"> </div> </div> <p>use the button above to start and stop the tones, and the volume control to change the volume of the notes e and g in the chord.</p> css .controls { width: 400px; position:
relative; vertical-align: middle; height: 44px; } .button { font-size: 32px; cursor: pointer; user-select: none; -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; -o-user-select: none; } .right { width: 50%; font: 14px "open sans", "lucida grande", "arial", sans-serif; position: absolute; right: 0; display: table-cell; vertical-align: middle; } ...
Web Speech API - Web APIs
every speechsynthesisvoice has its own
relative speech service including information about language, name and uri.
Web Storage API - Web APIs
web storage concepts and usage the two mechanisms within web storage are as follows: sessionstorage maintains a separate storage area for each given origin that's available for the duration of the page session (as long as the browser is open, including page
reloads and restores) stores data only for a session, meaning that the data is stored until the browser (or tab) is closed.
Using Web Workers - Web APIs
also, the uris for subworkers are resolved
relative to the parent worker's location rather than that of the owning page.
Window.captureEvents() - Web APIs
in order for events to "bubble up" in the way that they normally do, you must call window.
releaseevents() ( ) on the window to keep it from trapping events.
Window.console - Web APIs
these methods are intended for debugging purposes only and should not be
relied on for presenting information to end users.
init() - Web APIs
baseuri the base uri to use when resolving
relative uris when handling the request.
XMLHttpRequest.open() - Web APIs
note: synchronous requests on the main thread can be easily disruptive to the user experience and should be avoided; in fact, many browsers have deprecated synchronous xhr support on the main thread enti
rely.
XMLHttpRequest - Web APIs
<div id="interfacediagram" style="display: inline-block; position:
relative; width: 100%; padding-bottom: 23.076923076923077%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 650 150" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consola...
XMLHttpRequestEventTarget - Web APIs
<div id="interfacediagram" style="display: inline-block; position:
relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points...
XMLHttpRequestResponseType - Web APIs
you shouldn't use this non-standard (and, as of firefox 68, enti
rely removed) api; instead, consider using the fetch api with readable streams, which offers a standard alternative to accessing the response in a streaming fashion.
XPathEvaluator.createNSResolver() - Web APIs
this method adapts any dom node to resolve namespaces so that an xpath expression can be easily evaluated
relative to the context of the node where it appeared within the document.
XPathEvaluator - Web APIs
xpathevaluator.creatensresolver() adapts any dom node to resolve namespaces allowing the xpath expression to be evaluated
relative to the context of the node where it appeared within the document.
XRBoundedReferenceSpace.boundsGeometry - Web APIs
in other words, the bounds are the physical limitations of the available space, shifted so that the reference space's bounds points are all defined
relative to the xrboundedreferencespace's effective origiin.
XREnvironmentBlendMode - Web APIs
in this mode, the xrsession's renderstate.baselayer property provides
relative weights of the artificial layer during the compositing process.
XRInputSource.gripSpace - Web APIs
the y-axis is implied by the
relationship between the other two axes; as is always the case, it's the cross product of the other two axes (lying 90° away from both the x and z axes).
XRInputSource.profiles - Web APIs
each string: has no spaces; instead, words are separated by hyphen ("-") characters if the platform makes it available, the usb vendor and product id may be provided but cannot be
relied upon does not uniquely identify a specific device; rather, it identifies a configuration that the product is capable of using does not provide information about handedness of the device, if applicable the webxr input profiles registry is used by device developers and browser developers to attempt to ensure that a given device will report the same profile strings regardless of which browser...
XRInputSource.targetRayMode - Web APIs
the code should continue to perform tasks such as drawing controllers or any objects representative of the user's hands' positions in the virtual space, as well as any other input-
related tasks.
XRInputSourceEvent.frame - Web APIs
instead, the xrframe specified by the frame property is simply a method to provide access to the getpose() method, which you can use to get the
relative positions of the objects in the scene at the time the event occurred.
XRInputSourceEventInit.frame - Web APIs
instead, the xrframe specified by the frame property is simply a method to provide access to the getpose() method, which you can use to get the
relative positions of the objects in the scene at the time the event occurred.
XRPermissionDescriptor.mode - Web APIs
syntax xrpermissiondescriptor = { mode: xrsessionmode, requiredfeatures: reqfeatu
relist, optionalfeatures: optfeatu
relist }; xrpermissiondescriptor.mode = xrsessionmode; xrmode = xrpermissiondescriptor.mode; value a domstring whose value is one of the strings found in the xrsessionmode enumerated type: immersive-ar the session's output will be given exclusive access to the immersive device, but the rendered content will be blended with the real-world environment.
XRPose.emulatedPosition - Web APIs
this information is important because devices whose position is emulated are prone to their offset drifting
relative to the real world space over time.
XRReferenceSpaceEvent - Web APIs
transform read only an xrrigidtransform object indicating the position and orientation of the specified referencespace's native origin after the event, defined
relative to the coordinate system before the event.
XRReferenceSpaceType - Web APIs
for devices with six degrees of freedom (6dof) tracking, the local reference space tries to keep the origin stable
relative to the environment.
XRSession.end() - Web APIs
return value a promise that resolves without a value after any platform-specific steps
related to shutting down the session have completed.
XRSession.onend - Web APIs
the onend attribute of the xrsession object is the event handler for the end event, which is dispatched after the xr session ends and all
related hardware-specific routines are completed.
XRSession.onsqueeze - Web APIs
vent => { if (event.inputsource.handedness == user.handedness) { let targetraypose = event.frame.getpose(event.inputsource.targetrayspace, myrefspace); if (user.heldobject && targetraypose) { dropobjectusingray(user.heldobject, targetraypose.transform.matrix): } } }; see the examples in the onsqueezestart and onsqueezeend event handlers for the reset of the event handling
related to this approach.
XRTargetRayMode - Web APIs
the code should continue to perform tasks such as drawing controllers or any objects representative of the user's hands' positions in the virtual space, as well as any other input-
related tasks.
XRWebGLLayer.framebuffer - Web APIs
opaque framebuffers initialized with the depth property set to false will not have a depth buffer and will
rely on the coordinates alone to determine distance.
XRWebGLLayer - Web APIs
although xrwebgllayer is currently the only type of framebuffer layer supported by webgl, it's enti
rely possible that future updates to the webxr specification may allow for other layer types and corresponding image sources.
XRWebGLLayerInit.framebufferScaleFactor - Web APIs
the xrwebgllayerinit dictionary's framebufferscalefactor property, when specified upon instantiating a new xrwebgllayer using its constructor, xrwebgllayer(), specifies the scaling factor to use when determining the size of the frame buffer to use when rendering the scene,
relative to the default xr device display resolution.
XRWebGLLayerInit - Web APIs
examples given an xrsession, xrsession, and a webgl rendering context, gl, this snippet sets the rendering layer for the session, specifying the ignoredepthvalues option, indicating that the depth buffer should not be used (or should not exist at all), and that the only source for distance information of any given point is its position
relative to the viewer.
ARIA Technique Template - Accessibility
examples example 1: code working examples: notes aria attributes used
related aria techniques compatibility tbd: add support information for common ua and at product combinations additional resources ...
Using the alertdialog role - Accessibility
alertdialog" aria-labelledby="dialog1title" aria-describedby="dialog1desc"> <div role="document" tabindex="0"> <h2 id="dialog1title">your login session is about to expire</h2> <p id="dialog1desc">to extend your session, click the ok button</p> <button>ok</button> </div> </div> working examples: tbd notes aria attributes used alertdialog aria-labelledby aria-describedby
related aria techniques using the dialog role using the alert role compatibility tbd: add support information for common ua and at product combinations additional resources ...
Using the aria-hidden attribute - Accessibility
this can improve the experience for assistive technology users by hiding: pu
rely decorative content, such as icons or images duplicated content, such as repeated text offscreen or collapsed content, such as menus according to the fourth rule of aria, aria-hidden="true" should not be used on a focusable element.
Using the aria-invalid attribute - Accessibility
used in aria roles all elements of the base markup
related aria techniques using the aria-required attribute using the alert role compatibility tbd: add support information for common ua and at product combinations additional resources wai-aria specification for the aria-invalid property wai authoring practices for forms ...
Using the aria-label attribute - Accessibility
used by aria roles all elements of the base markup
related aria techniques using the aria-labelledby attribute compatibility tbd: add support information for common ua and at product combinations additional resources wai-aria specification for aria-label ...
Using the aria-orientation attribute - Accessibility
<a href="#" id="handle_zoomslider" role="slider" aria-orientation="vertical" aria-valuemin="0" aria-valuemax="17" aria-valuenow="14" > <span>11</span> </a> working examples: slider example notes used with aria roles scrollbar listbox combobox menu tree separator slider tablist toolbar
related aria techniques compatibility tbd: add support information for common ua and at product combinations additional resources wai-aria specification for the aria-orientation attribute ...
Using the aria-required attribute - Accessibility
lastname">last name:</label> <input id="lastname" type="text" aria-required="true" /> <br/> <label for="streetaddress">street address:</label> <input id="streetaddress" type="text" /> </form> working examples: tooltip example (includes the use of the aria-required attribute) notes used in aria roles combobox gridcell listbox radiogroup spinbutton textbox tree
related aria techniques using the aria-invalid attribute compatibility tbd: add support information for common ua and at product combinations additional resources wai-aria specification for aria-required wai-aria authoring practices for forms constraint validation in html5 ...
Using the aria-valuemax attribute - Accessibility
<div role="slider" aria-valuenow="4" aria-valuemin="1" aria-valuemax="10"> working examples: progressbar example slider example spinbutton example notes used with aria roles progressbar scrollbar slider spinbutton
related aria techniques aria-valuemin aria-valuenow aria-valuetext compatibility tbd: add support information for common ua and at product combinations additional resources wai-aria specification for the aria-valuemax attribute ...
Using the aria-valuemin attribute - Accessibility
<div role="slider" aria-valuenow="4" aria-valuemin="1" aria-valuemax="10"> working examples: progressbar example slider example spinbutton example notes used with aria roles progressbar scrollbar slider spinbutton
related aria techniques aria-valuemax aria-valuenow aria-valuetext compatibility tbd: add support information for common ua and at product combinations additional resources wai-aria specification for the aria-valuemin attribute ...
Using the aria-valuenow attribute - Accessibility
<div role="slider" aria-valuenow="4" aria-valuemin="1" aria-valuemax="10"> working examples: progressbar example slider example spinbutton example notes used with aria roles progressbar scrollbar slider spinbutton
related aria techniques aria-valuemax aria-valuemin aria-valuetext compatibility tbd: add support information for common ua and at product combinations additional resources wai-aria specification for the aria-valuenow attribute ...
Using the article role - Accessibility
s <article role="article"> <header> <h2>blog post</h2> </header> <section class="content"> <p>a very interesting post</p> </section> <section class="comments"> <div class="comment" role="article"> <p>meaningful comment</p> </div> <div class="comment" role="article"> <p>positive comment</p> </div> </section> </article> notes aria attributes used
related aria techniques aria techniques - list of roles compatibility tbd: add support information for common ua and at product combinations additional resources wai-aria specification for the article role ...
Using the link role - Accessibility
aria attributes used link
related aria techniques button role additional resources aria best practices - link role: http://www.w3.org/tr/wai-aria-practices/#link ...
Using the progressbar role - Accessibility
</div> working examples: notes aria attributes used progressbar aria-valuenow aria-valuemin aria-valuemax aria-valuetext
related aria techniques compatibility tbd: add support information for common ua and at product combinations additional resources ...
Using the radio role - Accessibility
<img role="presentation" src="radio-unchecked.gif" /> thai </li> <li id="r2" tabindex="-1" role="radio" aria-checked="false"> <img role="presentation" src="radio-unchecked.gif" /> subway </li> <li id="r3" tabindex="0" role="radio" aria-checked="true"> <img role="presentation" src="radio-checked.gif" /> radio maria </li> </ul> working examples: notes aria attributes used
related aria techniques compatibility tbd: add support information for common ua and at product combinations additional resources ...
Using the slider role - Accessibility
ay", "saturday"]; var updateslider = function (newvalue) { var handle = document.getelementbyid("day-handle"); handle.setattribute("aria-valuenow", newvalue.tostring()); handle.setattribute("aria-valuetext", daynames[newvalue]); }; working examples: slider example notes aria attributes used aria-valuemin aria-valuemax aria-valuenow aria-valuetext aria-orientation
related aria techniques compatibility tbd: add support information for common ua and at product combinations additional resources wai-aria specification for the slider role ...
Using the toolbar role - Accessibility
examples example 1: code working examples: w3c toolbar example notes aria attributes used
related aria techniques compatibility tbd: add support information for common ua and at product combinations additional resources ...
Using ARIA: Roles, states, and properties - Accessibility
checked aria-current aria-disabled aria-errormessage aria-expanded aria-haspopup aria-hidden aria-invalid aria-label aria-level aria-modal aria-multiline aria-multiselectable aria-orientation aria-placeholder aria-pressed aria-readonly aria-required aria-selected aria-sort aria-valuemax aria-valuemin aria-valuenow aria-valuetext live region attributes aria-live aria-
relevant aria-atomic aria-busy drag & drop attributes aria-dropeffect aria-dragged
relationship attributes aria-activedescendant aria-colcount aria-colindex aria-colspan aria-controls aria-describedby aria-details aria-errormessage aria-flowto aria-labelledby aria-owns aria-posinset aria-rowcount aria-rowindex aria-rowspan aria-setsize microsoftedge-specific propert...
ARIA: tabpanel role - Accessibility
working draft precedence order what are the
related properties, and in what order will this attribute or property be read (which property will take precendence over this one, and which property will be overwritten.
ARIA: alert role - Accessibility
<p role="alert" style="display: none;">the alert will trigger when the element becomes visible.</p> while triggering an alert via css alone is possible, it is better to
rely on javascript because it has more browser/screen reader support and is often more appropriate as part of a larger user interaction such as inside an event handler or form validation.
ARIA: document role - Accessibility
in contrast to the article role, the document role does not have any
relation to other elements with a document role, it me
rely has a
relationship to the containing composit widget.
ARIA: List role - Accessibility
group a collection of
related objects, limited to list items when nested in a list, not important enough to have their own place in a pages table of contents.
ARIA: Listitem role - Accessibility
group a collection of
related objects, limited to list items when nested in a list, not important enough to have their own place in a pages table of contents.
ARIA: Mark role - Accessibility
he song is a slow-rising crescendo that peaks at the <span role="mark" aria-details="thread-1">end of the guitar solo</span>, before fading away sharply.</p> <div role="comment" id="thread-1" data-author="chris"> <h3>chris said</h3> <p class="comment-text">i really think this moment could use more cowbell.</p> <p><time datetime="2019-03-30t19:29">march 30 2019, 19:29</time></p> </div> the
related comment is marked up using an html structure wrapped with a <div> containing role="comment".
ARIA: Suggestion role - Accessibility
examples when you’ve got a content change that involves an insertion and a deletion, there is no way for a screenreader user to work out if the two are
related or not.
Architecture - Accessibility
compute the item offset
relative to the start of this line search forward from the starting offset for an embed character if an embed character is found, continue processing with offset = index plus the line start index if an embed character is not found: if the line ending is equal to one less than the length of all text in the accessible, proceed to the next accessible in dept first se...
Community - Accessibility
this document provides links to mailing lists, newsgroups, forums, and other communities
related to accessbility.
HTML To MSAA - Accessibility
map html element role name value states
relations actions events notes a role_system_ link n/a value of @href attribute state_system_ selectable if @name attribute is presented state_system_ linked if @href attribute is presented or click event listener is registered state_system_ traversed if link is traversed n/a "jump" if @href is valid n/a br role_system_ whitespace '\n' (new line char) state_system_ readonly n/a n/a n/a ...
Mobile accessibility checklist - Accessibility
everything other than the currently visible screen must be truly invisible (especially
relevant for single page apps with multiple cards): use the hidden attribute or visibility or display style properties.
-webkit-mask-position-x - CSS: Cascading Style Sheets
alues */ -webkit-mask-position-x: inherit; -webkit-mask-position-x: initial; -webkit-mask-position-x: unset; initial value0%applies toall elementsinheritednopercentagesrefer to the size of the box itselfcomputed valuefor <length> the absolute value, otherwise a percentageanimation typediscrete syntax values <length-percentage> a length indicating the position of the left edge of the image
relative to the box's left padding edge.
-webkit-mask-position-y - CSS: Cascading Style Sheets
values */ -webkit-mask-position-y: inherit; -webkit-mask-position-y: initial; -webkit-mask-position-y: unset; initial value0%applies toall elementsinheritednopercentagesrefer to the size of the box itselfcomputed valuefor <length> the absolute value, otherwise a percentageanimation typediscrete syntax values <length-percentage> a length indicating the position of the top side of the image
relative to the box's top padding edge.
:-moz-user-disabled - CSS: Cascading Style Sheets
the :-moz-user-disabled css pseudo-class is a mozilla extension that matches elements representing images that were not loaded because images have been enti
rely disabled by the user's preferences.
::after (:after) - CSS: Cascading Style Sheets
</p> css span[data-descr] { position:
relative; text-decoration: underline; color: #00f; cursor: help; } span[data-descr]:hover::after, span[data-descr]:focus::after { content: attr(data-descr); position: absolute; left: 0; top: 24px; min-width: 200px; border: 1px #aaaaaa solid; border-radius: 10px; background-color: #ffffcc; padding: 12px; color: #000000; font-size: 14px; z-index: 1; } result specifica...
::before (:before) - CSS: Cascading Style Sheets
html <ul> <li>buy milk</li> <li>take the dog for a walk</li> <li>exercise</li> <li>write code</li> <li>play music</li> <li>
relax</li> </ul> css li { list-style-type: none; position:
relative; margin: 2px; padding: 0.5em 0.5em 0.5em 2em; background: lightgrey; font-family: sans-serif; } li.done { background: #ccff99; } li.done::before { content: ''; position: absolute; border-color: #009933; border-style: solid; border-width: 0 0.3em 0.25em 0; height: 1em; top: 1.3em; left: 0.6em; marg...
::first-line (:first-line) - CSS: Cascading Style Sheets
allowable properties only a small subset of css properties can be used with the ::first-line pseudo-element: all font-
related properties: font, font-kerning, font-style, font-variant, font-variant-numeric, font-variant-position, font-variant-east-asian, font-variant-caps, font-variant-alternates, font-variant-ligatures, font-synthesis, font-feature-settings, font-language-override, font-weight, font-size, font-size-adjust, font-stretch, and font-family all background-
related properties: background-color, background...
::selection - CSS: Cascading Style Sheets
ckground-color: red; } p::-moz-selection { color: white; background-color: blue; } /* make selected text gold on a red background */ ::selection { color: gold; background-color: red; } /* make selected text in a paragraph white on a blue background */ p::selection { color: white; background-color: blue; } result accessibility concerns don't override selected text styles for pu
rely aesthetic reasons — users can customize them to suit their needs.
:fullscreen - CSS: Cascading Style Sheets
html the page's html looks like this: <h1>mdn web docs demo: :fullscreen pseudo-class</h1> <p>this demo uses the <code>:fullscreen</code> pseudo-class to automatically change the style of a button used to toggle full-screen mode on and off, enti
rely using css.</p> <button id="fs-toggle">toggle fullscreen</button> the <button> with the id "fs-toggle" will change between pale red and pale green depending on whether or not the document is in full-screen mode.
:host() - CSS: Cascading Style Sheets
the most obvious use of this is to put a class name only on certain custom element instances, and then include the
relevant class selector as the function argument.
:hover - CSS: Cascading Style Sheets
/* selects any <a> element when "hovered" */ a:hover { color: orange; } styles defined by the :active pseudo-class will be overridden by any subsequent link-
related pseudo-class (:link, :visited, or :active) that has at least equal specificity.
:invalid - CSS: Cascading Style Sheets
people who have certain types of color blindness will be unable to determine the input's state unless it is accompanied by an additional indicator that does not
rely on color to convey meaning.
:required - CSS: Cascading Style Sheets
if the form also contains optional inputs, required inputs should be indicated visually using a treatment that does not
rely solely on color to convey meaning.
@charset - CSS: Cascading Style Sheets
if several @charset at-rules are defined, only the first one is used, and it cannot be used inside a style attribute on an html element or inside the <style> element where the character set of the html page is
relevant.
additive-symbols - CSS: Cascading Style Sheets
formal definition
related at-rule@counter-styleinitial valuen/acomputed valueas specified formal syntax [ <integer> && <symbol> ]#where <symbol> = <string> | <image> | <custom-ident>where <image> = <url> | <image()> | <image-set()> | <element()> | <paint()> | <cross-fade()> | <gradient>where <image()> = image( <image-tags>?
fallback - CSS: Cascading Style Sheets
formal definition
related at-rule@counter-styleinitial valuedecimalcomputed valueas specified formal syntax <counter-style-name>where <counter-style-name> = <custom-ident> examples specifying a fallback counter style html <ul class="list"> <li>one</li> <li>two</li> <li>three</li> <li>four</li> <li>five</li> </ul> css @counter-style fallback-example { system: fixed; symbols: "\24b6" "\24b7" "\24b8...
negative - CSS: Cascading Style Sheets
formal definition
related at-rule@counter-styleinitial value"-" hyphen-minuscomputed valueas specified formal syntax <symbol> <symbol>?where <symbol> = <string> | <image> | <custom-ident>where <image> = <url> | <image()> | <image-set()> | <element()> | <paint()> | <cross-fade()> | <gradient>where <image()> = image( <image-tags>?
pad - CSS: Cascading Style Sheets
formal definition
related at-rule@counter-styleinitial value0 ""computed valueas specified formal syntax <integer> && <symbol>where <symbol> = <string> | <image> | <custom-ident>where <image> = <url> | <image()> | <image-set()> | <element()> | <paint()> | <cross-fade()> | <gradient>where <image()> = image( <image-tags>?
prefix - CSS: Cascading Style Sheets
formal definition
related at-rule@counter-styleinitial value"" (the empty string)computed valueas specified formal syntax <symbol>where <symbol> = <string> | <image> | <custom-ident>where <image> = <url> | <image()> | <image-set()> | <element()> | <paint()> | <cross-fade()> | <gradient>where <image()> = image( <image-tags>?
range - CSS: Cascading Style Sheets
formal definition
related at-rule@counter-styleinitial valueautocomputed valueas specified formal syntax [ [ <integer> | infinite ]{2} ]# | auto examples setting counter style over a range <ul class="list"> <li>one</li> <li>two</li> <li>three</li> <li>four</li> <li>five</li> <li>six</li> <li>seven</li> <li>eight</li> <li>nine</li> <li>ten</li> </ul> @counter-style range-multi-example { syst...
symbols - CSS: Cascading Style Sheets
formal definition
related at-rule@counter-styleinitial valuen/acomputed valueas specified formal syntax <symbol>+where <symbol> = <string> | <image> | <custom-ident>where <image> = <url> | <image()> | <image-set()> | <element()> | <paint()> | <cross-fade()> | <gradient>where <image()> = image( <image-tags>?
system - CSS: Cascading Style Sheets
formal definition
related at-rule@counter-styleinitial valuesymboliccomputed valueas specified formal syntax cyclic | numeric | alphabetic | symbolic | additive | [ fixed <integer>?
@counter-style - CSS: Cascading Style Sheets
@counter-style winners-list { system: fixed; symbols: url(gold-medal.svg) url(silver-medal.svg) url(bronze-medal.svg); suffix: " "; } additive-symbols while the symbols specified in the symbols descriptor is used for constructing marker representation by most algorithms, some systems such as 'additive'
rely on additive tuples described in this descriptor.
font-display - CSS: Cascading Style Sheets
formal definition
related at-rule@font-faceinitial valueautocomputed valueas specified formal syntax [ auto | block | swap | fallback | optional ] examples specifying fallback font-display @font-face { font-family: examplefont; src: url(/path/to/fonts/examplefont.woff) format('woff'), url(/path/to/fonts/examplefont.eot) format('eot'); font-weight: 400; font-style: normal; font-display: fallback; }...
font-family - CSS: Cascading Style Sheets
formal definition
related at-rule@font-faceinitial valuen/a (required)computed valueas specified formal syntax <family-name>where <family-name> = <string> | <custom-ident>+ examples setting the font family name @font-face { font-family: examplefont; src: url('examplefont.ttf'); } specifications specification status comment css fonts module level 3the definition of 'font-family' in that specification.
font-stretch - CSS: Cascading Style Sheets
mdn understanding wcag, guideline 1.4 explanations understanding success criterion 1.4.8 | w3c understanding wcag 2.0 formal definition
related at-rule@font-faceinitial valuenormalcomputed valueas specified formal syntax <font-stretch-absolute>{1,2}where <font-stretch-absolute> = normal | ultra-condensed | extra-condensed | condensed | semi-condensed | semi-expanded | expanded | extra-expanded | ultra-expanded | <percentage> examples setting a percentage range for font-stretch the following find a local open sans font or import ...
font-style - CSS: Cascading Style Sheets
formal definition
related at-rule@font-faceinitial valuenormalcomputed valueas specified formal syntax normal | italic | oblique <angle>{0,2} examples specifying an italic font style as an example, consider the garamond font family, in its normal form, we get the following result: @font-face { font-family: garamond; src: url('garamond.ttf'); } the italicized version of this text uses the same glyphs prese...
font-variation-settings - CSS: Cascading Style Sheets
formal definition
related at-rule@font-faceinitial valuenormalcomputed valueas specified formal syntax normal | [ <string> <number> ]# examples setting font weight and stretch in a @font-face rule @font-face { font-family: 'opentypefont'; src: url('open_type_font.woff2') format('woff2'); font-weight: normal; font-style: normal; font-variation-settings: 'wght' 400, 'wdth' 300; } specifications ...
font-weight - CSS: Cascading Style Sheets
mdn understanding wcag, guideline 1.4 explanations understanding success criterion 1.4.8 | w3c understanding wcag 2.0 formal definition
related at-rule@font-faceinitial valuenormalcomputed valueas specified formal syntax <font-weight-absolute>{1,2}where <font-weight-absolute> = normal | bold | <number <a href="/docs/css/value_definition_syntax#brackets" title="brackets: enclose several entities, combinators, and multipliers to transform them as a single component">[1,1000]> examples setting normal font weight in a @font-face rule...
unicode-range - CSS: Cascading Style Sheets
formal definition
related at-rule@font-faceinitial valueu+0-10ffffcomputed valueas specified formal syntax <unicode-range># examples using a different font for a single character in this example we create a simple html containing a single <div> element, including an ampersand, that we want to style with a different font.
color-index - CSS: Cascading Style Sheets
<link
rel="stylesheet" href="http://foo.bar.com/base.css" /> <link
rel="stylesheet" media="all and (min-color-index: 256)" href="http://foo.bar.com/color-stylesheet.css" /> specifications specification status comment media queries level 4the definition of 'color-index' in that specification.
device-height - CSS: Cascading Style Sheets
<link
rel="stylesheet" media="screen and (max-device-height: 799px)" href="http://foo.bar.com/short-styles.css" /> specifications specification status comment media queries level 4the definition of 'device-height' in that specification.
device-width - CSS: Cascading Style Sheets
<link
rel="stylesheet" media="screen and (max-device-width: 799px)" href="http://foo.bar.com/narrow-styles.css" /> specifications specification status comment media queries level 4the definition of 'device-width' in that specification.
forced-colors - CSS: Cascading Style Sheets
user preferences currently no user agent implements this feature, although various operating systems do support such preferences and if this media query is ever implemented user agents will likely
rely on the settings provided by the operating system in use.
prefers-reduced-transparency - CSS: Cascading Style Sheets
user preferences currently no user agent implements this feature, although various operating systems do support such preferences and if this media query is ever implemented user agents will likely
rely on the settings provided by the operating systems.
shape - CSS: Cascading Style Sheets
<head> <link
rel="stylesheet" href="default.css" /> <link media="screen and (shape: rect)"
rel="stylesheet" href="rectangle.css" /> <link media="screen and (shape: round)"
rel="stylesheet" href="round.css" /> </head> specifications specification status css round display level 1the definition of 'shape' in that specification.
bleed - CSS: Cascading Style Sheets
formal definition
related at-rule@pageinitial valueautocomputed valueas specified formal syntax auto | <length> examples setting a page bleed of 1cm @page { bleed: 1cm; } specifications specification status comment css paged media module level 3the definition of 'bleed' in that specification.
marks - CSS: Cascading Style Sheets
formal definition
related at-rule@pageinitial valuenonecomputed valueas specified formal syntax none | [ crop | cross ] examples adding crop and cross marks @page { marks: crop cross; } specifications specification status comment css paged media module level 3the definition of 'marks' in that specification.
size - CSS: Cascading Style Sheets
formal definition
related at-rule@pageinitial valueautocomputed valueas specified, but with
relative lengths converted into absolute lengths formal syntax <length>{1,2} | auto | [ <page-size> | [ portrait | landscape ] ] examples specifying size and orientation @page { size: 4in 6in landscape; } nesting inside a @media rule @media print { @page { size: 50mm 150mm; } } specifications speci...
max-zoom - CSS: Cascading Style Sheets
formal definition
related at-rule@viewportinitial valueautopercentagesthe zoom factor itselfcomputed valueauto, or a non-negative number or percentage as specified formal syntax auto | <number> | <percentage> examples setting max-zoom @viewport { max-zoom: 1.5; } specifications specification status comment css device adaptationthe definition of '"max-zoom" descriptor' in that sp...
min-zoom - CSS: Cascading Style Sheets
formal definition
related at-rule@viewportinitial valueautopercentagesthe zoom factor itselfcomputed valueauto, or a non-negative number or percentage as specified formal syntax auto | <number> | <percentage> examples setting min zoom factor @viewport { min-zoom: 2.0; } specifications specification status comment css device adaptationthe definition of '"min-zoom" descriptor' in tha...
orientation - CSS: Cascading Style Sheets
formal definition
related at-rule@viewportinitial valueautopercentagesrefer to the size of bounding boxcomputed valueas specified formal syntax auto | portrait | landscape examples setting viewport orientation @viewport { orientation: landscape; } specifications specification status comment css device adaptationthe definition of '"orientation" descriptor' in that specification.
user-zoom - CSS: Cascading Style Sheets
mdn understanding wcag, guideline 1.4 explanations understanding success criterion 1.4.4 | understanding wcag 2.0 formal definition
related at-rule@viewportinitial valuezoompercentagesrefer to the size of bounding boxcomputed valueas specified formal syntax zoom | fixed examples disabling user zoom @viewport { user-zoom: fixed; } specifications specification status comment css device adaptationthe definition of '"user-zoom" descriptor' in that specification.
border-block-end-width - CSS: Cascading Style Sheets
syntax /* <'border-width'> values */ border-block-end-width: 5px; border-block-end-width: thick;
related properties are border-block-start-width, border-inline-start-width, and border-inline-end-width, which define the other border widths of the element.
border-block-start-color - CSS: Cascading Style Sheets
syntax border-block-start-color: blue; border-block-start-color: #4c5d21;
related properties are border-block-end-color, border-inline-start-color, and border-inline-end-color, which define the other border colors of the element.
border-block-start-style - CSS: Cascading Style Sheets
syntax /* <'border-style'> values */ border-block-start-style: dashed; border-block-start-style: dotted; border-block-start-style: groove;
related properties are border-block-end-style, border-inline-start-style, and border-inline-end-style, which define the other border styles of the element.
border-block-start-width - CSS: Cascading Style Sheets
syntax /* <'border-width'> values */ border-block-start-width: 5px; border-block-start-width: thick;
related properties are border-block-end-width, border-inline-start-width, and border-inline-end-width, which define the other border widths of the element.
border-image-outset - CSS: Cascading Style Sheets
it also applies to ::first-letter.inheritednocomputed valueas specified, but with
relative lengths converted into absolute lengthsanimation typeby computed value type formal syntax [ <length> | <number> ]{1,4} examples outsetting a border image html <div id="outset">this element has an outset border image!</div> css #outset { width: 10rem; background: #cef; border: 1.4rem solid; border-image: radial-gradient(#ff2, #55f) 40; border-image-outset: 1.5; /* 1.5 × 1...
border-inline-end-color - CSS: Cascading Style Sheets
syntax border-inline-end-color: rebeccapurple; border-inline-end-color: #663399;
related properties are border-block-start-color, border-block-end-color, and border-inline-start-color, which define the other border colors of the element.
border-inline-end-style - CSS: Cascading Style Sheets
syntax /* <'border-style'> values */ border-inline-end-style: dashed; border-inline-end-style: dotted; border-inline-end-style: groove;
related properties are border-block-start-style, border-block-end-style, and border-inline-start-style, which define the other border styles of the element.
border-inline-end-width - CSS: Cascading Style Sheets
syntax /* <'border-width'> values */ border-inline-end-width: 2px; border-inline-end-width: thick;
related properties are border-block-start-width, border-block-end-width, and border-inline-start-width, which define the other border widths of the element.
border-inline-start-color - CSS: Cascading Style Sheets
syntax border-inline-start-color: red; border-inline-start-color: #ee4141;
related properties are border-block-start-color, border-block-end-color, and border-inline-end-color, which define the other border colors of the element.
border-inline-start-style - CSS: Cascading Style Sheets
syntax /* <'border-style'> values */ border-inline-start-style: dashed; border-inline-start-style: dotted; border-inline-start-style: groove;
related properties are border-block-start-style, border-block-end-style, and border-inline-end-style, which define the other border styles of the element.
border-inline-start-width - CSS: Cascading Style Sheets
syntax /* <'border-width'> values */ border-inline-start-width: 5px; border-inline-start-width: thick;
related properties are border-block-start-width, border-block-end-width, and border-inline-end-width, which define the other border widths of the element.
border-spacing - CSS: Cascading Style Sheets
the border-spacing value is also used along the outside edge of the table, where the distance between the table's border and the cells in the first/last column or row is the sum of the
relevant (horizontal or vertical) border-spacing and the
relevant (top, right, bottom, or left) padding on the table.
box-sizing - CSS: Cascading Style Sheets
on the other hand, when using position:
relative or position: absolute, use of box-sizing: content-box allows the positioning values to be
relative to the content, and independent of changes to border and padding sizes, which is sometimes desirable.
calc() - CSS: Cascading Style Sheets
formal syntax calc( <calc-sum> )where <calc-sum> = <calc-product> [ [ '+' | '-' ] <calc-product> ]*where <calc-product> = <calc-value> [ '*' <calc-value> | '/' <number> ]*where <calc-value> = <number> | <dimension> | <percentage> | ( <calc-sum> ) accessibility concerns when calc() is used for controlling text size, be sure that one of the values includes a
relative length unit, for example: h1 { font-size: calc(1.5rem + 3vw); } this ensures that text size will scale if the page is zoomed.
clip-path - CSS: Cascading Style Sheets
flex: 1 auto; } .cell { margin: .5em; padding: .5em; background-color: #fff; overflow: hidden; text-align: center; flex: 1; } .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 { display: inline-block; border: 1px dotted grey; position:
relative; } .container:before { content: 'margin'; position: absolute; top: 2px; left: 2px; font: italic .6em sans-serif; } .viewbox { box-shadow: 1rem 1rem 0 #efefef inset, -1rem -1rem 0 #efefef inset; } .container.viewbox:after { content: 'viewbox'; position: absolute; left: 1.1rem; top: 1.1rem; font: italic .6em sans-serif; } .cell span { display: block; margin-bottom...
clip - CSS: Cascading Style Sheets
applies toabsolutely positioned elementsinheritednocomputed valueauto if specified as auto, otherwise a rectangle with four values, each of which is auto if specified as auto or the computed length otherwiseanimation typea rectangle formal syntax <shape> | autowhere <shape> = rect(<top>, <right>, <bottom>, <left>) examples clipping an image css .dotted-border { border: dotted; position:
relative; width: 536px; height: 350px; } #top-left, #middle, #bottom-right { position: absolute; top: 0; } #top-left { left: 360px; clip: rect(0 175px 113px 0); } #middle { left: 280px; clip: rect(119px 255px 229px 80px); } #bottom-right { left: 200px; clip: rect(235px 335px 345px 160px); } html <p class="dotted-border"> <img src="https://udn.realityripple.com/samples/8f/...
<display-box> - CSS: Cascading Style Sheets
please note that the css display level 3 spec defines how the contents value should affect "unusual elements" — elements that aren’t rendered pu
rely by css box concepts such as replaced elements.
font-variant-ligatures - CSS: Cascading Style Sheets
ere <common-lig-values> = [ common-ligatures | no-common-ligatures ]<discretionary-lig-values> = [ discretionary-ligatures | no-discretionary-ligatures ]<historical-lig-values> = [ historical-ligatures | no-historical-ligatures ]<contextual-alt-values> = [ contextual | no-contextual ] examples setting font ligatures and contextual forms html <link href="//fonts.googleapis.com/css?family=lora"
rel="stylesheet"> <p class="normal"> normal<br> if fi ff tf ft jf fj </p> <p class="none"> none<br> if fi ff tf ft jf fj </p> <p class="common-ligatures"> common-ligatures<br> if fi ff tf ft jf fj </p> <p class="no-common-ligatures"> no-common-ligatures<br> if fi ff tf ft jf fj </p> <p class="discretionary-ligatures"> discretionary-ligatures<br> if fi ff tf ft jf fj </p> <p class=...
grid-template - CSS: Cascading Style Sheets
lumns: nonegrid-template-rows: nonegrid-template-areas: noneapplies togrid containersinheritednopercentagesas each of the properties of the shorthand:grid-template-columns: refer to corresponding dimension of the content areagrid-template-rows: refer to corresponding dimension of the content areacomputed valueas each of the properties of the shorthand:grid-template-columns: as specified, but with
relative lengths converted into absolute lengthsgrid-template-rows: as specified, but with
relative lengths converted into absolute lengthsgrid-template-areas: as specifiedanimation typediscrete formal syntax none | [ <'grid-template-rows'> / <'grid-template-columns'> ] | [ <line-names>?
grid - CSS: Cascading Style Sheets
the shorthand:grid-template-rows: refer to corresponding dimension of the content areagrid-template-columns: refer to corresponding dimension of the content areagrid-auto-rows: refer to corresponding dimension of the content areagrid-auto-columns: refer to corresponding dimension of the content areacomputed valueas each of the properties of the shorthand:grid-template-rows: as specified, but with
relative lengths converted into absolute lengthsgrid-template-columns: as specified, but with
relative lengths converted into absolute lengthsgrid-template-areas: as specifiedgrid-auto-rows: the percentage as specified or the absolute lengthgrid-auto-columns: the percentage as specified or the absolute lengthgrid-auto-flow: as specifiedgrid-column-gap: the percentage as specified or the absolute leng...
height - CSS: Cascading Style Sheets
a percentage height on the root element is
relative to the initial containing block.computed valuea percentage or auto or the absolute lengthanimation typea length, percentage or calc(); formal syntax auto | <length> | <percentage> | min-content | max-content | fit-content(<length-percentage>)where <length-percentage> = <length> | <percentage> examples setting height using pixels and percentages html <div id="taller">i'm 50 pixels tall.
hyphens - CSS: Cascading Style Sheets
it can prevent hyphenation enti
rely, hyphenate at manually-specified points within the text, or let the browser automatically insert hyphens where appropriate.
ime-mode - CSS: Cascading Style Sheets
<input type="text" name="name" value="initial value" style="ime-mode: disabled"> note: you shouldn't
rely on disabling ime to prevent extended characters from passing through your form.
inherit - CSS: Cascading Style Sheets
for non-inherited properties, this specifies a behavior that typically makes
relatively little sense and you may consider using initial instead, or unset on the all property.
inset-block-end - CSS: Cascading Style Sheets
ed valuesame as box offsets: top, right, bottom, left properties except that directions are logicalanimation typea length, percentage or calc(); formal syntax <'top'> examples setting block end offset html <div> <p class="exampletext">example text</p> </div> css div { background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: vertical-rl; position:
relative; inset-block-end: 20px; background-color: #c8c800; } result specifications specification status comment css logical properties and values level 1the definition of 'inset-block-end' in that specification.
inset-block-start - CSS: Cascading Style Sheets
valuesame as box offsets: top, right, bottom, left properties except that directions are logicalanimation typea length, percentage or calc(); formal syntax <'top'> examples setting block start offset html <div> <p class="exampletext">example text</p> </div> css div { background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: vertical-lr; position:
relative; inset-block-start: 20px; background-color: #c8c800; } specifications specification status comment css logical properties and values level 1the definition of 'inset-block-start' in that specification.
inset-block - CSS: Cascading Style Sheets
box offsets: top, right, bottom, left properties except that directions are logicalanimation typea length, percentage or calc(); formal syntax <'top'>{1,2} examples setting block start and end offsets html <div> <p class="exampletext">example text</p> </div> css div { background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: vertical-lr; position:
relative; inset-block: 20px 50px; background-color: #c8c800; } result specifications specification status comment css logical properties and values level 1the definition of 'inset-block' in that specification.
inset-inline-end - CSS: Cascading Style Sheets
ed valuesame as box offsets: top, right, bottom, left properties except that directions are logicalanimation typea length, percentage or calc(); formal syntax <'top'> examples setting inline end offset html <div> <p class="exampletext">example text</p> </div> css div { background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: vertical-rl; position:
relative; inset-inline-end: 20px; background-color: #c8c800; } result specifications specification status comment css logical properties and values level 1the definition of 'inset-inline-end' in that specification.
inset-inline-start - CSS: Cascading Style Sheets
valuesame as box offsets: top, right, bottom, left properties except that directions are logicalanimation typea length, percentage or calc(); formal syntax <'top'> examples setting inline start offset html <div> <p class="exampletext">example text</p> </div> css div { background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: vertical-lr; position:
relative; inset-inline-start: 20px; background-color: #c8c800; } result specifications specification status comment css logical properties and values level 1the definition of 'inset-inline-start' in that specification.
inset-inline - CSS: Cascading Style Sheets
ox offsets: top, right, bottom, left properties except that directions are logicalanimation typea length, percentage or calc(); formal syntax <'top'>{1,2} examples setting inline start and end offsets html <div> <p class="exampletext">example text</p> </div> css div { background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: vertical-lr; position:
relative; inset-inline: 20px 50px; background-color: #c8c800; } result specifications specification status comment css logical properties and values level 1the definition of 'inset-inline' in that specification.
inset - CSS: Cascading Style Sheets
ight of containing blockcomputed valuesame as box offsets: top, right, bottom, left properties except that directions are logicalanimation typea length, percentage or calc(); formal syntax <'top'>{1,4} examples setting offsets for an element html <div> <span class="exampletext">example text</span> </div> css div { background-color: yellow; width: 150px; height: 120px; position:
relative; } .exampletext { writing-mode: sideways-rl; position: absolute; inset: 20px 40px 30px 10px; background-color: #c8c800; } result specifications specification status comment css logical properties and values level 1the definition of 'inset' in that specification.
justify-content - CSS: Cascading Style Sheets
regardless of the
relative sizes of the item and alignment container, and regardless of whether overflow which causes data loss might happen, the given alignment value is honored.
margin-block - CSS: Cascading Style Sheets
/* <length> values */ margin-block: 10px 20px; /* an absolute length */ margin-block: 1em 2em; /*
relative to the text size */ margin-block: 5% 2%; /*
relative to the nearest block container's width */ margin-block: 10px; /* sets both start and end values */ /* keyword values */ margin-block: auto; /* global values */ margin-block: inherit; margin-block: initial; margin-block: unset; these values corresponds to the margin-top and margin-bottom, or margin-right, and margin-left property depending on the values defined for writing-mode, direction, and text-orientation.
margin-inline-end - CSS: Cascading Style Sheets
syntax /* <length> values */ margin-inline-end: 10px; /* an absolute length */ margin-inline-end: 1em; /*
relative to the text size */ margin-inline-end: 5%; /*
relative to the nearest block container's width */ /* keyword values */ margin-inline-end: auto; /* global values */ margin-inline-end: inherit; margin-inline-end: initial; margin-inline-end: unset; it
relates to margin-block-start, margin-block-end, and margin-inline-start, which define the other margins of the element.
margin-inline-start - CSS: Cascading Style Sheets
syntax /* <length> values */ margin-inline-start: 10px; /* an absolute length */ margin-inline-start: 1em; /*
relative to the text size */ margin-inline-start: 5%; /*
relative to the nearest block container's width */ /* keyword values */ margin-inline-start: auto; /* global values */ margin-inline-start: inherit; it
relates to margin-block-start, margin-block-end, and margin-inline-end, which define the other margins of the element.
margin-inline - CSS: Cascading Style Sheets
/* <length> values */ margin-inline: 10px 20px; /* an absolute length */ margin-inline: 1em 2em; /*
relative to the text size */ margin-inline: 5% 2%; /*
relative to the nearest block container's width */ margin-inline: 10px; /* sets both start and end values */ /* keyword values */ margin-inline: auto; /* global values */ margin-inline: inherit; margin-inline: initial; margin-inline: unset; this property corresponds to the margin-top and margin-bottom, or margin-right, and margin-left properties, depending on the values define...
mask-border-outset - CSS: Cascading Style Sheets
formal definition initial value0applies toall elements; in svg, it applies to container elements excluding the defs element and all graphics elementsinheritednocomputed valueas specified, but with
relative lengths converted into absolute lengthsanimation typediscrete formal syntax [ <length> | <number> ]{1,4} examples basic usage this property doesn't appear to be supported anywhere yet.
mask-size - CSS: Cascading Style Sheets
formal definition initial valueautoapplies toall elements; in svg, it applies to container elements excluding the defs element and all graphics elementsinheritednocomputed valueas specified, but with
relative lengths converted into absolute lengthsanimation 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(re...
mask-type - CSS: Cascading Style Sheets
values luminance is a keyword indicating that the associated mask image is a luminance mask, i.e., that its
relative luminance values must be used when applying it.
mask - CSS: Cascading Style Sheets
sk-image: as specified, but with <url> values made absolutemask-mode: as specifiedmask-repeat: consists of two keywords, one per dimensionmask-position: consists of two keywords representing the origin and two offsets from that origin, each given as an absolute length (if given a <length>), otherwise as a percentage.mask-clip: as specifiedmask-origin: as specifiedmask-size: as specified, but with
relative lengths converted into absolute lengthsmask-composite: as specifiedanimation typeas each of the properties of the shorthand:mask-image: discretemask-mode: discretemask-repeat: discretemask-position: repeatable list of simple list of length, percentage, or calcmask-clip: discretemask-origin: discretemask-size: repeatable list of simple list of length, percentage, or calcmask-composite: discre...
max() - CSS: Cascading Style Sheets
a suggestion is to use the min() function nested within a max() that has as its second value a
relative length unit that is always large enough to read.
minmax() - CSS: Cascading Style Sheets
<percentage> a non-negative percentage
relative to the inline size of the grid container in column grid tracks, and the block size of the grid container in row grid tracks.
offset-rotate - CSS: Cascading Style Sheets
the path direction, with optional additional angle */ offset-rotate: auto; offset-rotate: auto 45deg; /* follow the path direction but facing the opposite direction of `auto` */ offset-rotate: reverse; /* keep a constant rotation regardless the position on the path */ offset-rotate: 90deg; offset-rotate: .5turn; auto the element is rotated by the angle of the direction of the offset-path,
relative to the positive x-axis.
offset - CSS: Cascading Style Sheets
svg) 30deg / 50px 100px; formal definition initial valueas each of the properties of the shorthand:offset-position: autooffset-path: noneoffset-distance: 0offset-anchor: autooffset-rotate: autoapplies totransformable elementsinheritednopercentagesas each of the properties of the shorthand:offset-position: refertosizeofcontainingblockoffset-distance: refer to the total path lengthoffset-anchor:
relativetowidthandheightcomputed valueas each of the properties of the shorthand:offset-position: for <length> the absolute value, otherwise a percentageoffset-path: as specifiedoffset-distance: for <length> the absolute value, otherwise a percentageoffset-anchor: for <length> the absolute value, otherwise a percentageoffset-rotate: as specifiedanimation typeas each of the properties of the shorthand...
outline-offset - CSS: Cascading Style Sheets
formal definition initial value0applies toall elementsinheritednocomputed valueas specified, but with
relative lengths converted into absolute lengthsanimation typea length formal syntax <length> examples setting outline offset in pixels html <p>gallia est omnis divisa in partes tres.</p> css p { outline: 1px dashed red; outline-offset: 10px; background: yellow; border: 1px solid blue; margin: 15px; } result specifications specification status comment ...
Guide to scroll anchoring - CSS: Cascading Style Sheets
these suppression triggers are changes to the computed value of any of the following properties: top, left, right, or bottom margin or padding any width or height-
related properties transform additionally, position changes anywhere inside the scrolling box also disable scroll anchoring.
overscroll-behavior-block - CSS: Cascading Style Sheets
scroll boundaries of the yellow inner box are reached, the whole page does not begin to scroll.</p> </div> </div> </main> css main { height: 3000px; width: 500px; background-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...
overscroll-behavior-inline - CSS: Cascading Style Sheets
scroll boundaries of the yellow inner box are reached, the whole page does not begin to scroll.</p> </div> </div> </main> css main { height: 400px; width: 3000px; background-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...
overscroll-behavior-x - CSS: Cascading Style Sheets
to avoid this, you can set overscroll-behavior-x: contain on the inner box: main > div { height: 300px; width: 500px; overflow: auto; position:
relative; top: 100px; left: 100px; overscroll-behavior-x: contain; } specifications specification status comment css overscroll behavior module level 1the definition of 'overscroll-behavior-x' in that specification.
padding-block - CSS: Cascading Style Sheets
/* <length> values */ padding-block: 10px 20px; /* an absolute length */ padding-block: 1em 2em; /*
relative to the text size */ padding-block: 10px; /* sets both start and end values */ /* <percentage> values */ padding-block: 5% 2%; /*
relative to the nearest block container's width */ /* global values */ padding-block: inherit; padding-block: initial; padding-block: unset; these values corresponds to the padding-top and padding-bottom, or padding-right, and padding-left property depending on the values defined for writing-mode, direction, and text-or...
scroll-padding-block-end - CSS: Cascading Style Sheets
formal definition initial valueautoapplies toscroll containersinheritednopercentages
relative to the scroll container's scrollportcomputed valueas specifiedanimation typeby computed value type formal syntax auto | <length-percentage>where <length-percentage> = <length> | <percentage> specifications specification status comment css scroll snap module level 1the definition of 'scroll-padding-block-end' in that specification.
scroll-padding-block-start - CSS: Cascading Style Sheets
formal definition initial valueautoapplies toscroll containersinheritednopercentages
relative to the scroll container's scrollportcomputed valueas specifiedanimation typeby computed value type formal syntax auto | <length-percentage>where <length-percentage> = <length> | <percentage> specifications specification status comment css scroll snap module level 1the definition of 'scroll-padding-block-start' in that specification.
scroll-padding-block - CSS: Cascading Style Sheets
formal definition initial valueautoapplies toscroll containersinheritednopercentages
relative to the scroll container's scrollportcomputed valueas specifiedanimation typeby computed value type formal syntax [ auto | <length-percentage> ]{1,2}where <length-percentage> = <length> | <percentage> specifications specification status comment css scroll snap module level 1the definition of 'scroll-padding-block' in that specification.
scroll-padding-bottom - CSS: Cascading Style Sheets
formal definition initial valueautoapplies toscroll containersinheritednopercentages
relative to the scroll container's scrollportcomputed valueas specifiedanimation typeby computed value type formal syntax auto | <length-percentage>where <length-percentage> = <length> | <percentage> specifications specification status comment css scroll snap module level 1the definition of 'scroll-padding-bottom' in that specification.
scroll-padding-inline-end - CSS: Cascading Style Sheets
formal definition initial valueautoapplies toscroll containersinheritednopercentages
relative to the scroll container's scrollportcomputed valueas specifiedanimation typeby computed value type formal syntax auto | <length-percentage>where <length-percentage> = <length> | <percentage> specifications specification status comment css scroll snap module level 1the definition of 'scroll-padding-inline-end' in that specification.
scroll-padding-inline-start - CSS: Cascading Style Sheets
formal definition initial valueautoapplies toscroll containersinheritednopercentages
relative to the scroll container's scrollportcomputed valueas specifiedanimation typeby computed value type formal syntax auto | <length-percentage>where <length-percentage> = <length> | <percentage> specifications specification status comment css scroll snap module level 1the definition of 'scroll-padding-inline-start' in that specification.
scroll-padding-inline - CSS: Cascading Style Sheets
formal definition initial valueautoapplies toscroll containersinheritednopercentages
relative to the scroll container's scrollportcomputed valueas specifiedanimation typeby computed value type formal syntax [ auto | <length-percentage> ]{1,2}where <length-percentage> = <length> | <percentage> specifications specification status comment css scroll snap module level 1the definition of 'scroll-padding-inline' in that specification.
scroll-padding-left - CSS: Cascading Style Sheets
formal definition initial valueautoapplies toscroll containersinheritednopercentages
relative to the scroll container's scrollportcomputed valueas specifiedanimation typeby computed value type formal syntax auto | <length-percentage>where <length-percentage> = <length> | <percentage> specifications specification status comment css scroll snap module level 1the definition of 'scroll-padding-left' in that specification.
scroll-padding-right - CSS: Cascading Style Sheets
formal definition initial valueautoapplies toscroll containersinheritednopercentages
relative to the scroll container's scrollportcomputed valueas specifiedanimation typeby computed value type formal syntax auto | <length-percentage>where <length-percentage> = <length> | <percentage> specifications specification status comment css scroll snap module level 1the definition of 'scroll-padding-right' in that specification.
scroll-padding-top - CSS: Cascading Style Sheets
formal definition initial valueautoapplies toscroll containersinheritednopercentages
relative to the scroll container's scrollportcomputed valueas specifiedanimation typeby computed value type formal syntax auto | <length-percentage>where <length-percentage> = <length> | <percentage> specifications specification status comment css scroll snap module level 1the definition of 'scroll-padding-top' in that specification.
scroll-padding - CSS: Cascading Style Sheets
formal definition initial valueautoapplies toscroll containersinheritednopercentages
relative to the scroll container's scrollportcomputed valueas specifiedanimation typeby computed value type formal syntax [ auto | <length-percentage> ]{1,4}where <length-percentage> = <length> | <percentage> specifications specification status comment css scroll snap module level 1the definition of 'scroll-padding' in that specification.
scroll-snap-coordinate - CSS: Cascading Style Sheets
formal definition initial valuenoneapplies toall elementsinheritednopercentagesrefer to the element’s border boxcomputed valueas specified, but with
relative lengths converted into absolute lengthsanimation typea position formal syntax none | <position>#where <position> = [ [ left | center | right ] | [ top | center | bottom ] | [ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ]?
scroll-snap-destination - CSS: Cascading Style Sheets
formal definition initial value0px 0pxapplies toscroll containersinheritednopercentages
relative to same axis of the padding-box of the scroll containercomputed valueas specified, but with
relative lengths converted into absolute lengthsanimation typea position formal syntax <position>where <position> = [ [ left | center | right ] | [ top | center | bottom ] | [ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ]?
shape-margin - CSS: Cascading Style Sheets
formal definition initial value0applies tofloatsinheritednopercentagesrefer to the width of the containing blockcomputed valueas specified, but with
relative lengths converted into absolute lengthsanimation typea length, percentage or calc(); formal syntax <length-percentage>where <length-percentage> = <length> | <percentage> examples adding a margin to a polygon html <section> <div class="shape"></div> we are not quite sure of any one thing in biology; our knowledge of geology is
relatively very slight, and the economic laws of society are...
Getting Started - Developer guides
the two major features of ajax allow you to do the following: make requests to the server without
reloading the page receive and work with data from the server step 1 – how to make an http request in order to make an http request to the server with javascript, you need an instance of an object with the necessary functionality.
Setting up adaptive streaming media sources - Developer guides
you have generated your mpd file you can reference as expected it from within the <video> element: <video src="my.mpd" type="application/dash+xml"></video> it might be wise to provide a fallback: <video> <source src="my.mpd" type="application/dash+xml"> <!-- fallback --> <source src="my.mp4" type="video/mp4"> <source src="my.webm" type="video/webm"> </video> note: mpeg-dash playback
relies on dash.js and browser support for media source extensions, see the latest dash.js reference player.
Media events - Developer guides
emptied the media has become empty; for example, this event is sent if the media has already been loaded (or partially loaded), and the load() method is called to
reload it.
Event developer guide - Developer guides
this article provides details about the coordinate systems at play and how you use them.overview of events and handlersevents and event handling provide a core technique in javascript for reacting to incidents occurring when a browser accesses a web page, including events from preparing a web page for display, from interacting with the content of the web page,
relating to the device on which the browser is running, and from many other causes such as media stream playback or animation timing.touch events (mozilla experimental)the experimental touch events api described on this page was available from gecko 2.0 (firefox 4 / thunderbird 3.3 / seamonkey 2.1) to gecko/firefox 17.
Making content editable - Developer guides
you can use the older firefox behavior with this line: document.execcommand("defaultparagraphseparator", false, "br"); security for security reasons, firefox doesn't let javascript code use clipboard
related features (copy, paste, etc.) by default.
A hybrid approach - Developer guides
another downside is that because this approach
relies on responsive design, it typically works best on a new project or one that has an existing flexible layout, not as a retrofit.
Mobile-friendliness - Developer guides
goal #3 (performance) “give your users a smooth experience, even on a slow connection.” though things have been getting better in recent years, browsing the internet over a wi
reless data connection can still be pretty painful.
Printing - Developer guides
<link href="/path/to/print.css" media="print"
rel="stylesheet" /> using media queries to improve layout detecting print requests some browsers (including firefox 6 and later and internet explorer) send beforeprint and afterprint events to let content determine when printing may have occurred.
The HTML autocomplete attribute - HTML: Hypertext Markup Language
form layout flexibility given that different countries write their address in different ways, with each field in different places within the address, and even different sets and numbers of fields enti
rely, it can be helpful if, when possible, your site is able to switch to the layout expected by your users when presenting an address entry form, given the country the address is located within.
accesskey - HTML: Hypertext Markup Language
accesskey values that
rely on numbers may be confusing to individuals experiencing cognitive concerns, where the number doesn't have a logical association with the functionality it triggers.
dir - HTML: Hypertext Markup Language
as the directionality of the text is semantically
related to its content and not to its presentation, it is recommended that web developers use this attribute instead of the
related css properties when possible.
id - HTML: Hypertext Markup Language
this attribute's value is an opaque string: this means that web authors should not
rely on it to convey human-readable information (although having your ids somewhat human-readable can be useful for code comprehension, e.g.
Link types: dns-prefetch - HTML: Hypertext Markup Language
the dns-prefetch keyword for the
rel attribute of the <link> element is a hint to browsers that the user is likely to need resources from the target resource's origin, and therefore the browser can likely improve the user experience by preemptively performing dns resolution for that origin.
Link types: noreferrer - HTML: Hypertext Markup Language
the noreferrer keyword for the
rel attribute of the <a>, <area>, and <form> elements instructs the browser, when navigating to the target resource, to omit the referer header and otherwise leak no referrer information — and additionally to behave as if the noopener keyword were also specified.
Link types: preconnect - HTML: Hypertext Markup Language
the preconnect keyword for the
rel attribute of the <link> element is a hint to browsers that the user is likely to need resources from the target resource's origin, and therefore the browser can likely improve the user experience by preemptively initiating a connection to that origin.
Link types: prefetch - HTML: Hypertext Markup Language
the prefetch keyword for the
rel attribute of the <link> element is a hint to browsers that the user is likely to need the target resource for future navigations, and therefore the browser can likely improve the user experience by preemptively fetching and caching the resource.
Link types: prerender - HTML: Hypertext Markup Language
the prerender keyword for the
rel attribute of the <link> element is a hint to browsers that the user might need the target resource for the next navigation, and therefore the browser can likely improve the user experience by preemptively fetching and processing the resource — for example, by fetching its subresources or performing some rendering in the background offscreen.
Identifying resources on the Web - HTTP
each web server has its own rules regarding parameters, and the only
reliable way to know how a specific web server is handling parameters is by asking the web server owner.
Basics of HTTP - HTTP
http is an extensible protocol that
relies on concepts like resources and uniform resource identifiers (uris), simple message structure, and client-server communication flow.
Cross-Origin Resource Sharing (CORS) - HTTP
note: these are the same kinds of cross-site requests that web content can already issue, and no response data is
released to the requester unless the server sends an appropriate header.
Content Security Policy (CSP) - HTTP
content-security-policy: default-src 'none'; style-src cdn.example.com; report-uri /_/csp-reports the html of signup.html looks like this: <!doctype html> <html> <head> <title>sign up</title> <link
rel="stylesheet" href="css/style.css"> </head> <body> ...
List of default Accept values - HTTP
ox */* see bug 170789 safari, chrome */* source internet explorer 8 or earlier */* see ie and the accept header (ieinternals' msdn blog) internet explorer 9 application/javascript, */*;q=0.8 see fiddler is better with internet explorer 9 (ieinternals' msdn blog) values for a css stylesheet when a css stylesheet is requested, via the <link
rel="stylesheet"> html element, most browsers use specific values.
Using Feature Policy - HTTP
you can use feature policies to specify the desired best practices, and
rely on the browser to enforce the policies to prevent regressions.
Accept-CH-Lifetime - HTTP
accept-ch and accept-ch-lifetime headers should be persisted for all secure requests to ensure client hints are sent
reliably.
Accept-CH - HTTP
accept-ch and accept-ch-lifetime headers should be persisted for all secure requests to ensure client hints are sent
reliably.
Accept-Ranges - HTTP
none no range unit is supported, this makes the header equivalent of its own absence and is therefore ra
rely used, though some browsers, like ie9, it is used to disable or remove the pause buttons in the download manager.
Accept - HTTP
*/* any mime type ;q= (q-factor weighting) any value used is placed in an order of preference expressed using
relative quality value called the weight.
Clear-Site-Data - HTTP
"executioncontexts" indicates that the server wishes to
reload all browsing contexts for the origin of the response (location.
reload).
Content-Location - HTTP
header type entity header forbidden header name no syntax content-location: <url> directives <url> a
relative (to the request url) or absolute url.
CSP: manifest-src - HTTP
examples violation cases given this csp header: content-security-policy: manifest-src https://example.com/ the following <link> is blocked and won't load: <link
rel="manifest" href="https://not-example.com/manifest"> specifications specification status comment content security policy level 3the definition of 'manifest-src' in that specification.
CSP: prefetch-src - HTTP
example prefetch resources do not match header given a page with the following content security policy: content-security-policy: prefetch-src https://example.com/ fetches for the following code will return network errors, as the urls provided do not match prefetch-src's source list: <link
rel="prefetch" src="https://example.org/"></link> <link
rel="prerender" src="https://example.org/"></link> specification specification status comment content security policy level 3the definition of 'prefetch-src' in that specification.
CSP: referrer - HTTP
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 enti
rely.
CSP: style-src-elem - HTTP
the http content-security-policy (csp) style-src-elem directive specifies valid sources for stylesheets <style> elements and <link> elements with
rel="stylesheet".
CSP: style-src - HTTP
examples violation cases given this csp header: content-security-policy: style-src https://example.com/ the following stylesheets are blocked and won't load: <link href="https://not-example.com/styles/main.css"
rel="stylesheet" type="text/css" /> <style> #inline-style { background: red; } </style> <style> @import url("https://not-example.com/styles/print.css") print; </style> as well as styles loaded using the link header: link: <https://not-example.com/styles/stylesheet.css>;
rel=stylesheet inline style attributes are also blocked: <div style="display:none">foo</div> as well as styles that are app...
Content-Security-Policy-Report-Only - HTTP
content-security-policy-report-only: default-src 'none'; style-src cdn.example.com; report-uri /_/csp-reports the html of signup.html looks like this: <!doctype html> <html> <head> <title>sign up</title> <link
rel="stylesheet" href="css/style.css"> </head> <body> ...
Digest - HTTP
when
released, the "resource digests for http" draft therefore will obsolete rfc 3230 and will update the standard to be consistent.
Index - HTTP
browsers set adequate values for this header according to their user interface language and even if a user can change it, this happens ra
rely (and is frowned upon as it leads to fingerprinting).
Link - HTTP
examples the uri (absolute or
relative) must be enclosed between < and >: link: <https://example.com>;
rel="preconnect" link: https://bad.example;
rel="preconnect" specifying multiple links you can specify multiple links separated by commas, for example: link: <https://one.example.com>;
rel="preconnect", <https://two.example.com>;
rel="preconnect", <https://three.example.com>;
rel="preconnect" specifications speci...
Location - HTTP
header type response header forbidden header name no syntax location: <url> directives <url> a
relative (to the request url) or absolute url.
SameSite cookies - HTTP
the warning appears because the samesite policy for a cookie has not specified explicitly: set-cookie: flavor=choco while you could
rely on modern browsers to apply samesite=lax automatically, you should rather specify it explicitly to clearly communicate your intent which samesite policy applies to your cookie.
Set-Cookie - HTTP
when an expires date is set, the deadline is
relative to the client the cookie is being set on, not the server.
SourceMap - HTTP
header type response header forbidden header name no syntax sourcemap: <url> x-sourcemap: <url> (deprecated) directives <url> a
relative (to the request url) or absolute url pointing to a source map file.
Want-Digest - HTTP
when
released, the "resource digests for http" draft therefore will obsolete rfc 3230 and will update the standard to be consistent.
HTTP Public Key Pinning (HPKP) - HTTP
add_header public-key-pins 'pin-sha256="base64+primary=="; pin-sha256="base64+backup=="; max-age=5184000; includesubdomains' always; lighttpd the following line with your
relevant key information (pin-sha256="..." fields) will enable hpkp on lighttpd.
Error.prototype.stack - JavaScript
note that if string arguments were passed in with values such as "@", "(", ")" (or if in file names), you could not easily
rely on these for breaking the line into its component parts.
Intl.DateTimeFormat.supportedLocalesOf() - JavaScript
examples using supportedlocalesof assuming a runtime that supports indonesian and german but not balinese in date and time formatting, supportedlocalesof returns the indonesian and german language tags unchanged, even though pinyin collation is neither
relevant to date and time formatting nor used with indonesian, and a specialized german for indonesia is unlikely to be supported.
Intl.DisplayNames.supportedLocalesOf() - JavaScript
examples using supportedlocalesof assuming a runtime that supports indonesian and german but not balinese in date and time formatting, supportedlocalesof returns the indonesian and german language tags unchanged, even though pinyin collation is neither
relevant to date and time formatting nor used with indonesian, and a specialized german for indonesia is unlikely to be supported.
Intl.ListFormat.supportedLocalesOf() - JavaScript
examples using supportedlocalesof assuming a runtime that supports indonesian and german but not balinese in date and time formatting, supportedlocalesof returns the indonesian and german language tags unchanged, even though pinyin collation is neither
relevant to date and time formatting nor used with indonesian, and a specialized german for indonesia is unlikely to be supported.
Intl.NumberFormat.supportedLocalesOf() - JavaScript
examples using supportedlocalesof assuming a runtime that supports indonesian and german but not balinese in number formatting, supportedlocalesof returns the indonesian and german language tags unchanged, even though pinyin collation is neither
relevant to number formatting nor used with indonesian, and a specialized german for indonesia is unlikely to be supported.
Intl.PluralRules.supportedLocalesOf() - JavaScript
examples using supportedlocalesof() assuming a runtime that supports indonesian and german but not balinese in plural formatting, supportedlocalesof returns the indonesian and german language tags unchanged, even though pinyin collation is neither
relevant to plural formatting nor used with indonesian, and a specialized german for indonesia is unlikely to be supported.
JSON - JavaScript
examples example json { "browsers": { "firefox": { "name": "firefox", "pref_url": "about:config", "
releases": { "1": { "
release_date": "2004-11-09", "status": "retired", "engine": "gecko", "engine_version": "1.7" } } } } } specifications specification ecmascript (ecma-262)the definition of 'json' in that specification.
Map - JavaScript
s()) { console.log(key) } // 0 // 1 for (let value of mymap.values()) { console.log(value) } // zero // one for (let [key, value] of mymap.entries()) { console.log(key + ' = ' + value) } // 0 = zero // 1 = one iterating map with foreach() maps can be iterated using the foreach() method: mymap.foreach(function(value, key) { console.log(key + ' = ' + value) }) // 0 = zero // 1 = one
relation with array objects let kvarray = [['key1', 'value1'], ['key2', 'value2']] // use the regular map constructor to transform a 2d key-value array into a map let mymap = new map(kvarray) mymap.get('key1') // returns "value1" // use array.from() to transform a map into a 2d key-value array console.log(array.from(mymap)) // will show you exactly the same array as kvarray // a succinct way to ...
Object.create() - JavaScript
y top-level properties - po: [object object] - pn: [object object] however, setting the generic prototype as the new object's prototype works even better: ocn = object.create( null ); // create "null" object (same as before) object.setprototypeof(ocn, object.prototype); // set new object's prototype to the "generic" object (not standard-object) (in addition to all the string-
related functions shown above, this also adds:) > ocn.valueof() // shows {} > ocn.hasownproperty("x") // shows "false" > ocn.constructor // shows "object() { [native code] }" // ...and all the rest of the properties and methods of object.prototype.
Object.prototype.toString() - JavaScript
const tostring = object.prototype.tostring; tostring.call(new date); // [object date] tostring.call(new string); // [object string] tostring.call(math); // [object math] // since javascript 1.8.5 tostring.call(undefined); // [object undefined] tostring.call(null); // [object null] using tostring() in this way is un
reliable; objects can change the behavior of object.prototype.tostring() by defining a symbol.tostringtag property, leading to unexpected results.
Object.prototype.valueOf() - JavaScript
you ra
rely need to invoke the valueof method yourself; javascript automatically invokes it when encountering an object where a primitive value is expected.
Promise.prototype.finally() - JavaScript
the finally() method is very similar to calling .then(onfinally, onfinally) however there are a couple of differences: when creating a function inline, you can pass it once, instead of being forced to either declare it twice, or create a variable for it a finally callback will not receive any argument, since there's no
reliable means of determining if the promise was fulfilled or rejected.
String() constructor - JavaScript
however, the constructor produces an instance of the type string (an object wrapper) and that's why you ra
rely want to use the string constructor at all.
String.prototype.big() - JavaScript
var worldstring = 'hello, world'; console.log(worldstring.small()); // <small>hello, world</small> console.log(worldstring.big()); // <big>hello, world</big> console.log(worldstring.fontsize(7)); // <fontsize=7>hello, world</fontsize> with the element.style object you can get the element's style attribute and manipulate it more generically, for example: document.getelementbyid('you
relemid').style.fontsize = '2em'; specifications specification ecmascript (ecma-262)the definition of 'string.prototype.big' in that specification.
String.prototype.fontcolor() - JavaScript
red in this line'); // '<font color="red">hello, world</font> is red in this line' console.log(worldstring.fontcolor('ff00') + ' is red in hexadecimal in this line'); // '<font color="ff00">hello, world</font> is red in hexadecimal in this line' with the element.style object you can get the element's style attribute and manipulate it more generically, for example: document.getelementbyid('you
relemid').style.color = 'red'; specifications specification ecmascript (ecma-262)the definition of 'string.prototype.fontcolor' in that specification.
String length - JavaScript
the static property string.length is un
related to the length of strings, it's the arity of the string function (loosely, the number of formal parameters it has), which is 1.
String.prototype.link() - JavaScript
syntax str.link(url) parameters url any string that specifies the href attribute of the <a> tag; it should be a valid url (
relative or absolute), with any & characters escaped as &, and any " characters escaped as ".
direction - SVG: Scalable Vector Graphics
it applies only to glyphs oriented perpendicular to the inline-base direction, which includes the usual case of horizontally-oriented latin or arabic text and the case of narrow-cell latin or arabic characters rotated 90 degrees clockwise
relative to a top-to-bottom inline-base direction.
font-size - SVG: Scalable Vector Graphics
n be applied to any element but it has effect only on the following eight elements: <altglyph>, <text>, <textpath>, <tref>, and <tspan> html, body, svg { height: 100%; } <svg viewbox="0 0 200 30" xmlns="http://www.w3.org/2000/svg"> <text y="20" font-size="smaller">smaller</text> <text x="100" y="20" font-size="2em">2em</text> </svg> usage notes value <absolute-size> | <
relative-size> | <length-percentage> default value medium animatable yes for a description of the values, please refer to the css font-size property.
kerning - SVG: Scalable Vector Graphics
the kerning attribute indicates whether the spacing between glyphs should be adjusted based on kerning tables that are included in the
relevant font (i.e., enable auto-kerning) or instead disable auto-kerning and set the spacing between them to a specific length (typically, zero).
orient - SVG: Scalable Vector Graphics
" stroke="grey" marker-start="url(#dataarrow)" marker-mid="url(#dataarrow)" marker-end="url(#dataarrow)" /> </svg> usage notes value auto | auto-start-reverse | <angle> | <number> default value 0 animatable yes (non-additive) auto this value indicates that the marker is oriented such that its positive x-axis is pointing in a direction
relative to the path at the position the marker is placed.
patternUnits - SVG: Scalable Vector Graphics
only one element is using this attribute: <pattern> html,body,svg { height:100% } <svg viewbox="0 0 200 100" xmlns="http://www.w3.org/2000/svg"> <!-- all geometry properties are
relative to the current user space --> <pattern id="p1" x="12.5" y="12.5" width="25" height="25" patternunits="userspaceonuse"> <circle cx="10" cy="10" r="10" /> </pattern> <!-- all geometry properties are
relative to the target bounding box --> <pattern id="p2" x=".125" y=".125" width=".25" height=".25" patternunits="objectboundingbox"> <circle cx="10" cy="10" r="10" /> </pattern> <!-- left square with user space tiles --> <rect x="10" y="1...
pointer-events - SVG: Scalable Vector Graphics
t's pick a random color between #000000 and #ffffff const color = math.round(math.random() * 0xffffff) // let's format the color to fit css requirements const fill = '#' + color.tostring(16).padstart(6,'0') // let's apply our color in the // element we actually clicked on e.target.style.fill = fill }) as a presentation attribute, it can be applied to any element but it is mostly
relevant only on the following twenty-three elements: <a>, <circle>, <clippath>, <defs>, <ellipse>, <foreignobject>, <g>, <image>, <line>, <marker>, <mask>, <path>, <pattern>, <polygon>, <polyline>, <rect>, <svg>, <switch>, <symbol>, <text>, <textpath>, <tspan>, <use> usage notes value bounding-box | visiblepainted | visiblefill | visiblestroke | visible | painted | fill | stroke | all ...
stroke-miterlimit - SVG: Scalable Vector Graphics
the ratio of miter length (distance between the outer tip and the inner corner of the miter) to stroke-width is directly
related to the angle (theta) between the segments in user space by the formula: stroke-miterlimit = miterlength stroke-width = 1 sin ( θ 2 ) for example, a miter limit of 1.414 converts miters to bevels for theta less than 90 degrees, a limit of 4.0 converts them for theta less than approximately 29 degrees, and a limit of 10.0 converts them for theta less than approximat...
text-anchor - SVG: Scalable Vector Graphics
the text-anchor attribute is used to align (start-, middle- or end-alignment) a string of pre-formatted text or auto-wrapped text where the wrapping area is determined from the inline-size property
relative to a given point.
SVG Attribute reference - SVG: Scalable Vector Graphics
name numoctaves o offset opacity operator order orient orientation origin overflow overline-position overline-thickness p panose-1 paint-order path pathlength patterncontentunits patterntransform patternunits ping pointer-events points pointsatx pointsaty pointsatz preservealpha preserveaspectratio primitiveunits r r radius referrerpolicy refx refy
rel rendering-intent repeatcount repeatdur requiredextensions requiredfeatures restart result rotate rx ry s scale seed shape-rendering slope spacing specularconstant specularexponent speed spreadmethod startoffset stddeviation stemh stemv stitchtiles stop-color stop-opacity strikethrough-position strikethrough-thickness string stroke stroke-dasharray stroke-dashof...
<animateColor> - SVG: Scalable Vector Graphics
criptive elements attributes global attributes conditional processing attributes core attributes animation event attributes xlink attributes animation attribute target attributes animation timing attributes animation value attributes animation addition attributes externalresourcesrequired specific attributes by from to dom interface this element implements the svganimatecolo
relement interface.
<circle> - SVG: Scalable Vector Graphics
, aria-current, aria-describedby, aria-details, aria-disabled, aria-dropeffect, aria-errormessage, aria-expanded, aria-flowto, aria-grabbed, aria-haspopup, aria-hidden, aria-invalid, aria-keyshortcuts, aria-label, aria-labelledby, aria-level, aria-live, aria-modal, aria-multiline, aria-multiselectable, aria-orientation, aria-owns, aria-placeholder, aria-posinset, aria-pressed, aria-readonly, aria-
relevant, aria-required, aria-roledescription, aria-rowcount, aria-rowindex, aria-rowspan, aria-selected, aria-setsize, aria-sort, aria-valuemax, aria-valuemin, aria-valuenow, aria-valuetext, role usage notes categoriesbasic shape element, graphics element, shape elementpermitted contentany number of the following elements, in any order:animation elementsdescriptive elements specifications ...
<cursor> - SVG: Scalable Vector Graphics
usage context categoriesnonepermitted contentany number of the following elements, in any order:descriptive elements attributes global attributes conditional processing attributes core attributes xlink attributes externalresourcesrequired specific attributes x y xlink:href dom interface this element implements the svgcurso
relement interface.
<ellipse> - SVG: Scalable Vector Graphics
, aria-current, aria-describedby, aria-details, aria-disabled, aria-dropeffect, aria-errormessage, aria-expanded, aria-flowto, aria-grabbed, aria-haspopup, aria-hidden, aria-invalid, aria-keyshortcuts, aria-label, aria-labelledby, aria-level, aria-live, aria-modal, aria-multiline, aria-multiselectable, aria-orientation, aria-owns, aria-placeholder, aria-posinset, aria-pressed, aria-readonly, aria-
relevant, aria-required, aria-roledescription, aria-rowcount, aria-rowindex, aria-rowspan, aria-selected, aria-setsize, aria-sort, aria-valuemax, aria-valuemin, aria-valuenow, aria-valuetext, role usage notes categoriesbasic shape element, graphics element, shape elementpermitted contentany number of the following elements, in any order:animation elementsdescriptive elements specifications ...
<feComponentTransfer> - SVG: Scalable Vector Graphics
usage context categoriesfilter primitive elementpermitted contentany number of the following 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 svgfecomponenttransfe
relement interface.
<feConvolveMatrix> - SVG: Scalable Vector Graphics
note in the above formulas that the values in the kernel matrix are applied such that the kernel matrix is rotated 180 degrees
relative to the source and destination images in order to match convolution theory as described in many computer graphics textbooks.
<feFuncR> - SVG: Scalable Vector Graphics
usage context categoriesnonepermitted contentany number of the following elements, in any order:<animate>, <set> attributes global attributes core attributes transfer function attributes specific attributes none dom interface this element implements the svgfefunc
relement interface.
<feGaussianBlur> - SVG: Scalable Vector Graphics
usage context categoriesfilter primitive elementpermitted contentany number of the following elements, in any order:<animate>, <set> attributes global attributes core attributes presentation attributes filter primitive attributes class style specific attributes in stddeviation edgemode dom interface this element implements the svgfegaussianblu
relement interface.
<filter> - SVG: Scalable Vector Graphics
entany number of the following elements, in any order:descriptive elementsfilter primitive elements<animate>, <set> attributes global attributes core attributes presentation attributes xlink attributes class style externalresourcesrequired specific attributes x y width height filterres filterunits primitiveunits xlink:href dom interface this element implements the svgfilte
relement interface.
<foreignObject> - SVG: Scalable Vector Graphics
, aria-current, aria-describedby, aria-details, aria-disabled, aria-dropeffect, aria-errormessage, aria-expanded, aria-flowto, aria-grabbed, aria-haspopup, aria-hidden, aria-invalid, aria-keyshortcuts, aria-label, aria-labelledby, aria-level, aria-live, aria-modal, aria-multiline, aria-multiselectable, aria-orientation, aria-owns, aria-placeholder, aria-posinset, aria-pressed, aria-readonly, aria-
relevant, aria-required, aria-roledescription, aria-rowcount, aria-rowindex, aria-rowspan, aria-selected, aria-setsize, aria-sort, aria-valuemax, aria-valuemin, aria-valuenow, aria-valuetext, role usage notes categoriesnonepermitted contentany elements or character data specifications specification status comment scalable vector graphics (svg) 2the definition of '<for...
<g> - SVG: Scalable Vector Graphics
, aria-current, aria-describedby, aria-details, aria-disabled, aria-dropeffect, aria-errormessage, aria-expanded, aria-flowto, aria-grabbed, aria-haspopup, aria-hidden, aria-invalid, aria-keyshortcuts, aria-label, aria-labelledby, aria-level, aria-live, aria-modal, aria-multiline, aria-multiselectable, aria-orientation, aria-owns, aria-placeholder, aria-posinset, aria-pressed, aria-readonly, aria-
relevant, aria-required, aria-roledescription, aria-rowcount, aria-rowindex, aria-rowspan, aria-selected, aria-setsize, aria-sort, aria-valuemax, aria-valuemin, aria-valuenow, aria-valuetext, role usage notes categoriescontainer element, structural elementpermitted contentany number of the following elements, in any order:animation elementsdescriptive elementsshape elementsstructural elementsgradi...
<line> - SVG: Scalable Vector Graphics
, aria-current, aria-describedby, aria-details, aria-disabled, aria-dropeffect, aria-errormessage, aria-expanded, aria-flowto, aria-grabbed, aria-haspopup, aria-hidden, aria-invalid, aria-keyshortcuts, aria-label, aria-labelledby, aria-level, aria-live, aria-modal, aria-multiline, aria-multiselectable, aria-orientation, aria-owns, aria-placeholder, aria-posinset, aria-pressed, aria-readonly, aria-
relevant, aria-required, aria-roledescription, aria-rowcount, aria-rowindex, aria-rowspan, aria-selected, aria-setsize, aria-sort, aria-valuemax, aria-valuemin, aria-valuenow, aria-valuetext, role usage notes categoriesbasic shape element, graphics element, shape elementpermitted contentany number of the following elements, in any order:animation elementsdescriptive elements specifications ...
<path> - SVG: Scalable Vector Graphics
, aria-current, aria-describedby, aria-details, aria-disabled, aria-dropeffect, aria-errormessage, aria-expanded, aria-flowto, aria-grabbed, aria-haspopup, aria-hidden, aria-invalid, aria-keyshortcuts, aria-label, aria-labelledby, aria-level, aria-live, aria-modal, aria-multiline, aria-multiselectable, aria-orientation, aria-owns, aria-placeholder, aria-posinset, aria-pressed, aria-readonly, aria-
relevant, aria-required, aria-roledescription, aria-rowcount, aria-rowindex, aria-rowspan, aria-selected, aria-setsize, aria-sort, aria-valuemax, aria-valuemin, aria-valuenow, aria-valuetext, role usage notes categoriesgraphics element, shape elementpermitted contentany number of the following elements, in any order:animation elementsdescriptive elements specifications specification ...
<polygon> - SVG: Scalable Vector Graphics
, aria-current, aria-describedby, aria-details, aria-disabled, aria-dropeffect, aria-errormessage, aria-expanded, aria-flowto, aria-grabbed, aria-haspopup, aria-hidden, aria-invalid, aria-keyshortcuts, aria-label, aria-labelledby, aria-level, aria-live, aria-modal, aria-multiline, aria-multiselectable, aria-orientation, aria-owns, aria-placeholder, aria-posinset, aria-pressed, aria-readonly, aria-
relevant, aria-required, aria-roledescription, aria-rowcount, aria-rowindex, aria-rowspan, aria-selected, aria-setsize, aria-sort, aria-valuemax, aria-valuemin, aria-valuenow, aria-valuetext, role usage notes categoriesbasic shape element, graphics element, shape elementpermitted contentany number of the following elements, in any order:animation elementsdescriptive elements specifications ...
<polyline> - SVG: Scalable Vector Graphics
, aria-current, aria-describedby, aria-details, aria-disabled, aria-dropeffect, aria-errormessage, aria-expanded, aria-flowto, aria-grabbed, aria-haspopup, aria-hidden, aria-invalid, aria-keyshortcuts, aria-label, aria-labelledby, aria-level, aria-live, aria-modal, aria-multiline, aria-multiselectable, aria-orientation, aria-owns, aria-placeholder, aria-posinset, aria-pressed, aria-readonly, aria-
relevant, aria-required, aria-roledescription, aria-rowcount, aria-rowindex, aria-rowspan, aria-selected, aria-setsize, aria-sort, aria-valuemax, aria-valuemin, aria-valuenow, aria-valuetext, role usage notes categoriesbasic shape element, graphics element, shape elementpermitted contentany number of the following elements, in any order:animation elementsdescriptive elements specifications ...
<rect> - SVG: Scalable Vector Graphics
, aria-current, aria-describedby, aria-details, aria-disabled, aria-dropeffect, aria-errormessage, aria-expanded, aria-flowto, aria-grabbed, aria-haspopup, aria-hidden, aria-invalid, aria-keyshortcuts, aria-label, aria-labelledby, aria-level, aria-live, aria-modal, aria-multiline, aria-multiselectable, aria-orientation, aria-owns, aria-placeholder, aria-posinset, aria-pressed, aria-readonly, aria-
relevant, aria-required, aria-roledescription, aria-rowcount, aria-rowindex, aria-rowspan, aria-selected, aria-setsize, aria-sort, aria-valuemax, aria-valuemin, aria-valuenow, aria-valuetext, role usage notes categoriesbasic shape element, graphics element, shape elementpermitted contentany number of the following elements, in any order:animation elementsdescriptive elements specifications ...
<svg> - SVG: Scalable Vector Graphics
, aria-current, aria-describedby, aria-details, aria-disabled, aria-dropeffect, aria-errormessage, aria-expanded, aria-flowto, aria-grabbed, aria-haspopup, aria-hidden, aria-invalid, aria-keyshortcuts, aria-label, aria-labelledby, aria-level, aria-live, aria-modal, aria-multiline, aria-multiselectable, aria-orientation, aria-owns, aria-placeholder, aria-posinset, aria-pressed, aria-readonly, aria-
relevant, aria-required, aria-roledescription, aria-rowcount, aria-rowindex, aria-rowspan, aria-selected, aria-setsize, aria-sort, aria-valuemax, aria-valuemin, aria-valuenow, aria-valuetext, role usage notes categoriescontainer element, structural elementpermitted contentany number of the following elements, in any order:animation elementsdescriptive elementsshape elementsstructural elementsgradi...
<symbol> - SVG: Scalable Vector Graphics
, aria-current, aria-describedby, aria-details, aria-disabled, aria-dropeffect, aria-errormessage, aria-expanded, aria-flowto, aria-grabbed, aria-haspopup, aria-hidden, aria-invalid, aria-keyshortcuts, aria-label, aria-labelledby, aria-level, aria-live, aria-modal, aria-multiline, aria-multiselectable, aria-orientation, aria-owns, aria-placeholder, aria-posinset, aria-pressed, aria-readonly, aria-
relevant, aria-required, aria-roledescription, aria-rowcount, aria-rowindex, aria-rowspan, aria-selected, aria-setsize, aria-sort, aria-valuemax, aria-valuemin, aria-valuenow, aria-valuetext, role usage notes categoriescontainer element, structural elementpermitted contentany number of the following elements, in any order:animation elementsdescriptive elementsshape elementsstructural elementsgradi...
<text> - SVG: Scalable Vector Graphics
, aria-current, aria-describedby, aria-details, aria-disabled, aria-dropeffect, aria-errormessage, aria-expanded, aria-flowto, aria-grabbed, aria-haspopup, aria-hidden, aria-invalid, aria-keyshortcuts, aria-label, aria-labelledby, aria-level, aria-live, aria-modal, aria-multiline, aria-multiselectable, aria-orientation, aria-owns, aria-placeholder, aria-posinset, aria-pressed, aria-readonly, aria-
relevant, aria-required, aria-roledescription, aria-rowcount, aria-rowindex, aria-rowspan, aria-selected, aria-setsize, aria-sort, aria-valuemax, aria-valuemin, aria-valuenow, aria-valuetext, role usage notes categoriesgraphics element, text content elementpermitted contentcharacter data and any number of the following elements, in any order:animation elementsdescriptive elementstext content eleme...
<textPath> - SVG: Scalable Vector Graphics
, aria-current, aria-describedby, aria-details, aria-disabled, aria-dropeffect, aria-errormessage, aria-expanded, aria-flowto, aria-grabbed, aria-haspopup, aria-hidden, aria-invalid, aria-keyshortcuts, aria-label, aria-labelledby, aria-level, aria-live, aria-modal, aria-multiline, aria-multiselectable, aria-orientation, aria-owns, aria-placeholder, aria-posinset, aria-pressed, aria-readonly, aria-
relevant, aria-required, aria-roledescription, aria-rowcount, aria-rowindex, aria-rowspan, aria-selected, aria-setsize, aria-sort, aria-valuemax, aria-valuemin, aria-valuenow, aria-valuetext, role xlink attributes xlink:title usage notes categoriestext content element, text content child elementpermitted contentcharacter data and any number of the following elements, in any order:descriptive ele...
<tspan> - SVG: Scalable Vector Graphics
, aria-current, aria-describedby, aria-details, aria-disabled, aria-dropeffect, aria-errormessage, aria-expanded, aria-flowto, aria-grabbed, aria-haspopup, aria-hidden, aria-invalid, aria-keyshortcuts, aria-label, aria-labelledby, aria-level, aria-live, aria-modal, aria-multiline, aria-multiselectable, aria-orientation, aria-owns, aria-placeholder, aria-posinset, aria-pressed, aria-readonly, aria-
relevant, aria-required, aria-roledescription, aria-rowcount, aria-rowindex, aria-rowspan, aria-selected, aria-setsize, aria-sort, aria-valuemax, aria-valuemin, aria-valuenow, aria-valuetext, role usage notes categoriestext content element, text content child elementpermitted contentcharacter data and any number of the following elements, in any order:descriptive elements<a>, <altglyph>, <animate>...
<use> - SVG: Scalable Vector Graphics
, aria-current, aria-describedby, aria-details, aria-disabled, aria-dropeffect, aria-errormessage, aria-expanded, aria-flowto, aria-grabbed, aria-haspopup, aria-hidden, aria-invalid, aria-keyshortcuts, aria-label, aria-labelledby, aria-level, aria-live, aria-modal, aria-multiline, aria-multiselectable, aria-orientation, aria-owns, aria-placeholder, aria-posinset, aria-pressed, aria-readonly, aria-
relevant, aria-required, aria-roledescription, aria-rowcount, aria-rowindex, aria-rowspan, aria-selected, aria-setsize, aria-sort, aria-valuemax, aria-valuemin, aria-valuenow, aria-valuetext, role xlink attributes xlink:href, xlink:title usage notes categoriesgraphics element, graphics referencing element, structural elementpermitted contentany number of the following elements, in any order:ani...
SVG 2 support in Mozilla - SVG: Scalable Vector Graphics
e> implementation status unknown paths change notes b and b path commands implementation status unknown z and z path commands to add path coordinate data to previous command implementation status unknown not render <path>, <polygon> and <polyline> with no data implementation status unknown svgpathseg*, svganimatedpathdata and
related methods removed from svgpathelement implementation status unknown d attribute as css property implementation status unknown basic shapes change notes pathlength attribute for all basic shapes implementation status unknown svganimatedpoints.animatedpoints as alias of svganimatedpoints.points implementation status unknown a...
Getting started - SVG: Scalable Vector Graphics
unfortunately, it is very problematic to get gzip-compressed svg files to work
reliably across all svg capable user agents when served from a microsoft iis server, and firefox cannot load gzip-compressed svg from the local computer.
Positions - SVG: Scalable Vector Graphics
much like absolute and
relative font sizes in css, svg defines absolute units (ones with a dimensional identifier like "pt" or "cm") and so-called user units, that lack that identifier and are plain numbers.
SVG: Scalable Vector Graphics
svg images and their
related behaviors are defined in xml text files, which means they can be searched, indexed, scripted, and compressed.
How to fix a website with blocked mixed content - Web security
in any case, the best way to know if something is broken in firefox is to download the latest firefox edition, open different pages on your website with the web console open (enable the "security" messages) and see if anything
related to mixed content is reported.
Secure contexts - Web security
locally-delivered resources such as those with http://127.0.0.1 urls, http://localhost urls (under certain conditions), and file:// urls are also considered to have been delivered secu
rely.
HTML Imports - Web Components
you import an html file by using a <link> tag in an html document like this: <link
rel="import" href="myfile.html"> the import link type is new.