Search completed in 2.08 seconds.
Garbage collection - MDN Web Docs Glossary: Definitions of Web-related terms
garbage collect
ion is a term used in computer programming to describe the process of finding and deleting objects which are no longer being referenced by other objects.
... in other words, garbage collect
ion is the process of removing any objects which are not being used by any other objects.
... often abbreviated "gc," garbage collect
ion is a fundamental component of the memory management system used by javascript.
... learn more general knowledge memory management on wikipedia garbage collect
ion on wikipedia technical reference garbage collect
ion in the mdn javascript guide.
Quaternion - MDN Web Docs Glossary: Definitions of Web-related terms
a quatern
ion is the quotient of two 3d vectors and is used in 3d graphics and in accelerometer-based sensors to represent orientat
ion or rotat
ional data.
... while mathematical quatern
ions are more involved than this, the unit quatern
ions (or rotat
ional quatern
ions) used to represent rotat
ion while using webgl or webxr, for example, are represented using the same syntax as a 3d point.
... as such, the type dompoint (or dompointreadonly) is used to store quatern
ions.
... learn more general knowledge quatern
ions and spatial rotat
ion on wikipedia quatern
ion on wikipedia related xrrigidtransform.orientat
ion in the webxr device api reference ...
Recursion - MDN Web Docs Glossary: Definitions of Web-related terms
the act of a funct
ion calling itself, recurs
ion is used to solve problems that contain smaller sub-problems.
... a recursive funct
ion can receive two inputs: a base case (ends recurs
ion) or a recursive case (resumes recurs
ion).
... examples recursive funct
ion calls itself until condit
ion met the following python code defines a funct
ion that takes a number, prints it, and then calls itself again with the number's value -1.
... def recurse(x): if x > 0: print(x) recurse(x - 1) recurse(10) the output will look like this: 10 9 8 7 6 5 4 3 2 1 0 learn more general knowledge recurs
ion (computer science) on wikipedia more details about recurs
ion in javascript ...
Regular expression - MDN Web Docs Glossary: Definitions of Web-related terms
regular express
ions (or regex) are rules that govern which sequences of characters come up in a search.
... regular express
ions are implemented in var
ious languages, but the best-known implementat
ion is the perl implementat
ion, which has given rise to its own ecosystem of implementat
ions called pcre (perl compatible regular express
ion).
... on the web, javascript provides another regex implementat
ion through the regexp object.
... learn more general knowledge regular express
ions on wikipedia interactive tutorial visualized regular express
ion technical reference writing regular express
ions in javascript ...
Application Context - MDN Web Docs Glossary: Definitions of Web-related terms
an applicat
ion context is a top-level browsing context that has a manifest applied to it.
... if an applicat
ion context is created as a result of the user agent being asked to navigate to a deep link, the user agent must immediately navigate to the deep link with replacement enabled.
... otherwise, when the applicat
ion context is created, the user agent must immediately navigate to the start url with replacement enabled.
... please note that the start url is not necessarily the value of the start_url member: the user or user agent could have changed it when the applicat
ion was added to home-screen or otherwise bookmarked.
minification - MDN Web Docs Glossary: Definitions of Web-related terms
minificat
ion is the process of removing unnecessary or redundant data without affecting how a resource is processed by the browser.
... minificat
ion can include the removal of code comments, white space, and unused code, as well as the shortening of variable and funct
ion names.
... minificat
ion is used to improve web performance by reducing file size.
... as minificat
ion makes code less legible to humans, developer tools have 'prettificat
ion' features that can add white space back into the code to make it a bit more legible.
JS_CompileUCFunctionForPrincipalsVersion
this article covers features introduced in spidermonkey 1.8.5 please provide a descript
ion for this funct
ion.
... syntax jsfunct
ion * js_compileucfunct
ionforprincipalsvers
ion(jscontext *cx, jsobject *obj, jsprincipals *principals, const char *name, unsigned int nargs, const char **argnames, const jschar *chars, size_t length, const char *filename, unsigned int lineno, jsvers
ion vers
ion); name type descript
ion cx jscontext * the context.
... obj jsobject * principals jsprincipals * name const char * nargs unsigned int argnames const char ** chars const jschar * length size_t filename const char * lineno unsigned int vers
ion jsvers
ion descript
ion please provide a descript
ion.
... see also please provide a descript
ion.
nsIDOMGeoPositionOptions
the nsidomgeoposit
ionopt
ions interface is used to specify opt
ions for geolocat
ion operat
ions.
... dom/interfaces/geolocat
ion/nsidomgeoposit
ionopt
ions.idlscriptable please add a summary to this article.
... last changed in gecko 1.9.1 (firefox 3.5 / thunderbird 3.0 / seamonkey 2.0) inherits from: nsisupports attributes attribute type descript
ion enablehighaccuracy boolean if true, high accuracy mode is used.
... timeout unsigned long maximum time in milliseconds before giving up on an attempt to retrieve locat
ion informat
ion.
Animation inspector example: Web Animations API - Firefox Developer Tools
firefox-logo-animat
ion example animat
ion using the web animat
ions api.
... html content <div class="channel"> <img src="https://udn.realityripple.com/samples/e6/a96484b5c3.png" id="icon"/> <span id="note">firefox developer edit
ion</span> </div> css content .channel { padding: 2em; margin: 0.5em; box-shadow: 1px 1px 5px #808080; margin: 1.5em; } .channel > * { vertical-align: middle; line-height: normal; } #icon { width: 50px; height: 50px; filter: grayscale(100%); } #note { margin-left: 1em; font: 1.5em "open sans",arial,sans-serif; overflow: hidden; white-space: nowrap; display: inline-block; opacity: 0; width: 0; } javascript content var iconkeyframeset = [ { transform: 'scale(1)', filter: 'grayscale(100%)'}, { filter: 'grayscale(100%)', offset: 0.333}, { transform: 'scale(1.5)', offset: 0.666 }, { transfo...
...rm: 'scale(1.5)', filter: 'grayscale(0%)'} ]; var notekeyframeset = [ { opacity: '0', width: '0'}, { opacity: '1', width: '300px'} ]; var iconkeyframeopt
ions = { durat
ion: 750, fill: 'forwards', easing: 'ease-in', enddelay: 100 } var notekeyframeopt
ions = { durat
ion: 500, fill: 'forwards', easing: 'ease-out', delay: 150 } var icon = document.getelementbyid("icon"); var note = document.getelementbyid("note"); var iconanimat
ion = icon.animate(iconkeyframeset, iconkeyframeopt
ions); var noteanimat
ion = note.animate(notekeyframeset, notekeyframeopt
ions); iconanimat
ion.pause(); noteanimat
ion.pause(); var firsttime = true; funct
ion animatechannel(e) { if (e.button != 0) { return; } if (e.target.id != "icon") { return; } if (firsttime) { iconanimat
io...
...n.play(); noteanimat
ion.play(); firsttime = false; } else { iconanimat
ion.reverse(); noteanimat
ion.reverse(); } } document.addeventlistener("click", animatechannel); ...
AudioBuffer.duration - Web APIs
the durat
ion property of the aud
iobuffer interface returns a double representing the durat
ion, in seconds, of the pcm data stored in the buffer.
... syntax var myarraybuffer = aud
ioctx.createbuffer(2, framecount, aud
ioctx.samplerate); myarraybuffer.durat
ion; value a double.
... example // stereo var channels = 2; // create an empty two second stereo buffer at the // sample rate of the aud
iocontext var framecount = aud
ioctx.samplerate * 2.0; var myarraybuffer = aud
ioctx.createbuffer(2, framecount, aud
ioctx.samplerate); button.onclick = funct
ion() { // fill the buffer with white noise; // just random values between -1.0 and 1.0 for (var channel = 0; channel < channels; channel++) { // this gives us the actual arraybuffer that contains the data var nowbuffering = myarraybuffer.getchanneldata(channel); for (var i = 0; i < framecount; i++) { // math.random() is in [0; 1.0] // aud
io needs to be in [-1.0; 1.0] nowbuffering[i] = math.random() * 2 - 1; } } console.log(myarraybuffer.durat
ion); } specificat
ion spec...
...ificat
ion status comment web aud
io apithe definit
ion of 'durat
ion' in that specificat
ion.
CompositionEvent.initCompositionEvent() - Web APIs
the initcomposit
ionevent() method of the composit
ionevent interface initializes the attributes of a composit
ionevent object instance.
... syntax composit
ioneventinstance.initcomposit
ionevent(typearg, canbubblearg, cancelablearg, viewarg, dataarg, localearg) parameters typearg a domstring representing the type of composit
ion event; this will be one of composit
ionstart, composit
ionupdate, or composit
ionend.
... specificat
ions specificat
ion status comment document object model (dom) level 3 events specificat
ionthe definit
ion of 'initcomposit
ionevent()' in that specificat
ion.
... obsolete initial definit
ion.
DeviceMotionEventRotationRate: alpha - Web APIs
this property indicates the rate of rotat
ion around the z axis -- in degrees per second -- in a devicemot
ioneventrotat
ionrate object.
... syntax var alpha = devicerotat
ionrate.alpha; this property is read-only.
... return value alpha a double indicating the rate of rotat
ion around the z axis, in degrees per second.
... specificat
ions specificat
ion status comment deviceorientat
ion event specificat
ionthe definit
ion of 'devicemot
ioneventrotat
ionrate: alpha' in that specificat
ion.
DeviceMotionEventRotationRate: beta - Web APIs
this property indicates the rate of rotat
ion around the x axis -- in degrees per second -- in a devicemot
ioneventrotat
ionrate object.
... syntax var beta = devicerotat
ionrate.beta; this property is read-only.
... return value beta a double indicating the rate of rotat
ion around the x axis, in degrees per second.
... specificat
ions specificat
ion status comment deviceorientat
ion event specificat
ionthe definit
ion of 'devicemot
ioneventrotat
ionrate: beta' in that specificat
ion.
DeviceMotionEventRotationRate: gamma - Web APIs
this property indicates the rate of rotat
ion around the y axis -- in degrees per second -- in a devicemot
ioneventrotat
ionrate object.
... syntax var gamma = devicerotat
ionrate.gamma; this property is read-only.
... return value gamma a double indicating the rate of rotat
ion around the y axis, in degrees per second.
... specificat
ions specificat
ion status comment deviceorientat
ion event specificat
ionthe definit
ion of 'devicemot
ioneventrotat
ionrate: gamma' in that specificat
ion.
GeolocationPositionError.message - Web APIs
the geolocat
ionposit
ionerror.message read-only property returns a human-readable domstring describing the details of the error.
... syntax let msg = geolocat
ionposit
ionerrorinstance.message value a human-readable domstring describing the details of the error.
... specificat
ions specificat
ion status comment geolocat
ion apithe definit
ion of 'geolocat
ionposit
ionerror.message' in that specificat
ion.
... recommendat
ion initial definit
ion ...
MediaSessionActionDetails.seekOffset - Web APIs
the mediasess
ionact
iondetails dict
ionary's seekoffset property is an opt
ional value passed into the act
ion handler callback to provide the number of seconds the seekforward and seekbackward act
ions should move the playback time by.
... syntax let mediasess
ionact
iondetails = { seekoffset: deltatimeinseconds }; let deltatime = mediasess
ionact
iondetails.seekoffset; value a floating-point value indicating the time delta in seconds by which to move the playback posit
ion relative to its current timestamp.
... specificat
ions specificat
ion status comment media sess
ion standardthe definit
ion of 'mediasess
ionact
iondetails.seekoffset' in that specificat
ion.
... draft initial definit
ion.
MediaStreamAudioDestinationNode.stream - Web APIs
the stream property of the aud
iocontext interface represents a mediastream containing a single aud
iomediastreamtrack with the same number of channels as the node itself.
... you can use this property to get a stream out of the aud
io graph and feed it into another construct, such as a media recorder.
... syntax var aud
ioctx = new aud
iocontext(); var destinat
ion = aud
ioctx.createmediastreamdestinat
ion(); var mystream = destinat
ion.stream; value a mediastream.
... example specificat
ions specificat
ion status comment web aud
io apithe definit
ion of 'stream' in that specificat
ion.
MediaStreamAudioSourceOptions - Web APIs
the mediastreamaud
iosourceopt
ions dict
ionary provides configurat
ion opt
ions used when creating a mediastreamaud
iosourcenode using its constructor.
... it is not needed when using the aud
iocontext.createmediastreamsource() method.
... properties mediastream a required property which specifies the mediastream from which to obtain aud
io for the node.
... specificat
ions specificat
ion status comment web aud
io apithe definit
ion of 'mediastreamaud
iosourceopt
ions' in that specificat
ion.
MediaStreamTrackAudioSourceOptions.mediaStreamTrack - Web APIs
the mediastreamtrackaud
iosourceopt
ions dict
ionary's mediastreamtrack property must contain a reference to the mediastreamtrack from which the mediastreamtrackaud
iosourcenode being created using the mediastreamtrackaud
iosourcenode() constructor.
... syntax mediastreamtrackaud
iosourceopt
ions = { mediastreamtrack: aud
iosourcetrack; } mediastreamtrackaud
iosourceopt
ions.mediastreamtrack = aud
iosourcetrack; value a mediastreamtrack from which the aud
io output of the new mediastreamtrackaud
iosourcenode will be taken.
... example this example uses getusermedia() to obtain access to the user's camera, then creates a new mediastreamaud
iosourcenode from the first aud
io track provided by the device.
... let aud
ioctx = new (window.aud
iocontext || window.webkitaud
iocontext)(); if (navigator.mediadevices.getusermedia) { navigator.mediadevices.getusermedia ( { aud
io: true, video: false }).then(funct
ion(stream) { let opt
ions = { mediastreamtrack: stream.getaud
iotracks()[0]; } let source = new mediastreamtrackaud
iosourcenode(aud
ioctx, opt
ions); source.connect(aud
ioctx.destinat
ion); }).catch(funct
ion(err) { console.log('the following gum error occured: ' + err); }); } else { console.log('new getusermedia not supported on your browser!'); } specificat
ions specificat
ion status comment web aud
io apithe definit
ion of 'mediastreamtrackaud
iosourceopt
ions.mediastream' in that specificat
ion.
MediaStreamTrackAudioSourceOptions - Web APIs
the mediastreamtrackaud
iosourceopt
ions dict
ionary is used when specifying opt
ions to the mediastreamtrackaud
iosourcenode() constructor.
... it isn't needed when using the aud
iocontext.createmediastreamtracksource() method.
... properties mediastreamtrack the mediastreamtrack from which to take aud
io data for this node's output.
... specificat
ions specificat
ion status comment web aud
io apithe definit
ion of 'mediastreamtrackaud
iosourceopt
ions' in that specificat
ion.
Notification.requireInteraction - Web APIs
the requireinteract
ion read-only property of the notificat
ion interface returns a boolean indicating that a notificat
ion should remain active until the user clicks or dismisses it, rather than closing automatically.
... note: this can be set when the notificat
ion is first created by setting the requireinteract
ion opt
ion to true in the opt
ions object of the notificat
ion.notificat
ion() constructor.
... syntax funct
ion spawnnotificat
ion(thetitle,thebody,shouldrequireinteract
ion) { var opt
ions = { body: thebody, requireinteract
ion: shouldrequireinteract
ion } var n = new notificat
ion(thetitle,opt
ions); } value a boolean.
... specificat
ions specificat
ion status comment notificat
ions apithe definit
ion of 'requireinteract
ion' in that specificat
ion.
NotificationEvent.NotificationEvent() - Web APIs
the notificat
ionevent() constructor creates a new notificat
ionevent object.
... syntax var mynotificat
ionevent = new notificat
ionevent(type, notificat
ioneventinit); parameters type tbd notificat
ioneventinit opt
ional a dict
ionary object containing a notificat
ion object to be used as the notificat
ion the event is dispatched on.
... in later drafts of the specificat
ion, this parameter is not opt
ional.
... example var n = new notificat
ion('hello'); var init = { notificat
ion: n }; var mynotificat
ionevent = new notificat
ionevent(type, init); specificat
ions specificat
ion status comment notificat
ions apithe definit
ion of 'notificat
ionevent() constructor' in that specificat
ion.
NotificationEvent.action - Web APIs
returns the string id of the notificat
ion button the user clicked.
... this value returns an empty string if the user clicked the notificat
ion somewhere other than an act
ion button, or the notificat
ion does not have a button.
... the notificat
ion id is set during the creat
ion of the notificat
ion via the act
ions array attribute and can't be modified unless the notificat
ion is replaced.
... example self.registrat
ion.shownotificat
ion("new articles available", { act
ions: [{act
ion: "get", title: "get now."}] }); self.addeventlistener('notificat
ionclick', funct
ion(event) { event.notificat
ion.close(); if (event.act
ion === 'get') { synchronizereader(); } else { clients.openwindow("/reader"); } }, false); specificat
ions specificat
ion status comment notificat
ions apithe definit
ion of 'act
ion' in that specificat
ion.
PositionOptions.timeout - Web APIs
the posit
ionopt
ions.timeout property is a positive long value representing the maximum length of time (in milliseconds) the device is allowed to take in order to return a posit
ion.
... the default value is infinity, meaning that getcurrentposit
ion() won't return until the posit
ion is available.
... syntax posit
ionopt
ions.timeout = timelength specificat
ions specificat
ion status comment geolocat
ion apithe definit
ion of 'posit
ionopt
ions.timeout' in that specificat
ion.
... recommendat
ion initial definit
ion ...
PushSubscription.subscriptionId - Web APIs
the endpoint read-only property of the pushsubscript
ion interface returns a domstring containing the subscript
ion id associated with the push subscript
ion.
... syntax var subid = pushsubscript
ion.subscript
ionid; specificat
ions specificat
ion status comment push api working draft initial definit
ion browser compatibility the compatibility table on this page is generated from structured data.
... desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on
iossamsung internetsubscript
ionidchrome full support 42edge full support ≤18firefox no support noie no support noopera full support 29safari no support nowebview android no support nochrome android ful...
...l support 42firefox android no support noopera android full support 29safari
ios no support nosamsung internet android full support 4.0legend full support full support no support no support ...
RTCOfferAnswerOptions.voiceActivityDetection - Web APIs
the voiceactivitydetect
ion property of the rtcofferansweropt
ions dict
ionary is used to specify whether or not to use automatic voice detect
ion for the aud
io on an rtcpeerconnect
ion.
... the default value, true, indicates that voice detect
ion should be used and that if possible, the user agent should automatically disable or mute outgoing aud
io when the aud
io source is not sensing a human voice.
... syntax var opt
ions = { voiceactivitydetect
ion: trueorfalse }; value a boolean value indicating whether or not the connect
ion should use voice detect
ion once running.
... the default value, true, indicates that the user agent should monitor the aud
io coming from the microphone or other aud
io source and automatically cease transmitting data or mute when the user isn't speaking into the microphone, a value of false indicates that the aud
io should continue to be transmitted regardless of whether or not speech is detected.
SecurityPolicyViolationEvent.blockedURI - Web APIs
the blockeduri read-only property of the securitypolicyv
iolat
ionevent interface is a usvstring representing the uri of the resource that was blocked because it v
iolates a policy.
... syntax let blockeduri = v
iolat
ioneventinstance.blockeduri; value a usvstring representing the uri of the blocked resource.
... example document.addeventlistener("securitypolicyv
iolat
ion", (e) => { console.log(e.blockeduri); }); specificat
ions specificat
ion status comment content security policy level 3the definit
ion of 'blockeduri' in that specificat
ion.
... working draft initial definit
ion ...
SecurityPolicyViolationEvent.columnNumber - Web APIs
the columnnumber read-only property of the securitypolicyv
iolat
ionevent interface is the column number in the document or worker at which the v
iolat
ion occurred.
... syntax let colnum = v
iolat
ioneventinstance.columnnumber; value a number representing the column number where the v
iolat
ion occurred.
... example document.addeventlistener("securitypolicyv
iolat
ion", (e) => { console.log(e.columnnumber); }); specificat
ions specificat
ion status comment content security policy level 3the definit
ion of 'columnnumber' in that specificat
ion.
... working draft initial definit
ion ...
SecurityPolicyViolationEvent.documentURI - Web APIs
the documenturi read-only property of the securitypolicyv
iolat
ionevent interface is a usvstring representing the uri of the document or worker in which the v
iolat
ion was found.
... syntax let documenturi = v
iolat
ioneventinstance.documenturi; value a usvstring representing the uri of the document or worker in which the v
iolat
ion was found.
... example document.addeventlistener("securitypolicyv
iolat
ion", (e) => { console.log(e.documenturi); }); specificat
ions specificat
ion status comment content security policy level 3the definit
ion of 'documenturi' in that specificat
ion.
... working draft initial definit
ion ...
SecurityPolicyViolationEvent.effectiveDirective - Web APIs
the effectivedirective read-only property of the securitypolicyv
iolat
ionevent interface is a domstring representing the directive whose enforcement uncovered the v
iolat
ion.
... syntax let effdir = v
iolat
ioneventinstance.effectivedirective; value a domstring representing the directive whose enforcement uncovered the v
iolat
ion.
... example document.addeventlistener("securitypolicyv
iolat
ion", (e) => { console.log(e.effectivedirective); }); specificat
ions specificat
ion status comment content security policy level 3the definit
ion of 'effectivedirective' in that specificat
ion.
... working draft initial definit
ion ...
JS_SetOperationCallback
this article covers features introduced in spidermonkey 1.8.5 set a callback funct
ion that is automatically called per
iodically while javascript code runs.
... syntax void js_setoperat
ioncallback(jscontext *cx, jsoperat
ioncallback callback); jsoperat
ioncallback js_getoperat
ioncallback(jscontext *cx); void js_triggeroperat
ioncallback(jsruntime *rt); name type descript
ion cx jscontext * a context.
... callback jsoperat
ioncallback (only in js_setoperat
ioncallback) the callback funct
ion to install.
...And 17 more matches
nsIAnnotationObserver
toolkit/components/places/public/nsiannotat
ionservice.idlscriptable please add a summary to this article.
... 1.0 66 introduced gecko 1.8 inherits from: nsisupports last changed in gecko 1.9 (firefox 3) method overview void onitemannotat
ionremoved(in long long aitemid, in autf8string aname); void onitemannotat
ionset(in long long aitemid, in autf8string aname); void onpageannotat
ionremoved(in nsiuri auri, in autf8string aname); void onpageannotat
ionset(in nsiuri apage, in autf8string aname); methods onitemannotat
ionremoved() this method is called when an annotat
ion is deleted for an item.
... if aname is empty, then all annotat
ions for the given item have been deleted.
...And 17 more matches
nsIObserverService
xpcom/ds/ns
iobserverservice.idlscriptable this interface provides methods to add, remove, notify, and enumerate observers of var
ious notificat
ions.
... inherits from: nsisupports last changed in gecko 0.9.6 the xpcom nsobserverservice implements this interface to provide global notificat
ions for a variety of subsystems.
... implemented by @mozilla.org/observer-service;1 as a service: var observerservice = components.classes["@mozilla.org/observer-service;1"] .getservice(components.interfaces.ns
iobserverservice); method overview void addobserver( in ns
iobserver anobserver, in string atopic, in boolean ownsweak); nsisimpleenumerator enumerateobservers( in string atopic ); void notifyobservers( in nsisupports asubject, in string atopic, in wstring somedata ); void removeobserver( in ns
iobserver anobserver, in string atopic ); methods addobserver() registers a given listener for a notificat
ions regarding the specified topic.
...And 17 more matches
CSSStyleDeclaration - Web APIs
the cssstyledeclarat
ion interface represents an object that is a css declarat
ion block, and exposes style informat
ion and var
ious style-related methods and properties.
... a cssstyledeclarat
ion object can be exposed using three different apis: via htmlelement.style, which deals with the inline styles of a single element (e.g., <div style="...">).
...for example, document.stylesheets[0].cssrules[0].style returns a cssstyledeclarat
ion object on the first css rule in the document's first stylesheet.
...And 17 more matches
GlobalEventHandlers.onanimationcancel - Web APIs
the onanimat
ioncancel property of the globaleventhandlers mixin is the eventhandler for processing animat
ioncancel events.
... an animat
ioncancel event is sent when a css animat
ion unexpectedly aborts, that is, any time it stops running without sending an animat
ionend event.
... this can happen, for example, when the animat
ion-name is changed such that the animat
ion is removed, or when the animating node is hidden—either directly or because any of its containing nodes are hidden—using css.
...And 17 more matches
GlobalEventHandlers.onanimationend - Web APIs
the onanimat
ionend property of the globaleventhandlers mixin is the eventhandler for processing animat
ionend events.
... the animat
ionend event fires when a css animat
ion reaches the end of its active per
iod (which is calculated as animat
ion-durat
ion * animat
ion-iterat
ion-count) + animat
ion-delay).
... syntax var animendhandler = target.onanimat
ionend; target.onanimat
ionend = funct
ion value a funct
ion to be called when an animat
ionend event occurs indicating that a css animat
ion has begun on the target, where the target object is an html element (htmlelement), document (document), or window (window).
...And 17 more matches
GlobalEventHandlers.onanimationstart - Web APIs
an event handler for the animat
ionstart event.
... this event is sent when a css animat
ion starts to play.
... syntax var animstarthandler = target.onanimat
ionstart; target.onanimat
ionstart = funct
ion value a funct
ion to be called when an animat
ionstart event occurs indicating that a css animat
ion has begun on the target, where the target object is an html element (htmlelement), document (document), or window (window).
...And 17 more matches
IDBDatabaseException - Web APIs
obsolete: this interface was removed from the specificat
ion and was replaced by usage of domexcept
ion.
... in the indexeddb api, an idbdatabaseexcept
ion object represents except
ion condit
ions that can be encountered while performing database operat
ions.
... attributes attribute type descript
ion code unsigned short the most appropriate error code for the condit
ion.
...And 17 more matches
PannerNode.setOrientation() - Web APIs
the setorientat
ion() method of the pannernode interface defines the direct
ion the aud
io source is playing in.
... this can have a big effect if the sound is very direct
ional — controlled by the three cone-related attributes pannernode.coneinnerangle, pannernode.coneouterangle, and pannernode.coneoutergain.
... the three parameters x, y and z are unitless and describe a direct
ion vector in 3d space using the right-hand cartesian coordinate system.
...And 17 more matches
RTCPeerConnection() - Web APIs
the rtcpeerconnect
ion() constructor returns a newly-created rtcpeerconnect
ion, which represents a connect
ion between the local device and a remote peer.
... syntax pc = new rtcpeerconnect
ion([configurat
ion]); parameters configurat
ion opt
ional an rtcconfigurat
ion dict
ionary providing opt
ions to configure the new connect
ion.
... rtcconfigurat
ion dict
ionary bundlepolicy opt
ional specifies how to handle negotiat
ion of candidates when the remote peer is not compatible with the sdp bundle standard.
...And 17 more matches
RTCPeerConnection.addIceCandidate() - Web APIs
when a web site or app using rtcpeerconnect
ion receives a new ice candidate from the remote peer over its signaling channel, it delivers the newly-received candidate to the browser's ice agent by calling rtcpeerconnect
ion.addicecandidate().
... this adds this new remote candidate to the rtcpeerconnect
ion's remote descript
ion, which describes the state of the remote end of the connect
ion.
... the end-of-candidates notificat
ion is transmitted to the remote peer using a candidate with an a-line value of end-of-candidates.
...And 17 more matches
RTCPeerConnection.createAnswer() - Web APIs
the createanswer() method on the rtcpeerconnect
ion interface creates an sdp answer to an offer received from a remote peer during the offer/answer negotiat
ion of a webrtc connect
ion.
... the answer contains informat
ion about any media already attached to the sess
ion, codecs and opt
ions supported by the browser, and any ice candidates already gathered.
... the answer is delivered to the returned promise, and should then be sent to the source of the offer to continue the negotiat
ion process.
...And 17 more matches
SVGAnimationElement - Web APIs
the svganimat
ionelement interface is the base interface for all of the animat
ion element interfaces: svganimateelement, svgsetelement, svganimatecolorelement, svganimatemot
ionelement and svganimatetransformelement.
... <div id="interfacediagram" style="display: inline-block; posit
ion: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; posit
ion: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectrat
io="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/no...
...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/svganimat
ionelement" target="_top"><rect x="291" y="65" width="190" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="386" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svganimat
ionelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties this i...
...And 17 more matches
Window.devicePixelRatio - Web APIs
the devicepixelrat
io of window interface returns the rat
io of the resolut
ion in physical pixels to the resolut
ion in css pixels for the current display device.
... this value could also be interpreted as the rat
io of pixel sizes: the size of one css pixel to the size of one physical pixel.
... you can use window.matchmedia() to check if the value of devicepixelrat
io changes (which can happen, for example, if the user drags the window to a display with a different pixel density).
...And 17 more matches
Detecting CSS animation support - CSS: Cascading Style Sheets
css animat
ions make it possible to do creative animat
ions of content using nothing but css.
... testing for css animat
ion support this code will check to see if css animat
ion support is available: var animat
ion = false, animat
ionstring = 'animat
ion', keyframeprefix = '', domprefixes = 'webkit moz o ms khtml'.split(' '), pfx = '', elem = document.createelement('div'); if( elem.style.animat
ionname !== undefined ) { animat
ion = true; } if( animat
ion === false ) { for( var i = 0; i < domprefixes.length; i++ ) { if( elem.style[ domprefixes[i] + 'animat
ionname' ] !== undefined ) { pfx = domprefi...
...xes[ i ]; animat
ionstring = pfx + 'animat
ion'; keyframeprefix = '-' + pfx.tolowercase() + '-'; animat
ion = true; break; } } } for starters we define a few variables.
...And 17 more matches
XUL Event Propagation - Archive of obsolete content
this article describes the event model in xul and features event propagat
ion as a way to handle events in different places in the interface.
... introduct
ion xul events were introduced in a very general way in a prev
ious xulnote.
...events are used for different purposes, but they play a particularly important role in creating interactive xul-based user interfaces, since it is events that bring the informat
ion about user act
ions to the code behind the interface.
...And 12 more matches
How to enable locale switching in a XULRunner application - Archive of obsolete content
this article is for developers who have localised their xul applicat
ion using dtd entity files and want to provide their users with a mechanism to switch the locale in the applicat
ion itself.
... normally the applicat
ion locale is inherited from the os environment of the host system, however there are situat
ions when you might want to give users the opt
ion to override the default setting and choose a different locale.
... here is an outline of the solut
ion: 1.
...And 12 more matches
XEmbed Extension for Mozilla Plugins - Archive of obsolete content
overview recent vers
ions of mozilla include an extens
ion for writing plugins that use xembed instead of using the old xt-based mainloop that most plugins have been using since the netscape 3.x days.
... the use of the xt mainloop has been a problem for modern plugin development because very few modern applicat
ions that want to take advantage of the capabilities of newer toolkits use xt.
... also, when included with builds of mozilla that are based on gtk 1.2 or gtk 2.x, the xt code that hosts the plugins is at best hacky and has been the source for many minor problems including inconsistent focus behav
ior as well as occas
ional crashes.
...And 12 more matches
Test your skills: Conditionals - Learn web development
the aim of this skill test is to assess whether you've understood our making decis
ions in your code — condit
ionals article.
... note: you can try out solut
ions in the interactive editors below, however it may be helpful to download the code and use an online tool such as codepen, jsfiddle, or glitch to work on the tasks.
... if you get stuck, then ask us for help — see the assessment or further help sect
ion at the bottom of this page.
...And 12 more matches
Encrypt Decrypt MAC Keys As Session Objects
nss sample code 4: encrypt
ion/decrypt
ion and mac keys using sess
ion.
... generates encrypt
ion/mac keys and uses sess
ion objects.
...t, decrypt, unknown } commandtype; typedef enum { symkey = 0, mackey = 1, iv = 2, mac = 3, pad = 4 } headertype; /* * print usage message and exit */ static void usage(const char *progname) { fprintf(stderr, "\nusage: %s -c -d [-z ] " "[-p | -f ] -i -o \n\n", progname); fprintf(stderr, "%-20s specify 'a' for encrypt operat
ion\n\n", "-c "); fprintf(stderr, "%-20s specify 'b' for decrypt operat
ion\n\n", " "); fprintf(stderr, "%-20s specify db directory path\n\n", "-d "); fprintf(stderr, "%-20s specify db password [opt
ional]\n\n", "-p "); fprintf(stderr, "%-20s specify db password file [opt
ional]\n\n", "-f "); fprintf(stderr, "%-20s...
...And 12 more matches
NSS Sample Code Sample_3_Basic Encryption and MACing
nss sample code 3: basic encrypt
ion and macing this example program demonstrates how to encrypt and mac a file.
...0, mackey = 1, iv = 2, mac = 3, pad = 4 } headertype; /* print a usage message and exit */ static void usage(const char *progname) { fprintf(stderr, "\nusage: %s -c <a|b> -d <dbdirpath> [-z <noisefilename>] " "[-p <dbpwd> | -f <dbpwdfile>] -i <ipfilename> -o <opfilename>\n\n", progname); fprintf(stderr, "%-20s specify 'a' for encrypt operat
ion\n\n", "-c <a|b>"); fprintf(stderr, "%-20s specify 'b' for decrypt operat
ion\n\n", " "); fprintf(stderr, "%-20s specify db directory path\n\n", "-d <dbdirpath>"); fprintf(stderr, "%-20s specify db password [opt
ional]\n\n", "-p <dbpwd>"); fprintf(stderr, "%-20s specify db password file [opt
ional]\n\n", "-f <dbpwdf...
...ile>"); fprintf(stderr, "%-20s specify noise file name [opt
ional]\n\n", "-z <noisefilename>"); fprintf(stderr, "%-21s specify an input file name\n\n", "-i <ipfilename>"); fprintf(stderr, "%-21s specify an output file name\n\n", "-o <opfilename>"); fprintf(stderr, "%-7s for encrypt, it takes <ipfilename> as an input file and produces\n", "note :"); fprintf(stderr, "%-7s <ipfilename>.enc and <ipfilename>.header as intermediate output files.\n\n", ""); fprintf(stderr, "%-7s for decrypt, it takes <ipfilename>.enc and <ipfilename>.header\n", ""); fprintf(stderr, "%-7s as input files and produces <opfilename> as a final output file.\n\n", ""); exit(-1); } /* this source code...
...And 12 more matches
NSPR functions
nspr is a platform abstract
ion library that provides a cross-platform api to common os services.
... however, a small number of nspr funct
ions are required for using the certificate verificat
ion and ssl funct
ions in nss.
... these nspr funct
ions are listed in this sect
ion.
...And 12 more matches
JS_DefineFunctions
syntax bool js_definefunct
ions(jscontext *cx, js::handle<jsobject*> obj, const jsfunct
ionspec *fs, propertydefinit
ionbehav
ior behav
ior = defineallproperties); in spidermonkey vers
ions pr
ior to spidermonkey 24, fs was not const.
... name type descript
ion cx jscontext * the context in which to define funct
ions.
... obj js::handle<jsobject*> the object on which funct
ions are to be defined.
...And 12 more matches
Using popup notifications
popup notificat
ions, also known as "doorhanger notificat
ions", are presented to notify the user of something that's important but may not need immediate attent
ion.
... these non-modal notificat
ions let the user make decis
ions when they have a moment to do so, instead of being forced to deal with them at possibly inconvenient times.
... for example, this popup notificat
ion is displayed when a web site requests geolocat
ion informat
ion: this lets the user decide whether or not to share their locat
ion when it's convenient to do so, instead of being compelled to do it at once.
...And 12 more matches
AbsoluteOrientationSensor - Web APIs
the absoluteorientat
ionsensor interface of the sensor apis describes the device's physical orientat
ion in relat
ion to the earth's reference coordinate system.
... to use this sensor, the user must grant permiss
ion to the 'accelerometer', 'gyroscope', and 'magnetometer' device sensors through the permiss
ions api.
...see feature-policy for implementat
ion instruct
ions.
...And 12 more matches
AudioBufferSourceNode.start() - Web APIs
the start() method of the aud
iobuffersourcenode interface is used to schedule playback of the aud
io data contained in the buffer, or to begin playback immediately.
... syntax aud
iobuffersourcenode.start([when][, offset][, durat
ion]); parameters when opt
ional the time, in seconds, at which the sound should begin to play, in the same time coordinate system used by the aud
iocontext.
... if when is less than (aud
iocontext.currenttime, or if it's 0, the sound begins to play at once.
...And 12 more matches
AudioContext() - Web APIs
the aud
iocontext() constructor creates a new aud
iocontext object which represents an aud
io-processing graph, built from aud
io modules linked together, each represented by an aud
ionode.
... syntax var aud
ioctx = new aud
iocontext(); var aud
ioctx = new aud
iocontext(opt
ions); parameters opt
ions opt
ional an object based on the aud
iocontextopt
ions dict
ionary that contains zero or more opt
ional properties to configure the new context.
... available properties are as follows: latencyhint opt
ional the type of playback that the context will be used for, as a value from the aud
iocontextlatencycategory enum or a double-precis
ion floating-point value indicating the preferred maximum latency of the context in seconds.
...And 12 more matches
BaseAudioContext.createPanner() - Web APIs
the createpanner() method of the baseaud
iocontext interface is used to create a new pannernode, which is used to spatialize an incoming aud
io stream in 3d space.
... the panner node is spatialized in relat
ion to the aud
iocontext's aud
iolistener (defined by the aud
iocontext.listener attribute), which represents the posit
ion and orientat
ion of the person listening to the aud
io.
... syntax baseaud
ioctx.createpanner(); returns a pannernode.
...And 12 more matches
GeolocationCoordinates.longitude - Web APIs
the geolocat
ioncoordinates interface's read-only longitude property is a double-precis
ion floating point value which represents the longitude of a geographical posit
ion, specified in decimal degrees.
... together with a domtimestamp indicating a time of measurement, the geolocat
ioncoordinates object is part of the geolocat
ionposit
ion interface, which is the object type returned by geolocat
ion api funct
ions that obtain and return a geographical posit
ion.
... syntax let longitude = geolocat
ioncoordinatesinstance.longitude value the value in longitude is the geographical longitude of the locat
ion on earth described by the coordinates object, in decimal degrees.
...And 12 more matches
GeolocationCoordinates - Web APIs
the geolocat
ioncoordinates interface represents the posit
ion and altitude of the device on earth, as well as the accuracy with which these properties are calculated.
... properties the geolocat
ioncoordinates interface doesn't inherit any properties.
... geolocat
ioncoordinates.latitude read only secure context returns a double representing the posit
ion's latitude in decimal degrees.
...And 12 more matches
SpiderMonkey coding conventions - Archive of obsolete content
the spidermonkey project owners enforce coding convent
ions pretty strictly during code reviews.
... naming convent
ions public funct
ion names begin with js_ followed by capitalized "intercaps", e.g.
... extern but library-private funct
ion names use a js_ prefix and mixed case, e.g.
... most static funct
ion names have unprefixed, mixed-case names: getchar.
Actionscript Performance Tests - Archive of obsolete content
to run each test multiple times use the --iterat
ions flag.
... when the number of iterat
ions is greater than 2 all times are displayed in [], faster time is displayed in the output column, and the 95% confidence interval is calculated.
...# change the iterat
ions $ ./runtests.py --iterat
ions=10 sunspider/*.as test avm 95% conf metric sunspider/access-binary-trees.as 565 1.0% time [565, 586, 573, 577, 567, 567, 579, 576, 565, 585] sunspider/access-fannkuch.as 361 0.3% time [365, 366, 362, 363, 366, 361, 363, 363, 364, 364] ...
...# compare 2 builds with > 2 iterat
ions $ ./runtests.py --iterat
ions=10 --avm2=build2/avmshell sunspider/*.as test avm avm2 min : max avg min : max avg %diff metric ----------------------- ----------------------- ----- sunspider/access-binary-trees.as ...
notification.type - Archive of obsolete content
« xul reference home type type: one of the values below indicates the type of notificat
ion, determined from the pr
iority.
... info a notificat
ion that is of lesser importance.
... warning a normal warning notificat
ion.
... critical a critical notificat
ion.
popup.position - Archive of obsolete content
« xul reference home posit
ion type: string the posit
ion attribute determines where the popup appears relative to the element the user clicked to invoke the popup.
... this value can be specified either as a single word offering pre-defined alignment posit
ions, or as 2 words specifying exactly which part of the anchor and popup should be aligned.
... posit
ions specified as a single word string are shortcuts for the values above.
... for more details, including examples, please see popup posit
ioning see also posit
ion ...
selectionEnd - Archive of obsolete content
« xul reference select
ionend type: integer get or set the end of the selected port
ion of the field's text.
... use in conjuct
ion with the select
ionstart property.
... the value specifies the index of the character after the select
ion.
... if this value is equal to the value of the select
ionstart property, no text is selected, but the value indicates the posit
ion of the caret (cursor) within the textbox.
Toolbar customization events - Archive of obsolete content
beforecustomizat
ion this event is delivered when the user starts the toolbar customizat
ion process; for example, by right-clicking on a toolbar and choosing "customize".
... customizat
ionchange this event is delivered when the user makes a change to a toolbar while editing the toolbars, either by dragging an item to the toolbar or by dragging an item out of it.
... aftercustomizat
ion this event is delivered when the user closes the toolbar customizat
ion panel.
...window.addeventlistener("beforecustomizat
ion", customizestart, false); window.addeventlistener("aftercustomizat
ion", customizeend, false); window.addeventlistener("customizat
ionchange", customizechange, false); funct
ion customizestart(e) { let thetoolbox = e.target; /* now we know the user has started customizing */ } funct
ion customizeend(e) { let thetoolbox = e.target; /* the user has finished customizing */ } funct
ion customizechange(e) { let thetoolbox = e.target; /* the user has made a change to the toolbox */ } ...
ant script to assemble an extension - Archive of obsolete content
this ant script helps to package an extens
ion <?xml vers
ion="1.0"?> this build file was written by régis décamps <decamps@users.sf.net> <project name="blogmark" default="createxpi"> <property name="vers
ion" value="1.3-rc1"/> <property name="descript
ion" value="new context-menu item to add the current page in your blogmarks"/> xpi file is created after "chrome/blogmark.jar" is created, which is then stuffed into "blogmark.xpi" <target name="createxpi" depends="createjar" descript
ion="assemble the final build blogmark.xpi"> <zip destfile="blogmark-${vers
ion}.xpi"> <zipfileset dir="." includes="chrome/blogmark.jar" /> <zip...
...fileset dir="." includes="install.rdf" /> </zip> </target> everything inside the chrome directory is zipped into chrome/blogmark.jar <target name="createjar" depends="templates" descript
ion="assemble the jar"> <jar destfile="chrome/blogmark.jar"> <fileset dir="chrome/"> <include name="**/*"/> <exclude name="**/*~"/> <exclude name="**/*.tpl.*"/> <exclude name="blogmark.jar"/> </fileset> </jar> </target> <target name="templates" descript
ion="generate files from templates."> <copy file="chrome/content/blogmark/contents.rdf.tpl.
...xml" tofile="chrome/content/blogmark/contents.rdf" overwrite="true"> <filterchain> <replacetokens> <token key="vers
ion" value="${vers
ion}"/> <token key="descript
ion" value="${descript
ion}"/> </replacetokens> </filterchain> </copy> <copy file="chrome/content/blogmark/about.xul.tpl.xml" tofile="chrome/content/blogmark/about.xul" overwrite="true"> <filterchain> <replacetokens> <token key="vers
ion" value="...
...${vers
ion}"/> </replacetokens> </filterchain> </copy> <copy file="install.rdf.tpl.xml" tofile="install.rdf" overwrite="true"> <filterchain> <replacetokens> <token key="vers
ion" value="${vers
ion}"/> <token key="descript
ion" value="${descript
ion}"/> </replacetokens> </filterchain> </copy> </target> </project> ...
ScriptEngineMajorVersion - Archive of obsolete content
this object is a microsoft extens
ion and is only supported in internet explorer.
... the scriptenginemajorvers
ion funct
ion gets the major vers
ion number of the scripting engine in use.
... syntax scriptenginemajorvers
ion() remarks the return value corresponds directly to the vers
ion informat
ion contained in the dynamic-link library (dll) for the scripting language in use.
... example the following example illustrates the use of the scriptenginemajorvers
ion funct
ion: if (window.scriptenginemajorvers
ion) { console.log(window.scriptengine()); } output: <current major vers
ion> requirements supported in the following document modes: quirks, internet explorer 6 standards, internet explorer 7 standards, internet explorer 8 standards, internet explorer 9 standards, internet explorer 10 standards, internet explorer 11 standards.
Displaying a graphic with audio samples - Archive of obsolete content
the following example shows how to take samples from an aud
io stream and display them behind an image (in this case, the mozilla logo), giving the impress
ion that the image is built from the samples.
... <!doctype html> <html> <head> <title>javascript spectrum example</title> </head> <body> <aud
io id="aud
io-element" src="revolve.ogg" controls="true" style="width: 512px;"> </aud
io> <div><canvas id="fft" width="512" height="200"></canvas></div> <img id="mozlogo" style="display:none" src="mozilla2.png"></img> <script> var canvas = document.getelementbyid('fft'), ctx = canvas.getcontext('2d'), channels, rate, framebufferlength, fft; funct
ion loadedmetadata() { channels = aud
io.mozchannels; rate = aud
io.mozsamplerate; framebufferlength = aud
io.mozframebufferlength; fft = new fft(framebufferlength / channels...
..., rate); } funct
ion aud
ioavailable(event) { var fb = event.framebuffer, t = event.time, /* unused, but it's there */ signal = new float32array(fb.length / channels), magnitude; for (var i = 0, fbl = framebufferlength / 2; i < fbl; i++ ) { // assuming interlaced stereo channels, // need to split and merge into a stero-mix mono signal signal[i] = (fb[2*i] + fb[2*i+1]) / 2; } // clear the canvas before drawing spectrum ctx.fillstyle = "rgb(0,0,0)"; ctx.fillrect (0,0, canvas.width, canvas.height); ctx.fillstyle = "rgb(255,255,255)"; for (var i = 0; i < signal.length; i++ ) { // multiply spectrum by a zoom value magnitude = signal...
...[i] * 1000; // draw rectangle bars for each frequency bin ctx.fillrect(i * 4, canvas.height, 3, -magnitude); } ctx.drawimage(document.getelementbyid('mozlogo'),0,0, canvas.width, canvas.height); } var aud
io = document.getelementbyid('aud
io-element'); aud
io.addeventlistener('mozaud
ioavailable', aud
ioavailable, false); aud
io.addeventlistener('loadedmetadata', loadedmetadata, false); </script> </body> </html> ...
Algorithm - MDN Web Docs Glossary: Definitions of Web-related terms
an algorithm is a self-contained series of instruct
ions to perform a funct
ion.
...computer scientists compare the efficiency of algorithms through the concept of "algorithmic complexity" or "big o" notat
ion.
... there are also machine learning algorithms such as linear regress
ion, logistic regress
ion, decis
ion tree, random forest, support vector machine, recurrent neural network (rnn), long short term memory (lstm) neural network, convolut
ional neural network (cnn), deep convolut
ional neural network and so on.
... learn more general knowledge algorithm on wikipedia technical reference explanat
ions of sorting algorithms explanat
ions of algorithmic complexity ...
CDN - MDN Web Docs Glossary: Definitions of Web-related terms
a cdn (content delivery network) is a group of servers spread out over many locat
ions.
...using cdn for those library files is preferable for a number of reasons: serving libraries' static assets over cdn lowers the request burden on an organizat
ion's own servers.
...geographical distance affects latency proport
ionally.
...using a cdn saves further configurat
ion for static assets on your own servers.
CSS - MDN Web Docs Glossary: Definitions of Web-related terms
the browser applies css style declarat
ions to selected elements to display them properly.
... a style declarat
ion contains the properties and their values, which determine how a webpage looks.
...*/ background-color: black } "cascading" refers to the rules that govern how selectors are pr
ioritized to change a page's appearance.
... learn more general knowledge learn css css on wikipedia technical reference the css documentat
ion on mdn the css working group current work ...
Client hints - MDN Web Docs Glossary: Definitions of Web-related terms
client hints are a set of http request header fields for proactive content negotiat
ion allowing clients to indicate a list of device and agent specific preferences.
... client hints enable automated delivery of optimized assets like the automatic negotiat
ion of image dpr resolut
ion.
... basically, with the client hints header, the developer or applicat
ion can tell the browser to advertise informat
ion about itself to the server, such as the device pixel rat
io, the viewport width, and the display width.
... the client can then give the server informat
ion about the client's environment, and the server can determine which resources to send based on that informat
ion.
ECMA - MDN Web Docs Glossary: Definitions of Web-related terms
ecma internat
ional (formally european computer manufacturers associat
ion) is a non-profit organizat
ion that develops standards in computer hardware, communicat
ions, and programming languages.
... on the web it is famous for being the organizat
ion which maintain the ecma-262 specificat
ion (aka.
... ecmascript) which is the core specificat
ion for the javascript language.
... learn more ecma internat
ional on wikipedia the ecma internat
ional web site ...
First input delay - MDN Web Docs Glossary: Definitions of Web-related terms
when they click a link, tap on a button, or use a custom, javascript-powered control) to the time when the browser is actually able to respond to that interact
ion.
... it is the length of time, in milliseconds, between the first user interact
ion on a web page and the browser’s response to that interact
ion.
... the time between when content is painted to the page and when all the funct
ionality becomes responsive to human interact
ion often varies based on the the size and complexity of the javascript needing to be downloaded, parsed, and executed on the main thread, and on the device speed or lack thereof (think low end mobile devices).
...reducing site initializat
ion time and eliminating long tasks can help eliminate first input delays.
Fork - MDN Web Docs Glossary: Definitions of Web-related terms
a fork is a copy of an existing software project at some point to add someone's own modificat
ions to the project.
... basically, if the license of the original software allows, you can copy the code to develop your own vers
ion of it, with your own addit
ions, which will be a "fork".
...this is now a more popular term thanks to contribut
ion model using git (and/or the github platform).
... learn more var
ious "well-known" forks linux distribut
ions node.js and
io.js (which have been merged together back) libreoffice, a fork of openoffice ...
Grid Axis - MDN Web Docs Glossary: Definitions of Web-related terms
css grid layout is a two-dimens
ional layout method enabling the laying out of content in rows and columns.
... it is along these axes that items can be aligned and justified using the properties defined in the box alignment specificat
ion.
... the inline or row axis runs across the block axis and is the direct
ion along which regular text flows.
... the physical direct
ion of these axes can change according to the writing mode of the document.
Grid Lines - MDN Web Docs Glossary: Definitions of Web-related terms
lines are also created in the implicit grid when implicit tracks are created to hold content posit
ioned outside of the explicit grid, however these lines cannot be addressed by a number.
...in the following example the item is posit
ioned from column line 1 to column line 3, and from row line 1 to row line 3.
...per"> <div class="item">item</div> </div> .wrapper { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: 100px 100px; } .item { grid-column-start: 1; grid-column-end: 3; grid-row-start: 1; grid-row-end: 3; } naming lines the lines created in the explicit grid can be named, by adding the name in square brackets before or after the track sizing informat
ion.
...ce grid-template-columns grid-template-rows grid-column-start grid-column-end grid-column grid-row-start grid-row-end grid-row further reading css grid layout guide: basic concepts of grid layout css grid layout guide: line-based placement with css grid css grid layout guide: layout using named grid lines css grid layout guide: css grids, logical values and writing modes definit
ion of grid lines in the css grid layout specificat
ion ...
IMAP - MDN Web Docs Glossary: Definitions of Web-related terms
unlike pop3, imap allows multiple simultaneous connect
ions to one mailbox.
... clients accessing a mailbox can receive informat
ion about state changes made from other clients.
... imap also provides a mode for clients to stay connected and receive informat
ion on demand.
...imap4 revis
ion 1 is the current vers
ion, defined by rfc 3501.
IPv4 - MDN Web Docs Glossary: Definitions of Web-related terms
ipv4 is the fourth vers
ion of the communicat
ion protocol underlying the internet and the first vers
ion to be widely deployed.
...ipv4 is a connect
ionless protocol to be used on packet-switched link layer networks (ethernet).
... ipv6 is gradually replacing ipv4 owing to ipv4's security problems and the limitat
ions of its address field.
... (vers
ion number 5 was assigned in 1979 to the experimental internet stream protocol, which however has never been called ipv5.) learn more general knowledge ipv4 on wikipedia ...
ITU - MDN Web Docs Glossary: Definitions of Web-related terms
the internat
ional telecommunicat
ion un
ion (itu) is the organizat
ion authorized by the united nat
ions to establish standards and rules for telecommunicat
ion, including telegraph, rad
io, telephony and the internet.
... from defining rules for ensuring transmiss
ions get to where they need to go to and creating the "sos" alert signal used in morse code, the itu has long played a key role in how we use technology to exchange informat
ion and ideas.
... in the internet age, the itu's role of establishing standards for video and aud
io data formats used for streaming, teleconferencing, and other purposes.
... for example, the itu and the moving picture experts group (mpeg) worked together to develop and publish, as well as to maintain, the var
ious mpeg specificat
ions, such as mpeg-2 (itu h.262), avc (itu h.264), and hevc (itu h.265).
Idempotent - MDN Web Docs Glossary: Definitions of Web-related terms
another implicat
ion of delete being idempotent is that developers should not implement restful apis with a delete last entry funct
ionality using the delete method.
... note that the idempotence of a method is not guaranteed by the server and some applicat
ions may incorrectly break the idempotence constraint.
...dd_row http/1.1 -> adds a 2nd row post /add_row http/1.1 -> adds a 3rd row delete /idx/delete http/1.1 is idempotent, even if the returned status code may change between requests: delete /idx/delete http/1.1 -> returns 200 if idx exists delete /idx/delete http/1.1 -> returns 404 as it just got deleted delete /idx/delete http/1.1 -> returns 404 learn more general knowledge definit
ion of idempotent in the http specificat
ion.
... technical knowledge descript
ion of common idempotent methods: get, head, put, delete, opt
ions, trace descript
ion of common non-idempotent methods: post,patch, connect ...
PAC - MDN Web Docs Glossary: Definitions of Web-related terms
a proxy auto-configurat
ion file (pac file) is a file which contains a funct
ion, findproxyforurl(), which is used by the browser to determine whether requests (including http, https, and ftp) should go directly to the destinat
ion or if they need to be forwarded through a web proxy server.
... funct
ion findproxyforurl(url, host) { /* ...
... */ } ret = findproxyforurl(url, host) see proxy auto-configurat
ion (pac) file for details about how these are used and how to create new ones.
... learn more general knowledge pac on wikipedia technical reference proxy auto-configurat
ion file on mdn ...
Page load time - MDN Web Docs Glossary: Definitions of Web-related terms
page load time is the time it takes for a page to load, measured from navigat
ion start to the start of the load event.
... let time = performance.timing; let pageloadtime = time.loadeventstart - time.navigat
ionstart; while page load time 'sounds' like the perfect web performance metric, it isn't.
... load times can vary greatly between users depending on device capabilities, network condit
ions, and, to a lesser extent, distance from the server.
...in addit
ion, web performance isn't just about when the load event happens.
RAIL - MDN Web Docs Glossary: Definitions of Web-related terms
rail, an acronym for response, animat
ion, idle, and load, is a performance model originated by the google chrome team in 2015, focused on user experience and performance within the browser.
... the performance mantra of rail is "focus on the user; the end goal isn't to make your site perform fast on any specific device, it's to make users happy." there are 4 stages of interact
ion: page load, idle, response to input, and scrolling and animat
ion.
... animat
ion when animating, render each frame in under 16ms, aiming for consistency and avoiding jank.
... idle when using the main javascript thread, work in chunks for less than 50ms to free up the thread for user interact
ions.
RGB - MDN Web Docs Glossary: Definitions of Web-related terms
each color is described by a sequence of three numbers (typically between 0.0 and 1.0, or between 0 and 255) that represent the different intensities (or contribut
ions) of red, green, and blue, in determining the final color.
...in css they can be represented as a single 24-bit integer in hexadecimal notat
ion (for example, #add8e6 is light blue), or in funct
ional notat
ion as three separate 8-bit integers (for example, rgb(46, 139, 87) is sea green).
... in opengl, webgl, and glsl the red-green-blue components are fract
ions (floating-point numbers between 0.0 and 1.0), although in the actual color buffer they are typically stored as 8-bit integers.
... graphically, a color can be represented as a point in a three-dimens
ional grid or cube, where each dimens
ion (or axis) corresponds to a different channel.
Random Number Generator - MDN Web Docs Glossary: Definitions of Web-related terms
truly random numbers (say, from a rad
ioactive source) are utterly unpredictable, whereas all algorithms are predictable, and a prng returns the same numbers when passed the same starting parameters or seed.
... prngs can be used for a variety of applicat
ions, such as games.
...these include: that it's computat
ionally unfeasible for an attacker (without knowledge of the seed) to predict its output that if an attacker can work out its current state, this should not enable the attacker to work out prev
iously emitted numbers.
... learn more general knowledge pseudorandom number generator on wikipedia math.random(), a built-in javascript prng funct
ion.
RTCP (RTP Control Protocol) - MDN Web Docs Glossary: Definitions of Web-related terms
rtcp is used to provide control and statistical informat
ion about an rtp media streaming sess
ion.
... this lets control and statistics packets be separated logically and funct
ionally from the media streaming while using the underlying packet delivery layer to transmit the rtcp signals as well as the rtp and media contents.
... rtcp per
iodically transmits control packets to all of an rtp sess
ion's participants, using the same mechanism that is being used to transmit the data packets.
... learn more general knowledge introduct
ion to the real-time transport protocol rtp control protocol rfc 3550, sect
ion rfc 3550 sect
ion 6: 6 ...
Transport Layer Security (TLS) - MDN Web Docs Glossary: Definitions of Web-related terms
transport layer security (tls), formerly known as secure sockets layer (ssl), is a protocol used by applicat
ions to communicate securely across a network, preventing tampering with and eavesdropping on email, web browsing, messaging, and other protocols.
... both ssl and tls are client / server protocols that ensure communicat
ion privacy by using cryptographic protocols to provide security over a network.
... all modern browsers support the tls protocol, requiring the server to provide a valid digital certificate confirming its identity in order to establish a secure connect
ion.
...from vers
ion 74 onwards, firefox will return a secure connect
ion failed error when connecting to servers using the older tls vers
ions (bug 1606734).
Thread - MDN Web Docs Glossary: Definitions of Web-related terms
thread in computer science is the execut
ion of running multiple tasks or programs at the same time.
... however, modern javascript offers ways to create addit
ional threads, each executing independently while possibly communicating between one another.
... a special type of worker, called a service worker, can be created which can be left behind by a site—with the user's permiss
ion—to run even when the user isn't currently using that site.
...they help minimise the context switching time, enables more efficient communicat
ion and allows further use of the multiprocessor architecture.
WebSockets - MDN Web Docs Glossary: Definitions of Web-related terms
websocket is a protocol that allows for a persistent tcp connect
ion between server and client so they can exchange data at any time.
... any client or server applicat
ion can use websocket, but principally web browsers and web servers.
... through websocket, servers can pass data to a client without pr
ior client request, allowing for dynamic content updates.
... learn more general knowledge websocket on wikipedia technical reference websocket reference on mdn learn about it writing websocket client applicat
ions writing websocket servers ...
XML - MDN Web Docs Glossary: Definitions of Web-related terms
the informat
ion technology (it) industry uses many languages based on xml as data-descript
ion languages.
...moreover, html is a presentat
ion language, whereas xml is a data-descript
ion language.
... this means that xml has far broader applicat
ions than just the web.
... learn more xml introduct
ion ...
caret - MDN Web Docs Glossary: Definitions of Web-related terms
this point in the text is called the insert
ion point.
... the word "caret" differentiates the text insert
ion point from the mouse cursor.
... on the web, a caret is used to represent the insert
ion point in <input> and <textarea> elements, as well as any elements whose contenteditable attribute is set, thereby allowing the contents of the element to be edited by the user.
... learn more general knowledge caret navigat
ion on wikipedia css related to the caret you can set the color of the caret for a given element's editable content by setting the element's css caret-color property to the appropriate <color> value.
jQuery - MDN Web Docs Glossary: Definitions of Web-related terms
jquery is a javascript library that focuses on simplifying dom manipulat
ion, ajax calls, and event handling.
... jquery uses a format, $(selector).act
ion() to assign an element(s) to an event.
... to explain it in detail, $(selector) will call jquery to select selector element(s), and assign it to an event api called .act
ion().
... $(document).ready(funct
ion(){ alert("hello world!"); $("#blackbox").hide(); }); the above code carries out the same funct
ion as the following code: window.onload = funct
ion() { alert("hello world!"); document.getelementbyid("blackbox").style.display = "none"; }; or: window.addeventlistener("load", () => { alert("hello world!"); document.getelementbyid("blackbox").style.display = "none"; }); learn more general knowledge jquery on wikipedia jquery official website technical informat
ion offical api reference documentat
ion ...
JPEG - MDN Web Docs Glossary: Definitions of Web-related terms
jpeg (joint photographic experts group) is a commonly used method of lossy compress
ion for digital images.
... jpeg compress
ion is composed of three compress
ion techniques applied in successive layers, including chrominance subsampling, discrete cosine transformat
ion and quantizat
ion, and run-length delta & huffman encoding.
... chroma subsampling involves implementing less resolut
ion for chroma informat
ion than for luma informat
ion, taking advantage of the human visual system's lower acuity for color differences than for luminance.
... a discrete cosine transform expresses a finite sequence of data points in terms of a sum of cosine funct
ions oscillating at different frequencies.
Percent-encoding - MDN Web Docs Glossary: Definitions of Web-related terms
the encoding consists of substitut
ion: a '%' followed by the hexadecimal representat
ion of the ascii value of the replace character.
... ':' '/' '?' '#' '[' ']' '@' '!' '$' '&' "'" '(' ')' '*' '+' ',' ';' '=' '%' ' ' %3a %2f %3f %23 %5b %5d %40 %21 %24 %26 %27 %28 %29 %2a %2b %2c %3b %3d %25 %20 or + depending on the context, the character ' ' is translated to a '+' (like in the percent-encoding vers
ion used in an applicat
ion/x-www-form-urlencoded message), or in '%20' like on urls.
... learn more general knowledge definit
ion of percent-encoding in wikipedia.
... technical knowledge rfc 3986, sect
ion 2.1, where this encoding is defined.
Limitations of frame scripts
for example: nsisess
ionstore nsiwindowmediator <need more examples> places api the places api can't be used inside a frame script.
...the except
ions are: content-document-global-created document-element-inserted outer-window-destroyed inner-window-destroyed dom-window-destroyed these must be registered in the content process.
...it looks something like this: window.queryinterface(ci.nsiinterfacerequestor) .getinterface(ci.nsiwebnavigat
ion) .queryinterface(ci.nsidocshelltreeitem) .roottreeitem .queryinterface(ci.nsiinterfacerequestor) .getinterface(ci.nsidomwindow); this will no longer work.
...see the entry in the limitat
ions on chrome scripts page.
HTMLIFrameElement.getContentDimensions()
the getcontentdimens
ions() method of the htmliframeelement interface retrieves the x and y dimens
ions of the content window.
... syntax var instanceofdomrequest = instanceofhtmliframeelement.getcontentdimens
ions(); returns a domrequest for handling the dimens
ions request.
... the x and y dimens
ions are available in the request.result.x and request.result.y properties, respectively.
... examples var browser = document.queryselector('iframe'); var request = browser.getcontentdimens
ions(); request.onsuccess = funct
ion() { console.log("page size:", request.result.width + "x" + request.result.height); } request.onerror = funct
ion() { console.log("download error"); } specificat
ion not part of any specificat
ion.
Localization at Mozilla
localizat
ion (l10n) is the process of translating software user interfaces from one language to another and adapting it to suit a foreign culture.
... these resources are for anyone with an interest in the technical aspects involved in localizat
ion.
... the documentat
ion here is no longer being maintained and is inaccurate.
... l10n documentat
ion has moved to https://mozilla-l10n.github.
io/localizer-documentat
ion/ .
Various MathML Tests
overview of presentat
ion mathml elements testing tensor indices <mmultiscripts>: r i1 j2 k3 ; this with <none/>, a qp i a bit of calculus: ∫ a b f ( x ) dx ∂ ∂ x f ( x , y ) + ∂ ∂ y f ( x , y ) here is the alphabet with invisible port
ions wrapped by <mphantom> in between: a b c d e f g h i j k l m n o p q r s t u v w x y z .
... testing mathml <merror>, <mtext>: this is a text in mtext this is a text in merror testing <mact
ion>: click to toggle between express
ions, and watch the status line onmouseover/onmouseout: statusline#first express
ion first express
ion statusline#second express
ion second express
ion statusline#and so on...
... click the express
ion below to see several definit
ions of pi: π = 3.14159265358...
...v - ω ) d 3 v maxwell's equat
ions { ∇ × b → - 1 c ∂ e → ∂ t = 4 π c j → ∇ ċ e → = 4 π ρ ∇ × e → + 1 c ∂ b → ∂ t = 0 → ∇ ċ b → = 0 einstein's field equat
ions r μ ν - 1 2 g μ ν r = 8 π g c 4 t μ ν ...
PR_SetSocketOption
retrieves the socket opt
ions set for a specified socket.
... syntax #include <pr
io.h> prstatus pr_setsocketopt
ion( prfiledesc *fd, prsocketopt
iondata *data); parameters the funct
ion has the following parameters: fd a pointer to a prfiledesc object representing the socket whose opt
ions are to be set.
... data a pointer to a structure of type prsocketopt
iondata specifying the opt
ions to set.
... descript
ion on input, the caller must set both the opt
ion and value fields of the prsocketopt
iondata object pointed to by the data parameter.
NSS Sample Code Sample_2_Initialization of NSS
ccess) { pr_fprintf(pr_stderr, "failed to change password.\n"); return secfailure; } port_memset(oldpw, 0, pl_strlen(oldpw)); port_free(oldpw); pr_fprintf(pr_stdout, "password changed successfully.\n"); } port_memset(newpw, 0, pl_strlen(newpw)); port_free(newpw); return secsuccess; } /* * this example illustrates initializat
ion of the nss database.
... * it creates an nss configurat
ion directory with empty databases * and initializes the databases.
...progname + 1 : argv[0]; /* parse command line arguments */ optstate = pl_createoptstate(argc, argv, "d:p:q:f:g:"); while ((status = pl_getnextopt(optstate)) == pl_opt_ok) { switch (optstate->opt
ion) { case 'd': dbdir = strdup(optstate->value); break; case 'p': plainpass = strdup(optstate->value); break; case 'f': pwfile = strdup(optstate->value); break; default: usage(progname); break; } } pl_destroyoptstate(optstate); if (!dbdir) ...
... usage(progname); pr_init(pr_user_thread, pr_pr
iority_normal, 0); /* create the database */ rv = nss_initreadwrite(dbdir); if (rv != secsuccess) { pr_fprintf(pr_stderr, "nss_initialize failed"); pr_cleanup(); exit(rv); } if (pl_strcmp(slotname, "internal") == 0) slot = pk11_getinternalkeyslot(); /* if creating new database, initialize the password.
FC_GetFunctionStatus
name fc_getfunct
ionstatus - get the status of a funct
ion running in parallel syntax ck_rv fc_getfunct
ionstatus( ck_sess
ion_handle hsess
ion ); parameters hsess
ion [in] sess
ion handle.
... descript
ion fc_getfunct
ionstatus is a legacy funct
ion that simply returns ckr_funct
ion_not_parallel.
... return value fc_getfunct
ionstatus always returns ckr_funct
ion_not_parallel.
... examples see also nsc_getfunct
ionstatus ...
Rhino requirements and limitations
requirements recent vers
ions of rhino have only been tested with jdk 1.4 and greater.
... older vers
ions support jdks as early as 1.1.
... to use the javaadapter feature or an optimizat
ion level of 0 or greater, rhino must be running under a security manager that allows the definit
ion of class loaders.
... limitat
ions liveconnect if a javaobject's field's name collides with that of a method, the value of that field is retrieved lazily, and can be counter-intuitively affected by later assignments: javaobj.fieldandmethod = 5; var field = javaobj.fieldandmethod; javaobj.fieldandmethod = 7; // now, field == 7 you can work around this by forcing the field value to be converted to a javascript type when you take its value: javaobj.fieldandmethod = 5; var field = javaobj.fieldandmethod + 0; // force convers
ion now javaobj.fieldandmethod = 7; // now, field == 5 jsobject rhino does not support the netscape.javascript.jsobject class.
JS_GetFunctionCallback
returns the callback currently configured to be called when javascript funct
ions are invoked or exited, as established by a pr
ior call to js_setfunct
ioncallback.
... syntax jsfunct
ioncallback js_getfunct
ioncallback(jscontext *cx); name type descript
ion cx jscontext * pointer to a js context from which to derive runtime informat
ion.
... descript
ion js_getfunct
ioncallback returns the current funct
ion invocat
ion callback, or null if there isn't one set up.
... see also mxr id search for js_getfunct
ioncallback js_setfunct
ioncallback jsfunct
ioncallback bug 1103269 ...
Animation.effect - Web APIs
the animat
ion.effect property of the web animat
ions api gets and sets the target effect of an animat
ion.
... the target effect may be either an effect object of a type based on animat
ioneffectreadonly, such as keyframeeffect, or null.
... syntax var effect = animat
ion.effect; animat
ion.effect = animat
ioneffectreadonly value a animat
ioneffectreadonly object describing the target animat
ion effect for the animat
ion, or null to indicate no active effect.
... specificat
ions specificat
ion status comment web animat
ionsthe definit
ion of 'animat
ion.effect' in that specificat
ion.
AnimationEvent.elapsedTime - Web APIs
the animat
ionevent.elapsedtime read-only property is a float giving the amount of time the animat
ion has been running, in seconds, when this event fired, excluding any time the animat
ion was paused.
... for an animat
ionstart event, elapsedtime is 0.0 unless there was a negative value for animat
ion-delay, in which case the event will be fired with elapsedtime containing (-1 * delay).
... syntax time = animat
ionevent.elapsedtime specificat
ions specificat
ion status comment css animat
ionsthe definit
ion of 'animat
ionevent.elapsedtime' in that specificat
ion.
... working draft initial definit
ion.
AnimationEvent.pseudoElement - Web APIs
summary the animat
ionevent.pseudoelement read-only property is a domstring, starting with '::', containing the name of the pseudo-element the animat
ion runs on.
... if the animat
ion doesn't run on a pseudo-element but on the element, an empty string: ''.
... syntax name = animat
ionevent.pseudoelement specificat
ions specificat
ion status comment css animat
ionsthe definit
ion of 'animat
ionevent.pseudoelement' in that specificat
ion.
... working draft initial definit
ion.
AnimationTimeline - Web APIs
the animat
iontimeline interface of the web animat
ions api represents the timeline of an animat
ion.
...anywhere you see animat
iontimeline, you should use documenttimeline or any other timeline type instead.
... properties animat
iontimeline.currenttime read only returns the time value in milliseconds for this timeline or null if this timeline is inactive.
... specificat
ions specificat
ion status comment web animat
ionsthe definit
ion of 'animat
iontimeline' in that specificat
ion.
AudioBuffer.length - Web APIs
the length property of the aud
iobuffer interface returns an integer representing the length, in sample-frames, of the pcm data stored in the buffer.
... syntax var myarraybuffer = aud
ioctx.createbuffer(2, framecount, aud
ioctx.samplerate); myarraybuffer.length; value an integer.
... example // stereo var channels = 2; // create an empty two second stereo buffer at the // sample rate of the aud
iocontext var framecount = aud
ioctx.samplerate * 2.0; var myarraybuffer = aud
ioctx.createbuffer(2, framecount, aud
ioctx.samplerate); button.onclick = funct
ion() { // fill the buffer with white noise; // just random values between -1.0 and 1.0 for (var channel = 0; channel < channels; channel++) { // this gives us the actual arraybuffer that contains the data var nowbuffering = myarraybuffer.getchanneldata(channel); for (var i = 0; i < framecount; i++) { // math.random() is in [0; 1.0] // aud
io needs to be in [-1.0; 1.0] nowbuffering[i] = math.random() * 2 - 1; } } console.log(myarraybuffer.length); } specificat
ion specifi...
...cat
ion status comment web aud
io apithe definit
ion of 'length' in that specificat
ion.
AudioBuffer.numberOfChannels - Web APIs
the numberofchannels property of the aud
iobuffer interface returns an integer representing the number of discrete aud
io channels described by the pcm data stored in the buffer.
... syntax var myarraybuffer = aud
ioctx.createbuffer(2, framecount, aud
ioctx.samplerate); myarraybuffer.numberofchannels; value an integer.
... example // stereo var channels = 2; // create an empty two second stereo buffer at the // sample rate of the aud
iocontext var framecount = aud
ioctx.samplerate * 2.0; var myarraybuffer = aud
ioctx.createbuffer(2, framecount, aud
ioctx.samplerate); button.onclick = funct
ion() { // fill the buffer with white noise; // just random values between -1.0 and 1.0 for (var channel = 0; channel < channels; channel++) { // this gives us the actual arraybuffer that contains the data var nowbuffering = myarraybuffer.getchanneldata(channel); for (var i = 0; i < framecount; i++) { // math.random() is in [0; 1.0] // aud
io needs to be in [-1.0; 1.0] nowbuffering[i] = math.random() * 2 - 1; } } console.log(myarraybuffer.numberofchannels); } specificat
ion ...
... specificat
ion status comment web aud
io apithe definit
ion of 'numberofchannels' in that specificat
ion.
AudioBuffer.sampleRate - Web APIs
the samplerate property of the aud
iobuffer interface returns a float representing the sample rate, in samples per second, of the pcm data stored in the buffer.
... syntax var myarraybuffer = aud
ioctx.createbuffer(2, framecount, aud
ioctx.samplerate); myarraybuffer.samplerate; value a floating-point value indicating the current sample rate of the buffers data, in samples per second.
... example // stereo var channels = 2; // create an empty two second stereo buffer at the // sample rate of the aud
iocontext var framecount = aud
ioctx.samplerate * 2.0; var myarraybuffer = aud
ioctx.createbuffer(2, framecount, aud
ioctx.samplerate); button.onclick = funct
ion() { // fill the buffer with white noise; // just random values between -1.0 and 1.0 for (var channel = 0; channel < channels; channel++) { // this gives us the actual arraybuffer that contains the data var nowbuffering = myarraybuffer.getchanneldata(channel); for (var i = 0; i < framecount; i++) { // math.random() is in [0; 1.0] // aud
io needs to be in [-1.0; 1.0] nowbuffering[i] = math.random() * 2 - 1; } } console.log(myarraybuffer.samplerate); } specificat
ion spe...
...cificat
ion status comment web aud
io apithe definit
ion of 'samplerate' in that specificat
ion.
AudioBufferSourceNode.detune - Web APIs
the detune property of the aud
iobuffersourcenode interface is a k-rate aud
ioparam representing detuning of oscillat
ion in cents.
... syntax var source = aud
ioctx.createbuffersource(); source.detune.value = 100; // value in cents note: though the aud
ioparam returned is read-only, the value it represents is not.
... value a k-rate aud
ioparam whose value indicates the detuning of oscillat
ion in cents.
... example const aud
ioctx = new aud
iocontext(); const channelcount = 2; const framecount = aud
ioctx.samplerate * 2.0; // 2 seconds const myarraybuffer = aud
ioctx.createbuffer(channelcount, framecount, aud
ioctx.samplerate); for (let channel = 0; channel < channelcount; channel++) { const nowbuffering = myarraybuffer.getchanneldata(channel); for (let i = 0; i < framecount; i++) { nowbuffering[i] = math.random() * 2 - 1; } } const source = aud
ioctx.createbuffersource(); source.buffer = myarraybuffer; source.connect(aud
ioctx.destinat
ion); source.detune.value = 100; // value in cents source.start(); specificat
ions specificat
ion status comment web aud
io apithe definit
ion of 'detune' in that specificat
ion.
AudioContext.outputLatency - Web APIs
the outputlatency read-only property of the aud
iocontext interface provides an estimat
ion of the output latency of the current aud
io context.
... this is the time, in seconds, between the browser passing an aud
io buffer out of an aud
io graph over to the host system's aud
io subsystem to play, and the time at which the first sample in the buffer is actually processed by the aud
io output device.
... syntax var outputlatency = aud
ioctx.outputlatency; value a double representing the output latency in seconds.
... example const aud
ioctx = new aud
iocontext(); console.log(aud
ioctx.outputlatency); specificat
ions specificat
ion status comment web aud
io apithe definit
ion of 'outputlatency' in that specificat
ion.
AudioNode.channelCount - Web APIs
the channelcount property of the aud
ionode interface represents an integer used to determine how many channels are used when up-mixing and down-mixing connect
ions to any inputs to the node.
... channelcount's usage and precise definit
ion depend on the value of aud
ionode.channelcountmode: it is ignored if the channelcountmode value is max.
... syntax var oscillator = aud
ioctx.createoscillator(); var channels = oscillator.channelcount; value an integer.
... example var aud
iocontext = window.aud
iocontext || window.webkitaud
iocontext; var aud
ioctx = new aud
iocontext(); var oscillator = aud
ioctx.createoscillator(); var gainnode = aud
ioctx.creategain(); oscillator.connect(gainnode); gainnode.connect(aud
ioctx.destinat
ion); oscillator.channelcount; specificat
ions specificat
ion status comment web aud
io apithe definit
ion of 'channelcount' in that specificat
ion.
AudioNode.numberOfOutputs - Web APIs
the numberofoutputs property of the aud
ionode interface returns the number of outputs coming out of the node.
... destinat
ion nodes — like aud
iodestinat
ionnode — have a value of 0 for this attribute.
... syntax var numoutputs = aud
ionode.numberofoutputs; value an integer ≥ 0.
... example const aud
ioctx = new aud
iocontext(); const oscillator = aud
ioctx.createoscillator(); const gainnode = aud
ioctx.creategain(); oscillator.connect(gainnode).connect(aud
ioctx.destinat
ion); console.log(oscillator.numberofoutputs); // 1 console.log(gainnode.numberofoutputs); // 1 console.log(aud
ioctx.destinat
ion.numberofoutputs); // 0 specificat
ions specificat
ion status comment web aud
io apithe definit
ion of 'numberofoutputs' in that specificat
ion.
AudioParam.maxValue - Web APIs
the maxvalue read-only property of the aud
ioparam interface represents the maximum possible value for the parameter's nominal (effective) range.
... syntax var maxval = aud
ioparam.maxvalue; value a floating-point number indicating the maximum value permitted for the parameter's nominal range.
... the default value of maxvalue is the maximum positive single-precis
ion floating-point value (+340,282,346,638,528,859,811,704,183,484,516,925,440).
... example const aud
ioctx = new aud
iocontext(); const gainnode = aud
ioctx.creategain(); console.log(gainnode.gain.maxvalue); // 3.4028234663852886e38 specificat
ions specificat
ion status comment web aud
io apithe definit
ion of 'maxvalue' in that specificat
ion.
AudioParam.minValue - Web APIs
the minvalue read-only property of the aud
ioparam interface represents the minimum possible value for the parameter's nominal (effective) range.
... syntax var minval = aud
ioparam.minvalue; value a floating-point number indicating the minimum value permitted for the parameter's nominal range.
... the default value of minvalue is the minimum negative single-precis
ion floating-point value (-340,282,346,638,528,859,811,704,183,484,516,925,440).
... example const aud
ioctx = new aud
iocontext(); const gainnode = aud
ioctx.creategain(); console.log(gainnode.gain.minvalue); // -3.4028234663852886e38 specificat
ions specificat
ion status comment web aud
io apithe definit
ion of 'minvalue' in that specificat
ion.
AudioTrack.sourceBuffer - Web APIs
the read-only aud
iotrack property sourcebuffer returns the sourcebuffer that created the track, or null if the track was not created by a sourcebuffer or the sourcebuffer has been removed from the mediasource.sourcebuffers attribute of its parent media source.
... syntax var sourcebuffer = aud
iotrack.sourcebuffer; value a sourcebuffer or null.
... specificat
ions specificat
ion status comment media source extens
ionsthe definit
ion of 'aud
iotrack: sourcebuffer' in that specificat
ion.
... recommendat
ion ...
BaseAudioContext.onstatechange - Web APIs
the onstatechange property of the baseaud
iocontext interface defines an event handler funct
ion to be called when the statechange event fires: this occurs when the aud
io context's state changes.
... syntax baseaud
iocontext.onstatechange = funct
ion() { ...
... }; example the following snippet is taken from our aud
iocontext states demo (see it running live.) the onstatechange hander is used to log the current state to the console every time it changes.
... aud
ioctx.onstatechange = funct
ion() { console.log(aud
ioctx.state); } specificat
ions specificat
ion status comment web aud
io apithe definit
ion of 'onstatechange' in that specificat
ion.
HTMLCanvasElement: webglcontextcreationerror event - Web APIs
the webglcontextcreat
ionerror event of the webgl api is fired if the user agent is unable to create a webglrenderingcontext context.
... this event has a webglcontextevent.statusmessage property, which can contain a platform dependent string with more informat
ion about the failure.
... bubbles yes cancelable yes interface webglcontextevent event handler property none example var canvas = document.getelementbyid('canvas'); canvas.addeventlistener('webglcontextcreat
ionerror', funct
ion(e) { console.log(e.statusmessage || 'unknown error'); }, false); var gl = canvas.getcontext('webgl'); // logs statusmessage or "unknown error" if unable to create webgl context specificat
ions specificat
ion status comment webgl 1.0the definit
ion of 'webglcontextcreat
ionerror' in that specificat
ion.
... recommendat
ion initial definit
ion.
HTMLTableElement.deleteCaption() - Web APIs
the htmltableelement.deletecapt
ion() method removes the <capt
ion> element from a given <table>.
... if there is no <capt
ion> element associated with the table, this method does nothing.
... syntax htmltableelement.deletecapt
ion() example this example uses javascript to delete a table's capt
ion.
... html <table> <capt
ion>this capt
ion will be deleted!</capt
ion> <tr><td>cell 1.1</td><td>cell 1.2</td></tr> <tr><td>cell 2.1</td><td>cell 2.2</td></tr> </table> javascript let table = document.queryselector('table'); table.deletecapt
ion(); result specificat
ions specificat
ion status comment html living standardthe definit
ion of 'htmltableelement: deletecapt
ion' in that specificat
ion.
IDBDatabase: versionchange event - Web APIs
the vers
ionchange event is fired when a database structure change (idbopendbrequest.onupgradeneeded event or idbfactory.deletedatabase) was requested.
... bubbles no cancelable no interface event event handler property onvers
ionchange examples this example opens a database and, on success, adds a listener to vers
ionchange: // open the database const dbopenrequest = window.indexeddb.open('nonexistent', 4); dbopenrequest.onupgradeneeded = event => { const db = event.target.result; // create an objectstore for this database const objectstore = db.createobjectstore('todolist', { keypath: 'tasktitle' }); // define what data items the objectstore will contain objectstore.createindex('hours', 'hours', { unique: false }); objectstore.createindex('minutes', 'minutes', { unique: false }); objectstore.createindex('day', 'day', { unique: false }); objectstore.createindex('month',...
... 'month', { unique: false }); objectstore.createindex('year', 'year', { unique: false }); }; dbopenrequest.addeventlistener('success', event => { const db = event.target.result; db.addeventlistener('vers
ionchange', event => { console.log('the vers
ion of this database has changed'); }); }); the same example, using the onvers
ionchange event handler property: // open the database const dbopenrequest = window.indexeddb.open('nonexistent', 4); dbopenrequest.onupgradeneeded = event => { const db = event.target.result; // create an objectstore for this database const objectstore = db.createobjectstore('todolist', { keypath: 'tasktitle' }); // define what data items the objectstore will contain objectstore.createindex('hours', 'hours', { unique: false }); objectstore.cr...
...eateindex('minutes', 'minutes', { unique: false }); objectstore.createindex('day', 'day', { unique: false }); objectstore.createindex('month', 'month', { unique: false }); objectstore.createindex('year', 'year', { unique: false }); }; dbopenrequest.onsuccess = event => { const db = event.target.result; db.onvers
ionchange = event => { console.log('the vers
ion of this database has changed'); }; }; ...
IDBTransaction: error event - Web APIs
the error event is fired on idbtransact
ion when a request returns an error and the event bubbles up to the transact
ion object.
... bubbles yes cancelable no interface event event handler property onerror examples this example opens a database and tries to add a record, listening for the error event for the add() operat
ion (this will occur if, for example, a record with the given tasktitle already exists): // open the database const dbopenrequest = window.indexeddb.open('todolist', 4); dbopenrequest.onupgradeneeded = (event) => { const db = event.target.result; // create an objectstore for this database const objectstore = db.createobjectstore('todolist', { keypath: 'tasktitle' }); // define what data items the objectstore will contain objectstore.createindex('hours', 'hours', { unique: false }); objectstore.createindex('minutes', 'minutes', { uniq...
...ue: false }); objectstore.createindex('day', 'day', { unique: false }); objectstore.createindex('month', 'month', { unique: false }); objectstore.createindex('year', 'year', { unique: false }); }; dbopenrequest.onsuccess = (event) => { const db = dbopenrequest.result; // open a read/write db transact
ion, ready for adding the data const transact
ion = db.transact
ion(['todolist'], 'readwrite'); transact
ion.addeventlistener('error', () => { console.log(`error adding new item: ${newitem.tasktitle}`); }); const objectstore = transact
ion.objectstore('todolist'); const newitem = { tasktitle: 'my task', hours: 10, minutes: 10, day: 10, month: 'january', year: 2020 }; const objectstorerequest = objectstore.add(newitem); }; the same example, using the onerror property i...
...s', 'hours', { unique: false }); objectstore.createindex('minutes', 'minutes', { unique: false }); objectstore.createindex('day', 'day', { unique: false }); objectstore.createindex('month', 'month', { unique: false }); objectstore.createindex('year', 'year', { unique: false }); }; dbopenrequest.onsuccess = (event) => { const db = dbopenrequest.result; // open a read/write db transact
ion, ready for adding the data const transact
ion = db.transact
ion(['todolist'], 'readwrite'); transact
ion.onerror = () => { console.log(`error adding new item: ${newitem.tasktitle}`); }; const objectstore = transact
ion.objectstore('todolist'); const newitem = { tasktitle: 'my task', hours: 10, minutes: 10, day: 10, month: 'january', year: 2020 }; const objectstorerequest = objects...
IntersectionObserver.disconnect() - Web APIs
the intersect
ionobserver method disconnect() stops watching all of its target elements for visibility changes.
... syntax intersect
ionobserver.disconnect(); parameters none.
... specificat
ions specificat
ion status comment intersect
ion observerthe definit
ion of 'intersect
ionobserver.disconnect()' in that specificat
ion.
... working draft initial definit
ion.
IntersectionObserverEntry.boundingClientRect - Web APIs
the intersect
ionobserverentry interface's read-only boundingclientrect property returns a domrectreadonly which in essence describes a rectangle describing the smallest rectangle that contains the entire target element.
... syntax var boundsrect = intersect
ionobserverentry.boundingclientrect; value a domrectreadonly which describes the smallest rectangle that contains every part of the target element whose intersect
ion change is being described.
... specificat
ions specificat
ion status comment intersect
ion observerthe definit
ion of 'intersect
ionobserverentry.boundingclientrect' in that specificat
ion.
... working draft initial definit
ion ...
Location: ancestorOrigins - Web APIs
the ancestororigins read-only property of the locat
ion interface is a static domstringlist containing, in reverse order, the origins of all ancestor browsing contexts of the document associated with the given locat
ion object.
... you can use locat
ion.ancestororigins in the script for a document to determine, for example, whenever the document is being framed by a site which you don’t expect it to be framed by.
... you can also use it to vary the behav
ior of the document based on what site or list of sites is framing it.
... syntax const ancestors = locat
ion.ancestororigins; specificat
ions specificat
ion status comment html living standardthe definit
ion of 'ancestororigins ' in that specificat
ion.
Location: href - Web APIs
the href property of the locat
ion interface is a stringifier that returns a usvstring containing the whole url, and allows the href to be updated.
...if you want redirect
ion, use locat
ion.replace().
... syntax string = object.href; object.href = string; examples // lets imagine an <a id="myanchor" href="https://developer.mozilla.org/locat
ion/href"> element is in the document var anchor = document.getelementbyid("myanchor"); var result = anchor.href; // returns: 'https://developer.mozilla.org/locat
ion/href' specificat
ions specificat
ion status comment html living standardthe definit
ion of 'href' in that specificat
ion.
... living standard initial definit
ion.
MIDIConnectionEvent - Web APIs
the midiconnect
ionevent interface of the web midi api is the event passed to the onstatechange event handler of the midiaccess interface and the onstatechange event of the midiports interface.
... this occurs any time a new port becomes available, or when a prev
iously available port becomes unavailable.
... constructor midiconnect
ionevent.midiconnect
ionevent creates a new midiconnect
ionevent object.
... properties midiconnect
ionevent.port returns a reference to a midiport instance for a port that has been connected or disconnected." examples specificat
ions specificat
ion status comment web midi api working draft initial definit
ion.
MediaElementAudioSourceNode.mediaElement - Web APIs
the mediaelementaud
iosourcenode interface's read-only mediaelement property indicates the htmlmediaelement that contains the aud
io track from which the node is receiving aud
io.
... this stream was specified when the node was first created, either using the mediaelementaud
iosourcenode() constructor or the aud
iocontext.createmediaelementsource() method.
... syntax aud
iosourceelement = mediaelementaud
iosourcenode.mediaelement; value an htmlmediaelement representing the element which contains the source of aud
io for the node.
... examples const aud
ioctx = new window.aud
iocontext(); const aud
ioelem = document.queryselector('aud
io'); let opt
ions = { mediaelement: aud
ioelem } let source = new mediaelementaud
iosourcenode(aud
ioctx, opt
ions); console.log(source.mediaelement); specificat
ions specificat
ion status comment web aud
io apithe definit
ion of 'mediaelementaud
iosourcenode.mediaelement' in that specificat
ion.
expiration - Web APIs
the mediakeysess
ion.expirat
ion read-only property returns the time after which the keys in the current sess
ion can no longer be used to decrypt media data, or nan if no such time exists.
...this value may change during a sess
ion lifetime, such as when an act
ion triggers the start of a window.
... syntax var expirat
iontime = mediakeysess
ionobj.expirat
ion; specificat
ions specificat
ion status comment encrypted media extens
ionsthe definit
ion of 'expirat
ion' in that specificat
ion.
... recommendat
ion initial definit
ion ...
Navigator.permissions - Web APIs
the navigator.permiss
ions read-only property returns a permiss
ions object that can be used to query and update permiss
ion status of apis covered by the permiss
ions api.
... syntax permiss
ionsobj = globalobj.navigator.permiss
ions value a permiss
ions object.
... examples navigator.permiss
ions.query({name:'geolocat
ion'}).then(funct
ion(result) { if (result.state === 'granted') { showmap(); } else if (result.state === 'prompt') { showbuttontoenablemap(); } // don't do anything if the permiss
ion was denied.
... }); specificat
ion specificat
ion status comment permiss
ions working draft initial definit
ion.
Notification.badge - Web APIs
the badge property of the notificat
ion interface returns the url of the image used to represent the notificat
ion when there is not enough space to display the notificat
ion itself.
... syntax var url = notificat
ion.badge value a usvstring containing a url.
... specificat
ions specificat
ion status comment notificat
ions apithe definit
ion of 'badge' in that specificat
ion.
... living standard initial definit
ion.
Notification.icon - Web APIs
the icon read-only property of the notificat
ion interface contains the url of an icon to be displayed as part of the notificat
ion, as specified in the icon opt
ion of the notificat
ion() constructor.
... syntax var icon = notificat
ion.icon; value a usvstring.
... examples in our to-do list app (view the app running live), we use the notificat
ion() constructor to fire a notificat
ion, passing it arguments to specify the body, icon and title we want.
... var notificat
ion = new notificat
ion('to do list', { body: text, icon: img }); specificat
ions specificat
ion status comment notificat
ions apithe definit
ion of 'icon' in that specificat
ion.
Notification.lang - Web APIs
the lang read-only property of the notificat
ion interface indicates the language used in the notificat
ion, as specified in the lang opt
ion of the notificat
ion() constructor.
... syntax var language = notificat
ion.lang; value a domstring specifying the language tag.
... examples the following snippet fires a notificat
ion; a simple opt
ions object is created, then the notificat
ion is fired using the notificat
ion() constructor.
... var opt
ions = { body: 'do you like my body?', lang: 'en-us' } var n = new notificat
ion('test notificat
ion',opt
ions); console.log(n.lang) // should return 'en-us' specificat
ions specificat
ion status comment notificat
ions apithe definit
ion of 'lang' in that specificat
ion.
RTCPeerConnection: removestream event - Web APIs
the obsolete removestream event was sent to an rtcpeerconnect
ion to inform it that a mediastream had been removed from the connect
ion.
... you can use the rtcpeerconnect
ion interface's onremovestream property to set a handler for this event.
... bubbles no cancelable no interface mediastreamevent event handler property rtcpeerconnect
ion.onremovestream important: this event has been removed from the webrtc specificat
ion in favor of the existing removetrack event on the remote mediastream and the corresponding mediastream.onremovetrack event handler property of the remote mediastream.
... the rtcpeerconnect
ion api is now track-based, so having zero tracks in the remote stream is equivalent to the remote stream being removed, which caused a removestream event.
RTCPeerConnection: signalingstatechange event - Web APIs
an signalingstatechange event is sent to an rtcpeerconnect
ion to notify it that its signaling state, as indicated by the signalingstate property, has changed.
... bubbles no cancelable no interface event event handler property rtcpeerconnect
ion.onsignalingstatechange examples given an rtcpeerconnect
ion, pc, and an updatestatus() funct
ion that presents status informat
ion to the user, this code sets up an event handler to let the user know when the ice negotiat
ion process finishes up.
... pc.addeventlistener("signalingstatechange", ev => { switch(pc.signalingstate) { case "stable": updatestatus("ice negotiat
ion complete"); break; } }, false); using onsignalingstatechange, it looks like this: pc.onsignalingstatechange = ev => { switch(pc.signalingstate) { case "stable": updatestatus("ice negotiat
ion complete"); break; } }; specificat
ions specificat
ion status comment webrtc 1.0: real-time communicat
ion between browsersthe definit
ion of 'signalingstatechange' in that specificat
ion.
... candidate recommendat
ion ...
RTCPeerConnectionIceEvent.candidate - Web APIs
the read-only candidate property of the rtcpeerconnect
ioniceevent interface returns the rtcicecandidate associated with the event.
... syntax var candidate = event.candidate; value an rtcicecandidate object representing the ice candidate that has been received, or null to indicate that there are no further candidates for this negotiat
ion sess
ion.
... example pc.onicecandidate = funct
ion( ev ) { alert("the ice candidate (transport address: '" + ev.candidate.candidate + "') has been added to this connect
ion."); } specificat
ions specificat
ion status comment webrtc 1.0: real-time communicat
ion between browsersthe definit
ion of 'rtcpeerconnect
ioniceevent.candidate' in that specificat
ion.
... candidate recommendat
ion initial specificat
ion.
ScriptProcessorNode: audioprocess event - Web APIs
the aud
ioprocess event of the scriptprocessornode interface is fired when an input buffer of a script processor is ready to be processed.
... bubbles no cancelable no default act
ion none interface aud
ioprocessingevent event handler property scriptprocessornode.onaud
ioprocess examples scriptnode.addeventlistener('aud
ioprocess', funct
ion(aud
ioprocessingevent) { // the input buffer is a song we loaded earlier var inputbuffer = aud
ioprocessingevent.inputbuffer; // the output buffer contains the samples that will be modified and played var outputbuffer = aud
ioprocessingevent.outputbuffer; // loop through the output channels (in this case there is only one) for (var channel = 0; channel < outputbuffer.numberofchannels; channel++) { var inputdata = inputbuffer.getchanneldata(channel); var outputdata = outputbuffer.getchanneldata(channel); // ...
...loop through the 4096 samples for (var sample = 0; sample < inputbuffer.length; sample++) { // make output equal to the same as the input outputdata[sample] = inputdata[sample]; // add noise to each output sample outputdata[sample] += ((math.random() * 2) - 1) * 0.2; } } }) you could also set up the event handler using the scriptprocessornode.onaud
ioprocess property: scriptnode.onaud
ioprocess = funct
ion(aud
ioprocessingevent) { ...
... } specificat
ions specificat
ion status comment web aud
io apithe definit
ion of 'aud
ioprocessingevent' in that specificat
ion.
Selection.addRange() - Web APIs
the select
ion.addrange() method adds a range to a select
ion.
... syntax select
ion.addrange(range); parameters range a range object that will be added to the select
ion.
... example currently only firefox supports multiple select
ion ranges, other browsers will not add new ranges to the select
ion if it already contains one.
... html <p>i <strong>insist</strong> that you <strong>try</strong> selecting the <strong>strong words</strong>.</p> <button>select strong words</button> javascript let button = document.queryselector('button'); button.addeventlistener('click', funct
ion () { let select
ion = window.getselect
ion(); let strongs = document.getelementsbytagname('strong'); if (select
ion.rangecount > 0) { select
ion.removeallranges(); } for (let i = 0; i < strongs.length; i++) { let range = document.createrange(); range.selectnode(strongs[i]); select
ion.addrange(range); } }); result specificat
ions specificat
ion status comment select
ion apithe definit
ion of 'select
ion.addrange()' in that specificat
ion.
ServiceWorkerGlobalScope.registration - Web APIs
the registrat
ion read-only property of the serviceworkerglobalscope interface returns a reference to the serviceworkerregistrat
ion object, which represents the service worker's registrat
ion.
... syntax serviceworkerregistrat
ion = self.registrat
ion value a serviceworkerregistrat
ion object.
... specificat
ions specificat
ion status comment service workersthe definit
ion of 'serviceworkerglobalscope.registrat
ion' in that specificat
ion.
... working draft initial definit
ion.
ServiceWorkerRegistration.index - Web APIs
the index read-only property of the serviceworkerregistrat
ion interface returns a reference to the contentindex interface, which allows for indexing of offline content.
... syntax var a contentindex object = serviceworkerregistrat
ion.index; value a contentindex object examples you can access the property from either your main script or the registered service worker.
... here is an example from the main script: // reference registrat
ion const registrat
ion = await navigator.serviceworker.ready; // feature detect
ion if ('index' in registrat
ion) { // content index api funct
ionality const contentindex = registrat
ion.index; } from the service worker: // service worker script const contentindex = self.registrat
ion.index; specificat
ions specificat
ion status comment unknownthe definit
ion of 'index' in that specificat
ion.
... unknown initial definit
ion.
ServiceWorkerRegistration.installing - Web APIs
the installing property of the serviceworkerregistrat
ion interface returns a service worker whose serviceworker.state is installing.
... syntax var serviceworker = serviceworkerregistrat
ion.installing; value a serviceworker object, if it is currently in an installing state.
... specificat
ions specificat
ion status comment service workersthe definit
ion of 'serviceworkerregistrat
ion.installing' in that specificat
ion.
... working draft initial definit
ion.
ServiceWorkerRegistration.onupdatefound - Web APIs
the onupdatefound property of the serviceworkerregistrat
ion interface is an eventlistener property called whenever an event of type statechange is fired; it is fired any time the serviceworkerregistrat
ion.installing property acquires a new service worker.
... syntax serviceworkerregistrat
ion.onupdatefound = funct
ion() { ...
... }; specificat
ions specificat
ion status comment service workersthe definit
ion of 'serviceworkerregistrat
ion.onupdatefound' in that specificat
ion.
... working draft initial definit
ion.
ServiceWorkerRegistration.waiting - Web APIs
the waiting property of the serviceworkerregistrat
ion interface returns a service worker whose serviceworker.state is installed.
... syntax var serviceworker = serviceworkerregistrat
ion.waiting; value a serviceworker object, if it is currently in an installed state.
... specificat
ions specificat
ion status comment service workersthe definit
ion of 'serviceworkerregistrat
ion.waiting' in that specificat
ion.
... working draft initial definit
ion.
SourceBuffer.audioTracks - Web APIs
the aud
iotracks read-only property of the sourcebuffer interface returns a list of the aud
io tracks currently contained inside the sourcebuffer.
... syntax var myaud
iotracks = sourcebuffer.aud
iotracks; value an aud
iotracklist object.
... example tbd specificat
ions specificat
ion status comment media source extens
ionsthe definit
ion of 'aud
iotracks' in that specificat
ion.
... recommendat
ion initial definit
ion.
SpeechRecognition() - Web APIs
the speechrecognit
ion() constructor creates a new speechrecognit
ion object instance.
... syntax var myrecognit
ion = new speechrecognit
ion(); parameters none.
...ors; public <color> = aqua | azure | beige | bisque | black | blue | brown | chocolate | coral | crimson | cyan | fuchsia | ghostwhite | gold | goldenrod | gray | green | indigo | ivory | khaki | lavender | lime | linen | magenta | maroon | moccasin | navy | olive | orange | orchid | peru | pink | plum | purple | red | salmon | sienna | silver | snow | tan | teal | thistle | tomato | turquoise | v
iolet | white | yellow ;' var recognit
ion = new speechrecognit
ion(); var speechrecognit
ionlist = new speechgrammarlist(); speechrecognit
ionlist.addfromstring(grammar, 1); recognit
ion.grammars = speechrecognit
ionlist; //recognit
ion.continuous = false; recognit
ion.lang = 'en-us'; recognit
ion.interimresults = false; recognit
ion.maxalternatives = 1; ...
... specificat
ions specificat
ion status comment web speech apithe definit
ion of 'speechrecognit
ion()' in that specificat
ion.
SpeechRecognition.abort() - Web APIs
the abort() method of the web speech api stops the speech recognit
ion service from listening to incoming aud
io, and doesn't attempt to return a speechrecognit
ionresult.
... syntax myspeechrecognit
ion.abort(); returns void.
...ors; public <color> = aqua | azure | beige | bisque | black | blue | brown | chocolate | coral | crimson | cyan | fuchsia | ghostwhite | gold | goldenrod | gray | green | indigo | ivory | khaki | lavender | lime | linen | magenta | maroon | moccasin | navy | olive | orange | orchid | peru | pink | plum | purple | red | salmon | sienna | silver | snow | tan | teal | thistle | tomato | turquoise | v
iolet | white | yellow ;' var recognit
ion = new speechrecognit
ion(); var speechrecognit
ionlist = new speechgrammarlist(); speechrecognit
ionlist.addfromstring(grammar, 1); recognit
ion.grammars = speechrecognit
ionlist; var diagnostic = document.queryselector('.output'); var bg = document.queryselector('html'); document.body.onclick = funct
ion() { recognit
ion.start(); console.log('ready to receiv...
...e a color command.'); } abortbtn.onclick = funct
ion() { recognit
ion.abort(); console.log('speech recognit
ion aborted.'); } recognit
ion.onspeechend = funct
ion() { recognit
ion.stop(); console.log('speech recognit
ion has stopped.'); } specificat
ions specificat
ion status comment web speech apithe definit
ion of 'abort()' in that specificat
ion.
SpeechRecognition.continuous - Web APIs
the continuous property of the speechrecognit
ion interface controls whether continuous results are returned for each recognit
ion, or only a single result.
... it defaults to single results (false.) syntax var mycontinuous = myspeechrecognit
ion.continuous; myspeechrecognit
ion.continuous = true; value a boolean representing the current speechrecognit
ion's continuous status.
...ors; public <color> = aqua | azure | beige | bisque | black | blue | brown | chocolate | coral | crimson | cyan | fuchsia | ghostwhite | gold | goldenrod | gray | green | indigo | ivory | khaki | lavender | lime | linen | magenta | maroon | moccasin | navy | olive | orange | orchid | peru | pink | plum | purple | red | salmon | sienna | silver | snow | tan | teal | thistle | tomato | turquoise | v
iolet | white | yellow ;' var recognit
ion = new speechrecognit
ion(); var speechrecognit
ionlist = new speechgrammarlist(); speechrecognit
ionlist.addfromstring(grammar, 1); recognit
ion.grammars = speechrecognit
ionlist; recognit
ion.continuous = false; recognit
ion.lang = 'en-us'; recognit
ion.interimresults = false; recognit
ion.maxalternatives = 1; ...
... specificat
ions specificat
ion status comment web speech apithe definit
ion of 'continuous' in that specificat
ion.
SpeechRecognition.grammars - Web APIs
the grammars property of the speechrecognit
ion interface returns and sets a collect
ion of speechgrammar objects that represent the grammars that will be understood by the current speechrecognit
ion.
... syntax var mygrammars = myspeechrecognit
ion.grammars; myspeechrecognit
ion.grammars = myspeechgrammarlist; value a speechgrammarlist containing the speechgrammar objects that represent your grammar for your app.
...ors; public <color> = aqua | azure | beige | bisque | black | blue | brown | chocolate | coral | crimson | cyan | fuchsia | ghostwhite | gold | goldenrod | gray | green | indigo | ivory | khaki | lavender | lime | linen | magenta | maroon | moccasin | navy | olive | orange | orchid | peru | pink | plum | purple | red | salmon | sienna | silver | snow | tan | teal | thistle | tomato | turquoise | v
iolet | white | yellow ;' var recognit
ion = new speechrecognit
ion(); var speechrecognit
ionlist = new speechgrammarlist(); speechrecognit
ionlist.addfromstring(grammar, 1); recognit
ion.grammars = speechrecognit
ionlist; //recognit
ion.continuous = false; recognit
ion.lang = 'en-us'; recognit
ion.interimresults = false; recognit
ion.maxalternatives = 1; ...
... specificat
ions specificat
ion status comment web speech apithe definit
ion of 'grammars' in that specificat
ion.
SpeechRecognition.lang - Web APIs
the lang property of the speechrecognit
ion interface returns and sets the language of the current speechrecognit
ion.
... syntax var mylang = myspeechrecognit
ion.lang; myspeechrecognit
ion.lang = 'en-us'; value a domstring representing the bcp 47 language tag for the current speechrecognit
ion.
...ors; public <color> = aqua | azure | beige | bisque | black | blue | brown | chocolate | coral | crimson | cyan | fuchsia | ghostwhite | gold | goldenrod | gray | green | indigo | ivory | khaki | lavender | lime | linen | magenta | maroon | moccasin | navy | olive | orange | orchid | peru | pink | plum | purple | red | salmon | sienna | silver | snow | tan | teal | thistle | tomato | turquoise | v
iolet | white | yellow ;' var recognit
ion = new speechrecognit
ion(); var speechrecognit
ionlist = new speechgrammarlist(); speechrecognit
ionlist.addfromstring(grammar, 1); recognit
ion.grammars = speechrecognit
ionlist; //recognit
ion.continuous = false; recognit
ion.lang = 'en-us'; recognit
ion.interimresults = false; recognit
ion.maxalternatives = 1; ...
... specificat
ions specificat
ion status comment web speech apithe definit
ion of 'lang' in that specificat
ion.
SpeechRecognition.maxAlternatives - Web APIs
the maxalternatives property of the speechrecognit
ion interface sets the maximum number of speechrecognit
ionalternatives provided per speechrecognit
ionresult.
... syntax var mymaxalternativenumber = myspeechrecognit
ion.maxalternatives; myspeechrecognit
ion.maxalternatives = 2; value a number representing the maximum returned alternatives for each result.
...ors; public <color> = aqua | azure | beige | bisque | black | blue | brown | chocolate | coral | crimson | cyan | fuchsia | ghostwhite | gold | goldenrod | gray | green | indigo | ivory | khaki | lavender | lime | linen | magenta | maroon | moccasin | navy | olive | orange | orchid | peru | pink | plum | purple | red | salmon | sienna | silver | snow | tan | teal | thistle | tomato | turquoise | v
iolet | white | yellow ;' var recognit
ion = new speechrecognit
ion(); var speechrecognit
ionlist = new speechgrammarlist(); speechrecognit
ionlist.addfromstring(grammar, 1); recognit
ion.grammars = speechrecognit
ionlist; //recognit
ion.continuous = false; recognit
ion.lang = 'en-us'; recognit
ion.interimresults = false; recognit
ion.maxalternatives = 1; ...
... specificat
ions specificat
ion status comment web speech apithe definit
ion of 'maxalternatives' in that specificat
ion.
SpeechRecognition.onnomatch - Web APIs
the onnomatch property of the speechrecognit
ion interface represents an event handler that will run when the speech recognit
ion service returns a final result with no significant recognit
ion (when the nomatch event fires.) this may involve some degree of recognit
ion, which doesn't meet or exceed the confidence threshold.
... note: the onnomatch handler does not yet work properly in firefox — the speech recognit
ion system always returns a positive match, and then guesses at what item in the grammar it found.
... syntax myspeechrecognit
ion.onnomatch = funct
ion() { ...
... }; examples var recognit
ion = new speechrecognit
ion(); recognit
ion.onnomatch = funct
ion() { console.log('speech not recognised'); } specificat
ions specificat
ion status comment web speech apithe definit
ion of 'onnomatch' in that specificat
ion.
SpeechRecognition.start() - Web APIs
the start() method of the web speech api starts the speech recognit
ion service listening to incoming aud
io with intent to recognize grammars associated with the current speechrecognit
ion.
... syntax myspeechrecognit
ion.start(); parameters none.
...ors; public <color> = aqua | azure | beige | bisque | black | blue | brown | chocolate | coral | crimson | cyan | fuchsia | ghostwhite | gold | goldenrod | gray | green | indigo | ivory | khaki | lavender | lime | linen | magenta | maroon | moccasin | navy | olive | orange | orchid | peru | pink | plum | purple | red | salmon | sienna | silver | snow | tan | teal | thistle | tomato | turquoise | v
iolet | white | yellow ;' var recognit
ion = new speechrecognit
ion(); var speechrecognit
ionlist = new speechgrammarlist(); speechrecognit
ionlist.addfromstring(grammar, 1); recognit
ion.grammars = speechrecognit
ionlist; var diagnostic = document.queryselector('.output'); var bg = document.queryselector('html'); document.body.onclick = funct
ion() { recognit
ion.start(); console.log('ready to receiv...
...e a color command.'); } abortbtn.onclick = funct
ion() { recognit
ion.abort(); console.log('speech recognit
ion aborted.'); } recognit
ion.onspeechend = funct
ion() { recognit
ion.stop(); console.log('speech recognit
ion has stopped.'); } specificat
ions specificat
ion status comment web speech apithe definit
ion of 'start()' in that specificat
ion.
SpeechRecognition.stop() - Web APIs
the stop() method of the web speech api stops the speech recognit
ion service from listening to incoming aud
io, and attempts to return a speechrecognit
ionresult using the aud
io captured so far.
... syntax myspeechrecognit
ion.stop(); returns void.
...ors; public <color> = aqua | azure | beige | bisque | black | blue | brown | chocolate | coral | crimson | cyan | fuchsia | ghostwhite | gold | goldenrod | gray | green | indigo | ivory | khaki | lavender | lime | linen | magenta | maroon | moccasin | navy | olive | orange | orchid | peru | pink | plum | purple | red | salmon | sienna | silver | snow | tan | teal | thistle | tomato | turquoise | v
iolet | white | yellow ;' var recognit
ion = new speechrecognit
ion(); var speechrecognit
ionlist = new speechgrammarlist(); speechrecognit
ionlist.addfromstring(grammar, 1); recognit
ion.grammars = speechrecognit
ionlist; var diagnostic = document.queryselector('.output'); var bg = document.queryselector('html'); document.body.onclick = funct
ion() { recognit
ion.start(); console.log('ready to receiv...
...e a color command.'); } abortbtn.onclick = funct
ion() { recognit
ion.abort(); console.log('speech recognit
ion aborted.'); } recognit
ion.onspeechend = funct
ion() { recognit
ion.stop(); console.log('speech recognit
ion has stopped.'); } specificat
ions specificat
ion status comment web speech apithe definit
ion of 'stop()' in that specificat
ion.
TaskAttributionTiming.containerName - Web APIs
the containername readonly property of the taskattribut
iontiming interface returns the container's name attribute.
... syntax var containername = taskattribut
iontiming.containername; value a domstring containing the container's name attribute.
... specificat
ions specificat
ion status comment long tasks api 1the definit
ion of 'containername' in that specificat
ion.
... working draft initial definit
ion.
TaskAttributionTiming.containerSrc - Web APIs
the containersrc readonly property of the taskattribut
iontiming interface returns the container's src attribute.
... syntax var containersrc = taskattribut
iontiming.containersrc; value a domstring containing the container's src attribute.
... specificat
ions specificat
ion status comment long tasks api 1the definit
ion of 'containersrc' in that specificat
ion.
... working draft initial definit
ion.
Touch.rotationAngle - Web APIs
summary returns the rotat
ion angle, in degrees, of the contact area ellipse defined by touch.radiusx and touch.radiusy.
...it is specified in the touch events – level 2 draft specificat
ion and not in touch events recommendat
ion.
... syntax var angle = touchitem.rotat
ionangle; return value angle the number of degrees of rotat
ion to apply to the described ellipse to align with the contact area between the user and the touch surface.
... specificat
ions specificat
ion status comment touch events – level 2 draft non-stable vers
ion.
TransitionEvent.elapsedTime - Web APIs
the transit
ionevent.elapsedtime read-only property is a float giving the amount of time the animat
ion has been running, in seconds, when this event fired.
... this value is not affected by the transit
ion-delay property.
... syntax name = transit
ionevent.elapsedtime specificat
ions specificat
ion status comment css transit
ionsthe definit
ion of 'transit
ionevent.elapsedtime' in that specificat
ion.
... working draft initial definit
ion.
TransitionEvent.pseudoElement - Web APIs
the transit
ionevent.pseudoelement read-only property is a domstring, starting with '::', containing the name of the pseudo-element the animat
ion runs on.
... if the transit
ion doesn't run on a pseudo-element but on the element, an empty string: ''.
... syntax name = transit
ionevent.pseudoelement specificat
ions specificat
ion status comment css transit
ionsthe definit
ion of 'transit
ionevent.pseudoelement' in that specificat
ion.
... working draft initial definit
ion.
TreeWalker.previousSibling() - Web APIs
the treewalker.prev
ioussibling() method moves the current node to its prev
ious sibling, if any, and returns the found sibling.
... syntax node = treewalker.prev
ioussibling(); example var treewalker = document.createtreewalker( document.body, nodefilter.show_element, { acceptnode: funct
ion(node) { return nodefilter.filter_accept; } }, false ); var node = treewalker.prev
ioussibling(); // returns null as there is no prev
ious sibiling specificat
ions specificat
ion status comment domthe definit
ion of 'treewalker.prev
ioussibling' in that specificat
ion.
... living standard no change from document object model (dom) level 2 traversal and range specificat
ion document object model (dom) level 2 traversal and range specificat
ionthe definit
ion of 'treewalker.prev
ioussibling' in that specificat
ion.
... obsolete initial definit
ion.
USBConfiguration.interfaces - Web APIs
the interfaces read-only property of the usbconfigurat
ion interface returns an array containing instances of the usbinterface describing each interface supported by this configurat
ion.
... syntax var interfaces[] = usbconfigurat
ion.interfaces value an array containing instances of usbinterface.
... specificat
ions specificat
ion status comment unknownthe definit
ion of 'interfaces' in that specificat
ion.
... unknown initial definit
ion.
USBDevice.configurations - Web APIs
the configurat
ions read only property of the usbdevice interface an array of device-specific interfaces for controlling a paired usb device.
... syntax var usbconfigurat
ion[] = usbdevice.configurat
ions value an array of usbconfigurat
ion objects.
... specificat
ions specificat
ion status comment webusbthe definit
ion of 'configurat
ions' in that specificat
ion.
... draft initial definit
ion.
USBDevice.deviceVersionMajor - Web APIs
the devicevers
ionmajor read only property of the usbdevice interface he major vers
ion number of the device in a semantic vers
ioning scheme.
... syntax var serialnumber = usbdevice.devicevers
ionmajor value a number.
... specificat
ions specificat
ion status comment webusbthe definit
ion of 'devicevers
ionmajor' in that specificat
ion.
... draft initial definit
ion.
USBDevice.deviceVersionMinor - Web APIs
the devicevers
ionminor read only property of the usbdevice interface the minor vers
ion number of the device in a semantic vers
ioning scheme.
... syntax var serialnumber = usbdevice.devicevers
ionminor value a number.
... specificat
ions specificat
ion status comment webusbthe definit
ion of 'devicevers
ionminor' in that specificat
ion.
... draft initial definit
ion.
USBDevice.deviceVersionSubminor - Web APIs
the devicevers
ionsubminor read only property of the usbdevice interface the patch vers
ion number of the device in a semantic vers
ioning scheme.
... syntax var serialnumber = usbdevice.devicevers
ionsubminor value a number.
... specificat
ions specificat
ion status comment webusbthe definit
ion of 'devicevers
ionsubminor' in that specificat
ion.
... draft initial definit
ion.
USBDevice.selectConfiguration() - Web APIs
the selectconfigurat
ion() method of the usbdevice interface returns a promise that resolves when the specified configurat
ion is selected.
... syntax var promise = usbdevice.selectconfigurat
ion(configurat
ionvalue) parameters configurat
ionvalue the number of a device-specific configurat
ion.
... specificat
ions specificat
ion status comment webusbthe definit
ion of 'selectconfigurat
ion' in that specificat
ion.
... draft initial definit
ion.
WebGLUniformLocation - Web APIs
the webgluniformlocat
ion interface is part of the webgl api and represents the locat
ion of a uniform variable in a shader program.
... descript
ion the webgluniformlocat
ion object does not define any methods or properties of its own and its content is not directly accessible.
... when working with webgluniformlocat
ion objects, the following methods of the webglrenderingcontext are useful: webglrenderingcontext.getuniformlocat
ion() webglrenderingcontext.uniform() examples getting an uniform locat
ion var canvas = document.getelementbyid('canvas'); var gl = canvas.getcontext('webgl'); var locat
ion = gl.getuniformlocat
ion(webglprogram, 'uniformname'); specificat
ions specificat
ion status comment webgl 1.0the definit
ion of 'webgluniformlocat
ion' in that specificat
ion.
... recommendat
ion initial definit
ion.
Window.applicationCache - Web APIs
important: applicat
ion cache is deprecated as of firefox 44, and is no longer available in insecure contexts from firefox 60 onwards (bug 1354175, currently nightly/beta only).
... returns a reference to the applicat
ion cache object for the window.
... syntax cache = window.applicat
ioncache parameters cache is an object reference to an offlineresourcelist.
... specificat
ion html 5wd ...
window.cancelAnimationFrame() - Web APIs
the window.cancelanimat
ionframe() method cancels an animat
ion frame request prev
iously scheduled through a call to window.requestanimat
ionframe().
... syntax window.cancelanimat
ionframe(requestid); parameters requestid the id value returned by the call to window.requestanimat
ionframe() that requested the callback.
... examples var requestanimat
ionframe = window.requestanimat
ionframe || window.mozrequestanimat
ionframe || window.webkitrequestanimat
ionframe || window.msrequestanimat
ionframe; var cancelanimat
ionframe = window.cancelanimat
ionframe || window.mozcancelanimat
ionframe; var start = window.mozanimat
ionstarttime; // only supported in ff.
... var myreq; funct
ion step(timestamp) { var progress = timestamp - start; d.style.left = math.min(progress / 10, 200) + 'px'; if (progress < 2000) { // it's important to update the requestid each time you're calling requestanimat
ionframe myreq = requestanimat
ionframe(step); } } myreq = requestanimat
ionframe(step); // the cancelat
ion uses the last requestid cancelanimat
ionframe(myreq); specificat
ions specificat
ion status comment html living standardthe definit
ion of 'cancelanimat
ionframe()' in that specificat
ion.
Window: devicemotion event - Web APIs
the devicemot
ion event is fired at a regular interval and indicates the amount of physical force of accelerat
ion the device is receiving at that time.
... it also provides informat
ion about the rate of rotat
ion, if available.
... bubbles no cancelable no interface devicemot
ionevent event handler property window.ondevicemot
ion examples funct
ion handlemot
ionevent(event) { var x = event.accelerat
ionincludinggravity.x; var y = event.accelerat
ionincludinggravity.y; var z = event.accelerat
ionincludinggravity.z; // do something awesome.
... } window.addeventlistener("devicemot
ion", handlemot
ionevent, true); specificat
ions specificat
ion status deviceorientat
ion event specificat
ionthe definit
ion of 'devicemot
ion event' in that specificat
ion.
Window: deviceorientation event - Web APIs
the deviceorientat
ion event is fired when fresh data is available from an orientat
ion sensor about the current orientat
ion of the device as compared to the earth coordinate frame.
...see orientat
ion and mot
ion data explained for details.
... bubbles no cancelable no interface deviceorientat
ionevent event handler property window.ondeviceorientat
ion examples if (window.deviceorientat
ionevent) { window.addeventlistener("deviceorientat
ion", funct
ion(event) { // alpha: rotat
ion around z-axis var rotatedegrees = event.alpha; // gamma: left to right var lefttoright = event.gamma; // beta: front back mot
ion var fronttoback = event.beta; handleorientat
ionevent(fronttoback, lefttoright, rotatedegrees); }, true); } var handleorientat
ionevent = funct
ion(fronttoback, lefttoright, rotatedegrees) { // do something amazing }; specificat
ions specificat
ion status deviceorientat
ion event specif...
...icat
ionthe definit
ion of 'deviceorientat
ion event' in that specificat
ion.
Window.mozAnimationStartTime - Web APIs
returns the time, in milliseconds since the epoch, at which animat
ions started now should be considered to have started.
... this value should be used instead of, for example, date.now(), because this value will be the same for all animat
ions started in this window during this refresh interval, allowing them to remain in sync with one another.
... this also allows javascript-based animat
ions to remain synchronized with css transit
ions and smil animat
ions triggered during the same refresh interval.
... syntax time = window.mozanimat
ionstarttime; parameters time is the time in milliseconds since the epoch at which animat
ions for the current window should be considered to have started.
Window.ondevicemotion - Web APIs
an event handler for the devicemot
ion events sent to the window.
... syntax window.ondevicemot
ion = funcref; where funcref is a reference to a funct
ion.
... this funct
ion receives a devicemot
ionevent object describing the mot
ion that occurred.
... specificat
ions specificat
ion status comment deviceorientat
ion event specificat
ion editor's draft initial definit
ion.
window.ondeviceorientation - Web APIs
summary an event handler for the deviceorientat
ion event, which contains informat
ion about a relative device orientat
ion change.
... syntax window.ondeviceorientat
ion = funct
ion(event) { ...
... }; window.addeventlistener('deviceorientat
ion', funct
ion(event) { ...
... }); specificat
ions specificat
ion status comment deviceorientat
ion event specificat
ion editor's draft initial specificat
ion.
Window.ondeviceorientationabsolute - Web APIs
summary an event handler for the deviceorientat
ionabsolute event containing informat
ion about an absolute device orientat
ion change.
... syntax window.ondeviceorientat
ionabsolute = funct
ion(event) { ...
... }; window.addeventlistener('deviceorientat
ionabsolute', funct
ion(event) { ...
... }); specificat
ions this event handler is not currently part of any specificat
ion.
Window: rejectionhandled event - Web APIs
the reject
ionhandled event is sent to the script's global scope (usually window but also worker) whenever a javascript promise is rejected but after the promise reject
ion has been handled.
... this can be used in debugging and for general applicat
ion resiliency, in tandem with the unhandledreject
ion event, which is sent when a promise is rejected but there is no hander for the reject
ion.
... bubbles no cancelable no interface promisereject
ionevent event handler property onreject
ionhandled example you can use the reject
ionhandled event to log promises that get rejected to the console, along with the reasons why they were rejected: window.addeventlistener("reject
ionhandled", event => { console.log("promise rejected; reason: " + event.reason); }, false); specificat
ions specificat
ion status comment html living standardthe definit
ion of 'reject
ionhandled' in that specificat
ion.
... living standard initial definit
ion.
WindowEventHandlers.onrejectionhandled - Web APIs
the onreject
ionhandled property of the windoweventhandlers mixin is the eventhandler for processing reject
ionhandled events.
... syntax window.addeventlistener("reject
ionhandled", funct
ion(event) { ...
... }); window.onreject
ionhandled = funct
ion(event) { ...}; example window.onreject
ionhandled = funct
ion(e) { console.log(e.reason); } specificat
ions specificat
ion status comment html living standardthe definit
ion of 'onreject
ionhandled' in that specificat
ion.
... living standard initial definit
ion.
WorkerNavigator.connection - Web APIs
the workernavigator.connect
ion read-only property returns a networkinformat
ion object containing informat
ion about the system's connect
ion, such as the current bandwidth of the user's device or whether the connect
ion is metered.
... this could be used to select high definit
ion content or low definit
ion content based on the user's connect
ion.
... syntax connect
ioninfo = self.navigator.connect
ion specificat
ions specificat
ion status comment network informat
ion apithe definit
ion of 'navigator.connect
ion' in that specificat
ion.
... draft initial specificat
ion ...
XPathException.code - Web APIs
the code read-only property of the xpathexcept
ion interface returns a short that contains one of the error code constants.
... syntax var except
ioncode = except
ion.code; value a short number representing the error code.
... specificat
ions specificat
ion status comment document object model (dom) level 3 xpath specificat
ionthe definit
ion of 'xpathexcept
ion' in that specificat
ion.
... recommendat
ion initial definit
ion ...
XRFrame.session - Web APIs
an xrframe object's read-only sess
ion property returns the xrsess
ion object that generated the frame.
... syntax var xrsess
ion = xrframe.sess
ion; value a xrsess
ion object representing the webxr sess
ion for which this xrframe describes the object posit
ions and orientat
ions.
... specificat
ions specificat
ion status comment webxr device apithe definit
ion of 'xrframe.sess
ion' in that specificat
ion.
... working draft initial definit
ion.
XRInputSourcesChangeEvent.session - Web APIs
the xrinputsourceschangeevent property sess
ion specifies the xrsess
ion to which the input source list change event applies.
... syntax let inputssess
ion = xrinputsourceschangeevent.sess
ion; value an xrsess
ion indicating the webxr sess
ion to which the input source list change applies.
... specificat
ions specificat
ion status comment webxr device apithe definit
ion of 'xrinputsourceschangeevent.sess
ion' in that specificat
ion.
... working draft initial definit
ion.
XRInputSourcesChangeEventInit.session - Web APIs
the xrinputsourceschangeeventinit property sess
ion specifies the xrsess
ion to which the input source list change event applies.
... syntax let inputsourceseventinit = { sess
ion: xrsess
ion, added: [newdevice1, ..., newdevicen], removed: [removeddevice1, ..., newdevicen], }; myinputsourceschangeevent = new xrinputsourceschangeeventinit("inputsourceschange", inputsourceseventinit); myinputsourceschangeevent = new xrinputsourceschangeeventinit("inputsourceschange", { sess
ion: xrsess
ion, added: addeddevicelist, removed: removeddevicelist }); value an xrsess
ion indicating the webxr sess
ion to which the input source list change applies.
... specificat
ions specificat
ion status comment webxr device apithe definit
ion of 'xrinputsourceschangeeventinit.sess
ion' in that specificat
ion.
... working draft initial definit
ion.
XRSession.onend - Web APIs
the onend attribute of the xrsess
ion object is the event handler for the end event, which is dispatched after the xr sess
ion ends and all related hardware-specific routines are completed.
... syntax xrsess
ion.onend = funct
ion(event) { ...
... }; example xrsess
ion.onend = funct
ion(event) { console.log("the xr sess
ion has ended") } specificat
ions specificat
ion status comment webxr device apithe definit
ion of 'xrsess
ion.onend' in that specificat
ion.
... working draft initial definit
ion.
XRSessionEventInit - Web APIs
the xrsess
ioneventinit dict
ionary is used when calling the xrsess
ionevent() constructor to provide the new event's initial values.
... properties sess
ion the xrsess
ion to which the event is to be delivered.
... examples <tbd> specificat
ions specificat
ion status comment webxr device apithe definit
ion of 'xrsess
ioneventinit' in that specificat
ion.
... working draft initial definit
ion.
Using the aria-orientation attribute - Accessibility
the aria-orientat
ion attribute is used to indicate whether an element is oriented horizontally or vertically.
... possible effects on user agents and assistive technology note: opin
ions may differ on how assistive technology should handle this technique.
... the informat
ion provided above is one of those opin
ions and therefore not normative.
... <a href="#" id="handle_zoomslider" role="slider" aria-orientat
ion="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 informat
ion for common ua and at product combinat
ions addit
ional resources wai-aria specificat
ion for the aria-orientat
ion attribute ...
-webkit-transition - CSS: Cascading Style Sheets
the -webkit-transit
ion boolean css media feature is a chrome extens
ion whose value is true if the browsing context supports css transit
ions.
... apple has a descript
ion in safari css reference; this is now called simply transit
ion there.
... syntax @media (-webkit-transit
ion) { /* css to use if transit
ions are supported */ } examples use @supports instead do not use the -webkit-transit
ion media feature.
... instead, test for transit
ion support using the css @supports at-rule, like this: @supports (transit
ion: initial) { /* css to use if transit
ions are supported */ } obsolete example before this became obsolete, you could use -webkit-transit
ion in your css like this: @media (-webkit-transit
ion) { /* css to use if transit
ions are supported */ } specificat
ions not part of any standard.
CSS Motion Path - CSS: Cascading Style Sheets
mot
ion path is a css module that allows authors to animate any graphical object along a custom path.
... the idea is that when you want to animate an element moving along a path, you prev
iously only had animating translat
ion, posit
ion, etc.
... basic example <div id="mot
ion-demo"></div> #mot
ion-demo { offset-path: path('m20,20 c20,100 200,0 200,100'); animat
ion: move 3000ms infinite alternate ease-in-out; width: 40px; height: 40px; background: cyan; } @keyframes move { 0% { offset-distance: 0%; } 100% { offset-distance: 100%; } } reference properties offset offset-anchor offset-distance offset-path offset-posit
ion offset-rotate specificat
ions specificat
ion status comment mot
ion path mod...
...ule level 1 working draft initial definit
ion.
CSS Text Decoration - CSS: Cascading Style Sheets
css text decorat
ion is a module of css that defines features relating to text decorat
ion, such as underlines, text shadows, and emphasis marks.
... reference properties letter-spacing text-align text-decorat
ion text-decorat
ion-color text-decorat
ion-line text-decorat
ion-offset text-decorat
ion-skip-ink text-decorat
ion-style text-decorat
ion-thickness text-emphasis text-emphasis-color text-emphasis-posit
ion text-emphasis-style text-indent text-rendering text-shadow text-transform white-space word-spacing guides none.
... examples .under { text-decorat
ion: underline red; } .over { text-decorat
ion: wavy overline lime; } .line { text-decorat
ion: line-through; } .plain { text-decorat
ion: none; } .underover { text-decorat
ion: dashed underline overline; } .thick { text-decorat
ion: solid underline purple 4px; } .blink { text-decorat
ion: blink; } <p class="under">this text has a line underneath it.</p> <p class="over">this text has a line over it.</p> <p class="line">this text has a line going through it.</p> <p>this <a class="plain" href="#">link will not be underlined</a>, as links generally are by default.
... be careful when removing the text decorat
ion on anchors since users often depend on the underline to denote hyperlinks.</p> <p class="underover">this text has lines above <em>and</em> below it.</p> <p class="thick">this text has a really thick purple underline in supporting browsers.</p> <p class="blink">this text might blink for you, depending on the browser you use.</p> specificat
ions specificat
ion status comment css text decorat
ion module level 4 working draft css text decorat
ion module level 3 candidate recommendat
ion css level 2 (revis
ion 1) recommendat
ion css level 1 recommendat
ion initial definit
ion ...
CSS Transitions - CSS: Cascading Style Sheets
css transit
ions is a module of css that lets you create gradual transit
ions between the values of specific css properties.
... the behav
ior of these transit
ions can be controlled by specifying their timing funct
ion, durat
ion, and other attributes.
... reference properties transit
ion transit
ion-delay transit
ion-durat
ion transit
ion-property transit
ion-timing-funct
ion guides using css transit
ions step-by-step tutorial about how to create transit
ions using css.
... specificat
ions specificat
ion status comment css transit
ions working draft initial definit
ion.
x-ms-format-detection - HTML: Hypertext Markup Language
the x-ms-format-detect
ion attribute determines whether data formats within the element’s text, like phone numbers, are automatically converted to followable links.
... links created through format detect
ion do not appear in the dom.
... syntax <html x-ms-format-detect
ion="none"> value all all supported data formats are detected.
... none format detect
ion is turned off.
428 Precondition Required - HTTP
the http 428 precondit
ion required response status code indicates that the server requires the request to be condit
ional.
... typically, this means that a required precondit
ion header, such as if-match, is missing.
... when a precondit
ion header is not matching the server side state, the response should be 412 precondit
ion failed.
... status 428 precondit
ion required specificat
ions specificat
ion title rfc 6585, sect
ion 3: 428 precondit
ion required addit
ional http status codes ...
SyntaxError: a declaration in the head of a for-of loop can't have an initializer - JavaScript
the javascript except
ion "a declarat
ion in the head of a for-of loop can't have an initializer" occurs when the head of a for...of loop contains an initializer express
ion such as |for (var i = 0 of iterable)|.
... message syntaxerror: for-of loop head declarat
ions cannot have an initializer (edge) syntaxerror: a declarat
ion in the head of a for-of loop can't have an initializer (firefox) syntaxerror: for-of loop variable declarat
ion may not have an initializer.
... the head of a for...of loop contains an initializer express
ion.
... examples invalid for-of loop let iterable = [10, 20, 30]; for (let value = 50 of iterable) { console.log(value); } // syntaxerror: a declarat
ion in the head of a for-of loop can't // have an initializer valid for-of loop you need to remove the initializer (value = 50) in the head of the for-of loop.
FinalizationRegistry.prototype.register() - JavaScript
the register() method registers an object with a finalizat
ionregistry instance so that if the object is garbage-collected, the registry's callback may get called.
... unregistertoken opt
ional a token that may be used with the unregister method later to unregister the target object.
... notes see the avoid where possible and notes on cleanup callbacks sect
ions of the finalizat
ionregistry page for important caveats.
... examples using register the following registers the target object referenced by target, passing in the held value "some value" and passing the target object itself as the unregistrat
ion token: registry.register(target, "some value", target); the following registers the target object referenced by target, passing in another object as the held value, and not passing in any unregistrat
ion token (which means target can't be unregistered): registry.register(target, {"useful": "info about target"}); specificat
ions specificat
ion weakrefsthe definit
ion of 'finalizat
ionregistry.prototype.register' in that specificat
ion.
FinalizationRegistry.prototype.unregister() - JavaScript
the unregister unregisters a target object from a finalizat
ionregistry instance.
...ister 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 finalizat
ionregistry(this.#cleanup); /** * constructs a `thingy` instance.
... // ^^^^−−−−− unregister token } } this example shows registering a target object using a different object as its unregister token: { // ^^^^−−−−− held value console.error( `the \`release\` method was never called for the \`thingy\` for the file "${file.name}"` ); }; #registry = new finalizat
ionregistry(this.#cleanup); /** * constructs a `thingy` instance for the given file.
... */ release() { if (this.#file) { this.#registry.unregister(this.#file); // ^^^^^^^^^^−−−−− unregister token file.close(this.#file); this.#file = null; } } } specificat
ions specificat
ion weakrefsthe definit
ion of 'finalizat
ionregistry.prototype.unregister' in that specificat
ion.
AudioTrackList: change event - Web APIs
the change event is fired when an aud
io track is enabled or disabled, for example by changing the track's enabled property.
... bubbles no cancelable no interface event event handler property onchange examples using addeventlistener(): const videoelement = document.queryselector('video'); videoelement.aud
iotracks.addeventlistener('change', (event) => { console.log(`'${event.type}' event fired`); }); // changing the value of `enabled` will trigger the `change` event const toggletrackbutton = document.queryselector('.toggle-track'); toggletrackbutton.addeventlistener('click', () => { const track = videoelement.aud
iotracks[0]; track.enabled = !track.enabled; }); using the onchange event handler property: const videoelement = document.queryselector('video'); videoelement.aud
iotracks.onchange = (event) => { console.log(`'${event.type}' event fired`...
...); }; // changing the value of `enabled` will trigger the `change` event const toggletrackbutton = document.queryselector('.toggle-track'); toggletrackbutton.addeventlistener('click', () => { const track = videoelement.aud
iotracks[0]; track.enabled = !track.enabled; }); specificat
ions specificat
ion status html living standardthe definit
ion of 'change' in that specificat
ion.
CSSStyleDeclaration.cssText - Web APIs
the csstext property of the cssstyledeclarat
ion interface returns or sets the text of the element's inline style declarat
ion only.
... to be able to set a stylesheet rule dynamically, see using dynamic styling informat
ion.
... example <span id="s1" style="color: red;"> some text </span> <script> var elem = document.getelementbyid("s1"); alert(elem.style.csstext); // "color: red;" </script> specificat
ions specificat
ion status comment css object model (cssom)the definit
ion of 'cssstyledeclarat
ion: csstext' in that specificat
ion.
CSSStyleDeclaration.getPropertyCSSValue() - Web APIs
the cssstyledeclarat
ion.getpropertycssvalue() method interface returns a cssvalue containing the css value for a property.
... you should use cssstyledeclarat
ion.getpropertyvalue() instead.
... example the following javascript code gets an object containing the computed rgb values of the color css property: var style = window.getcomputedstyle(elem, null); var rgbobj = style.getpropertycssvalue('color').getrgbcolorvalue(); specificat
ions specificat
ion status comment document object model (dom) level 2 style specificat
ionthe definit
ion of 'cssstyledeclarat
ion' in that specificat
ion.
CSSStyleDeclaration.getPropertyValue() - Web APIs
the cssstyledeclarat
ion.getpropertyvalue() method interface returns a domstring containing the value of a specified css property.
... example the following javascript code queries the value of the margin property in a css selector rule: var declarat
ion = document.stylesheets[0].cssrules[0].style; var value = declarat
ion.getpropertyvalue('margin'); // "1px 2px" specificat
ions specificat
ion status comment css object model (cssom)the definit
ion of 'cssstyledeclarat
ion.getpropertyvalue()' in that specificat
ion.
... working draft document object model (dom) level 2 style specificat
ionthe definit
ion of 'cssstyledeclarat
ion' in that specificat
ion.
CSSStyleDeclaration.length - Web APIs
the read-only property returns an integer that represents the number of style declarat
ions in this css declarat
ion block.
... example the following gets the number of explicitly set styles on the following html element: <div id="div1" style="margin: 0 10px; background-color: #ca1; font-family: monospace"></div> javascript code: var mydiv = document.getelementbyid('div1'); var divstyle = mydiv.style; var len = divstyle.length; // 6 specificat
ions specificat
ion status comment css object model (cssom)the definit
ion of 'cssstyledeclarat
ion.length' in that specificat
ion.
... working draft document object model (dom) level 2 style specificat
ionthe definit
ion of 'cssstyledeclarat
ion' in that specificat
ion.
CompositionEvent.locale - Web APIs
the locale read-only property of the composit
ionevent interface returns the locale of current input method (for example, the keyboard layout locale if the composit
ion is associated with ime).
... syntax mylocale = composit
ionevent.locale value a domstring representing the locale of current input method.
... specificat
ions specificat
ion status comment document object model (dom) level 3 events specificat
ion obsolete no longer in the spec, but still supported.
DeviceOrientationEvent.alpha - Web APIs
returns the rotat
ion of the device around the z axis; that is, the number of degrees by which the device is being twisted around the center of the screen.
... see orientat
ion and mot
ion data explained for details.
... syntax var alpha = instanceofdeviceorientat
ionevent.alpha; specificat
ions specificat
ion status comment deviceorientat
ion event specificat
ion editor's draft initial specificat
ion.
DeviceOrientationEvent.beta - Web APIs
returns the rotat
ion of the device around the x axis; that is, the number of degrees, ranged between -180 and 180, by which the device is tipped forward or backward.
... see orientat
ion and mot
ion data explained for details.
... syntax var beta = instanceofdeviceorientat
ionevent.beta; specificat
ions specificat
ion status comment deviceorientat
ion event specificat
ion editor's draft initial specificat
ion.
DeviceOrientationEvent.gamma - Web APIs
returns the rotat
ion of the device around the y axis; that is, the number of degrees, ranged between -90 and 90, by which the device is tilted left or right.
... see orientat
ion and mot
ion data explained for details.
... syntax var gamma = orientat
ionevent.gamma; specificat
ions specificat
ion status comment deviceorientat
ion event specificat
ion editor's draft initial specificat
ion.
Document: selectionchange event - Web APIs
the select
ionchange event of the select
ion api is fired when the current text select
ion on a document is changed.
... bubbles no cancelable no interface event event handler property onselect
ionchange examples // addeventlistener vers
ion document.addeventlistener('select
ionchange', () => { console.log(document.getselect
ion()); }); // onselect
ionchange vers
ion document.onselect
ionchange = () => { console.log(document.getselect
ion()); }; specificat
ions specificat
ion status comment select
ion apithe definit
ion of 'select
ionchange' in that specificat
ion.
... working draft initial definit
ion.
Element: MSManipulationStateChanged event - Web APIs
msmanipulat
ionstatechanged fires when the state of an element being manipulated has changed (ie.
... bubbles unknown cancelable unknown interface msmanipulat
ionevent event handler property unknown get manipulat
ion states using the laststate and currentstate properties.
... examples // listen for panning state change events outerscroller.addeventlistener("msmanipulat
ionstatechanged", funct
ion(e) { // check to see if they lifted while pulled to the top if (e.currentstate == ms_manipulat
ion_state_inertia && outerscroller.scrolltop === 0) { refreshitemsasync(); } }); specificat
ions not part of any specificat
ion.
Element: compositionend event - Web APIs
the composit
ionend event is fired when a text composit
ion system such as an input method editor completes or cancels the current composit
ion sess
ion.
... bubbles yes cancelable yes interface composit
ionevent event handler property none examples const inputelement = document.queryselector('input[type="text"]'); inputelement.addeventlistener('composit
ionend', (event) => { console.log(`generated characters were: ${event.data}`); }); live example html <div class="control"> <label for="name">on macos, click in the textbox below,<br> then type <kbd>opt
ion</kbd> + <kbd>`</kbd>, then <kbd>a</kbd>:</label> <input type="text" id="example" name="example"> </div> <div class="event-log"> <label>event log:</label> <textarea readonly class="event-log-contents" rows="8" cols="2...
...block; } input[type="text"] { margin: .5rem 0; } kbd { border-radius: 3px; padding: 1px 2px 0; border: 1px solid black; } js const inputelement = document.queryselector('input[type="text"]'); const log = document.queryselector('.event-log-contents'); const clearlog = document.queryselector('.clear-log'); clearlog.addeventlistener('click', () => { log.textcontent = ''; }); funct
ion handleevent(event) { log.textcontent = log.textcontent + `${event.type}: ${event.data}\n`; } inputelement.addeventlistener('composit
ionstart', handleevent); inputelement.addeventlistener('composit
ionupdate', handleevent); inputelement.addeventlistener('composit
ionend', handleevent); result specificat
ions specificat
ion status ui events working draft ...
Element: compositionstart event - Web APIs
the composit
ionstart event is fired when a text composit
ion system such as an input method editor starts a new composit
ion sess
ion.
... bubbles yes cancelable yes interface composit
ionevent event handler property none examples const inputelement = document.queryselector('input[type="text"]'); inputelement.addeventlistener('composit
ionstart', (event) => { console.log(`generated characters were: ${event.data}`); }); live example html <div class="control"> <label for="name">on macos, click in the textbox below,<br> then type <kbd>opt
ion</kbd> + <kbd>`</kbd>, then <kbd>a</kbd>:</label> <input type="text" id="example" name="example"> </div> <div class="event-log"> <label>event log:</label> <textarea readonly class="event-log-contents" rows="8" cols="2...
...block; } input[type="text"] { margin: .5rem 0; } kbd { border-radius: 3px; padding: 1px 2px 0; border: 1px solid black; } js const inputelement = document.queryselector('input[type="text"]'); const log = document.queryselector('.event-log-contents'); const clearlog = document.queryselector('.clear-log'); clearlog.addeventlistener('click', () => { log.textcontent = ''; }); funct
ion handleevent(event) { log.textcontent = log.textcontent + `${event.type}: ${event.data}\n`; } inputelement.addeventlistener('composit
ionstart', handleevent); inputelement.addeventlistener('composit
ionupdate', handleevent); inputelement.addeventlistener('composit
ionend', handleevent); result specificat
ions specificat
ion status ui events working draft ...
Element: compositionupdate event - Web APIs
the composit
ionupdate event is fired when a new character is received in the context of a text composit
ion sess
ion controlled by a text composit
ion system such as an input method editor.
... bubbles yes cancelable yes interface composit
ionevent event handler property none examples const inputelement = document.queryselector('input[type="text"]'); inputelement.addeventlistener('composit
ionupdate', (event) => { console.log(`generated characters were: ${event.data}`); }); live example html <div class="control"> <label for="name">on macos, click in the textbox below,<br> then type <kbd>opt
ion</kbd> + <kbd>`</kbd>, then <kbd>a</kbd>:</label> <input type="text" id="example" name="example"> </div> <div class="event-log"> <label>event log:</label> <textarea readonly class="event-log-contents" rows="8" cols="25"></tex...
...block; } input[type="text"] { margin: .5rem 0; } kbd { border-radius: 3px; padding: 1px 2px 0; border: 1px solid black; } js const inputelement = document.queryselector('input[type="text"]'); const log = document.queryselector('.event-log-contents'); const clearlog = document.queryselector('.clear-log'); clearlog.addeventlistener('click', () => { log.textcontent = ''; }); funct
ion handleevent(event) { log.textcontent = log.textcontent + `${event.type}: ${event.data}\n`; } inputelement.addeventlistener('composit
ionstart', handleevent); inputelement.addeventlistener('composit
ionupdate', handleevent); inputelement.addeventlistener('composit
ionend', handleevent); result specificat
ions specificat
ion status ui events working draft ...
Event.stopImmediatePropagation() - Web APIs
the stopimmediatepropagat
ion() method of the event interface prevents other listeners of the same event from being called.
...if stopimmediatepropagat
ion() is invoked during one such call, no remaining listeners will be called.
... syntax event.stopimmediatepropagat
ion(); specificat
ions specificat
ion status comment domthe definit
ion of 'event.stopimmediatepropagat
ion()' in that specificat
ion.
FullscreenOptions - Web APIs
the fullscreenopt
ions dict
ionary is used to provide configurat
ion opt
ions when calling requestfullscreen() on an element to place that element into full-screen mode.
... properties navigat
ionu
iopt
ional a string controlling whether or not to keep browser user interface elements visible while the element is in full-screen mode.
... the default, "auto", lets the browser make this decis
ion.
Geolocation.clearWatch() - Web APIs
the geolocat
ion.clearwatch() method is used to unregister locat
ion/error monitoring handlers prev
iously installed using geolocat
ion.watchposit
ion().
... syntax navigator.geolocat
ion.clearwatch(id); parameters id the id number returned by the geolocat
ion.watchposit
ion() method when installing the handler you wish to remove.
... example var id, target, opt
ion; funct
ion success(pos) { var crd = pos.coords; if (target.latitude === crd.latitude && target.longitude === crd.longitude) { console.log('congratulat
ion, you reach the target'); navigator.geolocat
ion.clearwatch(id); } }; funct
ion error(err) { console.warn('error(' + err.code + '): ' + err.message); }; target = { latitude : 0, longitude: 0, } opt
ions = { enablehighaccuracy: false, timeout: 5000, maximumage: 0 }; id = navigator.geolocat
ion.watchposit
ion(success, error, opt
ions); specificat
ions specificat
ion status comment geolocat
ion api recommendat
ion initial specificat
ion.
HTMLFormElement.action - Web APIs
the htmlformelement.act
ion property represents the act
ion of the <form> element.
... the act
ion of a form is the program that is executed on the server when the form is submitted.
... syntax var string = form.act
ion; form.act
ion = string; example form.act
ion = '/cgi-bin/publish'; specificat
ions specificat
ion status comment html living standardthe definit
ion of 'htmlformelement: act
ion' in that specificat
ion.
IDBTransaction: complete event - Web APIs
the complete handler is executed when a transact
ion successfully completed.
...urs', 'hours', { unique: false }); objectstore.createindex('minutes', 'minutes', { unique: false }); objectstore.createindex('day', 'day', { unique: false }); objectstore.createindex('month', 'month', { unique: false }); objectstore.createindex('year', 'year', { unique: false }); }; dbopenrequest.onsuccess = event => { const db = dbopenrequest.result; // open a read/write db transact
ion, ready for adding the data const transact
ion = db.transact
ion(['todolist'], 'readwrite'); // add a listener for `complete` transact
ion.addeventlistener('complete', event => { console.log('transact
ion was competed'); }); const objectstore = transact
ion.objectstore('todolist'); const newitem = { tasktitle: 'my task', hours: 10, minutes: 10, day: 10, month: 'january', year: 2019 }...
...urs', 'hours', { unique: false }); objectstore.createindex('minutes', 'minutes', { unique: false }); objectstore.createindex('day', 'day', { unique: false }); objectstore.createindex('month', 'month', { unique: false }); objectstore.createindex('year', 'year', { unique: false }); }; dbopenrequest.onsuccess = event => { const db = dbopenrequest.result; // open a read/write db transact
ion, ready for adding the data const transact
ion = db.transact
ion(['todolist'], 'readwrite'); // add a listener for `complete` transact
ion.oncomplete = event => { console.log('transact
ion was competed'); }; const objectstore = transact
ion.objectstore('todolist'); const newitem = { tasktitle: 'my task', hours: 10, minutes: 10, day: 10, month: 'january', year: 2019 }; const objects...
Location: hash - Web APIs
the hash property of the locat
ion interface returns a usvstring containing a '#' followed by the fragment identifier of the url.
... syntax string = object.hash; object.hash = string; examples <a id="myanchor" href="/docs/locat
ion.href#examples">examples</a> <script> var anchor = document.getelementbyid("myanchor"); console.log(anchor.hash); // returns '#examples' </script> specificat
ions specificat
ion status comment html living standardthe definit
ion of 'hash' in that specificat
ion.
... living standard initial definit
ion ...
Location: host - Web APIs
the host property of the locat
ion interface is a usvstring containing the host, that is the hostname, and then, if the port of the url is nonempty, a ':', and the port of the url.
... syntax string = object.host; object.host = string; examples var anchor = document.createelement("a"); anchor.href = "https://developer.mozilla.org/locat
ion.host" anchor.host == "developer.mozilla.org" anchor.href = "https://developer.mozilla.org:443/locat
ion.host" anchor.host == "developer.mozilla.org" // the port number is not included because 443 is the scheme's default port anchor.href = "https://developer.mozilla.org:4097/locat
ion.host" anchor.host == "developer.mozilla.org:4097" specificat
ions specificat
ion status comment html living standardthe definit
ion of 'host' in that specificat
ion.
... living standard initial definit
ion ...
Location: hostname - Web APIs
the hostname property of the locat
ion interface is a usvstring containing the domain of the url.
... syntax string = object.hostname; object.hostname = string; examples // let's an <a id="myanchor" href="https://developer.mozilla.org/docs/locat
ion.hostname"> element be in the document var anchor = document.getelementbyid("myanchor"); var result = anchor.hostname; // returns:'developer.mozilla.org' specificat
ions specificat
ion status comment html living standardthe definit
ion of 'hostname' in that specificat
ion.
... living standard initial definit
ion.
Location: origin - Web APIs
the origin read-only property of the locat
ion interface is a usvstring containing the unicode serializat
ion of the origin of the represented url; that is: for url using the http or https, the scheme followed by '://', followed by the domain, followed by ':', followed by the port (the default port, 80 and 443 respectively, if explicitely specified); for url using file: scheme, the value is browser dependant; for url using the blob: scheme, the origin of the url following blob:.
... syntax string = object.origin; examples // on this page, returns the origin var result = window.locat
ion.origin; // returns:'https://developer.mozilla.org' specificat
ions specificat
ion status comment html living standardthe definit
ion of 'origin' in that specificat
ion.
... living standard initial definit
ion.
Location: pathname - Web APIs
the pathname property of the locat
ion interface is a usvstring containing an initial '/' followed by the path of the url (or the empty string if there is no path).
... syntax string = object.pathname; object.pathname = string; examples // let's an <a id="myanchor" href="https://developer.mozilla.org/docs/locat
ion.pathname"> element be in the document var anchor = document.getelementbyid("myanchor"); var result = anchor.pathname; // returns:'/docs/locat
ion.pathname' specificat
ions specificat
ion status comment html living standardthe definit
ion of 'pathname' in that specificat
ion.
... living standard initial definit
ion.
Location: port - Web APIs
the port property of the locat
ion interface is a usvstring containing the port number of the url.
... syntax string = object.port; object.port = string; examples // let's an <a id="myanchor" href="https://developer.mozilla.org:443/docs/locat
ion.port"> element be in the document var anchor = document.getelementbyid("myanchor"); var result = anchor.port; // returns:'443' specificat
ions specificat
ion status comment html living standardthe definit
ion of 'locat
ion.port' in that specificat
ion.
... living standard initial definit
ion.
Location: protocol - Web APIs
the protocol property of the locat
ion interface is a usvstring representing the protocol scheme of the url, including the final ':'.
... syntax string = object.protocol; object.protocol = string; examples // let's an <a id="myanchor" href="https://developer.mozilla.org/locat
ion.protocol"> element be in the document var anchor = document.getelementbyid("myanchor"); var result = anchor.protocol; // returns:'https:' specificat
ions specificat
ion status comment html living standardthe definit
ion of 'protocol' in that specificat
ion.
... living standard initial definit
ion.
Location: search - Web APIs
the search property of the locat
ion interface is a search string, also called a query string; that is, a usvstring containing a '?' followed by the parameters of the url.
... syntax string = object.search; object.search = string; examples // let an <a id="myanchor" href="https://developer.mozilla.org/docs/locat
ion.search?q=123"> element be in the document var anchor = document.getelementbyid("myanchor"); var querystring = anchor.search; // returns:'?q=123' // further parsing: let params = new urlsearchparams(querystring); let q = parseint(params.get("q")); // is the number 123 specificat
ions specificat
ion status comment html living standardthe definit
ion of 'search' in that specificat
ion.
... living standard initial definit
ion.
Location: toString() - Web APIs
the tostring() stringifier method of the locat
ion interface returns a usvstring containing the whole url.
... it is a read-only vers
ion of locat
ion.href.
... syntax string = object.tostring(); examples // let's imagine an <a id="myanchor" href="https://developer.mozilla.org/docs/locat
ion/tostring"> element is in the document var anchor = document.getelementbyid("myanchor"); var result = anchor.tostring(); // returns: 'https://developer.mozilla.org/docs/locat
ion/tostring' specificat
ions specificat
ion status comment html living standard living standard ...
MIDIOutputMap - Web APIs
the mid
ioutputmap read-only interface of the web midi api provides a map-like interface to the currently available midi output ports.
... although it works like a map, because it is read-only, it does not contain clear(), delete(), or set() funct
ions.
... specificat
ions specificat
ion status comment web midi api working draft initial definit
ion.
MSRangeCollection - Web APIs
this object is a microsoft extens
ion and is only supported in internet explorer.
... the msrangecollect
ion object is an array of one or more range objects.
... remarks the msrangecollect
ion object does not inherit from any class or interface and does not define any members.
Selection.deleteFromDocument() - Web APIs
the deletefromdocument() method of the select
ion interface deletes the selected text from the document's dom.
...upon clicking the button, the window.getselect
ion() method gets the selected text, and the deletefromdocument() method removes it.
...once you do, you can remove the selected content by clicking the button below.</p> <button>delete selected text</button> javascript let button = document.queryselector('button'); button.addeventlistener('click', deleteselect
ion); funct
ion deleteselect
ion() { let select
ion = window.getselect
ion(); select
ion.deletefromdocument(); } result specificat
ions specificat
ion status comment select
ion apithe definit
ion of 'select
ion.deletefromdocument()' in that specificat
ion.
Selection.focusOffset - Web APIs
the select
ion.focusoffset read-only property returns the number of characters that the select
ion's focus is offset within the select
ion.focusnode.
...if the select
ion ends with the first character in the select
ion.focusnode, 0 is returned.
... syntax offset = sel.focusoffset specificat
ions specificat
ion status comment select
ion apithe definit
ion of 'select
ion.focusoffset' in that specificat
ion.
Selection.getRangeAt() - Web APIs
the select
ion.getrangeat() method returns a range object representing one of the ranges currently selected.
...a negative number or a number greater than or equal to select
ion.rangecount will result in an error.
... example let ranges = []; sel = window.getselect
ion(); for(let i = 0; i < sel.rangecount; i++) { ranges[i] = sel.getrangeat(i); } /* each item in the ranges array is now * a range object representing one of the * ranges in the current select
ion */ specificat
ions specificat
ion status comment select
ion apithe definit
ion of 'select
ion: getrangeat()' in that specificat
ion.
ServiceWorkerGlobalScope: notificationclick event - Web APIs
the notificat
ionclick event is fired to indicate that a system notificat
ion spawned by serviceworkerregistrat
ion.shownotificat
ion() has been clicked.
... bubbles no cancelable no interface notificat
ionevent event handler onnotificat
ionclick examples you can use the notificat
ionclick event in an addeventlistener method: self.addeventlistener('notificat
ionclick', funct
ion(event) { console.log('on notificat
ion click: ', event.notificat
ion.tag); event.notificat
ion.close(); // this looks to see if the current is already open and // focuses if it is event.waituntil(clients.matchall({ type: "window" }).then(funct
ion(clientlist) { for (var i = 0; i < clientlist.length; i++) { var client = clientlist[i]; if (client.url == '/' && 'focus' in client) return client.focus(); } if (clients.openwindow) return clients.openwindow('/'); })); }); ...
... or use the onnotificat
ionclick event handler property: self.onnotificat
ionclick = funct
ion(event) { console.log('on notificat
ion click: ', event.notificat
ion.tag); event.notificat
ion.close(); // this looks to see if the current is already open and // focuses if it is event.waituntil(clients.matchall({ type: "window" }).then(funct
ion(clientlist) { for (var i = 0; i < clientlist.length; i++) { var client = clientlist[i]; if (client.url == '/' && 'focus' in client) return client.focus(); } if (clients.openwindow) return clients.openwindow('/'); })); }; specificat
ions specificat
ion status notificat
ions apithe definit
ion of 'onnotificat
ionclick' in that specificat
ion.
ServiceWorkerRegistration.scope - Web APIs
the scope read-only property of the serviceworkerregistrat
ion interface returns a unique identifier for a service worker registrat
ion.
... syntax var swscope = serviceworkerregistrat
ion.scope; specificat
ions specificat
ion status comment service workersthe definit
ion of 'serviceworkerregistrat
ion.scope' in that specificat
ion.
... working draft initial definit
ion.
ServiceWorkerRegistration.sync - Web APIs
the sync property of the serviceworkerregistrat
ion interface returns a reference to the syncmanager interface, which manages background synchronizat
ion processes.
... syntax var syncmanager = serviceworkerregistrat
ion.sync; value a syncmanager object.
... specificat
ions specificat
ion status comment web background synchronizat
ion living standard initial definit
ion.
SpeechRecognition: nomatch event - Web APIs
the nomatch event of the web speech api is fired when the speech recognit
ion service returns a final result with no significant recognit
ion.
... this may involve some degree of recognit
ion, which doesn't meet or exceed the confidence threshold.
... bubbles no cancelable no interface speechrecognit
ionevent event handler property onnomatch examples you can use the nomatch event in an addeventlistener method: var recognit
ion = new webkitspeechrecognit
ion() || new speechrecognit
ion(); recognit
ion.addeventlistener('nomatch', funct
ion() { console.log('speech not recognized'); }); or use the onnomatch event handler property: recognit
ion.onnomatch = funct
ion() { console.log('speech not recognized'); } specificat
ions specificat
ion status comment web speech apithe definit
ion of 'speech recognit
ion events' in that specificat
ion.
SpeechRecognition.serviceURI - Web APIs
the serviceuri property of the speechrecognit
ion interface specifies the locat
ion of the speech recognit
ion service used by the current speechrecognit
ion to handle the actual recognit
ion.
... syntax var myserviceuri = myspeechrecognit
ion.serviceuri; myspeechrecognit
ion.serviceuri = 'path/to/my/service/'; value a domstring representing the uri of the speech recognit
ion service.
... examples var recognit
ion = new speechrecognit
ion(); recognit
ion.serviceuri = 'http://www.example.com'; ...
SpeechRecognitionError.message - Web APIs
the message read-only property of the speechrecognit
ionerror interface returns a message describing the error in more detail.
... this speechrecognit
ionerror interface was renamed to speechrecognit
ionerrorevent in the web speech api specificat
ion.
... examples var recognit
ion = new speechrecognit
ion(); recognit
ion.onerror = funct
ion(event) { console.log('speech recognit
ion error detected: ' + event.error); console.log('addit
ional informat
ion: ' + event.message); } ...
SpeechRecognitionEvent.resultIndex - Web APIs
the resultindex read-only property of the speechrecognit
ionevent interface returns the lowest index value result in the speechrecognit
ionresultlist "array" that has actually changed.
... the speechrecognit
ionresultlist object is not an array, but it has a getter that allows it to be accessed by array syntax.
... examples recognit
ion.onresult = funct
ion(event) { var color = event.results[0][0].transcript; diagnostic.textcontent = 'result received: ' + color + '.'; bg.style.backgroundcolor = color; console.log(event.resultindex); // returns 0 if there is only one result } specificat
ions specificat
ion status comment web speech apithe definit
ion of 'resultindex' in that specificat
ion.
WebGLShaderPrecisionFormat.rangeMax - Web APIs
the read-only webglshaderprecis
ionformat.rangemax property returns the base 2 log of the absolute value of the maximum value that can be represented.
... examples var canvas = document.getelementbyid('canvas'); var gl = canvas.getcontext('webgl'); gl.getshaderprecis
ionformat(gl.vertex_shader, gl.medium_float).rangemax; // 127 gl.getshaderprecis
ionformat(gl.fragment_shader, gl.low_int).rangemax; // 24 specificat
ions specificat
ion status comment webgl 1.0the definit
ion of 'webglshaderprecis
ionformat.rangemax' in that specificat
ion.
... recommendat
ion initial definit
ion.
WebGLShaderPrecisionFormat.rangeMin - Web APIs
the read-only webglshaderprecis
ionformat.rangemin property returns the base 2 log of the absolute value of the minimum value that can be represented.
... examples var canvas = document.getelementbyid('canvas'); var gl = canvas.getcontext('webgl'); gl.getshaderprecis
ionformat(gl.vertex_shader, gl.medium_float).rangemin; // 127 gl.getshaderprecis
ionformat(gl.fragment_shader, gl.low_int).rangemin; // 24 specificat
ions specificat
ion status comment webgl 1.0the definit
ion of 'webglshaderprecis
ionformat.rangemin' in that specificat
ion.
... recommendat
ion initial definit
ion.
XRSession: end event - Web APIs
an end event is fired at an xrsess
ion object when the webxr sess
ion has ended, either because the web applicat
ion has chosen to stop the sess
ion, or because the user agent terminated the sess
ion.
... bubbles no cancelable no interface xrsess
ionevent event handler xrsess
ion.onend example to be informed when a webxr sess
ion comes to an end, you can add a handler to your xrsess
ion instance using addeventlistener(), like this: xrsess
ion.addeventlistener("end", funct
ion(event) { /* the sess
ion has shut down */ }); alternatively, you can use the xrsess
ion.onend event handler property to establish a handler for the end event: xrsess
ion.onend = funct
ion(event) { /* the sess
ion has shut down */ } specificat
ions specificat
ion status comment webxr device apithe definit
ion of 'end event' in that specificat
ion.
... working draft initial definit
ion.
XRSession: inputsourceschange event - Web APIs
the inputsourceschange event is sent to an xrsess
ion when the set of available webxr input devices changes.
... examples specificat
ions specificat
ion status comment webxr device apithe definit
ion of 'inputsourceschange event' in that specificat
ion.
... working draft initial definit
ion.
Using the radio role - Accessibility
descript
ion this technique demonstrates how to use the rad
io role and describes the effect it has on browsers and assistive technology.
...the informat
ion provided above is one of those opin
ions and therefore not normative.
... <h3 id="rg1_label">lunch opt
ions</h3> <ul class="rad
iogroup" id="rg1" role="rad
iogroup" aria-labelledby="rg1_label"> <li id="r1" tabindex="-1" role="rad
io" aria-checked="false"> <img role="presentat
ion" src="rad
io-unchecked.gif" /> thai </li> <li id="r2" tabindex="-1" role="rad
io" aria-checked="false"> <img role="presentat
ion" src="rad
io-unchecked.gif" /> subway </li> <li id="r3" tabindex="0" role="rad
io" aria-checked="true"> <img role="presentat
ion" src="rad
io-checked.gif" /> rad
io maria </li> </ul> working examples: notes aria attributes used related aria techniques compatibility tbd: add support informat
ion for common ua and at product combinat
ions addit
ional resources ...
StringView - Archive of obsolete content
the aims of this library are: to create a c-like interface for strings (i.e., an array of character codes — an arraybufferview in javascript) based upon the javascript arraybuffer interface to create a highly extensible library that anyone can extend by adding methods to the object stringview.prototype to create a collect
ion of methods for such string-like objects (since now: stringviews) which work strictly on arrays of numbers rather than on creating new immutable javascript strings to work with unicode encodings other than javascript's default utf-16 domstrings introduct
ion as web applicat
ions become more and more powerful, adding features such as aud
io and video manipulat
ion, access to raw data using websockets, and so forth, it has become clear that there are times wh...
... however, this is slow and error-prone, due to the need for multiple convers
ions (especially if the binary data is not actually byte-format data, but, for example, 32-bit integers or floats).
... the code stringview.js "use strict"; /*\ |*| |*| :: number.isinteger() polyfill :: |*| |*| /docs/web/javascript/reference/global_objects/number/isinteger |*| \*/ if (!number.isinteger) { number.isinteger = funct
ion isinteger (nval) { return typeof nval === "number" && isfinite(nval) && nval > -9007199254740992 && nval < 9007199254740992 && math.floor(nval) === nval; }; } /*\ |*| |*| stringview mdndeveloper network |*| |*| revis
ion #12, march 21st, 2017 |*| |*| https://developer.mozilla.org/add-ons/code_snippets/stringview |*| https://developer.mozilla.org/docs/user:fus
ionchess |*| https://github.com/madmurphy/strin...
...And 110 more matches
Handling common JavaScript problems - Learn web development
prev
ious overview: cross browser testing next now we'll look at common cross-browser javascript problems and how to fix them.
... this includes informat
ion on using browser dev tools to track down and fix problems, using polyfills and libraries to work around problems, getting modern javascript features working in older browsers, and more.
... the trouble with javascript historically, javascript was plagued with cross-browser compatibility problems — back in the 1990s, the main browser choices back then (internet explorer and netscape) had scripting implemented in different language flavours (netscape had javascript, ie had jscript and also offered vbscript as an opt
ion), and while at least javascript and jscript were compatible to some degree (both based on the ecmascript specificat
ion), things were often implemented in conflicting, incompatible ways, causing developers many nightmares.
...And 109 more matches
WebGL constants - Web APIs
the webgl api provides several constants that are passed into or returned by funct
ions.
... standard webgl constants are installed on the webglrenderingcontext and webgl2renderingcontext objects, so that you use them as gl.constant_name: var canvas = document.getelementbyid('mycanvas'); var gl = canvas.getcontext('webgl'); gl.getparameter(gl.line_width); some constants are also provided by webgl extens
ions.
... var debuginfo = gl.getextens
ion('webgl_debug_renderer_info'); var vendor = gl.getparameter(debuginfo.unmasked_vendor_webgl); the webgl tutorial has more informat
ion, examples, and resources on how to get started with webgl.
...And 108 more matches
Install Manifests - Archive of obsolete content
introduct
ion an install manifest is the file an add-on manager-enabled xul applicat
ion (e.g.
... firefox or thunderbird) uses to determine informat
ion about an add-on as it is being installed.
... it contains metadata identifying the add-on, providing informat
ion about who created it, where more informat
ion can be found about it, which vers
ions of what applicat
ions it is compatible with, how it should be updated, and so on.
...And 107 more matches
source-editor.jsm
the editor provided is eclipse or
ion.
... to use it, you first need to import the code module into your javascript scope: components.utils.import("resource:///modules/source-editor.jsm"); warning: much of the funct
ionality of the source editor is implemented by a secondary code module (by default, source-editor-or
ion.jsm).
... you must not directly import that code module; it is essentially an implementat
ion detail.
...And 107 more matches
Editor Embedding Guide - Archive of obsolete content
then simply call nsiwebbrowser->do_getinterface on the nsiwebbrowser to retrieve the nsieditingsess
ion from it.
... from there you call editingsess
ion->makewindoweditable(domwindow, editortype, pr_true).
...nscomptr<nsieditingsess
ion> editingsess
ion; nsiwebbrowser->do_getinterface(getter_addrefs(editingsess
ion)); if (editingsess
ion) editingsess
ion->makewindoweditable(domwindow, "html", pr_true); the valid editor types are: "text" (similar to notepad or a textarea; does not allow for html) "textmail" (similar to "text" but html can be inserted; intended for plaintext mail usage and handling of citat
ions) "html" (this is...
...And 106 more matches
XUL accessibility guidelines - Archive of obsolete content
introduct
ion welcome to the xul accessibility guidelines.
... by following these principles and practices, you will be able to write your xul applicat
ions in such a way that all users, including those with physical, sensory, or communicative disabilities, with be able to use and enjoy them.
...most of all, accessibility requires a consc
ious effort on your part, and a desire to include everyone.
...And 106 more matches
Anatomy of a video game - Game development
present, accept, interpret, calculate, repeat the goal of every video game is to present the user(s) with a situat
ion, accept their input, interpret those signals into act
ions, and calculate a new situat
ion resulting from those acts.
... games are constantly looping through these stages, over and over, until some end condit
ion occurs (such as winning, losing, or exiting to go to bed).
...these games present two images to the user; they accept their click (or touch); they interpret the input as a success, failure, pause, menu interact
ion, etc.; finally, they calculate an updated scene resulting from that input.
...And 103 more matches
Hacking Tips
all tips listed here are dealing with the javascript shell obtained at the end of the build documentat
ion of spidermonkey.
... it is separated in 2 parts, one sect
ion related to debugging and another sect
ion related to drafting optimizat
ions.
... many of these tips only apply to debug builds of the js shell; they will not funct
ion in a release build.
...And 103 more matches
Handling common accessibility problems - Learn web development
prev
ious overview: cross browser testing next next we turn our attent
ion to accessibility, providing informat
ion on common problems, how to do simple testing, and how to make use of auditing/automat
ion tools for finding accessibility issues.
... when we say accessibility in the context of web technology, most people immediately think of making sure websites/apps are usable by people with disabilities, for example: visually impaired people using screen readers or magnificat
ion/zoom to access text people with motor funct
ion impairments using the keyboard (or other non-mouse features) to activate website funct
ionality.
... people with hearing impairments relying on capt
ions/subtitles or other text alternatives for aud
io/video content.
...And 100 more matches
Linear-gradient Generator - CSS: Cascading Style Sheets
linear-gradient generator html content <div id="container"> <div id="gradient-container" data-alpha="true"> </div> <div id="controls"> <div class="sect
ion"> <div class="title"> active point </div> <div class="property"> <div class="ui-input-slider" data-topic="point-posit
ion" data-info="posit
ion" data-unit="px" data-min="-1000" data-value="0" data-max="1000" data-sensivity="5"></div> <div id="delete-point" class="button"> delete point </div> </div> <div class="ui-color-picker" data-topic="picker"></div> </div> <div class="sect
ion"> <div class="title"> active axis </div> ...
...topic="axis-unit" data-selected="1"> <div data-value='px'> pixels (px) </div> <div data-value='%'> percentage (%) </div> </div> <div id="delete-axis" class="button"> delete line </div> </div> <div class="property"> <div class="ui-slider" data-topic="axis-rotat
ion" data-info="rotat
ion" data-min="-180" data-value="0" data-max="180"></div> </div> </div> <div id="tool-sect
ion" class="sect
ion"> <div class="title"> tool settings </div> <div class="property"> <div class="name"> alpha background </div> <div id="canvas-bg"></div...
... </div> </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; posit
ion: relative; float: left; display: table; } .ui-color-picker .picking-area:hover { cursor: default; } /* hsv format - hue-saturat
ion-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: -webk...
...And 98 more matches
The "codecs" parameter in common media types - Web media technologies
at a fundamental level, you can specify the type of a media file using a simple mime type, such as video/mp4 or aud
io/mpeg.
...with it, container-specific informat
ion can be provided.
... this informat
ion may include things like the profile of the video codec, the type used for the aud
io tracks, and so forth.
...And 98 more matches
CSS3 - Archive of obsolete content
css3 is the latest evolut
ion of the cascading style sheets language and aims at extending css2.1.
... it brings a lot of long-awaited novelties, like rounded corners, shadows, gradients, transit
ions or animat
ions, as well as new layouts like multi-columns, flexible box or grid layouts.
... experimental parts are vendor-prefixed and should either be avoided in product
ion environments, or used with extreme caut
ion as both their syntax and semantics can change in the future.
...And 97 more matches
Advanced Svelte: Reactivity, lifecycle, accessibility - Learn web development
prev
ious overview: client-side javascript frameworks next in the last article we added more features to our to-do list and started to organize our app into components.
...we will also learn about the act
ion directive, which will allow us to extend the funct
ionality of html elements in a reusable and declarative way.
... the following new components will be developed throughout the course of this article: moreact
ions: displays the check all and remove completed buttons, and emits the corresponding events required to handle their funct
ionality.
...And 97 more matches
Experimental features in Firefox
in order to test new features, mozilla publishes a test vers
ion of the firefox browser, firefox nightly, every day.
... this page lists features that are in nightly vers
ions of firefox along with informat
ion on how to activate them, if necessary.
... you can test your web sites and applicat
ions before these features get released and ensure everything will still work with the latest web technology capabilities.
...And 97 more matches
nsITextInputProcessor
dom/interfaces/base/nsitextinputprocessor.idlscriptable this interface is a text input events synthesizer and manages its composit
ion and modifier state 1.0 66 introduced gecko 38 inherits from: nsisupports last changed in gecko 38.0 (firefox 38.0 / thunderbird 38.0 / seamonkey 2.35) the motivat
ion of this interface is to provide better api than nsidomwindowutils to dispatch key events and create, modify, and commit composit
ion in higher level.
... nsidomwindowutils has provided the methods which dispatched keyboard events and composit
ion events almost directly.
... therefore they sometimes caused impossible scenar
ios in automated tests (what's tested with such events?) and js-ime and/or js-keyboard on firefox os or add-ons may dispatch events with wrong rules.
...And 97 more matches
Cognitive accessibility - Accessibility
cognitive accessibility covers accessibility considerat
ions for people with cognit
ion and learning disabilities.
...the range includes people with mental illnesses, such as depress
ion and schizophrenia.
... it also includes people with learning disabilities, such as dyslexia and attent
ion deficit hyperactivity disorder (adhd).
...And 97 more matches
Sqlite.jsm
all operat
ions are asynchronous.
...all the funct
ionality in sqlite.jsm is asynchronous.
...since sqlite.jsm manages statements for you, it can perform intelligent act
ions like purging all cached statements not in use, freeing memory in the process.
...And 96 more matches
Viewpoints and viewers: Simulating cameras in WebXR - Web APIs
the first and most important thing to understand when considering the code to manage point-of-view and cameras in your applicat
ion is this: webxr does not have cameras.
... animating 3d graphics is an area of software development that brings together multiple disciplines in computer science, mathematics, art, graphic design, kinematics, anatomy, phys
iology, physics, and cinematography.
... there are a few articles about the fundamental math, geometry, and other concepts behind webgl and webxr which may be useful to read before or while reading this one, including: explaining basic 3d theory matrix math for the web webgl model view project
ion geometry and reference spaces in webxr ed.
...And 96 more matches
Details of the object model - JavaScript
« prev
iousnext » javascript is an object-based language based on prototypes, rather than being class-based.
...this chapter attempts to clarify the situat
ion.
... this chapter assumes that you are already somewhat familiar with javascript and that you have used javascript funct
ions to create simple objects.
...And 96 more matches
MMgc - Archive of obsolete content
the flash player uses it for nearly all memory allocat
ions.
...the garbage collector is "managing" it, detecting when the memory is no longer reachable from anywhere in the applicat
ion and reclaiming it at that time.
...another way to think about it: unmanaged memory is c++ operators new and delete managed memory is c++ operator new, with opt
ional delete mmgc contains a page allocator called gcheap, which allocates large blocks (megabytes) of memory from the system and doles out 4kb pages to the unmanaged memory allocator (fixedmalloc) and the managed memory allocator (gc).
...And 95 more matches
An overview of NSS Internals
a high-level overview to the internals of network security services (nss) software developed by the mozilla.org projects tradit
ionally used its own implementat
ion of security protocols and cryptographic algorithms, originally called netscape security services, nowadays called network security services (nss).
...in order to support multiple operating systems (os), it is based on a cross platform portability layer, called the netscape portable runtime (nspr), which provides cross platform applicat
ion programming interfaces (apis) for os specific apis like file system access, memory management, network communicat
ion, and multithreaded programming.
... nss offers lots of funct
ionality; we'll walk through the list of modules, design principles, and important relevant standards.
...And 94 more matches
Index - Firefox Developer Tools
found 158 pages: # page tags and summary 1 firefox developer tools developing mozilla, guide, tools, web development, web development:tools, l10n:pr
iority firefox developer tools is a set of web developer tools built into firefox.
... 3 accessibility inspector accessibility, accessibility inspector, devtools, guide, tools the accessibility inspector provides a means to access important informat
ion exposed to assistive technologies on the current page via the accessibility tree, allowing you to check what's missing or otherwise needs attent
ion.
... 4 color vis
ion simulat
ion accessibility, accessibility inspector, color blindness, devtools, guide, simulat
ion, tools the simulator in the accessibility inspector in firefox developer tools lets you see what a web page would look like to users with var
ious forms of color vis
ion deficiency (better known as "color blindness"), as well as contrast sensitivity loss.
...And 94 more matches
An Overview of XPCOM
« prev
iousnext » this is a book about xpcom.
... this chapter provides a quick tour of xpcom - an introduct
ion to the basic concepts and technologies in xpcom and component development.
... the brief sect
ions in this chapter introduce the concepts at a very high level, so that we can discuss and use them with more familiarity in the tutorial itself, which describes the creat
ion of a mozilla component called weblock.
...And 93 more matches
How to build custom form controls - Learn web development
for example, if you need to perform advanced styling on some controls such as the <select> element or if you want to provide custom behav
iors, you may consider building your own controls.
... note: we'll focus on building the control, not on how to make the code generic and reusable; that would involve some non-trival javascript code and dom manipulat
ion in an unknown context, and that is out of the scope of this article.
...this will save you some prec
ious time.
...And 92 more matches
Gecko info for Windows accessibility vendors
this faq explains how makers of windows screen readers, voice dictat
ion packages and magnificat
ion software can support gecko-based software.
... definit
ions here are some basic definit
ions that you'll need for this document to make sense: gecko: the rendering engine for firefox, thunderbird, nvu, mozilla seamonkey and other applicat
ions.
...if you ser
iously need to understand msaa, you'll need to read the docs on msdn and play with the sample apps and code that come with msaa sdk 1.3.
...And 91 more matches
Color picker tool - CSS: Cascading Style Sheets
y="10"></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; posit
ion: relative; float: left; display: table; } .ui-color-picker .picking-area:hover { cursor: default; } /* hsv format - hue-saturat
ion-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...
...inear-gradient(left, #fff 0%, rgba(255, 255, 255, 0) 100%); background: -ms-linear-gradient(bottom, #000 0%, rgba(0, 0, 0, 0) 100%), -ms-linear-gradient(left, #fff 0%, rgba(255, 255, 255, 0) 100%); background: -o-linear-gradient(bottom, #000 0%, rgba(0, 0, 0, 0) 100%), -o-linear-gradient(left, #fff 0%, rgba(255, 255, 255, 0) 100%); background-color: #f00; } /* hsl format - hue-saturat
ion-lightness */ .ui-color-picker[data-mode='hsl'] .picking-area { background: -moz-linear-gradient(top, hsl(0, 0%, 100%) 0%, hsla(0, 0%, 100%, 0) 50%, hsla(0, 0%, 0%, 0) 50%, hsl(0, 0%, 0%) 100%), -moz-linear-gradient(left, hsl(0, 0%, 50%) 0%, hsla(0, 0%, 50%, 0) 100%); background: -webkit-linear-gradient(top, hsl(0, 0%, 100%) 0%, hsla(0, 0%, 100%, 0) 50%, hsla(0, 0%, 0%, 0)...
..., hsl(0, 0%, 50%) 0%, hsla(0, 0%, 50%, 0) 100%); background: -o-linear-gradient(top, hsl(0, 0%, 100%) 0%, hsla(0, 0%, 100%, 0) 50%, hsla(0, 0%, 0%, 0) 50%, hsl(0, 0%, 0%) 100%), -o-linear-gradient(left, hsl(0, 0%, 50%) 0%, hsla(0, 0%, 50%, 0) 100%); background-color: #f00; } .ui-color-picker .picker { width: 10px; height: 10px; border-radius: 50%; border: 1px solid #fff; posit
ion: absolute; top: 45%; left: 45%; } .ui-color-picker .picker:before { width: 8px; height: 8px; content: ""; posit
ion: absolute; border: 1px solid #999; border-radius: 50%; } .ui-color-picker .hue, .ui-color-picker .alpha { width: 198px; height: 28px; margin: 5px; border: 1px solid #fff; float: left; } .ui-color-picker .hue { background: url("https://mdn.mozillademos.org/files/5701...
...And 91 more matches
Appendix: What you should know about open-source software licenses - Archive of obsolete content
any discuss
ion of open-source software deserves an explanat
ion of licensing-related issues.
...the open source definit
ion states what condit
ions the oss license must satisfy.
...in countries that are signatories to the berne convent
ion (which is most countries, including japan, china, india, australia, the americas, and all of europe) this right is automatic, and requires no declarat
ion or registrat
ion.
...And 90 more matches
Client-side storage - Learn web development
prev
ious overview: client-side web apis modern web browsers support a number of ways for web sites to store data on the user's computer — with the user's permiss
ion — then retrieve it when necessary.
... prerequisites: javascript basics (see first steps, building blocks, javascript objects), the basics of client-side apis objective: to learn how to use client-side storage apis to store applicat
ion data.
... persisting prev
ious site activity (e.g.
...And 89 more matches
EventTarget.addEventListener() - Web APIs
the eventtarget method addeventlistener() sets up a funct
ion that will be called whenever the specified event is delivered to the target.
... addeventlistener() works by adding a funct
ion or an object that implements eventlistener to the list of event listeners for the specified event type on the eventtarget on which it's called.
... syntax target.addeventlistener(type, listener [, opt
ions]); target.addeventlistener(type, listener [, usecapture]); target.addeventlistener(type, listener [, usecapture, wantsuntrusted ]); // gecko/mozilla only parameters type a case-sensitive string representing the event type to listen for.
...And 89 more matches
WindowOrWorkerGlobalScope.setInterval() - Web APIs
the setinterval() method, offered on the window and worker interfaces, repeatedly calls a funct
ion or executes a code snippet, with a fixed time delay between each call.
... syntax var intervalid = scope.setinterval(func, [delay, arg1, arg2, ...]); var intervalid = scope.setinterval(funct
ion[, delay]); var intervalid = scope.setinterval(code, [delay]); parameters func a funct
ion to be executed every delay milliseconds.
... the funct
ion is not passed any arguments, and no return value is expected.
...And 82 more matches
jspage - Archive of obsolete content
var mootools={vers
ion:"1.2.4",build:"0d9113241a90b9cd5643b926795852a2026710d4"};var native=funct
ion(k){k=k||{};var a=k.name;var i=k.legacy;var b=k.protect; var c=k.implement;var h=k.generics;var f=k.initialize;var g=k.afterimplement||funct
ion(){};var d=f||i;h=h!==false;d.constructor=native;d.$family={name:"native"}; if(i&&f){d.prototype=i.prototype;}d.prototype.constructor=d;if(a){var e=a.tolowercase();d.prototype.$family={name:e};native.typize(d,e);}var j=funct
ion(n,l,o,m){if(!b||m||!n.prototype[l]){n.prototype[l]=o; }if(h){native.genericize(n,l,b);}g.call(n,l,o);return n;};d.alias=funct
ion(n,l,p){if(typeof n=="string"){var o=this.prototype[n];if((n=o)){return j(this,l,n,p); }}for(var m in n){this.alias(m,n[m],l);}return this;};d.implement=funct
ion(m,l,o){if(typeof m=="string"){retu...
...rn j(this,m,l,o);}for(var n in m){j(this,n,m[n],l); }return this;};if(c){d.implement(c);}return d;};native.genericize=funct
ion(b,c,a){if((!a||!b[c])&&typeof b.prototype[c]=="funct
ion"){b[c]=funct
ion(){var d=array.prototype.slice.call(arguments); return b.prototype[c].apply(d.shift(),d);};}};native.implement=funct
ion(d,c){for(var b=0,a=d.length;b<a;b++){d[b].implement(c);}};native.typize=funct
ion(a,b){if(!a.type){a.type=funct
ion(c){return($type(c)===b); };}};(funct
ion(){var a={array:array,date:date,funct
ion:funct
ion,number:number,regexp:regexp,string:string};for(var h in a){new native({name:h,initialize:a[h],protect:true}); }var d={"boolean":boolean,"native":native,object:object};for(var c in d){native.typize(d[c],c);}var f={array:["concat","indexof","join","lastindexof","pop","push","reverse...
...","shift","slice","sort","splice","tostring","unshift","valueof"],string:["charat","charcodeat","concat","indexof","lastindexof","match","replace","search","slice","split","substr","substring","tolowercase","touppercase","valueof"]}; for(var e in f){for(var b=f[e].length;b--;){native.genericize(a[e],f[e][b],true);}}})();var hash=new native({name:"hash",initialize:funct
ion(a){if($type(a)=="hash"){a=$unlink(a.getclean()); }for(var b in a){this[b]=a[b];}return this;}});hash.implement({foreach:funct
ion(b,c){for(var a in this){if(this.hasownproperty(a)){b.call(c,this[a],a,this); }}},getclean:funct
ion(){var b={};for(var a in this){if(this.hasownproperty(a)){b[a]=this[a];}}return b;},getlength:funct
ion(){var b=0;for(var a in this){if(this.hasownproperty(a)){b++; }}return b;}});hash.alias("foreach",...
...And 81 more matches
PKCS11 FAQ
pkcs11 faq quest
ions and answers general quest
ions after plugging in an external pkcs #11 module, how do you use the certificate available on the token?
... what vers
ion of pkcs #11 does nss support?
... nss requires at least pkcs #11 vers
ion 2.0, but can support some features of later vers
ions of nss, including nss 2.20.
...And 81 more matches
Places utilities for JavaScript
utils.js is accessible at the following url: http://mxr.mozilla.org/mozilla-centr...ntent/utils.js this file includes utility funct
ions used by a lot of the bookmarking, tagging, and annotat
ion services that are built into firefox.
...its not an interface, and as such it will never be frozen, but it provides some easy to use funct
ions that can save you from reinventing the wheel and cluttering up your own classes/funct
ions when you need it.
... there are several predefined vers
ions of this for common calls.
...And 81 more matches
Plug-in Basics - Plugins
plug-ins like these are now available: multimedia viewers such as adobe flash and adobe acrobat utilities that provide object embedding and compress
ion/decompress
ion services applicat
ions that range from personal informat
ion managers to games the range of possibilities for using plug-in technology seems boundless, as shown by the growing numbers of independent software vendors who are creating new and innovative plug-ins.
... with the plug-in api, you can create dynamically loaded plug-ins that can: register one or more mime types draw into a part of a browser window receive keyboard and mouse events obtain data from the network using urls post data to urls add hyperlinks or hotspots that link to new urls draw into sect
ions on an html page communicate with javascript/dom from native code you can see which plug-ins are installed on your system and have been properly associated with the browser by consulting the installed plug-ins page.
...type "about:plugins" in the locat
ion bar.
...And 81 more matches
Debugger.Object - Firefox Developer Tools
debugger.object a debugger.object instance represents an object in the debuggee, providing reflect
ion-oriented methods to inspect and modify its referent.
... spidermonkey creates exactly one debugger.object instance for each debuggee object it presents to a given debugger instance: if the debugger encounters the same object through two different routes (perhaps two funct
ions are called on the same object), spidermonkey presents the same debugger.object instance to the debugger each time.
...for example, in firefox, code in privileged compartments sees content dom element objects without redefinit
ions or extens
ions made to that object’s properties by content code.
...And 80 more matches
Media container formats (file types) - Web media technologies
the format of aud
io and video media files is defined in two parts (three if a file has both aud
io and video in it, of course): the aud
io and/or video codecs used and the media container format (or file type) used.
... in this guide, we'll look at the container formats used most commonly on the web, covering basics about their specificat
ions as well as their benefits, limitat
ions, and ideal use cases.
...instead, it streams the encoded aud
io and video tracks directly from one peer to another using mediastreamtrack objects to represent each track.
...And 80 more matches
cfx - Archive of obsolete content
cfx is no longer supported as of firefox 44 and no longer accepted for add-on submiss
ion.
... for informat
ion on how to migrate from cfx to jpm see this guide.
...cfx is is no longer supported as of firefox 44 and no longer accepted for add-on submiss
ion, jpm should now be used instead.
...And 79 more matches
LiveConnect Overview - Archive of obsolete content
javascript to java communicat
ion when you refer to a java package or class, or work with a java object or array, you use one of the special liveconnect objects.
... table 9.1 the liveconnect objects object descript
ion javaarray a wrapped java array, accessed from within javascript code.
...see data type convers
ion for complete informat
ion.
...And 79 more matches
Handling common HTML and CSS problems - Learn web development
prev
ious overview: cross browser testing next with the scene set, we'll now look specifically at the common cross-browser problems you will come across in html and css code, and what tools can be used to prevent problems from happening, or fix problems that occur.
... the trouble with html and css some of the trouble with html and css lies with the fact that both languages are fairly simple, and often developers don't take them ser
iously, in terms of making sure the code is well-crafted, efficient, and semantically describes the purpose of the features on the page.
...responsive design problems are also common — a site that looks good in a desktop browser might provide a terrible experience on a mobile device, because the content is too small to read, or perhaps the site is slow because of expensive animat
ions.
...And 79 more matches
Window - Web APIs
the window interface is home to a variety of funct
ions, namespaces, objects, and constructors which are not necessarily directly associated with the concept of a user interface window.
... <div id="interfacediagram" style="display: inline-block; posit
ion: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; posit
ion: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectrat
io="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...
...domparser is specified in dom parsing and serializat
ion.
...And 79 more matches
Overview of Mozilla embedding APIs
introduct
ion the mozilla public api consists of a collect
ion of services and components which are accessed via xpcom interfaces.
... mozilla's xpcom layer consists of a component model (called xpcom) and the infrastructure necessary to support dynamic registrat
ion, instantiat
ion and manipulat
ion of xpcom components.
... at the heart of xpcom's implementat
ion is the service manager and the component manager.
...And 78 more matches
DevTools API - Firefox Developer Tools
while this api is currently a work-in-progress, there are usable port
ions of page inspector and debugger that may be used currently.
... introduct
ion the devtools api provides a way to register and access developer tools in firefox.
... in terms of code, each tool has to provide a tooldefinit
ion object.
...And 78 more matches
CustomizableUI.jsm
if you want to use it from a jsm or another context without a window reference, you need to import it yourself: components.utils.import("resource:///modules/customizableui.jsm"); introduct
ion the module is intended for two primary purposes: allow adding, moving and removing customizable widgets.
... note that it is expressly not really aware about the specific ui used by users to make customizat
ions.
... toolbars generally funct
ion the same way they always have.
...And 77 more matches
sslerr.html
if you are inclined to help with this migrat
ion, your help would be very much appreciated.
... upgraded documentat
ion may be found in the current nss reference nss and ssl error codes chapter 8 nss and ssl error codes nss error codes are retrieved using the nspr funct
ion pr_geterror.
... in addit
ion to the error codes defined by nspr, pr_geterror retrieves the error codes described in this chapter.
...And 77 more matches
Tree Box Objects - Archive of obsolete content
« prev
iousnext » this sect
ion will describe the tree box object used to handle how a tree is displayed.
... about the tree box object box objects were described in an earlier sect
ion.
... redrawing the tree we already saw the rowcountchanged() funct
ion of the tree box object in the prev
ious sect
ion.
...And 34 more matches
richlistbox - Archive of obsolete content
note: in vers
ions of firefox pr
ior to firefox 3, rich list boxes support only single select
ion.
... firefox 3 introduced multiple select
ion to rich list boxes.
... attributes disabled, disablekeynavigat
ion, preference, seltype, suppressonselect, tabindex, value properties accessibletype, currentindex, currentitem, disabled, disablekeynavigat
ion, itemcount, scrollboxobject, selectedcount, selectedindex, selecteditem, selecteditems, seltype, suppressonselect, tabindex, value methods additemtoselect
ion, appenditem, clearselect
ion, ensureelementisvisible, ensureindexisvisible, getindexoffirstvisiblerow, getindexofitem, getitematindex, getnumberofvisiblerows, getrowcount, getselecteditem, insertitemat, invertselect
ion, movebyoffset, removeitemat, removeitemfromselect
ion, scrolltoindex, selectall, selectitem, selectitemrange, timedselect, toggleitemselect
ion examples <richlistbox> <richlistitem> <descript
ion>a xul descript
ion!</descri...
...And 34 more matches
tree - Archive of obsolete content
descript
ion content tree nsitreeview, nsitreecontentview yes this tree has treeitem elements placed within the treechildren element.
... in this situat
ion, a content view (which implements the interface nsitreecontentview) which is a more specialized type of view, uses the treeitem elements and their descendants to determine the data to display in the tree.
...it is similar to the prev
ious type but is used when the tree does not have dont-build-content in its flags attribute.
...And 34 more matches
HTML table advanced features and accessibility - Learn web development
prev
ious overview: tables next in the second article in this module, we look at some more advanced features of html tables — such as capt
ions/summaries and grouping your rows into table head, body and footer sect
ions — as well as looking at the accessibility of tables for visually impaired users.
... prerequisites: the basics of html (see introduct
ion to html).
... adding a capt
ion to your table with <capt
ion> you can give your table a capt
ion by putting it inside a <capt
ion> element and nesting that inside the <table> element.
...And 34 more matches
Manipulating documents - Learn web development
prev
ious overview: client-side web apis next when writing web pages and apps, one of the most common things you'll want to do is manipulate the document structure in some way.
... this is usually done by using the document object model (dom), a set of apis for controlling html and styling informat
ion that makes heavy use of the document object.
... objective: to gain familiarity with the core dom apis, and the other apis commonly associated with dom and document manipulat
ion the important parts of a web browser web browsers are very complicated pieces of software with a lot of moving parts, many of which can't be controlled or manipulated by a web developer using javascript.
...And 34 more matches
Secure Development Guidelines
the following content will likely see significant revis
ion, though can be used as a reference for security best practices to follow when developing code for mozilla.
... introduct
ion provide developers with informat
ion 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++ introduct
ion: 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 var
ious state informat
ion instruct
ion pointer (eip) points to register being executed; can’t be modified directly introduct
ion: gaining control (2) eip is modified using call or jump instruct
ions attacks usually rely on obtaining control over the eip otherwise ...
...the attacker can try to control memory pointed to by an existing funct
ion pointer a vulnerability is required to modify the eip or sensitive memory saved return addr or funct
ion pointer get altered introduct
ion: gaining control (3) common issues used to gain control buffer overflows format string bugs integer overflows/underflows writing secure code: input validat
ion input validat
ion most vulnerabilities are a result of un-validated input always perform input validat
ion could save you without knowing it examples: if it doesn’t have to be negative, store it in an unsigned int if the input doesn’t have to be > 512, cut it off there if the input should only be [a-za-z0-9], enforce it cross site scripting (xss) xss is a type of code inje...
...And 34 more matches
nsIHttpChannel
netwerk/protocol/http/nsihttpchannel.idlscriptable this interface allows for the modificat
ion of http request parameters and the inspect
ion of the resulting http response status and headers when they become available.
... inherits from: nsichannel last changed in gecko 1.3 to create an http channel, use nsi
ioservice with a http uri, for example: var
ios = components.classes["@mozilla.org/network/
io-service;1"] .getservice(components.interfaces.nsi
ioservice); var ch =
ios.newchannel("https://www.example.com/", null, null); method overview void getoriginalresponseheader(in acstring aheader, in nsihttpheadervisitor avisitor); acstring getrequestheader(in acstring aheader); acstring getresponseheader(in acstring header); boolean isnocacheresponse(); boolean isnostoreresponse(); void redirectto(in nsiuri anewuri); void setemptyrequestheader(in acstring aheader); void setreferrerwithpolicy(in nsiuri referrer, i...
...der, in acstring avalue, in boolean amerge); void setresponseheader(in acstring header, in acstring value, in boolean merge); void visitoriginalresponseheaders(in nsihttpheadervisitor avisitor); void visitrequestheaders(in nsihttpheadervisitor avisitor); void visitresponseheaders(in nsihttpheadervisitor avisitor); constants constant descript
ion referrer_policy_no_referrer_when_downgrade default; indicates not to pass on the referrer when downgrading from https to http referrer_policy_no_referrer indicates no referrer will be sent referrer_policy_origin only send the origin of the referring uri referrer_policy_origin_when_xorigin same as the default; only send the origin of the referring u...
...And 34 more matches
BasicCardResponse - Web APIs
the basiccardresponse dict
ionary (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.
... basiccardresponse.cardholdername read only secure context opt
ional contains the cardholder name of the card used to make the payment.
... basiccardresponse.cardsecuritycode read only secure context opt
ional contains the security code of the card used to make the payment.
...And 34 more matches
Using the Gamepad API - Web APIs
technologies like <canvas>, webgl, <aud
io>, and <video>, along with javascript implementat
ions, have matured to the point where they can now support many tasks prev
iously requiring native code.
...in addit
ion to these events, the api also adds a gamepad object, which you can use to query the state of a connected gamepad, and a navigator.getgamepads() method which you can use to get a list of gamepads known to the page.
... you can use gamepadconnected like this: window.addeventlistener("gamepadconnected", funct
ion(e) { console.log("gamepad connected at index %d: %s.
...And 34 more matches
XRView - Web APIs
the webxr device api's xrview interface provides informat
ion describing a single view into the xr scene for a specific frame, providing orientat
ion and posit
ion informat
ion for the viewpoint.
... you can think of it as a descript
ion of a specific eye or camera and how it views the world.
...this allows the two views, when projected in isolat
ion into the appropriate eyes, to simulate a 3d world.
...And 34 more matches
Border-radius generator - CSS: Cascading Style Sheets
border-radius html content <div id="container"> <div class="group sect
ion"> <div id="preview" class="col span_12"> <div id="subject"> <div id="top-left" class="radius-container" data-x="left" data-y="top"> </div> <div id="top-right" class="radius-container" data-x="right" data-y="top"> </div> <div id="bottom-right" class="radius-container" data-x="right" data-y="bottom"> </div> <div id="bottom-left" class="radius-container" data-x="left" data-y="bottom"> </div> <div id="radi...
... <div id="blw" class="ui-input-slider" data-topic="bottom-left-w" data-unit=" px" data-sensivity="2"></div> <div id="blh" class="ui-input-slider" data-topic="bottom-left-h" data-unit=" px" data-sensivity="2"></div> </div> </div> </div> </div> <div id="controls" class="group sect
ion"> <div class="group sect
ion"> <div id="dimens
ions"> <div class="ui-input-slider" data-topic="width" data-info="width" data-unit=" px" data-min="150" data-max="700" data-sensivity="1"></div> <div class="ui-input-slider" data-topic="height" data-info="height" data-unit=" px" data-min="75" data-max="350" ...
...data-sensivity="1"></div> </div> <div id="output"></div> </div> <div class="group sect
ion"> <div id="radius-lock"> <div class="info"> rounded corner </div> <div class="ui-checkbox" data-topic='top-left'></div> <div class="ui-checkbox" data-topic='top-right'></div> <div class="ui-checkbox" data-topic='bottom-right'></div> <div class="ui-checkbox" data-topic='bottom-left'></div> </div> <div id="unit-select
ion"> <div class="info"> select border units </div> </div> </div> </div> </div> css content /* grid of ten * ========================================================================== */ .s...
...And 34 more matches
HTML attribute reference - HTML: Hypertext Markup Language
elements in html have attributes; these are addit
ional values that configure the elements or adjust their behav
ior in var
ious ways to meet the criteria the users want.
... attribute list attribute name elements descript
ion accept <form>, <input> list of types the server accepts, typically a file type.
... act
ion <form> the uri of a program that processes the informat
ion submitted via the form.
...And 34 more matches
Standard metadata names - HTML: Hypertext Markup Language
standard metadata names defined in the html specificat
ion the html specificat
ion defines the following set of standard metadata names: applicat
ion-name: the name of the applicat
ion running in the web page.
... note: browsers may use this to identify the applicat
ion.
... it is different from the <title> element, which usually contain the applicat
ion name, but may also contain informat
ion like the document name or a status.
...And 34 more matches
Protocol upgrade mechanism - HTTP
the http/1.1 protocol provides a special mechanism that can be used to upgrade an already established connect
ion to a different protocol, using the upgrade header field.
... this mechanism is opt
ional; it cannot be used to insist on a protocol change.
... implementat
ions can choose not to take advantage of an upgrade even if they support the new protocol, and in practice, this mechanism is used mostly to bootstrap a websockets connect
ion.
...And 34 more matches
Numbers and dates - JavaScript
« prev
iousnext » this chapter introduces the concepts, objects and funct
ions used to work with and perform calculat
ions using numbers and dates in javascript.
... this includes using numbers written in var
ious bases including decimal, binary, and hexadecimal, as well as the use of the global math object to perform a wide variety of mathematical operat
ions on numbers.
... numbers in javascript, numbers are implemented in double-precis
ion 64-bit binary format ieee 754 (i.e., a number between ±2−1022 and ±2+1023, or about ±10−308 to ±10+308, with a numeric precis
ion of 53 bits).
...And 34 more matches
Writing forward-compatible websites - Developer guides
this page explains how to write websites that do not break when new browser vers
ions are released.
... what this means is that any time you access a global variable in an event handler content attribute, including calling any funct
ion declared globally, you can end up with a name collis
ion if a specificat
ion adds a new dom property to elements or documents which has the same name as your funct
ion or variable, and a browser implements it.
... if that happens, then suddenly your funct
ion stops being called.
...And 27 more matches
<select>: The HTML Select element - HTML: Hypertext Markup Language
the html <select> element represents a control that provides a menu of opt
ions: the source for this interactive example is stored in a github repository.
...each menu opt
ion is defined by an <opt
ion> element nested inside the <select>.
... each <opt
ion> element should have a value attribute containing the data value to submit to the server when that opt
ion is selected.
...And 27 more matches
HTTP Messages - HTTP
there are two types of messages: requests sent by the client to trigger an act
ion on the server, and responses, the answer from the server.
... http messages are composed of textual informat
ion encoded in ascii, and span over multiple lines.
... in http/1.1, and earlier vers
ions of the protocol, these messages were openly sent across the connect
ion.
...And 27 more matches
Intl.DateTimeFormat() constructor - JavaScript
syntax new intl.datetimeformat([locales[, opt
ions]]) parameters locales opt
ional a string with a bcp 47 language tag, or an array of such strings.
...unicode extens
ion are supported (for example "en-us-u-ca-buddhist").
... for the general form and interpretat
ion of the locales argument, see the intl page.
...And 27 more matches
WebAssembly Concepts - WebAssembly
it is not primarily intended to be written by hand, rather it is designed to be an effective compilat
ion target for low-level source languages like c, c++, rust, etc.
... this has huge implicat
ions for the web platform — it provides a way to run code written in multiple languages on the web at near-native speed, with client apps running on the web that prev
iously couldn’t have done so.
...webassembly modules can be imported into a web (or node.js) app, exposing webassembly funct
ions for use via javascript.
...And 27 more matches
Content Scripts - Archive of obsolete content
there are five basic principles: the add-on's main code, including "main.js" and other modules in "lib", can use the sdk high-level and low-level apis, but can't access web content directly content scripts can't use the sdk's apis (no access to globals exports, require) but can access web content sdk apis that use content scripts, like page-mod and tabs, provide funct
ions that enable the add-on's main code to load content scripts into web pages content scripts can be loaded in as strings, but are more often stored as separate files under the add-on's "data" directory.
...the tab object includes an attach() funct
ion to attach a content script to the tab.
... addit
ionally, some sdk user interface components - panel, sidebar, frame - are specified using html, and use separate scripts to interact with this content.
...And 26 more matches
dev/panel - Archive of obsolete content
we're working on removing this restrict
ion.
...with the dev/panel module, you can create your own panels in the toolbox: the panel gets a tab in the toolbox toolbar which enables the user to open it: you specify the panel's content and behav
ior using html, css, and javascript.
... basic usage defining the panel constructor to add a new tool you first need to define a constructor that inherits from the panel class, and in that constructor you need to supply values for var
ious properties .
...And 26 more matches
test/assert - Archive of obsolete content
implements the assert interface defined in the commonjs unit testing specificat
ion vers
ion 1.1.
... usage to use the assert module, write a set of unit tests following the instruct
ions in the unit testing tutorial.
...you can use this object to make assert
ions about your program's state.
...And 26 more matches
Miscellaneous - Archive of obsolete content
system info operating system detect
ion // returns "winnt" on windows vista, xp, 2000, and nt systems; // "linux" on gnu/linux; and "darwin" on mac os x.
... var osstring = services.appinfo.os; detecting the host applicat
ion and vers
ion // get the name of the applicat
ion running us services.appinfo.name; // returns "firefox" for firefox services.appinfo.vers
ion; // returns "2.0.0.1" for firefox vers
ion 2.0.0.1 retrieving the vers
ion of an extens
ion as specified in the extens
ion's install.rdf components.utils.import("resource://gre/modules/addonmanager.jsm"); addonmanager.getaddonbyid("extens
ion-guid@example.org", funct
ion(addon) { // this is an asynchronous callback funct
ion that might not be called immediately alert("my extens
ion's vers
ion is " + addon.vers
ion); }); restarting firefox/thunderbird/seamonkey_2.0 for firefox 3 see onwizardfinish around here: http://mxr.mozilla.org/seamonkey/sou...pdates.js#1639 for firefox 2 see aro...
...und here: http://mxr.mozilla.org/mozilla1.8/so...pdates.js#1631 bug 338039 tracks improving this situat
ion by providing a simple method to restart the applicat
ion.
...And 26 more matches
Supporting private browsing mode - Archive of obsolete content
firefox 3.5 introduced private browsing mode, in which potentially private informat
ion is not recorded.
... this includes cookies, history informat
ion, download informat
ion, and so forth.
...extens
ions that may record potentially private informat
ion may wish to hook into the private browsing service so that they can avoid saving personal informat
ion when private browsing mode is enabled.
...And 26 more matches
Treehydra Manual - Archive of obsolete content
introduct
ion treehydra is meant to be used for analyses that need more detail than dehydra's flattened asts.
... instead of representing code in "easy" form like dehydra, treehydra relies on gimple, the gcc internals "middle-end" intermediate representat
ion.
...for now, the best way to learn gimple is to look at existing code as there is little newbie documentat
ion to be had.
...And 26 more matches
OpenClose - Archive of obsolete content
however, there may be situat
ions when you wish to open a menu manually.
... there are several situat
ions when opening a menu is not allowed.
... closing menus menus will close automatically once the user has made a select
ion from the menu.
...And 26 more matches
textbox (Toolkit autocomplete) - Archive of obsolete content
it is used to create a textbox with a popup containing a list of possible complet
ions for what the user has started to type.
... toolkit applicat
ions (such as firefox) use a different autocomplete mechanism than the mozilla suite.
... attributes accesskey, autocompletepopup, autocompletesearch, autocompletesearchparam, completedefaultindex, completeselectedindex,crop, disableautocomplete, disabled, disablekeynavigat
ion, enablehistory, focused, forcecomplete, highlightnonmatches, ignoreblurwhilesearching, inputtooltiptext, label, maxlength, maxrows, minresultsforpopup, nomatch, onchange, oninput, onsearchcomplete, ontextentered, ontextreverted, open, readonly,showcommentcolumn, showimagecolumn, size, tabindex, tabscrolling, timeout, type, value properties accessibletype, completedefaultindex, controller, crop, disableautocomplete, disablekeynavigat
ion, disabled, editable, focused, forcecomplete, highlightnonmatche...
...And 26 more matches
tabbrowser - Archive of obsolete content
note: starting in firefox 3 (xulrunner/gecko 1.9), this is only used in the main firefox window and cannot be used in other xul windows by third-party applicat
ions or extens
ions.
...enabled, autocompletepopup, autoscroll, contentcontextmenu, contenttooltip, handlectrlpageupdown, onbookmarkgroup, onnewtab, tabmodalpromptshowing properties browsers, cangoback, cangoforward, contentdocument, contenttitle, contentvieweredit, contentviewerfile, contentwindow, currenturi, docshell, documentcharsetinfo, homepage, markupdocumentviewer, securityui, selectedbrowser, selectedtab, sess
ionhistory, tabcontainer, tabs, visibletabs, webbrowserfind, webnavigat
ion, webprogress methods addprogresslistener, addtab, addtabsprogresslistener,appendgroup, getbrowseratindex, getbrowserindexfordocument, getbrowserfordocument, getbrowserfortab, geticon, getnotificat
ionbox, gettabforbrowser, gettabmodalpromptbox, goback, gobackgroup, goforward, goforwardgroup, gohome, gotoindex, loadgroup, loa...
... cangoback type: boolean this read-only property is true if there is a page to go back to in the sess
ion history and the back button should be enabled.
...And 26 more matches
textbox - Archive of obsolete content
more informat
ion is available in the xul tutorial.
...min, multiline, newlines, onblur, onchange, onfocus, oninput, placeholder, preference, readonly, rows, searchbutton, size, spellcheck, tabindex, timeout, type, value, wrap, wraparound properties accessibletype, clickselectsall, decimalplaces, decimalsymbol, defaultvalue, disabled, editor, emptytext, increment, inputfield, label, max, maxlength, min, placeholder, readonly, searchbutton, select
ionend, select
ionstart, size, spinbuttons, tabindex, textlength, timeout, type, value, valuenumber, wraparound methods decrease, increase, reset, select, setselect
ionrange style classes plain examples <vbox> <label control="your-name" value="enter your name:"/> <textbox id="your-name" value="john"/> </vbox> attributes cols type: integer for multiline textboxes, the numbe...
...if the element is disabled, it does not respond to user act
ions, it cannot be focused, and the command event will not fire.
...And 26 more matches
Call Tree - Firefox Developer Tools
the call tree tells you which javascript funct
ions the browser spent the most time in.
... by analyzing its results, you can find bottlenecks in your code - places where the browser is spending a disproport
ionately large amount of time.
... these bottlenecks are the places where any optimizat
ions you can make will have the biggest impact.
...And 24 more matches
Using Fetch - Web APIs
this kind of funct
ionality was prev
iously achieved using xmlhttprequest.
...fetch also provides a single logical place to define other http-related concepts such as cors and extens
ions to http.
... the fetch specificat
ion differs from jquery.ajax() in three main ways: the promise returned from fetch() won’t reject on http error status even if the response is an http 404 or 500.
...And 24 more matches
IDBIndex - Web APIs
properties idbindex.isautolocale read only returns a boolean indicating whether the index had a locale value of auto specified upon its creat
ion (see createindex()'s opt
ionalparameters.) idbindex.locale read only returns the locale of the index (for example en-us, or pl) if it had a locale value specified upon its creat
ion (see createindex()'s opt
ionalparameters.) idbindex.name the name of this index.
... example in the following example we open a transact
ion and an object store, then get the index lname from a simple contacts database.
...for a complete working example, see our idbindex-example demo repo (view the example live.) funct
ion displaydatabyindex() { tableentry.innerhtml = ''; var transact
ion = db.transact
ion(['contactslist'], 'readonly'); var objectstore = transact
ion.objectstore('contactslist'); var myindex = objectstore.index('lname'); myindex.opencursor().onsuccess = funct
ion(event) { var cursor = event.target.result; if(cursor) { var tablerow = document.createelement('tr'); tablerow.
...And 24 more matches
Using the Media Capabilities API - Web APIs
these parameters may include the codecs, resolut
ions, bit rates, frame rates, and other such details.
... more and more finely-detailed informat
ion about the display's properties, so that informed decis
ions can be made when choosing the best format to play on the user's device.
... support for getting real-time feedback about the playback of media, so your code can make informed decis
ions about adapting the stream's quality or other settings to manage the user's perceived media performance and quality.
...And 24 more matches
TextEncoder.prototype.encodeInto() - Web APIs
the textencoder.prototype.encodeinto() method takes a usvstring to encode and a destinat
ion uint8array to put resulting utf-8 encoded text into, and returns a dict
ionary object indicating the progress of the encoding.
... return value a textencoderencodeintoresult dict
ionary, which contains two members: read the number of utf-16 units of code from the source that has been converted over to utf-8.
... written the number of bytes modified in the destinat
ion uint8array.
...And 24 more matches
WebGL2RenderingContext - Web APIs
to get an object of this interface, call getcontext() on a <canvas> element, supplying "webgl2" as the argument: var canvas = document.getelementbyid('mycanvas'); var gl = canvas.getcontext('webgl2'); webgl 2 is an extens
ion to webgl 1.
...some methods of the webgl 1 context can accept addit
ional values when used in a webgl 2 context.
... the webgl tutorial has more informat
ion, examples, and resources on how to get started with webgl.
...And 24 more matches
@media - CSS: Cascading Style Sheets
syntax the @media at-rule may be placed at the top level of your code or nested inside any other condit
ional group at-rule.
... /* at the top level of your code */ @media screen and (min-width: 900px) { article { padding: 1rem 3rem; } } /* nested within another condit
ional at-rule */ @supports (display: flex) { @media screen and (min-width: 900px) { article { display: flex; } } } for a discuss
ion of media query syntax, please see using media queries.
... descript
ion media types media types describe the general category of a device.
...And 24 more matches
image() - CSS: Cascading Style Sheets
the image() css funct
ion defines an <image> in a similar fash
ion to the <url> funct
ion, but with added funct
ionality including specifying the image's direct
ionality, specifying fallback images for when the preferred image is not supported, displaying just a part of that image defined by a media fragment, and specifying a solid color as a fallback in case none of the specified images are able to be rendered.
... disambiguat
ion: image(), the htmlimageelement constructor.
...)where <alpha-value> = <number> | <percentage><hue> = <number> | <angle> where: image-tagsopt
ional the direct
ionality of the image, either ltr for left-to-right or rtl for right-to-left.
...And 24 more matches
shape-outside - CSS: Cascading Style Sheets
syntax /* keyword values */ shape-outside: none; shape-outside: margin-box; shape-outside: content-box; shape-outside: border-box; shape-outside: padding-box; /* funct
ion values */ shape-outside: circle(); shape-outside: ellipse(); shape-outside: inset(10px 10px 10px 10px); shape-outside: polygon(10px 10px, 20px 20px, 30px 30px); shape-outside: path('m0.5,1 c0.5,1,0,0.7,0,0.3 a0.25,0.25,1,1,1,0.5,0.3 a0.25,0.25,1,1,1,1,0.3 c1,0.7,0.5,1,0.5,1 z'); /* <url> value */ shape-outside: url(image.png); /* <gradient> value */ shape-outside: linear-gradient(45deg, rgba(2...
...the shape includes any curvature created by the border-radius property (behav
ior which is similar to background-clip).
...if the border-radius / margin rat
io is 1 or more, then the margin box corner radius is border-radius + margin.
...And 24 more matches
Getting Started - Developer guides
it can send and receive informat
ion in var
ious formats, including json, xml, html, and text files.
... 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 funct
ionality.
... httprequest = new xmlhttprequest(); } else if (window.activexobject) { // ie 6 and older httprequest = new activexobject("microsoft.xmlhttp"); } note: for illustrat
ion purposes, the above is a somewhat simplified vers
ion of the code to be used for creating an xmlhttp instance.
...And 24 more matches
User input and controls - Developer guides
this article provides recommendat
ions for managing user input and implementing controls in open web apps, along with faqs, real-world examples, and links to further informat
ion for anyone needing more detailed informat
ion on the underlying technologies.
... relevant apis and events include touch events, pointer lock api, screen orientat
ion api, fullscreen api, drag & drop and more.
... user input and controls workflow the following diagram illustrates the typical workflow for implementing user input mechanisms: first of all, you need to decide which input mechanisms you want to cover in your applicat
ion out of mouse, keyboard, finger touch and so on.
...And 24 more matches
The HTML autocomplete attribute - HTML: Hypertext Markup Language
autocomplete lets web developers specify what if any permiss
ion the user agent has to provide automated assistance in filling out form field values, as well as guidance to the browser as to the type of informat
ion expected in the field.
...perhaps the browser offers the ability to save encrypted credit card informat
ion, for autocomplet
ion following an authenticat
ion procedure.
... for more informat
ion, see the autocomplete attribute in <form>.
...And 24 more matches
Global attributes - HTML: Hypertext Markup Language
in addit
ion to the basic html global attributes, the following global attributes also exist: xml:lang and xml:base — these are inherited from the xhtml specificat
ions and deprecated, but kept for compatibility purposes.
... the event handler attributes: onabort, onautocomplete, onautocompleteerror, onblur, oncancel, oncanplay, oncanplaythrough, onchange, onclick, onclose, oncontextmenu, oncuechange, ondblclick, ondrag, ondragend, ondragenter, ondragexit, ondragleave, ondragover, ondragstart, ondrop, ondurat
ionchange, onemptied, onended, onerror, onfocus, oninput, oninvalid, onkeydown, onkeypress, onkeyup, onload, onloadeddata, onloadedmetadata, onloadstart, onmousedown, onmouseenter, onmouseleave, onmousemove, onmouseout, onmouseover, onmouseup, onmousewheel, onpause, onplay, onplaying, onprogress, onratechange, onreset, onresize, onscroll, onseeked, onseeking, onselect, onshow, onsort, onstalled, onsubmit, onsuspend, ontimeupdate, ontoggle, o...
...it can have the following values: off or none, no autocapitalizat
ion is applied (all letters default to lowercase) on or sentences, the first letter of each sentence defaults to a capital letter; all other letters default to lowercase words, the first letter of each word defaults to a capital letter; all other letters default to lowercase characters, all letters should default to uppercase class a space-separated list of the classes of the element.
...And 24 more matches
Configuring servers for Ogg media - HTTP
html <aud
io> and <video> elements allow media presentat
ion without the need for the user to install any plug-ins or other software to do so.
... this guide covers a few server configurat
ion changes that may be necessary for your web server to correctly serve ogg media files.
... this informat
ion may also be useful if you encounter other media types your server isn't already configured to recognize.
...And 24 more matches
Array.prototype.reduce() - JavaScript
the reduce() method executes a reducer funct
ion (that you provide) on each element of the array, resulting in single output value.
... the reducer funct
ion takes four arguments: accumulator (acc) current value (cur) current index (idx) source array (src) your reducer funct
ion's returned value is assigned to the accumulator, whose value is remembered across each iterat
ion throughout the array, and ultimately becomes the final, single resulting value.
... syntax arr.reduce(callback( accumulator, currentvalue, [, index[, array]] )[, initialvalue]) parameters callback a funct
ion to execute on each element in the array (except for the first, if no initialvalue is supplied).
...And 24 more matches
nss tech note1
quickder was written to be as compatible as possible with the classic decoder, in order to ease migrat
ion to it in areas of critical performance bottlenecks.
... for this reason, i will first describe all the common funct
ionality of the two decoders, before outlining their differences.
... the main non-streaming apis for these two decoders have an identical prototype : secstatus sec_asn1decodeitem(prarenapool *pool, void *dest, const sec_asn1template *t, secitem *item); secstatus sec_quickderdecodeitem(prarenapool* arena, void* dest, const sec_asn1template* templateentry, secitem* src); here is a descript
ion of the arguments : secitem* src† is a structure containing a pointer to the binary data to be decoded, as well as its size.
...And 20 more matches
nss tech note3
all about certificate extens
ions nss technical note: 3 09 may 2002 nelson b.
... bolyard this week at least 5 different people came to me with variants of the same quest
ion: what certificate extens
ions do i have to put into my cert for nss to allow it to be used for purpose <x>??
... this message attempts to answer that quest
ion, and to document nss's approach to validating certificates for certain purposes.
...And 20 more matches
NSS Tools
nss security tools newsgroup: mozilla.dev.tech.crypto overview the nss security tools allow developers to test, debug, and manage applicat
ions that use nss.
... the tools informat
ion table below describes both the tools that are currently working and those that are still under development.
... the links for each tool take you to the source code, documentat
ion, plans, and related links for each tool.
...And 20 more matches
JS_ConvertArguments
syntax bool js_convertarguments(jscontext *cx, const js::callargs &args, const char *format, ...); // added in spidermonkey 31 bool js_convertarguments(jscontext *cx, unsigned argc, jsval *argv, const char *format, ...); // obsolete since jsapi 30 name type descript
ion cx jscontext * the context in which to perform any necessary convers
ions.
... cx also affects the interpretat
ion of format, if js_addargumentformatter has been called.
...obsolete since jsapi 30 this must be an argv pointer created by the js engine and passed to a jsnative or jsfastnative callback, not an array created by applicat
ion code.
...And 20 more matches
Signing Mozilla apps for Mac OS X
mac os x's gatekeeper funct
ionality prevents users from launching applicat
ions that haven't been code-signed, in order to help keep their computers secure.
... signing mozilla apps without the signing server firefox and thunderbird are built using mozilla's release automat
ion infrastructure.
...for projects that don't use mozilla's release automat
ion and would like to be signed for secure launching on os 10.8 mountain l
ion and later, this guide should provide some insight into how to make sure applicat
ions are signed correctly using apple's codesign tool.
...And 20 more matches
Accessing the Windows Registry Using XPCOM
introduct
ion when implementing windows-specific funct
ionality, it is often useful to access the windows registry for informat
ion about the environment or other installed programs.
... support in firefox 1.5 or newer in firefox 1.5, a new api was added, nsiwindowsregkey, which provides extensive registry funct
ionality.
...if you are writing an extens
ion that only needs to support firefox 1.5 or newer, then you only need to read this sect
ion.
...And 20 more matches
XPCOM Stream Guide
in basic c++ programming for a console applicat
ion, we usually talk about streams to access files, or to interact with the user.
... primitive input streams type native class contract id interface how to bind to a data source generic nsstorageinputstream n/a nsiinputstream, nsiseekablestream storagestream.newinputstream(); string (8-bit characters) nsstringstream @mozilla.org/
io/string-input-stream;1 nsistringinputstream stream.setdata(data, length); file nsfileinputstream @mozilla.org/network/file-input-stream;1 nsifileinputstream stream.init(file,
ioflags, perm, behav
iorflags); zip nsjarinputstream n/a nsiinputstream zipreader.getinputstream(zipentry); similarly, each of these implements ns
ioutputstream.
... primitive output streams type native class contract id interface how to bind to a data target generic nsstoragestream @mozilla.org/storagestream;1 nsistoragestream stream.getoutputstream(); // returns ns
ioutputstream file nsfileoutputstream @mozilla.org/network/file-output-stream;1 nsifileoutputstream stream.init(file,
ioflags, perm, behav
iorflags); file nssafefileoutputstream @mozilla.org/network/safe-file-output-stream;1 nsisafefileoutputstream, nsifileoutputstream stream.init(file,
ioflags, perm, behav
iorflags); channels have streams too any implementat
ion of nsichannel will have an input stream as well, but unless you own the channel, you shouldn't try to read from the input s...
...And 20 more matches
Components.utils.Sandbox
creating a sandbox to create a new sandbox, call components.utils.sandbox: var sandbox = components.utils.sandbox(principal[, opt
ions]); using new components.utils.sandbox(...) to create a sandbox has the same effect as calling sandbox(...) without new.
... see security checks for more informat
ion on security principals.
...window objects and nsiprincipal carry addit
ional informat
ion such as origin attributes and same-origin privilege changes caused by setting document.domain.
...And 20 more matches
nsIAccessibleText
inherits from: nsisupports last changed in gecko 1.9.1 (firefox 3.5 / thunderbird 3.0 / seamonkey 2.0) method overview void addselect
ion(in long startoffset, in long endoffset); nsiaccessible getattributerange(in long offset, out long rangestartoffset, out long rangeendoffset); obsolete since gecko 1.9.1 wchar getcharacteratoffset(in long offset); void getcharacterextents(in long offset, out long x, out long y, out long width, out long height, in unsigned long coordtype); long getoffsetatpoint(in long x, in long y, in unsigned long coordtype); void getrangeextents(in long startoffset, in long endoffset, out long x, out long y, out long width, out long height, in unsigned long c...
...oordtype); void getselect
ionbounds(in long select
ionnum, out long startoffset, out long endoffset); astring gettext(in long startoffset, in long endoffset); astring gettextafteroffset(in long offset, in nsaccessibletextboundary boundarytype, out long startoffset, out long endoffset); astring gettextatoffset(in long offset, in nsaccessibletextboundary boundarytype, out long startoffset, out long endoffset); nsipersistentproperties gettextattributes(in boolean includedefattrs, in long offset, out long rangestartoffset, out long rangeendoffset); astring gettextbeforeoffset(in long offset, in nsaccessibletextboundary boundarytype, out long startoffset, out long endoffset); void removeselect
ion(in long select
ionnum); void scrollsubstringto(in long startindex, in long endindex, i...
...n unsigned long scrolltype); void scrollsubstringtopoint(in long startindex, in long endindex, in unsigned long coordinatetype, in long x, in long y); void setselect
ionbounds(in long select
ionnum, in long startoffset, in long endoffset); attributes attribute type descript
ion caretoffset long the current current caret offset.
...And 20 more matches
nsIMsgDBHdr
there are utility funct
ions that also return it though.
... headers are backed by the database: a call to these funct
ions directly modifies the state of the database, although it is not saved until the database is committed.
...it is also mandatory to set msghdr.folder.msgdatabase = null after performing this kind of operat
ions to prevent leaking.
...And 20 more matches
nsITimer
the nsitimer interface offers a funct
ionality to invoke a funct
ion after a specified delay.
... nsitimer instances must be initialized by calling one of the initializat
ion methods.
... you may also re-initialize (using one of the initializat
ion methods) an existing instance to avoid the overhead of destroying and creating a timer.
...And 20 more matches
nsIXULTemplateQueryProcessor
there is a one-to-one relat
ionship between a template builder and a query processor.
...there is a one-to-one relat
ionship between a template builder and a query processor.
...the query is expected to consist of either text or dom nodes that, when executed by a call to the generateresults() method, will allow the generat
ion of a list of results.
...And 20 more matches
XUL Overlays
overlays provide a general mechanism for: adding ui for addit
ional components, as described in the example above overriding small pieces of a xul file without having to resupply the whole ui reusing particular pieces of the ui xul files and overlays work together to describe a single master document.
... though there is no formal restrict
ion on what kind of xul content is located in "base" xul files and what kind should be put in overlays, xul overlays generally define items that are not present in the basic vers
ions of the ui, such as addit
ional components.
... when plug-ins, browser extens
ions, or other applicat
ions provide new ui elements to the browser, these elements should be defined in overlay files.
...And 20 more matches
Working with data
these are javascript constructors; as such, they're callable funct
ions that you can use to create new cdata objects of that type.
... note: if type.size is undefined, creating a new object this way will throw a typeerror except
ion.
... creating initialized cdata objects similarly, you can initialize cdata objects with specific values at the type of creat
ion by specifying them as a parameter when calling the ctype's constructor, like this: var mycdataobj = new type(value); var mycdataobj = type(value); if the size of the specified type isn't undefined, the specified value is converted to the given type.
...And 20 more matches
Streams - Plugins
« prev
iousnext » this chapter describes using plug-in api funct
ions to receive and send streams.
... the plug-in instance selects a transmiss
ion mode for streams produced by the browser.
...in general, this mode is more expensive, because the entire stream must be downloaded to a temporary file before use unless the stream comes from a local file or an http server that supports the byte-range extens
ion to http.
...And 20 more matches
NSS 3.15 release notes
introduct
ion the nss team has released network security services (nss) 3.15, which is a minor release.
... distribut
ion informat
ion the hg tag is nss_3_15_rtm.
...nss 3.15 source distribut
ions 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 funct
ionality support for ocsp stapling (rfc 6066, certificate status request) has been added for both client and server sockets.
...And 18 more matches
NSS Tools pk12util
synopsis pk12util -i p12file [-h tokenname] [-v] [common-opt
ions] or pk12util -o p12file -n certname [-c keycipher] [-c certcipher] [-m | --key_len keylen] [-n | --cert_key_len certkeylen] [common-opt
ions] or pk12util -l p12file [-h tokenname] [-r] [common-opt
ions] where [common-opt
ions] = [-d dir] [-p dbprefix] [-k slotpasswordfile | -k slotpassword] [-w p12filepasswordfile | -w p12filepassword] syntax to run the pkcs #12 tool, type ther command...
... pk12util opt
ion [arguments] where opt
ion and arguments are combinat
ions of the opt
ions and arguments listed in the following sect
ion.
... three of the opt
ions, -i, -o, and -l, should be considered commands of the pk12util invocat
ion.
...And 18 more matches
Creating JavaScript jstest reftests
this directory contains tests of spidermonkey conformance to ecmascript as well as spidermonkey non-standard extenst
ions to ecmascript.
... non262 tests the directory js/src/tests/non262/ should contain all tests of the following type: regress
ions of spidermonkey non-standard spidermonkey extens
ions to the javascript language test of "implementat
ion-defined" details of the ecmascript standard for example, the exact definit
ion of pi or some details of array sorting.
... performance tests or stress tests tests of spidermonkey's comformance to the ecmascript standard a brief history: in 2017, spidermonkey started comsuming test262, a comprehensive tests suite for ecmascript implementat
ions.
...And 18 more matches
JS_THREADSAFE
js_threadsafe was a compile-time opt
ion that enables support for running multiple threads of javascript code concurrently as long as no objects or strings are shared between them.
...each thread that uses the javascript engine must essentially operate in a totally separate reg
ion of memory.
... requests in a js_threadsafe build, the applicat
ion must separate code that uses the jsapi from code that performs blocking i/o or time-consuming calculat
ions.
...And 18 more matches
Setting up an update server
the goal of this document is to provide instruct
ions for installing a locally-served firefox update.
...be sure that you use the one that matches your machine's configurat
ion.
...beta builds are those with a b in the vers
ion string.
...And 18 more matches
XPCShell Reference
the command line the command-line syntax for xpcshell is: xpcshell [-s] [-w] [-w] [-v vers
ion] [-f scriptfile] [scriptfile] [scriptarg...] -c this opt
ion turns on the "compile-only" mode.
... (setting this opt
ion disables the "interactive" mode) -f this opt
ion specifies a script file to execute.
... xpcshell terminates upon script complet
ion.
...And 18 more matches
Language bindings
the following bridging layers are currently available: components objectthe components object is the object through which xpconnect funct
ionality is reflected into javascript.
...ually a native instance of the nsixpccomponents interface which is reflected into javascript as a top level object using xpconnect.components.classescomponents.classes is a read-only object whose properties are classes indexed by contractid.components.classesbyidcomponents.classesbyid is a read-only object whose properties are classes indexed by cid.components.constructorcreates a javascript funct
ion which can be used to create or construct new instances of xpcom components.components.except
ioncomponents.except
ion is a javascript constructor to create nsixpcexcept
ion objects.
... these except
ion objects may be thrown when implementing xpcom interfaces in javascript, and they can provide better diagnostics in the error console if not caught than simply throwing an nsresult's value will.components.idcomponents.id is a constructor that creates native objects that conform to the nsijsid interface.components.interfacescomponents.interfaces is a read-only object whose properties are interfaces indexed by their names.components.interfacesbyidcomponents.interfacesbyid is a read-only array of classes indexed by iid.components.issuccesscodedetermines whether a given xpcom return code (that is, an nsresult value) indicates the success or failure of an operat
ion, returning true or false respectively.components.lastresultcomponents.managercomponents.manager is a convenience refl...
...And 18 more matches
nsIAppShellService
screen); obsolete since gecko 1.8 void quit(in pruint32 aferocity); obsolete since gecko 1.8 void registertoplevelwindow(in nsixulwindow awindow); void run(); obsolete since gecko 1.8 void toplevelwindowismodal(in nsixulwindow awindow, in boolean amodal); obsolete since gecko 1.9.1 void unregistertoplevelwindow(in nsixulwindow awindow); note: pr
ior to gecko 8.0, all references to nsidomwindow used in this interface were nsidomwindowinternal.
... attributes attribute type descript
ion applicat
ionprovidedhiddenwindow boolean return true if the applicat
ion hidden window was provided by the applicat
ion.
... hiddendomwindow nsidomwindow return the (singleton) applicat
ion hidden window, automatically created and maintained by this appshellservice.
...And 18 more matches
nsIAuthPrompt2
1.0 66 introduced gecko 1.9 inherits from: nsisupports last changed in gecko 1.9 (firefox 3) this interface is usually acquired using getinterface on notificat
ion callbacks or similar.
... it can be used to prompt users for authenticat
ion informat
ion, either synchronously or asynchronously.
...to create an instance, use: var authprompt2 = components.classes["@mozilla.org/login-manager/prompter;1"] .createinstance(components.interfaces.nsiauthprompt2); method overview nsicancelable asyncpromptauth(in nsichannel achannel, in nsiauthpromptcallback acallback, in nsisupports acontext, in pruint32 level, in nsiauthinformat
ion authinfo); boolean promptauth(in nsichannel achannel, in pruint32 level, in nsiauthinformat
ion authinfo); constants constant value descript
ion level_none 0 the password will be sent unencrypted.
...And 18 more matches
nsIContentViewer
void loadcomplete(in unsigned long astatus); void loadstart(in nsisupports adoc); void move(in long ax, in long ay); void open(in nsisupports astate, in nsishentry ashentry); void pagehide(in boolean isunload); boolean permitunload([opt
ional] in boolean acallercloseswindow); boolean requestwindowclose(); void resetclosewindow(); void setbounds([const] in nsintrectref abounds); native code only!
... [noscript,notxpcom,nostdcall] void setnavigat
iontiming(in nsdomnavigat
iontimingptr atiming); void setpagemode(in boolean apagemode, in nsiprintsettings aprintsettings); void show(); void stop(); void unload(); obsolete since gecko 1.8 attributes attribute type descript
ion container nsisupports domdocument nsidomdocument enablerendering boolean obsolete since gecko 2.0 historyentry nsishentry get the history entry that this viewer will save itself into when destroyed.
... note: pr
ior to gecko 10.0 (firefox 10.0 / thunderbird 10.0 / seamonkey 2.7), this attribute was part of nsidocumentviewer.
...And 18 more matches
nsIEditor
66 introduced gecko 1.0 inherits from: nsisupports last changed in gecko 18.0 (firefox 18.0 / thunderbird 18.0 / seamonkey 2.15) method overview [noscript] void init(in nsidomdocument doc, in nsicontent aroot, in nsiselect
ioncontroller aselcon, in unsigned long aflags); void setattributeorequivalent(in nsidomelement element, in astring sourceattrname, in astring sourceattrvalue, in boolean asuppresstransact
ion); void removeattributeorequivalent(in nsidomelement element, in domstring sourceattrname, in boolean asuppresstransact
ion); void postcreate(); void predestroy(in boolean adestroyingframes...
...); selected content removal void deleteselect
ion(in short act
ion, in short stripwrappers); document info and file methods void resetmodificat
ioncount(); long getmodificat
ioncount(); void incrementmodificat
ioncount(in long amodcount); void incrementmodificat
ioncount(in long amodcount); transact
ion methods void dotransact
ion(in nsitransact
ion txn); void enableundo(in boolean enable); void undo(in unsigned long count); void canundo(out boolean isenabled, out boolean canundo); void redo(in unsigned long count); void canredo(out boolean isenabled, out boolean canredo); void begintransact
ion(); void endtransact
ion(); void beginplaceholdertransacti...
...on(in nsiatom name); void endplaceholdertransact
ion(); boolean shouldtxnsetselect
ion(); void setshouldtxnsetselect
ion(in boolean should); inline spellchecking methods nsiinlinespellchecker getinlinespellchecker(in boolean autocreate); void syncrealtimespell(); void setspellcheckuseroverride(in boolean enable); clipboard methods void cut(); boolean cancut(); void copy(); boolean cancopy(); void paste(in long aselect
iontype); boolean canpaste(in long aselect
iontype); select
ion methods void selectall(); void beginningofdocument(); void endofdocument(); drag/drop methods boolean candrag(in nsidomevent aevent); ...
...And 18 more matches
nsIEditorIMESupport
inherits from: nsisupports last changed in gecko 2.0 (firefox 4 / thunderbird 3.3 / seamonkey 2.1) method overview void begincomposit
ion(in nstexteventreplyptr areply); native code only!
... obsolete since gecko 2.0 void endcomposit
ion(); obsolete since gecko 2.0 void forcecomposit
ionend(); void getpreferredimestate(out unsigned long astate); native code only!
... obsolete since gecko 1.9.1 void getreconvers
ionstring(in nsreconvers
ioneventreplyptr areply); native code only!
...And 18 more matches
nsIMsgDBView
available in the mozilla codebase are types "quicksearch", "threadswithunread", "watchedthreadswithunread", "xfvf" (virtual folders), "search", "group", and "threaded" each with their own implementat
ion of nsimsgdbview that provides a different sorting/view of the data.
... sorttype, in nsmsgviewsortordervalue sortorder); void docommand(in nsmsgviewcommandtypevalue command); void docommandwithfolder(in nsmsgviewcommandtypevalue command, in nsimsgfolder destfolder); void getcommandstatus(in nsmsgviewcommandtypevalue command, out boolean selectable_p, out nsmsgviewcommandcheckstatevalue selected_p); void viewnavigate(in nsmsgnavigat
iontypevalue mot
ion, out nsmsgkey resultid, out nsmsgviewindex resultindex, out nsmsgviewindex threadindex, in boolean wrap); boolean navigatestatus(in nsmsgnavigat
iontypevalue mot
ion); nsmsgkey getkeyat(in nsmsgviewindex index); nsimsgdbhdr getmsghdrat(in nsmsgviewindex index); nsimsgfolder getfolderforviewindex(in nsmsgviewindex index); acstring geturif...
...orviewindex(in nsmsgviewindex index); nsimsgdbview clonedbview(in nsimessenger amessengerinstance, in nsimsgwindow amsgwindow, in nsimsgdbviewcommandupdater acommandupdater); void geturisforselect
ion([array, size_is(count)] out string uris, out unsigned long count); void getindicesforselect
ion([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...
...And 18 more matches
nsIWindowWatcher
it maintains a list of open top-level windows, and allows some operat
ions on them.
...clients may expect this property to be always current, so to properly integrate this component the applicat
ion will need to keep it current by setting the property as the active window changes.
... this component should not keep a (xpcom) reference to any windows; the implementat
ion will claim no ownership.
...And 18 more matches
Mail and RDF
eventually we'll probably hang mail filters, annotat
ions, etc, off of nodes in the graph.
... here is an example of how this might be set up: in this tree-style representat
ion of an rdf graph, i've made arcs italic and resources bold.
...it also answers queries about var
ious properties of folders such as the total number of messages, whether or not this folder is actually a root server, and so forth.
...And 18 more matches
CredentialsContainer.get() - Web APIs
this method first collects all credentials in the credentialscontainer that meet the necessary criteria (defined in the opt
ions argument).
...depending on the opt
ions, it may display a dialog to the user and ask the user to make the select
ion.
... this method collects credentials by calling the "collectfromcredentialstore" method for each credential type allowed by the opt
ions argument.
...And 16 more matches
HTMLCanvasElement.getContext() - Web APIs
possible values are: "2d", leading to the creat
ion of a canvasrenderingcontext2d object representing a two-dimens
ional rendering context.
... "webgl" (or "experimental-webgl") which will create a webglrenderingcontext object representing a three-dimens
ional rendering context.
... this context is only available on browsers that implement webgl vers
ion 1 (opengl es 2.0).
...And 16 more matches
HTMLImageElement - Web APIs
<div id="interfacediagram" style="display: inline-block; posit
ion: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; posit
ion: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectrat
io="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25...
...it accepts opt
ional width and height parameters.
...this may change as the image is adjusted due to changing condit
ions, as directed by any media queries which are in place.
...And 16 more matches
IDBIndexSync - Web APIs
important: the synchronous vers
ion of the indexeddb api was originally intended for use only with web workers, and was eventually removed from the spec because its need was quest
ionable.
... method overview any add (in any value, in opt
ional any key) raises (idbdatabaseexcept
ion); any get (in any key) raises (idbdatabaseexcept
ion); any getobject (in any key) raises (idbdatabaseexcept
ion); void opencursor (in opt
ional idbkeyrange range, in opt
ional unsigned short direct
ion) raises (idbdatabaseexcept
ion); void openobjectcursor (in opt
ional idbkeyrange range, in opt
ional unsigned short direct
ion) raises (idbdatabaseexcept
ion); any put (in any value, in opt
ional any key) raises (idbdatabaseexcept
ion); void remove (in any key...
...) raises (idbdatabaseexcept
ion); attributes attribute type descript
ion keypath readonly domstring the key path of this index.
...And 16 more matches
IDBKeyRange - Web APIs
idbkeyrange.upperbound(y, true) all keys ≥ x && ≤ y idbkeyrange.bound(x, y) all keys > x &&< y idbkeyrange.bound(x, y, true, true) all keys > x && ≤ y idbkeyrange.bound(x, y, true, false) all keys ≥ x &&< y idbkeyrange.bound(x, y, false, true) the key = z idbkeyrange.only(z) a key is in a key range if the following condit
ions are true: the lower value of the key range is one of the following: undefined less than key value equal to key value if loweropen is false.
...we open a transact
ion (using idbtransact
ion) and an object store, and open a cursor with idbobjectstore.opencursor, declaring keyrangevalue as its opt
ional key range value.
... note: for a more complete example allowing you to experiment with key range, have a look at our idbkeyrange-example repo (view the example live too.) funct
ion displaydata() { var keyrangevalue = idbkeyrange.bound("a", "f"); var transact
ion = db.transact
ion(['fthings'], 'readonly'); var objectstore = transact
ion.objectstore('fthings'); objectstore.opencursor(keyrangevalue).onsuccess = funct
ion(event) { var cursor = event.target.result; if(cursor) { var listitem = document.createelement('li'); listitem.innerhtml = '<strong>...
...And 16 more matches
MediaDevices.ondevicechange - Web APIs
the mediadevices.ondevicechange property is an eventhandler which specifies a funct
ion to be called when the devicechange event occurs on a mediadevices instance.
... this happens whenever the set of media devices available to the user agent and, by extens
ion, to the web site or app has changed.
... syntax mediadevices.ondevicechange = eventhandler; value a funct
ion you provide which accepts as input a event object describing the devicechange event that occurred.
...And 16 more matches
Media Capabilities API - Web APIs
the media capabilities api allows developers to determine decoding and encoding abilities of the device, exposing informat
ion such as whether media is supported and whether playback should be smooth and power efficient, with real time feedback about playback to better enable adaptive streaming, and access to display property informat
ion.
... examples detect aud
io file support and expected performance this example defines a aud
io configurat
ion then checks to see if the user agent supports decoding that media configurat
ion, and whether it will perform well in terms of smoothness and power efficiency.
... if ('mediacapabilities' in navigator) { const aud
iofileconfigurat
ion = { type : 'file', aud
io : { contenttype: "aud
io/mp3", channels: 2, bitrate: 132700, samplerate: 5200 } }; navigator.mediacapabilities.decodinginfo(aud
iofileconfigurat
ion).then(result => { console.log('this configurat
ion is ' + (result.supported ?
...And 16 more matches
Media Source API - Web APIs
the media source api, formally known as media source extens
ions (mse), provides funct
ionality enabling plugin-free web-based streaming media.
... using mse, media streams can be created via javascript, and played using <aud
io> and <video> elements.
... media source extens
ions concepts and usage playing video and aud
io has been available in web applicat
ions without plugins for a few years now, but the basic features offered have really only been useful for playing single whole tracks.
...And 16 more matches
Performance - Web APIs
the performance interface provides access to performance-related informat
ion for the current page.
... it's part of the high resolut
ion time api, but is enhanced by the performance timeline api, the navigat
ion timing api, the user timing api, and the resource timing api.
... performance.navigat
ion read only a legacy performancenavigat
ion object that provides useful context about the operat
ions included in the times listed in timing, including whether the page was a load or a refresh, how many redirect
ions occurred, and so forth.
...And 16 more matches
Reporting API - Web APIs
the reporting api provides a generic reporting mechanism for web applicat
ions to use to make reports available based on var
ious platform features (for example content security policy, feature-policy, or feature deprecat
ion reports) in a consistent manner.
... concepts and usage there are a number of different features and problems on the web platform that generate informat
ion useful to web developers when they are trying to fix bugs or improve their websites in other ways.
... such informat
ion can include: content security policy v
iolat
ions.
...And 16 more matches
SVGLengthList - Web APIs
an svglengthlist object can be designated as read only, which means that attempts to modify the object will result in an except
ion being thrown.
...nsertitembefore(in svglength newitem, in unsigned long index) svglength replaceitem(in svglength newitem, in unsigned long index) svglength removeitem(in unsigned long index) svglength appenditem(in svglength newitem) properties readonly unsigned long numberofitems readonly unsigned long length normative document svg 1.1 (2nd edit
ion) properties name type descript
ion numberofitems unsigned long the number of items in the list.
... methods name & arguments return descript
ion clear() void clears all existing current items from the list, with the result being an empty list.
...And 16 more matches
SVGNumberList - Web APIs
an svgnumberlist object can be designated as read only, which means that attempts to modify the object will result in an except
ion being thrown.
...mbefore(in svgnumber newitem, in unsigned long index) svgnumber replaceitem(in svgnumber newitem, in unsigned long index) svgnumber removeitem(in unsigned long index) svgnumber appenditem(in svgnumber newitem) properties readonly unsigned long numberofitems readonly unsigned long length normative document svg 1.1 (2nd edit
ion) properties name type descript
ion numberofitems unsigned long the number of items in the list.
... methods name & arguments return descript
ion clear() void clears all existing current items from the list, with the result being an empty list.
...And 16 more matches
SVGPointList - Web APIs
an svgpointlist object can be designated as read only, which means that attempts to modify the object will result in an except
ion being thrown.
...) svgpoint replaceitem(in svgpoint newitem, in unsigned long index) svgpoint removeitem(in unsigned long index) svgpoint appenditem(in svgpoint newitem) properties readonly unsigned long numberofitems normative document svg 1.1 (2nd edit
ion) properties name type descript
ion numberofitems unsigned long the number of items in the list.
... methods name & arguments return descript
ion clear() void clears all existing current items from the list, with the result being an empty list.
...And 16 more matches
SVGTransform - Web APIs
svg transform interface svgtransform is the interface for one of the component transformat
ions within an svgtransformlist; thus, an svgtransform object corresponds to a single component (e.g., scale(…) or matrix(…)) within a transform attribute.
... an svgtransform object can be designated as read only, which means that attempts to modify the object will result in an except
ion being thrown.
... readonly unsigned short type readonly float angle readonly svgmatrix matrix constants svg_transform_unknown = 0 svg_transform_matrix = 1 svg_transform_translate = 2 svg_transform_scale = 3 svg_transform_rotate = 4 svg_transform_skewx = 5 svg_transform_skewy = 6 normative document svg 1.1 (2nd edit
ion) constants name value descript
ion svg_transform_unknown 0 the unit type is not one of predefined unit types.
...And 16 more matches
WebGLRenderingContext.blendFunc() - Web APIs
the webglrenderingcontext.blendfunc() method of the webgl api defines which funct
ion is used for blending pixel arithmetic.
... dfactor a glenum specifying a multiplier for the destinat
ion blending factors.
... except
ions if sfactor or dfactor is not one of the listed possible values, a gl.invalid_enum error is thrown.
...And 16 more matches
@counter-style - CSS: Cascading Style Sheets
a @counter-style rule defines how to convert a counter value into a string representat
ion.
... @counter-style thumbs { system: cyclic; symbols: "\1f44d"; suffix: " "; } ul { list-style: thumbs; } the initial vers
ion of css defined a set of useful counter styles.
... system specifies the algorithm to be used for converting the integer value of a counter to a string representat
ion.
...And 14 more matches
size - CSS: Cascading Style Sheets
the size css at-rule descriptor, used with the @page at-rule, defines the size and orientat
ion of the box which is used to represent a page.
... size may either be defined with a "scalable" keyword (in this case the page will fill the available dimens
ions) or with absolute dimens
ions.
... syntax /* keyword values for scalable size */ size: auto; size: portrait; size: landscape; /* <length> values */ /* 1 value: height = width */ size: 6in; /* 2 values: width then height */ size: 4in 6in; /* keyword values for absolute size */ size: a4; size: b5; size: jis-b4; size: letter; /* mixing size and orientat
ion */ size: a4 portrait; values auto the user agent decides the size of the page.
...And 14 more matches
Ordering Flex Items - CSS: Cascading Style Sheets
we will also consider the implicat
ions of reordering items from an accessibility point of view.
... reverse the display of the items the flex-direct
ion property can take one of four values: row column row-reverse column-reverse the first two values keep the items in the same order that they appear in the document source order and display them sequentially from the start line.
...the specificat
ion says the following on this matter: “note: the reordering capabilities of flex layout intent
ionally affect only the visual rendering, leaving speech order and navigat
ion based on the source order.
...And 14 more matches
Browser compatibility and Scroll Snap - CSS: Cascading Style Sheets
firefox initially implemented an early vers
ion of the scroll snap specificat
ion, called scroll snap points.
... in firefox 68 the new vers
ion of the specificat
ion will be shipped and these old properties removed.
... in this article, we consider quest
ions that might arise related to compatibility across browsers and vers
ions of browsers when adding support for scroll-snap to your web site or app.
...And 14 more matches
bottom - CSS: Cascading Style Sheets
the bottom css property participates in setting the vertical posit
ion of a posit
ioned element.
... it has no effect on non-posit
ioned elements.
... the effect of bottom depends on how the element is posit
ioned (i.e., the value of the posit
ion property): when posit
ion is set to absolute or fixed, the bottom property specifies the distance between the element's bottom edge and the bottom edge of its containing block.
...And 14 more matches
cursor - CSS: Cascading Style Sheets
each <url> may be opt
ionally followed by a pair of space-separated numbers, which represent <x><y> coordinates.
... <x> <y> opt
ional x- and y-coordinates.
... keyword values move your mouse over values to see their live appearance in your browser: category css value example descript
ion general auto the ua will determine the cursor to display based on the current context.
...And 14 more matches
<custom-ident> - CSS: Cascading Style Sheets
it is case-sensitive, and certain values are forbidden in var
ious contexts to prevent ambiguity.
... to prevent ambiguity, each property that uses <custom-ident> forbids the use of specific values: animat
ion-name forbids the global css values (unset, initial, and inherit), as well as none.
...also, quite a few predefined values are implemented by the different browsers: disc, circle, square, decimal, cjk-decimal, decimal-leading-zero, lower-roman, upper-roman, lower-greek, lower-alpha, lower-latin, upper-alpha, upper-latin, arabic-indic, armenian, bengali, cambodian, cjk-earthly-branch, cjk-heavenly-stem, cjk-ideographic, devanagari, eth
iopic-numeric, georgian, gujarati, gurmukhi, hebrew, hiragana, hiragana-iroha, japanese-formal, japanese-informal, kannada, katakana, katakana-iroha, khmer, korean-hangul-formal, korean-hanja-formal, korean-hanja-informal, lao, lower-armenian, malayalam, mongolian, myanmar, oriya, persian, simp-chinese-formal, simp-chinese-informal, tamil, telugu, thai, tibetan, trad-chinese-formal, trad-chinese-inf...
...And 14 more matches
image-set() - CSS: Cascading Style Sheets
the image-set() css funct
ion notat
ion is a method of letting the browser pick the most appropriate css image from a given set, primarily for high pixel density screens.
... resolut
ion and bandwidth differ by device and network access.
... the image-set() funct
ion delivers the most appropriate image resolut
ion for a user’s device, providing a set of image opt
ions — each with an associated resolut
ion declarat
ion — from which the browser picks the most appropriate for the device and settings.
...And 14 more matches
justify-self - CSS: Cascading Style Sheets
for absolutely-posit
ioned elements, it aligns an item inside its containing block on the inline axis, accounting for the offset values of top, left, bottom, and right.
... in table cell layouts, this property is ignored (more about alignment in block, absolute posit
ioned and table layout) in flexbox layouts, this property is ignored (more about alignment in flexbox) in grid layouts, it aligns an item inside its grid area on the inline axis (more about alignment in grid layouts) syntax /* basic keywords */ justify-self: auto; justify-self: normal; justify-self: stretch; /* posit
ional alignment */ justify-self: center; /* pack item around the center */ justify-self: start; /* pack item from the start */ justify-self: end; /* pack item from the end */ justify-self: flex-start; /* equivalent to 'start'.
...*/ justify-self: self-start; justify-self: self-end; justify-self: left; /* pack item from the left */ justify-self: right; /* pack item from the right */ /* baseline alignment */ justify-self: baseline; justify-self: first baseline; justify-self: last baseline; /* overflow alignment (for posit
ional alignment only) */ justify-self: safe center; justify-self: unsafe center; /* global values */ justify-self: inherit; justify-self: initial; justify-self: unset; this property can take one of three different forms: basic keywords: one of the keyword values normal, auto, or stretch.
...And 14 more matches
list-style-type - CSS: Cascading Style Sheets
a, b, c, … z lower-latin is unsupported in ie7 and earlier see browser compatibility sect
ion.
...a, b, c, … z upper-latin is unsupported in ie7 and earlier arabic-indic -moz-arabic-indic example armenian tradit
ional armenian numbering (ayb/ayp, ben/pen, gim/keem… bengali -moz-bengali example cambodian * example is a synonym for khmer cjk-earthly-branch -moz-cjk-earthly-branch example cjk-heavenly-stem -moz-cjk-heavenly-stem example cjk-ideographic identical to trad-chinese-informal e.g.
... 一萬一千一百一十一 devanagari -moz-devanagari example eth
iopic-numeric example georgian tradit
ional georgian numbering e.g.
...And 14 more matches
max-height - CSS: Cascading Style Sheets
mdn understanding wcag, guideline 1.4 explanat
ions understanding success criter
ion 1.4.4 | w3c understanding wcag 2.0 formal definit
ion initial valuenoneapplies toall elements but non-replaced inline elements, table columns, and column groupsinheritednopercentagesthe percentage is calculated with respect to the height of the generated box's containing block.
... if the height of the containing block is not specified explicitly (i.e., it depends on content height), and this element is not absolutely posit
ioned, the percentage value is treated as none.computed valuethe percentage as specified or the absolute length or noneanimat
ion 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 max-height using percentage and keyword values table { max-height: 75%; } form { max-height: none; } specificat
ions specificat
ion status comment css box sizing module level 4the definit
ion of 'max-height' in that specificat
ion.
... editor's draft css box sizing module level 3the definit
ion of 'max-height' in that specificat
ion.
...And 14 more matches
max() - CSS: Cascading Style Sheets
the max() css funct
ion lets you set the largest (most positive) value from a list of comma-separated express
ions as the value of a css property value.
... the max() funct
ion can be used anywhere a <length>, <frequency>, <angle>, <time>, <percentage>, <number>, or <integer> is allowed.
... syntax the max() funct
ion takes one or more comma-separated express
ions as its parameter, with the largest (most positive) express
ion value used as the value of the property to which it is assigned.
...And 14 more matches
offset-path - CSS: Cascading Style Sheets
the offset-path css property specifies a mot
ion path for an element to follow and defines the element's posit
ioning within the parent container or svg coordinate system.
... syntax /* default */ offset-path: none; /* funct
ion values */ offset-path: ray(45deg closest-side contain); /* url */ offset-path: url(#path); /* shapes */ offset-path: circle(50% at 25% 25%); offset-path: inset(50% 50% 50% 50%); offset-path: polygon(30% 0%, 70% 0%, 100% 50%, 30% 100%, 0% 70%, 0% 30%); offset-path: path('m 0,200 q 200,200 260,80 q 290,20 400,0 q 300,100 400,200'); /* geometry boxes */ offset-path: margin-box; offset-path: stroke-box; /* global values */ offset-path: inherit; offset-path: initial; offset-path: unset; values ray() taking up to three values, defines a path that is a line segment starting from the posit
ion of the box and proceeds in the direct
ion defined by the specified angle similar to the css gradient angle where 0deg is up, with positive angl...
...es increasing in the clockwise direct
ion, with the size value being similar to the css radial gradient size values from closest-side to farthest-corner, and the keyterm contain.
...And 14 more matches
perspective-origin - CSS: Cascading Style Sheets
the perspective-origin css property determines the posit
ion at which the viewer is looking.
... the perspective-origin and perspective properties are attached to the parent of a child transformed in 3-dimens
ional space, unlike the perspective() transform funct
ion which is placed on the element being transformed.
... syntax /* one-value syntax */ perspective-origin: x-posit
ion; /* two-value syntax */ perspective-origin: x-posit
ion y-posit
ion; /* when both x-posit
ion and y-posit
ion are keywords, the following is also valid */ perspective-origin: y-posit
ion x-posit
ion; /* global values */ perspective-origin: inherit; perspective-origin: initial; perspective-origin: unset; values x-posit
ion indicates the posit
ion of the abscissa of the vanishing point.
...And 14 more matches
top - CSS: Cascading Style Sheets
the top css property participates in specifying the vertical posit
ion of a posit
ioned element.
... it has no effect on non-posit
ioned elements.
... the effect of top depends on how the element is posit
ioned (i.e., the value of the posit
ion property): when posit
ion is set to absolute or fixed, the top property specifies the distance between the element's top edge and the top edge of its containing block.
...And 14 more matches
nsIBidiKeyboard
widget/public/nsibidikeyboard.idlscriptable this interface lets the applicat
ion detect bidirect
ional writer users, and do some magic for them.
... a user is a bidirect
ional writer if they have keyboard layouts in both left-to-right and right-to-left direct
ions (that is users who use arabic, iranian (persian), or israel (hebrew) keyboard layout, beside an us (english) layout.) inherits from: nsisupports last changed in gecko 9.0 (firefox 9.0 / thunderbird 9.0 / seamonkey 2.6) method overview boolean islangrtl(); void setlangfrombidilevel(in pruint8 alevel); attributes attribute type descript
ion havebidikeyboards boolean indicates whether or not the system has at least one keyboard for each direct
ion (left-to-right and right-to-left) installed.
... note: this throws ns_error_not_implemented if the widget layer doesn't provide this informat
ion.
...And 12 more matches
nsIComponentManager
66 introduced gecko 0.7 inherits from: nsisupports last changed in gecko 8.0 (firefox 8.0 / thunderbird 8.0 / seamonkey 2.5) method overview void addbootstrappedmanifestlocat
ion(in nsilocalfile alocat
ion); void createinstance(in nscidref aclass, in nsisupports adelegate, in nsiidref aiid, [iid_is(aiid),retval] out nsqiresult result); void createinstancebycontractid(in string acontractid, in nsisupports adelegate, in nsiidref aiid, [iid_is(aiid),retval] out nsqiresult result); void getclassobject(in nscidref aclass, in nsiidref aiid, [iid_is(aiid),retval] out nsqiresult result)...
...; void getclassobjectbycontractid(in string acontractid, in nsiidref aiid, [iid_is(aiid),retval] out nsqiresult result); void removebootstrappedmanifestlocat
ion(in nsilocalfile alocat
ion); methods addbootstrappedmanifestlocat
ion() loads a "bootstrapped" chrome.manifest file from the specified directory or xpi file.
... a "bootstrapped" chrome manifest supports some of the instruct
ions allowed in a regular chrome manifest, see the chrome registrat
ion documentat
ion for details.
...And 12 more matches
nsICryptoHash
netwerk/base/public/nsicryptohash.idlscriptable this interface can be used to compute a cryptographic hash funct
ion of some data.
...ol aascii); void init(in unsigned long aalgorithm); void initwithstring(in acstring aalgorithm); void update([const, array, size_is(alen)] in octet adata, in unsigned long alen); void updatefromstream(in nsiinputstream astream, in unsigned long alen); constants hash algorithms these constants are used by the init() method to indicate which hashing funct
ion to use.
... constant value descript
ion md2 1 message digest algorithm 2 md5 2 message-digest algorithm 5 sha1 3 secure hash algorithm 1 sha256 4 secure hash algorithm 256 sha384 5 secure hash algorithm 384 sha512 6 secure hash algorithm 512 methods finish() completes the hash object and produces the actual hash data.
...And 12 more matches
nsIDNSService
netwerk/dns/nsidnsservice.idlscriptable provides domain name resolut
ion service.
...to access the service, use: var dnsservice = components.classes["@mozilla.org/network/dns-service;1"] .createinstance(components.interfaces.nsidnsservice); note: starting in gecko 7.0, the "happy eyeballs" strategy is used to reduce lengthy timeouts when attempting backup connect
ions during attempts to connect from clients that have broken ipv6 connectivity.
... this is done by disabling ipv6 on backup connect
ions.
...And 12 more matches
nsIDOMNSHTMLDocument
nherits from: nsisupports last changed in gecko 6.0 (firefox 6.0 / thunderbird 6.0 / seamonkey 2.3) method overview void captureevents(in long eventflags); void clear(); boolean execcommand(in domstring commandid, in boolean doshowui, in domstring value); boolean execcommandshowhelp(in domstring commandid); obsolete since gecko 14.0 domstring getselect
ion(); nsidomdocument open(in acstring acontenttype, in boolean areplace); boolean 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 descript
ion alinkcolor domstring same as body.alink bgcolor domstring same as body.bgcolor compatmode domstring returns "backcompat" if the document is in quirks mode or "css1compat" if the document is in full standards or almost standards mode.
... embeds nsidomhtmlcollect
ion equivalent to getelementsbytagname("embed") read only.
...And 12 more matches
nsIDownloadProgressListener
/toolkit/components/downloads/nsidownloadprogresslistener.idlscriptable this interface gives applicat
ions and extens
ions a way to monitor the status of downloads being processed by the download manager.
... method overview void ondownloadstatechange(in short astate, in nsidownload adownload); void onlocat
ionchange(in nsiwebprogress awebprogress, in nsirequest arequest, in nsiuri alocat
ion, in nsidownload adownload); obsolete since gecko 1.9.1 void onprogresschange(in nsiwebprogress awebprogress, in nsirequest arequest, in long long acurselfprogress, in long long amaxselfprogress, in long long acurtotalprogress, in long long amaxtotalprogress, in nsidownload adownload); void onsecur...
... void onstatechange(in nsiwebprogress awebprogress, in nsirequest arequest, in unsigned long astateflags, in nsresult astatus, in nsidownload adownload); void onstatuschange(in nsiwebprogress awebprogress, in nsirequest arequest, in nsresult astatus, in wstring amessage, in nsidownload adownload); obsolete since gecko 1.9.1 attributes attribute type descript
ion document nsidomdocument document the document of the download manager frontend.
...And 12 more matches
nsIHttpChannelInternal
66 introduced gecko 1.0 inherits from: nsisupports last changed in gecko 6.0 (firefox 6.0 / thunderbird 6.0 / seamonkey 2.3) method overview void getrequestvers
ion(out unsigned long major, out unsigned long minor); void getresponsevers
ion(out unsigned long major, out unsigned long minor); void httpupgrade(in acstring aprotocolname, in nsihttpupgradelistener alistener); void setcookie(in string acookieheader); void setupfallbackchannel(in string afallbackkey); attributes attribute type descript
ion canceled boolean returns true if and only if...
...note: if network address translat
ion (nat) is in effect, this may not be the same address the remote host thinks it is talking to.
... this may throw an ns_error_not_available except
ion if accessed when the channel's endpoints haven't been determined yet, or any time the nsihttpactivityobserver.isactive attribute is false.
...And 12 more matches
nsIInputStream
xpcom/
io/nsiinputstream.idlscriptable this interface represents a readable stream of data.
...a non-blocking input stream, on the other hand, must not block the calling thread of execut
ion.
... note: blocking input streams are often read on a background thread to avoid locking up the main applicat
ion thread.
...And 12 more matches
nsILoginManager
toolkit/components/passwordmgr/public/nsiloginmanager.idlscriptable used to interface with the built-in password manager 1.0 66 introduced gecko 1.9 inherits from: nsisupports last changed in gecko 1.9.2 (firefox 3.6 / thunderbird 3.1 / fennec 1.0) replaces nsipasswordmanager which was used in older vers
ions of gecko.
...to create an instance, use: var loginmanager = components.classes["@mozilla.org/login-manager;1"] .getservice(components.interfaces.nsiloginmanager); method overview void addlogin(in nsilogininfo alogin); nsiautocompleteresult autocompletesearch(in astring asearchstring, in nsiautocompleteresult aprev
iousresult, in nsidomhtmlinputelement aelement); unsigned long countlogins(in astring ahostname, in astring aact
ionurl, in astring ahttprealm); boolean fillform(in nsidomhtmlformelement aform); void findlogins(out unsigned long count, in astring ahostname, in astring aact
ionurl, in astring ahttprealm, [retval, array, size_is(count)] out nsilogininfo logins); void getalldi...
...sabledhosts([opt
ional] out unsigned long count, [retval, array, size_is(count)] out wstring hostnames); void getalllogins([opt
ional] out unsigned long count, [retval, array, size_is(count)] out nsilogininfo logins); boolean getloginsavingenabled(in astring ahost); void modifylogin(in nsilogininfo oldlogin, in nsisupports newlogindata); void removealllogins(); void removelogin(in nsilogininfo alogin); void searchlogins(out unsigned long count, in nsipropertybag matchdata, [retval, array, size_is(count)] out nsilogininfo logins); void setloginsavingenabled(in astring ahost, in boolean isenabled); methods addlogin() stores a new login in the login manager.
...And 12 more matches
nsIMsgMessageService
objects that implements nsimsgmessageservice give the user top level routines related to messages like copying, displaying, attachment's manipulat
ion, printing, streaming the message content to eml format string, etc.
...rllistener, out nsiuri aurl, in boolean canonicallineending, in nsimsgwindow amsgwindow); void geturlforuri(in string amessageuri, out nsiuri aurl, in nsimsgwindow amsgwindow); void displaymessageforprinting(in string amessageuri, in nsisupports adisplayconsumer, in nsimsgwindow amsgwindow, in nsiurllistener aurllistener, out nsiuri aurl); void search(in nsimsgsearchsess
ion asearchsess
ion, in nsimsgwindow amsgwindow, in nsimsgfolder amsgfolder, in string asearchuri); nsiuri streammessage(in string amessageuri, in nsisupports aconsumer, in nsimsgwindow amsgwindow, in nsiurllistener aurllistener, in boolean aconvertdata, in string aaddit
ionalheader); nsiuri streamheaders(in string amessageuri, in nsistreamlistener aconsumer, in nsiurllistener aurlli...
...stener [opt
ional] in boolean alocalonly); boolean ismsginmemcache(in nsiuri aurl, in nsimsgfolder afolder, out nsicacheentrydescriptor acacheentry); nsimsgdbhdr messageuritomsghdr(in string uri); methods copymessage() pass in the uri for the message you want to have copied.
...And 12 more matches
nsISocketProvider
constants constant value descript
ion proxy_resolves_host 1 << 0 this flag is set if the proxy is to perform hostname resolut
ion instead of the client.
... anonymous_connect 1 << 1 when setting this flag, the socket will not apply any credentials when establishing a connect
ion.
... for example, an ssl connect
ion would not send any client-certificates if this flag is set.
...And 12 more matches
nsISupports proxies
this technology has been removed in firefox 12 because it was very complex and often lead to strange deadlock condit
ions.
...for more informat
ion about alternatives, see making cross-thread calls using runnables.
...a good example of this is the old install.js scripts that were used in xpinstall in older mozilla vers
ions.
...And 12 more matches
nsIWebProgress
nsiwebprogress instances may be arranged in a parent-child configurat
ion, corresponding to the parent-child configurat
ion of their respective dom windows.
...the parent-child relat
ionship of nsiwebprogress instances is not made explicit by this interface, but the relat
ionship may exist in some implementat
ions.
... a nsiwebprogresslistener instance receives notificat
ions for the nsiwebprogress instance to which it added itself, and it may also receive notificat
ions from any nsiwebprogress instances that are children of that nsiwebprogress instance.
...And 12 more matches
nsIAbCard/Thunderbird3
documentat
ion for the old nsiabcard interface is currently at nsiabcard.
... value); [noscript] void setpropertyasbool(in string name, in boolean value); void deleteproperty(in autf8string name); autf8string translateto(in autf8string atype); void copy(in nsiabcard srccard) boolean equals(in nsiabcard card) astring generatephoneticname(in boolean alastnamefirst) attributes attribute type descript
ion properties nsisimpleenumerator readonly: a list of all the properties that this card has as an enumerator, whose members are all nsiproperty objects.
... except
ions thrown ns_error_not_available<tt> if the named property does not exist.
...And 12 more matches
XPCOM tasks
p3 i/o funct
ionality (except for the filespec facility) probably doesn't belong in xpcom; perhaps it should be moved to netwerk p3 the `twips' units routines (or perhaps all routines) in "nsunitconvers
ion.h" probably belong in layout.
... 5.1 3rd party code that doesn't use any services from our tree should be below xpcom; particularly, code xpcom could exploit, e.g., expat berkeley db changes to apis, funct
ionality, and implementat
ions the following items are listed (very) roughly in their order of importance, i.e., fixing observers is the first thing i want to do.
... p1 var
ious threading issues, e.g., too many locks.
...And 12 more matches
grid-template-rows - CSS: Cascading Style Sheets
the grid-template-rows css property defines the line names and track sizing funct
ions of the grid rows.
... the intrinsic size contribut
ions of the track may be adjusted to the size of the grid container, and increase the final size of the track by the minimum amount that would result in honoring the percentage.
... <flex> is a non-negative dimens
ion with the unit fr specifying the track’s flex factor.
...And 12 more matches
<integer> - CSS: Cascading Style Sheets
syntax the <integer> data type consists of one or several decimal digits, 0 through 9 inclusive, opt
ionally preceded by a single + or - sign.
...during the css3 values cycle there was a lot of discuss
ion about setting a minimum range to support: the latest decis
ion, in april 2012 during the lc phase, was [-227-1; 227-1], but other values like 224-1 and 230-1 were also proposed.
... interpolat
ion when animated, values of the <integer> data type are interpolated using discrete, whole steps.
...And 12 more matches
mix-blend-mode - CSS: Cascading Style Sheets
syntax /* keyword values */ mix-blend-mode: normal; mix-blend-mode: multiply; mix-blend-mode: screen; mix-blend-mode: overlay; mix-blend-mode: darken; mix-blend-mode: lighten; mix-blend-mode: color-dodge; mix-blend-mode: color-burn; mix-blend-mode: hard-light; mix-blend-mode: soft-light; mix-blend-mode: difference; mix-blend-mode: exclus
ion; mix-blend-mode: hue; mix-blend-mode: saturat
ion; mix-blend-mode: color; mix-blend-mode: luminosity; /* global values */ mix-blend-mode: initial; mix-blend-mode: inherit; mix-blend-mode: unset; values <blend-mode> the blending mode that should be applied.
... formal definit
ion initial valuenormalapplies toall elementsinheritednocomputed valueas specifiedanimat
ion typediscretecreates stacking contextyes formal syntax <blend-mode>where <blend-mode> = normal | multiply | screen | overlay | darken | lighten | color-dodge | color-burn | hard-light | soft-light | difference | exclus
ion | hue | saturat
ion | color | luminosity examples effect of different mix-blend-mode values <div class="grid"> <div class="col"> <div class="note">blending in isolat
ion (no blending with the background)</div> <div class="row isolate"> <div class="cell"> normal <div class="container normal"> <div class="group"> <div class="item firefox"></div> <svg viewbox="0 0 150 150"> <defs> ...
..."item firefox"></div> <svg viewbox="0 0 150 150"> <ellipse class="item r" cx="75" cy="75" rx="25" ry="70"></ellipse> <ellipse class="item g" cx="75" cy="75" rx="25" ry="70"></ellipse> <ellipse class="item b" cx="75" cy="75" rx="25" ry="70"></ellipse> </svg> </div> </div> </div> <div class="cell"> exclus
ion <div class="container exclus
ion"> <div class="group"> <div class="item firefox"></div> <svg viewbox="0 0 150 150"> <ellipse class="item r" cx="75" cy="75" rx="25" ry="70"></ellipse> <ellipse class="item g" cx="75" cy="75" rx="25" ry="70"></ellipse> <ellipse class="item b" cx="75" cy="75" rx="25" ry="70"></ellipse...
...And 12 more matches
place-self - CSS: Cascading Style Sheets
the place-self css shorthand property allows you to align an individual item in both the block and inline direct
ions at once (i.e.
... constituent properties this property is a shorthand for the following css properties: align-self justify-self syntax /* keyword values */ place-self: auto center; place-self: normal start; /* posit
ional alignment */ place-self: center normal; place-self: start auto; place-self: end normal; place-self: self-start auto; place-self: self-end normal; place-self: flex-start auto; place-self: flex-end normal; place-self: left auto; place-self: right normal; /* baseline alignment */ place-self: baseline normal; place-self: first baseline auto; place-self: last baseline normal; place-self: stretch a...
... normal the effect of this keyword is dependent of the layout mode we are in: in absolutely-posit
ioned layouts, the keyword behaves like start on replaced absolutely-posit
ioned boxes, and as stretch on all other absolutely-posit
ioned boxes.
...And 12 more matches
repeating-linear-gradient() - CSS: Cascading Style Sheets
the repeating-linear-gradient() css funct
ion creates an image consisting of repeating linear gradients.
... it is similar to linear-gradient() and takes the same arguments, but it repeats the color stops infinitely in all direct
ions so as to cover its entire container.
... the funct
ion's result is an object of the <gradient> data type, which is a special kind of <image>.
...And 12 more matches
transform - CSS: Cascading Style Sheets
in that case, the element will act as a containing block for any posit
ion: fixed; or posit
ion: absolute; elements that it contains.
... syntax /* keyword values */ transform: none; /* funct
ion values */ transform: matrix(1.0, 2.0, 3.0, 4.0, 5.0, 6.0); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: perspective(17px); transform: rotate(0.5turn); transform: rotate3d(1, 2.0, 3.0, 10deg); transform: rotatex(10deg); transform: rotatey(10deg); transform: rotatez(10deg); transform: translate(12px, 50%); transform: translate3d(12px, 50%, 3em); transform: translatex(2em); transform: translatey(3in); transform: translatez(2px); transform: scale(2, 0.5); transform: scale3d(2.5, 1.2, 0.3); transfo...
...rm: scalex(2); transform: scaley(0.5); transform: scalez(0.3); transform: skew(30deg, 20deg); transform: skewx(30deg); transform: skewy(1.07rad); /* multiple funct
ion values */ transform: translatex(10px) rotate(10deg) translatey(5px); transform: perspective(500px) translate(10px, 0, 20px) rotatey(3deg); /* global values */ transform: inherit; transform: initial; transform: unset; the transform property may be specified as either the keyword value none or as one or more <transform-funct
ion> values.
...And 12 more matches
Separate sites for mobile and desktop - Developer guides
the good the first opt
ion is the most popular by far: use user-agent detect
ion to route users on phones to a separate mobile site, typically at m.example.com.
...conceptually simple, this is the easiest opt
ion to add to an existing site, especially if you are using a cms or web applicat
ion that supports templates.
... since only the mobile-specific content, styles, and scripts are sent to mobile users, this method also provides for the best performance out of any of the other opt
ions presented here.
...And 12 more matches
HTML attribute: required - HTML: Hypertext Markup Language
the required attribute is supported by text, search, url, tel, email, password, date, month, week, time, datetime-local, number, checkbox, rad
io, file, <input> types along with the <select> and <textarea> form control elements.
...if the attribute is not included, the :opt
ional pseudo class will match.
...conversely, inputs that support the required attribute but don't have the attribute set match the :opt
ional pseudo-class.
...And 12 more matches
<applet>: The Embed Java Applet element - HTML: Hypertext Markup Language
tag omiss
ion none, both the starting and ending tag are mandatory.
... dom interface htmlappletelement attributes align this attribute is used to posit
ion the applet on the page relative to content that might flow around it.
... the html 4.01 specificat
ion defines values of bottom, left, middle, right, and top, whereas microsoft and netscape also might support absbottom, absmiddle, baseline, center, and texttop.
...And 12 more matches
<kbd>: The Keyboard Input element - HTML: Hypertext Markup Language
by convent
ion, the user agent defaults to rendering the contents of a <kbd> element using its default monospace font, although this is not mandated by the html standard.
... <kbd> may be nested in var
ious combinat
ions with the <samp> (sample output) element to represent var
ious forms of input or output based on visual cues.
... tag omiss
ion none, both the starting and ending tag are mandatory.
...And 12 more matches
accesskey - HTML: Hypertext Markup Language
the way to activate the accesskey depends on the browser and its platform: windows linux mac firefox alt + shift + key on firefox 57 or newer: control + opt
ion + key or control + alt + key on firefox 14 or newer: control + alt + key on firefox 13 or older: control + key internet explorer alt + key alt + shift + key n/a edge n/a control + opt
ion + key control + opt
ion + shift + key google chrome alt + shift + key safari n/a opera 15+ alt + key control + alt + k...
...ey opera 12 shift + esc opens a contents list which are accessible by accesskey, then, can choose an item by pressing key accessibility concerns in addit
ion to poor browser support, there are numerous concerns with the accesskey attribute: an accesskey value can conflict with a system or browser keyboard shortcut, or assistive technology funct
ionality.
... what may work for one combinat
ion of operating system, assistive technology, and browser may not work with other combinat
ions.
...And 12 more matches
CSP: navigate-to - HTTP
the http content-security-policy (csp) navigate-to directive restricts the urls to which a document can initiate navigat
ions by any means including <form> (if form-act
ion is not specified), <a>, window.locat
ion, window.open, etc.
... this is an enforcement on what navigat
ions this document initiates not on what this document is allowed to navigate to.
... note: if the form-act
ion directive is present, the navigate-to directive will not act on navigat
ions that are form submiss
ions.
...And 12 more matches
CSS Houdini
in addit
ion, layout, paint, and composite processes are repeated for javascript style updates.
... houdini's css typed om is a css object model with types and methods, exposing values as javascript objects making for more intuitive css manipulat
ion than prev
ious string based htmlelement.style manipulat
ions.
... <script> css.paintworklet.addmodule('csscomponent.js'); </script> this added module contains registerpaint() funct
ions, which register completely configurable worklets.
...And 12 more matches
BigInt - JavaScript
descript
ion a bigint is created by appending n to the end of an integer literal — 10n — or by calling the funct
ion bigint().
.../ ↪ 9007199254740991n const hugehex = bigint("0x1fffffffffffff") // ↪ 9007199254740991n const hugebin = bigint("0b11111111111111111111111111111111111111111111111111111") // ↪ 9007199254740991n bigint is similar to number in some ways, but also differs in a few key matters — it cannot be used with methods in the built-in math object and cannot be mixed with instances of number in operat
ions; they must be coerced to the same type.
... be careful coercing values back and forth, however, as the precis
ion of a bigint may be lost when it is coerced to a number.
...And 12 more matches
Date.prototype.toLocaleDateString() - JavaScript
the tolocaledatestring() method returns a string with a language sensitive representat
ion of the date port
ion of this date.
... the new locales and opt
ions arguments let applicat
ions specify the language whose formatting convent
ions should be used and allow to customize the behav
ior of the funct
ion.
... in older implementat
ions, which ignore the locales and opt
ions arguments, the locale used and the form of the string returned are entirely implementat
ion dependent.
...And 12 more matches
nsDependentCString
class declarat
ion nstdependentstring_chart stores a null-terminated, immutable sequence of characters.
... this class does not own its data, so the creator of objects of this type must take care to ensure that a nstdependentstring continues to reference valid memory for the durat
ion of its use.
... method overview constructors assertvalid rebind operator= get find rfind rfindchar findcharinset rfindcharinset compare equalsignorecase tofloat tointeger mid left right setcharat stripchars stripwhitespace replacechar replacesubstring trim compresswhitespace assignwithconvers
ion appendwithconvers
ion appendint appendfloat beginreading endreading beginwriting endwriting data length isempty isvoid isterminated charat operator[] first last countchar findchar equals equalsascii equalsliteral(const char equalsliteral(char lowercaseequalsascii lowercaseequalsliteral(const char lowercaseequalsliteral(...
...And 11 more matches
nsIAsyncOutputStream
xpcom/
io/nsiasyncoutputstream.idlscriptable please add a summary to this article.
... inherits from: ns
ioutputstream last changed in gecko 1.7 if an output stream is non-blocking, it may return ns_base_stream_would_block when written to.
...if the stream implements nsiasyncoutputstream, then the caller can use this interface to request an asynchronous notificat
ion when the stream becomes writable or closed (via the asyncwait() method).
...And 11 more matches
nsICache
the nsicache is a namespace for var
ious cache constants.
... last changed in gecko 1.9 (firefox 3) inherits from: nsisupports constants constant value descript
ion access_none 0 access granted - no descriptor is provided.
...see nsicachesess
ion and nsicacheentrydescriptor for more details.
...And 11 more matches
nsIClipboard
widget/nsiclipboard.idlscriptable this interface supports basic clipboard operat
ions such as: setting, retrieving, emptying, matching and supporting clipboard data.
...pboard); obsolete since gecko 1.8 void getdata(in nsitransferable atransferable, in long awhichclipboard); boolean hasdatamatchingflavors([array, size_is(alength)] in string aflavorlist, in unsigned long alength, in long awhichclipboard); void setdata(in nsitransferable atransferable, in nsiclipboardowner anowner, in long awhichclipboard); boolean supportsselect
ionclipboard(); boolean supportsfindclipboard(); constants most clipboard operat
ions in firefox use kglobalclipboard, which is the one also used by the typical control-c/control-v keyboard shortcuts.
... the kselect
ionclipboard is peculiar to the x windows system, where it refers to the primary select
ion, which is the one that simple mouse select
ion and middle-click paste operat
ions are using.
...And 11 more matches
nsICrashReporter
xpcom/system/nsicrashreporter.idlscriptable provides access to crash reporting funct
ionality.
... 1.0 66 introduced gecko 1.9 inherits from: nsisupports last changed in gecko 2.0 (firefox 4 / thunderbird 3.3 / seamonkey 2.1) method overview void annotatecrashreport(in acstring key, in acstring data); void appendappnotestocrashreport(in acstring data); void appendobjcexcept
ioninfotoappnotes(in voidptr aexcept
ion); native code only!
... void writeminidumpforexcept
ion(in voidptr aexcept
ioninfo); native code only!
...And 11 more matches
nsIDBFolderInfo
add brief descript
ion of interface ???
...obsolete since gecko 1.8 void setproperty(in string propertyname, in astring propertystr); void setuint32property(in string propertyname, in unsigned long propertyvalue); attributes attribute type descript
ion charactersetoverride boolean expiredmark nsmsgkey expungedbytes long flags long folderdate unsigned long foldername string foldersize unsigned long highwater nsmsgkey ...
...ng knownartsset string locale astring mailboxname astring nummessages long numunreadmessages long sortorder nsmsgviewsortordervalue sorttype nsmsgviewsorttypevalue vers
ion unsigned long viewflags nsmsgviewflagstypevalue viewtype nsmsgviewtypevalue methods andflags() long andflags( in long flags ); parameters flags missing descript
ion return value missing descript
ion except
ions thrown missing except
ion missing descript
ion changeexpungedbytes() void ...
...And 11 more matches
nsIEditorMailSupport
editor/idl/nsieditormailsupport.idlscriptable provides simple editing act
ions for the thunderbird mail editor.
... inherits from: nsisupports last changed in gecko 1.7 method overview nsisupportsarray getembeddedobjects(); nsidomnode insertascitedquotat
ion(in astring aquotedtext, in astring acitat
ion, in boolean ainserthtml); nsidomnode insertasquotat
ion(in astring aquotedtext); void inserttextwithquotat
ions(in domstring astringtoinsert); void pasteascitedquotat
ion(in astring acitat
ion, in long aselect
iontype); void pasteasquotat
ion(in long aselect
iontype); void rewrap(in boolean arespectnewlines); void stripcites(); methods getembeddedobjects() get a list of img and object tags in the current document.
...insertascitedquotat
ion() insert a string as quoted text (whose representat
ion is dependent on the editor type), replacing the selected text (if any), including, if possible, a "cite" attribute.
...And 11 more matches
nsIExternalProtocolService
uriloader/exthandler/nsiexternalprotocolservice.idlscriptable the external protocol service is used for finding and launching web handlers (a la registerprotocolhandler in the html5 draft) or platform-specific applicat
ions for handling particular protocols.
...method overview boolean externalprotocolhandlerexists(in string aprotocolscheme); astring getapplicat
iondescript
ion(in autf8string ascheme); nsihandlerinfo getprotocolhandlerinfo(in acstring aprotocolscheme); nsihandlerinfo getprotocolhandlerinfofromos(in acstring aprotocolscheme, out boolean afound); boolean isexposedprotocol(in string aprotocolscheme); void loaduri(in nsiuri auri, [opt
ional] in nsiinterfacerequestor awindowcontext); void loadurl(in nsiuri aurl); void setprotocolhandlerdefaults(in nsihandlerinfo ahandlerinfo, in boolean aosh...
...specifically, this looks to see whether there are any known possible applicat
ion handlers in either the nsihandlerservice datastore or registered with the os.
...And 11 more matches
nsIINIParser
nsiutf8stringenumerator getkeys(in autf8string asect
ion); nsiutf8stringenumerator getsect
ions(); autf8string getstring(in autf8string asect
ion, in autf8string akey); methods getkeys() returns an nsiutf8stringenumerator providing the keys available within the specified sect
ion of the ini file.
... nsiutf8stringenumerator getkeys( in autf8string asect
ion ); parameters asect
ion the name of the sect
ion whose keys you wish to enumerate.
... return value an nsiutf8stringenumerator object that can be used to access the sect
ion's keys.
...And 11 more matches
nsIJetpack
js/jetpack/nsijetpack.idlscriptable this interface enables communicat
ion between the chrome process and a remote jetpack process.
... 1.0 66 introduced gecko 2.0 inherits from: nsisupports last changed in gecko 2.0 (firefox 4 / thunderbird 3.3 / seamonkey 2.1) method overview void sendmessage(in astring amessagename /* [opt
ional] in jsval v1, [opt
ional] in jsval v2, ...
...void sendmessage( in astring amessagename, [opt
ional] in jsval v1, opt
ional [opt
ional] in jsval v2, opt
ional ...
...And 11 more matches
nsILocalFileMac
xpcom/
io/nsilocalfilemac.idlscriptable please add a summary to this article.
...obsolete since gecko 1.9.2 boolean ispackage(); void launchwithdoc(in nsilocalfile adoctoload, in boolean alaunchinbackground); void opendocwithapp(in nsilocalfile aapptoopenwith, in boolean alaunchinbackground); void setfiletypeandcreatorfromextens
ion(in string aextens
ion); obsolete since gecko 1.9.2 void setfiletypeandcreatorfrommimetype(in string amimetype); obsolete since gecko 1.9.2 attributes attribute type descript
ion bundledisplayname astring returns the display name of the applicat
ion bundle (usually the human readable name of the applicat
ion) read only.
... constants constant value descript
ion current_process_creator 0x8000000 use with setfiletype() to specify the signature of current process.
...And 11 more matches
nsIMsgDatabase
boolean mark, in nsidbchangelistener instigator); void markoffline(in nsmsgkey key, in boolean offline, in nsidbchangelistener instigator); void setlabel(in nsmsgkey key, in nsmsglabelvalue label); void setstringproperty(in nsmsgkey akey, in string aproperty, in string avalue); void markimapdeleted(in nsmsgkey key, in boolean deleted, in nsidbchangelistener instigator); void applyretent
ionsettings(in nsimsgretent
ionsettings amsgretent
ionsettings, in boolean adeleteviafolder); boolean hasnew(); void clearnewlist(in boolean notify); void addtonewlist(in nsmsgkey key); void startbatch(); void endbatch(); nsimsgofflineimapoperat
ion getofflineopforkey(in nsmsgkey messagekey, in boolean create); void removeofflineop(in nsimsgofflineimapoperat
ion op); nsisimpleenumerator ...
... void setattributesonpendinghdr(in nsimsgdbhdr pendinghdr, in string property, in string propertyval, in long flags); void createcollat
ionkey(in astring sourcestring, out octetptr key, out unsigned long len); native code only!
... long comparecollat
ionkeys(in octetptr key1, in unsigned long len1, in octetptr key2, in unsigned long len2); native code only!
...And 11 more matches
nsIMutableArray
any of these methods may throw ns_error_out_of_memory when the array must grow to complete the call, but the allocat
ion fails.
... except
ions thrown ns_error_failure when a weak reference is requested, but the element does not support nsiweakreference.
...insertelementat() insert an element at the given posit
ion, moving the element currently located in that posit
ion, and all elements in higher posit
ion, up by one.
...And 11 more matches
nsIParentalControlsService
to create an instance, use: var parentalcontrolsservice = components.classes["@mozilla.org/parental-controls-service;1"] .createinstance(components.interfaces.nsiparentalcontrolsservice); method overview void log(in short aentrytype, in boolean aflag, in nsiuri asource, [opt
ional] in nsifile atarget); boolean requestur
ioverride(in nsiuri atarget, [opt
ional] in nsiinterfacerequestor awindowcontext); boolean requestur
ioverrides(in nsiarray atargets, [opt
ional] in nsiinterfacerequestor awindowcontext); attributes attribute type descript
ion blockfiledownloadsenabled boolean true if the current user account's parental ...
...controls restrict
ions include the blocking of all file downloads.
...if this is true, applicat
ions should log relevant events using log() method.
...And 11 more matches
nsIParserUtils
parser/html/nsiparserutils.idlscriptable provides non-web html parsing funct
ionality to firefox extens
ions and xulrunner applicat
ions.
...method overview astring converttoplaintext(in astring src, in unsigned long flags, in unsigned long wrapcol); nsidomdocumentfragment parsefragment(in astring fragment, in unsigned long flags, in boolean isxml, in nsiuri baseuri, in nsidomelement element); astring sanitize(in astring src, in unsigned long flags); constants constant value descript
ion sanitizerallowcomments (1 << 0) flag for sanitizer: allow comment nodes.
... at present, sanitizing css syntax in svg presentat
ional attributes is not supported, so this opt
ion flattens out svg.
...And 11 more matches
NSS 3.31 release notes
introduct
ion the network security services (nss) team has released nss 3.31, which is a minor release.
... distribut
ion informat
ion the hg tag is nss_3_31_rtm.
... nss 3.31 source distribut
ions 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 funct
ionality allow certificates to be specified by rfc7512 pkcs#11 uris.
...And 10 more matches
NSS 3.34 release notes
introduct
ion the network security services (nss) team has released nss 3.34, which is a minor release.
... distribut
ion informat
ion the hg tag is nss_3_34_rtm.
... nss 3.34 source distribut
ions 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 certificat
ion 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 cn = ssl.com root certificat
ion authority ecc ...
...And 10 more matches
Creating JavaScript tests
jit-tests are intended to test the implementat
ion of the jit.
... only add tests to these suites which test jit correctness or funct
ionality.
... jstests is intended for tests of language-visible funct
ionality.
...And 10 more matches
JS::Call
this article covers features introduced in spidermonkey 17 call a specified js funct
ion.
... syntax bool js::call(jscontext *cx, js::handleobject thisobj, js::handlefunct
ion fun, const js::handlevaluearray &args, js::mutablehandlevalue rval); bool js::call(jscontext *cx, js::handleobject thisobj, const char *name, const js::handlevaluearray& args, js::mutablehandlevalue rval); bool js::call(jscontext *cx, js::handleobject thisobj, js::handlevalue fun, const js::handlevaluearray& args, js::mutablehandlevalue rval); bool js::call(jscontext *cx, js::handlevalue thisv, js::handlevalue fun, const js::handlevaluearray& args, js::mutablehandlevalue rval); bool js::call(jscontext *cx, js::handlevalue thisv, js::handleobject funobj, const js::handlevaluearray& args, js::mutablehandlevalue rval); name type descript
ion ...
... cx jscontext * pointer to a js context from which to derive runtime informat
ion.
...And 10 more matches
JSNewEnumerateOp
this callback overrides a port
ion of spidermonkey's default [[enumerate]] internal method.
... syntax typedef bool (* jsnewenumerateop)(jscontext *cx, js::handleobject obj, js::autoidvector &properties); // added in spidermonkeysidebar 38 typedef bool (* jsnewenumerateop)(jscontext *cx, js::handleobject obj, jsiterateop enum_op, js::mutablehandlevalue statep, js::mutablehandleid idp); // obsolete since jsapi 37 name type descript
ion cx jscontext * the context in which the enumerat
ion is taking place.
... enum_op jsiterateop obsolete since jsapi 37 specifies which step in iterat
ion is happening.
...And 10 more matches
JS_Add*Root
register a variable as a member of the garbage collector's root set, to protect anything the root points at from garbage collect
ion.
... these funct
ions are obsoleted, use js::persistentrooted instead.
...opp); jsbool js_addgcthingroot(jscontext *cx, void **rp); jsbool js_addnamedvalueroot(jscontext *cx, jsval *vp, const char *name); jsbool js_addnamedstringroot(jscontext *cx, jsstring **spp, const char *name); jsbool js_addnamedobjectroot(jscontext *cx, jsobject **opp, const char *name); jsbool js_addnamedgcthingroot(jscontext *cx, void **rp, const char *name); name type descript
ion cx jscontext * the context in which to add the new root.
...And 10 more matches
JS_CompileScriptForPrincipals
compile a security-enabled script for execut
ion.
...s_compilescriptforprincipals(jscontext *cx, jsobject *obj, jsprincipals *principals, const char *src, size_t length, const char *filename, unsigned int lineno); jsscript * js_compileucscriptforprincipals(jscontext *cx, jsobject *obj, jsprincipals *principals, const jschar *src, size_t length, const char *filename, unsigned int lineno); jsobject * js_compilescriptforprincipalsvers
ion(jscontext *cx, jsobject *obj, jsprincipals *principals, const char *src, size_t length, const char *filename, unsigned int lineno, jsvers
ion vers
ion); // obsoleted since jsapi 19 jsobject * js_compileucscriptforprincipalsvers
ion(jscontext *cx, jsobject *obj, jsprincipals *principals, const jschar *src, size_t length, const char *filename, unsigned int lineno, jsvers
ion vers
ion);...
... // obsoleted since jsapi 19 name type descript
ion cx jscontext * the context in which to compile the script.
...And 10 more matches
JS_DefineProperty
obj, js::handleid id, uint32_t value, unsigned attrs, jsnative getter = nullptr, jsnative setter = nullptr); bool js_definepropertybyid(jscontext *cx, js::handleobject obj, js::handleid id, double value, unsigned attrs, jsnative getter = nullptr, jsnative setter = nullptr); name type descript
ion cx jscontext * the context in which to define the property.
... result js::objectopresult & (out parameter) receives the result of the operat
ion.
... descript
ion js_defineproperty defines a single property in a specified object, obj.
...And 10 more matches
Using the Places favicon service
creating the favicon service the favicon service's contract id is @mozilla.org/browser/favicon-service;1, so to gain access to the favicon service, you should do something like this: var faviconservice = components.classes["@mozilla.org/browser/favicon-service;1"] .getservice(components.interfaces.nsifaviconservice); caching the favicon service stores an expirat
ion time for each favicon.
...if you are manually loading favicon data, you can specify the expirat
ion time yourself.
... otherwise, nsifaviconservice.setandloadfaviconforpage() will use the default expirat
ion time.
...And 10 more matches
nsDependentString
class declarat
ion nstdependentstring_chart stores a null-terminated, immutable sequence of characters.
... this class does not own its data, so the creator of objects of this type must take care to ensure that a nstdependentstring continues to reference valid memory for the durat
ion of its use.
... method overview constructors assertvalid rebind operator= get find rfind rfindchar findcharinset rfindcharinset equalsignorecase tofloat tointeger mid left right setcharat stripchars stripwhitespace replacechar replacesubstring trim compresswhitespace assignwithconvers
ion appendwithconvers
ion appendint appendfloat beginreading endreading beginwriting endwriting data length isempty isvoid isterminated charat operator[] first last countchar findchar equals equalsascii equalsliteral(const char equalsliteral(char lowercaseequalsascii lowercaseequalsliteral(const char lowercaseequalsliteral(char ass...
...And 10 more matches
inIDOMUtils
layout/inspector/inidomutils.idlscriptable dom utility funct
ions.
...learpseudoclasslocks(in nsidomelement aelement); [implicit_jscontext] jsval colornametorgb(in domstring acolorname); nsiarray getbindingurls(in nsidomelement aelement); nsidomnodelist getchildrenfornode(in nsidomnode anode, in boolean ashowinganonymouscontent); unsigned long long getcontentstate(in nsidomelement aelement); void getcsspropertynames([opt
ional] in unsigned long aflags, [opt
ional] out unsigned long acount, [retval, array, size_is(acount)] out wstring aprops); nsisupportsarray getcssstylerules(in nsidomelement aelement, [opt
ional] in domstring apseudo); nsidomnode getparentfornode(in nsidomnode anode, in boolean ashowinganonymouscontent); unsigned long getruleline(in nsidomcssstylerule arule); unsi...
...string apropertyname); void parsestylesheet(in nsidomcssstylesheet asheet, in domstring ainput); void removepseudoclasslock(in nsidomelement aelement, in domstring apseudoclass); astring rgbtocolorname(in octet ar, in octet ag, in octet ab); bool selectormatcheselement(in nsidomelement aelement, in nsidomcssstylerule arule, in unsigned long aselectorindex, [opt
ional] in domstring apseudo); void setcontentstate(in nsidomelement aelement, in unsigned long long astate); constants constant value descript
ion exclude_shorthands (1<<0) include_aliases (1<<1) content state flags the content state flags are used in a bitmask.
...And 10 more matches
mozITXTToHTMLConv
last changed in gecko 1.8.1 (firefox 2 / thunderbird 2 / seamonkey 1.1) inherits from nsistreamconverter implemented by @mozilla.org/txttohtmlconv;1 as a service: var
ios = components.classes["@mozilla.org/txttohtmlconv;1"] .getservice(components.interfaces.mozitxttohtmlconv); method overview unsigned long citeleveltxt(in wstring line, out unsigned long loglinestart) void findurlinplaintext(in wstring text, in long alength, in long apos, out long astartpos, out long aendpos) wstring scanhtml(in wstring text, in u...
...nsigned long whattodo) wstring scantxt(in wstring text, in unsigned long whattodo) constants convers
ion control attributes these bits allow you to control the convers
ion of text into html.
... constant type descript
ion kentities unsigned long enables convers
ion of basic special characters to html entities.
...And 10 more matches
nsIClipboardDragDropHooks
widget/public/nsiclipboarddragdrophooks.idlscriptable interfaces for overriding the built-in drag, drop, copy, and paste implementat
ions in the content area and editors.
...if more than one implementat
ion is set for a window, the hooks will be called in the order they are added.
...each hook can only be called once per user act
ion/api.
...And 10 more matches
nsIConsoleService
xpcom/base/nsiconsoleservice.idlscriptable the console service is the back-end for the error console, bundled with every mozilla applicat
ion, and for firefox's web console and browser console.
... it is used to log var
ious messages, warnings, and errors and to obtain the logged messages.
...nkey 2.16) implemented by: @mozilla.org/consoleservice;1 as a service: var consoleservice = components.classes["@mozilla.org/consoleservice;1"] .getservice(components.interfaces.nsiconsoleservice); method overview void getmessagearray([array, size_is(count)] out nsiconsolemessage messages, out uint32_t count);obsolete since gecko 19 void getmessagearray([opt
ional] out uint32_t count, [retval, array, size_is(count)] out nsiconsolemessage messages); void logmessage(in nsiconsolemessage message); void logstringmessage(in wstring message); void registerlistener(in nsiconsolelistener listener); void reset(); void unregisterlistener(in nsiconsolelistener listener); methods getmessagearray() to obtain an ...
...And 10 more matches
nsIDOMWindowInternal
it provides many of the common funct
ions used in javascript such as alert() or open().
... note: because most of nsidomwindowinternal's funct
ions and attributes are well documented in window, those articles are linked to rather than re-documented.
... method overview firefox 3.5 note the prompt() and find() methods changed in firefox 3.5 to make all their parameters opt
ional; in prev
ious vers
ions, all parameters were required.
...And 10 more matches
nsICookieManager2
the nsicookiemanager2 interface contains addit
ional methods that expand upon the nsicookiemanager interface.
...to create an object implementing this interface: components.utils.import("resource://gre/modules/services.jsm"); var cookieservice = services.cookies; method overview void add(in autf8string ahost, in autf8string apath, in acstring aname, in acstring avalue, in boolean aissecure, in boolean aishttponly, in boolean aissess
ion, in print64 aexpiry); boolean cookieexists(in nsicookie2 acookie); unsigned long countcookiesfromhost(in autf8string ahost); boolean findmatchingcookie(in nsicookie2 acookie, out unsigned long acountfromhost); obsolete since gecko 1.9 nsisimpleenumerator getcookiesfromhost(in autf8string ahost); void importcookies(in nsifile acookiefile); m...
... void add( in autf8string ahost, in autf8string apath, in acstring aname, in acstring avalue, in boolean aissecure, in boolean aishttponly, in boolean aissess
ion, in print64 aexpiry ); parameters ahost the host or domain for which the cookie is set.
...And 9 more matches
nsIMemoryReporter
xpcom/base/nsimemoryreporter.idlscriptable reports memory usage informat
ion for a single area of the software.
...attributes attribute type descript
ion amount print64 the numeric value reported by the memory reporter, specified in the units indicated by the units attribute.
... note: this attribute was called memoryused pr
ior to gecko 7.0 (firefox 7.0 / thunderbird 7.0 / seamonkey 2.4), and its type was long long.
...And 9 more matches
nsINetworkLinkService
inherits from: nsisupports last changed in gecko 8.0 (firefox 8.0 / thunderbird 8.0 / seamonkey 2.5) implemented by: @mozilla.org/network/network-link-service;1 as a service: var networklinkservice = components.classes["@mozilla.org/network/network-link-service;1"] .getservice(components.interfaces.nsinetworklinkservice); attributes attribute type descript
ion islinkup boolean this is set to true when the system is believed to have a usable network connect
ion.
... the link is only up when network connect
ions can be established.
... for example, the link is down during dhcp configurat
ion (unless there is another usable interface already configured).
...And 9 more matches
nsIScreen
widget/nsiscreen.idlscriptable this interface provides informat
ion about a display screen.
...aces.nsiscreen); method overview void getavailrect(out long left, out long top, out long width, out long height); void getrect(out long left, out long top, out long width, out long height); void lockminimumbrightness(in unsigned long brightness); void unlockminimumbrightness(in unsigned long brightness); attributes attribute type descript
ion colordepth long the screen's color depth; this is the number of bits used to represent a color.
... rotat
ion unsigned long the screen's current rotat
ion; you may set this to any of the values listed in screen rotat
ion constants.
...And 9 more matches
nsISmsDatabaseService
asses["@mozilla.org/sms/smsdatabaseservice;1"] .createinstance(components.interfaces.nsismsdatabaseservice); method overview long savereceivedmessage(in domstring asender, in domstring abody, in unsigned long long adate); long savesentmessage(in domstring areceiver, in domstring abody, in unsigned long long adate); void getmessage(in long messageid, in long requestid, [opt
ional] in unsigned long long processid); void deletemessage(in long messageid, in long requestid, [opt
ional] in unsigned long long processid); void createmessagelist(in nsidommozsmsfilter filter, in boolean reverse, in long requestid, [opt
ional] in unsigned long long processid); void getnextmessageinlist(in long listid, in long requestid, [opt
ional] in unsigned long long processid); void cle...
...armessagelist(in long listid); void markmessageread(in long messageid, in boolean value, in long requestid, [opt
ional] in unsigned long long processid) methods savereceivedmessage() void savereceivedmessage( in domstring asender, in domstring abody, in unsigned long long adate ); parameters asender a domstring with the sender of the text message.
... getmessage() void getmessage( in long messageid, in long requestid, [opt
ional] in unsigned long long processid ); parameters messageid a number representing the id of the message.
...And 9 more matches
nsITaskbarPreviewController
widget/public/nsitaskbarpreviewcontroller.idlscriptable this interface is used on microsoft windows to provide the behav
ior of taskbar previews.
... 1.0 66 introduced gecko 1.9.2 inherits from: nsisupports last changed in gecko 1.9.2 (firefox 3.6 / thunderbird 3.1 / fennec 1.0) clients should provide their own implementat
ion of this interface.
... method overview boolean drawpreview(in nsidomcanvasrenderingcontext2d ctx); boolean drawthumbnail(in nsidomcanvasrenderingcontext2d ctx, in unsigned long width, in unsigned long height); boolean onactivate(); void onclick(in nsitaskbarpreviewbutton button); void onclose(); attributes attribute type descript
ion height unsigned long the height in pixels of the preview image.
...And 9 more matches
nsITelemetry
n gecko 7.0 (firefox 7.0 / thunderbird 7.0 / seamonkey 2.4) implemented by: @mozilla.org/base/telemetry;1 as a service: let telemetry = components.classes["@mozilla.org/base/telemetry;1"] .getservice(components.interfaces.nsitelemetry); method overview jsval gethistogrambyid(in acstring id); jsval snapshothistograms(in uint32_t adataset, in boolean asubsess
ion, in boolean aclear); jsval getkeyedhistogrambyid(in acstring id); void capturestack(in acstring name); jsval snapshotcapturedstacks([opt
ional] in boolean clear); nsisupports getloadedmodules(); jsval snapshotkeyedhistograms(in uint32_t adataset, in boolean asubsess
ion, in boolean aclear); void sethistogramrecordingenabled(in acstring id, in ...
...boolean enabled); void asyncfetchtelemetrydata(in nsifetchtelemetrydatacallback acallback); double mssinceprocessstart(); void scalaradd(in acstring aname, in jsval avalue); void scalarset(in acstring aname, in jsval avalue); void scalarsetmaximum(in acstring aname, in jsval avalue); jsval snapshotscalars(in uint32_t adataset, [opt
ional] in boolean aclear); void keyedscalaradd(in acstring aname, in astring akey, in jsval avalue); void keyedscalarset(in acstring aname, in astring akey, in jsval avalue); void keyedscalarsetmaximum(in acstring aname, in astring akey, in jsval avalue); jsval snapshotkeyedscalars(in uint32_t adataset, [opt
ional] in boolean aclear); void clearscalars(); test only ...
... void flushbatchedchildtelemetry(); void recordevent(in acstring acategory, in acstring amethod, in acstring aobject, [opt
ional] in jsval avalue, [opt
ional] in jsval extra); void seteventrecordingenabled(in acstring acategory, in boolean aenabled); jsval snapshotevents(in uint32_t adataset, [opt
ional] in boolean aclear); void registerevents(in acstring acategory, in jsval aeventdata); void registerscalars(in acstring acategoryname, in jsval ascalardata); void clearevents(); test only attributes attribute type descript
ion canrecordbase boolean a flag indicating if telemetry can record base data (fhr data).
...And 9 more matches
nsITextInputProcessorCallback
dom/interfaces/base/nsitextinputprocessor.idlscriptable a callback interface for nsitextinputprocessor user 1.0 66 introduced gecko 38 inherits from: nsisupports last changed in gecko 38.0 (firefox 38.0 / thunderbird 38.0 / seamonkey 2.35) nsitextinputprocessorcallback is defined for receiving requests and notificat
ions to ime from gecko.
... this interface has a "funct
ion" attribute.
... therefore, js-ime can implement this as a funct
ion.
...And 9 more matches
nsITraceableChannel
1.0 66 introduced gecko 1.9.0.4 inherits from: nsisupports last changed in gecko 1.9.0.4 the typical way to use this interface is as follows: register for the "http-on-examine-response" notificat
ion to track all http responses; skip redirects (responsestatus = 3xx on nsihttpchannel), since otherwise you may end up with two listeners registered for a channel; qi the channel passed as the "subject" to your observer to nsitraceablechannel, and replace the default nsistreamlistener (that passes the data to the original requester - e.g.
... to xmlhttprequest or to the browser tab that made the request) with your own implementat
ion (see "implementing nsistreamlistener" below).
... after that your nsistreamlistener implementat
ion will get the response data and will be able to pass the data on to the original nsistreamlistener (possibly modifying it).
...And 9 more matches
nsIWebBrowser
embedders use this interface during initializat
ion to associate the new web browser instance with the embedders chrome and to register any listeners.
...method overview void addwebbrowserlistener(in nsiweakreference alistener, in nsiidref aiid); void removewebbrowserlistener(in nsiweakreference alistener, in nsiidref aiid); attributes attribute type descript
ion containerwindow nsiwebbrowserchrome the chrome object associated with the browser instance.
... the chrome may opt
ionally implement nsiinterfacerequestor, nsiwebbrowserchromefocus, nsicontextmenulistener and nsitooltiplistener to receive addit
ional notificat
ions from the browser object.
...And 9 more matches
XPCOM ABI
while xpcom components written in a scripting language (such as javascript) can be moved across platforms (such as windows and os x) without adaptat
ion, those written in a compiled language (such as c++) require recompilat
ion when moving to a different platform.
...only applicat
ions which use this abi could use this xpcom component.
... to put it simply, an xpcom component built for a specific abi would only be compatible with firefox, thunderbird or other xulrunner applicat
ion built for the same abi.
...And 9 more matches
Filelink Providers
this document explains how to extend thunderbird to support addit
ional web-based storage services.
... nsimsgcloudfileprovider note: cloudfiles and bigfiles were the two temporary feature names that were used while filelink was under construct
ion.
...the hightail implementat
ion is a great place to look for examples and inspirat
ion.
...And 9 more matches
MailNews Filters
mailnews filters consist of a set of search terms, and a set of filter act
ions.
... filter execut
ion is done by evaluating the search terms using the core mailnews/base/search code, and then applying the filter hits when the search terms match.
...the protocol specific code will then apply all of the act
ions of the filter to the current msg header.
...And 9 more matches
The libmime module
one of the methods provided by this parser is the ability to emit an html representat
ion of the data stream.
... the definit
ion of these classes is somewhat id
iosyncratic and consists of an internally defined object system, instead of c++.
... typedef struct foobarclass foobarclass; typedef struct foobar foobar; class declarat
ion theis structure defines the callback routines and other per-class data of the class defined in this module.
...And 9 more matches
Using the Mozilla symbol server
symbols are available for at least 30 prev
ious days worth of nightly builds, and firefox releases from 2.0.0.4.
...the server funct
ions like microsoft's symbol server so the documentat
ion there can be useful.
...the debugger will not be able to show you the content of all variables and the execut
ion path can seem strange because of inlining, tail calls, and other compiler optimizat
ions.
...And 9 more matches
dy - SVG: Scalable Vector Graphics
the dy attribute indicates a shift along the y-axis on the posit
ion of an element or its content.
... seven elements utilize this attribute: <altglyph>, <fedropshadow>, <feoffset>, <glyphref>, <text>, <tref>, and <tspan> html,body,svg { height:100% } <svg viewbox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"> <!-- lines materialized the posit
ion of the glyphs --> <line x1="10%" x2="10%" y1="0" y2="100%" /> <line x1="0" x2="100%" y1="30%" y2="30%" /> <line x1="0" x2="100%" y1="80%" y2="80%" /> <!-- some reference text --> <text x="10%" y="30%" fill="grey">svg</text> <!-- the same text with a shift along the y-axis --> <text dy="50%" x="10%" y="30%">svg</text> </svg> line { stroke: red; stroke-width: .5px; stroke-dasharray: 3px; } altglyph warning: as of svg2 <altglyph> is deprecated and shouldn't be used.
...//www.w3.org/2000/svg"> <!-- horizontal lines --> <line x1="0" x2="100%" y1="30" y2="30" /> <line x1="0" x2="100%" y1="40" y2="40" /> <line x1="0" x2="100%" y1="50" y2="50" /> <line x1="0" x2="100%" y1="60" y2="60" /> <!-- vertical lines --> <line x1="10" x2="10" y1="0" y2="100%" /> <line x1="50" x2="50" y1="0" y2="100%" /> <line x1="90" x2="90" y1="0" y2="100%" /> <!-- behav
iors change based on the number of values in the attributes --> <text dy="20" x="10" y="30">svg</text> <text dy="0 10" x="50" y="30">svg</text> <text dy="0 10 20" x="90" y="30">svg</text> </svg> line { stroke: red; stroke-width: .5px; stroke-dasharray: 3px; } tref warning: as of svg2 <tref> is deprecated and shouldn't be used.
...And 9 more matches
fill-rule - SVG: Scalable Vector Graphics
the fill-rule attribute is a presentat
ion attribute defining the algorithm to use to determine the inside part of a shape.
... note: as a presentat
ion attribute, fill-rule can be used as a css property.
... as a presentat
ion attribute, it can be applied to any element but it has effect only on the following eight elements: <altglyph>, <path>, <polygon>, <polyline>, <text>, <textpath>, <tref>, and <tspan> html,body,svg { height:100% } <svg viewbox="-10 -10 220 120" xmlns="http://www.w3.org/2000/svg"> <!-- default value for fill-rule --> <polygon fill-rule="nonzero" stroke="red" points="50,0 21,90 98,35 2,35 79,90"/> <!-- the center of the shape has two path segments (shown by the red stroke) between it and infinity.
...And 9 more matches
kernelUnitLength - SVG: Scalable Vector Graphics
value <number-opt
ional-number> default value pixel in offscreen bitmap animatable yes <number-opt
ional-number> the first number is the x value.
... fediffuselighting for the <fediffuselighting>, kernelunitlength indicates the intended distance in current filter units (i.e., units as determined by the value of attribute primitiveunits) for the x and y coordinate, respectively, in the surface normal calculat
ion formulas.
...if the attribute is not specified, the x and y values represent very small deltas relative to a given posit
ion, 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.
...And 9 more matches
shape-rendering - SVG: Scalable Vector Graphics
note: as a presentat
ion attribute, shape-rendering can be used as a css property.
... as a presentat
ion attribute, it can be applied to any element but it has effect only on the following seven elements: <circle>, <ellipse>, <line>, <path>, <polygon>, <polyline>, and <rect> html, body, svg { height: 100%; } <svg viewbox="0 0 420 200" xmlns="http://www.w3.org/2000/svg"> <circle cx="100" cy="100" r="100" shape-rendering="geometricprecis
ion"/> <circle cx="320" cy="100" r="100" shape-rendering="crispedges"/> </svg> usage notes value auto | optimizespeed | crispedges | geometricprecis
ion default value auto animatable yes auto this value indicates that the user agent shall make appropriate tradeoffs to balance speed, crisp edges and geometric precis
ion, but with geometric precis
ion given more importance than speed and ...
... optimizespeed this value indicates that the user agent shall emphasize rendering speed over geometric precis
ion and crisp edges.
...And 9 more matches
SVG fonts - SVG: Scalable Vector Graphics
« prev
iousnext » when svg was specified, support for web fonts was not widespread in browsers.
... since accessing the correct font file is however crucial for rendering text correctly, a font descript
ion technology was added to svg to provide this ability.
... it was not meant for compatibility with other formats like postscript or otf, but rather as a simple means of embedding glyph informat
ion into svg when rendered.
...And 9 more matches
event/core - Archive of obsolete content
the event/core module allows the creat
ion of apis to broadcast and subscribe to events.
... an event listener may be registered to any event target using the on funct
ion: var { on, once, off, emit } = require('sdk/event/core'); var target = { name: 'target' }; on(target, 'message', funct
ion listener(event) { console.log('hello ' + event); }); on(target, 'data', console.log); an event of a specific type may be emitted on any event target object using the emit funct
ion.
... emit(target, 'message', 'event'); // info: 'hello event' emit(target, 'data', { type: 'data' }, 'second arg'); // info: [object object] 'second arg' registered event listeners may be removed using off funct
ion: off(target, 'message'); emit(target, 'message', 'bye'); // info: 'hello bye' sometimes listener only cares about first event of specific type.
...And 8 more matches
Bookmarks - Archive of obsolete content
fox 2 and earlier creating a new bookmark var win = mybrowser.contentwindow; // get the bookmarks service const bmsvc = components.classes["@mozilla.org/browser/bookmarks-service;1"] .getservice(components.interfaces.nsibookmarksservice); // create the bookmark bmsvc.createbookmarkincontainer(win.document.title, // bookmark name win.locat
ion.href.tostring(), // uri of the bookmark null, // shortcut win.document.title, // descript
ion win.document.characterset, // charset null, // postdata bookmarksservice.getbookmarkstoolbarfolder(), // bookmark folder ...
...the documentat
ion for the new api is available at places.
... var
ios = components.classes["@mozilla.org/network/
io-service;1"] .getservice(components.interfaces.nsi
ioservice); var uri =
ios.newuri("http://google.com/", null, null); var newbkmkid = bmsvc.insertbookmark(newfolderid, uri, bmsvc.default_index, ""); this example instantiates the nsi
ioservice and uses it to create an nsiuri referring to the google web site, then calls nsinavbookma...
...And 8 more matches
JavaScript Debugger Service - Archive of obsolete content
in firefox vers
ions pr
ior to gecko 33 (firefox 33 / thunderbird 33 / seamonkey 2.30), the javascript debugger service (or simply jsd) used to be an xpcom component that allows the tracking of javascript while it was being executed in the browser.
...next, we add code to the var
ious hooks.
... jsd.scripthook = { onscriptcreated: funct
ion(script) { // your funct
ion here }, onscriptdestroyed: funct
ion(script) { // your funct
ion here } }; jsd.errorhook = { onerror: funct
ion(message, filename, lineno, colno, flags, errnum, exc) { // your funct
ion here } }; // triggered when jsd.errorhook[onerror] returns false jsd.debughook = { onexecute: funct
ion(frame, type, rv) { // your funct
ion here } }; jsd.enumeratescripts({ // the enumeratescript method will be called once for every script jsd knows about enumeratescript: funct
ion(script) { // your funct
ion here } }); a simple stack trace here, we will show how to implement a simple javascript stack trace using the jsd.
...And 8 more matches
Sidebar - Archive of obsolete content
see the creating a firefox sidebar tutorial for step-by-step instruct
ions on creating a firefox sidebar extens
ion.
... opening and closing the sidebar firefox provides a built-in sidebarui object funct
ion defined in browser-sidebar.js.
... this means that the funct
ion is available in all browser windows.
...And 8 more matches
Code snippets - Archive of obsolete content
this is a quick list of useful code snippets (small code samples) available for developers of extens
ions for the var
ious mozilla applicat
ions.
... many of these samples can also be used in xulrunner applicat
ions, as well as in actual mozilla code itself.
... these examples demonstrate how to accomplish basic tasks that might not be immediately obv
ious.
...And 8 more matches
Using the Stylesheet Service - Archive of obsolete content
the stylesheet service allows extens
ions to manage user and ua stylesheets without having to touch usercontent.css or userchrome.css files.
... the stylesheets registered with this api apply to all documents; firefox 18 extended nsidomwindowutils with loadaddit
ionalstylesheet() and removeaddit
ionalstylesheet() to manage stylesheets for a specific document (bug 737003).
...see the css specificat
ion for more details.
...And 8 more matches
Underscores in class and ID Names - Archive of obsolete content
note: browser support for underscores in css has greatly improved since this article was originally published in 2001 and the following recommendat
ion is no longer accurate for most circumstances.
... it is a fairly common practice in many programming languages to use the underscore character (_) in the place of a "space" in variable and funct
ion names.
... for example, a funct
ion whose job is to "get the length of a string" might be called get_string_length, and a variable representing the number of people who voted republican might be voted_republican.
...And 8 more matches
Getting the page URL in NPAPI plugin - Archive of obsolete content
there's unfortunately no trivial way to do that, but you can still do it, by asking the browser for the page url during plugin initializat
ion.
...there are at least 3 solut
ions (quoting newsgroup posts): via window locat
ion from robert platt: // get the dom window object.
... npn_getvalue( m_pnpinstance, npnvwindownpobject, &swindowobj ); // create a "locat
ion" identifier.
...And 8 more matches
ActiveX Control for Hosting Netscape Plug-ins in IE - Archive of obsolete content
introduct
ion microsoft has removed support for netscape plug-ins from ie 5.5 sp 2 and beyond.
...now you can use your plug-ins in any recent vers
ion of ie or in any other activex container for that matter.
...this 100k activex control contains the entire np api implementat
ion and probably worked much like pluginhostctrl.dll does now.
...And 8 more matches
Table Layout Strategy - Archive of obsolete content
specs the table layout algorithm is based on two w3c recommendat
ions: html 4.01 (chapter 11) and css2.1 (chapter 17).in css2 a distinct
ion between fixed and auto layout of tables has been introduced.
...the funct
ionality is distributed over a large number of subroutines as shown in the chart below.
... the words the table layout is width oriented and knows the following widths: minimum content width - min the minimum width that is required to layout the content, all linebreak possibilities will be used percent width - pct the cell width specified in percent, fixed width - fix the cell width specified as px, mm etc., proport
ional width - prop the cell width specified via 1*, 2* etc.
...And 8 more matches
NSS 3.17.1 release notes
introduct
ion network security services (nss) 3.17.1 is a patch release for nss 3.17.
... the bug fixes in nss 3.17.1 are described in the "bugs fixed" sect
ion below.
... distribut
ion informat
ion the hg tag is nss_3_17_1_rtm.
...And 8 more matches
NSS 3.27.1 release notes
introduct
ion network security services (nss) 3.27.1 is a patch release for nss 3.27.
... distribut
ion informat
ion the hg tag is nss_3_27_1_rtm.
... nss 3.27.1 source distribut
ions 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 funct
ionality no new funct
ionality is introduced in this release.
...And 8 more matches
NSS 3.27 release notes
introduct
ion the network security services (nss) team has released nss 3.27, which is a minor release.
... distribut
ion informat
ion the hg tag is nss_3_27_rtm.
... nss 3.27 source distribut
ions 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 funct
ionality allow custom named group pr
iorities for tls key exchange handshake (ssl_namedgroupconfig).
...And 8 more matches
NSS 3.30 release notes
introduct
ion the network security services (nss) team has released nss 3.30, which is a minor release.
... distribut
ion informat
ion the hg tag is nss_3_30_rtm.
... nss 3.30 source distribut
ions 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 funct
ionality 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.
...And 8 more matches
NSS 3.45 release notes
introduct
ion the nss team has released network security services (nss) 3.45 on 5 july 2019, which is a minor release.
... the nss team would like to recognize first-time contributors: bastien abadie christopher patton jeremie courreges-anglas marcus burghardt michael shigorin tomas mraz distribut
ion informat
ion the hg tag is nss_3_45_rtm.
... nss 3.45 source distribut
ions 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.
...And 8 more matches
NSS 3.46 release notes
introduct
ion the nss team has released network security services (nss) 3.46 on 30 august 2019, which is a minor release.
... the nss team would like to recognize first-time contributors: giul
io benetti louis dassy mike kaganski xhimanshuz distribut
ion informat
ion the hg tag is nss_3_46_rtm.
... nss 3.46 source distribut
ions 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.
...And 8 more matches
NSS 3.51.1 release notes
introduct
ion the nss team has released network security services (nss) 3.51.1 on 3 april 2020.
... this is a minor release focusing on funct
ional bug fixes and low-risk patches only.
... distribut
ion informat
ion the hg tag is nss_3_51_1_rtm.
...And 8 more matches
Utilities for nss samples
these utility funct
ions are adapted from those found in the sectool library used by the nss security tools and other nss test applicat
ions.
...*/ #ifndef _util_h #define _util_h #include <prlog.h> #include <term
ios.h> #include <base64.h> #include <unistd.h> #include <sys/stat.h> #include "util.h" #include <prprf.h> #include <prerror.h> #include <nss.h> #include <pk11func.h> /* * these utility funct
ions are adapted from those found in * the sectool library used by the nss security tools and * other nss test applicat
ions.
...ar *cp); /* * getpassword */ extern char * getpassword(file *input, file *output, char *prompt, prbool (*ok)(char *)); /* * filepasswd extracts the password from a text file * * storing passwords is often used with server environments * where prompting the user for a password or requiring it * to be entered in the commnd line is not a feasible opt
ion.
...And 8 more matches
nss tech note6
even on platforms for which there is only one implementat
ion of freebl, there is now a separate freebl shared library.
...reebl_32int_3.chk on the 64-bit solaris sparc architecture, there are 2 freebl libraries : libfreebl_64int_3.so for ultrasparc t1 cpus, with a corresponding libfreebl_64int_3.chk libfreebl_64fpu_3.so for other ultrasparc cpus, with a corresponding libfreebl_64fpu_3.chk on the 32-bit hp-ux pa-risc architecture, there are 2 freebl libraries : libfreebl_32fpu_3.sl for cpus that do multiply operat
ions faster in floating point, with a corresponding libfreebl_32fpu_3.chk libfreebl_32int_3.sl for other pa-risc cpus, with a corresponding libfreebl_32int_3.chk on the 64-bit hp-ux pa-risc architecture, there is only one freebl library, called libfreebl3.sl, with a corresponding libfreebl3.chk applicat
ions should always use nss binaries that are the output of the regular nss build process.
... if your applicat
ion modifies nss binaries for any reason after they were built, then : the fips 140 mode of operat
ion will no longer work, because the chk files will no longer match the softoken and freebl shared libraries .
...And 8 more matches
NSS cryptographic module
this chapter describes the data types and funct
ions that one can use to perform cryptographic operat
ions with the nss cryptographic module.
... the nss cryptographic module uses the industry standard pkcs #11 v2.20 as its api with some extens
ions.
... therefore, an applicat
ion that supports pkcs #11 cryptographic tokens can be easily modified to use the nss cryptographic module.
...And 8 more matches
Small Footprint
on a recent build, the length of js.jar was 603,127 bytes corresponding to 1,171,708 bytes of all uncompressed rhino classes with debug informat
ion included.
... with var
ious changes js.jar size can be reduced to 204,689 bytes corresponding to 424,774 bytes of uncompressed classes.
... optimizer it is possible to run rhino with interpreter mode only, allowing you to remove code for classfile generat
ion that include all the classes from <tt>org.mozilla.javascript.optimizer</tt> package.
...And 8 more matches
Statistics API
overview each time a garbage collect
ion occurs, spidermonkey keeps track of how long each phase of the collect
ion took, along with some related data.
... when logging to a file is used in combinat
ion with multi-process firefox (e10s) it is necessary to set security.sandbox.content.level = 0, otherwise the content process will crash.
... the browser preference javascript.opt
ions.mem.log controls dumping of human-readable gc stats messages to the developer console.
...And 8 more matches
JS::Add*Root
this article covers features introduced in spidermonkey 31 register a variable as a member of the garbage collector's root set, to protect anything the root points at from garbage collect
ion.
... these funct
ions are obsoleted, use js::persistentrooted instead.
... const char *name); bool js::addnamedstringroot(jscontext *cx, js::heap<jsstring *> *rp, const char *name); bool js::addnamedobjectroot(jscontext *cx, js::heap<jsobject *> *rp, const char *name); bool js::addnamedscriptroot(jscontext *cx, js::heap<jsscript *> *rp, const char *name); name type descript
ion cx jscontext * the context in which to add the new root.
...And 8 more matches
JS::Compile
this article covers features introduced in spidermonkey 17 compile a script for execut
ion.
... syntax // added in spidermonkey 45 bool js::compile(jscontext *cx, const js::readonlycompileopt
ions &opt
ions, js::sourcebufferholder &srcbuf, js::mutablehandlescript script); bool js::compile(jscontext *cx, const js::readonlycompileopt
ions &opt
ions, const char *bytes, size_t length, js::mutablehandlescript script); bool js::compile(jscontext *cx, const js::readonlycompileopt
ions &opt
ions, const char16_t *chars, size_t length, js::mutablehandlescript script); bool js::compile(jscontext *cx, const js::readonlycompileopt
ions &opt
ions, file *file, js::mutablehandlescript script); bool js::compile(jscontext *cx, const js::readonlycompileopt
ions &opt
ions, const char *filename, ...
... js::mutablehandlescript script); // obsolete since jsapi 39 bool js::compile(jscontext *cx, js::handleobject obj, const js::readonlycompileopt
ions &opt
ions, js::sourcebufferholder &srcbuf, js::mutablehandlescript script); bool js::compile(jscontext *cx, js::handleobject obj, const js::readonlycompileopt
ions &opt
ions, const char *bytes, size_t length, js::mutablehandlescript script); bool js::compile(jscontext *cx, js::handleobject obj, const js::readonlycompileopt
ions &opt
ions, const char16_t *chars, size_t length, js::mutablehandlescript script); bool js::compile(jscontext *cx, js::handleobject obj, const js::readonlycompileopt
ions &opt
ions, file *file, js::mutablehandlescript script)...
...And 8 more matches
JS::Evaluate
syntax // added in spidermonkey 45 bool js::evaluate(jscontext *cx, const js::readonlycompileopt
ions &opt
ions, js::sourcebufferholder &srcbuf, js::mutablehandlevalue rval); bool js::evaluate(jscontext *cx, const js::readonlycompileopt
ions &opt
ions, const char16_t *chars, size_t length, js::mutablehandlevalue rval); bool js::evaluate(jscontext *cx, const js::readonlycompileopt
ions &opt
ions, const char *bytes, size_t length, js::mutablehandlevalue rval); bool js::evaluate(jscontext *cx, const js::readonlycompileopt
ions &opt
ions, const char *filename, js::mutablehandlevalue rval);...
... bool js::evaluate(jscontext *cx, js::autoobjectvector &scopechain, const readonlycompileopt
ions &opt
ions, const char16_t *chars, size_t length, js::mutablehandlevalue rval); // added in spidermonkey 17 bool js::evaluate(jscontext *cx, js::autoobjectvector &scopechain, const js::readonlycompileopt
ions &opt
ions, js::sourcebufferholder &srcbuf, js::mutablehandlevalue rval); // obsolete since jsapi 39 bool js::evaluate(jscontext *cx, js::handleobject obj, const js::readonlycompileopt
ions &opt
ions, js::sourcebufferholder &srcbuf, js::mutablehandlevalue rval); bool js::evaluate(jscontext *cx, js::handleobject obj, const js::readonlycompileopt
ions &opt
ions, const char16_t *chars, size_t le...
...ngth, js::mutablehandlevalue rval); bool js::evaluate(jscontext *cx, js::handleobject obj, const js::readonlycompileopt
ions &opt
ions, const char *bytes, size_t length, js::mutablehandlevalue rval); bool js::evaluate(jscontext *cx, js::handleobject obj, const js::readonlycompileopt
ions &opt
ions, const char *filename, js::mutablehandlevalue rval); name type descript
ion cx jscontext * the context in which to run the script.
...And 8 more matches
Using Media Queries for Accessibility - CSS: Cascading Style Sheets
reduced mot
ion blinking and flashing animat
ion can be problematic for people with cognitive concerns such as attent
ion deficit hyperactivity disorder (adhd).
... addit
ionally, certain kinds of mot
ion can be a trigger for vestibular disorders, epilepsy, and migraine and scotopic sensitivity.
... also, this method of switching animat
ion off according to the user's preference can also benefit users with low battery or low-end phones or computers.
...And 8 more matches
Viewport concepts - CSS: Cascading Style Sheets
your viewport is everything that is currently visible, notably, the "what is a viewport sect
ion", and perhaps some of the navigat
ion menu.
...content outside the viewport, such as the see also sect
ion in this document, is likely to not be visible onscreen until scrolled into view.
... on larger monitors where applicat
ions aren't necessarily full screen, the viewport is the size of the browser window.
...And 8 more matches
<blend-mode> - CSS: Cascading Style Sheets
the effect is like two images shone onto a project
ion screen.
... <div id="div"></div> #div { width: 300px; height: 300px; background: url('https://mdn.mozillademos.org/files/8543/br.png'), url('https://mdn.mozillademos.org/files/8545/tr.png'); background-blend-mode: difference; } exclus
ion the final color is similar to difference, but with less contrast.
... <div id="div"></div> #div { width: 300px; height: 300px; background: url('https://mdn.mozillademos.org/files/8543/br.png'), url('https://mdn.mozillademos.org/files/8545/tr.png'); background-blend-mode: exclus
ion; } hue the final color has the hue of the top color, while using the saturat
ion and luminosity of the bottom color.
...And 8 more matches
border-image-source - CSS: Cascading Style Sheets
the border-image-slice property is used to divide the source image into reg
ions, which are then dynamically applied to the final border image.
... formal definit
ion initial valuenoneapplies toall elements, except internal table elements when border-collapse is collapse.
... it also applies to ::first-letter.inheritednocomputed valuenone or the image with its uri made absoluteanimat
ion typediscrete formal syntax none | <image>where <image> = <url> | <image()> | <image-set()> | <element()> | <paint()> | <cross-fade()> | <gradient>where <image()> = image( <image-tags>?
...And 8 more matches
border - CSS: Cascading Style Sheets
descript
ion as with all shorthand properties, any omitted sub-values will be set to their initial value.
... formal definit
ion initial valueas each of the properties of the shorthand:border-width: as each of the properties of the shorthand:border-top-width: mediumborder-right-width: mediumborder-bottom-width: mediumborder-left-width: mediumborder-style: as each of the properties of the shorthand:border-top-style: noneborder-right-style: noneborder-bottom-style: noneborder-left-style: noneborder-color: as each of the pr...
...le is none or hiddenborder-style: as each of the properties of the shorthand:border-bottom-style: as specifiedborder-left-style: as specifiedborder-right-style: as specifiedborder-top-style: as specifiedborder-color: as each of the properties of the shorthand:border-bottom-color: computed colorborder-left-color: computed colorborder-right-color: computed colorborder-top-color: computed coloranimat
ion typeas each of the properties of the shorthand:border-color: as each of the properties of the shorthand:border-bottom-color: a colorborder-left-color: a colorborder-right-color: a colorborder-top-color: a colorborder-style: discreteborder-width: as each of the properties of the shorthand:border-bottom-width: a lengthborder-left-width: a lengthborder-right-width: a lengthborder-top-width: a lengt...
...And 8 more matches
float - CSS: Cascading Style Sheets
the element is removed from the normal flow of the page, though still remaining a part of the flow (in contrast to absolute posit
ioning).
...the block layout, it modifies the computed value of the display values, in some cases: specified value computed value inline block inline-block block inline-table table table-row block table-row-group block table-column block table-column-group block table-cell block table-capt
ion block table-header-group block table-footer-group block inline-flex flex inline-grid grid other unchanged note: if you're referring to this property from javascript as a member of the htmlelement.style object, modern browsers support float, but in older browsers you have to spell it as cssfloat, with internet explorer vers
ions...
...this was an except
ion to the rule, that the name of the dom member is the camel-case name of the dash-separated css name (due to the fact that "float" is a reserved word in javascript, as seen in the need to escape "class" as "classname" and escape <label>'s "for" as "htmlfor").
...And 8 more matches
font-variant-ligatures - CSS: Cascading Style Sheets
syntax /* keyword values */ font-variant-ligatures: normal; font-variant-ligatures: none; font-variant-ligatures: common-ligatures; /* <common-lig-values> */ font-variant-ligatures: no-common-ligatures; /* <common-lig-values> */ font-variant-ligatures: discret
ionary-ligatures; /* <discret
ionary-lig-values> */ font-variant-ligatures: no-discret
ionary-ligatures; /* <discret
ionary-lig-values> */ font-variant-ligatures: historical-ligatures; /* <historical-lig-values> */ font-variant-ligatures: no-historical-ligatures; /* <historical-lig-values> */ font-variant-ligatures: contextual; /* <contextual-alt-values> */ font-variant-liga...
... values normal this keyword leads to the activat
ion of the usual ligatures and contextual forms needed for correct rendering.
... <discret
ionary-lig-values> these values control specific ligatures, specific to the font and defined by the type designer.
...And 8 more matches
line-height - CSS: Cascading Style Sheets
<length> the specified <length> is used in the calculat
ion of the line box height.
...this will help people experiencing low vis
ion condit
ions, as well as people with cognitive concerns such as dyslexia.
... if the page is zoomed to increase the text size, using a unitless value ensures that the line height will scale proport
ionately.
...And 8 more matches
margin-left - CSS: Cascading Style Sheets
this table summarizes the different cases: value of display value of float value of posit
ion 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-capt
ion 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-capt
ion left or right static or relative 0 block layout mode (floating element) any table-*, except table-capt
ion 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.
... absolutely posit
ioned layout mode flex, inline-flex any any 0, except if there is any positive horizontal free space.
...And 8 more matches
margin-right - CSS: Cascading Style Sheets
this table summarizes the different cases: value of display value of float value of posit
ion 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-capt
ion 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-capt
ion left or right static or relative 0 block layout mode (floating element) any table-*, except table-capt
ion 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.
... absolutely posit
ioned layout mode flex, inline-flex any any 0, except if there is any positive horizontal free space.
...And 8 more matches
mask-border-source - CSS: Cascading Style Sheets
the mask-border-slice property is used to divide the source image into reg
ions, which are then dynamically applied to the final mask border.
... formal definit
ion initial valuenoneapplies toall elements; in svg, it applies to container elements excluding the defs element and all graphics elementsinheritednocomputed valueas specified, but with <url> values made absoluteanimat
ion typediscrete formal syntax none | <image>where <image> = <url> | <image()> | <image-set()> | <element()> | <paint()> | <cross-fade()> | <gradient>where <image()> = image( <image-tags>?
...)<image-set()> = image-set( <image-set-opt
ion># )<element()> = element( <id-selector> )<paint()> = paint( <ident>, <declarat
ion-value>?
...And 8 more matches
Guide to scroll anchoring - CSS: Cascading Style Sheets
you browse to a long page on a slow connect
ion and begin to scroll to read the content; while you are busy reading, the part of the page you are looking at suddenly jumps.
... scroll anchoring adjusts the scroll posit
ion to compensate for the changes outside of the viewport.
... this means that the point in the document the user is looking at remains in the viewport, which may mean their scroll posit
ion actually changes in terms of how far they have moved through the document.
...And 8 more matches
<percentage> - CSS: Cascading Style Sheets
opt
ionally, it may be preceded by a single + or - sign, although negative values are not valid for all properties.
... as with all css dimens
ions, there is no space between the symbol and the number.
... interpolat
ion when animated, values of the <percentage> data type are interpolated as real, floating-point numbers.
...And 8 more matches
resize - CSS: Cascading Style Sheets
the resize css property sets whether an element is resizable, and if so, in which direct
ions.
... horizontal the element displays a mechanism for allowing the user to resize it in the horizontal direct
ion.
... vertical the element displays a mechanism for allowing the user to resize it in the vertical direct
ion.
...And 8 more matches
scroll-snap-type - CSS: Cascading Style Sheets
specifying any precise animat
ions or physics used to enforce those snap points is not covered by this property but instead left up to the user agent.
... /* keyword values */ scroll-snap-type: none; scroll-snap-type: x; scroll-snap-type: y; scroll-snap-type: block; scroll-snap-type: inline; scroll-snap-type: both; /* opt
ional mandatory | proximity*/ scroll-snap-type: x mandatory; scroll-snap-type: y proximity; scroll-snap-type: both mandatory; /* etc */ /* global values */ scroll-snap-type: inherit; scroll-snap-type: initial; scroll-snap-type: unset; syntax values none when the visual viewport of this scroll container is scrolled, it must ignore snap points.
... x the scroll container snaps to snap posit
ions in its horizontal axis only.
...And 8 more matches
How to get a stacktrace for a bug report
mozilla's crash report server currently only has debug informat
ion for mozilla builds and thus the crash reporter cannot work if you use a build from a linux distribut
ion or if you compile from source code.
...this helps engineers determine whether a particular extens
ion or plugin is the cause of the crash.
...if you have any addit
ional informat
ion about the crash, such as addit
ional detail on what you were doing at the time that may have triggered the crash, please enter it into the comments box.
...And 6 more matches
AddonListener
addonlisteners can be registered with addaddonlistener() and will then receive notificat
ion of changes to the add-ons currently installed.
... these notificat
ions come in the form of calls to methods on the listener object.
...tart) void onenabled(in addon addon) void ondisabling(in addon addon, in boolean needsrestart) void ondisabled(in addon addon) void oninstalling(in addon addon, in boolean needsrestart) void oninstalled(in addon addon) void onuninstalling(in addon addon, in boolean needsrestart) void onuninstalled(in addon addon) void onoperat
ioncancelled(in addon addon) void onpropertychanged(in addon addon, in string properties[]) methods onenabling() called when an add-on is about to be enabled.
...And 6 more matches
DownloadSummary
a reference to a downloadsummary object can be obtained using the downloads.getsummary() funct
ion.
... method overview promise bindtolist(downloadlist alist); promise addview(object aview); promise removeview(object aview); properties attribute type descript
ion allhavestopped read only boolean indicates whether all the downloads are currently stopped.
...this allows the summary to be used without requiring the initializat
ion of the downloadlist first.
...And 6 more matches
Interfacing with the Add-on Repository
the add-on repository javascript code module makes it easy for your extens
ion to interface with the amo repository.
... enabling the recommendat
ion feature in current builds of firefox 4, the recommendat
ion api doesn't work because the preference for the url to query to get recommended add-ons is not included by default; see bug 628785.
... to make the service work for the time being, you can use code like this when your extens
ion starts up: var prefsservice = components.classes["@mozilla.org/preferences-service;1"] .getservice(components.interfaces.nsiprefservice); var prefbranch = prefsservice.getbranch("extens
ions."); var recurl = ""; try { recurl = prefbranch.getcharpref("getaddons.recommended.url"); } catch(e) { recurl = ""; } if (recurl == "") { prefbranch.setcharpref("getaddons.recommended.url", "https://services.addons.mozilla.org/%locale%/%app%/api/%api_vers
ion%/list/recommended/all/%max_results%/%os%/%vers
ion%?src=firefox"); prefsservice.savepreffile(null); } this fetches the value of the extens
ions.getaddons.recommended.url preference, and, if the preference ...
...And 6 more matches
Webapps.jsm
the webapps.jsm modules exposes the domapplicat
ionregistry, which is responsible for managing all of the open web apps.
... importing components.utils.import("resource://gre/modules/webapps.jsm"); // exported symbol is domapplicat
ionregistry method overview init: funct
ion() loadcurrentregistry: funct
ion() notifyappsregistrystart: funct
ion notifyappsregistrystart() notifyappsregistryready: funct
ion notifyappsregistryready() sanitizeredirects: funct
ion sanitizeredirects(asource) _savewidgetsfullpath: funct
ion(amanifest, adestapp) appkind: funct
ion(aapp, amanifest) updatepermiss
ionsforapp: funct
ion(aid, aispreinstalled) updateofflinecacheforapp: funct
ion(aid) installpreinstalledapp: funct
ion installpreinstalledapp(aid) removeifhttpsduplicate: funct
ion(aid) installsystemapps: funct
ion() loadandupdateapps: funct
ion() updatedatastore: funct
ion(aid, aorigin, amanifesturl, amanifest) _registersystem...
...messagesforentrypoint: funct
ion(amanifest, aapp, aentrypoint) _registerinterappconnect
ionsforentrypoint: funct
ion(amanifest, aapp,) _registersystemmessages: funct
ion(amanifest, aapp) _registerinterappconnect
ions: funct
ion(amanifest, aapp) _createactivitiestoregister: funct
ion(amanifest, aapp, aentrypoint, arunupdate) _registeractivitiesforapps: funct
ion(aappstoregister, arunupdate) _registeractivities: funct
ion(amanifest, aapp, arunupdate) _createactivitiestounregister: funct
ion(amanifest, aapp, aentrypoint) _unregisteractivitiesforapps: funct
ion(aappstounregister) _unregisteractivities: funct
ion(amanifest, aapp) _processmanifestforids: funct
ion(aids, arunupdate) observe: funct
ion(asubject, atopic, adata) addmessagelistener: funct
ion(amsgnames, aapp, amm) removemessagelistener: ...
...And 6 more matches
GC and CC logs
gc and cc logs garbage collector (gc) and cycle collector (cc) logs give informat
ion about why var
ious js and c++ objects are alive in the heap.
... garbage collector logs and cycle collector logs can be analyzed in var
ious ways.
...it also creates a file named cc-edges-nnnn.log to which it dumps the parts of the heap visible to the cycle collector, which includes native c++ objects that participate in cycle collect
ion, as well as js objects being held alive by those c++ objects.
...And 6 more matches
Preference reference
accessibility.tabfocusthe preference accessibility.tabfocus controls what elements receive focus when the user presses the tab key.browser.altclicksavethe preference browser.altclicksave controls whether clicking a link while holding the alt key starts the download of that link.browser.dom.window.dump.enabledthis setting enables the dump funct
ion, which sends messages to the system console.
...changes require an applicat
ion restart.browser.download.lastdir.savepersitebrowser.download.lastdir.savepersite controls whether the directory preselected in the file picker for saving a file download is being remembered on a per-website (host) base.
... if set to true, the data is stored as content preference.browser.pagethumbnails.capturing_disabledthe preference browser.pagethumbnails.capturing_disabled controls whether the applicat
ion creates screenshots of visited pages which will be shown if the web page is shown in the grid of the "new tab page" (about:newtab) which offers the most often visited pages for fast navigat
ion.browser.search.context.loadinbackgroundbrowser.search.context.loadinbackground controls whether a search from the context menu with "search <search engine> for <selected text>" opening a new tab will give focus to it and load it in the foreground or keep focus on the current tab and open it in the background.browser.urlbar.formatting.enabledthe preference browser.urlbar.formatting.enabled controls whether the domain ...
...And 6 more matches
Leak And Bloat Tests
startup main mail window open address book and message composit
ion windows close address book and message composit
ion windows quit the applicat
ion future improvements will be discussed on the discuss
ion page of the mozilla wiki.
... results printed on tinderbox output, these consist of: mail rlk reference count leaks mail lk total bytes malloc'ed and not free'd mail mh maximum heap size mail a allocat
ions - number of calls to malloc and friends.
... manually running tests setting up build set up build thunderbird or seamonkey with your standard mozconfig file, but with the following opt
ions set: ac_add_opt
ions --enable-debug ac_add_opt
ions --enable-trace-malloc running the tests in your <objdir> run the following command: make mailbloat this will run the tests and produce some result files.
...And 6 more matches
Creating a Cookie Log
please follow the instruct
ions below to run firefox with cookie logging enabled.
... enabling cookie logging windows open a command prompt (this is under programs or programs/accessories in normal installat
ions of windows).
... linux start a command shell (these instruct
ions are for bash, if you use something else, you probably know how to modify these instruct
ions already).
...And 6 more matches
NSPR release procedure
release checklist change the nspr vers
ion in mozilla/nsprpub/pr/include/prinit.h.
... change the nspr vers
ion in mozilla/nsprpub/{configure.in,configure}.
... change the nspr vers
ion in mozilla/nsprpub/pr/tests/vercheck.c.
...And 6 more matches
Anonymous Shared Memory
anonymous memory protocol anonymous shared memory funct
ions anonymous memory protocol nspr provides an anonymous shared memory based on nspr's prfilemap type.
...on platforms where the shared memory is backed by a file, the file's name in the filesystem is visible to other processes for only the durat
ion of the creat
ion of the file, hopefully a very short time.
...if you are not paranoid, you're not paying attent
ion.
...And 6 more matches
Locks
this chapter describes the nspr api for creat
ion and manipulat
ion of a mutex of type prlock.
... lock type lock funct
ions in nspr, a mutex of type prlock controls locking, and associated condit
ion variables communicate changes in state among threads.
... when a programmer associates a mutex with an arbitrary collect
ion of data, the mutex provides a protective monitor around the data.
...And 6 more matches
PRThreadState
syntax #include <prthread.h> typedef enum prthreadstate { pr_joinable_thread, pr_unjoinable_thread } prthreadstate; enumerators pr_unjoinable_thread thread terminat
ion happens implicitly when the thread returns from the root funct
ion.
... pr_joinable_thread joinable thread references remain valid after they have returned from their root funct
ion until pr_jointhread is called.
... descript
ion a thread is a critical resource and must be managed.
...And 6 more matches
PR_GetFileInfo
gets informat
ion about a file with a specified pathname.
... syntax #include <pr
io.h> prstatus pr_getfileinfo( const char *fn, prfileinfo *info); parameters the funct
ion has the following parameters: fn the pathname of the file to get informat
ion about.
... info a pointer to a file informat
ion object (see prfileinfo).
...And 6 more matches
PR_GetFileInfo64
gets informat
ion about a file with a specified pathname.
... syntax #include <pr
io.h> prstatus pr_getfileinfo64( const char *fn, prfileinfo64 *info); parameters the funct
ion has the following parameters: fn the pathname of the file to get informat
ion about.
... info a pointer to a 64-bit file informat
ion object (see prfileinfo64).
...And 6 more matches
loader/sandbox - Archive of obsolete content
opt
ionally the sandbox funct
ion can be passed a second argument (see sandbox documentat
ion on mdn for details).
... evaluate code module provides evaluate funct
ion that lets you execute code in the given sandbox: evaluate(scope, 'var a = 5;'); evaluate(scope, 'a + 2;'); //=> 7 more details about evaluated script may be passed via opt
ional arguments that may improve except
ion reporting: // evaluate code as if it was loaded from 'http://foo.com/bar.js' and // start from 2nd line.
... evaluate(scope, 'a ++', 'http://foo.com/bar.js', 2); vers
ion of javascript can be also specified via an opt
ional argument: evaluate(scope, 'let b = 2;', 'bar.js', 1, '1.5'); // throws cause `let` is not defined in js 1.5.
...And 5 more matches
net/xhr - Archive of obsolete content
provides access to xmlhttprequest funct
ionality.
... if access to local area networks isn't prevented, malic
ious code could access sensitive data.
... if transmiss
ion of cookies isn't prevented, malic
ious code could access sensitive data.
...And 5 more matches
stylesheet/style - Archive of obsolete content
globals constructors style(opt
ions) the style constructor creates an object that represents style modificat
ions via stylesheet file(s) or/and css rules.
...those funct
ions are part of content/mod module.
... parameters opt
ions : object required opt
ions: name type uri string,array a string, or an array of strings, that represents local uri to stylesheet.
...And 5 more matches
test/utils - Archive of obsolete content
usage before and after helper funct
ions before() and after() are available for running a funct
ion before or after each test in a suite.
... let { before, after } = require('sdk/test/utils'); let { search } = require('sdk/places/bookmarks'); exports.testcountbookmarks = funct
ion (assert, done) { search().on('end', funct
ion (results) { assert.equal(results, 0, 'should be no bookmarks'); done(); }); }; before(exports, funct
ion (name, assert) { removeallbookmarks(); }); require('sdk/test').run(exports); both before and after may be asynchronous.
... to make them asynchronous, pass a third argument done, which is a funct
ion to call when you have finished: let { before, after } = require('sdk/test/utils'); let { search } = require('sdk/places/bookmarks'); exports.testcountbookmarks = funct
ion (assert, done) { search().on('end', funct
ion (results) { assert.equal(results, 0, 'should be no bookmarks'); done(); }); }; before(exports, funct
ion (name, assert, done) { removeallbookmarksasync(funct
ion () { done(); }); }); require('sdk/test').run(exports); globals funct
ions before(exports, beforefn) runs beforefn before each test in the file.
...And 5 more matches
cfx to jpm - Archive of obsolete content
installat
ion cfx is python-based and is distributed as a zip file.
... to get new updates of cfx you download and extract a new zip file, while to get the new vers
ion of jpm, use npm update.
... for jpm installat
ion instruct
ions, see the installat
ion sect
ion in the jpm reference.
...And 5 more matches
Add a Context Menu Item - Archive of obsolete content
when it's clicked, the select
ion is sent to the main add-on code, which just logs it: var contextmenu = require("sdk/context-menu"); var menuitem = contextmenu.item({ label: "log select
ion", context: contextmenu.select
ioncontext(), contentscript: 'self.on("click", funct
ion () {' + ' var text = window.getselect
ion().tostring();' + ' self.postmessage(text);' + '});', onmessage: funct
ion (select
iontext) { console.log(select
iontext); } }); try it: run th...
...you should see the new item appear: click it, and the select
ion is logged to the console (or the shell, if you're running an instance of firefox from the command line): info: elephantine lizard details all this add-on does is to construct a context menu item.
...the constructor in this case takes four opt
ions: label, context, contentscript, and onmessage.
...And 5 more matches
Add-on SDK - Archive of obsolete content
you can use var
ious standard web technologies: javascript, html, and css, to create the add-ons.
... development techniques learn about common development techniques, such as unit testing, logging, creating reusable modules, localizat
ion, and mobile development.
... guides contributor's guide learn how to start contributing to the sdk and about the most important id
ioms used in the sdk code such as modules, classes and inheritance, private properties, and content processes.
...And 5 more matches
Downloading Files - Archive of obsolete content
var privacy = privatebrowsingutils.privacycontextfromwindow(urlsourcewindow); persist.persistflags = persist.persist_flags_from_cache | persist.persist_flags_replace_existing_files; persist.saveuri(uritosave, null, null, null, "", targetfile, privacy); if you don't need detailed progress informat
ion, you might be happier with nsidownloader.
...ents.utils.import("resource://gre/modules/privatebrowsingutils.jsm"); const webbrowserpersist = components.constructor("@mozilla.org/embedding/browser/nswebbrowserpersist;1", "nsiwebbrowserpersist"); var persist = webbrowserpersist(); var targetfile = services.dirsvc.get("desk", ci.nsifile); targetfile.append("file.bin"); var obj_uri = services.
io.newuri(aurltodownload, null, null); // obtain the privacy context of the browser window that the url // we are downloading comes from.
...var privacy = privatebrowsingutils.privacycontextfromwindow(aurlsourcewindow); var progresselement = document.getelementbyid("progress_element"); persist.progresslistener = { onprogresschange: funct
ion(awebprogress, arequest, acurselfprogress, amaxselfprogress, acurtotalprogress, amaxtotalprogress) { var percentcomplete = math.round((acurtotalprogress / amaxtotalprogress) * 100); progresselement.textcontent = percentcomplete +"%"; }, onstatechange: funct
ion(awebprogress, arequest, astateflags, astatus) { // do something } } persist.saveuri(obj_uri, null, null, null, "", targetfile, privacy); downloading files that require credentials before calling nsiwebbrowserpersist.saveuri(), you...
...And 5 more matches
Toolbar - Archive of obsolete content
adding a toolbar button there are two tutorials available: an elaborate step by step tutorial for beginners: custom toolbar button a tutorial describing the steps needed to add a toolbar button assuming you already have a working extens
ion and know the basics of extens
ion development: creating toolbar buttons adding button by default when you create and deploy your extens
ion and include a toolbar button for it by overlaying the customize toolbarpalette, it is not available by default.
...this should only be done on the first run of your add-on after installat
ion so that if the user decides to remove your button, it doesn't show up again every time they start the applicat
ion.
... notes insert your button by default only once, at first run, or when an extens
ion update adds a new button.
...And 5 more matches
Custom about: URLs - Archive of obsolete content
this page describes how to register a new about: url for your extens
ion.
... this example can be easily modified, just modify the global const at in the // globals sect
ion.
...services.
io.newchannel was deprecated, and the signature of the newchannel method changed.
...And 5 more matches
Migrating raw components to add-ons - Archive of obsolete content
historically, firefox has allowed third party contribut
ions to be added to the applicat
ion's components/ directory, but beginning with firefox 3.6, this is no longer permitted.
...what's worse, though, is that these components don't have a mechanism for specifying the vers
ions of firefox with which they are compatible, leading to poor integrat
ion and instability as users upgrade their firefox installat
ions.
... the firefox extens
ion mechanism allows you to do everything that you could do through direct component drops, but also gives you and your users extra flexibility and more sophisticated vers
ioning support.
...And 5 more matches
Chromeless - Archive of obsolete content
the aim is to enable developers to create full blown desktop applicat
ions using only web technologies.
... chromeless apps have access to a collect
ion of javascript apis that provide them with deep desktop integrat
ion.
... one of the core capabilities of the chromeless platform is the ability to safely embed untrusted web applicat
ions inside these applicat
ions.
...And 5 more matches
Error Console - Archive of obsolete content
the error console is a tool available in most mozilla-based applicat
ions that is used for reporting errors in the applicat
ion chrome and in web pages user opens.
... for informat
ion about what javascript except
ions get logged into the error console, and how to make all except
ions get logged, read the article except
ion logging in javascript.
... see setting up extens
ion development environment#development preferences for the preferences you should set if you want to see errors from firefox and extens
ions in the error console.
...And 5 more matches
Simple Storage - Archive of obsolete content
to manipulate its persistent data, a jetpack therefore need only use the var
ious standard javascript funct
ions and operators.
... the jetpack.simple.storage object is automatically and per
iodically flushed to disk.
... how and when it is flushed is an implementat
ion detail.
...And 5 more matches
Simple Storage - Archive of obsolete content
to manipulate its persistent data, a jetpack therefore need only use the var
ious standard javascript funct
ions and operators.
... the jetpack.simple.storage object is automatically and per
iodically flushed to disk.
... how and when it is flushed is an implementat
ion detail.
...And 5 more matches
Example 5 - Learn web development
change states html content <form class="no-widget"> <select name="myfruit"> <opt
ion>cherry</opt
ion> <opt
ion>lemon</opt
ion> <opt
ion>banana</opt
ion> <opt
ion>strawberry</opt
ion> <opt
ion>apple</opt
ion> </select> <div class="select" role="listbox"> <span class="value">cherry</span> <ul class="optlist hidden" role="presentat
ion"> <li class="opt
ion" role="opt
ion" aria-selected="true">cherry</li> <li class="opt
ion" role="opt
ion">lemon</li> <li class="opt
ion" role="opt
ion">banana</li> <li class="opt
ion" role="opt
ion">strawberry</li> <li class="opt
ion" role="opt
ion">apple</li> </ul> </div> </form> css content .widget select, .no-widget .select { ...
...posit
ion : absolute; left : -5000em; height : 0; overflow : hidden; } /* --------------- */ /* required styles */ /* --------------- */ .select { posit
ion: relative; display : inline-block; } .select.active, .select:focus { box-shadow: 0 0 3px 1px #227755; outline: none; } .select .optlist { posit
ion: absolute; top : 100%; left : 0; } .select .optlist.hidden { max-height: 0; visibility: hidden; } /* ------------ */ /* fancy styles */ /* ------------ */ .select { font-size : 0.625em; /* 10px */ font-family : verdana, arial, sans-serif; -moz-box-sizing : border-box; box-sizing : border-box; padding : 0.1em 2.5em 0.2em 0.5em; /* 1px 25px 2px 5px */ width : 10em; /* 100px */ border : 0.2em solid #000; /* 2px */ border-radi...
...; /* 0 1px 2px */ background : #f0f0f0; background : -webkit-linear-gradient(90deg, #e3e3e3, #fcfcfc 50%, #f0f0f0); background : linear-gradient(0deg, #e3e3e3, #fcfcfc 50%, #f0f0f0); } .select .value { display : inline-block; width : 100%; overflow : hidden; white-space : nowrap; text-overflow : ellipsis; vertical-align: top; } .select:after { content : "▼"; posit
ion: absolute; z-index : 1; height : 100%; width : 2em; /* 20px */ top : 0; right : 0; padding-top : .1em; -moz-box-sizing : border-box; box-sizing : border-box; text-align : center; border-left : .2em solid #000; border-radius: 0 .1em .1em 0; background-color : #000; color : #fff; } .select .optlist { z-index : 2; list-style: none; margin : 0; padd...
...And 5 more matches
Test your skills: Basic controls - Learn web development
note: you can try out solut
ions in the interactive editors below, however it may be helpful to download the code and use an online tool such as codepen, jsfiddle, or glitch to work on the tasks.
... if you get stuck, then ask us for help — see the assessment or further help sect
ion at the bottom of this page.
... basic controls 2 the next task requires you to create working sets of checkboxes and rad
io buttons, from the provided text labels.
...And 5 more matches
What will your website look like? - Learn web development
prev
ious overview: getting started with the web next what will your website look like?
... discusses the planning and design work you have to do for your website before writing code, including "what informat
ion does my website offer?", "what fonts and colors do i want?", and "what does my site do?" first things first: planning before doing anything, you need some ideas.
... to begin, you'll need to answer these quest
ions: what is your website about?
...And 5 more matches
Add a hitmap on top of an image - Learn web development
objective: learn how to make different reg
ions of one image link to different pages.
...an image map, on the other hand, contains several active reg
ions (called "hotspots") that each link to a different resource.
... formerly, image maps were a popular navigat
ion device, but it’s important to thoroughly consider their performance and accessibility ramificat
ions.
...And 5 more matches
Asynchronous JavaScript - Learn web development
in this module we take a look at asynchronous javascript, why it is important, and how it can be used to effectively handle potential blocking operat
ions such as fetching resources from a server.
... we have put together a course that includes all the essential informat
ion you need to work towards your goal.
... cooperative asynchronous javascript: timeouts and intervals here we look at the tradit
ional methods javascript has available for running code asychronously after a set time per
iod has elapsed, or at a regular interval (e.g.
...And 5 more matches
Test your skills: Arrays - Learn web development
note: you can try out solut
ions in the interactive editors below, however it may be helpful to download the code and use an online tool such as codepen, jsfiddle, or glitch to work on the tasks.
... if you get stuck, then ask us for help — see the assessment or further help sect
ion at the bottom of this page.
... note: in the examples below, if there is an error in your code it will be outputted into the results panel on the page, to help you try to figure out the answer (or into the browser's javascript console, in the case of the downloadable vers
ion).
...And 5 more matches
Introducing JavaScript objects - Learn web development
you can even create your own objects to encapsulate related funct
ions and variables into efficient packages and act as handy data containers.
... we have put together a course that includes all the essential informat
ion you need to work towards your goal.
...you are advised to work through the introduct
ion to html and introduct
ion to css modules before starting on javascript.
...And 5 more matches
Cookies Preferences in Mozilla
these preferences apply to most mozilla products (including firefox and seamonkey), however they are applicat
ion-specific, so not all of them may apply to you.
... network.cookie.cookiebehav
ior default value: 0 0 = accept all cookies by default 1 = only accept from the originating site (block third party cookies) 2 = block all cookies by default 3 = use p3p settings (note: this is only applicable to older mozilla suite and seamonkey vers
ions.) 4 = storage access policy: block cookies from trackers network.cookie.lifetimepolicy default value: 0 0 = accept cookies normally 1 = prompt for each cookie (prompting was removed in firefox 44) 2 = accept for current sess
ion only 3 = accept for n days network.cookie.lifetime.days default value: 90 only used if network.cookie.lifetimepolicy is set to 3 sets the number of days that the lifetime of cookies should be limited to.
... network.cookie.alwaysacceptsess
ioncookies default value: false only used if network.cookie.lifetimepolicy is set to 1 true = accepts sess
ion cookies without prompting false = prompts for sess
ion cookies network.cookie.thirdparty.sess
iononly default value: false true = restrict third party cookies to the sess
ion only false = no restrict
ions on third party cookies network.cookie.maxnumber default value: 1000 configures the maximum amount of cookies to be stored valid range is from 0-65535, rfc 2109 and 2965 require this to be at least 300 network.cookie.maxperhost default value: 50 configures the maximum amount of cookies to be stored per host valid range is from 0-65535, rfc 2109 and 2965 require this to be at least 20 network.cookie.disablecookieformailnews default value:...
...And 5 more matches
mozbrowsermetachange
do not use it on product
ion sites facing the web: it will not work for every user.
... there may also be large incompatibilities between implementat
ions and the behav
ior may change in the future.
... the mozbrowsermetachange event is fired when a <meta> element related to web applicat
ions is added, removed or changed.
...And 5 more matches
Extras
mathml extras this is a technology demonstrat
ion of some of the extras in mozilla but not defined in the mathml spec, and not prevented by the spec either.
...other renderers are expected to ignore attributes that they don't understand while the behav
ior of undefined elements is well, undefined.
... the title attribute as a tooltip (from xhtml) html content <p>mouse over either log to see a tooltip showing the title <math display="block"> <mrow> <mrow> <msub title="base-a log"> <mi>log</mi> <mi>a</mi> </msub> <mo>&applyfunct
ion;</mo> <mi>x</mi> </mrow> <mo>=</mo> <mfrac> <mrow> <mi title="natural log">ln</mi> <mo>&applyfunct
ion;</mo> <mi>x</mi> </mrow> <mrow> <mi title="natural log">ln</mi> <mo>&applyfunct
ion;</mo> <mi>a</mi> </mrow> </mfrac> </mrow> </math> rather than repeating the instruct
ions, some css might be used to provide a visual cue.
...And 5 more matches
MathML Torture Test
mathml torture test html content <p> render mathematics with: <select name="mathfont" id="mathfont"> <opt
ion value="default" selected="selected">default fonts</opt
ion> <opt
ion value="asana">asana</opt
ion> <opt
ion value="cambria">cambria</opt
ion> <opt
ion value="dejavu">dejavu</opt
ion> <opt
ion value="latinmodern">latin modern</opt
ion> <opt
ion value="libertinus">libertinus</opt
ion> <opt
ion value="lucidabright">lucida bright</opt
ion> <opt
ion value="min
ion">min
ion</opt
ion> <opt
ion value="stixtwo">stix two</opt
ion> <opt
ion value="texgyrebonum">tex gyre bonum</opt
ion> <opt
ion value="texgyrepagella">tex gyre pagella</opt
ion> <opt
ion value="texgyreschola">tex gyre schola</opt
ion> <opt
ion value="texgyretermes">tex gyre termes</opt
ion> ...
... <opt
ion value="xits">xits</opt
ion> </select> <br/> </p> <table> <tr> <td></td> <th scope="col">as rendered by tex</th> <th scope="col">as rendered by your browser</th></tr> <tr> <td>1</td> <td><img src="https://udn.realityripple.com/samples/45/d5a0dbbca3.png" width="38" height="22" alt="texbook, 16.2-16.3" /></td> <td> <math display="block"> <mrow> <msup> <mi>x</mi> <mn>2</mn> </msup> <msup> <mi>y</mi> <mn>2</mn> </msup> </mrow> </math> </td></tr> <tr> <td>2</td> <td><img src="https://udn.realityripple.com/samples/b8/da4a50ea34.png" width="30" height="17" alt="texbook, 16.2-16.3" /></td> <td> <math display="...
...ples/cd/423a74980c.png" width="24" height="22" alt="texbook, 16.4-16.5" /></td> <td> <math display="block"> <msubsup> <mi>y</mi> <mn>3</mn> <mo>‴</mo> </msubsup> </math> </td></tr> <tr> <td>29</td> <td><img src="https://udn.realityripple.com/samples/ac/635fb943ee.png" width="194" height="58" alt="stirling's approximat
ion" /></td> <td><math display="block" xmlns="http://www.w3.org/1998/math/mathml"><mrow><munder><mo lspace="0em" rspace="0em">lim</mo><mrow><mi>n</mi><mo stretchy="false">→</mo><mo>+</mo><mn>∞</mn></mrow></munder><mfrac><msqrt><mrow><mn>2</mn><mi>π</mi><mi>n</mi></mrow></msqrt><mrow><mi>n</mi><mo>!</mo></mrow></mfrac><msup><mrow><mo>(</mo><mfrac><mi>n</mi><mi>e</mi></mfrac><mo>)</mo></mrow>...
...And 5 more matches
Updates
this new vers
ion comes with several bug fixes and new features for mathml.
... october 21, 2010 mathml 3.0 is now a w3c recommendat
ion!
... june 11, 2010 stix fonts vers
ion 1.0 are now compatible with trunk.
...And 5 more matches
Mozilla MathML Project
the mozilla mathml project is mozilla's project to build and enhance mathml support within firefox and other mozilla-based applicat
ions.
... for a quick overview, see the slides for the innovat
ion fairs at mozilla summit 2013.
... links installing fonts for mozilla's mathml engine mathml vers
ion 3.0 - w3c recommendat
ion, 21 october 2010 w3c mathml test suite - designed to check the implementat
ion of each element one attribute (or built-in rendering behav
ior) at a time in a fairly thorough manner.
...And 5 more matches
Intel Power Gadget
intel power gadget provides real-time graphs of var
ious power-related measures and estimates, all taken from the intel rapl msrs.
... this article provides a basic introduct
ion.
... 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 occas
ionally useful.
...And 5 more matches
tools/power/rapl
tools/power/rapl (or rapl for short) is a command-line utility in the mozilla tree that per
iodically reads and prints all available intel rapl power estimates.
... these are machine-wide estimates, so if you want to estimate the power consumpt
ion of a single program you should minimize other activity on the machine while measuring.
... invocat
ion first, do a standard build of firefox.
...And 5 more matches
File drag and drop - Web APIs
html drag and drop interfaces enable web applicat
ions to drag and drop files on a web page.
... this document describes how an applicat
ion can accept one or more files that are dragged from the underlying platform's file manager and dropped on a web page.
...the following code snippet shows how this is done with a <div> element: <div id="drop_zone" ondrop="drophandler(event);"> <p>drag one or more files to this drop zone ...</p> </div> typically, an applicat
ion will include a dragover event handler on the drop target element and that handler will turn off the browser's default drag behav
ior.
...And 5 more matches
History.forward() - Web APIs
the history.forward() method causes the browser to move forward one page in the sess
ion history.
...add a listener for the popstate event in order to determine when the navigat
ion has completed.
... syntax history.forward() examples the following examples create a button that moves forward one step in the sess
ion history.
...And 5 more matches
History API - Web APIs
the dom window object provides access to the browser's sess
ion history (not to be confused for webextens
ions history) through the history object.
... 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 sess
ion history, identified by its relative posit
ion to the current page.
... (the current page's relative posit
ion 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.
...And 5 more matches
IDBCursor.primaryKey - Web APIs
example in this simple fragment we create a transact
ion, retrieve an object store, then use a cursor to iterate through all the records in the object store.
... within each iterat
ion we log the primary key of the cursor to the console, something like this (its the album title in each case, which is our primarykey): hemispheres the cursor does not require us to select the data based on a key; we can just grab all of it.
... also note that in each iterat
ion of the loop, you can grab data from the current record under the cursor object using cursor.value.foo.
...And 5 more matches
IDBCursorWithValue.value - Web APIs
example in this example we create a transact
ion, retrieve an object store, then use a cursor to iterate through all the records in the object store.
... within each iterat
ion we log the value of the cursor with cursor.value.
...also note that in each iterat
ion of the loop, you can grab data from the current record under the cursor object using cursor.value.foo.
...And 5 more matches
IDBDatabase.name - Web APIs
example this example shows a database connect
ion being opened, the resulting idbdatabase object being stored in a db variable, and the name property then being logged.
... for a full example, see our to-do notificat
ions app (view example live).
... // let us open our database var dbopenrequest = window.indexeddb.open("todolist", 4); // these two event handlers act on the database being // opened successfully, or not dbopenrequest.onerror = funct
ion(event) { note.innerhtml += '<li>error loading database.</li>'; }; dbopenrequest.onsuccess = funct
ion(event) { note.innerhtml += '<li>database initialised.</li>'; // store the result of opening the database in the db variable.
...And 5 more matches
IDBFactory.cmp() - Web APIs
the cmp() method of the idbfactory interface compares two values as keys to determine equality and ordering for indexeddb operat
ions, such as storing and iterating.
...this throws an except
ion if either of the values is not a valid key.
... return value an integer that indicates the result of the comparison; the table below lists the possible values and their meanings: returned value descript
ion -1 1st key is less than the 2nd key 0 1st key is equal to the 2nd key 1 1st key is greater than the 2nd key except
ions this method may raise a domexcept
ion of the following types: attribute descript
ion dataerror one of the supplied keys was not a valid key.
...And 5 more matches
IDBIndex.getAll() - Web APIs
syntax var getallkeysrequest = idbindex.getall(); var getallkeysrequest = idbindex.getall(query); var getallkeysrequest = idbindex.getall(query, count); parameters query opt
ional a key or an idbkeyrange identifying the records to retrieve.
... count opt
ional the number records to return.
...if it is lower than 0 or greater than 232-1 a typeerror except
ion will be thrown.
...And 5 more matches
IDBIndex.multiEntry - Web APIs
this method takes an opt
ional opt
ions parameter whose multientry property is set to true/false.
... example in the following example we open a transact
ion and an object store, then get the index lname from a simple contacts database.
...for a complete working example, see our idbindex-example demo repo (view the example live.) funct
ion displaydatabyindex() { tableentry.innerhtml = ''; var transact
ion = db.transact
ion(['contactslist'], 'readonly'); var objectstore = transact
ion.objectstore('contactslist'); var myindex = objectstore.index('lname'); console.log(myindex.multientry); myindex.opencursor().onsuccess = funct
ion(event) { var cursor = event.target.result; if(cursor) { var tablerow = document.
...And 5 more matches
IDBIndex.objectStore - Web APIs
example in the following example we open a transact
ion and an object store, then get the index lname from a simple contacts database.
... the current object store is logged to the console: it should be returned something like this: idbobjectstore { name: "contactslist", keypath: "id", indexnames: domstringlist[7], transact
ion: idbtransact
ion, autoincrement: false } finally, we iterate through each record, and insert the data into an html table.
... for a complete working example, see our idbindex-example demo repo (view the example live.) funct
ion displaydatabyindex() { tableentry.innerhtml = ''; var transact
ion = db.transact
ion(['contactslist'], 'readonly'); var objectstore = transact
ion.objectstore('contactslist'); var myindex = objectstore.index('lname'); console.log(myindex.objectstore); myindex.opencursor().onsuccess = funct
ion(event) { var cursor = event.target.result; if(cursor) { var tablerow = document.createelement('tr'); tablerow.innerhtml = '<td>' + cursor.value.id + '</td>' + '<td>' + cursor.value.lname + '</td>' + '<td>' + cursor.value.fname + '</td>' + '<td>' + cursor.value.jtitle + '</td>' ...
...And 5 more matches
IDBIndex.unique - Web APIs
this method takes an opt
ional parameter, unique, which if set to true means that the index will not be able to accept duplicate entries.
... example in the following example we open a transact
ion and an object store, then get the index lname from a simple contacts database.
...for a complete working example, see our idbindex-example demo repo (view the example live.) funct
ion displaydatabyindex() { tableentry.innerhtml = ''; var transact
ion = db.transact
ion(['contactslist'], 'readonly'); var objectstore = transact
ion.objectstore('contactslist'); var myindex = objectstore.index('lname'); console.log(myindex.unique); myindex.opencursor().onsuccess = funct
ion(event) { var cursor = event.target.result; if(cursor) { var tablerow = document.crea...
...And 5 more matches
IDBKeyRange.lowerOpen - Web APIs
syntax var loweropen = mykeyrange.loweropen value a boolean: value indicat
ion true the lower-bound value is not included in the key range.
...we open a transact
ion (using idbtransact
ion) and an object store, and open a cursor with idbobjectstore.opencursor, declaring keyrangevalue as its opt
ional key range value.
... note: for a more complete example allowing you to experiment with key range, have a look at our idbkeyrange-example repo (view the example live too.) funct
ion displaydata() { var keyrangevalue = idbkeyrange.bound("f", "w", true, true); console.log(keyrangevalue.loweropen); var transact
ion = db.transact
ion(['fthings'], 'readonly'); var objectstore = transact
ion.objectstore('fthings'); objectstore.opencursor(keyrangevalue).onsuccess = funct
ion(event) { var cursor = event.target.result; if(cursor) { var listitem = document.createelement('li'); listitem.innerhtml = '<strong>' + cur...
...And 5 more matches
IDBKeyRange.only() - Web APIs
except
ions this method may raise a domexcept
ion of the following types: except
ion descript
ion dataerror the value parameter passed was not a valid key.
...we open a transact
ion (using idbtransact
ion) and an object store, and open a cursor with idbobjectstore.opencursor, declaring keyrangevalue as its opt
ional key range value.
... note: for a more complete example allowing you to experiment with key range, have a look at our idbkeyrange repo (view the example live too.) funct
ion displaydata() { var keyrangevalue = idbkeyrange.only("a"); var transact
ion = db.transact
ion(['fthings'], 'readonly'); var objectstore = transact
ion.objectstore('fthings'); objectstore.opencursor(keyrangevalue).onsuccess = funct
ion(event) { var cursor = event.target.result; if(cursor) { var listitem = document.createelement('li'); listitem.innerhtml = '<strong>' + cursor.value.fthing + '</strong>, ' + cursor.value.frating; list.appendchild(listitem); cursor.continue(); } else { console.log('ent...
...And 5 more matches
IDBKeyRange.upperOpen - Web APIs
syntax var upperopen = mykeyrange.upperopen value a boolean: value indicat
ion true the upper-bound value is not included in the key range.
...we open a transact
ion (using idbtransact
ion) and an object store, and open a cursor with idbobjectstore.opencursor, declaring keyrangevalue as its opt
ional key range value.
... note: for a more complete example allowing you to experiment with key range, have a look at our idbkeyrange-example repo (view the example live too.) funct
ion displaydata() { var keyrangevalue = idbkeyrange.bound("f", "w", true, true); console.log(keyrangevalue.upperopen); var transact
ion = db.transact
ion(['fthings'], 'readonly'); var objectstore = transact
ion.objectstore('fthings'); objectstore.opencursor(keyrangevalue).onsuccess = funct
ion(event) { var cursor = event.target.result; if(cursor) { var listitem = document.createelement('li'); listitem.innerhtml = '<strong>' + cur...
...And 5 more matches
IDBObjectStore.autoIncrement - Web APIs
example in the following code snippet, we open a read/write transact
ion on our database and add some data to an object store using add().
...for a full working example, see our to-do notificat
ions app (view example live.) // let us open our database var dbopenrequest = window.indexeddb.open("todolist", 4); dbopenrequest.onsuccess = funct
ion(event) { note.innerhtml += '<li>database initialised.</li>'; // store the result of opening the database in the db variable.
... // this is used a lot below db = dbopenrequest.result; // run the adddata() funct
ion to add the data to the database adddata(); }; funct
ion adddata() { // create a new object ready to insert into the idb var newitem = [ { tasktitle: "walk dog", hours: 19, minutes: 30, day: 24, month: "december", year: 2013, notified: "no" } ]; // open a read/write db transact
ion, ready for adding the data var transact
ion = db.transact
ion(["todolist"], "readwrite"); // report on the success of the transact
ion completing, when everything is done transact
ion.oncomplete = funct
ion(event) { note.innerhtml += '<li>transact
ion completed.</li>'; }; transact
ion.onerror = funct
ion(event) { note.innerhtml += '<li>transact
ion not opened due to error.
...And 5 more matches
Request() - Web APIs
note the following behav
ioural updates to retain security while making the constructor less likely to throw except
ions: if this object exists on another origin to the constructor call, the request.referrer is stripped out.
... init opt
ional an opt
ions object containing any custom settings that you want to apply to the request.
... the possible opt
ions are: method: the request method, e.g., get, post.
...And 5 more matches
ResizeObserverEntry.borderBoxSize - Web APIs
the array is necessary to support elements that have multiple fragments, which occur in multi-column scenar
ios.
... each object in the array contains two properties: blocksize the length of the observed element's border box in the block dimens
ion.
... for boxes with a horizontal writing-mode, this is the vertical dimens
ion, or height; if the writing-mode is vertical, this is the horizontal dimens
ion, or width.
...And 5 more matches
SVGElement - Web APIs
<div id="interfacediagram" style="display: inline-block; posit
ion: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; posit
ion: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectrat
io="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111...
...this attribute is deprecated and may be removed in a future vers
ion of this specificat
ion.
... error fired when an svg element does not load properly or when an error occurs during script execut
ion.
...And 5 more matches
SVGFETurbulenceElement - Web APIs
<div id="interfacediagram" style="display: inline-block; posit
ion: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; posit
ion: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectrat
io="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1=...
...th="220" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="371" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgfeturbulenceelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} constants turbulence types name value descript
ion svg_turbulence_type_unknown 0 the type is not one of predefined types.
... stitch opt
ions name value descript
ion svg_stitchtype_unknown 0 the type is not one of predefined types.
...And 5 more matches
SVGGraphicsElement: cut event - Web APIs
the cut event is fired on an svggraphicselement when the user has initiated a "cut" act
ion through the browserʼs user interface.
... if the user attempts a cut act
ion on uneditable content, the cut event still fires but the event object contains no data.
... bubbles yes cancelable yes interface clipboardevent event handler property oncut the eventʼs default act
ion is to copy the current select
ion (if any) to the system clipboard and remove it from the document.
...And 5 more matches
SVGTextElement - Web APIs
<div id="interfacediagram" style="display: inline-block; posit
ion: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; posit
ion: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectrat
io="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-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...
..." stroke="#d4dde4" stroke-width="2px" /><text x="156" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgtextcontentelement</text></a><polyline points="51,89 41,84 41,94 51,89" stroke="#d4dde4" fill="none"/><line x1="41" y1="89" x2="11" y2="89" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgtextposit
ioningelement" target="_top"><rect x="-239" y="65" width="250" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="-114" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgtextposit
ioningelement</text></a><polyline points="-239,89 -249,84 -249,94 -239,89" stroke="#d4dde4" fill="none"/><...
...th="2px" /><text x="-349" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgtextelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface doesn't implement any specific properties, but inherits properties from its parent interface, svgtextposit
ioningelement.
...And 5 more matches
SVGTextPathElement - Web APIs
<div id="interfacediagram" style="display: inline-block; posit
ion: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; posit
ion: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectrat
io="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1...
..."65" width="180" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="-79" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgtextpathelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} constants method types name value descript
ion textpath_methodtype_unknown 0 the type is not one of predefined types.
... spacing types name value descript
ion textpath_spacingtype_unknown 0 the type is not one of predefined types.
...And 5 more matches
ScriptProcessorNode.bufferSize - Web APIs
note: as of the august 29 2014 web aud
io api spec publicat
ion, this feature has been marked as deprecated, and is soon to be replaced by aud
io workers.
... syntax var aud
ioctx = new aud
iocontext(); var scriptnode = aud
ioctx.createscriptprocessor(4096, 1, 1); console.log(scriptnode.buffersize); value an integer.
... example the following example shows basic usage of a scriptprocessornode to take a track loaded via aud
iocontext.decodeaud
iodata(), process it, adding a bit of white noise to each aud
io sample of the input track (buffer) and play it through the aud
iodestinat
ionnode.
...And 5 more matches
ServiceWorker - Web APIs
a serviceworker object is available in the serviceworkerregistrat
ion.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 funct
ional events including fetch.
... serviceworker.scripturl read only returns the serviceworker serialized script url defined as part of serviceworkerregistrat
ion.
... methods the serviceworker interface inherits methods from its parent, worker, with the except
ion of worker.terminate — this should not be accessible from service workers.
...And 5 more matches
SharedWorkerGlobalScope.onconnect - Web APIs
the onconnect property of the sharedworkerglobalscope interface is an event handler representing the code to be called when the connect event is raised — that is, when a messageport connect
ion is opened between the associated sharedworker and the main thread.
... syntax onconnect = funct
ion() { ...
... }; examples this example shows a shared worker file — when a connect
ion to the worker occurs from a main thread via a messageport, the onconnect event handler fires.
...And 5 more matches
StylePropertyMap - Web APIs
the stylepropertymap interface of the the css typed object model api provides a representat
ion of a css declarat
ion block that is an alternative to cssstyledeclarat
ion.
... <div id="interfacediagram" style="display: inline-block; posit
ion: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; posit
ion: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectrat
io="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">stylepropertymap</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties inherits properties from its parent, stylepropertymapreadonly.
... stylepropertymap.append() adds a new css declarat
ion to the stylepropertymap with the given property and value.
...And 5 more matches
SubtleCrypto.generateKey() - Web APIs
syntax const result = crypto.subtle.generatekey(algorithm, extractable, keyusages); parameters algorithm is a dict
ionary object defining the type of key to generate and providing extra algorithm-specific parameters.
... except
ions the promise is rejected when the following except
ion is encountered: syntaxerror raised when the result is a cryptokey of type secret or private but keyusages is empty.
... rsa key pair generat
ion this code generates an rsa-oaep encrypt
ion key pair.
...And 5 more matches
Text - Web APIs
however, if the element contains markup, it is parsed into informat
ion items and text nodes that form its children.
... <div id="interfacediagram" style="display: inline-block; posit
ion: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; posit
ion: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectrat
io="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e...
... specificat
ions specificat
ion status comment domthe definit
ion of 'text' in that specificat
ion.
...And 5 more matches
TextDecoder() - Web APIs
if the value for utflabel is unknown, or is one of the two values leading to a 'replacement' decoding algorithm ( "iso-2022-cn" or "iso-2022-cn-ext"), a domexcept
ion with the "typeerror" value is thrown.
... syntax decoder = new textdecoder(utflabel, opt
ions); parameters utflabelopt
ional is a domstring, defaulting to "utf-8", containing the label of the encoder.
... 'gb18030' "hz-gb-2312" 'hz-gb-2312' "big5", "big5-hkscs", "cn-big5", "csbig5", "x-x-big5" 'big5' "cseucpkdfmtjapanese", "euc-jp", "x-euc-jp" 'euc-jp' "csiso2022jp", "iso-2022-jp" note: firefox used to accept iso-2022-jp-2 sequences silently when an iso-2022-jp decoder was instantiated, however this was removed in vers
ion 56 to simplify the api, as no other browsers support it and no pages seem to use it.
...And 5 more matches
TouchEvent() - Web APIs
toucheventinit opt
ional is a toucheventinit dict
ionary, having the following fields: "touches", opt
ional and defaulting to [], of type touch[], that is a list of objects for every point of contact currently touching the surface.
... "targettouches", opt
ional and defaulting to [], of type touch[], that is a list of objects for every point of contact that is touching the surface and started on the element that is the target of the current event.
... "changedtouches", opt
ional and defaulting to [], of type touch[], that is a list of objects for every point of contact which contributed to the event.
...And 5 more matches
ARIA: rowgroup role - Accessibility
<div role="table" aria-label="populat
ions" aria-describedby="country_populat
ion_desc"> <div id="country_populat
ion_desc">world populat
ions by country</div> <div role="rowgroup"> <div role="row"> <span role="columnheader" aria-sort="descending">country</span> <span role="columnheader"aria-sort="none">populat
ion</span> </div> </div> <div role="rowgroup"> <div role="row"> <span role="cell">finland</span> <span role="cell">5.5 mill
ion</span> </div> <div role="row"> <span role="cell">france</span> <span...
... role="cell">67 mill
ion</span> </div> </div> </div> descript
ion rowgroup establishes a relat
ionship between owned row elements and is a structural equivalent to the thead, tfoot and tbody elements in html.
... there is, however, no differentiat
ion between different types of rowgroups.
...And 5 more matches
Accessibility
"the web is fundamentally designed to work for all people, whatever their hardware, software, language, culture, locat
ion, or physical or mental ability.
... wai-aria basics following on from the prev
ious article, sometimes making complex ui controls that involve unsemantic html and dynamic javascript-updated content can be difficult.
... accessible multimedia another category of content that can create accessibility problems is multimedia — video, aud
io, and image content need to be given proper textual alternatives so they can be understood by assistive technologies and their users.
...And 5 more matches
::slotted() - CSS: Cascading Style Sheets
the ::slotted() css pseudo-element represents any element that has been placed into a slot inside an html template (see using templates and slots for more informat
ion).
...'*'<subclass-selector> = <id-selector> | <class-selector> | <attribute-selector> | <pseudo-class-selector><pseudo-element-selector> = ':' <pseudo-class-selector><pseudo-class-selector> = ':' <ident-token> | ':' <funct
ion-token> <any-value> ')'where <wq-name> = <ns-prefix>?
... in this demo we use a simple template with three slots: <template id="person-template"> <div> <h2>personal id card</h2> <slot name="person-name">name missing</slot> <ul> <li><slot name="person-age">age missing</slot></li> <li><slot name="person-occupat
ion">occupat
ion missing</slot></li> </ul> </div> </template> a custom element — <person-details> — is defined like so: customelements.define('person-details', class extends htmlelement { constructor() { super(); let template = document.getelementbyid('person-template'); let templatecontent = template.content; const shadowroot = this.attachshadow({mode: 'ope...
...And 5 more matches
:default - CSS: Cascading Style Sheets
what this selector matches is defined in html standard §4.16.3 pseudo-classes — it may match the <button>, <input type="checkbox">, <input type="rad
io">, and <opt
ion> elements: a default opt
ion element is the first one with the selected attribute, or the first enabled opt
ion in dom order.
... multiple <select>s can have more than one selected opt
ion, so all will match :default.
... <input type="checkbox"> and <input type="rad
io"> match if they have the checked attribute.
...And 5 more matches
:disabled - CSS: Cascading Style Sheets
html <form act
ion="#"> <fieldset id="shipping"> <legend>shipping address</legend> <input type="text" placeholder="name"> <input type="text" placeholder="address"> <input type="text" placeholder="zip code"> </fieldset> <br> <fieldset id="billing"> <legend>billing address</legend> <label for="billing-checkbox">same as shipping address:</label> <input type="checkbox" id="billing-c...
...heckbox" checked> <br> <input type="text" placeholder="name" disabled> <input type="text" placeholder="address" disabled> <input type="text" placeholder="zip code" disabled> </fieldset> </form> css input[type="text"]:disabled { background: #ccc; } javascript // wait for the page to finish loading document.addeventlistener('domcontentloaded', funct
ion () { // attach `change` event listener to checkbox document.getelementbyid('billing-checkbox').onchange = togglebilling; }, false); funct
ion togglebilling() { // select the billing text fields var billingitems = document.queryselectorall('#billing input[type="text"]'); // toggle the billing text fields for (var i = 0; i < billingitems.length; i++) { billingitems[i].disabled = !billingitems[i].disabled;...
... } } result specificat
ions specificat
ion status comment html living standardthe definit
ion of ':disabled' in that specificat
ion.
...And 5 more matches
: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 addit
ional indicator that does not rely on color to convey meaning.
... mdn understanding wcag, guideline 1.4 explanat
ions understanding success criter
ion 1.4.1 | w3c understanding wcag 2.0 notes rad
io buttons if any one of the rad
io buttons in a group is required, the :invalid pseudo-class is applied to all of them if none of the buttons in the group is selected.
... (grouped rad
io buttons share the same value for their name attribute.) gecko defaults by default, gecko does not apply a style to the :invalid pseudo-class.
...And 5 more matches
:nth-child() - CSS: Cascading Style Sheets
the :nth-child() css pseudo-class matches elements based on their posit
ion in a group of siblings.
... keyword values odd represents elements whose numeric posit
ion in a series of siblings is odd: 1, 3, 5, etc.
... even represents elements whose numeric posit
ion in a series of siblings is even: 2, 4, 6, etc.
...And 5 more matches
:nth-last-child() - CSS: Cascading Style Sheets
the :nth-last-child() css pseudo-class matches elements based on their posit
ion among a group of siblings, counting from the end.
... keyword values odd represents elements whose numeric posit
ion in a series of siblings is odd: 1, 3, 5, etc., counting from the end.
... even represents elements whose numeric posit
ion in a series of siblings is even: 2, 4, 6, etc., counting from the end.
...And 5 more matches
:read-only - CSS: Cascading Style Sheets
input:read-only, textarea:read-only { background-color: #ccc; } p:read-only { background-color: #ccc; } syntax :read-only examples confirming form informat
ion in read-only/read-write controls one use of readonly form controls is to allow the user to check and verify informat
ion that they may have entered in an earlier form (for example, shipping details), while still being able to submit the informat
ion along with the rest of the form.
... input:-moz-read-only, textarea:-moz-read-only, input:read-only, textarea:read-only { border: 0; box-shadow: none; background-color: white; } textarea:-moz-read-write, textarea:read-write { box-shadow: inset 1px 1px 3px #ccc; border-radius: 5px; } you can find the full source code at readonly-confirmat
ion.html; this renders like so: styling read-only non-form controls this selector doesn't just select <input>/<textarea> elements — it will select any element that cannot be edited by the user.
... <p contenteditable>this paragraph is editable; it is read-write.</p> <p>this paragraph is not editable; it is read-only.</p> p { font-size: 150%; padding: 5px; border-radius: 5px; } p:read-only { background-color: red; color: white; } p:read-write { background-color: lime; } specificat
ions specificat
ion status comment html living standardthe definit
ion of ':read-only' in that specificat
ion.
...And 5 more matches
:read-write - CSS: Cascading Style Sheets
input:read-write, textarea:read-write { background-color: #bbf; } p:read-write { background-color: #bbf; } syntax :read-write examples confirming form informat
ion in read-only/read-write controls one use of readonly form controls is to allow the user to check and verify informat
ion that they may have entered in an earlier form (for example, shipping details), while still being able to submit the informat
ion along with the rest of the form.
... input:-moz-read-only, textarea:-moz-read-only, input:read-only, textarea:read-only { border: 0; box-shadow: none; background-color: white; } textarea:-moz-read-write, textarea:read-write { box-shadow: inset 1px 1px 3px #ccc; border-radius: 5px; } you can find the full source code at readonly-confirmat
ion.html; this renders like so: styling read-write non-form controls this selector doesn't just select <input>/<textarea> elements — it will select any element that can be edited by the user, such as a <p> element with contenteditable set on it.
... <p contenteditable>this paragraph is editable; it is read-write.</p> <p>this paragraph is not editable; it is read-only.</p> p { font-size: 150%; padding: 5px; border-radius: 5px; } p:read-only { background-color: red; color: white; } p:read-write { background-color: lime; } specificat
ions specificat
ion status comment html living standardthe definit
ion of ':read-write' in that specificat
ion.
...And 5 more matches
:target - CSS: Cascading Style Sheets
/* selects an element with an id matching the current url's fragment */ :target { border: 2px solid black; } for example, the following url has a fragment (denoted by the # sign) that points to an element called sect
ion2: http://www.example.com/index.html#sect
ion2 the following element would be selected by a :target selector when the current url is equal to the above: <sect
ion id="sect
ion2">example</sect
ion> syntax :target examples a table of contents the :target pseudo-class can be used to highlight the port
ion of a page that has been linked to from a table of contents.
... html <ul> <li><a href="#example1">open example #1</a></li> <li><a href="#example2">open example #2</a></li> </ul> <div class="lightbox" id="example1"> <figure> <a href="#" class="close"></a> <figcapt
ion>lorem ipsum dolor sit amet, consectetur adipiscing elit.
... donec felis enim, placerat id eleifend eu, semper vel sem.</figcapt
ion> </figure> </div> <div class="lightbox" id="example2"> <figure> <a href="#" class="close"></a> <figcapt
ion>cras risus od
io, pharetra nec ultricies et, mollis ac augue.
...And 5 more matches
:valid - CSS: Cascading Style Sheets
g valid 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 { posit
ion: relative; } input + span::before { posit
ion: 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 posit
ion: relative so that we can posit
ion the generated content relative to them.
... we then absolutely posit
ion different generated content depending on whether the form's data is valid or invalid — a green check or a red cross, respectively.
...people who have certain types of color blindness will be unable to determine the input's state unless it is accompanied by an addit
ional indicator that does not rely on color to convey meaning.
...And 5 more matches
-ms-high-contrast - CSS: Cascading Style Sheets
the -ms-high-contrast css media feature is a microsoft extens
ion that describes whether the applicat
ion is being displayed in high contrast mode, and with what color variat
ion.
... high contrast mode is a specialized display mode that pr
ioritizes making content as legible as possible by dynamically replacing foreground and background colors with a user-specified theme.
... active indicates that the subsequent styling rules will be applied when the system is placed in high contrast mode with any color variat
ion.
...And 5 more matches
CSS Display - CSS: Cascading Style Sheets
splay-inside> <display-listitem> <display-box> <display-internal> <display-legacy> guides css flow layout (display: block, display: inline) block and inline layout in normal flow flow layout and overflow flow layout and writing modes formatting contexts explained in flow and out of flow display: flex basic concepts of flexbox aligning items in a flex container controlling rat
ios of flex items along the main axis cross-browser flexbox mixins mastering wrapping of flex items ordering flex items relat
ionship of flexbox to other layout methods backwards compatibility of flexbox typical use cases of flexbox display: grid basic concepts of grid layout relat
ionship to other layout methods line-based placement grid template areas layout using named grid lines au...
...to-placement in grid layout box alignment in grid layout grids, logical values and writing modes css grid layout and accessibility css grid layout and progressive enhancement realizing common layouts using grids specificat
ions specificat
ion status comment css display module level 3the definit
ion of 'display' in that specificat
ion.
... candidate recommendat
ion added run-in, flow, flow-root, contents and multi-keyword values.
...And 5 more matches
Stacking context example 3 - CSS: Cascading Style Sheets
« css « understanding css z-index stacking context example 3 this last example shows problems that arise when mixing several posit
ioned elements in a multi-level html hierarchy and when z-indexes are assigned using class selectors.
... let's take as an example a three-level hierarchical menu made from several posit
ioned divs.
... the first-level menu is only relatively posit
ioned, so no stacking context is created.
...And 5 more matches
keyPoints - SVG: Scalable Vector Graphics
the keypoints attribute indicates the simple durat
ion of an animat
ion.
... five elements are using this attribute: <animate>, <animatecolor>, <animatemot
ion>, <animatetransform>, and <set> html, body, svg { height: 100%; } <svg viewbox="0 0 120 120" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <path d="m10,110 a120,120 -45 0,1 110 10 a120,120 -45 0,1 10,110" stroke="lightgrey" stroke-width="2" fill="none" id="mot
ionpath"/> <circle cx="10" cy="110" r="3" fill="lightgrey"/> <circle cx="110" cy="10" r="3" fill="lightgrey"/> <circle r="5" fill="red"> <animatemot
ion dur="3s" repeatcount="indefinite" keypoints="0;0.5;1" keytimes="0;0.15;1" calcmode="linear"> <mpath xlink:href="#mot
ionpath"/> </animatemot
ion> </circle> </svg> usage notes value <number> [; <number>]* ;?
... this value defines a semicolon-separated list of floating point values between 0 and 1 and indicates how far along the mot
ion path the object shall move at the moment in time specified by corresponding keytimes value.
...And 5 more matches
keySplines - SVG: Scalable Vector Graphics
the keysplines attribute defines a set of bézier curve control points associated with the keytimes list, defining a cubic bézier funct
ion that controls interval pacing.
... if there are any errors in the keysplines specificat
ion (bad values, too many or too few values), the animat
ion will not occur.
... four elements are using this attribute: <animate>, <animatecolor>, <animatemot
ion>, and <animatetransform> html, body, svg { height: 100%; } <svg viewbox="0 0 120 120" xmlns="http://www.w3.org/2000/svg"> <circle cx="60" cy="10" r="10"> <animate attributename="cx" dur="4s" calcmode="spline" repeatcount="indefinite" values="60 ; 110 ; 60 ; 10 ; 60" keytimes="0 ; 0.25 ; 0.5 ; 0.75 ; 1" keysplines="0.5 0 0.5 1 ; 0.5 0 0.5 1 ; 0.5 0 0.5 1 ; 0.5 0 0.5 1"/> <animate attributename="cy" dur="4s" calcmode="spline" repeatcount="indefinite" values="10 ; 60 ; 110 ; 60 ; 10" keytimes="0 ; 0.25 ; 0.5 ; 0.75 ; 1" keysplines="0.5 0 0.5 1 ; 0.5 0 0.5 1 ; 0.5 0 0.5 1 ; 0.5 0 0.5 1"/> </circle> </svg> usage notes value <control-point> [ ; <co...
...And 5 more matches
mask - SVG: Scalable Vector Graphics
the mask attribute is a presentat
ion attribute mainly used to bind a given <mask> element with the element the attribute belongs to.
... note: as a presentat
ion attribute mask can be used as a css property.
...<!-- punch a hole in a shape of a star inside the red circle, revealing the yellow circle underneath --> <circle cx="50" cy="50" r="20" fill="yellow" /> <circle cx="50" cy="50" r="45" fill="red" mask="url(#mymask)"/> </svg> since svg2, the mask attribute is defined as a css property and is a shorthand for many other properties: mask-image, mask-mode, mask-repeat, mask-posit
ion, mask-clip, mask-origin, mask-size, and mask-composite.
...And 5 more matches
repeatCount - SVG: Scalable Vector Graphics
the repeatcount attribute indicates the number of times an animat
ion will take place.
... five elements are using this attribute: <animate>, <animatecolor>, <animatemot
ion>, <animatetransform>, and <set> html, body, svg { height: 100%; } <svg viewbox="0 0 220 150" xmlns="http://www.w3.org/2000/svg"> <rect x="0" y="0" width="100" height="100"> <animate attributetype="xml" attributename="y" from="0" to="50" dur="1s" repeatcount="5"/> </rect> <rect x="120" y="0" width="100" height="100"> <animate attributetype="xml" attributename="y" from="0" to="50" dur="1s" repeatcount="indefinite"/> </rect> </svg> usage notes value <number> | indefinite default value none animatable no <number> this value specifies the number of iterat
ions.
... it can include partial iterat
ions expressed as fract
ion values.
...And 5 more matches
stop-opacity - SVG: Scalable Vector Graphics
the opacity value used for the gradient calculat
ion is the product of the value of stop-opacity and the opacity of the value of the stop-color attribute.
... for stop-color values that donʼt include explicit opacity informat
ion, the opacity is treated as 1.
... note: as a presentat
ion attribute, stop-opacity can be used as a css property.
...And 5 more matches
stroke-dasharray - SVG: Scalable Vector Graphics
the stroke-dasharray attribute is a presentat
ion attribute defining the pattern of dashes and gaps used to paint the outline of the shape; note: as a presentat
ion attribute, stroke-dasharray can be used as a css property.
... as a presentat
ion attribute, it can be applied to any element, but it only has effect on the following twelve elements: <altglyph> <circle> <ellipse> <path> <line> <polygon> <polyline> <rect> <text> <textpath> <tref> <tspan> html,body,svg { height:100% } <svg viewbox="0 0 30 10" xmlns="http://www.w3.org/2000/svg"> <!-- no dashes nor gaps --> <line x1="0" y1="1" x2="30" y2="1" stroke="black" /> <!-- dashes and gaps of the same size --> <line x1="0" y1="3" x2="30" y2="3" stroke="black" stroke-dasharray="4" /> <!-- dashes and gaps of different sizes --> <line x1="0" y1="5" x2="30" y2="5" stroke="black" stroke-dasharray="4 1" /> <!-- dashes and gaps of var
ious sizes with an odd number of values --> <line x1="0" y1="7" x2="30" y...
...2="7" stroke="black" stroke-dasharray="4 1 2" /> <!-- dashes and gaps of var
ious sizes with an even number of values --> <line x1="0" y1="9" x2="30" y2="9" stroke="black" stroke-dasharray="4 1 2 3" /> </svg> usage notes value none | <dasharray> default value none animatable yes <dasharray> a list of comma and/or white space separated <length>s and <percentage>s that specify the lengths of alternating dashes and gaps.
...And 5 more matches
stroke-opacity - SVG: Scalable Vector Graphics
the stroke-opacity attribute is a presentat
ion attribute defining the opacity of the paint server (color, gradient, pattern, etc) applied to the stroke of a shape.
... note: as a presentat
ion attribute stroke-opacity can be used as a css property.
... as a presentat
ion attribute, it can be applied to any element but it has effect only on the following twelve elements: <altglyph>, <circle>, <ellipse>, <path>, <line>, <polygon>, <polyline>, <rect>, <text>, <textpath>, <tref>, and <tspan> html,body,svg { height:100% } <svg viewbox="0 0 40 10" xmlns="http://www.w3.org/2000/svg"> <!-- default stroke opacity: 1 --> <circle cx="5" cy="5" r="4" stroke="green" /> <!-- stroke opacity as a number --> <circle cx="15" cy="5" r="4" stroke="green" stroke-opacity="0.7" /> <!-- stroke opacity as a percentage --> <circle cx="25" cy="5" r="4" stroke="green" stroke-opacity="50%" /> <!-- stroke opacity as a css property --> <circle cx="35" cy="5" r="4" stroke="green" style="stroke-opacity: .3;" /> </svg>...
...And 5 more matches
systemLanguage - SVG: Scalable Vector Graphics
35 elements are using this attribute: <a>, <altglyph>, <animate>, <animatecolor>, <animatemot
ion>, <animatetransform>, <aud
io>, <canvas>, <circle>, <clippath>, <cursor>, <defs>, <discard>, <ellipse>, <foreignobject>, <g>, <iframe>, <image>, <line>, <mask>, <path>, <pattern>, <polygon>, <polyline>, <rect>, <set>, <svg>, <switch>, <text>, <textpath>, <tref>, <tspan>, <unknown>, <use>, and <video> usage notes value <language-tags> default value none animatable no <language-tags> the value is a set of comma-separated tokens, each of which must be a language-tag value, as defined in bcp 47.
... systemlanguage is often used in conjunct
ion with the <switch> element.
... if the attribute is used in other situat
ions, then it represents a simple switch on the given element whether to render the element or not.
...And 5 more matches
to - SVG: Scalable Vector Graphics
the to attribute indicates the final value of the attribute that will be modified during the animat
ion.
... five elements are using this attribute: <animate>, <animatecolor>, <animatemot
ion>, <animatetransform>, and <set> html, body, svg { height: 100%; } <svg viewbox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"> <rect x="10" y="10" width="100" height="100"> <animate attributetype="xml" attributename="width" fill="freeze" from="100" to="150" dur="3s"/> </rect> </svg> animate, animatecolor, animatemot
ion, animatetransform for <animate>, <animatecolor>, <animatemot
ion>, and <animatetransform>, to specifies the ending value of the animat
ion.
... set for the <set> element, to specifies the value for the attribute during the durat
ion of the element.
...And 5 more matches
unicode-bidi - SVG: Scalable Vector Graphics
the unicode-bidi attribute specifies how the accumulat
ion of the background image is managed.
... note: as a presentat
ion attribute, unicode-bidi can be used as a css property.
... see the css unicode-bidi property for more informat
ion.
...And 5 more matches
z - SVG: Scalable Vector Graphics
the z attribute defines the locat
ion along the z-axis for a light source in the coordinate system established by the primitiveunits attribute on the <filter> element, assuming that, in the initial coordinate system, the positive z-axis comes out towards the person viewing the content and assuming that one unit along the z-axis equals one unit in x and y.
...0%"> <fediffuselighting in="sourcegraphic"> <fepointlight x="60" y="60" z="50" /> </fediffuselighting> </filter> <rect x="0" y="0" width="200" height="200" style="filter: url(#diffuselighting1);" /> <rect x="0" y="0" width="200" height="200" style="filter: url(#diffuselighting2); transform: translatex(220px);" /> </svg> fepointlight for <fepointlight>, z defines the locat
ion along the z-axis for the light source in the coordinate system established by the primitiveunits attribute on the <filter> element.
... value <number> default value 1 animatable yes fespotlight for <fespotlight>, z defines the locat
ion along the z-axis for the light source in the coordinate system established by the primitiveunits attribute on the <filter> element.
...And 5 more matches
<a> - SVG: Scalable Vector Graphics
the <a> svg element creates a hyperlink to other web pages, files, locat
ions in the same page, email addresses, or any other url.
... see warning below */ svg|a:link, svg|a:visited { cursor: pointer; } svg|a text, text svg|a { fill: blue; /* even for text, svg uses fill over color */ text-decorat
ion: underline; } svg|a:hover, svg|a:active { outline: dotted 1px blue; } since this element shares its tag name with html's <a> element, selecting a with css or queryselector may apply to the wrong kind of element.
... 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 relat
ionship of the target object to the link object.
...And 5 more matches
<cursor> - SVG: Scalable Vector Graphics
a recommended approach for defining a platform-independent custom cursor is to create a png image and define a cursor element that references the png image and identifies the exact posit
ion within the image which is the pointer posit
ion (i.e., the hot spot).
...if a different image format is used, this format should support the definit
ion of a transparency mask (two opt
ions: provide an explicit alpha channel or use a particular pixel color to indicate transparency).
...typically, the other pixel informat
ion (e.g., the r, g and b channels) defines the colors for those parts of the cursor which are not masked out.
...And 5 more matches
<ellipse> - SVG: Scalable Vector Graphics
note: ellipses are unable to specify the exact orientat
ion of the ellipse (if, for example, you wanted to draw an ellipse tilted at a 45 degree angle), but it can be rotated by using the transform attribute.
... html,body,svg { height:100% } <svg viewbox="0 0 200 100" xmlns="http://www.w3.org/2000/svg"> <ellipse cx="100" cy="50" rx="100" ry="50" /> </svg> attributes cx the x posit
ion of the ellipse.
... value type: <length>|<percentage> ; default value: 0; animatable: yes cy the y posit
ion of the ellipse.
...And 5 more matches
<feComponentTransfer> - SVG: Scalable Vector Graphics
it allows operat
ions like brightness adjustment, contrast adjustment, color balance or thresholding.
... the calculat
ions are performed on non-premultiplied color values.
... usage context categoriesfilter primitive elementpermitted contentany number of the following elements, in any order:<fefunca>, <fefuncr>, <fefuncb>, <fefuncg> attributes global attributes core attributes presentat
ion attributes filter primitive attributes class style specific attributes in dom interface this element implements the svgfecomponenttransferelement interface.
...And 5 more matches
nsIExternalHelperAppService
uriloader/exthandler/nsiexternalhelperappservice.idlscriptable the external helper app service is used for finding and launching platform specific external applicat
ions for a given mime content type.
...to access this service, use: var externalhelperappservice = components.classes["@mozilla.org/uriloader/external-helper-app-service;1"] .getservice(components.interfaces.nsiexternalhelperappservice); method overview boolean applydecodingforextens
ion(in autf8string aextens
ion, in acstring aencodingtype); nsistreamlistener docontent(in acstring amimecontenttype, in nsirequest arequest, in nsiinterfacerequestor awindowcontext, in boolean aforcesave); methods applydecodingforextens
ion() determines whether or not data whose filename has the specified extens
ion should be decoded from the specified encoding type before being saved o...
...r delivered to helper applicat
ions.
...And 4 more matches
nsIFeed
toolkit/components/feeds/public/nsifeed.idlscriptable this interface represents a single atom or rss (really simple syndicat
ion) news feed.
... it includes attributes that provide informat
ion about the feed, as well as access to the items or entries in the feed.
... 1.0 66 introduced gecko 1.8 inherits from: nsifeedcontainer last changed in gecko 1.8 (firefox 1.5 / thunderbird 1.5 / seamonkey 1.0) attributes attribute type descript
ion cloud nsiwritablepropertybag2 the cloud element on a feed is used to identify the api endpoint of an rsscloud ping server, which distributes notificat
ions of changes to this feed.
...And 4 more matches
nsIJSID
js/src/xpconnect/idl/xpcjsid.idlscriptable this interface provides informat
ion about a contract or interface.
...an unnamed jsid also results when you implement a funct
ion that is passed an nsiidref parameter, such as queryinterface().
...method overview boolean equals(in nsijsid other); const nsid* getid(); v
iolates the xpcom interface guidelines void initialize(in string idstring); string tostring(); attributes attribute type descript
ion id nsidptr read only.
...And 4 more matches
nsIJSON
1.0 66 introduced gecko 1.9 inherits from: nsisupports last changed in gecko 7.0 (firefox 7.0 / thunderbird 7.0 / seamonkey 2.4) note: this interface may only be used from javascript code, with the except
ion of the legacydecodetojsval() method.
...to create an instance, use: var nativejson = components.classes["@mozilla.org/dom/json;1"] .createinstance(components.interfaces.nsijson); method overview note: the idl file has port
ions of the idl commented out because they represent things that can't actually be properly described by idl; however, for the purposes of this article, we'll pretend they can be and ignore that issue.
... void encodetostream(in ns
ioutputstream stream, in string charset, in boolean writebom, in jsobject value); jsval legacydecode(in astring str); deprecated since gecko 2.0 jsval legacydecodefromstream(in astring str); deprecated since gecko 2.0 jsval legacydecodetojsval(in astring str, in jscontext cx); native code only!
...And 4 more matches
nsILoadGroup
netwerk/base/public/nsiloadgroup.idlscriptable a load group maintains a collect
ion of nsirequest objects.
... inherits from: nsirequest last changed in gecko 1.7 method overview void addrequest(in nsirequest arequest, in nsisupports acontext); void removerequest(in nsirequest arequest, in nsisupports acontext, in nsresult astatus); attributes attribute type descript
ion activecount unsigned long returns the count of "active" requests (that is requests without the load_background bit set).
... notificat
ioncallbacks nsiinterfacerequestor notificat
ion callbacks for the load group.
...And 4 more matches
nsILoginInfo
nsilogininfo is an object containing informat
ion for a login stored by the login manager.
...ogininfo clone(); boolean equals(in nsilogininfo alogininfo); void init(in astring ahostname, in astring aformsubmiturl, in astring ahttprealm, in astring ausername, in astring apassword, in astring ausernamefield, in astring apasswordfield); boolean matches(in nsilogininfo alogininfo, in boolean ignorepassword); attributes attribute type descript
ion formsubmiturl astring the origin, not url, a form-based login was submitted to.
... for logins obtained from html forms, this field is the act
ion attribute from the form element, with the path removed (for example, "https://www.site.com").
...And 4 more matches
Using nsILoginManager
working with the login manager extens
ions often need to securely store passwords to external sites, web applicat
ions, and so on.
... to do so securely, they can use nsiloginmanager, which provides for secure storage of sensitive password informat
ion and nsilogininfo, which provides a way of storing login informat
ion.
... getting nsiloginmanager to get a component implementing nsiloginmanager, use the following: var passwordmanager = components.classes["@mozilla.org/login-manager;1"].getservice( components.interfaces.nsiloginmanager ); most login manager funct
ions take an nsilogininfo object as a parameter.
...And 4 more matches
nsIMicrosummaryGenerator
nherits from: nsisupports last changed in gecko 1.9 (firefox 3) warning: microsummary support was removed in gecko 6.0 (firefox 6.0 / thunderbird 6.0 / seamonkey 2.3) method overview long calculateupdateinterval(in nsidomnode apagecontent); boolean equals(in nsimicrosummarygenerator aother); astring generatemicrosummary(in nsidomnode apagecontent); attributes attribute type descript
ion loaded boolean has the generator itself (which may be a remote resource) been loaded.
... localuri nsiuri for generators installed by the user or bundled with the browser, the local uri points to the locat
ion of the local file containing the generator's xml.
... uri nsiuri the canonical locat
ion and unique identifier of the generator.
...And 4 more matches
nsIPipe
xpcom/
io/nsipipe.idlscriptable this interface represents an in-process buffer that can be read using nsiinputstream and written using ns
ioutputstream.
... inherits from: nsisupports last changed in gecko 1.6 method overview void init(in boolean nonblockinginput, in boolean nonblockingoutput, in unsigned long segmentsize, in unsigned long segmentcount, in nsimemory segmentallocator); attributes attribute type descript
ion inputstream nsiasyncinputstream the pipe's input end, which also implements nsisearchableinputstream.
...void init( in boolean nonblockinginput, in boolean nonblockingoutput, in unsigned long segmentsize, in unsigned long segmentcount, in nsimemory segmentallocator ); parameters nonblockinginput true specifies non-blocking input stream behav
ior.
...And 4 more matches
nsIScriptableInputStream
xpcom/
io/nsiscriptableinputstream.idlscriptable this interface provides scriptable access to a nsiinputstream instance.
...except
ions thrown ns_base_stream_closed if called after the stream has been closed.
...except
ions thrown ns_error_not_initialized if init() was not called.
...And 4 more matches
nsISpeculativeConnect
netwerk/base/public/nsispeculativeconnect.idlscriptable lets non-networking code provide hints to the networking layer that an http connect
ion attempt to a particular site is likely to happen soon; this lets the networking layer begin setting up tcp and, if appropriate, ssl handshakes to save time when the connect
ion is actually opened later.
... 1.0 66 introduced gecko 15.0 inherits from: nsisupports last changed in gecko 15.0 (firefox 15.0 / thunderbird 15.0 / seamonkey 2.12) to use this service, simply call nsisupports.queryinterface() on the nsi
ioservice you plan to use for the connect
ion, to get access to the i/o service's implementat
ion of nsispeculativeconnect.
...method overview void speculativeconnect(in nsiuri auri, in nsiinterfacerequestor acallbacks, in nsieventtarget atarget); methods speculativeconnect() call this method to hint to the networking layer that a new transact
ion for the specified uri is likely to happen soon.
...And 4 more matches
nsISupportsArray
inherits from: nsicollect
ion last changed in gecko 1.7 method overview boolean appendelements(in nsisupportsarray aelements); v
iolates the xpcom interface guidelines nsisupportsarray clone(); void compact(); void deleteelementat(in unsigned long aindex); void deletelastelement(in nsisupports aelement); nsisupports elementat(in unsigned long aindex); v
iolates the xpcom interface guidelines boolean enumeratebackwards(in nsisupportsarrayenumfunc afunc, in voidptr adata); v
iolates the xpcom interface guidelines boolean enumerateforwards(in nsisupportsarrayenumfunc afunc, in voidptr adata); v
iolates the xpcom interface guidelines boolean equals([const] in nsisupportsarray other); v
iola...
...tes the xpcom interface guidelines long getindexof(in nsisupports apossibleelement); long getindexofstartingat(in nsisupports apossibleelement, in unsigned long astartindex); long getlastindexof(in nsisupports apossibleelement); long indexof([const] in nsisupports apossibleelement); v
iolates the xpcom interface guidelines long indexofstartingat([const] in nsisupports apossibleelement, in unsigned long astartindex); v
iolates the xpcom interface guidelines boolean insertelementat(in nsisupports aelement, in unsigned long aindex); v
iolates the xpcom interface guidelines boolean insertelementsat(in nsisupportsarray aother, in unsigned long aindex); v
iolates the xpcom interface guidelines long lastindexof([const] in nsisupports apossibleelement); v
iolates the xpcom interface guide...
...lines boolean moveelement(in long afrom, in long ato); v
iolates the xpcom interface guidelines boolean removeelementat(in unsigned long aindex); v
iolates the xpcom interface guidelines boolean removeelementsat(in unsigned long aindex, in unsigned long acount); v
iolates the xpcom interface guidelines boolean removelastelement([const] in nsisupports aelement); v
iolates the xpcom interface guidelines boolean replaceelementat(in nsisupports aelement, in unsigned long aindex); v
iolates the xpcom interface guidelines boolean sizeto(in long asize); v
iolates the xpcom interface guidelines methods v
iolates the xpcom interface guidelines appendelements() boolean appendelements( in nsisupportsarray aelements ); parameters aelements return value clone() nsisupportsarray clone...
...And 4 more matches
nsIThreadObserver
the implementat
ion of this interface must be thread safe.
... last changed in gecko 1.9 (firefox 3) inherits from: nsisupports method overview void afterprocessnextevent(in nsithreadinternal thread, in unsigned long recurs
iondepth); void ondispatchedevent(in nsithreadinternal thread); void onprocessnextevent(in nsithreadinternal thread, in boolean maywait, in unsigned long recurs
iondepth); methods afterprocessnextevent() called by the nsithread method nsithread.processnextevent() after an event is processed.
... void afterprocessnextevent( in nsithreadinternal thread, in unsigned long recurs
iondepth ); parameters thread the nsithread on which the event was processed.
...And 4 more matches
nsIUTF8ConverterService
autf8string convertstringtoutf8( in acstring astring, in string acharset, in boolean askipcheck, in boolean aallowsubstitut
ion ); parameters astring a string to ensure its utf8ness.
...set this to pr_true only if you suspect that astring can be mistaken for ascii / utf-8 but is actually not in ascii / utf-8 so that astring has to go through the convers
ion.
... aallowsubstitut
ion when true, allow the decoder to substitute invalid input sequences by replacement characters.
...And 4 more matches
nsIUpdatePrompt
toolkit/mozapps/update/nsiupdateservice.idlscriptable this interface describes an object that can be used to show var
ious update-related notificat
ions to the user.
... 1.0 66 introduced gecko 1.8 inherits from: nsisupports last changed in gecko 1.8 (firefox 1.5 / thunderbird 1.5 / seamonkey 1.0) method overview void checkforupdates(); void showupdateavailable(in nsiupdate update); void showupdatedownloaded(in nsiupdate update, [opt
ional] in boolean background); void showupdateerror(in nsiupdate update); void showupdatehistory(in nsidomwindow parent); void showupdateinstalled(); methods checkforupdates() presents a user interface that checks for and displays the available updates.
... showupdatedownloaded() shows a message advising the user that an update has been downloaded, and that the user should restart the applicat
ion in order to install it.
...And 4 more matches
HashChangeEvent - Web APIs
<div id="interfacediagram" style="display: inline-block; posit
ion: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; posit
ion: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectrat
io="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="midd...
... hashchangeevent.oldurl read only the prev
ious url from which the window was navigated.
... examples syntax opt
ions for a hash change you can listen for the hashchange event using any of the following opt
ions: window.onhashchange = funcref; or <body onhashchange="funcref();"> or window.addeventlistener("hashchange", funcref, false); basic example funct
ion locat
ionhashchanged() { if (locat
ion.hash === '#somecoolfeature') { somecoolfeature(); } } window.addeventlistener('hashchange', locat
ionhashchanged); polyfill there are several fallback scripts listed on the modernizr github page.
...And 4 more matches
History.go() - Web APIs
the history.go() method loads a specific page from the sess
ion history.
...add a listener for the popstate event in order to determine when the navigat
ion has completed.
... syntax history.go([delta]) parameters delta opt
ional the posit
ion in the history to which you want to move, relative to the current page.
...And 4 more matches
History.replaceState() - Web APIs
this method is particularly useful when you want to update the state object or url of the current history entry in response to some user act
ion.
... url opt
ional the url of the history entry.
... the new url must be of the same origin as the current url; otherwise replacestate throws an except
ion.
...And 4 more matches
HkdfParams - Web APIs
the hkdfparams dict
ionary of the web crypto api represents the object that should be passed as the algorithm parameter into subtlecrypto.derivekey(), when using the hkdf algorithm.
...the hkdf specificat
ion states that adding salt "adds significantly to the strength of hkdf".
... ideally, the salt is a random or pseudo-random value with the same length as the output of the digest funct
ion.
...And 4 more matches
IDBEnvironment - Web APIs
important: the indexeddb property that was prev
iously defined in this mixin is instead now windoworworkerglobalscope.indexeddb (that is, defined as a member of the windoworworkerglobalscope mixin).
... the idbenvironment helper of the indexeddb api contains the indexeddb property, which provides access to indexeddb funct
ionality.
... properties idbenvironment.indexeddb read only provides a mechanism for applicat
ions to asynchronously access capabilities of indexed databases; contains an idbfactory object.
...And 4 more matches
IDBFactorySync - Web APIs
important: the synchronous vers
ion of the indexeddb api was originally intended for use only with web workers, and was eventually removed from the spec because its need was quest
ionable.
... method overview idbdatabasesync open (in domstring name, in domstring descript
ion, in opt
ional boolean modifydatabase) raises (idbdatabaseexcept
ion); methods open() opens and returns a connect
ion to a database.
... blocks the calling thread until the connect
ion object is ready to return.
...And 4 more matches
IDBIndex.keyPath - Web APIs
example in the following example we open a transact
ion and an object store, then get the index lname from a simple contacts database.
...for a complete working example, see our idbindex-example demo repo (view the example live.) funct
ion displaydatabyindex() { tableentry.innerhtml = ''; var transact
ion = db.transact
ion(['contactslist'], 'readonly'); var objectstore = transact
ion.objectstore('contactslist'); var myindex = objectstore.index('lname'); console.log(myindex.keypath); myindex.opencursor().onsuccess = funct
ion(event) { var cursor = event.target.result; if(cursor) { var tablerow = document.cre...
... + '<td>' + cursor.value.company + '</td>' + '<td>' + cursor.value.email + '</td>' + '<td>' + cursor.value.phone + '</td>' + '<td>' + cursor.value.age + '</td>'; tableentry.appendchild(tablerow); cursor.continue(); } else { console.log('entries all displayed.'); } }; }; specificat
ion specificat
ion status comment indexed database api 2.0the definit
ion of 'keypath' in that specificat
ion.
...And 4 more matches
IDBKeyRange.includes() - Web APIs
except
ions this method may raise a domexcept
ion of the following type: attribute descript
ion dataerror the supplied key was not a valid key.
... example var keyrangevalue = idbkeyrange.bound('a', 'k', false, false); var myresult = keyrangevalue.includes('f'); // returns true var myresult = keyrangevalue.includes('w'); // returns false polyfill the includes() method was added in the second edit
ion of the indexed db specificat
ion.
... idbkeyrange.prototype.includes = idbkeyrange.prototype.includes || funct
ion(key) { var r = this, c; if (r.lower !== undefined) { c = indexeddb.cmp(key, r.lower); if (r.loweropen && c <= 0) return false; if (!r.loweropen && c < 0) return false; } if (r.upper !== undefined) { c = indexeddb.cmp(key, r.upper); if (r.upperopen && c >= 0) return false; if (!r.upperopen && c > 0) return false; } return true; }; specificat
ion specificat
ion status comment indexed database api draftthe definit
ion of 'includes()' in that specificat
ion.
...And 4 more matches
IDBKeyRange.lower - Web APIs
we open a transact
ion (using idbtransact
ion) and an object store, and open a cursor with idbobjectstore.opencursor, declaring keyrangevalue as its opt
ional key range value.
... note: for a more complete example allowing you to experiment with key range, have a look at our idbkeyrange-example repo (view the example live too.) funct
ion displaydata() { var keyrangevalue = idbkeyrange.bound("f", "w", true, true); console.log(keyrangevalue.lower); var transact
ion = db.transact
ion(['fthings'], 'readonly'); var objectstore = transact
ion.objectstore('fthings'); objectstore.opencursor(keyrangevalue).onsuccess = funct
ion(event) { var cursor = event.target.result; if(cursor) { var listitem = document.createelement('li'); listitem.innerhtml = '<strong>' + cursor.value.fthing + '</strong>, ' + cursor.value.frating; list.a...
...ppendchild(listitem); cursor.continue(); } else { console.log('entries all displayed.'); } }; }; specificat
ion specificat
ion status comment indexed database api 2.0the definit
ion of 'lower' in that specificat
ion.
...And 4 more matches
IDBKeyRange.upper - Web APIs
we open a transact
ion (using idbtransact
ion) and an object store, and open a cursor with idbobjectstore.opencursor, declaring keyrangevalue as its opt
ional key range value.
... note: for a more complete example allowing you to experiment with key range, have a look at our idbkeyrange-example repo (view the example live too.) funct
ion displaydata() { var keyrangevalue = idbkeyrange.bound("f", "w", true, true); console.log(keyrangevalue.upper); var transact
ion = db.transact
ion(['fthings'], 'readonly'); var objectstore = transact
ion.objectstore('fthings'); objectstore.opencursor(keyrangevalue).onsuccess = funct
ion(event) { var cursor = event.target.result; if(cursor) { var listitem = document.createelement('li'); listitem.innerhtml = '<strong>' + cursor.value.fthing + '</strong>, ' + cursor.value.frating; list.a...
...ppendchild(listitem); cursor.continue(); } else { console.log('entries all displayed.'); } }; }; specificat
ion specificat
ion status comment indexed database api 2.0the definit
ion of 'upper' in that specificat
ion.
...And 4 more matches
IDBObjectStore.getKey() - Web APIs
return value an idbrequest object on which subsequent events related to this operat
ion are fired.
... except
ions this method may raise a domexcept
ion of one of the following types: except
ion descript
ion transact
ioninactiveerror this idbobjectstore's transact
ion is inactive.
... example let openrequest = indexeddb.open("telemetry"); openrequest.onsuccess = (event) => { let db = event.target.result; let store = db.transact
ion("netlogs").objectstore("netlogs"); let today = new date(); let yesterday = new date(today); yesterday.setdate(today.getdate() - 1); let request = store.getkey(idbkeyrange(yesterday, today)); request.onsuccess = (event) => { let when = event.target.result; alert("the 1st activity in last 24 hours was occurred at " + when); }; }; specificat
ions specificat
ion status comment indexed database api draftthe definit
ion of 'getk...
...And 4 more matches
IDBRequest.onsuccess - Web APIs
syntax request.onsuccess = funct
ion(event) { ...
...for a full working example, see our to-do notificat
ions app (view example live.) var title = "walk dog"; // open up a transact
ion as usual var objectstore = db.transact
ion(['todolist'], "readwrite").objectstore('todolist'); // get the to-do list object that has this title as it's title var objectstoretitlerequest = objectstore.get(title); objectstoretitlerequest.onsuccess = funct
ion() { // grab the data object returned as the result var data = objectstoretitlerequest.result; // update the notified value in th...
...e object to "yes" data.notified = "yes"; // create another request that inserts the item back // into the database var updatetitlerequest = objectstore.put(data); // when this new request succeeds, run the displaydata() // funct
ion again to update the display updatetitlerequest.onsuccess = funct
ion() { displaydata(); }; }; specificat
ions specificat
ion status comment indexed database api 2.0the definit
ion of 'onsuccess' in that specificat
ion.
...And 4 more matches
IDBRequest.result - Web APIs
if the request failed and the result is not available, an invalidstateerror except
ion is thrown.
...for a full working example, see our to-do notificat
ions app (view example live.) var title = "walk dog"; // open up a transact
ion as usual var objectstore = db.transact
ion(['todolist'], "readwrite").objectstore('todolist'); // get the to-do list object that has this title as it's title var objectstoretitlerequest = objectstore.get(title); objectstoretitlerequest.onsuccess = funct
ion() { // grab the data object returned as the result var data...
... = objectstoretitlerequest.result; // update the notified value in the object to "yes" data.notified = "yes"; // create another request that inserts the item // back into the database var updatetitlerequest = objectstore.put(data); // when this new request succeeds, run the displaydata() // funct
ion again to update the display updatetitlerequest.onsuccess = funct
ion() { displaydata(); }; }; specificat
ions specificat
ion status comment indexed database api 2.0the definit
ion of 'result' in that specificat
ion.
...And 4 more matches
InputDeviceCapabilities API - Web APIs
for example, the first vers
ion of the api indicates whether a device fires touch events rather than whether it is a touch screen.
...this can lead to instances where the same act
ion triggers multiple event handlers.
... to deal with this, developers make assumpt
ions and use heuristics to normalize behav
ior on web pages.
...And 4 more matches
InputEvent.dataTransfer - Web APIs
the datatransfer read-only property of the inputevent interface returns a datatransfer object containing informat
ion about richtext or plaintext data being added to or removed from editible content.
.../p> <hr> <p contenteditable="true">go on, try pasting some content into this editable paragraph and see what happens!</p> <p class="result"></p> var editable = document.queryselector('p[contenteditable]'); var result = document.queryselector('.result') var datatransferobj; editable.addeventlistener('input', (e) => { result.textcontent = e.datatransfer.getdata('text/html'); }); specificat
ions specificat
ion status comment input events level 2the definit
ion of 'datatransfer' in that specificat
ion.
... working draft initial definit
ion.
...And 4 more matches
KeyboardLayoutMap.forEach() - Web APIs
the foreach() method of the keyboardlayoutmap interface executes a provided funct
ion once for each element of the map.
... syntax keyboardlayoutmap.foreach(funct
ion callback(currentvalue[, index[, array]]) { //your iterator }[, thisarg]); parameters callback the funct
ion to execute for each element, taking three arguments: currentvalue the value of the current element being processed.
... index opt
ional the index of the current element being processed.
...And 4 more matches
LockedFile.truncate() - Web APIs
do not use it on product
ion sites facing the web: it will not work for every user.
... there may also be large incompatibilities between implementat
ions and the behav
ior may change in the future.
... if the method is called with no argument, the operat
ion removes all the bytes starting at the index set in lockedfile.locat
ion.
...And 4 more matches
MediaCapabilities.decodingInfo() - Web APIs
the mediacapabilities.decodinginfo() method, part of the media capabilities api, returns a promise with the tested media configurat
ion's mediacapabilitiesinfo; this contains the three boolean properties supported, smooth, and powerefficient, which describe whether decoding the media described would be supported, smooth, and powerefficient.
... syntax mediacapabilities.decodinginfo(mediadecodingconfigurat
ion) parameters mediadecodingconfigurat
ion a valid mediadecodingconfigurat
ion dict
ionary containing a valid media decoding type of file or media-source and a valid media configurat
ion: either an aud
ioconfigurat
ion or a videoconfigurat
ion.
... return value a promise fulfilling with a mediacapabilitiesinfo interface containing three boolean attributes: supported smooth powerefficient except
ions a typeerror is raised if the mediaconfigurat
ion passed to the decodinginfo() method is invalid, either because the type is not video or aud
io, the contenttype is not a valid codec mime type, the media decoding configurat
ion is not a valid value for the media decoding type, or any other error in the media configurat
ion passed to the method, including omitting values required in the media decoding configurat
ion.
...And 4 more matches
MediaCapabilities.encodingInfo() - Web APIs
the mediacapabilities.encodinginfo() method, part of the mediacapabilities interface of the media capabilities api, returns a promise with the tested media configurat
ion's mediacapabilitiesinfo; this contains the three boolean properties supported, smooth, and powerefficient, which describe how compatible the device is with the type of media.
... syntax mediacapabilities.encodinginfo(mediaencodingconfigurat
ion) parameters mediaencodingconfigurat
ion a valid mediaencodingconfigurat
ion dict
ionary containing a valid media encoding type of record or transmiss
ion and a valid media configurat
ion: either an aud
ioconfigurat
ion or videoconfigurat
ion dict
ionary.
... return value a promise fulfilling with a mediacapabilitiesinfo interface containing three boolean attributes: supported smooth powerefficient except
ions a typeerror is raised if the mediaconfigurat
ion passed to the encodinginfo() method is invalid, either because the type is not video or aud
io, the contenttype is not a valid codec mime type, or any other error in the media configurat
ion passed to the method, including omitting any of the media encoding configurat
ion elements.
...And 4 more matches
MediaKeyMessageEvent() - Web APIs
syntax var mediakeymessageevent = new mediakeymessageevent(typearg, opt
ions) parameters typearg a domstring containing one of may be one of license-request, license-renewal, license-renewal, or individualizat
ion-request.
... opt
ions opt
ions are as follows: messagetype: a developer-defined message type that allows applicat
ions to differentiate messages without parsing them.
... message: an array containing the message generated by the content decrypt
ion module.
...And 4 more matches
MediaMetadata.album - Web APIs
the album property of the mediametadata interface returns or sets the name of the album or collect
ion containing the media to be played.
... specificat
ions specificat
ion status comment media sess
ion standardthe definit
ion of 'album' in that specificat
ion.
... draft initial definit
ion.
...And 4 more matches
MediaQueryListListener - Web APIs
the mediaquerylist.addlistener() callback is now a plain funct
ion and called with the standard mediaquerylistevent object.
... a mediaquerylist object maintains a list of media queries on a document, and handles sending notificat
ions to listeners when the media queries on the document change.
... this makes it possible to observe a document to detect when its media queries change, instead of polling the values per
iodically, if you need to detect changes to the values of media queries on a document.
...And 4 more matches
MediaRecorder.mimeType - Web APIs
see our media type and format guide for informat
ion about container and codec support across browsers.
...this string may include the codecs parameter, giving details about the codecs and the codec configurat
ions used by the media recorder.
... if (navigator.mediadevices) { console.log('getusermedia supported.'); var constraints = { aud
io: true, video: true }; var chunks = []; navigator.mediadevices.getusermedia(constraints) .then(funct
ion(stream) { var opt
ions = { aud
iobitspersecond: 128000, videobitspersecond: 2500000, mimetype: 'video/mp4' } var mediarecorder = new mediarecorder(stream,opt
ions); m = mediarecorder; m.mimetype; // would return 'video/mp4' ...
...And 4 more matches
MediaTrackConstraints.deviceId - Web APIs
the mediatrackconstraints dict
ionary's deviceid property is a constraindomstring describing the requested or mandatory constraints placed upon the value of the deviceid constrainable property.
... because rtp doesn't include this informat
ion, tracks associated with a webrtc rtcpeerconnect
ion will never include this property.
... device ids are unique for a given origin, and are guaranteed to be the same across browsing sess
ions on the same origin.
...And 4 more matches
MediaTrackConstraints.displaySurface - Web APIs
the mediatrackconstraints dict
ionary's displaysurface property is a constraindomstring describing the requested or mandatory constraints placed upon the value of the displaysurface constrainable property.
... see how constraints are defined in capabilities, constraints, and settings for an explanat
ion of how to define constraints.
... for example, if your app needs to know that the surface being shared is a monitor or applicat
ion—meaning that there's possibly a non-content backdrop—it can use code similar to this: let mayhavebackdropflag = false; let displaysurface = displaystream.getvideotracks()[0].getsettings().displaysurface; if (displaysurface === "monitor" || displaysurface ==="applicat
ion") { mayhavebackdropflag = true; } following this code, mayhavebackdrop is true if the display surface contained in the stream is...
...And 4 more matches
MediaTrackSettings.deviceId - Web APIs
the mediatracksettings dict
ionary's deviceid property is a domstring which uniquely identifies the source for the corresponding mediastreamtrack for the origin corresponding to the browsing sess
ion.
... because rtp doesn't include this informat
ion, tracks associated with a webrtc rtcpeerconnect
ion will never include this property.
...this id is valid across multiple browsing sess
ions for the same origin and is guaranteed to be different for all other origins, so you can safely use it to request the same source be used for multiple sess
ions, for example.
...And 4 more matches
MediaTrackSupportedConstraints.autoGainControl - Web APIs
the mediatracksupportedconstraints dict
ionary's autogaincontrol property is a read-only boolean value which is present (and set to true) in the object returned by mediadevices.getsupportedconstraints() if and only if the user agent supports the autogaincontrol constraint.
... you can access the supported constraints dict
ionary by calling navigator.mediadevices.getsupportedconstraints().
... the autogaincontrol constraint indicates whether or not the browser offers the ability to automatically control the gain (volume) on media tracks; this obv
iously is contingent on whether or not the individual device supports automatic gain control as well; it's typically a feature provided by microphones.
...And 4 more matches
MimeType - Web APIs
the mimetype interface provides contains informat
ion about a mime type associated with a particular plugin.
... mimetype.descript
ion returns a descript
ion of the associated plugin or an empty string if there is none.
... mimetype.suffixes a string containing valid file extens
ions for the data displayed by the plugin, or an empty string if an extens
ion is not valid for the particular module.
...And 4 more matches
MouseEvent.clientX - Web APIs
the clientx read-only property of the mouseevent interface provides the horizontal coordinate within the applicat
ion's client area at which the event occurred (as opposed to the coordinate within the page).
...see the "browser compatibility" sect
ion for details.
... html <p>move your mouse to see its posit
ion.</p> <p id="screen-log"></p> javascript let screenlog = document.queryselector('#screen-log'); document.addeventlistener('mousemove', logkey); funct
ion logkey(e) { screenlog.innertext = ` screen x/y: ${e.screenx}, ${e.screeny} client x/y: ${e.clientx}, ${e.clienty}`; } result specificat
ions specificat
ion status comment css object model (cssom) view modulethe definit
ion of 'clientx' in that specificat
ion.
...And 4 more matches
MouseEvent.clientY - Web APIs
the clienty read-only property of the mouseevent interface provides the vertical coordinate within the applicat
ion's client area at which the event occurred (as opposed to the coordinate within the page).
...see the "browser compatibility" sect
ion for details.
... html <p>move your mouse to see its posit
ion.</p> <p id="screen-log"></p> javascript let screenlog = document.queryselector('#screen-log'); document.addeventlistener('mousemove', logkey); funct
ion logkey(e) { screenlog.innertext = ` screen x/y: ${e.screenx}, ${e.screeny} client x/y: ${e.clientx}, ${e.clienty}`; } result specificat
ions specificat
ion status comment css object model (cssom) view modulethe definit
ion of 'clienty' in that specificat
ion.
...And 4 more matches
Range.setEnd() - Web APIs
the range.setend() method sets the end posit
ion of a range to be located at the given offset into the specified node x.setting the end point above (higher in the document) than the start point will result in a collapsed range with the start and end points both set to the specified end posit
ion.
... except
ions except
ions are thrown as domexcept
ion objects of the following types: invalidnodetypeerror the node specified by endnode is a doctype node; range endpoints cannot be located inside a doctype node.
... usage notes if the endnode is a node of type text, comment, or cdatasect
ion, then endoffset is the number of characters from the start of endnode.
...And 4 more matches
ReadableStream.getReader() - Web APIs
syntax var reader = readablestream.getreader({mode}); parameters {mode} opt
ional an object containing a property mode, which takes as its value a domstring specifying the type of reader to create.
... except
ions rangeerror the provided mode value is not "byob" or undefined.
... examples in the following simple example, a prev
iously-created custom readablestream is read using a readablestreamdefaultreader created using getreader().
...And 4 more matches
ReadableStreamDefaultController.enqueue() - Web APIs
except
ions typeerror the source object is not a readablestreamdefaultcontroller.
...the start() funct
ion generates a random string of text every second and enqueues it into the stream — see controller.enqueue(string).
... a cancel() funct
ion is also provided to stop the generat
ion if readablestream.cancel() is called for any reason.
...And 4 more matches
ReadableStreamDefaultReader.cancel() - Web APIs
syntax var promise = readablestreamdefaultreader.cancel(reason); parameters reason opt
ional a domstring providing a human-readable reason for the cancellat
ion.
... except
ions typeerror the source object is not a readablestreamdefaultreader, or the stream has no owner.
... examples in the following simple example, a prev
iously-created custom readablestream is read using a readablestreamdefaultreader created using getreader().
...And 4 more matches
ReportingObserver() - Web APIs
syntax new reportingobserver(callback[, opt
ions]); parameters callback a callback funct
ion that runs when the observer starts to collect reports (i.e.
...the callback funct
ion is given two parameters: reports: a sequence of report objects representing the reports collected in the observer's report queue.
... observer: a reference to the same reportingobserver object, allowing for recursive report collect
ion, etc.
...And 4 more matches
Request.mode - Web APIs
in addit
ion, javascript may not access any properties of the resulting response.
... cors — allows cross-origin requests, for example to access var
ious apis offered by 3rd party vendors.
... navigate — a mode for supporting navigat
ion.
...And 4 more matches
SVGAnimateElement - Web APIs
<div id="interfacediagram" style="display: inline-block; posit
ion: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; posit
ion: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectrat
io="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="...
...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/svganimat
ionelement" target="_top"><rect x="291" y="65" width="190" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="386" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svganimat
ionelement</text></a><polyline points="291,89 281,84 281,94 291,89" stroke="#d4dde4" fill="none"/><line x1="281" y...
...#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="166" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svganimateelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface has no properties but inherits properties from its parent, svganimat
ionelement.
...And 4 more matches
SVGAnimateTransformElement - Web APIs
<div id="interfacediagram" style="display: inline-block; posit
ion: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; posit
ion: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectrat
io="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><...
...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/svganimat
ionelement" target="_top"><rect x="291" y="65" width="190" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="386" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svganimat
ionelement</text></a><polyline points="291,89 281,84 281,94 291,89" stroke="#d4dde4" fill="none"/><line x1="281" y...
...stroke="#d4dde4" stroke-width="2px" /><text x="121" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svganimatetransformelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface has no properties but inherits properties from its parent, svganimat
ionelement.
...And 4 more matches
SVGFEDisplacementMapElement - Web APIs
<div id="interfacediagram" style="display: inline-block; posit
ion: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; posit
ion: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectrat
io="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/...
...1" y="65" width="270" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="346" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgfedisplacementmapelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} constants name value descript
ion svg_channel_unknown 0 the type is not one of predefined types.
... svgfedisplacementmapelement.xchannelselector read only an svganimatedenumerat
ion corresponding to the xchannelselect attribute of the given element.
...And 4 more matches
SVGFEFuncAElement - Web APIs
<div id="interfacediagram" style="display: inline-block; posit
ion: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; posit
ion: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectrat
io="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="...
...space" 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/svgcomponenttransferfunct
ionelement" target="_top"><rect x="131" y="65" width="350" height="50" fill="#fff" stroke="#d4dde4" 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">svgcomponenttransferfunct
ionelement</text></a><polyline points="131,89 121,84 121,94 131,89" stroke="#d4dde4" fill="none"/>...
..." /><text x="6" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgfefuncaelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface not provide any specific properties, but inherits properties from its parent interface, svgcomponenttransferfunct
ionelement.
...And 4 more matches
SVGFEFuncBElement - Web APIs
<div id="interfacediagram" style="display: inline-block; posit
ion: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; posit
ion: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectrat
io="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="...
...space" 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/svgcomponenttransferfunct
ionelement" target="_top"><rect x="131" y="65" width="350" height="50" fill="#fff" stroke="#d4dde4" 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">svgcomponenttransferfunct
ionelement</text></a><polyline points="131,89 121,84 121,94 131,89" stroke="#d4dde4" fill="none"/>...
..." /><text x="6" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgfefuncbelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface not provide any specific properties, but inherits properties from its parent interface, svgcomponenttransferfunct
ionelement.
...And 4 more matches
SVGFEFuncGElement - Web APIs
<div id="interfacediagram" style="display: inline-block; posit
ion: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; posit
ion: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectrat
io="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="...
...space" 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/svgcomponenttransferfunct
ionelement" target="_top"><rect x="131" y="65" width="350" height="50" fill="#fff" stroke="#d4dde4" 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">svgcomponenttransferfunct
ionelement</text></a><polyline points="131,89 121,84 121,94 131,89" stroke="#d4dde4" fill="none"/>...
..." /><text x="6" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgfefuncgelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface not provide any specific properties, but inherits properties from its parent interface, svgcomponenttransferfunct
ionelement.
...And 4 more matches
SVGFEFuncRElement - Web APIs
<div id="interfacediagram" style="display: inline-block; posit
ion: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; posit
ion: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectrat
io="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="...
...space" 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/svgcomponenttransferfunct
ionelement" target="_top"><rect x="131" y="65" width="350" height="50" fill="#fff" stroke="#d4dde4" 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">svgcomponenttransferfunct
ionelement</text></a><polyline points="131,89 121,84 121,94 131,89" stroke="#d4dde4" fill="none"/>...
..." /><text x="6" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgfefuncrelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface not provide any specific properties, but inherits properties from its parent interface, svgcomponenttransferfunct
ionelement.
...And 4 more matches
SVGGradientElement - Web APIs
<div id="interfacediagram" style="display: inline-block; posit
ion: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; posit
ion: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectrat
io="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d...
...ect x="301" y="65" width="180" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="391" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svggradientelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} constants name value descript
ion svg_spreadmethod_unknown 0 the type is not one of predefined types.
... svggradientelement.gradientunits read only returns an svganimatedenumerat
ion corresponding to the gradientunits attribute on the given element.
...And 4 more matches
SVGImageElement.decoding - Web APIs
possible values are: sync: decode the image synchronously for atomic presentat
ion with other content.
... examples var img = new image(); img.decoding = 'sync'; img.src = 'img/logo.svg'; specificat
ions specificat
ion status comment html living standardthe definit
ion of 'decoding' in that specificat
ion.
... living standard initial definit
ion.
...And 4 more matches
SVGMaskElement - Web APIs
<div id="interfacediagram" style="display: inline-block; posit
ion: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; posit
ion: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectrat
io="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,2...
... svgmaskelement.maskunits read only an svganimatedenumerat
ion corresponding to the maskunits attribute of the given <mask> element.
... svgmaskelement.maskcontentunits read only an svganimatedenumerat
ion corresponding to the maskcontentunits attribute of the given <mask> element.
...And 4 more matches
SVGSetElement - Web APIs
<div id="interfacediagram" style="display: inline-block; posit
ion: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; posit
ion: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectrat
io="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="...
...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/svganimat
ionelement" target="_top"><rect x="291" y="65" width="190" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="386" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svganimat
ionelement</text></a><polyline points="291,89 281,84 281,94 291,89" stroke="#d4dde4" fill="none"/><line x1="281" y...
...e-width="2px" /><text x="186" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgsetelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface doesn't implement any specific properties, but inherits properties from its parent interface, svganimat
ionelement.
...And 4 more matches
SVGTests - Web APIs
the svgtests interface is used to reflect condit
ional processing attributes and is mixed into other interfaces for elements that support these attributes.
... svgtests.requiredextens
ions read only an svgstringlist corresponding to the requiredextens
ions attribute of the given element.
... methods svgtests.hasextens
ion() read only returns true if the browser supports the given extens
ion, specified by a uri.
...And 4 more matches
SVGUseElement - Web APIs
<div id="interfacediagram" style="display: inline-block; posit
ion: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; posit
ion: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectrat
io="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><lin...
...if the element does not have a shadow tree (for example, because its uri is invalid or because it has been disabled by condit
ional processing), then getting this attribute returns null.
...if the element does not have a shadow tree (for example, because its uri is invalid or because it has been disabled by condit
ional processing), then getting this attribute returns null.
...And 4 more matches
ServiceWorker.onstatechange - Web APIs
syntax serviceworker.onstatechange = funct
ion(statechangeevent) { ...
... } serviceworker.addeventlistener('statechange', funct
ion(statechangeevent) { ...
... } ) examples this code snippet is from the service worker registrat
ion-events sample (live demo).
...And 4 more matches
ServiceWorkerContainer.ready - Web APIs
the ready read-only property of the serviceworkercontainer interface provides a way of delaying code execut
ion until a service worker is active.
... it returns a promise that will never reject, and which waits indefinitely until the serviceworkerregistrat
ion associated with the current page has an active worker.
... once that condit
ion is met, it resolves with the serviceworkerregistrat
ion.
...And 4 more matches
StaticRange - Web APIs
<div id="interfacediagram" style="display: inline-block; posit
ion: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; posit
ion: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectrat
io="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="...
..." fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="226" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">staticrange</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} constructor staticrange() creates a new staticrange object given the staticrangeinit dict
ionary specifying the default values for its properties.
... staticrange.collapsed read only returns a boolean value which is true if the range's start and end posit
ions are the same, resulting in a range of length 0.
...And 4 more matches
StereoPannerNode.pan - Web APIs
the pan property of the stereopannernode interface is an a-rate aud
ioparam representing the amount of panning to apply.
... syntax var aud
ioctx = new aud
iocontext(); var pannode = aud
ioctx.createstereopanner(); pannode.pan.value = -0.5; returned value an a-rate aud
ioparam containing the panning to apply.
... note: though the aud
ioparam returned is read-only, the value it represents is not.
...And 4 more matches
Storage - Web APIs
the storage interface of the web storage api provides access to a particular domain's sess
ion or local storage.
... it allows, for example, the addit
ion, modificat
ion, or delet
ion of stored data items.
... to manipulate, for instance, the sess
ion storage for a domain, a call to window.sess
ionstorage is made; whereas for local storage the call is made to window.localstorage.
...And 4 more matches
StorageEstimate - Web APIs
the storageestimate dict
ionary is used by the storagemanager to provide estimates of the size of a site's or applicat
ion's data store and how much of it is in use.
... the estimate() method returns an object that conforms to this dict
ionary when its promise resolves.
... properties quota secure context a numeric value in bytes which provides a conservative approximat
ion of the total storage the user's device or computer has available for the site origin or web app.
...And 4 more matches
StorageManager.estimate() - Web APIs
this method operates asynchronously, so it returns a promise which resolves once the informat
ion is available.
... return value a promise that resolves to an object which conforms to the storageestimate dict
ionary.
... this dict
ionary contains estimates of how much space is available to the origin in storageestimate.quota, as well as how much is currently used in storageestimate.usage.
...And 4 more matches
Streams API - Web APIs
prev
iously, if we wanted to process a resource of some kind (be it a video, or a text file, etc.), we'd have to download the entire file, wait for it to be deserialized into a suitable format, then process the whole lot after it is fully received.
... writable streams writablestream provides a standard abstract
ion for writing streaming data to a destinat
ion, known as a sink.
... related stream apis and operat
ions bytelengthqueuingstrategy provides a built-in byte length queuing strategy that can be used when constructing streams.
...And 4 more matches
StylePropertyMapReadOnly.forEach() - Web APIs
the stylepropertymapreadonly.foreach() method executes a provided funct
ion once for each element of stylepropertymapreadonly.
... syntax stylepropertymapreadonly.foreach(funct
ion callback(currentvalue[, index[, array]]) { //your code }[, thisarg]); parameters callback the funct
ion to execute for each element, taking three arguments: currentvalue the value of the current element being processed.
... indexopt
ional the index of the current element being processed.
...And 4 more matches
Touch - Web APIs
the touch.radiusx, touch.radiusy, and touch.rotat
ionangle describe the area of contact between the user and the screen, the touch area.
...a given touch point (say, by a finger) will have the same identifier for the durat
ion of its movement around the surface.
... touch.rotat
ionangle read only returns the angle (in degrees) that the ellipse described by radiusx and radiusy must be rotated, clockwise, to most accurately cover the area of contact between the user and the surface.
...And 4 more matches
UIEvent() - Web APIs
uieventinit opt
ional is a uieventinit dict
ionary, having the following fields: detail: opt
ional and defaulting to 0, of type long, that is a event-dependant value associated with the event.
... view: opt
ional and defaulting to null, of type windowproxy, that is the window associated with the event .
... sourcecapabilities: an instance of the inputdevicecapabilities interface which provides informat
ion about the physical device responsible for generating a touch event.
...And 4 more matches
gradientUnits - SVG: Scalable Vector Graphics
this transformat
ion is due to applicat
ion of the non-uniform scaling transformat
ion from bounding box space to user space.
...when the object's bounding box is not square, the rings that are conceptually circular within object bounding box space will render as elliptical due to applicat
ion of the non-uniform scaling transformat
ion from bounding box space to user space.
... specificat
ions specificat
ion status comment scalable vector graphics (svg) 2the definit
ion of 'gradientunits for <radialgradient>' in that specificat
ion.
...And 4 more matches
image-rendering - SVG: Scalable Vector Graphics
note: as a presentat
ion attribute, image-rendering can be used as a css property.
... see the css image-rendering property for more informat
ion.
... as a presentat
ion attribute, it can be applied to any element but it has effect only on the following element: <image> usage notes value auto | optimizespeed | optimizequality default value auto animatable yes auto indicates that the user agent shall make appropriate tradeoffs to balance speed and quality, but quality shall be given more importance than speed.
...And 4 more matches
in - SVG: Scalable Vector Graphics
the value can be either one of the six keywords defined below, or a string which matches a prev
ious result attribute value within the same <filter> element.
...if no value is provided and this is a subsequent filter primitive, then this filter primitive will use the result from the prev
ious filter primitive as its input.
...ix>, <fediffuselighting>, <fedisplacementmap>, <fedropshadow>, <fegaussianblur>, <femergenode>, <femorphology>, <feoffset>, <fespecularlighting>, <fetile> usage notes value sourcegraphic | sourcealpha | backgroundimage | backgroundalpha | fillpaint | strokepaint | <filter-primitive-reference> default value sourcegraphic for first filter primitive, otherwise result of prev
ious filter primitive animatable yes sourcegraphic this keyword represents the graphics elements that were the original input into the <filter> element.
...And 4 more matches
orient - SVG: Scalable Vector Graphics
the orient attribute indicates how a marker is rotated when it is placed at its posit
ion on the shape.
...none" 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 direct
ion relative to the path at the posit
ion the marker is placed.
... auto-start-reverse if placed by marker-start, the marker is oriented 180° different from the orientat
ion that would be used if auto where specified.
...And 4 more matches
patternTransform - SVG: Scalable Vector Graphics
the patterntransform attribute defines a list of transform definit
ions that are applied to a pattern tile.
...".25" height=".25" patterntransform="rotate(20) skewx(30) scale(1 0.5)"> <circle cx="10" cy="10" r="10" /> </pattern> <!-- apply the transformed pattern tile --> <rect x="10" y="10" width="80" height="80" fill="url(#p1)" /> </svg> pattern for <pattern>, patterntransform defines a list of transform definit
ions that are applied to a pattern tile.
...however, the current state of implementat
ion isn't very good.
...And 4 more matches
stroke-width - SVG: Scalable Vector Graphics
the stroke-width attribute is a presentat
ion attribute defining the width of the stroke to be applied to the shape.
... as a presentat
ion attribute, it can be applied to any element but it only has effect on shapes and text context elements, including: <altglyph>, <circle>, <ellipse>, <line>, <path>, <polygon>, <polyline>, <rect>, <text>, <textpath>, <tref>, and <tspan> html,body,svg { height:100% } <svg viewbox="0 0 30 10" xmlns="http://www.w3.org/2000/svg"> <!-- default stroke width: 1 --> <circle cx="5" cy="5" r="3" stroke="green" /> <!-- stroke width as a number --> <circle cx="15" cy="5" r="3" stroke="green" stroke-width="3" /> <!-- stroke width as a percentage --> <circle cx="25" cy="5" r="3" stroke="green" stroke-width="2%" /> </svg> usage notes value <length> | <percentage> default value 1px animatable yes note: a...
... desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on
iossamsung internetstroke-widthchrome ?
...And 4 more matches
type - SVG: Scalable Vector Graphics
for the <animatetransform> element, it defines the type of transformat
ion, whose values change over time.
... for the <fecolormatrix> element, it indicates the type of matrix operat
ion.
...the other keywords represent convenience shortcuts to allow commonly used color operat
ions to be performed without specifying a complete matrix.
...And 4 more matches
values - SVG: Scalable Vector Graphics
the values attribute has different meanings, depending upon the context where itʼs used, either it defines a sequence of values used over the course of an animat
ion, or itʼs a list of numbers for a color matrix, which is interpreted differently depending on the type of color change to be performed.
... five elements are using this attribute: <animate>, <animatecolor>, <animatemot
ion>, <animatetransform>, and <fecolormatrix> animate, animatecolor, animatemot
ion, animatetransform for <animate>, <animatecolor>, <animatemot
ion>, and <animatetransform>, values is a list of values defining the sequence of values over the course of the animat
ion.
... specificat
ions specificat
ion status comment filter effects module level 1the definit
ion of 'values for <fecolormatrix>' in that specificat
ion.
...And 4 more matches
xlink:title - SVG: Scalable Vector Graphics
the xlink:title attribute is used to describe the meaning of a link or resource in a human-readable fash
ion.
... the use of this informat
ion is highly dependent on the type of processing being done.
... it may be used, for example, to make titles available to applicat
ions used by visually impaired users, or to create a table of links, or to present help text that appears when a user lets a mouse pointer hover over a starting resource.
...And 4 more matches
<altGlyph> - SVG: Scalable Vector Graphics
the <altglyph> svg element allows sophisticated select
ion of the glyphs used to render its child character data.
... value type: <list-of-coordinates> ; default value: absolute y-coordinate of ancestor <text> or <tspan>; animatable: yes dx this attribute indicates a shift along the x-axis on the posit
ion of the element.
... 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 posit
ion of the element.
...And 4 more matches
<animate> - SVG: Scalable Vector Graphics
html,body,svg { height:100%; margin:0; padding:0; } <svg viewbox="0 0 10 10" xmlns="http://www.w3.org/2000/svg"> <rect width="10" height="10"> <animate attributename="rx" values="0;5;0" dur="10s" repeatcount="indefinite" /> </rect> </svg> attributes animat
ion attributes animat
ion timing attributes begin, dur, end, min, max, restart, repeatcount, repeatdur, fill animat
ion value attributes calcmode, values, keytimes, keysplines, from, to, by other animat
ion attributes most notably: attributename, additive, accumulate animat
ion event attributes most notably: onbegin, onend, onrepeat global attributes core attributes most notably: id styling attributes class, style even...
... accessibility concerns blinking and flashing animat
ion can be problematic for people with cognitive concerns such as attent
ion deficit hyperactivity disorder (adhd).
... addit
ionally, certain kinds of mot
ion can be a trigger for vestibular disorders, epilepsy, and migraine and scotopic sensitivity.
...And 4 more matches
<feColorMatrix> - SVG: Scalable Vector Graphics
the <fecolormatrix> svg filter element changes colors based on a transformat
ion matrix.
... the prime symbol ' is used in mathematics indicate the result of a transformat
ion.
... usage context categoriesfilter primitive elementpermitted contentany number of the following elements, in any order:<animate>, <set> attributes global attributes core attributes presentat
ion attributes filter primitive attributes class style specific attributes in type values dom interface this element implements the svgfecolormatrixelement interface.
...And 4 more matches
<metadata> - SVG: Scalable Vector Graphics
metadata is structured informat
ion about data.
... example <svg width="400" viewbox="0 0 400 300" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <metadata> <rdf:rdf xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:connect="http://www.w3.org/1999/08/29-svg-connect
ions-in-rdf#"> <rdf:descript
ion about="#cablea"> <connect:ends rdf:resource="#socket1"/> <connect:ends rdf:resource="#computera"/> </rdf:descript
ion> <rdf:descript
ion about="#cableb"> <connect:ends rdf:resource="#socket2"/> <connect:ends rdf:resource="#computerb"/> </rdf:descript
ion> <rdf:descript
ion about="#cablen"> <connect:ends...
... rdf:resource="#socket5"/> <connect:ends>everything</connect:ends> </rdf:descript
ion> <rdf:descript
ion about="#hub"> <connect:ends rdf:resource="#socket1"/> <connect:ends rdf:resource="#socket2"/> <connect:ends rdf:resource="#socket3"/> <connect:ends rdf:resource="#socket4"/> <connect:ends rdf:resource="#socket5"/> </rdf:descript
ion> </rdf:rdf> </metadata> <title>network</title> <desc>an example of a computer network based on a hub.</desc> <style> svg { /* default styles to be inherited */ fill: white; stroke: black; } text { fill: black; stroke: none; } path { fill: none; } </style> <!-- define symbols used in the svg --> <defs> <!-- hubplug symbol.
...And 4 more matches
<use> - SVG: Scalable Vector Graphics
that's why the circles have different x posit
ions, but the same stroke value.
...see xlink:href page for more informat
ion.
... global attributes core attributes most notably: id, tabindex styling attributes class, style condit
ional processing attributes most notably: requiredextens
ions, systemlanguage event attributes global event attributes, graphical event attributes presentat
ion attributes most notably: clip-path, clip-rule, color, color-interpolat
ion, color-rendering, cursor, display, fill, fill-opacity, fill-rule, filter, mask, opacity, pointer-events, shape-rendering, stroke, stroke-dasharray, stroke-dashoffse...
...And 4 more matches
Tools for SVG - SVG: Scalable Vector Graphics
« prev
ious now that we covered the basics of the svg internals, we will take a look at some tools to work with svg files.
... apache batik url: xmlgraphics.apache.org/batik/ batik is a set of open source tools under the roof of the apache software foundat
ion.
... raphael js url: raphaeljs.com this is a javascript library, that acts as an abstract
ion layer between browser implementat
ions.
...And 4 more matches
Secure contexts - Web security
a secure context is a window or worker for which certain minimum standards of authenticat
ion and confidentiality are met.
... a context is considered secure when it meets certain minimum standards of authenticat
ion and confidentiality defined in the secure contexts specificat
ion.
...that’s because the determinat
ion of whether or not a particular document is in a secure context is based only on considering it within the top-level browsing context with which it is associated — and not whether a non-secure context happened to be used to create it.
...And 4 more matches
Index - WebAssembly
found 12 pages: # page tags and summary 1 webassembly landing, webassembly, wasm webassembly is a new type of code that can be run in modern web browsers — it is a low-level assembly-like language with a compact binary format that runs with near-native performance and provides languages such as c/c++ with a compilat
ion target so that they can run on the web.
... 6 converting webassembly text format to wasm webassembly, assembly, convers
ion, text format, wabt, wasm, wast2wasm, wat2wasm webassembly has an s-express
ion-based textual representat
ion, an intermediate form designed to be exposed in text editors, browser developer tools, etc.
... 7 exported webassembly funct
ions guide, javascript, webassembly, export, exported funct
ions, exported wasm funct
ions, wasm exported webassembly funct
ions are how webassembly funct
ions are represented in javascript.
...And 4 more matches
Testing the Add-on SDK - Archive of obsolete content
the majority of the tests run here are module unit tests, but there are var
ious other tests included here as well.
... with gulp installed, and after installing the addon-sdk's npm dependencies, we can run the latter three test suites ment
ioned for cfx with jpm using the following commands: gulp test:examples --filter <addon_example_folder_name> gulp test:addons --filter <addon_folder_name> gulp test:modules --filter <file_name>:<test_name> or run all of the tests with gulp test.
... with travis if you merely make a pull request for the mozilla/addon-sdk then all of the jpm tests ment
ioned 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.
...And 3 more matches
clipboard - Archive of obsolete content
usage you can opt
ionally specify the type of the data to set and retrieve.
...if the intent
ion is set the clipboard to a data url as string and not as image, it can be done by specifying a different flavor, like text.
... var clipboard = require("sdk/clipboard"); clipboard.set("data:image/png;base64,ivborw0kggoaaaansuheugaaacaaaaagcaya" + "aabzenr0aaaasuleqvryhe3o0qkaiawd0eyqe3q993aq3cbsukpygfsnty" + "n5ugbqpk0baadgp0brdwxwlweaaaaagpsa3rzdaaaaahgpcgrpganzq2fg" + "bwrr9aaaaabjru5erkjggg%3d%3d", "text"); globals funct
ions set(data, datatype) replace the contents of the user's clipboard with the provided data.
...And 3 more matches
ui - Archive of obsolete content
this module exports constructors for the following: act
ionbutton togglebutton frame toolbar sidebar each object has its own reference page, linked above: for all the details please refer to the reference page.
... act
ionbutton an act
ion button is a button in the main firefox toolbar.
... you give it an icon, a label, and a click handler: var ui = require("sdk/ui"); var act
ion_button = ui.act
ionbutton({ id: "my-button", label: "act
ion button!", icon: "./icon.png", onclick: funct
ion(state) { console.log("you clicked '" + state.label + "'"); } }); you can make a button standalone or add it to a toolbar.
...And 3 more matches
Troubleshooting - Archive of obsolete content
check your firefox jpm searches well known locat
ions on your system for firefox.
... jpm may not have found an installat
ion, or if you have multiple installat
ions, jpm may have found the wrong one.
... in those cases you need to use jpm's --binary opt
ion.
...And 3 more matches
Customizing the download progress bar - Archive of obsolete content
in your jar.mn file, add the following (replacing "myextens
ion" with the name of your extens
ion's chrome package): % overlay chrome://mozapps/content/downloads/downloads.xul chrome://myextens
ion/content/downloads-overlay.xul in downloads-overlay.xul, reference the new stylesheet: <?xml vers
ion="1.0"?> <?xml-stylesheet href="chrome://myextens
ion/skin/myextens
ion.css" type="text/css"?> <overlay id="mydownloadoverlay" xmlns="http://www.mozilla.org/keymaster/gat...re.is.only.xul"> </overlay> in jar.mn, make sure that there is an asterisk in front of the entry for myextens
ion.css so th...
... the myextens
ion.css file will look something like this: richlistitem progressmeter { %ifdef xp_win min-height: 17px !important; %else %ifdef xp_macosx -moz-appearance: none !important; background-image: url(chrome://myextens
ion/skin/progress_bg_osx.png) !important; %endif %endif } richlistitem .progress-bar { %ifdef xp_win -moz-appearance: none !important; background-image: url(chrome://myextens
ion/skin/progress_fd_win.png) !important; %else %ifdef xp_macosx background-image: url(chrome://myextens
ion/skin/progress_fd_osx.gif) !important; %endif %endif } note: this file only supports windows and mac, but it would be straightforward to add support f...
... this is the product of some tweaking and experimentat
ion, so perhaps there is a different and/or better way to achieve the same thing.
...And 3 more matches
Drag & Drop - Archive of obsolete content
dropping files onto an xul applicat
ion it's possible to setup drag and drop events to handle dropping files from external applicat
ions or os file managers onto your xul-based applicat
ion.
...next, setup the handlers so that files can be dropped on the applicat
ion: funct
ion _dragover(aevent) { var dragservice = components.classes["@mozilla.org/widget/dragservice;1"].getservice(components.interfaces.nsidragservice); var dragsess
ion = dragservice.getcurrentsess
ion(); var supported = dragsess
ion.isdataflavorsupported("text/x-moz-url"); if (!supported) supported = dragsess
ion.isdataflavorsupported("applicat
ion/x-moz-file"); if (supported) dragsess
ion.candrop = true; } funct
ion _dragdrop(aevent) { var dragservice = components.cla...
...sses["@mozilla.org/widget/dragservice;1"].getservice(components.interfaces.nsidragservice); var dragsess
ion = dragservice.getcurrentsess
ion(); var _
ios = components.classes['@mozilla.org/network/
io-service;1'].getservice(components.interfaces.nsi
ioservice); var uris = new array(); // if sourcenode is not null, then the drop was from inside the applicat
ion if (dragsess
ion.sourcenode) return; // setup a transfer item to retrieve the file data var trans = components.classes["@mozilla.org/widget/transferable;1"].createinstance(components.interfaces.nsitransferable); trans.adddataflavor("text/x-moz-url"); trans.adddataflavor("applicat
ion/x-moz-file"); for (var i=0; i<dragsess
ion.numdropitems; i++) { var uri = null; dragsess
ion.getdata...
...And 3 more matches
LookupNamespaceURI - Archive of obsolete content
here is an implementat
ion of node.lookupnamespaceuri which should work cross-browser.
...this funct
ion is not necessary for gecko-based browsers (though the funct
ion will quickly return the standard value for mozilla browsers) when used to reflect on static documents.
... /*globals document, htmldocument */ (funct
ion () { 'use strict'; var doc = typeof document !== 'undefined' ?
...And 3 more matches
Environment variables affecting crash reporting - Archive of obsolete content
moz_crashreporter_fulldump store full applicat
ion memory in the minidump, so you can open it in a microsoft debugger.
... moz_crashreporter_shutdown save the minidump and then force the applicat
ion to close.
... this is useful for content crashes that don't normally close the chrome (main applicat
ion) processes.
...And 3 more matches
Bonsai - Archive of obsolete content
bonsai is tree control it is a tool that lets you perform queries on the contents of a cvs archive; you can: get a list of checkins, see what checkins have been made by a given person, or on a given cvs branch, or in a particular time per
iod.
... it also includes tools for looking at checkin logs (and comments); doing diffs between var
ious vers
ions of a file; and finding out which person is responsible for changing a particular line of code ("cvsblame").
... checkins to any branch of xfe by ramiro between 26-feb-1998 and 12-may-1998 differences between revis
ions 3.1 and 3.3 of the file mozilla/cmd/xfe/forms.c that's a small sample, but it should be enough to get you started.
...And 3 more matches
Adding the structure - Archive of obsolete content
« prev
iousnext » the ui for our extens
ion is an icon in the status bar.
...panel class="statusbarpanel-iconic" id="tinderbox-status" status="none"/> <statusbarpanel class="statusbarpanel-iconic" id="offline-status"/> <statusbarpanel class="statusbarpanel-iconic" id="security-button" onclick="browserpageinfo(null, 'securitytab')"/> </statusbar> the statusbar xul element defines a horizontal status bar where informative messages about an applicat
ion's state can be displayed.
...each status bar panel displays a different kind of status informat
ion.
...And 3 more matches
Finding the code to modify - Archive of obsolete content
the "document - dom nodes" pane on the left-hand side of the inspector window displays a tree representat
ion of the browser window's xul file.
... when you select a node in the tree, a red border flashes for several seconds around the visual representat
ion of that node in the browser window.
...notice the flashing red border around each different sect
ion of the status bar.
...And 3 more matches
Using Dehydra - Archive of obsolete content
as gcc compiles file, dehydra calls funct
ions in the user analysis script with informat
ion about the code being compiled.
... for more informat
ion, see the funct
ion reference and the object reference.
... example: printing the locat
ion of type declarat
ions save the following c++ code dumptypes.cc: typedef int myint; struct foo { int i; char *c; }; save the following analysis script dumptypes.js: funct
ion process_type(t) { print("type found: " + t.name + " locat
ion: " + t.loc); } funct
ion input_end() { print("hello, world!"); } compile using the following command: $ g++ -fplugin=~/dehydra/gcc_dehydra.so -fplugin-arg=~/dumptypes.js -o/dev/null -c dumptypes.cc note:for g++4.5 and up use -fplugin-arg-gcc_dehydra-script= rather than -fplugin-arg it should print the following results: type found: foo locat
ion: test.cc:2:12 type found: myint locat
ion: test.cc:1:13 hello, world!
...And 3 more matches
Download Manager improvements in Firefox 3 - Archive of obsolete content
in addit
ion, you can augment or replace the download manager's user interface by implementing the new nsidownloadmanagerui interface.
... note: these changes will require some modest revis
ions to code using the download manager; several methods have had minor changes.
... download manager interfaces nsidownloadmanager gives applicat
ions and extens
ions access to the download manager, allowing them to add and remove files to the download list, retrieve informat
ion about past and present downloads, and request notificat
ions as to the progress of downloads.
...And 3 more matches
Namespaces - Archive of obsolete content
in addit
ion to this document, see namespaces crash course.
...it holds and allows disambiguat
ion of items having the same name." if you are familiar with c++ namespaces, java packages, perl packages, or python module importing, you are already familiar with the namespace concept.
...here's a quest
ion: what namespace contains the element foo in the xml document below?
...And 3 more matches
Property - Archive of obsolete content
« xul reference accessible accessibletype accesskey align allnotificat
ions allowevents alwaysopenpopup amindicator applocale autocheck autofill autofillaftermatch boxobject browsers builder builderview buttons canadvance cangoback cangoforward canrewind checked checkstate child children classname clickselectsall clientheight clientwidth collapsed color columns command commandmanager completedefaultindex container contentdocument contentprincipal contenttitle contentview contentvieweredit contentviewerfile contentwindow contextmenu control controller controllers crop current currentindex currentitem currentnotificat
ion currentpage currentpane currentset currenturi cust...
...omtoolbarcount database datasources date dateleadingzero datevalue decimalplaces decimalsymbol defaultbutton defaultvalue descript
ion dir disableautocomplete disableautocomplete disableautoselect disabled disablekeynavigat
ion dlgtype docshell documentcharsetinfo editable editingcolumn editingrow editingsess
ion editor editortype emptytext deprecated since gecko 2 enablecolumndrag eventnode firstordinalcolumn firstpermanentchild flex focused focuseditem forcecomplete group handlectrlpageupdown handlectrltab hasuservalue height hidden hideseconds highlightnonmatches homepage hour hourleadingzero id ignoreblurwhilesearching image increment inputfield inverted is24hourclock ispm issearchi...
...ng iswaiting itemcount label labelelement lastpermanentchild lastselected left linkedpanel listboxobject locked markupdocumentviewer max maxheight maxlength maxrows maxwidth menu menuboxobject menupopup min minheight minresultsforpopup minwidth minute minuteleadingzero mode month monthleadingzero name next nomatch notificat
ionshidden object observes onfirstpage onlastpage open ordinal orient pack pagecount pageid pageincrement pageindex pagestep parentcontainer palette persist persistence placeholder pmindicator popup popupboxobject popupopen posit
ion predicate preferenceelements preferencepanes preferences pr
iority rad
iogroup readonly readonly ref resource res...
...And 3 more matches
Using Multiple Queries to Generate More Results - Archive of obsolete content
« prev
iousnext » combining results together one interesting technique is to use several queries to combine two sets of unrelated data together.
...if we add the following data about people to the neighbourhood datasource: <rdf:descript
ion rdf:about="http://www.xulplanet.com/rdf/myneighbourhood"> <r:people> <rdf:seq> <rdf:li rdf:resource="http://www.xulplanet.com/rdf/person/1"/> <rdf:li rdf:resource="http://www.xulplanet.com/rdf/person/2"/> </rdf:seq> </r:people> </rdf:descript
ion> <rdf:descript
ion rdf:about="http://www.xulplanet.com/rdf/person/1" dc:title="nathan"/> <...
...rdf:descript
ion rdf:about="http://www.xulplanet.com/rdf/person/2" dc:title="karen"/> we can then use two queries to generate results from different parts of the datasource.
...And 3 more matches
Toolbars - Archive of obsolete content
documentat
ion xul school: adding toolbars and toolbar buttons a helpful tutorial to creating toolbars and toolbar buttons.
... toolbar customizat
ion events a look at the events that are sent during toolbar customizat
ion; you can use these to be kept aware of changes to toolbars.
... creating toolbar buttons how to use overlays to add toolbar buttons to mozilla applicat
ions.
...And 3 more matches
Toolbars - Archive of obsolete content
« prev
iousnext » a toolbar is usually placed along the top of a window and contains a number of buttons that perform common funct
ions.
...in some applicat
ions, you will have several toolbars along the top of the window.
...customizable toolbars firefox or other toolkit applicat
ions have customizable toolbars; therefore, many extens
ions add their toolbar buttons to the toolbar palette, rather than adding them directly to the toolbar.
...And 3 more matches
XUL Tutorial - Archive of obsolete content
this language was created for the mozilla applicat
ion and is used to describe its user interface.
... introduct
ion introduct
ion xul structure the chrome url manifest files simple elements creating a window adding buttons adding labels and images input controls numeric controls list controls progress meters adding html elements using spacers more button features the box model the box model element posit
ioning box model details groupboxes adding more elements more layout elements stacks and decks stack posit
ioning tabboxes grids content panels splitters toolbars and menus toolbars simple menu bars more menu features popup menus scrolling menus events and scripts adding event handlers more event handlers keyboard shortcuts focus and select
ion commands updating commands broadcasters and observers document object model document obj...
...ect model modifying a xul interface manipulating lists box objects xpcom interfaces xpcom examples trees trees more tree features tree select
ion custom tree views tree view details tree box objects rdf and templates introduct
ion to rdf templates trees and templates rdf datasources advanced rules persistent data skins and locales adding style sheets styling a tree modifying the default skin creating a skin skinning xul files by hand localizat
ion property files bindings introduct
ion to xbl anonymous content xbl attribute inheritance adding properties adding methods adding event handlers xbl inheritance creating reusable content using css and xbl xbl example specialized window types features of a window creating dialogs open and save dialo...
...And 3 more matches
Using spell checking in XUL - Archive of obsolete content
spell checking funct
ionality is available starting in firefox 2.
... this document describes how to use the mozispellcheckingengine component to add spell checking capabilities to your firefox extens
ion.
... you may also want to check to see if the word is in the user's personal dict
ionary, since sometimes a word might be correctly spelled but in the dict
ionary.
...And 3 more matches
arrowscrollbox - Archive of obsolete content
more informat
ion is available in the xul tutorial.
.../> <button label="blue"/> <button label="green"/> <button label="yellow"/> <button label="orange"/> <button label="silver"/> <button label="lavender"/> <button label="gold"/> <button label="turquoise"/> <button label="peach"/> <button label="maroon"/> <button label="black"/> </arrowscrollbox> attributes inherited from xul element align, allowevents, allownegativeassert
ions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, posit
ion, preference-editable, querytype, ref, removeelement, sortdirect
ion, sortresource, sortr...
...if the element is disabled, it does not respond to user act
ions, it cannot be focused, and the command event will not fire.
...And 3 more matches
colorpicker - Archive of obsolete content
if the element is disabled, it does not respond to user act
ions, it cannot be focused, and the command event will not fire.
... visible controls have a disabled property which, except for menus and menuitems, is normally preferred to use of the attribute, as it may need to update addit
ional state.
...a change event is fired in different ways for different xul input elements as listed below: onchange type: script code textbox when enter key is pressed rad
io/check box when the state is changed select list when the selected item is changed what is accessible the script context at this point can only access the following things: global values/funct
ions i.e.
...And 3 more matches
content - Archive of obsolete content
propiedades tag, uri ejemplos (no son necesar
ios) atributos inherited from xul element align, allowevents, allownegativeassert
ions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, posit
ion, p...
...reference-editable, querytype, ref, removeelement, sortdirect
ion, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width propiedades tag type: tag name this may be set to a tag name.
... if set, the condit
ions will only match if the template builder is parsing content for an element directly inside this tag.
...And 3 more matches
groupbox - Archive of obsolete content
if a capt
ion element is placed inside the groupbox, it will be used as a capt
ion which appears along the top of the groupbox.
... typically, the groupbox will be drawn with a border around it and the capt
ion either above or over the top border, however the actual appearance will be platform specific.
... on linux, for instance, only the capt
ion appears with no border around the group.
...And 3 more matches
listcell - Archive of obsolete content
if the box direct
ion is reversed, the cropping is reversed.
...if the element is disabled, it does not respond to user act
ions, it cannot be focused, and the command event will not fire.
... visible controls have a disabled property which, except for menus and menuitems, is normally preferred to use of the attribute, as it may need to update addit
ional state.
...And 3 more matches
listheader - Archive of obsolete content
attributes disabled properties acesssibletype examples <listbox> <listhead> <listheader label="name"/> <listheader label="occupat
ion"/> </listhead> <listitem> <listcell label="george"/> <listcell label="house painter"/> </listitem> <listitem> <listcell label="mary ellen"/> <listcell label="candle maker"/> </listitem> <listitem> <listcell label="roger"/> <listcell label="swashbuckler"/> </listitem> </listbox> attributes disabled type: boolean indicates whether the element is disabled or not.
...if the element is disabled, it does not respond to user act
ions, it cannot be focused, and the command event will not fire.
... visible controls have a disabled property which, except for menus and menuitems, is normally preferred to use of the attribute, as it may need to update addit
ional state.
...And 3 more matches
preferences - Archive of obsolete content
examples <preferences> <preference id="pref_one" name="extens
ions.myextens
ion.one" type="bool"/> <preference id="pref_two" name="extens
ions.myextens
ion.two" type="string"/> ...
... inherited from xul element align, allowevents, allownegativeassert
ions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, posit
ion, preference-editable, querytype, ref, removeelement, sortdirect
ion, sortresource, sortr...
...see also the descript
ion of change event of <preference>.
...And 3 more matches
toolbox - Archive of obsolete content
it is a type of box but defaults to vertical orientat
ion.
... more informat
ion is available in the xul tutorial.
... if you'd like to detect when toolbars in a toolbox are changed, see toolbar customizat
ion events.
...And 3 more matches
Example 3 - Learn web development
change states html content <form class="no-widget"> <select name="myfruit" tabindex="-1"> <opt
ion>cherry</opt
ion> <opt
ion>lemon</opt
ion> <opt
ion>banana</opt
ion> <opt
ion>strawberry</opt
ion> <opt
ion>apple</opt
ion> </select> <div class="select" tabindex="0"> <span class="value">cherry</span> <ul class="optlist hidden"> <li class="opt
ion">cherry</li> <li class="opt
ion">lemon</li> <li class="opt
ion">banana</li> <li class="opt
ion">strawberry</li> <li class="opt
ion">apple</li> </ul> </div> </form> css content .widget select, .no-widget .select { posit
ion : absolute; left : -5000em; height : 0; overflow : hidden; } /* --...
...------------- */ /* required styles */ /* --------------- */ .select { posit
ion: relative; display : inline-block; } .select.active, .select:focus { box-shadow: 0 0 3px 1px #227755; outline: none; } .select .optlist { posit
ion: absolute; top : 100%; left : 0; } .select .optlist.hidden { max-height: 0; visibility: hidden; } /* ------------ */ /* fancy styles */ /* ------------ */ .select { font-size : 0.625em; /* 10px */ font-family : verdana, arial, sans-serif; -moz-box-sizing : border-box; box-sizing : border-box; padding : 0.1em 2.5em 0.2em 0.5em; /* 1px 25px 2px 5px */ width : 10em; /* 100px */ border : 0.2em solid #000; /* 2px */ border-radius : 0.4em; /* 4px */ box-shadow : 0 0.1em 0.2em rgba(0,0,0,.45); /* 0 1px 2px */ ...
...background : #f0f0f0; background : -webkit-linear-gradient(90deg, #e3e3e3, #fcfcfc 50%, #f0f0f0); background : linear-gradient(0deg, #e3e3e3, #fcfcfc 50%, #f0f0f0); } .select .value { display : inline-block; width : 100%; overflow : hidden; white-space : nowrap; text-overflow : ellipsis; vertical-align: top; } .select:after { content : "▼"; posit
ion: absolute; z-index : 1; height : 100%; width : 2em; /* 20px */ top : 0; right : 0; padding-top : .1em; -moz-box-sizing : border-box; box-sizing : border-box; text-align : center; border-left : .2em solid #000; border-radius: 0 .1em .1em 0; background-color : #000; color : #fff; } .select .optlist { z-index : 2; list-style: none; margin : 0; padding: 0; background...
...And 3 more matches
Test your skills: Form structure - Learn web development
note: you can try out the solut
ion in the interactive editor below, however it may be helpful to download the code and use an online tool such as codepen, jsfiddle, or glitch to work on the tasks.
... if you get stuck, then ask us for help — see the assessment or further help sect
ion at the bottom of this page.
... form structure 1 in this task we want you to structure the provided form features: separate out the first two and second two form fields into two distinct containers, each with a descriptive legend (use "personal details" for the first two, and "comment informat
ion" for the second two).
...And 3 more matches
Test your skills: Other controls - Learn web development
note: you can try out solut
ions in the interactive editors below, however it may be helpful to download the code and use an online tool such as codepen, jsfiddle, or glitch to work on the tasks.
... if you get stuck, then ask us for help — see the assessment or further help sect
ion at the bottom of this page.
... associate the list with your text input, so that when you type characters, any of the list opt
ions that match the character sequence are given in a dropdown list as autocomplete suggest
ions.
...And 3 more matches
Server-side website programming - Learn web development
the dynamic websites – server-side programming topic is a series of modules that show how to create dynamic websites; websites that deliver customised informat
ion in response to http requests.
... the modules provide a general introduct
ion to server-side programming.
... learning pathway getting started with server-side programming is usually easier than client-side development, because dynamic websites tend to perform a lot of very similar operat
ions (retrieving data from a database and displaying it in a page, validating user-entered data and saving it in a database, checking user permiss
ions and logging users in, etc.), and are constructed using web frameworks that make these and other common web server operat
ions easy.
...And 3 more matches
Choosing the right memory allocator
use these if you link against xpcom or xpcom glue; this includes extens
ions with binary components.
... see the xpcom string guide for addit
ional informat
ion.
... ns_alloc() == nsimemory::alloc() ns_realloc() == nsimemory::realloc() ns_free() == nsimemory::free() nsmemory::clone() (note: not part of nsimemory) see infallible memory allocat
ion for informat
ion about how to allocate memory infallibly; that is, how to use memory allocators that will only return valid memory buffers, and never return null.
...And 3 more matches
Creating MozSearch plugins
it should only be used if your intent
ion is to distribute the search plugin packaged in a firefox extens
ion, or if you are creating plugins meant to be shipped by default in a firefox build.
... for creating search plugins for installat
ion from the web, see creating opensearch plugins for firefox the plugin file the mozsearch format is similar to the opensearch format.
... the following xml is the bundled firefox 2 search plugin for searching using yahoo!: <searchplugin xmlns="http://www.mozilla.org/2006/browser/search/"> <shortname>yahoo</shortname> <descript
ion>yahoo search</descript
ion> <inputencoding>utf-8</inputencoding> <image width="16" height="16">data:image/x-icon;base64,r0lgodlheaaqajecap8aaaaaap///waaach5baeaaaialaaaaaaqabaaaaipli+py+0nogquybdened2khkffwuamezmpzsfmaihphrrguum/ft+uwaaow==</image> <url type="applicat
ion/x-suggest
ions+json" method="get" template="http://ff.search.yahoo.com/gossip?output=fxjson&command={searchterms}" /> <url type="text/html" method="get" template="http://search.yahoo.com/search"> <param name="p" value="{searchterms}"/> ...
...And 3 more matches
HTMLIFrameElement.executeScript()
note: use of the browser api requires a privileged app, and browser and/or embed-apps permiss
ions, depending on what you want to do.
... syntax var mydomrequest = instanceofhtmliframeelement.executescript(script, opt
ions); return value a domrequest object that returns an onsuccess handler if the script is successfully executed against the loaded content, or an onerror handler if not.
... opt
ions opt
ional opt
ionally, you can provide an origin or url for the script to be executed against.
...And 3 more matches
HTMLIFrameElement.getMuted()
do not use it on product
ion sites facing the web: it will not work for every user.
... there may also be large incompatibilities between implementat
ions and the behav
ior may change in the future.
... syntax there are two vers
ions of this method, a callback vers
ion: var request = instanceofhtmliframeelement.getmuted(); and a promise vers
ion: instanceofhtmliframeelement.getmuted().then(funct
ion(muted) { ...
...And 3 more matches
HTMLIFrameElement.getVolume()
do not use it on product
ion sites facing the web: it will not work for every user.
... there may also be large incompatibilities between implementat
ions and the behav
ior may change in the future.
... syntax there are two vers
ions of this method, a callback vers
ion: var request = instanceofhtmliframeelement.getvolume(); and a promise vers
ion: instanceofhtmliframeelement.getvolume().then(funct
ion(volume) { ...
...And 3 more matches
mozbrowserscroll
do not use it on product
ion sites facing the web: it will not work for every user.
... there may also be large incompatibilities between implementat
ions and the behav
ior may change in the future.
... general info specificat
ion non standard interface customevent bubbles yes cancelable yes target <iframe> default act
ion none properties property type descript
ion target read only eventtarget the browser iframe type read only domstring the type of event.
...And 3 more matches
MozScrolledAreaChanged
note: while you can poll the values of document.scrollwidth and document.scrollheight to watch for changes to the document size, reading these properties can trigger document reflow, which can make them computat
ionally expensive.
... specificat
ion mozilla specific interface uievent bubbles yes cancelable yes target defaultview, document default act
ion none properties property type descript
ion targetread only eventtarget the event target (the topmost target in the dom tree).
... widthread only long (int) the width of the visible reg
ion of the document.
...And 3 more matches
JavaScript Tips
xul tips when inserting code with an xul overlay, wrap funct
ions and variables inside an object with a unique name to avoid conflicting with existing or future funct
ion and variable names.
... var uniquename = { _privatemember: 3, publicmember: "a string", init: funct
ion() { this.dosomething(this.anothermember); }, dosomething: funct
ion(aparam) { alert(aparam); } }; xpconnect don't use object methods and properties more than you have to.
...however, in javascript this is quite simple even in the case of a weak reference which in c++ requires a helper class: var weakobserver = { queryinterface: funct
ion queryinterface(aiid) { if (aiid.equals(components.interfaces.ns
iobserver) || aiid.equals(components.interfaces.nsisupportsweakreference) || aiid.equals(components.interfaces.nsisupports)) return this; throw components.results.ns_nointerface; }, observe: funct
ion observe(asubject, atopic, astate) { } } when declaring xpcom methods, try to use the same name...
...And 3 more matches
UpdateListener
for each individual update check, the following methods will be called on the listener: either oncompatibilityupdateavailable() or onnocompatibilityupdateavailable(), depending on whether compatibility informat
ion for the requested applicat
ion vers
ion was seen.
... either onupdateavailable() or onnoupdateavailable(), depending on whether a newer vers
ion of the addon was found.
...patibilityupdateavailable(in addon addon) void onnocompatibilityupdateavailable(in addon addon) void onupdateavailable(in addon addon, in addoninstall install) void onnoupdateavailable(in addon addon) void onupdatefinished(in addon addon, in integer error) methods oncompatibilityupdateavailable() called when the update check found compatibility informat
ion for the applicat
ion and platform vers
ion that the update check was being performed for.
...And 3 more matches
Http.jsm
onload a funct
ion handle to call when the load is complete, it takes two parameters: the responsetext and the xhr object.
... onerror a funct
ion handle to call when an error occurs, it takes three parameters: the error, the responsetext and the xhr object.
...the data can be specified via postdata opt
ion.
...And 3 more matches
Reporting a Performance Problem
if you choose custom settings (and then clicking edit settings) for the profiler, you can adjust the size of the buffer (presently defaults to 90 mb) and the time interval between data collect
ion (presently defaults to 1 ms).
...wait until the "symbolicating call stacks" notificat
ion disappears before sharing the profile.
... note that while it's possible to strip profiles of potentially privacy sensitive informat
ion, the less informat
ion a profile contains, the harder it is to analyze and turn into act
ionable data.
...And 3 more matches
nsIAuthPrompt
netwerk/base/public/nsiauthprompt.idlscriptable this interface allows the networking layer to pose a user/password prompt to obtain the values needed for authenticat
ion.
..., out wstring result); boolean promptpassword(in wstring dialogtitle, in wstring text, in wstring passwordrealm, in pruint32 savepassword, inout wstring pwd); boolean promptusernameandpassword(in wstring dialogtitle, in wstring text, in wstring passwordrealm, in pruint32 savepassword, inout wstring user, inout wstring pwd); constants constant value descript
ion save_password_never 0 never saves the password.
... save_password_for_sess
ion 1 saves the password for the sess
ion.
...And 3 more matches
nsIBinaryOutputStream
xpcom/
io/nsibinaryoutputstream.idlscriptable this interface allows writing of primitive data types (integers, floating-point values, booleans, and so on.) to a stream in a binary, untagged, fixed-endianness format.
...output is written in big-endian order (high-order byte first), as this is tradit
ional network order.
... inherits from: ns
ioutputstream last changed in gecko 1.7 method overview void setoutputstream(in ns
ioutputstream aoutputstream); void write8(in pruint8 abyte); void write16(in pruint16 a16); void write32(in pruint32 a32); void write64(in pruint64 a64); void writeboolean(in prbool aboolean); void writebytearray([array, size_is(alength)] in pruint8 abytes, in pruint32 alength); void writebytes(alength)] in string astring, in pruint32 alength); void writedouble(in double adouble); void writefloat(in float afloat); void writestringz(in string astring); void writeutf8z(in wstring astring); void writewstringz(in wstring astring); methods setoutputstream() sets the stream to which output is directed.
...And 3 more matches
nsIConverterOutputStream
xpcom/
io/nsiconverteroutputstream.idlscriptable this interface allows writing strings to a stream, doing automatic character encoding convers
ion.
...to create an instance, use: var converteroutputstream = components.classes["@mozilla.org/intl/converter-output-stream;1"] .createinstance(components.interfaces.nsiconverteroutputstream); method overview void init(in ns
ioutputstream aoutstream, in string acharset, in unsigned long abuffersize, in prunichar areplacementcharacter); methods init() initialize this stream.
...void init( in ns
ioutputstream aoutstream, in string acharset, in unsigned long abuffersize, in prunichar areplacementcharacter ); parameters aoutstream the underlying output stream to which the converted strings will be written.
...And 3 more matches
nsICryptoHMAC
these values are to be used by the init() method to indicate which hashing funct
ion to use.
... constant value descript
ion md2 1 message digest algorithm 2 md5 2 message-digest algorithm 5 sha1 3 secure hash algorithm 1 sha256 4 secure hash algorithm 256 sha384 5 secure hash algorithm 384 sha512 6 secure hash algorithm 512 methods finish() completes this hmac object and produces the actual hmac diegest data.
...except
ions thrown ns_error_not_initialized if init() has not been called.
...And 3 more matches
nsICycleCollectorListener
xpcom/base/nsicyclecollectorlistener.idlscriptable interface to pass to the cycle collector to get informat
ion about the cycle collector graph while it is being built.
... 1.0 66 introduced gecko 2.0 inherits from: nsisupports last changed in gecko 2.0 (firefox 4 / thunderbird 3.3 / seamonkey 2.1) the order of calls will be call to begin(); then for every node in the graph a call to noteobject() and calls to noteedge() for every edge starting at that node; then a call to begindescript
ions(); then for every black node in the cycle collector graph a call to either describerefcountedobject() or to describegcedobject(); and then a call to end().
... if begin() returns an error none of the other funct
ions will be called.
...And 3 more matches
nsIDBChangeListener
the nsidbchangelistener interface is used by components wanting to receive notificat
ion when the current database changes somehow.
... example here is an example implementat
ion of the listener (that does nothing): var mylistener = { onhdrflagschanged: funct
ion(ahdrchanged, aoldflags, anewflags, ainstigator) {}, onhdrdeleted: funct
ion(ahdrchanged, aparentkey, aflags, ainstigator) {}, onhdradded: funct
ion(ahdrchanged, aparentkey, aflags, ainstigator) {}, onparentchanged: funct
ion(akeychanged, oldparent, newparent, ainstigator) {}, onannouncergoingaway: funct
ion(ainstigator) {}, onreadchanged: funct
ion(ainstigator) {}, onjunkscorechanged: funct
ion(ainstigator) {}, onhdrpropertychanged: funct
ion(ahdrtochange, aprechange, astatus, ainstigator) {}, onevent: funct
ion(adb, aevent) {}, queryinterface: funct
ion(aiid) { if (!aiid.equals(components.interfaces.nsidbchangelistener) && !aiid.equals(com...
...the calling funct
ion stores the value of astatus, changes the header ahdrtochange, then calls onhdrpropertychanged again with aprechange false.
...And 3 more matches
nsIDOMProgressEvent
dom/interfaces/events/nsidomprogressevent.idlscriptable this interface represents the events sent with progress informat
ion while uploading data using the xmlhttprequest object.
... 1.0 66 introduced gecko 1.9.1 deprecated gecko 22 inherits from: nsidomevent last changed in gecko 1.9.1 (firefox 3.5 / thunderbird 3.0 / seamonkey 2.0) the nsidomprogressevent is used in the media elements (<video> and <aud
io>) to inform interested code of the progress of the media download.
... this implementat
ion is a placeholder until the specificat
ion is complete, and is compatible with the webkit progressevent.
...And 3 more matches
nsIDroppedLinkHandler
1.0 66 introduced gecko 2.0 inherits from: nsisupports last changed in gecko 2.0 (firefox 4 / thunderbird 3.3 / seamonkey 2.1) method overview boolean candroplink(in nsidomdragevent aevent, in prbool aallowsamedocument); astring droplink(in nsidomdragevent aevent, out astring aname, [opt
ional] in boolean adisallowinherit); void droplinks(in nsidomdragevent aevent, [opt
ional] in boolean adisallowinherit, [opt
ional] out unsigned long acount, [retval, array, size_is(acount)] out nsidroppedlinkitem alinks); methods candroplink() determines if a link being dragged can be dropped.
... aallowsamedocument if false, drops are only allowed if the document of the source of the drag is different from the destinat
ion.
... except
ions thrown missing except
ion missing descript
ion droplink() given a drop event, determines the link being dragged.
...And 3 more matches
nsIDynamicContainer
it can also create addit
ional containers for each container, registered to its service.
... method overview void oncontainermoved(in long long aitemid, in long long anewparent, in long anewindex); void oncontainernodeclosed(in nsinavhistorycontainerresultnode acontainer); void oncontainernodeopening(in nsinavhistorycontainerresultnode acontainer, in nsinavhistoryqueryopt
ions aopt
ions); void oncontainerremoving(in long long aitemid); methods oncontainermoved() this method is called when the given container has just been moved, in case the service needs to do any bookkeeping.
...void oncontainernodeopening( in nsinavhistorycontainerresultnode acontainer, in nsinavhistoryqueryopt
ions aopt
ions ); parameters acontainer the container node for the container being opened.
...And 3 more matches
nsIEventListenerService
method overview void geteventtargetchainfor(in nsidomeventtarget aeventtarget, [opt
ional] out unsigned long acount, [retval, array, size_is(acount)] out nsidomeventtarget aoutarray); void getlistenerinfofor(in nsidomeventtarget aeventtarget, [opt
ional] out unsigned long acount, [retval, array, size_is(acount)] out nsieventlistenerinfo aoutarray); boolean haslistenersfor(in nsidomeventtarget aeventtarget, in domstring atype); void ad...
...dsystemeventlistener(in nsidomeventtarget target, in domstring type, in nsidomeventlistener listener, in boolean usecapture); void removesystemeventlistener(in nsidomeventtarget target, in domstring type, in nsidomeventlistener listener, in boolean usecapture); attributes attribute type descript
ion systemeventgroup nsidomeventgroup returns system event group.
...void geteventtargetchainfor( in nsidomeventtarget aeventtarget, [opt
ional] out unsigned long acount, [retval, array, size_is(acount)] out nsidomeventtarget aoutarray ); parameters aeventtarget the nsidomeventtarget for which to return the event target chain.
...And 3 more matches
nsIFeedResult
1.0 66 introduced gecko 1.8 inherits from: nsisupports last changed in gecko 1.8 (firefox 1.5 / thunderbird 1.5 / seamonkey 1.0) method overview void registerextens
ionprefix(in astring anamespace, in astring aprefix); attributes attribute type descript
ion bozo boolean the feed processor sets the bozo bit when a feed triggers a fatal error during xml parsing.
...some feeds include this informat
ion in a processing instruct
ion.
... vers
ion astring the vers
ion of the feed; null if a non-feed is processed.
...And 3 more matches
nsIFileInputStream
inherits from: nsiinputstream last changed in gecko 1.7 method overview void init(in nsifile file, in long
ioflags, in long perm, in long behav
iorflags); constants constant value descript
ion delete_on_close 1<<1 if this is set, the file will be deleted by the time the stream is closed.
...(the file will only be reopened if it is closed for some reason.) defer_open 1<<4 if this is set, the file will be opened (i.e., a call to pr_open() done) only when we do an actual operat
ion on the stream, or more specifically, when one of the following is called: seek() tell() available() read() readline() defer_open is useful if we use the stream on a background thread, so that the opening and possible stating of the file happens there as well.
... methods init() void init( in nsifile file, in long
ioflags, in long perm, in long behav
iorflags ); parameters file file to read from (must qi to nsilocalfile)
ioflags the file status flags define how the file is accessed.
...And 3 more matches
nsIFrameMessageManager
method overview void addmessagelistener(in astring amessage, in nsiframemessagelistener alistener, [opt
ional] in boolean listenwhenclosed); void removemessagelistener(in astring amessage, in nsiframemessagelistener alistener); void sendasyncmessage(in astring amessage, in astring json); methods addmessagelistener() adds a message listener to the local frame.
... void addmessagelistener( in astring amessage, in nsiframemessagelistener alistener [opt
ional in boolean listenwhenclosed ); parameters amessage the name of the message for which to add a listener.
...set to oo if you want to receive messages during the short per
iod after a frame has been removed from the dom and before its frame script has finished unloading.
...And 3 more matches
nsIJumpListItem
1.0 66 introduced gecko 2.0 inherits from: nsisupports last changed in gecko 2.0 (firefox 4 / thunderbird 3.3 / seamonkey 2.1) note: to consumers: it's reasonable to expect we'll need support for other types of jump list items (an aud
io file, an email message, etc.).
... to add types, create the specific interface here, add an implementat
ion class to winjumplistitem, and add support to addlistbuild and removed items processing.
... method overview boolean equals(in nsijumplistitem item); attributes attribute type descript
ion type short retrieves the jump list item type.
...And 3 more matches
nsIMemoryMultiReporterCallback
1.0 66 introduced gecko 7.0 inherits from: nsisupports last changed in gecko 7.0 (firefox 7.0 / thunderbird 7.0 / seamonkey 2.4) method overview void callback(in acstring process, in autf8string path, in print32 kind, in print32 units, in print64 amount, in autf8string descript
ion, in nsisupports closure); methods callback() called to provide informat
ion from a multi-reporter.
... implement this method to handle the report informat
ion.
... void callback( in acstring process, in autf8string path, in print32 kind, in print32 units, in print64 amount, in autf8string descript
ion, in nsisupports closure ); parameters process the value of the process attribute for the memory reporter.
...And 3 more matches
FontFaceSetLoadEvent.fontfaces - Web APIs
specificat
ions specificat
ion status comment css font loading module level 3the definit
ion of 'fontfaces' in that specificat
ion.
... working draft initial definit
ion.
... desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on
iossamsung internetfontfaces experimentalchrome full support 35edge full support ≤79firefox full support yesie ?
...And 3 more matches
FormData.append() - Web APIs
syntax there are two vers
ions of this method: a two and a three parameter vers
ion: formdata.append(name, value); formdata.append(name, value, filename); parameters name the name of the field whose data is contained in value.
... filename opt
ional the filename reported to the server (a usvstring), when a blob or file is passed as the second parameter.
... note: if you specify a blob as the data to append to the formdata object, the filename that will be reported to the server in the "content-disposit
ion" header used to vary from browser to browser.
...And 3 more matches
Gamepad.id - Web APIs
the gamepad.id property of the gamepad interface returns a string containing some informat
ion about the controller.
... the exact syntax is not strictly specified, but in firefox it will contain three pieces of informat
ion separated by dashes (-): two 4-digit hexadecimal strings containing the usb vendor and product id of the controller the name of the controller as provided by the driver.
... this informat
ion is intended to allow you to find a mapping for the controls on the device as well as display useful feedback to the user.
...And 3 more matches
GamepadHapticActuator.pulse() - Web APIs
the pulse() method of the gamepadhapticactuator interface makes the hardware pulse at a certain intensity for a specified durat
ion.
... syntax gamepadhapticactuatorinstance.pulse(value, durat
ion).then(funct
ion(result) { ...
... durat
ion a double representing the durat
ion of the pulse, in milliseconds.
...And 3 more matches
GlobalEventHandlers.onclick - Web APIs
note: when using the click event to trigger an act
ion, also consider adding this same act
ion to the keydown event, to allow the use of that same act
ion by people who don't use a mouse or a touch screen.
... syntax target.onclick = funct
ionref; value funct
ionref is a funct
ion name or a funct
ion express
ion.
... the funct
ion receives a mouseevent object as its sole argument.
...And 3 more matches
GlobalEventHandlers.oncontextmenu - Web APIs
unless the default behav
ior is prevented, the browser context menu will activate.
... syntax target.oncontextmenu = funct
ionref; value funct
ionref is a funct
ion name or a funct
ion express
ion.
... the funct
ion receives an event object as its sole argument.
...And 3 more matches
GlobalEventHandlers.ondragend - Web APIs
<!doctype html> <html lang=en> <title>examples of using the drag and drop global event attribute</title> <meta content="width=device-width"> <style> div { margin: 0em; padding: 2em; } #source { color: blue; border: 1px solid black; } #target { border: 1px solid black; } </style> </head> <script> funct
ion dragstart_handler(ev) { console.log("dragstart"); // change the source element's background color to signify drag has started ev.currenttarget.style.border = "dashed"; ev.datatransfer.setdata("text", ev.target.id); } funct
ion dragover_handler(ev) { console.log("dragover"); // change the target element's border to signify a drag over event // has occurred ev.currenttarget.style.backgroun...
...d = "lightblue"; ev.preventdefault(); } funct
ion drop_handler(ev) { console.log("drop"); ev.preventdefault(); var data = ev.datatransfer.getdata("text"); ev.target.appendchild(document.getelementbyid(data)); } funct
ion dragenter_handler(ev) { console.log("dragenter"); // change the source element's background color for enter events ev.currenttarget.style.background = "yellow"; } funct
ion dragleave_handler(ev) { console.log("dragleave"); // change the source element's border back to white ev.currenttarget.style.background = "white"; } funct
ion dragend_handler(ev) { console.log("dragend"); // change the target element's background color to visually indicate // the drag ended.
... var el=document.getelementbyid("target"); el.style.background = "pink"; } funct
ion dragexit_handler(ev) { console.log("dragexit"); // change the source element's border back to green to signify a dragexit event ev.currenttarget.style.background = "green"; } funct
ion init() { // set handlers for the source's enter/leave/end/exit events var el=document.getelementbyid("source"); el.ondragenter = dragenter_handler; el.ondragleave = 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 ...
...And 3 more matches
GlobalEventHandlers.ondragenter - Web APIs
<!doctype html> <html lang=en> <title>examples of using the drag and drop global event attribute</title> <meta content="width=device-width"> <style> div { margin: 0em; padding: 2em; } #source { color: blue; border: 1px solid black; } #target { border: 1px solid black; } </style> </head> <script> funct
ion dragstart_handler(ev) { console.log("dragstart"); // change the source element's background color to signify drag has started ev.currenttarget.style.border = "dashed"; ev.datatransfer.setdata("text", ev.target.id); } funct
ion dragover_handler(ev) { console.log("dragover"); // change the target element's border to signify a drag over event // has occurred ev.currenttarget.style.backgroun...
...d = "lightblue"; ev.preventdefault(); } funct
ion drop_handler(ev) { console.log("drop"); ev.preventdefault(); var data = ev.datatransfer.getdata("text"); ev.target.appendchild(document.getelementbyid(data)); } funct
ion dragenter_handler(ev) { console.log("dragenter"); // change the source element's background color for enter events ev.currenttarget.style.background = "yellow"; } funct
ion dragleave_handler(ev) { console.log("dragleave"); // change the source element's border back to white ev.currenttarget.style.background = "white"; } funct
ion dragend_handler(ev) { console.log("dragend"); // change the target element's background color to visually indicate // the drag ended.
... var el=document.getelementbyid("target"); el.style.background = "pink"; } funct
ion dragexit_handler(ev) { console.log("dragexit"); // change the source element's border back to green to signify a dragexit event ev.currenttarget.style.background = "green"; } funct
ion init() { // set handlers for the source's enter/leave/end/exit events var el=document.getelementbyid("source"); el.ondragenter = dragenter_handler; el.ondragleave = 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 ...
...And 3 more matches
GlobalEventHandlers.ondragexit - Web APIs
<!doctype html> <html lang=en> <title>examples of using the drag and drop global event attribute</title> <meta content="width=device-width"> <style> div { margin: 0em; padding: 2em; } #source { color: blue; border: 1px solid black; } #target { border: 1px solid black; } </style> </head> <script> funct
ion dragstart_handler(ev) { console.log("dragstart"); // change the source element's background color to signify drag has started ev.currenttarget.style.border = "dashed"; ev.datatransfer.setdata("text", ev.target.id); } funct
ion dragover_handler(ev) { console.log("dragover"); // change the target element's border to signify a drag over event // has occurred ev.currenttarget.style.backgroun...
...d = "lightblue"; ev.preventdefault(); } funct
ion drop_handler(ev) { console.log("drop"); ev.preventdefault(); var data = ev.datatransfer.getdata("text"); ev.target.appendchild(document.getelementbyid(data)); } funct
ion dragenter_handler(ev) { console.log("dragenter"); // change the source element's background color for enter events ev.currenttarget.style.background = "yellow"; } funct
ion dragleave_handler(ev) { console.log("dragleave"); // change the source element's border back to white ev.currenttarget.style.background = "white"; } funct
ion dragend_handler(ev) { console.log("dragend"); // change the target element's background color to visually indicate // the drag ended.
... var el=document.getelementbyid("target"); el.style.background = "pink"; } funct
ion dragexit_handler(ev) { console.log("dragexit"); // change the source element's border back to green to signify a dragexit event ev.currenttarget.style.background = "green"; } funct
ion init() { // set handlers for the source's enter/leave/end/exit events var el=document.getelementbyid("source"); el.ondragenter = dragenter_handler; el.ondragleave = 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 ...
...And 3 more matches
GlobalEventHandlers.ondragleave - Web APIs
<!doctype html> <html lang=en> <title>examples of using the drag and drop global event attribute</title> <meta content="width=device-width"> <style> div { margin: 0em; padding: 2em; } #source { color: blue; border: 1px solid black; } #target { border: 1px solid black; } </style> </head> <script> funct
ion dragstart_handler(ev) { console.log("dragstart"); // change the source element's border to signify drag has started ev.currenttarget.style.border = "dashed"; ev.datatransfer.setdata("text", ev.target.id); } funct
ion dragover_handler(ev) { console.log("dragover"); // change the target element's background color to signify a drag over event // has occurred ev.currenttarget.style.backgroun...
...d = "lightblue"; ev.preventdefault(); } funct
ion drop_handler(ev) { console.log("drop"); ev.preventdefault(); var data = ev.datatransfer.getdata("text"); ev.target.appendchild(document.getelementbyid(data)); } funct
ion dragenter_handler(ev) { console.log("dragenter"); // change the source element's background color for enter events ev.currenttarget.style.background = "yellow"; } funct
ion dragleave_handler(ev) { console.log("dragleave"); // change the source element's background color back to white ev.currenttarget.style.background = "white"; } funct
ion dragend_handler(ev) { console.log("dragend"); // change the target element's background color to visually indicate // the drag ended.
... var el=document.getelementbyid("target"); el.style.background = "pink"; } funct
ion dragexit_handler(ev) { console.log("dragexit"); // change the source element's background color back to green to signify a dragexit event ev.currenttarget.style.background = "green"; } funct
ion init() { // set handlers for the source's enter/leave/end/exit events var el=document.getelementbyid("source"); el.ondragenter = dragenter_handler; el.ondragleave = 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 elem...
...And 3 more matches
GlobalEventHandlers.onselectstart - Web APIs
the selectstart event fires when the user starts to make a new text select
ion on a webpage.
... syntax object.onselectstart = funct
ionref; value funct
ionref is a funct
ion name or a funct
ion express
ion.
... the funct
ion receives a focusevent object as its sole argument.
...And 3 more matches
HTMLDialogElement.show() - Web APIs
still allowing interact
ion with content outside of the dialog.
... <!-- simple pop-up dialog box, containing a form --> <dialog id="favdialog"> <form method="dialog"> <sect
ion> <p><label for="favanimal">favorite animal:</label> <select id="favanimal" name="favanimal"> <opt
ion></opt
ion> <opt
ion>brine shrimp</opt
ion> <opt
ion>red panda</opt
ion> <opt
ion>spider monkey</opt
ion> </select></p> </sect
ion> <menu> <button id="cancel" type="reset">cancel</button> <button type="submit">conf...
...irm</button> </menu> </form> </dialog> <menu> <button id="updatedetails">update details</button> </menu> <script> (funct
ion() { var updatebutton = document.getelementbyid('updatedetails'); var cancelbutton = document.getelementbyid('cancel'); var dialog = document.getelementbyid('favdialog'); dialog.returnvalue = 'favanimal'; funct
ion opencheck(dialog) { if(dialog.open) { console.log('dialog open'); } else { console.log('dialog closed'); } } // update button opens a modal dialog updatebutton.addeventlistener('click', funct
ion() { dialog.showmodal(); opencheck(dialog); }); // form cancel button closes the dialog box cancelbutton.addeventl...
...And 3 more matches
accessKeyLabel - Web APIs
syntax label = element.accesskeylabel example javascript var node = document.getelementbyid('btn1'); if (node.accesskeylabel) { node.title += ' [' + node.accesskeylabel + ']'; } else { node.title += ' [' + node.accesskey + ']'; } node.onclick = funct
ion () { var p = document.createelement('p'); p.textcontent = 'clicked!'; node.parentnode.appendchild(p); }; html <button accesskey="h" title="capt
ion" id="btn1">hover me</button> result specificat
ions specificat
ion status comment html living standardthe definit
ion of 'htmlelement.accesskeylabel' in that specificat
ion.
... living standard no change from initial definit
ion.
... html 5.1 recommendat
ion removed.
...And 3 more matches
HTMLElement: change event - Web APIs
the change event is fired for <input>, <select>, and <textarea> elements when an alterat
ion to the element's value is committed by the user.
... unlike the input event, the change event is not necessarily fired for each alterat
ion to an element's value.
... bubbles yes cancelable no interface event event handler property onchange depending on the kind of element being changed and the way the user interacts with the element, the change event fires at a different moment: when the element is :checked (by clicking or using the keyboard) for <input type="rad
io"> and <input type="checkbox">; when the user commits the change explicitly (e.g., by selecting a value from a <select>'s dropdown with a mouse click, by selecting a date from a date picker for <input type="date">, by selecting a file in the file picker for <input type="file">, etc.); when the element loses focus after its value was changed, but not commited (e.g., after editing the value of <textarea> or <input type="text">).
...And 3 more matches
HTMLElement: pointercancel event - Web APIs
bubbles yes cancelable no interface pointerevent event handler property onpointercancel some examples of situat
ions that will trigger a pointercancel event: a hardware event occurs that cancels the pointer activities.
... this may include, for example, the user switching applicat
ions using an applicat
ion switcher interface or the "home" button on a mobile device.
... the device's screen orientat
ion is changed while the pointer is active.
...And 3 more matches
ResizeObserver.observe() - Web APIs
syntax resizeobserver.observe(target, opt
ions); parameters target a reference to an element or svgelement to be observed.
... opt
ions opt
ional an opt
ions object allowing you to set opt
ions for the observat
ion.
... currently this only has one possible opt
ion that can be set: box sets which box model the observer will observe changes to.
...And 3 more matches
ResizeObserver - Web APIs
the resizeobserver interface reports changes to the dimens
ions of an element's content or border box, or the bounding box of an svgelement.
...see the box model for further explanat
ion.
... resizeobserver avoids infinite callback loops and cyclic dependencies that are often created when resizing via a callback funct
ion.
...And 3 more matches
ResizeObserverEntry - Web APIs
the resizeobserverentry interface represents the object passed to the resizeobserver() constructor's callback funct
ion, which allows you to access the new dimens
ions of the element or svgelement being observed.
...note that this is better supported than the above two properties, but it is left over from an earlier implementat
ion of the resize observer api, is still included in the spec for web compat reasons, and may be deprecated in future vers
ions.
...see the box model for further explanat
ion.
...And 3 more matches
RsaOaepParams - Web APIs
the rsaoaepparams dict
ionary of the web crypto api represents the object that should be passed as the algorithm parameter into subtlecrypto.encrypt(), subtlecrypto.decrypt(), subtlecrypto.wrapkey(), or subtlecrypto.unwrapkey(), when using the rsa_oaep algorithm.
... label opt
ional a buffersource — an array of bytes that does not itself need to be encrypted but which should be bound to the ciphertext.
... a digest of the label is part of the input to the encrypt
ion operat
ion.
...And 3 more matches
SVGExternalResourcesRequired - Web APIs
<div id="interfacediagram" style="display: inline-block; posit
ion: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; posit
ion: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectrat
io="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="mi...
...ddle">svgexternalresourcesrequired</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} warning: this interface was removed in the svg 2 specificat
ion.
... note: the svg dom defines the attribute externalresourcesrequired as being of type svganimatedboolean, whereas the svg language definit
ion says that the attribute is not animated.
...And 3 more matches
SVGFEBlendElement - Web APIs
<div id="interfacediagram" style="display: inline-block; posit
ion: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; posit
ion: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectrat
io="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="...
...rect x="311" y="65" width="170" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="396" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgfeblendelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} constants name value descript
ion svg_feblend_mode_unknown 0 the type is not one of predefined types.
... svgfeblendelement.mode read only an svganimatedenumerat
ion corresponding to the mode attribute of the given element.
...And 3 more matches
SVGFEColorMatrixElement - Web APIs
<div id="interfacediagram" style="display: inline-block; posit
ion: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; posit
ion: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectrat
io="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" 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...
...="251" y="65" width="230" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="366" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgfecolormatrixelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} constants name value descript
ion svg_fecolormatrix_type_unknown 0 the type is not one of predefined types.
... svgfecolormatrixelement.type read only an svganimatedenumerat
ion corresponding to the type attribute of the given element.
...And 3 more matches
SVGFECompositeElement - Web APIs
<div id="interfacediagram" style="display: inline-block; posit
ion: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; posit
ion: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectrat
io="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="1...
... x="271" y="65" width="210" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="376" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgfecompositeelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} constants name value descript
ion svg_fecomposite_operator_unknown 0 the type is not one of predefined types.
... svgfecompositeelement.type read only an svganimatedenumerat
ion corresponding to the type attribute of the given element.
...And 3 more matches
SVGFEConvolveMatrixElement - Web APIs
<div id="interfacediagram" style="display: inline-block; posit
ion: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; posit
ion: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectrat
io="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><...
...21" y="65" width="260" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="351" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgfeconvolvematrixelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} constants name value descript
ion svg_edgemode_unknown 0 the type is not one of predefined types.
... svgfeconvolvematrixelement.edgemode read only an svganimatedenumerat
ion corresponding to the edgemode attribute of the given element.
...And 3 more matches
SVGFEDropShadowElement - Web APIs
<div id="interfacediagram" style="display: inline-block; posit
ion: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; posit
ion: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectrat
io="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1=...
... svgfedropshadowelement.stddeviat
ionx read only an svganimatednumber corresponding to the (possibly automatically computed) x component of the stddeviat
ionx attribute of the given element.
... svgfedropshadowelement.stddeviat
iony read only an svganimatednumber corresponding to the (possibly automatically computed) y component of the stddeviat
iony attribute of the given element.
...And 3 more matches
SVGFEMorphologyElement - Web APIs
<div id="interfacediagram" style="display: inline-block; posit
ion: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; posit
ion: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectrat
io="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1=...
...x="261" y="65" width="220" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="371" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgfemorphologyelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} constants name value descript
ion svg_morphology_operator_unknown 0 the type is not one of predefined types.
... svgfemorphologyelement.operator read only an svganimatedenumerat
ion corresponding to the operator attribute of the given element.
...And 3 more matches
SVGFilterElement - Web APIs
<div id="interfacediagram" style="display: inline-block; posit
ion: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; posit
ion: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectrat
io="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="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...
... 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">svgfilterelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties svgfilterelement.filterunits read only an svganimatedenumerat
ion that corresponds to the filterunits attribute of the given <filter> element.
... svgfilterelement.primitiveunits read only an svganimatedenumerat
ion that corresponds to the primitiveunits attribute of the given <filter> element.
...And 3 more matches
SVGGraphicsElement: copy event - Web APIs
the copy event fires on svggraphicselements when the user initiates a copy act
ion through the browser's user interface.
... bubbles yes cancelable yes interface clipboardevent event handler property oncopy the event's default act
ion is to copy the select
ion (if any) to the clipboard.
... a handler for this event can modify the clipboard contents by calling setdata(format, data) on the event's clipboardevent.clipboarddata property, and cancelling the event's default act
ion using event.preventdefault().
...And 3 more matches
SVGGraphicsElement: paste event - Web APIs
the paste event is fired on an svggraphicselement when the user has initiated a "paste" act
ion through the browser's user interface.
... bubbles yes cancelable yes interface clipboardevent event handler property onpaste if the cursor is in an editable context (for example, in a <textarea> or an element with contenteditable attribute set to true) then the default act
ion is to insert the contents of the clipboard into the document at the cursor posit
ion.
... to override the default behav
ior (for example to insert some different data or a transformat
ion of the clipboard contents) an event handler must cancel the default act
ion using event.preventdefault(), and then insert its desired data manually.
...And 3 more matches
SVGImageElement - Web APIs
<div id="interfacediagram" style="display: inline-block; posit
ion: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; posit
ion: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectrat
io="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" ...
... svgimageelement.preserveaspectrat
io read only an svganimatedpreserveaspectrat
io corresponding to the preserveaspectrat
io attribute of the given <image> element.
... specificat
ions specificat
ion status comment scalable vector graphics (svg) 2the definit
ion of 'svgimageelement' in that specificat
ion.
...And 3 more matches
SVGRect - Web APIs
an svgrect object can be designated as read only, which means that attempts to modify the object will result in an except
ion being thrown.
... <div id="interfacediagram" style="display: inline-block; posit
ion: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; posit
ion: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectrat
io="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" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgrect</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties svgrect.x the exact effect of this coordinate depends on each element.
... specificat
ions specificat
ion status comment geometry interfaces module level 1the definit
ion of 'domrect' in that specificat
ion.
...And 3 more matches
SVGRenderingIntent - Web APIs
<div id="interfacediagram" style="display: inline-block; posit
ion: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; posit
ion: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectrat
io="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:hove...
...r text { fill: #0095dd; pointer-events: all;} warning: this interface was removed in the svg 2 specificat
ion.
... constants name value descript
ion rendering_intent_unknown 0 the type is not one of predefined types.
...And 3 more matches
SVGScriptElement - Web APIs
<div id="interfacediagram" style="display: inline-block; posit
ion: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; posit
ion: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectrat
io="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1...
...a domexcept
ion is raised with the code no_modificat
ion_allowed_err on an attempt to change the value of a read only attribut.
... specificat
ions specificat
ion status comment scalable vector graphics (svg) 2the definit
ion of 'svgscriptelement' in that specificat
ion.
...And 3 more matches
SVGStylable - Web APIs
svg stylable interface the svgstylable interface is implemented on all objects corresponding to svg elements that can have style, class and presentat
ion attributes specified on them.
... interface overview also implement none methods cssvalue getpresentat
ionattribute(in domstring name) properties readonly svganimatedstring classname readonly cssstyledeclarat
ion style normative document svg 1.1 (2nd edit
ion) properties name type descript
ion classname svganimatedstring corresponds to attribute class on the given element.
... style cssstyledeclarat
ion corresponds to attribute style on the given element.
...And 3 more matches
SVGTSpanElement - Web APIs
<div id="interfacediagram" style="display: inline-block; posit
ion: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; posit
ion: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectrat
io="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" strok...
..." stroke="#d4dde4" stroke-width="2px" /><text x="156" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgtextcontentelement</text></a><polyline points="51,89 41,84 41,94 51,89" stroke="#d4dde4" fill="none"/><line x1="41" y1="89" x2="11" y2="89" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgtextposit
ioningelement" target="_top"><rect x="-239" y="65" width="250" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="-114" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgtextposit
ioningelement</text></a><polyline points="-239,89 -249,84 -249,94 -239,89" stroke="#d4dde4" fill="none"/><...
...oke-width="2px" /><text x="-354" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgtspanelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface doesn't provide any specific properties, but inherits the properties from its parent, svgtextposit
ioningelement.
...And 3 more matches
SVGURIReference - Web APIs
<div id="interfacediagram" style="display: inline-block; posit
ion: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; posit
ion: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectrat
io="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; poi...
...on getting href, an svganimatedstring object is returned that reflects the href attribute, and if the element is defined to support the deprecated xlink:href attribute, addit
ionally reflects that deprecated attribute.
... specificat
ions specificat
ion status comment scalable vector graphics (svg) 2the definit
ion of 'svgurireference' in that specificat
ion.
...And 3 more matches
Screen - Web APIs
screen.orientat
ion returns the screenorientat
ion instance associated with this screen.
... events handler screen.onorientat
ionchange a handler for the orientat
ionchange event.
... methods screen.lockorientat
ion lock the screen orientat
ion (only works in fullscreen or for installed apps) screen.unlockorientat
ion unlock the screen orientat
ion (only works in fullscreen or for installed apps) methods inherited from eventtarget: eventtarget.addeventlistener() registers an event handler of a specific event type on the eventtarget.
...And 3 more matches
ServiceWorkerGlobalScope.onfetch - Web APIs
the onfetch property of the serviceworkerglobalscope interface is an event handler fired whenever a fetch event occurs (usually when the windoworworkerglobalscope.fetch() method is called.) syntax serviceworkerglobalscope.onfetch = funct
ion(fetchevent) { ...
... the code also handles except
ions thrown from the fetch() operat
ion.
... note that an http error response (e.g., 404) will not trigger an except
ion.
...And 3 more matches
ShadowRoot - Web APIs
you can retrieve a reference to an element's shadow root using its element.shadowroot property, provided it was created using element.attachshadow() with the mode opt
ion set to open.
... documentorshadowroot.getselect
ion() returns a select
ion object representing the range of text selected by the user, or the current posit
ion of the caret.
... documentorshadowroot.caretposit
ionfrompoint() returns a caretposit
ion object containing the dom node containing the caret, and caret's character offset within that node.
...And 3 more matches
SharedWorker() - Web APIs
syntax var myworker = new sharedworker(aurl, name); var myworker = new sharedworker(aurl, opt
ions); parameters aurl a domstring representing the url of the script the worker will execute.
... name opt
ional a domstring specifying an identifying name for the sharedworkerglobalscope representing the scope of the worker, which is mainly useful for debugging purposes.
... opt
ions opt
ional an object containing opt
ion properties that can set when creating the object instance.
...And 3 more matches
SharedWorker - Web APIs
example in our basic shared worker example (run shared worker), we have two html pages, each of which uses some javascript to perform a simple calculat
ion.
... the different scripts are using the same worker file to perform the calculat
ion — they can both access it, even if their pages are running inside different windows.
... the following code snippet shows creat
ion of a sharedworker object using the sharedworker() constructor.
...And 3 more matches
Storage.setItem() - Web APIs
except
ions setitem() may throw an except
ion if the storage is full.
... particularly, in mobile safari (since
ios 5) it always throws when the user enters private mode.
... (safari sets the quota to 0 bytes in private mode, unlike other browsers, which allow storage in private mode using separate data containers.) hence developers should make sure to always catch possible except
ions from setitem().
...And 3 more matches
StorageManager.persist() - Web APIs
the persist() method of the storagemanager interface requests permiss
ion to use persistent storage, and returns a promise that resolves to true if permiss
ion is granted and box mode is persistent, and false otherwise.
... syntax navigator.storage.persist().then(funct
ion(persistent) { ...
... example if (navigator.storage && navigator.storage.persist) navigator.storage.persist().then(funct
ion(persistent) { if (persistent) console.log("storage will not be cleared except by explicit user act
ion"); else console.log("storage may be cleared by the ua under storage pressure."); }); specificat
ions specificat
ion status comment storagethe definit
ion of 'persist' in that specificat
ion.
...And 3 more matches
StyleSheet - Web APIs
stylesheet.href read only returns a domstring representing the locat
ion of the stylesheet.
... stylesheet.media read only returns a medialist representing the intended destinat
ion medium for style informat
ion.
... specificat
ions specificat
ion status comment css object model (cssom)the definit
ion of 'stylesheet' in that specificat
ion.
...And 3 more matches
TextEncoder - Web APIs
note: there is a polyfill implementat
ion to support non-utf-8 text encodings on github.
... textencoder.prototype.encodeinto() takes a usvstring to encode and a destinat
ion uint8array to put resulting utf-8 encoded text into, and returns a dict
ionary object indicating the progress of the encoding.
... if (typeof textencoder === "undefined") { textencoder=funct
ion textencoder(){}; textencoder.prototype.encode = funct
ion encode(str) { "use strict"; var len = str.length, respos = -1; // the uint8array's length must be at least 3x the length of the string because an invalid utf-16 // takes up the equivelent space of 3 utf-8 characters to encode it properly.
...And 3 more matches
WebGL2RenderingContext.uniform[1234][uif][v]() - Web APIs
not all combinat
ions are valid: u cannot be combined with f.
... syntax void gl.uniform1ui(locat
ion, v0); void gl.uniform2ui(locat
ion, v0, v1); void gl.uniform3ui(locat
ion, v0, v1, v2); void gl.uniform4ui(locat
ion, v0, v1, v2, v3); void gl.uniform1fv(locat
ion, data, opt
ional srcoffset, opt
ional srclength); void gl.uniform2fv(locat
ion, data, opt
ional srcoffset, opt
ional srclength); void gl.uniform3fv(locat
ion, data, opt
ional srcoffset, opt
ional srclength); void gl.uniform4fv(locat
ion, data, opt
ional srcoffset, opt
ional srclength); void gl.uniform1iv(locat
ion, data, opt
ional srcoffset, opt
ional srclength); void gl.uniform2iv(locat
ion, data, opt
ional srcoffset, opt
ional srclength); void gl.uniform3iv(locat
ion, data, opt
ional srcoffset, opt
ional srclength); void gl.uniform4iv(locat
ion, d...
...ata, opt
ional srcoffset, opt
ional srclength); void gl.uniform1uiv(locat
ion, data, opt
ional srcoffset, opt
ional srclength); void gl.uniform2uiv(locat
ion, data, opt
ional srcoffset, opt
ional srclength); void gl.uniform3uiv(locat
ion, data, opt
ional srcoffset, opt
ional srclength); void gl.uniform4uiv(locat
ion, data, opt
ional srcoffset, opt
ional srclength); parameters locat
ion a webgluniformlocat
ion object containing the locat
ion of the uniform attribute to modify.
...And 3 more matches
WebGL2RenderingContext.uniformMatrix[234]x[234]fv() - Web APIs
there are no 2x2, 3x3, and 4x4 vers
ions of this method.
... syntax void gl.uniformmatrix2fv(locat
ion, transpose, data, opt
ional srcoffset, opt
ional srclength); void gl.uniformmatrix3x2fv(locat
ion, transpose, data, opt
ional srcoffset, opt
ional srclength); void gl.uniformmatrix4x2fv(locat
ion, transpose, data, opt
ional srcoffset, opt
ional srclength); void gl.uniformmatrix2x3fv(locat
ion, transpose, data, opt
ional srcoffset, opt
ional srclength); void gl.uniformmatrix3fv(locat
ion, transpose, data, opt
ional srcoffset, opt
ional srclength); void gl.uniformmatrix4x3fv(locat
ion, transpose, data, opt
ional srcoffset, opt
ional srclength); void gl.uniformmatrix2x4fv(locat
ion, transpose, data, opt
ional srcoffset, opt
ional srclength); void gl.uniformmatrix3x4fv(locat
ion, transpose, data, opt...
...
ional srcoffset, opt
ional srclength); void gl.uniformmatrix4fv(locat
ion, transpose, data, opt
ional srcoffset, opt
ional srclength); parameters locat
ion a webgluniformlocat
ion object containing the locat
ion of the uniform attribute to modify.
...And 3 more matches
WebGLRenderingContext.activeTexture() - Web APIs
except
ions if texture is not one of gl.texturei, where i is within the range from 0 to gl.max_combined_texture_image_units - 1, a gl.invalid_enum error is thrown.
... gl.activetexture(gl.texture1); the number of texture units is implementat
ion dependent, you can get this number with the help of the max_combined_texture_image_units constant.
... it is, per specificat
ion, at least 8.
...And 3 more matches
WebGLRenderingContext.depthFunc() - Web APIs
the webglrenderingcontext.depthfunc() method of the webgl api specifies a funct
ion that compares incoming pixel depth to the current depth buffer value.
... syntax void gl.depthfunc(func); parameters func a glenum specifying the depth comparison funct
ion, which sets the condit
ions under which the pixel will be drawn.
... gl.enable(gl.depth_test); gl.depthfunc(gl.never); to check the current depth funct
ion, query the depth_func constant.
...And 3 more matches
WebGLRenderingContext.drawElements() - Web APIs
possible values are: gl.unsigned_byte gl.unsigned_short when using the oes_element_index_uint extens
ion: gl.unsigned_int offset a glintptr specifying a byte offset in the element array buffer.
... except
ions if mode is not one of the accepted values, a gl.invalid_enum error is thrown.
... if offset is not a valid multiple of the size of the given type, a gl.invalid_operat
ion error is thrown.
...And 3 more matches
WebGLRenderingContext.lineWidth() - Web APIs
the webgl spec, based on the opengl es 2.0/3.0 specs points out that the minimum and maximum width for a line is implementat
ion defined.
...because of these implementat
ion defined limits it is not recommended to use line widths other than 1.0 since there is no guarantee any user's browser will display any other width.
... as of january 2017 most implementat
ions of webgl only support a minimum of 1 and a maximum of 1 as the technology they are based on has these same limits.
...And 3 more matches
WebGLRenderingContext.uniform[1234][fi][v]() - Web APIs
they retain the values assigned to them by a call to this method until the next successful link operat
ion occurs on the program object, when they are once again initialized to 0.
... many of the funct
ions described here have expanded webgl 2 interfaces, which can be found under webgl2renderingcontext.uniform[1234][uif][v]().
... syntax void gl.uniform1f(locat
ion, v0); void gl.uniform1fv(locat
ion, value); void gl.uniform1i(locat
ion, v0); void gl.uniform1iv(locat
ion, value); void gl.uniform2f(locat
ion, v0, v1); void gl.uniform2fv(locat
ion, value); void gl.uniform2i(locat
ion, v0, v1); void gl.uniform2iv(locat
ion, value); void gl.uniform3f(locat
ion, v0, v1, v2); void gl.uniform3fv(locat
ion, value); void gl.uniform3i(locat
ion, v0, v1, v2); void gl.uniform3iv(locat
ion, value); void gl.uniform4f(locat
ion, v0, v1, v2, v3); void gl.uniform4fv(locat
ion, value); void gl.uniform4i(locat
ion, v0, v1, v2, v3); void gl.uniform4iv(locat
ion, value); parameters locat
ion a webgluniformlocat
ion object containing the locat
ion of the uniform attribute to modify.
...And 3 more matches
WebGLRenderingContext.uniformMatrix[234]fv() - Web APIs
the three vers
ions of this method (uniformmatrix2fv(), uniformmatrix3fv(), and uniformmatrix4fv()) take as the input value 2-component, 3-component, and 4-component square matrices, respectively.
... syntax webglrenderingcontext.uniformmatrix2fv(locat
ion, transpose, value); webglrenderingcontext.uniformmatrix3fv(locat
ion, transpose, value); webglrenderingcontext.uniformmatrix4fv(locat
ion, transpose, value); parameters locat
ion a webgluniformlocat
ion object containing the locat
ion of the uniform attribute to modify.
... the locat
ion is obtained using getuniformlocat
ion().
...And 3 more matches
WebGLRenderingContext.vertexAttrib[1234]f[v]() - Web APIs
syntax void gl.vertexattrib1f(index, v0); void gl.vertexattrib2f(index, v0, v1); void gl.vertexattrib3f(index, v0, v1, v2); void gl.vertexattrib4f(index, v0, v1, v2, v3); void gl.vertexattrib1fv(index, value); void gl.vertexattrib2fv(index, value); void gl.vertexattrib3fv(index, value); void gl.vertexattrib4fv(index, value); parameters index a gluint specifying the posit
ion of the vertex attribute to be modified.
... descript
ion while vertex attributes are usually used to specify values which are different for each vertex (using vertexattribpointer), it can be useful to specify a constant value.
...the only way to change the values is by calling this funct
ion again.
...And 3 more matches
WebGLRenderingContext.viewport() - Web APIs
the webglrenderingcontext.viewport() method of the webgl api sets the viewport, which specifies the affine transformat
ion of x and y from normalized device coordinates to window coordinates.
...in this situat
ion, you can use gl.viewport.
... gl.viewport(0, 0, canvas.width, canvas.height); the viewport width and height are clamped to a range that is implementat
ion dependent.
...And 3 more matches
WebGLShader - Web APIs
descript
ion to create a webglshader use webglrenderingcontext.createshader, then hook up the glsl source code using webglrenderingcontext.shadersource(), and finally invoke webglrenderingcontext.compileshader() to finish and compile the shader.
... funct
ion createshader (gl, sourcecode, type) { // compiles either a shader of type gl.vertex_shader or gl.fragment_shader var shader = gl.createshader( type ); gl.shadersource( shader, sourcecode ); gl.compileshader( shader ); if ( !gl.getshaderparameter(shader, gl.compile_status) ) { var info = gl.getshaderinfolog( shader ); throw 'could not compile webgl program.
... \n\n' + info; } return shader; } see webglprogram for informat
ion on attaching the shaders.
...And 3 more matches
Detect WebGL - Web APIs
« prev
iousnext » this example demonstrates how to detect a webgl rendering context and reports the result to the user.
... <p>[ here would go the result of webgl feature detect
ion ]</p> <button>press here to detect webglrenderingcontext</button> body { text-align : center; } button { display : block; font-size : inherit; margin : auto; padding : 0.6em; } // run everything inside window load event handler, to make sure // dom is fully loaded and styled before trying to manipulate it.
... window.addeventlistener("load", funct
ion() { var paragraph = document.queryselector("p"), button = document.queryselector("button"); // adding click event handler to button.
...And 3 more matches
Hello vertex attributes - Web APIs
« prev
iousnext » this webgl example demonstrates how to combine shader programming and user interact
ion by sending user input to the shader using vertex attributes.
...click on the canvas to change the horizontal posit
ion of the square.</p> <canvas>your browser does not seem to support html5 canvas.</canvas> body { text-align : center; } canvas { width : 280px; height : 210px; margin : auto; padding : 0; border : none; background-color : black; } button { display : block; font-size : inherit; margin : auto; padding : 0.6em; } <script type="x-shader/x-vertex" id="vertex-shader"> #vers
ion 100 precis
ion highp float; attribute float posit
ion; void main() { gl_posit
ion = vec4(posit
ion, 0.0, 0.0, 1.0); gl_pointsize = 64.0; } </script> <script type="x-shader/...
...x-fragment" id="fragment-shader"> #vers
ion 100 precis
ion mediump float; void main() { gl_fragcolor = vec4(0.18, 0.54, 0.34, 1.0); } </script> ;(funct
ion(){ "use strict" window.addeventlistener("load", setupwebgl, false); var gl, program; funct
ion setupwebgl (evt) { window.removeeventlistener(evt.type, setupwebgl, false); if (!(gl = getrenderingcontext())) return; var source = document.queryselector("#vertex-shader").innerhtml; var vertexshader = gl.createshader(gl.vertex_shader); gl.shadersource(vertexshader,source); gl.compileshader(vertexshader); source = document.queryselector("#fragment-shader").innerhtml var fragmentshader = gl.createshader(gl.fragment_shader); gl.shadersource(fragmentshader,source); gl.compileshader(fragmentshader); program = gl.cre...
...And 3 more matches
Window.localStorage - Web APIs
the read-only localstorage property allows you to access a storage object for the document's origin; the stored data is saved across browser sess
ions.
... localstorage is similar to sess
ionstorage, except that while data stored in localstorage has no expirat
ion time, data stored in sess
ionstorage gets cleared when the page sess
ion ends — that is, when the page is closed.
... (data in a localstorage object created in a "private browsing" or "incognito" sess
ion is cleared when the last "private" tab is closed.) data stored in either localstorage is specific to the protocol of the page.
...And 3 more matches
Window.name - Web APIs
it has also been used in some frameworks for providing cross-domain messaging (e.g., sess
ionvars and dojo's dojox.
io.windowname) as a more secure alternative to jsonp.
... modern web applicat
ions hosting sensitive data should, however, not rely on window.name for cross-domain messaging but instead utilize the postmessage api.
... window.name will convert all values to their string representat
ions by using the tostring method.
...And 3 more matches
:empty - CSS: Cascading Style Sheets
comments, processing instruct
ions, and css content do not affect whether an element is considered empty.
...accessible names expose the interactive control to the accessibility tree, an api that communicates informat
ion useful for assistive technologies.
... the text that provides the interactive control's accessible name can be hidden using a combinat
ion of properties that remove it visually from the screen but keep it parseable by assistive technology.
...And 3 more matches
:host - CSS: Cascading Style Sheets
lements, fill the span with the content of the custom element, and fill the style element with some css rules: let style = document.createelement('style'); let span = document.createelement('span'); span.textcontent = this.textcontent; const shadowroot = this.attachshadow({mode: 'open'}); shadowroot.appendchild(style); shadowroot.appendchild(span); style.textcontent = 'span:hover { text-decorat
ion: underline; }' + ':host-context(h1) { font-style: italic; }' + ':host-context(h1):after { content: " - no links in headers!" }' + ':host-context(article, aside) { color: gray; }' + ':host(.footer) { color : red; }' + ':host { background: rgba(0,0,0,0.1); padding: 2px 5px; }'; the :host { backgrou...
... specificat
ions specificat
ion status comment css scoping module level 1the definit
ion of ':host' in that specificat
ion.
... working draft initial definit
ion.
...And 3 more matches
:in-range - CSS: Cascading Style Sheets
/* selects any <input>, but only when it has a range specified, and its value is inside that range */ input:in-range { background-color: rgba(0, 255, 0, 0.25); } this pseudo-class is useful for giving the user a visual indicat
ion that a field's current value is within the permitted limits.
... note: this pseudo-class only applies to elements that have (and can take) a range limitat
ion.
... in the absence of such a limitat
ion, the element can neither be "in-range" nor "out-of-range." syntax :in-range examples html <form act
ion="" id="form1"> <ul>values between 1 and 10 are valid.
...And 3 more matches
:indeterminate - CSS: Cascading Style Sheets
the :indeterminate css pseudo-class represents any form element whose state is indeterminate, such as checkboxes which have their html indeterminate attribute set to true, rad
io buttons which are members of a group in which all rad
io buttons are unchecked, and indeterminate <progress> elements.
... /* selects any <input> whose state is indeterminate */ input:indeterminate { background: lime; } elements targeted by this selector are: <input type="checkbox"> elements whose indeterminate property is set to true by javascript <input type="rad
io"> elements, when all rad
io buttons with the same name value in the form are unchecked <progress> elements in an indeterminate state syntax :indeterminate examples checkbox & rad
io button this example applies special styles to the labels associated with indeterminate form fields.
... html <div> <input type="checkbox" id="checkbox"> <label for="checkbox">this label starts out lime.</label> </div> <div> <input type="rad
io" id="rad
io"> <label for="rad
io">this label starts out lime.</label> </div> css input:indeterminate + label { background: lime; } javascript var inputs = document.getelementsbytagname("input"); for (var i = 0; i < inputs.length; i++) { inputs[i].indeterminate = true; } progress bar html <progress> css progress { margin: 4px; } progress:indeterminate { opacity: 0.5; background-color: lightgray; box-shadow: 0 0 2px 1px red; } result specificat
ions specificat
ion status comment html living standardthe definit
ion of ':indeterminate' in that specificat
ion.
...And 3 more matches
:lang() - CSS: Cascading Style Sheets
/* selects any <p> in english (en) */ p:lang(en) { quotes: '\201c' '\201d' '\2018' '\2019'; } note: in html, the language is determined by a combinat
ion of the lang attribute, the <meta> element, and possibly by informat
ion from the protocol (such as http headers).
...s english quote has a <q>nested</q> quote inside.</q></div> <div lang="fr"><q>this french quote has a <q>nested</q> quote inside.</q></div> <div lang="de"><q>this german quote has a <q>nested</q> quote inside.</q></div> css :lang(en) > q { quotes: '\201c' '\201d' '\2018' '\2019'; } :lang(fr) > q { quotes: '« ' ' »'; } :lang(de) > q { quotes: '»' '«' '\2039' '\203a'; } result specificat
ions specificat
ion status comment selectors level 4the definit
ion of ':lang()' in that specificat
ion.
... selectors level 3the definit
ion of ':lang()' in that specificat
ion.
...And 3 more matches
:out-of-range - CSS: Cascading Style Sheets
/* selects any <input>, but only when it has a range specified, and its value is outside that range */ input:out-of-range { background-color: rgba(255, 0, 0, 0.25); } this pseudo-class is useful for giving the user a visual indicat
ion that a field's current value is outside the permitted limits.
... note: this pseudo-class only applies to elements that have (and can take) a range limitat
ion.
... in the absence of such a limitat
ion, the element can neither be "in-range" nor "out-of-range." syntax :out-of-range examples html <form act
ion="" id="form1"> <p>values between 1 and 10 are valid.</p> <ul> <li> <input id="value1" name="value1" type="number" placeholder="1 to 10" min="1" max="10" value="12"> <label for="value1">your value is </label> </li> </ul> </form> css li { list-style: none; margin-bottom: 1em; } input { border: 1px solid black; } input:in-range { background-color: rgba(0, 255, 0, 0.25); } input:out-of-range { background-color: rgba(255, 0, 0, 0.25); border: 2px solid red; } input:in-range + label::after { content: 'okay.'; } input:out-of-range + label::after { content: 'out of range!'; } result specificat
ions ...
...And 3 more matches
@charset - CSS: Cascading Style Sheets
it must be the first element in the style sheet and not be preceded by any character; as it is not a nested statement, it cannot be used inside condit
ional group at-rules.
... formal syntax @charset "<charset>"; examples valid and invalid charset declarat
ions @charset "utf-8"; /* set the encoding of the style sheet to unicode utf-8 */ @charset 'iso-8859-15'; /* invalid, wrong quoting style used */ @charset "utf-8"; /* invalid, more than one space */ @charset "utf-8"; /* invalid, there is a character (a space) before the at-rule */ @charset utf-8; /* invalid, without ' or ", the charset is not a css <string> */ specificat...
...
ions specificat
ion status comment css level 2 (revis
ion 1)the definit
ion of '@charset' in that specificat
ion.
...And 3 more matches
fallback - CSS: Cascading Style Sheets
the fallback descriptor can be used to specify a counter style to fall back to if the current counter style cannot create a marker representat
ion for a particular counter value.
... syntax /* keyword values */ fallback: lower-alpha; fallback: custom-gangnam-style; descript
ion if the specified fallback style is also unable to construct a representat
ion, then its fallback style will be used.
... a couple of scenar
ios where a fallback style will be used are: when the range descriptor is specified for a counter style, the fallback style will be used to represent values that fall outside the range.
...And 3 more matches
range - CSS: Cascading Style Sheets
if a counter value is outside the specified range, then the fallback style will be used to construct the representat
ion of that marker.
...the range of the counter style is the un
ion of all the ranges defined in the list.
... descript
ion the value of the range descriptor can be either auto or a comma separated list of lower and upper bounds specified as integers.
...And 3 more matches
speak-as - CSS: Cascading Style Sheets
for example, an author can specify a counter symbol to be either spoken as its numerical value or just represented with an aud
io cue.
... bullets a phrase or an aud
io cue defined by the user agent for representing an unordered list item will be read out.
... spell-out the user agent will generate a counter representat
ion as normal and would read it out letter by letter.
...And 3 more matches
scan - CSS: Cascading Style Sheets
rather, it means the process by which an image is painted onto a televis
ion screen (or other device).
...some televis
ions use interlaced scanning.
...if your screen uses progressive scanning, you should see a serif font.</p> css p { font-family: cursive; } @media (scan: interlace) { p { font-family: sans-serif; } } @media (scan: progressive) { p { font-family: serif; } } result specificat
ions specificat
ion status comment media queries level 4the definit
ion of 'scan' in that specificat
ion.
...And 3 more matches
Basic Concepts of Multicol - CSS: Cascading Style Sheets
multiple-column layout, usually referred to as multicol, is a specificat
ion for laying out content into a set of column boxes much like columns in a newspaper.
... this guide explains how the specificat
ion works with some common use case examples.
... the properties defined by the specificat
ion are: column-width column-count columns column-rule-color column-rule-style column-rule-width column-rule column-span column-fill column-gap by adding column-count or column-width to an element, that element becomes a multi-column container, or multicol container for short.
...And 3 more matches
Spanning and Balancing Columns - CSS: Cascading Style Sheets
note the spanning and balancing funct
ionality covered in this guide is not as well supported across browsers as the funct
ionality covered in the prev
ious two sect
ions in this guide.
...for example, a heading nested directly inside the container could become a spanner, as could a heading nested inside a sect
ion nested inside the multicol container.
... limitat
ions of column-span in the current level 1 specificat
ion there are only two allowable values for column-span.
...And 3 more matches
Cross-browser Flexbox mixins - CSS: Cascading Style Sheets
lexbox { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: flex; } //using this mixin %flexbox { @include flexbox; } @mixin inline-flex { display: -webkit-inline-box; display: -moz-inline-box; display: -webkit-inline-flex; display: -ms-inline-flexbox; display: inline-flex; } %inline-flex { @include inline-flex; } flexbox direct
ion the flex-direct
ion property specifies how flex items are placed in the flex container, by setting the direct
ion of the flex container's main axis.
... this determines the direct
ion in which flex items are laid out in.
... values: row (default) | row-reverse | column | column-reverse spec: https://drafts.csswg.org/css-flexbox/#flex-direct
ion-property @mixin flex-direct
ion($value: row) { @if $value == row-reverse { -webkit-box-direct
ion: reverse; -webkit-box-orient: horizontal; -moz-box-direct
ion: reverse; -moz-box-orient: horizontal; } @else if $value == column { -webkit-box-direct
ion: normal; -webkit-box-orient: vertical; -moz-box-direct
ion: normal; -moz-box-orient: vertical; } @else if $value == column-reverse { -webkit-box-direct
ion: reverse; -webkit-box-orient: vertical; -moz-box-direct
ion: reverse; -moz-box-orient: vertical; } @else { -webkit-box-direct
ion: normal; -webkit-box-orient: horizontal; -moz-box-direct
ion: normal; -m...
...And 3 more matches
CSS Fonts - CSS: Cascading Style Sheets
normal; font-size: 2rem; letter-spacing: 1px; } <p>three hundred years ago<br> i thought i might get some sleep<br> i stretched myself out onna antique bed<br> an' my spirit did a midnite creep</p> the result is as follows: variable fonts examples you can find a number of variable fonts examples at v-fonts.com and axis-praxis.org; see also our variable fonts guide for more informat
ion and usage informat
ion.
... reference properties font font-family font-feature-settings font-kerning font-language-override font-optical-sizing font-size font-size-adjust font-stretch font-style font-synthesis font-variant font-variant-alternates font-variant-caps font-variant-east-asian font-variant-ligatures font-variant-numeric font-variant-posit
ion font-variat
ion-settings font-weight line-height at-rules @font-face font-family font-feature-settings font-style font-variant font-weight font-stretch src unicode-range @font-feature-values guides fundamental text and font styling in this beginner's learning article we go through all the basic fundamentals of text/font styling in detail, including setting font weight, family and style, font shorthand, te...
...these include things like ligatures (special glyphs that combine characters like 'fi' or 'ffl'), kerning (adjustments to the spacing between specific letterform pairings), fract
ions, numeral styles, and a number of others.
...And 3 more matches
CSS Images - CSS: Cascading Style Sheets
reference properties image-orientat
ion image-rendering image-resolut
ion object-fit object-posit
ion funct
ions linear-gradient() radial-gradient() repeating-linear-gradient() repeating-radial-gradient() conic-gradient() repeating-conic-gradient() url() element() image() cross-fade() data types <gradient> <image> guides using css gradients presents a specific type of css images, gradients, and how to create and use these.
... specificat
ions specificat
ion status comment css images module level 4 working draft added image-resolut
ion, conic-gradient(), and image() css images module level 3 candidate recommendat
ion added image-orientat
ion, image-rendering, object-fit and object-posit
ion compatibility standardthe definit
ion of 'css gradients' in that specificat
ion.
... living standard standardizes the -webkit prefixed gradient value funct
ions css values and units module level 3the definit
ion of '<url>' in that specificat
ion.
...And 3 more matches
Using z-index - CSS: Cascading Style Sheets
if you want to create a custom stacking order, you can use the z-index property on a posit
ioned element.
... the z-index property can be specified with an integer value (positive, zero, or negative), which represents the posit
ion of the element along the z-axis.
... if several elements share the same z-index value (i.e., they are placed on the same layer), stacking rules explained in the sect
ion stacking without the z-index property apply.
...And 3 more matches
Stacking with floated blocks - CSS: Cascading Style Sheets
floating blocks are placed between non-posit
ioned blocks and posit
ioned blocks: the background and borders of the root element descendant non-posit
ioned blocks, in order of appearance in the html floating blocks descendant posit
ioned elements, in order of appearance in the html actually, as you can see in the example below, the background and border of the non-posit
ioned block (div #4) is completely unaffected by floating blocks, but the content is affected.
... this happens according to standard float behav
iour.
... this behav
ior can be shown with an added rule to the above list: the background and borders of the root element descendant non-posit
ioned blocks, in order of appearance in the html floating blocks descendant non-posit
ioned inline elements descendant posit
ioned elements, in order of appearance in the html note: if an opacity value is applied to the non-posit
ioned block (div #4), then something strange happens: the background and border of that block pops up above the floating blocks and the posit
ioned blocks.
...And 3 more matches
Animatable CSS properties - CSS: Cascading Style Sheets
certain css properties can be animated using css animat
ions or css transit
ions.
... animat
ion means that their values can be made to change gradually over a given amount of time.
... the animatable properties are: -moz-outline-radius -moz-outline-radius-bottomleft -moz-outline-radius-bottomright -moz-outline-radius-topleft -moz-outline-radius-topright -webkit-line-clamp -webkit-text-fill-color -webkit-text-stroke -webkit-text-stroke-color all backdrop-filter background background-color background-posit
ion background-size block-size border border-block-end border-block-end-color border-block-end-width border-block-start border-block-start-color border-block-start-width border-bottom border-bottom-color border-bottom-left-radius border-bottom-right-radius border-bottom-width border-color border-end-end-radius borde...
...And 3 more matches
Class selectors - CSS: Cascading Style Sheets
/* all elements with class="spac
ious" */ .spac
ious { margin: 2em; } /* all <li> elements with class="spac
ious" */ li.spac
ious { margin: 2em; } /* all <li> elements with a class list that includes both "spac
ious" and "elegant" */ /* for example, class="elegant retro spac
ious" */ li.spac
ious.elegant { margin: 2em; } syntax .class_name { style properties } note that this is equivalent to the following attribute selector: [class~=class_name] { style properties } examples css .red { color: #f33; } .yellow-bg { background: #ffa; } .fancy { font-weight: bold; text-shadow: 4px 4px 3px #77f; } html <p class="red">this paragraph has red text.</p> <p class="red yellow-bg">this paragrap...
...h has red text and a yellow background.</p> <p class="red fancy">this paragraph has red text and "fancy" styling.</p> <p>this is just a regular paragraph.</p> result specificat
ions specificat
ion status comment selectors level 4the definit
ion of 'class selectors' in that specificat
ion.
... working draft no changes selectors level 3the definit
ion of 'class selectors' in that specificat
ion.
...And 3 more matches
Descendant combinator - CSS: Cascading Style Sheets
addit
ionally, the white space characters of which the combinator is comprised may contain any number of css comments.
... syntax selector1 selector2 { /* property declarat
ions */ } examples css li { list-style-type: disc; } li li { list-style-type: circle; } html <ul> <li> <div>item 1</div> <ul> <li>subitem a</li> <li>subitem b</li> </ul> </li> <li> <div>item 2</div> <ul> <li>subitem a</li> <li>subitem b</li> </ul> </li> </ul> result specificat
ions specificat
ion status comment selectors level 4the definit
ion of 'descendant combinator' in that specificat
ion.
... working draft selectors level 3the definit
ion of 'descendant combinator' in that specificat
ion.
...And 3 more matches
CSS Tutorials - CSS: Cascading Style Sheets
this page lists them all, with a short descript
ion.
... understanding z-index controlling superposit
ion of boxes is a basic feature that is very quickly needed by web developers.
... css animat
ions css3 animat
ions allow you to define configurat
ions of style, as keyframes, and to transit
ion between them defining an animat
ion.
...And 3 more matches
backdrop-filter - CSS: Cascading Style Sheets
/* keyword value */ backdrop-filter: none; /* url to svg filter */ backdrop-filter: url(commonfilters.svg#filter); /* <filter-funct
ion> values */ backdrop-filter: blur(2px); backdrop-filter: brightness(60%); backdrop-filter: contrast(40%); backdrop-filter: drop-shadow(4px 4px 10px blue); backdrop-filter: grayscale(30%); backdrop-filter: hue-rotate(120deg); backdrop-filter: invert(70%); backdrop-filter: opacity(20%); backdrop-filter: sepia(90%); backdrop-filter: saturate(80%); /* multiple filters */ backdrop-filter: url(filters...
... <filter-funct
ion-list> a space-separated list of <filter-funct
ion>s or an svg filter that will be applied to the backdrop.
... formal definit
ion initial valuenoneapplies toall elements; in svg, it applies to container elements excluding the defs element and all graphics elementsinheritednocomputed valueas specifiedanimat
ion typea filter funct
ion list formal syntax none | <filter-funct
ion-list>where <filter-funct
ion-list> = [ <filter-funct
ion> | <url> ]+where <filter-funct
ion> = <blur()> | <brightness()> | <contrast()> | <drop-shadow()> | <grayscale()> | <hue-rotate()> | <invert()> | <opacity()> | <saturate()> | <sepia()>where <blur()> = blur( <length> )<brightness()> = brightness( <number-percentage> )<contrast()> = contrast( [ <number-percentage> ] )<drop-shadow()> = drop-shadow( <length>{2,3} <color>?
...And 3 more matches
background-clip - CSS: Cascading Style Sheets
if the element has no background-image or background-color, this property will only have a visual effect when the border has transparent reg
ions or partially opaque reg
ions (due to border-style or border-image); otherwise, the border masks the difference.
... formal definit
ion initial valueborder-boxapplies toall elements.
... it also applies to ::first-letter and ::first-line.inheritednocomputed valueas specifiedanimat
ion typediscrete formal syntax <box>#where <box> = border-box | padding-box | content-box examples html <p class="border-box">the background extends behind the border.</p> <p class="padding-box">the background extends to the inside edge of the border.</p> <p class="content-box">the background extends only to the edge of the content box.</p> <p class="text">the background is clipped to the foreground text.</p> css p { border: .8em darkv
iolet; border-style: dotted double; margin: 1em 0; padding: 1.4em; background: linear-gradient(60deg, red, yellow, red, yellow, red); font: 900 1.2em sans-serif; text-decorat
ion: underline; } .border-box { background-clip: border-box; } .padding...
...And 3 more matches
border-block-start - CSS: Cascading Style Sheets
the physical border to which it maps depends on the element's writing mode, direct
ionality, and text orientat
ion.
... it corresponds to the border-top, border-right, border-bottom, or border-left property depending on the values defined for writing-mode, direct
ion, and text-orientat
ion.
... formal definit
ion initial valueas each of the properties of the shorthand:border-width: as each of the properties of the shorthand:border-top-width: mediumborder-right-width: mediumborder-bottom-width: mediumborder-left-width: mediumborder-style: as each of the properties of the shorthand:border-top-style: noneborder-right-style: noneborder-bottom-style: noneborder-left-style: nonecolor: varies from one browser ...
...And 3 more matches
border-bottom-color - CSS: Cascading Style Sheets
formal definit
ion initial valuecurrentcolorapplies toall elements.
... it also applies to ::first-letter.inheritednocomputed valuecomputed coloranimat
ion typea color formal syntax <'border-top-color'> examples a simple div with a border html <div class="mybox"> <p>this is a box with a border around it.
... note which side of the box is <span class="redtext">red</span>.</p> </div> css .mybox { border: solid 0.3em gold; border-bottom-color: red; width: auto; } .redtext { color: red; } result specificat
ions specificat
ion status comment css backgrounds and borders module level 3the definit
ion of 'border-bottom-color' in that specificat
ion.
...And 3 more matches
border-bottom-left-radius - CSS: Cascading Style Sheets
a background, being an image or a color, is clipped at the border, even a rounded one; the exact locat
ion of the clipping is defined by the value of the background-clip property.
... formal definit
ion initial value0applies toall elements; but user agents are not required to apply to table and inline-table elements when border-collapse is collapse.
... the behav
ior on internal table elements is undefined for the moment..
...And 3 more matches
border-bottom-right-radius - CSS: Cascading Style Sheets
a background, being an image or a color, is clipped at the border, even a rounded one; the exact locat
ion of the clipping is defined by the value of the background-clip property.
... formal definit
ion initial value0applies toall elements; but user agents are not required to apply to table and inline-table elements when border-collapse is collapse.
... the behav
ior on internal table elements is undefined for the moment..
...And 3 more matches
border-inline-start - CSS: Cascading Style Sheets
constituent properties this property is a shorthand for the following css properties: border-inline-start-color border-inline-start-style border-inline-start-width syntax border-inline-start: 1px; border-inline-start: 2px dotted; border-inline-start: medium dashed green; the physical border to which border-inline-start maps depends on the element's writing mode, direct
ionality, and text orientat
ion.
... it corresponds to the border-top, border-right, border-bottom, or border-left property depending on the values defined for writing-mode, direct
ion, and text-orientat
ion.
... formal definit
ion initial valueas each of the properties of the shorthand:border-width: as each of the properties of the shorthand:border-top-width: mediumborder-right-width: mediumborder-bottom-width: mediumborder-left-width: mediumborder-style: as each of the properties of the shorthand:border-top-style: noneborder-right-style: noneborder-bottom-style: noneborder-left-style: nonecolor: varies from one browser ...
...And 3 more matches
border-left-color - CSS: Cascading Style Sheets
formal definit
ion initial valuecurrentcolorapplies toall elements.
... it also applies to ::first-letter.inheritednocomputed valuecomputed coloranimat
ion typea color formal syntax <color>where <color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color>where <rgb()> = rgb( <percentage>{3} [ / <alpha-value> ]?
... note which side of the box is <span class="redtext">red</span>.</p> </div> css .mybox { border: solid 0.3em gold; border-left-color: red; width: auto; } .redtext { color: red; } result specificat
ions specificat
ion status comment css backgrounds and borders module level 3the definit
ion of 'border-left-color' in that specificat
ion.
...And 3 more matches
font-feature-settings - CSS: Cascading Style Sheets
: "smcp", "swsh" 2; /* global values */ font-feature-settings: inherit; font-feature-settings: initial; font-feature-settings: unset; whenever possible, web authors should instead use the font-variant shorthand property or an associated longhand property such as font-variant-ligatures, font-variant-caps, font-variant-east-asian, font-variant-alternates, font-variant-numeric or font-variant-posit
ion.
... formal definit
ion initial valuenormalapplies toall elements.
... it also applies to ::first-letter and ::first-line.inheritedyescomputed valueas specifiedanimat
ion typediscrete formal syntax normal | <feature-tag-value>#where <feature-tag-value> = <string> [ <integer> | on | off ]?
...And 3 more matches
grid-area - CSS: Cascading Style Sheets
the grid-area css shorthand property specifies a grid item’s size and locat
ion within a grid by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the edges of its grid area.
...if not enough lines with that name exist, all implicit grid lines are assumed to have that name for the purpose of finding this posit
ion.
...if not enough lines with that name exist, all implicit grid lines on the side of the explicit grid corresponding to the search direct
ion are assumed to have that name for the purpose of counting this span.
...And 3 more matches
grid-column-end - CSS: Cascading Style Sheets
the grid-column-end css property specifies a grid item’s end posit
ion within the grid column by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the block-end edge of its grid area.
...if not enough lines with that name exist, all implicit grid lines are assumed to have that name for the purpose of finding this posit
ion.
...if not enough lines with that name exist, all implicit grid lines on the side of the explicit grid corresponding to the search direct
ion are assumed to have that name for the purpose of counting this span.
...And 3 more matches
grid-row-end - CSS: Cascading Style Sheets
the grid-row-end css property specifies a grid item’s end posit
ion within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-end edge of its grid area.
...if not enough lines with that name exist, all implicit grid lines are assumed to have that name for the purpose of finding this posit
ion.
...if not enough lines with that name exist, all implicit grid lines on the side of the explicit grid corresponding to the search direct
ion are assumed to have that name for the purpose of counting this span.
...And 3 more matches
grid-row-start - CSS: Cascading Style Sheets
the grid-row-start css property specifies a grid item’s start posit
ion within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start edge of its grid area.
...if not enough lines with that name exist, all implicit grid lines are assumed to have that name for the purpose of finding this posit
ion.
...if not enough lines with that name exist, all implicit grid lines on the side of the explicit grid, corresponding to the search direct
ion, are assumed to have that name for the purpose of counting this span.
...And 3 more matches
initial - CSS: Cascading Style Sheets
examples using initial to reset color for an element html <p> <span>this text is red.</span> <em>this text is in the initial color (typically black).</em> <span>this is red again.</span> </p> css p { color: red; } em { color: initial; } result specificat
ions specificat
ion status comment css cascading and inheritance level 4the definit
ion of 'initial' in that specificat
ion.
... candidate recommendat
ion no changes from level 3.
... css cascading and inheritance level 3the definit
ion of 'initial' in that specificat
ion.
...And 3 more matches
list-style - CSS: Cascading Style Sheets
constituent properties this property is a shorthand for the following css properties: list-style-image list-style-posit
ion list-style-type syntax /* type */ list-style: square; /* image */ list-style: url('../img/shape.png'); /* posit
ion */ list-style: inside; /* type | posit
ion */ list-style: georgian inside; /* type | image | posit
ion */ list-style: lower-roman url('../img/shape.png') outside; /* keyword value */ list-style: none; /* global values */ list-style: inherit; list-style: initial; list-style: ...
... list-style-posit
ion see list-style-posit
ion.
... ul { list-style: none; } ul li::before { content: "\200b"; } voiceover and list-style-type: none – unfettered thoughts mdn understanding wcag, guideline 1.3 explanat
ions understanding success criter
ion 1.3.1 | w3c understanding wcag 2.0 formal definit
ion initial valueas each of the properties of the shorthand:list-style-type: disclist-style-posit
ion: outsidelist-style-image: noneapplies tolist itemsinheritedyescomputed valueas each of the properties of the shorthand:list-style-image: none or the image with its uri made absolutelist-style-posit
ion: as specif...
...And 3 more matches
margin-inline - CSS: Cascading Style Sheets
the margin-inline css shorthand property is a shorthand property that defines both the logical inline start and end margins of an element, which maps to physical margins depending on the element's writing mode, direct
ionality, and text orientat
ion.
... 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 defined for writing-mode, direct
ion, and text-orientat
ion.
... formal definit
ion initial value0applies tosame as margininheritednopercentagesdepends on layout modelcomputed valueif specified as a length, the corresponding absolute length; if specified as a percentage, the specified value; otherwise, autoanimat
ion typediscrete formal syntax <'margin-left'>{1,2} examples setting inline start and end margins html <div> <p class="exampletext">example text</p> </div> css div { background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: vertical-rl; margin-inline: 20px 40px; background...
...And 3 more matches
margin-top - CSS: Cascading Style Sheets
formal definit
ion initial value0applies toall elements, except elements with table display types other than table-capt
ion, table and inline-table.
... it also applies to ::first-letter and ::first-line.inheritednopercentagesrefer to the width of the containing blockcomputed valuethe percentage as specified or the absolute lengthanimat
ion typea length formal syntax <length> | <percentage> | auto examples setting positive and negative top margins .content { margin-top: 5%; } .sidebox { margin-top: 10px; } .logo { margin-top: -5px; } #footer { margin-top: 1em; } specificat
ions specificat
ion status comment css basic box modelthe definit
ion of 'margin-top' in that specificat
ion.
... working draft no significant change css level 2 (revis
ion 1)the definit
ion of 'margin-top' in that specificat
ion.
...And 3 more matches
offset-distance - CSS: Cascading Style Sheets
the offset-distance css property specifies a posit
ion along an offset-path for an element to be placed.
... syntax /* default value */ offset-distance: 0; /* the middle of the offset-path */ offset-distance: 50%; /* a fixed length posit
ioned along the path */ offset-distance: 40px; <length-percentage> a length that specifies how far the element is along the path (defined with offset-path).
... formal definit
ion initial value0applies totransformable elementsinheritednopercentagesrefer to the total path lengthcomputed valuefor <length> the absolute value, otherwise a percentageanimat
ion typea length, percentage or calc(); formal syntax <length-percentage>where <length-percentage> = <length> | <percentage> examples using offset-distance in an animat
ion the mot
ion aspect in css mot
ion path typically comes from animating the offset-distance property.
...And 3 more matches
offset - CSS: Cascading Style Sheets
note: early vers
ions of the spec called this property mot
ion.
... constituent properties this property is a shorthand for the following css properties: offset-anchor offset-distance offset-path offset-posit
ion offset-rotate syntax /* offset posit
ion */ offset: auto; offset: 10px 30px; offset: none; /* offset path */ offset: ray(45deg closest-side); offset: path('m 100 100 l 300 100 l 200 300 z'); offset: url(arc.svg); /* offset path with distance and/or rotat
ion */ offset: url(circle.svg) 100px; offset: url(circle.svg) 40%; offset: url(circle.svg) 30deg; offset: url(circle.svg) 50px 20deg; /* including offset anchor */ offset: ray(45deg closest-side) / 40px 20px; offset: url(arc.svg) 2cm / 0.5cm 3cm; offset: url(arc.svg) 30deg / 50px 100px; formal definit
ion initial valueas each of the properties of the shorthand:offset-posit
ion: autoof...
...fset-path: noneoffset-distance: 0offset-anchor: autooffset-rotate: autoapplies totransformable elementsinheritednopercentagesas each of the properties of the shorthand:offset-posit
ion: refertosizeofcontainingblockoffset-distance: refer to the total path lengthoffset-anchor: relativetowidthandheightcomputed valueas each of the properties of the shorthand:offset-posit
ion: 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 specifiedanimat
ion typeas each of the properties of the shorthand:offset-posit
ion: a posit
ionoffset-path: as <angle>, <basic-shape> or <path()>offset-distance: a length, percentage or calc(...
...And 3 more matches
overflow-y - CSS: Cascading Style Sheets
formal definit
ion initial valuevisibleapplies toblock-containers, flex containers, and grid containersinheritednocomputed valueas specified, except with visible/clip computing to auto/hidden respectively if one of overflow-x or overflow-y is neither visible nor clipanimat
ion typediscrete formal syntax visible | hidden | clip | scroll | auto examples setting overflow-y behav
ior html <ul> <li><code>overflow...
...ut enim ad minim veniam, quis nostrud exercitat
ion ullamco laboris nisi ut aliquip ex ea commodo consequat.
...ut enim ad minim veniam, quis nostrud exercitat
ion ullamco laboris nisi ut aliquip ex ea commodo consequat.
...And 3 more matches
scroll-padding-block - CSS: Cascading Style Sheets
the scroll-padding-block shorthand property sets the scroll padding of an element in the block dimens
ion.
... the scroll-padding properties define offsets for the optimal viewing reg
ion of the scrollport: the reg
ion used as the target reg
ion for placing things in view of the user.
... this allows the author to exclude reg
ions of the scrollport that are obscured by other content (such as fixed-posit
ioned toolbars or sidebars) or simply to put more breathing room between a targeted element and the edges of the scrollport.
...And 3 more matches
scroll-padding-inline - CSS: Cascading Style Sheets
the scroll-padding-inline shorthand property sets the scroll padding of an element in the inline dimens
ion.
... the scroll-padding properties define offsets for the optimal viewing reg
ion of the scrollport: the reg
ion used as the target reg
ion for placing things in view of the user.
... this allows the author to exclude reg
ions of the scrollport that are obscured by other content (such as fixed-posit
ioned toolbars or sidebars) or simply to put more breathing room between a targetted element and the edges of the scrollport.
...And 3 more matches
<string> - CSS: Cascading Style Sheets
double quote." 'this is a string with \' an escaped single quote.' 'this string also has \27 an escaped single quote.' "this is a string with \\ an escaped backslash." /* new line in a string */ "this string has a \aline break in it." /* string spanning two lines of code (these two strings will have identical output) */ "a really long \ awesome string" "a really long awesome string" specificat
ions specificat
ion status comment css values and units module level 3the definit
ion of '<string>' in that specificat
ion.
... candidate recommendat
ion no significant change from css level 2 (revis
ion 1).
... css level 2 (revis
ion 1)the definit
ion of '<string>' in that specificat
ion.
...And 3 more matches
<feDiffuseLighting> - SVG: Scalable Vector Graphics
the resulting image, which is an rgba opaque image, depends on the light color, light posit
ion and surface geometry of the input bump map.
... attributes global attributes core attributes presentat
ion attributes filter primitive attributes class style specific attributes in surfacescale diffuseconstant kernelunitlength dom interface this element implements the svgfediffuselightingelement interface.
...="1" k2="0" k3="0" k4="0"/> </filter> <circle cx="170" cy="80" r="50" fill="green" filter="url(#lightme1)" /> <!-- the light source is a fedistantlight element --> <text text-anchor="middle" x="280" y="22">fedistantlight</text> <filter id="lightme2"> <fediffuselighting in="sourcegraphic" result="light" lighting-color="white"> <fedistantlight azimuth="240" elevat
ion="20"/> </fediffuselighting> <fecomposite in="sourcegraphic" in2="light" operator="arithmetic" k1="1" k2="0" k3="0" k4="0"/> </filter> <circle cx="280" cy="80" r="50" fill="green" filter="url(#lightme2)" /> <!-- the light source is a fespotlight source --> <text text-anchor="middle" x="390" y="22">fespotlight</text> <filter id="lightme3"> <fediffuse...
...And 3 more matches
<feGaussianBlur> - SVG: Scalable Vector Graphics
the <fegaussianblur> svg filter primitive blurs the input image by the amount specified in stddeviat
ion, which defines the bell-curve.
... usage context categoriesfilter primitive elementpermitted contentany number of the following elements, in any order:<animate>, <set> attributes global attributes core attributes presentat
ion attributes filter primitive attributes class style specific attributes in stddeviat
ion edgemode dom interface this element implements the svgfegaussianblurelement interface.
... example simple example svg <svg width="230" height="120" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <filter id="blurme"> <fegaussianblur in="sourcegraphic" stddeviat
ion="5" /> </filter> <circle cx="60" cy="60" r="50" fill="green" /> <circle cx="170" cy="60" r="50" fill="green" filter="url(#blurme)" /> </svg> result screenshotlive sample drop shadow example svg <svg width="120" height="120" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <filter id="dropshadow"> <fegaussianblur in="sourcealpha" stddeviat
ion="3" /> <feoffset dx="2" dy="4" /> <femerge> <femergenode /> <femergenode in="sourcegraphic" /> </femerge> </filter> <circle cx="60" cy="60" r=...
...And 3 more matches
<feTurbulence> - SVG: Scalable Vector Graphics
the <feturbulence> svg filter primitive creates an image using the perlin turbulence funct
ion.
...the resulting image will fill the entire filter primitive subreg
ion.
... usage context categoriesfilter primitive elementpermitted contentany number of the following elements, in any order:<animate>, <set> attributes global attributes core attributes presentat
ion attributes filter primitive attributes class style specific attributes basefrequency numoctaves seed stitchtiles type dom interface this element implements the svgfeturbulenceelement interface.
...And 3 more matches
<g> - SVG: Scalable Vector Graphics
transformat
ions applied to the <g> element are performed on its child elements, and its attributes are inherited by its children.
... html,body,svg { height:100% } <svg viewbox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"> <!-- using g to inherit presentat
ion attributes --> <g fill="white" stroke="green" stroke-width="5"> <circle cx="40" cy="40" r="25" /> <circle cx="60" cy="60" r="25" /> </g> </svg> attributes this element only includes global attributes global attributes core attributes most notably: id, tabindex styling attributes class, style condit
ional processing attributes most notably: requiredextens
ions, systemlanguage event attributes global event attributes, graphical event attributes presentat
ion attributes most notably: clip-path, clip-rule, color, color-interpolat
ion, color-rendering, c...
... aria-busy, aria-checked, aria-colcount, aria-colindex, aria-colspan, aria-controls, 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-orientat
ion, aria-owns, aria-placeholder, aria-posinset, aria-pressed, aria-readonly, aria-relevant, aria-required, aria-roledescript
ion, 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 an...
...And 3 more matches
<path> - SVG: Scalable Vector Graphics
value type: <number> ; default value: none; animatable: yes global attributes core attributes most notably: id, tabindex styling attributes class, style condit
ional processing attributes most notably: requiredextens
ions, systemlanguage event attributes global event attributes, graphical event attributes presentat
ion attributes most notably: clip-path, clip-rule, color, color-interpolat
ion, color-rendering, cursor, display, fill, fill-opacity, fill-rule, filter, mask, opacity, pointer-events, shape-rendering, stroke, stroke-dasharray, stroke-dashoffse...
... aria-busy, aria-checked, aria-colcount, aria-colindex, aria-colspan, aria-controls, 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-orientat
ion, aria-owns, aria-placeholder, aria-posinset, aria-pressed, aria-readonly, aria-relevant, aria-required, aria-roledescript
ion, 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 orde...
...r:animat
ion elementsdescriptive elements specificat
ions specificat
ion status comment svg pathsthe definit
ion of '<path>' in that specificat
ion.
...And 3 more matches
<pattern> - SVG: Scalable Vector Graphics
patterntransform this attribute contains the definit
ion of an opt
ional addit
ional transformat
ion from the pattern coordinate system onto the target coordinate system.
... value type: userspaceonuse|objectboundingbox; default value: objectboundingbox; animatable: yes preserveaspectrat
io this attribute defines how the svg fragment must be deformed if it is embedded in a container with a different aspect rat
io.
... value type: <length>|<percentage> ; default value: 0; animatable: yes global attributes core attributes most notably: id, tabindex styling attributes class, style condit
ional processing attributes most notably: requiredextens
ions, systemlanguage presentat
ion attributes most notably: clip-path, clip-rule, color, color-interpolat
ion, color-rendering, cursor, display, fill, fill-opacity, fill-rule, filter, mask, opacity, pointer-events, shape-rendering, stroke, stroke-dasharray, stroke-dashoffset, stroke-linecap, stroke-linejoin, stroke-miterlimit, stroke-opacity, ...
...And 3 more matches
<rect> - SVG: Scalable Vector Graphics
the <rect> element is a basic svg shape that draws rectangles, defined by their posit
ion, width, and height.
... global attributes core attributes most notably: id, tabindex styling attributes class, style condit
ional processing attributes most notably: requiredextens
ions, systemlanguage event attributes global event attributes, graphical event attributes presentat
ion attributes most notably: clip-path, clip-rule, color, color-interpolat
ion, color-rendering, cursor, display, fill, fill-opacity, fill-rule, filter, mask, opacity, pointer-events, shape-rendering, stroke, stroke-dasharray, stroke-dashoffse...
... aria-busy, aria-checked, aria-colcount, aria-colindex, aria-colspan, aria-controls, 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-orientat
ion, aria-owns, aria-placeholder, aria-posinset, aria-pressed, aria-readonly, aria-relevant, aria-required, aria-roledescript
ion, 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 ...
...And 3 more matches
<set> - SVG: Scalable Vector Graphics
the svg <set> element provides a simple means of just setting the value of an attribute for a specified durat
ion.
...; padding:0; } <svg viewbox="0 0 10 10" xmlns="http://www.w3.org/2000/svg"> <style> rect { cursor: pointer } .round { rx: 5px; fill: green; } </style> <rect id="me" width="10" height="10"> <set attributename="class" to="round" begin="me.click" dur="2s" /> </rect> </svg> attributes to this attribute defines the value to be applied to the target attribute for the durat
ion of the animat
ion.
... value type: <anything>; default value: none; animatable: no animat
ion attributes animat
ion timing attributes begin, dur, end, min, max, restart, repeatcount, repeatdur, fill other animat
ion attributes most notably: attributename animat
ion event attributes most notably: onbegin, onend, onrepeat global attributes core attributes most notably: id styling attributes class, style event attributes global event attributes, document element event attributes usage notes categoriesanimat
ion elementpermitted contentany number of the following elements, in any order:descriptive elements specificat
ions specificat
ion status comment svg animat
ions level 2the definit
ion of '<set>' in that sp...
...And 3 more matches
SVG as an Image - SVG: Scalable Vector Graphics
many browsers support svg images in: html <img> or <svg> elements css background-image gecko-specific contexts addit
ionally, gecko 2.0 (firefox 4 / thunderbird 3.3 / seamonkey 2.1) introduced support for using svg in these contexts: css list-style-image css content svg <image> element svg <feimage> element canvas drawimage funct
ion restrict
ions for security purposes, gecko places some restrict
ions on svg content when it's being used as an image: javascript is disabled.
... note that the above restrict
ions are specific to image contexts; they don't apply when svg content is viewed directly, or when it's embedded as a document via the <iframe>, <object>, or <embed> elements.
... specificat
ions specificat
ion status comment html5the definit
ion of 'svg within <img> element' in that specificat
ion.
...And 3 more matches
Other content in SVG - SVG: Scalable Vector Graphics
« prev
iousnext » apart from graphic primitives like rectangles and circles, svg offers a set of elements to embed other types of content in images as well.
...the specificat
ion requests applicat
ions to support at least png, jpeg and svg format files.
...this means, that you can use clips, masks, filters, rotat
ions and all other tools of svg on the content: <svg vers
ion="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"> <image x="90" y="-65" width="128" height="146" transform="rotate(45)" xlink:href="https://developer.mozilla.org/static/img/favicon144.png"/> </svg> screenshotlive sample embedding arbitrary xml since svg is an xml applicat
ion, you can of course always embed arbitrary xml anywhere in an svg document.
...And 3 more matches
child - XPath
if an xpath express
ion does not specify an axis, the child axis is understood by default.
... specificat
ions specificat
ion status comment xpath 3.1the definit
ion of 'child' in that specificat
ion.
... recommendat
ion xpath 3.0the definit
ion of 'child' in that specificat
ion.
...And 3 more matches
self - XPath
it can be abbreviated as a single per
iod (.).
... specificat
ions specificat
ion status comment xpath 3.1the definit
ion of 'self' in that specificat
ion.
... recommendat
ion xpath 3.0the definit
ion of 'self' in that specificat
ion.
...And 3 more matches
generate-id - XPath
xslt/xpath reference: xslt elements, exslt funct
ions, xpath funct
ions, xpath axes the generate-id funct
ion generates a unique id for the first node in a given node-set and returns a string containing that id.
... syntax generate-id( [node-set] ) arguments node-set (opt
ional) an id will be generated for the first node in this node-set.
... notes the same id must be generated every time for the same node in the current document in the current transformat
ion.
...And 3 more matches
Loading Content Scripts - Archive of obsolete content
the constructors for content-script-using objects such as panel and page-mod define a group of opt
ions for loading content scripts: contentscript string, array contentscriptfile string, array contentscriptwhen string contentscriptopt
ions object we have already seen the contentscript opt
ion, which enables you to pass in the text of the script itself as a string literal.
... this vers
ion of the api avoids the need to maintain a separate file for the content script.
... the contentscriptfile opt
ion enables you to pass in the local file url from which the content script will be loaded.
...And 2 more matches
querystring - Archive of obsolete content
utility funct
ions for working with query strings.
... globals funct
ions stringify(fields, separator, assignment) serializes an object containing name:value pairs into a query string: querystring.stringify({ foo: 'bar', baz: 4 }); // => 'foo=bar&baz=4' by default '&' and'=' are used as separator and assignment characters, but you can override this using addit
ional opt
ional parameters: querystring.stringify({ foo: 'bar', baz: 4 }, ';', ':'); // => 'foo:bar;baz:4' parameters fields : object the data to convert to a query string.
... parse(querystring, separator, assignment) parse a query string into an object containing name:value pairs: querystring.parse('foo=bar&baz=bla') // => { foo: 'bar', baz: 'bla' } opt
ionally separator and assignment arguments may be passed to override default '&' and '=' characters: querystring.parse('foo:bar|baz:bla', '|', ':') // => { foo: 'bar', baz: 'bla' } parameters querystring : string the query string.
...And 2 more matches
PaymentResponse.requestId - Web APIs
specificat
ions specificat
ion status comment payment request apithe definit
ion of 'requestid' in that specificat
ion.
... candidate recommendat
ion initial definit
ion.
... desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on
iossamsung internetrequestidchrome full support 61edge full support 16firefox full support 56notes disabled full support 56notes disabled notes available only in nightly builds.disabled from vers
ion 56: this feature is behind the dom.payments.request...
...And 2 more matches
performance.clearMarks() - Web APIs
syntax performance.clearmarks(); performance.clearmarks(name); arguments name opt
ional a domstring representing the name of the timestamp.
...funct
ion logmarkcount() { console.log( "found this many entries: " + performance.getentriesbytype("mark").length ); } // create a bunch of marks.
...performance.clearmarks(); logmarkcount() // "found this many entries: 0" specificat
ions specificat
ion status comment user timing level 2the definit
ion of 'clearmarks()' in that specificat
ion.
...And 2 more matches
performance.getEntries() - Web APIs
example funct
ion use_performanceentry_methods() { console.log("performanceentry tests ..."); if (performance.mark === undefined) { console.log("...
...rmance.getentries(); for (var i=0; i < p.length; i++) { console.log("entry[" + i + "]"); check_performanceentry(p[i]); } // use getentriesbytype() to get all "mark" entries p = performance.getentriesbytype("mark"); for (let i=0; i < p.length; i++) { console.log ("mark only entry[" + i + "]: name = " + p[i].name + "; starttime = " + p[i].starttime + "; durat
ion = " + p[i].durat
ion); } // use getentriesbyname() to get all "mark" entries named "begin" p = performance.getentriesbyname("begin", "mark"); for (let i=0; i < p.length; i++) { console.log ("mark and begin entry[" + i + "]: name = " + p[i].name + "; starttime = " + p[i].starttime + "; durat
ion = " + p[i].durat
ion); } } specificat
ions specificat
ion ...
... status comment performance timeline level 2the definit
ion of 'getentries()' in that specificat
ion.
...And 2 more matches
performance.getEntriesByType() - Web APIs
example funct
ion useperformanceentrymethods() { log("performanceentry tests ..."); if (performance.mark === undefined) { log("...
...{name : "begin", entrytype: "mark"}); for (var i=0; i < p.length; i++) { log("begin[" + i + "]"); checkperformanceentry(p[i]); } // use getentriesbytype() to get all "mark" entries p = performance.getentriesbytype("mark"); for (var i=0; i < p.length; i++) { log ("mark only entry[" + i + "]: name = " + p[i].name + "; starttime = " + p[i].starttime + "; durat
ion = " + p[i].durat
ion); } // use getentriesbyname() to get all "mark" entries named "begin" p = performance.getentriesbyname("begin", "mark"); for (var i=0; i < p.length; i++) { log ("mark and begin entry[" + i + "]: name = " + p[i].name + "; starttime = " + p[i].starttime + "; durat
ion = " + p[i].durat
ion); } } specificat
ions specificat
ion status ...
... comment performance timeline level 2the definit
ion of 'getentriesbytype()' in that specificat
ion.
...And 2 more matches
PerformanceEntry.entryType - Web APIs
performance entry type names value subtype type of name property descript
ion of name property frame, navigat
ion performanceframetiming, performancenavigat
iontiming url the document's address.
... funct
ion run_performanceentry() { // check for feature support before continuing if (performance.mark === undefined) { console.log("performance.mark not supported"); return; } // create a performance entry named "begin" via the mark() method performance.mark("begin"); // check the entrytype of all the "begin" entries var entriesnamedbegin = performance.getentriesbyname("begin"); ...
... for (var i=0; i < entriesnamedbegin.length; i++) { var typeofentry = entriesnamedbegin[i].entrytype; console.log("entry is type: " + typeofentry); } } specificat
ions specificat
ion status comment performance timeline level 2the definit
ion of 'entrytype' in that specificat
ion.
...And 2 more matches
PerformanceMeasure - Web APIs
<div id="interfacediagram" style="display: inline-block; posit
ion: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; posit
ion: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectrat
io="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,mona...
... performanceentry.durat
ion returns a domhighrestimestamp that is the durat
ion of the measure (typically, the measure's end mark timestamp minus its start mark timestamp).
... specificat
ions specificat
ion status comment user timing level 2the definit
ion of 'performancemeasure' in that specificat
ion.
...And 2 more matches
PerformanceObserverEntryList.getEntriesByType() - Web APIs
the list is available in the observer's callback funct
ion (as the first parameter in the callback).
... example funct
ion print_perf_entry(pe) { console.log("name: " + pe.name + "; entrytype: " + pe.entrytype + "; starttime: " + pe.starttime + "; durat
ion: " + pe.durat
ion); } // create observer for all performance event types var observe_all = new performanceobserver(funct
ion(list, obs) { var perfentries; // print all entries perfentries = list.getent...
...e("begin", "mark"); for (var i=0; i < perfentries.length; i++) { print_perf_entry(perfentries[i]); } // print entries with type "mark" perfentries = list.getentriesbytype("mark"); for (var i=0; i < perfentries.length; i++) { print_perf_entry(perfentries[i]); } }); // subscribe to all performance event types observe_all.observe({entrytypes: ['frame', 'mark', 'measure', 'navigat
ion', 'resource', 'server']}); var observe_frame = new performanceobserver(funct
ion(list, obs) { var perfentries = list.getentries(); // should only have 'frame' entries for (var i=0; i < perfentries.length; i++) { print_perf_entry(perfentries[i]); } }); // subscribe to only the 'frame' event observe_frame.observe({entrytypes: ['frame']}); specificat
ions specificat
ion sta...
...And 2 more matches
PerformanceResourceTiming.connectStart - Web APIs
the connectstart read-only property returns the timestamp immediately before the user agent starts establishing the connect
ion to the server to retrieve the resource.
... syntax resource.connectstart; return value a domhighrestimestamp immediately before the browser starts to establish the connect
ion to the server to retrieve the resource.
... funct
ion print_performanceentries() { // use getentriesbytype() to just get the "resource" events var p = performance.getentriesbytype("resource"); for (var i=0; i < p.length; i++) { print_start_and_end_properties(p[i]); } } funct
ion print_start_and_end_properties(perfentry) { // print timestamps of the performanceentry *start and *end properties properties = ["connectstart", "connectend", "domainlookupstart", "domainlookupend", "fetchstart", "redirectstart", "redirectend", "requeststart", "responsestart", "responseend", "secureconnect
ionstart"]; for (var i...
...And 2 more matches
PerformanceResourceTiming.domainLookupEnd - Web APIs
if the user agent has the domain informat
ion in cache, domainlookupstart and domainlookupend represent the times when the user agent starts and ends the domain data retrieval from the cache.
... funct
ion print_performanceentries() { // use getentriesbytype() to just get the "resource" events var p = performance.getentriesbytype("resource"); for (var i=0; i < p.length; i++) { print_start_and_end_properties(p[i]); } } funct
ion print_start_and_end_properties(perfentry) { // print timestamps of the *start and *end properties properties = ["connectstart", "connectend", "domainlookupstart", "domainlookupend", ...
... "fetchstart", "redirectstart", "redirectend", "requeststart", "responsestart", "responseend", "secureconnect
ionstart"]; for (var i=0; i < properties.length; i++) { // check each property var supported = properties[i] in perfentry; if (supported) { var value = perfentry[properties[i]]; console.log("...
...And 2 more matches
PerformanceResourceTiming.fetchStart - Web APIs
if there are http redirects the property returns the time immediately before the user agent starts to fetch the final resource in the redirect
ion.
... funct
ion print_performanceentries() { // use getentriesbytype() to just get the "resource" events var p = performance.getentriesbytype("resource"); for (var i=0; i < p.length; i++) { print_start_and_end_properties(p[i]); } } funct
ion print_start_and_end_properties(perfentry) { // print timestamps of the performanceentry *start and *end properties properties = ["connectstart", "connectend", "domainlookupstart", "domainlookupend", "fetchstart", ...
... "redirectstart", "redirectend", "requeststart", "responsestart", "responseend", "secureconnect
ionstart"]; for (var i=0; i < properties.length; i++) { // check each property var supported = properties[i] in perfentry; if (supported) { var value = perfentry[properties[i]]; console.log("...
...And 2 more matches
PerformanceResourceTiming.requestStart - Web APIs
if the transport connect
ion fails and the browser retires the request, the value returned will be the start of the retry request.
... funct
ion print_performanceentries() { // use getentriesbytype() to just get the "resource" events var p = performance.getentriesbytype("resource"); for (var i=0; i < p.length; i++) { print_start_and_end_properties(p[i]); } } funct
ion print_start_and_end_properties(perfentry) { // print timestamps of the performanceentry *start and *end properties properties = ["connectstart", "connectend", ...
... "domainlookupstart", "domainlookupend", "fetchstart", "redirectstart", "redirectend", "requeststart", "responsestart", "responseend", "secureconnect
ionstart"]; for (var i=0; i < properties.length; i++) { // check each property var supported = properties[i] in perfentry; if (supported) { var value = perfentry[properties[i]]; console.log("...
...And 2 more matches
PerformanceResourceTiming.responseEnd - Web APIs
the responseend read-only property returns a timestamp immediately after the browser receives the last byte of the resource or immediately before the transport connect
ion is closed, whichever comes first.
... syntax resource.responseend; return value a domhighrestimestamp immediately after the browser receives the last byte of the resource or immediately before the transport connect
ion is closed, whichever comes first.
... funct
ion print_performanceentries() { // use getentriesbytype() to just get the "resource" events var p = performance.getentriesbytype("resource"); for (var i=0; i < p.length; i++) { print_start_and_end_properties(p[i]); } } funct
ion print_start_and_end_properties(perfentry) { // print timestamps of the performanceentry *start and *end properties properties = ["connectstart", "connectend", "domainlookupstart", "domainlookupend", "fetchstart", "redirectstart", "redirectend", "requeststart", "responsestart", "responseend", "secureconnect
ionstart"]; for (var i...
...And 2 more matches
PerformanceTiming.domainLookupEnd - Web APIs
this interface of this property is deprecated in the navigat
ion timing level 2 specificat
ion.
... please use the performancenavigat
iontiming interface instead.
...if a persistent connect
ion is used, or the informat
ion is stored in a cache or a local resource, the value will be the same as performancetiming.fetchstart.
...And 2 more matches
PerformanceTiming.domainLookupStart - Web APIs
this interface of this property is deprecated in the navigat
ion timing level 2 specificat
ion.
... please use the performancenavigat
iontiming interface instead.
...if a persistent connect
ion is used, or the informat
ion is stored in a cache or a local resource, the value will be the same as performancetiming.fetchstart.
...And 2 more matches
PerformanceTiming.fetchStart - Web APIs
this interface of this property is deprecated in the navigat
ion timing level 2 specificat
ion.
... please use the performancenavigat
iontiming interface instead.
...this moment is before the check to any applicat
ion cache.
...And 2 more matches
SVGClipPathElement - Web APIs
<div id="interfacediagram" style="display: inline-block; posit
ion: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; posit
ion: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectrat
io="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-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...
... svgclippathelement.clippathunits read only an svganimatedenumerat
ion corresponding to the clippathunits attribute of the given <clippath> element.
... specificat
ions specificat
ion status comment css masking module level 1the definit
ion of 'svgclippathelement' in that specificat
ion.
...And 2 more matches
SVGEllipseElement - Web APIs
<div id="interfacediagram" style="display: inline-block; posit
ion: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; posit
ion: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectrat
io="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/>...
... example svg content <svg width="200" height="200" xmlns="http://www.w3.org/2000/svg"> <ellipse cx="100" cy="100" rx="100" ry="60" id="ellipse" onclick="outputsize();"/> </svg> javascript content funct
ion outputsize() { var ellipse = document.getelementbyid("ellipse"); // outputs "horizontal radius: 100 vertical radius: 60" console.log( 'horizontal radius: ' + ellipse.rx.baseval.valueasstring, 'vertical radius: ' + ellipse.ry.baseval.valueasstring ) } result specificat
ions specificat
ion status comment scalable vector graphics (svg) 2the definit
ion...
... of 'svgellipseelement' in that specificat
ion.
...And 2 more matches
SVGFEDistantLightElement - Web APIs
<div id="interfacediagram" style="display: inline-block; posit
ion: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; posit
ion: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectrat
io="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line...
... svgfedistantlightelement.elevat
ion read only an svganimatednumber corresponding to the elevat
ion attribute of the given element.
... specificat
ions specificat
ion status comment filter effects module level 1the definit
ion of 'svgfedistantlightelement' in that specificat
ion.
...And 2 more matches
SVGFEImageElement - Web APIs
<div id="interfacediagram" style="display: inline-block; posit
ion: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; posit
ion: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectrat
io="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="...
... svgfeimageelement.preserveaspectrat
io read only an svganimatedpreserveaspectrat
io corresponding to the preserveaspectrat
io attribute of the given element.
... specificat
ions specificat
ion status comment filter effects module level 1the definit
ion of 'svgfeimageelement' in that specificat
ion.
...And 2 more matches
SVGGElement - Web APIs
<div id="interfacediagram" style="display: inline-block; posit
ion: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; posit
ion: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectrat
io="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151"...
... specificat
ions specificat
ion status comment scalable vector graphics (svg) 2the definit
ion of 'svggelement' in that specificat
ion.
... candidate recommendat
ion changed the inheritance from svgelement to svggraphicselement and removed the implemented interfaces svgtests, svglangspace, svgexternalresourcesrequired, svgstylable, and svgtransformable.
...And 2 more matches
getBBox() - Web APIs
the coordinates returned are with respect to the current svg space (after the applicat
ion of all geometry attributes on all the elements contained in the target element).
...it also does not account for any transformat
ion applied to the element or its parents.
...this value is irrespective of any transformat
ion attribute applied to it or the parent elements.
...And 2 more matches
SVGLineElement - Web APIs
<div id="interfacediagram" style="display: inline-block; posit
ion: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; posit
ion: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectrat
io="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,2...
... specificat
ions specificat
ion status comment scalable vector graphics (svg) 2the definit
ion of 'svglineelement' in that specificat
ion.
... candidate recommendat
ion changed the inheritance from svgelement to svggeometryelement and removed the implemented interfaces svgtests, svglangspace, svgexternalresourcesrequired, svgstylable, and svgtransformable.
...And 2 more matches
SVGNumber - Web APIs
an svgnumber object can be designated as read only, which means that attempts to modify the object will result in an except
ion being thrown.
... note: if the svgnumber is read-only, a domexcept
ion with the code no_modificat
ion_allowed_err is raised on an attempt to change the value.
... specificat
ions specificat
ion status comment scalable vector graphics (svg) 2the definit
ion of 'svgnumber' in that specificat
ion.
...And 2 more matches
SVGPathElement - Web APIs
<div id="interfacediagram" style="display: inline-block; posit
ion: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; posit
ion: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectrat
io="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2...
... specificat
ions specificat
ion status comment scalable vector graphics (svg) 2the definit
ion of 'svgpathelement' in that specificat
ion.
... candidate recommendat
ion removed the getpathsegatlength() and createsvgpathseg* methods and moved the pathlength property and the gettotallength() and getpointatlength() methods to svggeometryelement.
...And 2 more matches
SVGPathSeg - Web APIs
svg path segment interface this is a base interface that corresponds to a single command within a path data specificat
ion.
...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 edit
ion) constants name value descript
ion pathseg_unknown 0 the unit type is not one of predefined types.
... properties name type descript
ion pathsegtype unsigned short the type of the path segment as specified by one of the constants defined on this interface.
...And 2 more matches
SVGRectElement - Web APIs
<div id="interfacediagram" style="display: inline-block; posit
ion: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; posit
ion: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectrat
io="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,2...
...(changing the color of the rect interface on every click) svg content <svg xmlns="http://www.w3.org/2000/svg" vers
ion="1.1"> <rect width="300" height="100" id="myrect" onclick="dorectclick()" style="fill:rgb(0,0,255);stroke-width:1;stroke:rgb(0,0,0)" /> <text x="60" y="40" fill="white" font-size="40" onclick="dorectclick();">click me</text> </svg> javascript content funct
ion dorectclick(){ var myrect = document.getelementbyid('myrect'); var r = math.floor(math.random() * 255); var g = m...
... specificat
ions specificat
ion status comment scalable vector graphics (svg) 2the definit
ion of 'svgrectelement' in that specificat
ion.
...And 2 more matches
SVGStopElement - Web APIs
<div id="interfacediagram" style="display: inline-block; posit
ion: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; posit
ion: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectrat
io="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2...
... specificat
ions specificat
ion status comment scalable vector graphics (svg) 2the definit
ion of 'svgstopelement' in that specificat
ion.
... candidate recommendat
ion removed inheritance from svgstylable.
...And 2 more matches
SVGSwitchElement - Web APIs
<div id="interfacediagram" style="display: inline-block; posit
ion: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; posit
ion: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectrat
io="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25...
... specificat
ions specificat
ion status comment scalable vector graphics (svg) 2the definit
ion of 'svgswitchelement' in that specificat
ion.
... candidate recommendat
ion changed the inheritance from svgelement to svggraphicselement and removed the implemented interfaces svgtests, svglangspace, svgexternalresourcesrequired, svgstylable, and svgtransformable.
...And 2 more matches
SVGSymbolElement - Web APIs
<div id="interfacediagram" style="display: inline-block; posit
ion: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; posit
ion: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectrat
io="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25...
... specificat
ions specificat
ion status comment scalable vector graphics (svg) 2the definit
ion of 'svgsymbolelement' in that specificat
ion.
... candidate recommendat
ion changed the inheritance from svgelement to svggraphicselement and removed the implemented interfaces svglangspace, svgexternalresourcesrequired, and svgstylable.
...And 2 more matches
SVGTRefElement - Web APIs
<div id="interfacediagram" style="display: inline-block; posit
ion: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; posit
ion: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectrat
io="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>...
...</a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface has no properties but inherits properties from its parent, svgtextposit
ioningelement and implements properties from svgurireference.
... methods this interface has no methods but inherits methods from its parent, svgtextposit
ioningelement and implements properties from svgurireference.
...And 2 more matches
gap (grid-gap) - CSS: Cascading Style Sheets
ue */ gap: 16%; gap: 100%; /* two <length> values */ gap: 20px 10px; gap: 1em 0.5em; gap: 3vmin 2vmax; gap: 0.5cm 2mm; /* one or two <percentage> values */ gap: 16% 100%; gap: 21px 82%; /* calc() values */ gap: calc(10% + 20px); gap: calc(20px + 10%) calc(10% - 5px); /* global values */ gap: inherit; gap: initial; gap: unset; this property is specified as a value for <'row-gap'> followed opt
ionally by a value for <'column-gap'>.
... <percentage> is the width of the gutter separating the grid lines, relative to the dimens
ion of the element.
... formal definit
ion initial valueas each of the properties of the shorthand:row-gap: normalcolumn-gap: normalapplies tomulti-column elements, flex containers, grid containersinheritednocomputed valueas each of the properties of the shorthand:row-gap: as specified, with <length>s made absolute, and normal computing to zero except on multi-column elementscolumn-gap: as specified, with <length>s made absolute, and normal computing to zero except on multi-column elementsanimat
ion typeas each of the properties of the shorthand:row-gap: a length, percentage or calc();column-gap: a length, percentage or calc(); formal syntax <'row-gap'> <'column-gap'>?
...And 2 more matches
grid-auto-flow - CSS: Cascading Style Sheets
formal definit
ion initial valuerowapplies togrid containersinheritednocomputed valueas specifiedanimat
ion typediscrete formal syntax [ row | column ] | dense examples setting grid auto-placement html <div id="grid"> <div id="item1"></div> <div id="item2"></div> <div id="item3"></div> <div id="item4"></div> <div id="item5"></div> </div> <select id="direct
ion" onchange="changegridautoflow()"> <op...
...t
ion value="column">column</opt
ion> <opt
ion value="row">row</opt
ion> </select> <input id="dense" type="checkbox" onchange="changegridautoflow()"> <label for="dense">dense</label> css #grid { height: 200px; width: 200px; display: grid; grid-gap: 10px; grid-template: repeat(4, 1fr) / repeat(2, 1fr); grid-auto-flow: column; /* or 'row', 'row dense', 'column dense' */ } #item1 { background-color: lime; grid-row-start: 3; } #item2 { background-color: yellow; } #item3 { background-color: blue; } #item4 { grid-column-start: 2; background-color: red; } #item5 { background-color: aqua; } funct
ion changegridautoflow() { var grid = document.getelementbyid("grid"); var direct
ion = document.getelementbyid("direct
ion"); var dense = document.getelementbyid("dense...
..."); var gridautoflow = direct
ion.value === "row" ?
...And 2 more matches
grid-template - CSS: Cascading Style Sheets
note: the repeat() funct
ion isn’t allowed in these track listings, as the tracks are intended to visually line up one-to-one with the rows/columns in the “ascii art”.
... formal definit
ion initial valueas each of the properties of the shorthand:grid-template-columns: nonegrid-template-rows: nonegrid-template-areas: noneapplies togrid containersinheritednopercentagesas each of the properties of the shorthand:grid-template-columns: refer to corresponding dimens
ion of the content areagrid-template-rows: refer to corresponding dimens
ion 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 r...
...elative lengths converted into absolute lengthsgrid-template-areas: as specifiedanimat
ion typediscrete formal syntax none | [ <'grid-template-rows'> / <'grid-template-columns'> ] | [ <line-names>?
...And 2 more matches
inset-block-end - CSS: Cascading Style Sheets
the inset-block-end css property defines the logical block end offset of an element, which maps to a physical inset depending on the element's writing mode, direct
ionality, and text orientat
ion.
... it corresponds to the top, right, bottom, or left property depending on the values defined for writing-mode, direct
ion, and text-orientat
ion.
... formal definit
ion initial valueautoapplies toposit
ioned elementsinheritednopercentageslogical-height of containing blockcomputed valuesame as box offsets: top, right, bottom, left properties except that direct
ions are logicalanimat
ion typea length, percentage or calc(); formal syntax <'top'> examples setting block end offset html <div> <p class="exampletext">example text</p> </div> css div { backgro...
...And 2 more matches
inset-block-start - CSS: Cascading Style Sheets
the inset-block-start css property defines the logical block start offset of an element, which maps to a physical inset depending on the element's writing mode, direct
ionality, and text orientat
ion.
... it corresponds to the top, right, bottom, or left property depending on the values defined for writing-mode, direct
ion, and text-orientat
ion.
... formal definit
ion initial valueautoapplies toposit
ioned elementsinheritednopercentageslogical-height of containing blockcomputed valuesame as box offsets: top, right, bottom, left properties except that direct
ions are logicalanimat
ion typea length, percentage or calc(); formal syntax <'top'> examples setting block start offset html <div> <p class="exampletext">example text</p> </div> css div { backg...
...And 2 more matches
inset-block - CSS: Cascading Style Sheets
the inset-block css property defines the logical block start and end offsets of an element, which maps to physical offsets depending on the element's writing mode, direct
ionality, and text orientat
ion.
... it corresponds to the top and bottom, or right and left properties depending on the values defined for writing-mode, direct
ion, and text-orientat
ion.
... formal definit
ion initial valueautoapplies toposit
ioned elementsinheritednopercentageslogical-height of containing blockcomputed valuesame as box offsets: top, right, bottom, left properties except that direct
ions are logicalanimat
ion 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 ...
...And 2 more matches
inset-inline-end - CSS: Cascading Style Sheets
the inset-inline-end css property defines the logical inline end inset of an element, which maps to a physical inset depending on the element's writing mode, direct
ionality, and text orientat
ion.
... it corresponds to the top, right, bottom, or left property depending on the values defined for writing-mode, direct
ion, and text-orientat
ion.
... formal definit
ion initial valueautoapplies toposit
ioned elementsinheritednopercentageslogical-width of containing blockcomputed valuesame as box offsets: top, right, bottom, left properties except that direct
ions are logicalanimat
ion typea length, percentage or calc(); formal syntax <'top'> examples setting inline end offset html <div> <p class="exampletext">example text</p> </div> css div { backgrou...
...And 2 more matches
inset-inline-start - CSS: Cascading Style Sheets
the inset-inline-start css property defines the logical inline start inset of an element, which maps to a physical offset depending on the element's writing mode, direct
ionality, and text orientat
ion.
... it corresponds to the top, right, bottom, or left property depending on the values defined for writing-mode, direct
ion, and text-orientat
ion.
... formal definit
ion initial valueautoapplies toposit
ioned elementsinheritednopercentageslogical-width of containing blockcomputed valuesame as box offsets: top, right, bottom, left properties except that direct
ions are logicalanimat
ion typea length, percentage or calc(); formal syntax <'top'> examples setting inline start offset html <div> <p class="exampletext">example text</p> </div> css div { backg...
...And 2 more matches
inset-inline - CSS: Cascading Style Sheets
the inset-inline css property defines the logical start and end offsets of an element in the inline direct
ion, which maps to physical offsets depending on the element's writing mode, direct
ionality, and text orientat
ion.
... it corresponds to the top and bottom, or right and left properties depending on the values defined for writing-mode, direct
ion, and text-orientat
ion.
... formal definit
ion initial valueautoapplies toposit
ioned elementsinheritednopercentageslogical-width of containing blockcomputed valuesame as box offsets: top, right, bottom, left properties except that direct
ions are logicalanimat
ion 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 ...
...And 2 more matches
<length-percentage> - CSS: Cascading Style Sheets
syntax refer to the documentat
ion for <length> and <percentage> for details of the individual syntaxes allowed by this type.
...s: 10px 10%; font-size: 250%; line-height: 1.5em; /* length examples */ text-shadow: 1px 1px 1px red; border: 5px solid red; letter-spacing: 3px; /* percentage example */ text-size-adjust: 20%; } result use in calc() where a <length-percentage> is specified as an allowable type, this means that the percentage resolves to a length and therefore can be used in a calc() express
ion.
... therefore, all of the following values are acceptable for width: width: 200px; width: 20%; width: calc(100% - 200px); specificat
ions specificat
ion status comment css values and units module level 4the definit
ion of '<length-percentage>' in that specificat
ion.
...And 2 more matches
margin-block-end - CSS: Cascading Style Sheets
the margin-block-end css property defines the logical block end margin of an element, which maps to a physical margin depending on the element's writing mode, direct
ionality, and text orientat
ion.
... 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, direct
ion, and text-orientat
ion.
... formal definit
ion initial value0applies tosame as margininheritednopercentagesdepends on layout modelcomputed valueif specified as a length, the corresponding absolute length; if specified as a percentage, the specified value; otherwise, autoanimat
ion typea length formal syntax <'margin-left'> examples setting block end margin html <div> <p class="exampletext">example text</p> </div> css div { background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: vertical-rl; margin-block-end: 20px; background-color: #c8c800; } result ...
...And 2 more matches
margin-block-start - CSS: Cascading Style Sheets
the margin-block-start css property defines the logical block start margin of an element, which maps to a physical margin depending on the element's writing mode, direct
ionality, and text orientat
ion.
...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, direct
ion, and text-orientat
ion.
... formal definit
ion initial value0applies tosame as margininheritednopercentagesdepends on layout modelcomputed valueif specified as a length, the corresponding absolute length; if specified as a percentage, the specified value; otherwise, autoanimat
ion typea length formal syntax <'margin-left'> examples setting block start margin html <div> <p class="exampletext">example text</p> </div> css div { background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: vertical-lr; margin-block-start: 20px; background-color: #c8c800; } resul...
...And 2 more matches
margin-block - CSS: Cascading Style Sheets
the margin-block css shorthand property defines the logical block start and end margins of an element, which maps to physical margins depending on the element's writing mode, direct
ionality, and text orientat
ion.
...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, direct
ion, and text-orientat
ion.
... formal definit
ion initial value0applies tosame as margininheritednopercentagesdepends on layout modelcomputed valueif specified as a length, the corresponding absolute length; if specified as a percentage, the specified value; otherwise, autoanimat
ion typediscrete formal syntax <'margin-left'>{1,2} examples setting block start and end margins html <div> <p class="exampletext">example text</p> </div> css div { background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: vertical-rl; margin-block: 20px 40px; background-colo...
...And 2 more matches
margin-inline-end - CSS: Cascading Style Sheets
the margin-inline-end css property defines the logical inline end margin of an element, which maps to a physical margin depending on the element's writing mode, direct
ionality, and text orientat
ion.
... in other words, it corresponds to the margin-top, margin-right, margin-bottom or margin-left property depending on the values defined for writing-mode, direct
ion, and text-orientat
ion.
... formal definit
ion initial value0applies tosame as margininheritednopercentagesdepends on layout modelcomputed valueif specified as a length, the corresponding absolute length; if specified as a percentage, the specified value; otherwise, autoanimat
ion typea length formal syntax <'margin-left'> examples setting inline end margin html <div> <p class="exampletext">example text</p> </div> css div { back...
...And 2 more matches
margin-inline-start - CSS: Cascading Style Sheets
the margin-inline-start css property defines the logical inline start margin of an element, which maps to a physical margin depending on the element's writing mode, direct
ionality, and text orientat
ion.
... it corresponds to the margin-top, margin-right, margin-bottom, or margin-left property depending on the values defined for writing-mode, direct
ion, and text-orientat
ion.
...formal definit
ion initial value0applies tosame as margininheritednopercentagesdepends on layout modelcomputed valueif specified as a length, the corresponding absolute length; if specified as a percentage, the specified value; otherwise, autoanimat
ion typea length formal syntax <'margin-left'> examples setting inline start margin html <div> <p class="exampletext">example text</p> </div> css div { ba...
...And 2 more matches
mask-border-outset - CSS: Cascading Style Sheets
values <length> the size of the mask border outset as a dimens
ion.
... formal definit
ion 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 lengthsanimat
ion typediscrete formal syntax [ <length> | <number> ]{1,4} examples basic usage this property doesn't appear to be supported anywhere yet.
... mask-border-outset: 1rem; chromium-based browsers support an outdated vers
ion of this property — mask-box-image-outset — with a prefix: -webkit-mask-box-image-outset: 1rem; note: the mask-border page features a working example (using the out-of-date prefixed border mask properties supported in chromium), so you can get an idea of the effect.
...And 2 more matches
mask-border-width - CSS: Cascading Style Sheets
if the image does not have the required intrinsic dimens
ion, the corresponding border-width is used instead.
... formal definit
ion initial valueautoapplies toall elements; in svg, it applies to container elements excluding the defs element and all graphics elementsinheritednopercentagesrelative to width/height of the mask border image areacomputed valueas specified, but with relative lengths converted into absolute lengthsanimat
ion 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-width: 30 fill; chromium-based browsers support an outdated vers
ion of this property — mask-box-image-width — with a prefix: -webkit-mask-box-image-width: 20px; note: the mask-border page features a working example (using the out-of-date prefixed border mask properties supported in chromium), so you can get an idea of the effect.
...And 2 more matches
mask-clip - CSS: Cascading Style Sheets
if a viewbox attribute is specified for the element creating the svg viewport, the reference box is posit
ioned at the origin of the coordinate system established by the viewbox attribute and the dimens
ion of the reference box is set to the width and height values of the viewbox attribute.
... formal definit
ion initial valueborder-boxapplies toall elements; in svg, it applies to container elements excluding the defs element and all graphics elementsinheritednocomputed valueas specifiedanimat
ion typediscrete formal syntax [ <geometry-box> | no-clip ]#where <geometry-box> = <shape-box> | fill-box | stroke-box | view-boxwhere <shape-box> = <box> | margin-boxwhere <box> = border-box | padding-box | content-box examples clipping a mask to the border box css #masked { width: 100px; height: 100p...
...x; background-color: #8cffa0; margin: 20px; border: 20px solid #8ca0ff; padding: 20px; mask-image: url(https://mdn.mozillademos.org/files/12668/mdn.svg); mask-size: 100% 100%; mask-clip: border-box; /* can be changed in the live sample */ } html <div id="masked"> </div> <select id="clipbox"> <opt
ion value="content-box">content-box</opt
ion> <opt
ion value="padding-box">padding-box</opt
ion> <opt
ion value="border-box" selected>border-box</opt
ion> <opt
ion value="margin-box">margin-box</opt
ion> <opt
ion value="fill-box">fill-box</opt
ion> <opt
ion value="stroke-box">stroke-box</opt
ion> <opt
ion value="view-box">view-box</opt
ion> <opt
ion value="no-clip">no-clip</opt
ion> </select> javascript var clipbox = document.getelementbyid("clipbox"); clipbox.addeventlistener("...
...And 2 more matches
min-height - CSS: Cascading Style Sheets
formal definit
ion initial valueautoapplies toall elements but non-replaced inline elements, table columns, and column groupsinheritednopercentagesthe percentage is calculated with respect to the height of the generated box's containing block.
... if the height of the containing block is not specified explicitly (i.e., it depends on content height), and this element is not absolutely posit
ioned, the percentage value is treated as 0.computed valuethe percentage as specified or the absolute lengthanimat
ion 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 min-height table { min-height: 75%; } form { min-height: 0; } specificat
ions specificat
ion status comment css box sizing module level 4the definit
ion of 'min-height' in that specificat
ion.
... editor's draft css box sizing module level 3the definit
ion of 'min-height' in that specificat
ion.
...And 2 more matches
order - CSS: Cascading Style Sheets
accessibility concerns using the order property will create a disconnect between the visual presentat
ion of content and dom order.
... this will adversely affect users experiencing low vis
ion navigating with the aid of assistive technology such as a screen reader.
... flexbox & the keyboard navigat
ion disconnect — tink source order matters | adrian roselli mdn understanding wcag, guideline 1.3 explanat
ions understanding success criter
ion 1.3.2 | w3c understanding wcag 2.0 formal definit
ion initial value0applies toflex items and absolutely-posit
ioned flex container childreninheritednocomputed valueas specifiedanimat
ion typean integer formal syntax <integer> examples ordering items in a flex container this example uses css to create a classic two-sidebar layout surrounding a content block.
...And 2 more matches
outline-offset - CSS: Cascading Style Sheets
descript
ion an outline is a line that is drawn around an element, outside the border edge.
... formal definit
ion initial value0applies toall elementsinheritednocomputed valueas specified, but with relative lengths converted into absolute lengthsanimat
ion 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 specificat
ions specificat
ion status comment css basic user interface module level 3the definit
ion of 'outline-offset' in that specificat
ion.
... recommendat
ion initial definit
ion browser compatibility the compatibility table in this page is generated from structured data.
...And 2 more matches
outline-style - CSS: Cascading Style Sheets
formal definit
ion initial valuenoneapplies toall elementsinheritednocomputed valueas specifiedanimat
ion typediscrete formal syntax auto | <'border-style'> examples setting outline style to auto the auto value indicates a custom outline style — typically a style [that] is either a user interface default for the platform, or perhaps a style that is richer than can be described in detail in css, e.g.
... ridge; } /* to make the demo clearer */ * { outline-width: 10px; padding: 15px; } result setting outline style to inset and outset html <div> <div class="inset"> <p class="outset">outline demo</p> </div> </div> css .inset { outline-style: inset; } .outset { outline-style: outset; } /* to make the demo clearer */ * { outline-width: 10px; padding: 15px; } result specificat
ions specificat
ion status comment css basic user interface module level 3the definit
ion of 'outline-style' in that specificat
ion.
... recommendat
ion added auto value.
...And 2 more matches
outline-width - CSS: Cascading Style Sheets
formal definit
ion initial valuemediumapplies toall elementsinheritednocomputed valuean absolute length; if the keyword none is specified, the computed value is 0animat
ion typea length formal syntax <line-width>where <line-width> = <length> | thin | medium | thick examples setting an element's outline width html <span id="thin">thin</span> <span id="medium">medium</span> <span id="thick">thick</span> <span ...
...id="twopixels">2px</span> <span id="oneex">1ex</span> <span id="em">1.2em</span> css span { outline-style: solid; display: inline-block; margin: 20px; } #thin { outline-width: thin; } #medium { outline-width: medium; } #thick { outline-width: thick; } #twopixels { outline-width: 2px; } #oneex { outline-width: 1ex; } #em { outline-width: 1.2em; } result specificat
ions specificat
ion status comment css basic user interface module level 3the definit
ion of 'outline-width' in that specificat
ion.
... recommendat
ion no change.
...And 2 more matches
overflow-wrap - CSS: Cascading Style Sheets
the property was originally a nonstandard and unprefixed microsoft extens
ion called word-wrap, and was implemented by most browsers with the same name.
...no hyphenat
ion character is inserted at the break point.
... formal definit
ion initial valuenormalapplies tonon-replaced inline elementsinheritedyescomputed valueas specifiedanimat
ion typediscrete formal syntax normal | break-word | anywhere examples comparing overflow-wrap, word-break, and hyphens this example compares the results of overflow-wrap, word-break, and hyphens when breaking up a long word.
...And 2 more matches
padding-block-end - CSS: Cascading Style Sheets
the padding-block-end css property defines the logical block end padding of an element, which maps to a physical padding depending on the element's writing mode, direct
ionality, and text orientat
ion.
... descript
ion this property corresponds to the padding-top, padding-right, padding-bottom, or padding-left property depending on the values defined for writing-mode, direct
ion, and text-orientat
ion.
... formal definit
ion initial value0applies toall elementsinheritednopercentageslogical-width of containing blockcomputed valueas <length>animat
ion typea length formal syntax <'padding-left'> examples setting block end padding for vertical text html content <div> <p class="exampletext">example text</p> </div> css content div { background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: vertical-lr; padding-block-end: 20px; background-color: #c8c800; } result specificat
ions specificat
ion status comment css logical properties and values level 1the definit
ion of 'padding-block-end' in...
...And 2 more matches
padding-block-start - CSS: Cascading Style Sheets
the padding-block-start css property defines the logical block start padding of an element, which maps to a physical padding depending on the element's writing mode, direct
ionality, and text orientat
ion.
... descript
ion this property corresponds to the padding-top, padding-right, padding-bottom, or padding-left property depending on the values defined for writing-mode, direct
ion, and text-orientat
ion.
... formal definit
ion initial value0applies toall elementsinheritednopercentageslogical-width of containing blockcomputed valueas <length>animat
ion typea length formal syntax <'padding-left'> examples setting block start padding for vertical text html <div> <p class="exampletext">example text</p> </div> css div { background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: vertical-lr; padding-block-start: 20px; background-color: #c8c800; } result specificat
ions specificat
ion status comment css logical properties and values level 1the definit
ion of 'padding-block-start' in that specific...
...And 2 more matches
padding-block - CSS: Cascading Style Sheets
the padding-block css shorthand property defines the logical block start and end padding of an element, which maps to physical padding properties depending on the element's writing mode, direct
ionality, and text orientat
ion.
...x; /* 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, direct
ion, and text-orientat
ion.
... formal definit
ion initial value0applies toall elementsinheritednopercentageslogical-width of containing blockcomputed valueas <length>animat
ion typediscrete formal syntax <'padding-left'>{1,2} examples setting block padding for 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; padding-block: 20px 40px; background-color: #c8c800; } result specificat
ions specificat
ion status comment ...
...And 2 more matches
page-break-inside - CSS: Cascading Style Sheets
a subset of values should be aliased as follows: page-break-inside break-inside auto auto avoid avoid formal definit
ion initial valueautoapplies toblock-level elements in the normal flow of the root element.
... user agents may also apply it to other elements like table-row elements.inheritednocomputed valueas specifiedanimat
ion typediscrete formal syntax auto | avoid examples avoiding page breaks inside elements html <div class="page"> <p>this is the first paragraph.</p> <sect
ion class="list"> <span>a list</span> <ol> <li>one</li> <!-- <li>two</li> --> </ol> </sect
ion> <ul> <li>one</li> <!-- <li>two</li> --> </ul> <p>this is the second paragraph.</p> <p>this is the third paragraph, it contains more text.</p> <p>this is the fourth paragraph.
... it has a little bit more text than the third one.</p> </div> css .page { background-color: #8cffa0; height: 90px; width: 200px; columns: 1; column-width: 100px; } .list, ol, ul, p { break-inside: avoid; } p { background-color: #8ca0ff; } ol, ul, .list { margin: 0.5em 0; display: block; background-color: orange; } p:first-child { margin-top: 0; } result specificat
ions specificat
ion status comment css paged media module level 3the definit
ion of 'page-break-inside' in that specificat
ion.
...And 2 more matches
scroll-margin-inline - CSS: Cascading Style Sheets
the scroll-margin-inline shorthand property sets the scroll margins of an element in the inline dimens
ion.
... descript
ion the scroll-margin values represent outsets defining the scroll snap area that is used for snapping this box to the snapport.
... formal definit
ion initial value0applies toall elementsinheritednocomputed valueas specifiedanimat
ion typeby computed value type formal syntax <length>{1,2} examples simple demonstrat
ion this example implements something very similar to the interactive example above, except that here we'll explain to you how it's implemented.
...And 2 more matches
scroll-padding-block-end - CSS: Cascading Style Sheets
the scroll-padding-block-end property defines offsets for the end edge in the block dimens
ion of the optimal viewing reg
ion of the scrollport: the reg
ion used as the target reg
ion for placing things in view of the user.
... this allows the author to exclude reg
ions of the scrollport that are obscured by other content (such as fixed-posit
ioned toolbars or sidebars) or simply to put more breathing room between a targetted element and the edges of the scrollport.
... formal definit
ion initial valueautoapplies toscroll containersinheritednopercentagesrelative to the scroll container's scrollportcomputed valueas specifiedanimat
ion typeby computed value type formal syntax auto | <length-percentage>where <length-percentage> = <length> | <percentage> specificat
ions specificat
ion status comment css scroll snap module level 1the definit
ion of 'scroll...
...And 2 more matches
xlink:show - SVG: Scalable Vector Graphics
in case of a conflict, the target attribute has pr
iority, since it can express a wider range of values.
...the target attribute, determines its behav
ior.
... none this value specifies that there is no indicat
ion for how to refer to the linked resource.
...And 2 more matches
<animateColor> - SVG: Scalable Vector Graphics
this element has been deprecated in svg 1.1 second edit
ion and may be removed in a future vers
ion of svg.
... the <animatecolor> svg element specifies a color transformat
ion over time.
... usage context categoriesbasic shape element, graphics element, shape elementpermitted contentany number of the following elements, in any order:descriptive elements attributes global attributes condit
ional processing attributes core attributes animat
ion event attributes xlink attributes animat
ion attribute target attributes animat
ion timing attributes animat
ion value attributes animat
ion addit
ion attributes externalresourcesrequired specific attributes by from to dom interface this element implements the svganimatecolorelement interface.
...And 2 more matches
<circle> - SVG: Scalable Vector Graphics
global attributes core attributes most notably: id, tabindex styling attributes class, style condit
ional processing attributes most notably: requiredextens
ions, systemlanguage event attributes global event attributes, graphical event attributes presentat
ion attributes most notably: clip-path, clip-rule, color, color-interpolat
ion, color-rendering, cursor, display, fill, fill-opacity, fill-rule, filter, mask, opacity, pointer-events, shape-rendering, stroke, stroke-dasharray, stroke-dashoffse...
... aria-busy, aria-checked, aria-colcount, aria-colindex, aria-colspan, aria-controls, 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-orientat
ion, aria-owns, aria-placeholder, aria-posinset, aria-pressed, aria-readonly, aria-relevant, aria-required, aria-roledescript
ion, 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:animat
ion elementsdescriptive elements specificat
ions specificat
ion status comment scalable vector graphics (svg) 2the definit
ion of '<circle>' in that specificat
ion.
...And 2 more matches
<desc> - SVG: Scalable Vector Graphics
the <desc> element provides an accessible, long-text descript
ion of any svg container element or graphics element.
... html,body,svg { height:100% } <svg viewbox="0 0 10 10" xmlns="http://www.w3.org/2000/svg"> <circle cx="5" cy="5" r="4"> <desc> i'm a circle and that descript
ion is here to demonstrate how i can be described, but is it really necessary to describe a simple circle like me?
... </desc> </circle> </svg> attributes this element only includes global attributes global attributes core attributes most notably: id styling attributes class, style event attributes global event attributes, document element event attributes usage notes categoriesdescriptive elementpermitted contentany elements or character data specificat
ions specificat
ion status comment scalable vector graphics (svg) 2the definit
ion of '<desc>' in that specificat
ion.
...And 2 more matches
<feDisplacementMap> - SVG: Scalable Vector Graphics
the formula for the transformat
ion looks like this: p'(x,y) ← p( x + scale * (xc(x,y) - 0.5), y + scale * (yc(x,y) - 0.5)) where p(x,y) is the input image, in, and p'(x,y) is the destinat
ion.
... usage context categoriesfilter primitive elementpermitted contentany number of the following elements, in any order:<animate>, <set> attributes global attributes core attributes presentat
ion attributes filter primitive attributes class style specific attributes in in2 scale xchannelselector ychannelselector dom interface this element implements the svgfedisplacementmapelement interface.
.../www.w3.org/2000/svg"> <filter id="displacementfilter"> <feturbulence type="turbulence" basefrequency="0.05" numoctaves="2" result="turbulence"/> <fedisplacementmap in2="turbulence" in="sourcegraphic" scale="50" xchannelselector="r" ychannelselector="g"/> </filter> <circle cx="100" cy="100" r="100" style="filter: url(#displacementfilter)"/> </svg> specificat
ions specificat
ion status comment filter effects module level 1the definit
ion of '<fedisplacementmap>' in that specificat
ion.
...And 2 more matches
<feDropShadow> - SVG: Scalable Vector Graphics
the drop shadow color and opacity can be changed by using the flood-color and flood-opacity presentat
ion attributes.
... html,body,svg { height:100% } <svg viewbox="0 0 30 10" xmlns="http://www.w3.org/2000/svg"> <defs> <filter id="shadow"> <fedropshadow dx="0.2" dy="0.4" stddeviat
ion="0.2"/> </filter> <filter id="shadow2"> <fedropshadow dx="0" dy="0" stddeviat
ion="0.5" flood-color="cyan"/> </filter> <filter id="shadow3"> <fedropshadow dx="-0.8" dy="-0.8" stddeviat
ion="0" flood-color="pink" flood-opacity="0.5"/> </filter> </defs> <circle cx="5" cy="50%" r="4" style="fill:pink; filter:url(#shadow);"/> <circle cx="15" cy="50%" r="4" style="fill:pink; filter:url(#shadow2);"/> <circle cx="25" cy="50%" r="4" style="fill:pink; filter:url(#shadow3);"/> </svg> attributes dx this attribute defines the x offset ...
... value type: <number>; default value: 2; animatable: yes stddeviat
ion this attribute defines the standard deviat
ion for the blur operat
ion in the drop shadow.
...And 2 more matches
<feFlood> - SVG: Scalable Vector Graphics
the <feflood> svg filter primitive fills the filter subreg
ion with the color and opacity defined by flood-color and flood-opacity.
... usage context categoriesfilter primitive elementpermitted contentany number of the following elements, in any order:<animate>, <animatecolor>, <set> attributes global attributes core attributes presentat
ion attributes filter primitive attributes class style specific attributes flood-color flood-opacity dom interface this element implements the svgfefloodelement interface.
... example html content <svg xmlns="http://www.w3.org/2000/svg" width="200" height="200"> <defs> <filter id="floodfilter" filterunits="userspaceonuse"> <feflood x="50" y="50" width="100" height="100" flood-color="green" flood-opacity="0.5"/> </filter> </defs> <use style="filter: url(#floodfilter);"/> </svg> result specificat
ions specificat
ion status comment filter effects module level 1the definit
ion of '<feflood>' in that specificat
ion.
...And 2 more matches
<feFuncA> - SVG: Scalable Vector Graphics
the <fefunca> svg filter primitive defines the transfer funct
ion for the alpha component of the input graphic of its parent <fecomponenttransfer> element.
... usage context categoriesnonepermitted contentany number of the following elements, in any order:<animate>, <set> attributes global attributes core attributes transfer funct
ion attributes specific attributes none dom interface this element implements the svgfefuncaelement interface.
... specificat
ions specificat
ion status comment filter effects module level 1the definit
ion of '<fefunca>' in that specificat
ion.
...And 2 more matches
<feFuncB> - SVG: Scalable Vector Graphics
the <fefuncb> svg filter primitive defines the transfer funct
ion for the blue component of the input graphic of its parent <fecomponenttransfer> element.
... usage context categoriesnonepermitted contentany number of the following elements, in any order:<animate>, <set> attributes global attributes core attributes transfer funct
ion attributes specific attributes none dom interface this element implements the svgfefuncbelement interface.
... specificat
ions specificat
ion status comment filter effects module level 1the definit
ion of '<fefuncb>' in that specificat
ion.
...And 2 more matches
<feFuncG> - SVG: Scalable Vector Graphics
the <fefuncg> svg filter primitive defines the transfer funct
ion for the green component of the input graphic of its parent <fecomponenttransfer> element.
... usage context categoriesnonepermitted contentany number of the following elements, in any order:<animate>, <set> attributes global attributes core attributes transfer funct
ion attributes specific attributes none dom interface this element implements the svgfefuncgelement interface.
... specificat
ions specificat
ion status comment filter effects module level 1the definit
ion of '<fefuncg>' in that specificat
ion.
...And 2 more matches
<feFuncR> - SVG: Scalable Vector Graphics
the <fefuncr> svg filter primitive defines the transfer funct
ion for the red component of the input graphic of its parent <fecomponenttransfer> element.
... usage context categoriesnonepermitted contentany number of the following elements, in any order:<animate>, <set> attributes global attributes core attributes transfer funct
ion attributes specific attributes none dom interface this element implements the svgfefuncrelement interface.
... specificat
ions specificat
ion status comment filter effects module level 1the definit
ion of '<fefuncr>' in that specificat
ion.
...And 2 more matches
<foreignObject> - SVG: Scalable Vector Graphics
global attributes core attributes most notably: id, tabindex styling attributes class, style condit
ional processing attributes most notably: requiredextens
ions, systemlanguage event attributes global event attributes, graphical event attributes, document event attributes, document element event attributes presentat
ion attributes most notably: clip-path, clip-rule, color, color-interpolat
ion, color-rendering, cursor, display, fill, fill-opacity, fill-rule, filter, mask, opacity, pointer-event...
... aria-busy, aria-checked, aria-colcount, aria-colindex, aria-colspan, aria-controls, 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-orientat
ion, aria-owns, aria-placeholder, aria-posinset, aria-pressed, aria-readonly, aria-relevant, aria-required, aria-roledescript
ion, 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 specificat
ions specificat
ion st...
...atus comment scalable vector graphics (svg) 2the definit
ion of '<foreignobject>' in that specificat
ion.
...And 2 more matches
<line> - SVG: Scalable Vector Graphics
value type: <number> ; default value: none; animatable: yes global attributes core attributes most notably: id, tabindex styling attributes class, style condit
ional processing attributes most notably: requiredextens
ions, systemlanguage event attributes global event attributes, graphical event attributes presentat
ion attributes most notably: clip-path, clip-rule, color, color-interpolat
ion, color-rendering, cursor, display, fill, fill-opacity, fill-rule, filter, mask, opacity, pointer-events, shape-rendering, stroke, stroke-dasharray, stroke-dashoffse...
... aria-busy, aria-checked, aria-colcount, aria-colindex, aria-colspan, aria-controls, 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-orientat
ion, aria-owns, aria-placeholder, aria-posinset, aria-pressed, aria-readonly, aria-relevant, aria-required, aria-roledescript
ion, 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:animat
ion elementsdescriptive elements specificat
ions specificat
ion status comment scalable vector graphics (svg) 2the definit
ion of '<line>' in that specificat
ion.
...And 2 more matches
<linearGradient> - SVG: Scalable Vector Graphics
="red" /> </lineargradient> </defs> <!-- using my linear gradient --> <circle cx="5" cy="5" r="4" fill="url('#mygradient')" /> </svg> attributes gradientunits this attribute defines the coordinate system for attributes x1, x2, y1, y2 value type: userspaceonuse|objectboundingbox ; default value: objectboundingbox; animatable: yes gradienttransform this attribute provides addit
ional transformat
ion to the gradient coordinate system.
... value type: <length> ; default value: 0%; animatable: yes global attributes core attributes most notably: id styling attributes class, style event attributes global event attributes, document element event attributes presentat
ion attributes most notably: clip-path, clip-rule, color, color-interpolat
ion, color-rendering, cursor, display, fill, fill-opacity, fill-rule, filter, mask, opacity, pointer-events, shape-rendering, stroke, stroke-dasharray, stroke-dashoffset, stroke-linecap, stroke-linejoin, stroke-miterlimit, stroke-opacity, stroke-width, transform, vector-effect, visibility xlink attributes xlink:href, xlink:...
...title usage notes categoriesgradient elementpermitted contentany number of the following elements, in any order:descriptive elements<animate>, <animatetransform>, <set>, <stop> specificat
ions specificat
ion status comment scalable vector graphics (svg) 2the definit
ion of '<lineargradient>' in that specificat
ion.
...And 2 more matches
<polygon> - SVG: Scalable Vector Graphics
value type: <number> ; default value: none; animatable: yes global attributes core attributes most notably: id, tabindex styling attributes class, style condit
ional processing attributes most notably: requiredextens
ions, systemlanguage event attributes global event attributes, graphical event attributes presentat
ion attributes most notably: clip-path, clip-rule, color, color-interpolat
ion, color-rendering, cursor, display, fill, fill-opacity, fill-rule, filter, mask, opacity, pointer-events, shape-rendering, stroke, stroke-dasharray, stroke-dashoffse...
... aria-busy, aria-checked, aria-colcount, aria-colindex, aria-colspan, aria-controls, 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-orientat
ion, aria-owns, aria-placeholder, aria-posinset, aria-pressed, aria-readonly, aria-relevant, aria-required, aria-roledescript
ion, 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:animat
ion elementsdescriptive elements specificat
ions specificat
ion status comment scalable vector graphics (svg) 2the definit
ion of '<polygon>' in that specificat
ion.
...And 2 more matches
<polyline> - SVG: Scalable Vector Graphics
value type: <number> ; default value: none; animatable: yes global attributes core attributes most notably: id, tabindex styling attributes class, style condit
ional processing attributes most notably: requiredextens
ions, systemlanguage event attributes global event attributes, graphical event attributes presentat
ion attributes most notably: clip-path, clip-rule, color, color-interpolat
ion, color-rendering, cursor, display, fill, fill-opacity, fill-rule, filter, mask, opacity, pointer-events, shape-rendering, stroke, stroke-dasharray, stroke-dashoffse...
... aria-busy, aria-checked, aria-colcount, aria-colindex, aria-colspan, aria-controls, 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-orientat
ion, aria-owns, aria-placeholder, aria-posinset, aria-pressed, aria-readonly, aria-relevant, aria-required, aria-roledescript
ion, 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:animat
ion elementsdescriptive elements specificat
ions specificat
ion status comment scalable vector graphics (svg) 2the definit
ion of '<polyline>' in that specificat
ion.
...And 2 more matches
<radialGradient> - SVG: Scalable Vector Graphics
value type: <length> ; default value: same as cy; animatable: yes gradientunits this attribute defines the coordinate system for attributes x1, x2, y1, y2 value type: userspaceonuse|objectboundingbox ; default value: objectboundingbox; animatable: yes gradienttransform this attribute provides addit
ional transformat
ion to the gradient coordinate system.
... value type: <iri> ; default value: none; animatable: yes global attributes core attributes most notably: id styling attributes class, style event attributes global event attributes, document element event attributes presentat
ion attributes most notably: clip-path, clip-rule, color, color-interpolat
ion, color-rendering, cursor, display, fill, fill-opacity, fill-rule, filter, mask, opacity, pointer-events, shape-rendering, stroke, stroke-dasharray, stroke-dashoffset, stroke-linecap, stroke-linejoin, stroke-miterlimit, stroke-opacity, stroke-width, transform, vector-effect, visibility xlink attributes xlink:href, xlink:...
...title usage notes categoriesgradient elementpermitted contentany number of the following elements, in any order:descriptive elements<animate>, <animatetransform>, <set>, <stop> specificat
ions specificat
ion status comment scalable vector graphics (svg) 2the definit
ion of '<radialgradient>' in that specificat
ion.
...And 2 more matches
<script> - SVG: Scalable Vector Graphics
t is equivalent to the html <script> element, it has some discrepancies, like it uses the href attribute instead of src and it doesn't support ecmascript modules so far (see browser compatibility below for details) html,body,svg { height:100% } <svg viewbox="0 0 10 10" xmlns="http://www.w3.org/2000/svg"> <script> // <![cdata[ window.addeventlistener('domcontentloaded', () => { funct
ion getcolor () { const r = math.round(math.random() * 255).tostring(16).padstart(2,'0') const g = math.round(math.random() * 255).tostring(16).padstart(2,'0') const b = math.round(math.random() * 255).tostring(16).padstart(2,'0') return `#${r}${g}${b}` } document.queryselector('circle').addeventlistener('click', (e) => { e.target.style.fill = getcolor() })...
... value type: <string>; default value: applicat
ion/ecmascript; animatable: no xlink:href deprecated since svg 2 the url to the script to load.
... value type: <url> ; default value: none; animatable: no global attributes core attributes most notably: id styling attributes class, style event attributes global event attributes, document element event attributes usage notes categoriesnonepermitted contentany elements or character data specificat
ions specificat
ion status comment scalable vector graphics (svg) 2the definit
ion of '<script>' in that specificat
ion.
...And 2 more matches
<switch> - SVG: Scalable Vector Graphics
the <switch> svg element evaluates any requiredfeatures, requiredextens
ions and systemlanguage attributes on its direct child elements in order, and then renders the first child where these attributes evaluate to true.
... usage context categoriescontainer elementpermitted contentany number of the following elements, in any order:animat
ion elementsdescriptive elementsshape elements<a>, <foreignobject>, <g>, <image>, <svg>, <switch>, <text>, <use> attributes global attributes condit
ional processing attributes core attributes graphical event attributes presentat
ion attributes class style externalresourcesrequired transform dom interface this element implements the svgswitchelement interface.
...t systemlanguage="en-gb">wotcha!</text> <text systemlanguage="en-au">g'day!</text> <text systemlanguage="en">hello!</text> <text systemlanguage="es">hola!</text> <text systemlanguage="fr">bonjour!</text> <text systemlanguage="ja">こんにちは</text> <text systemlanguage="ru">Привет!</text> <text>☺</text> </switch> </svg> result specificat
ions specificat
ion status comment scalable vector graphics (svg) 2the definit
ion of '<switch>' in that specificat
ion.
...And 2 more matches
<textPath> - SVG: Scalable Vector Graphics
value type: <length>|<percentage>|<number> ; default value: auto; animatable: yes global attributes core attributes most notably: id, tabindex styling attributes class, style condit
ional processing attributes most notably: requiredextens
ions, systemlanguage event attributes global event attributes, graphical event attributes presentat
ion attributes most notably: clip-path, clip-rule, color, color-interpolat
ion, color-rendering, cursor, display, fill, fill-opacity, fill-rule, filter, mask, opacity, pointer-events, shape-rendering, stroke, stroke-dasharray, stroke-dashoffse...
... aria-busy, aria-checked, aria-colcount, aria-colindex, aria-colspan, aria-controls, 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-orientat
ion, aria-owns, aria-placeholder, aria-posinset, aria-pressed, aria-readonly, aria-relevant, aria-required, aria-roledescript
ion, 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 contentc...
...haracter data and any number of the following elements, in any order:descriptive elements<a>, <altglyph>, <animate>, <animatecolor>, <set>, <tref>, <tspan> specificat
ions specificat
ion status comment scalable vector graphics (svg) 2the definit
ion of '<textpath>' in that specificat
ion.
...And 2 more matches
SVG element reference - SVG: Scalable Vector Graphics
« svg / svg attribute reference » svg drawings and images are created using a wide array of elements which are dedicated to the construct
ion, drawing, and layout of vector images and diagrams.
... here you'll find reference documentat
ion for each of the svg elements.
... svg elements a to z a <a> <animate> <animatemot
ion> <animatetransform> c <circle> <clippath> <color-profile> d <defs> <desc> <discard> e <ellipse> f <feblend> <fecolormatrix> <fecomponenttransfer> <fecomposite> <feconvolvematrix> <fediffuselighting> <fedisplacementmap> <fedistantlight> <fedropshadow> <feflood> <fefunca> <fefuncb> <fefuncg> <fefuncr> <fegaussianblur> <feimage> <femerge> <femergenode> <femorphology> <feoffset> <fepointlight> <fespecularlighting> <fespotlight> <fetile> <feturbulence> <filter> <foreignobject> g <g> h <hatch> <hatchpath> i <image> l <line> <lineargradient> m <marker> <mask> <mesh> <meshgradient> <meshpatch> <meshrow> <metadata> <mpath> p <path> <pattern> <polygon>...
...And 2 more matches
SVG Filters Tutorial - SVG: Scalable Vector Graphics
filters svg allows us to use similar tools as the bitmap descript
ion language such as the use of shadow, blur effects or even merging the results of different filters.
... this element has different attributes that help us create the clipping reg
ion.
...the amount of blur to be applied is done using the stddeviat
ion attribute.
...And 2 more matches
How to fix a website with blocked mixed content - Web security
this follows a practice adopted by internet explorer (since vers
ion 9) and chrome.
... in any case, the best way to know if something is broken in firefox is to download the latest firefox edit
ion, 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.
... often, the https vers
ion of the content already exists and this just requires adding an "s" to links - http:// to https://.
...And 2 more matches
element-available - XPath
xslt/xpath reference: xslt elements, exslt funct
ions, xpath funct
ions, xpath axes the element-available funct
ion determines if an element is available and returns true or false.
...the qname is expanded into an expanded-name using the namespace declarat
ions in scope for the express
ion.
... returns returns true if and only if the expanded-name is the name of an instruct
ion.
...And 2 more matches
format-number - XPath
xslt/xpath reference: xslt elements, exslt funct
ions, xpath funct
ions, xpath axes the format-number funct
ion evaluates a number and returns a string representing the number in a given format.
...(the documentat
ion for jdk 1.1 is not available online.
... here is the java se 6 decimalformat.) decimal-format (opt
ional) the name of an xsl:decimal-format element that defines the number format to be used.
...And 2 more matches
substring - XPath
xslt/xpath reference: xslt elements, exslt funct
ions, xpath funct
ions, xpath axes the substring funct
ion returns a part of a given string.
... start the posit
ion withinstring the substring begins length(opt
ional) the length of the substring.
... if omitted, the returned string will contain every character from thestart posit
ion to the end ofstring.
...And 2 more matches
system-property - XPath
xslt/xpath reference: xslt elements, exslt funct
ions, xpath funct
ions, xpath axes the system-property funct
ion returns an object representing the given system-property.
... syntax system-property(name) arguments name (opt
ional) the name of the system property.
...the qname is expanded into a name using the namespace declarat
ions in scope for the express
ion.
...And 2 more matches
Contributor's Guide - Archive of obsolete content
data members are properties that allow each instance to have their own state, whereas member funct
ions are properties that allow instances to have behav
ior.
... inheritance allows classes to inherit state and behav
ior from an existing classes, known as the base class.
...unfortunately, javascript does not yet have native support for modules: it has to rely on the host applicat
ion to provide it with funct
ionality such as loading subscripts, and exporting/ importing names.
... we will show how to do each of these things using the built-in components object provided by xulrunner applicat
ion such as firefox and thunderbird.
addon-page - Archive of obsolete content
create a page that does not contain navigat
ional elements.
... usage with the add-on sdk you can present informat
ion to the user, such as a guide to using your add-on, in a browser tab.
... for pages like this, navigat
ional elements such as the awesome bar, search bar, or bookmarks toolbar are not usually relevant and distract from the content you are presenting.
...after this, the page loaded from "data/index.html" will not contain navigat
ional elements: var addontab = require("sdk/addon-page"); var data = require("sdk/self").data; require("sdk/tabs").open(data.url("index.html")); this only affects the page at "data/index.html": all other pages are displayed normally.
self - Archive of obsolete content
vers
ion this property contains the add-on's vers
ion string.
... it comes from the vers
ion property set in the package.json file in the main package.
... the package specificat
ion article explains the package.json file.
... returns string : resource:// url pointing to the given locat
ion under data.
system/child_process - Archive of obsolete content
experimental an implementat
ion of the node.js child_process api.
...the sdk vers
ions don't: so when you specify a command you must pass in a complete path to the command or use the env opt
ion to set up the child process environment.
... child.stdin has no write() method (see example below for writing to child process stdin) examples adapt
ion of node's documentat
ion for spawn(): var child_process = require("sdk/system/child_process"); var ls = child_process.spawn('/bin/ls', ['-lh', '/usr']); ls.stdout.on('data', funct
ion (data) { console.log('stdout: ' + data); }); ls.stderr.on('data', funct
ion (data) { console.log('stderr: ' + data); }); ls.on('close', funct
ion (code) { console.log('child process exited with code ' + code); }); writing to child process' stdin because the sdk implementat
ion does not include a write() method for child processes, you must use the "raw" emit event.
... const { emit } = require('sdk/event/core'); const { spawn } = require('sdk/system/child_process'); var proc = spawn("/bin/cat"); emit(proc.stdin, 'data', "hello from add-on code"); emit(proc.stdin, 'end'); using child_process in non-jpm extens
ions // import sdk stuff const commonjs_uri = 'resource://gre/modules/commonjs'; const { require } = cu.import(commonjs_uri + '/toolkit/require.js', {}); var child_process = require('sdk/system/child_process'); // use it in the same way as in the example above ...
test/httpd - Archive of obsolete content
usage the most basic usage is: var { startserverasync } = require("sdk/test/httpd"); var srv = startserverasync(port, basepath); require("sdk/system/unload").when(funct
ion cleanup() { srv.stop(funct
ion() { // you should continue execut
ion from this point.
... }) }); this starts a server in background (assuming you're running this code in an applicat
ion that has an event loop, such as firefox).
...you can serve static content or use sjs scripts, as described in documentat
ion on developer.mozilla.org.
... you can also use nshttpserver to start the server manually: var { nshttpserver } = require("sdk/test/httpd"); var srv = new nshttpserver(); // further documentat
ion on developer.mozilla.org see http server for unit tests for general informat
ion.
util/match-pattern - Archive of obsolete content
usage specifying patterns there are three ways you can specify patterns: as an exact match string using a wildcard in a string using a regular express
ion exact matches a url matches only that url.
... example pattern example matching urls "file://*" file://c:/file.html file:///home/file.png "resource://*" resource://my-addon-at-me-dot-org/my-addon/data/file.html "data:*" data:text/html,hi there regular express
ions you can specify patterns using a regular express
ion: var { matchpattern } = require("sdk/util/match-pattern"); var pattern = new matchpattern(/.*example.*/); the regular express
ion is subject to restrict
ions based on those applied to the html5 pattern attribute.
... the express
ion is compiled with the global, ignorecase, and multiline flags disabled.
... the matchpattern constructor will throw an except
ion if you try to set any of these flags.
util/object - Archive of obsolete content
funct
ions for working with objects.
... globals funct
ions merge(source, arguments) merges all of the properties of all arguments into the first argument.
... let { merge } = require("sdk/util/object"); var a = { jetpacks: "are yes", foo: 10 } var b = merge(a, { foo: 5, bar: 6 }, { foo: 50, locat
ion: "sf" }); b === a // true b.jetpacks // "are yes" b.foo // 50 b.bar // 6 b.locat
ion // "sf" // merge also translates property descriptors var c = { "type": "addon" }; var d = {}; object.defineproperty(d, "name", { value: "jetpacks", configurable: false }); merge(c, d); var props = object.getownpropertydescriptor(c, "name"); console.log(props.configurable); // true parameters...
... arguments : object n amount of addit
ional objects that are merged into source object.
util/uuid - Archive of obsolete content
usage it exports a single funct
ion, uuid().
... for more details about uuid representat
ions and what they are used for by the platform see the mdn documentat
ion for jsid.
... generate uuid to generate a new uuid, call uuid() with no arguments: let uuid = require('sdk/util/uuid').uuid(); parsing uuid to convert a string representat
ion of a uuid to an nsid, pass the string representat
ion to uuid(): let { uuid } = require('sdk/util/uuid'); let firefoxuuid = uuid('{ec8030f7-c20a-464f-9b0e-13a3a9e97384}'); globals funct
ions uuid(stringid) generate a new uuid, or convert a string representat
ion of a uuid to an nsid.
... parameters stringid : string string representat
ion of a uuid, such as: "8cbc9bf4-4a16-11e2-aef7-c1a56188709b" opt
ional.
Open a Web Page - Archive of obsolete content
to open a new web page, you can use the tabs module: var tabs = require("sdk/tabs"); tabs.open("http://www.example.com"); this funct
ion is asynchronous, so you don't immediately get back a tab object which you can examine.
... to do this, pass a callback funct
ion into open().
... the callback is assigned to the onready property, and will be passed the tab as an argument: var tabs = require("sdk/tabs"); tabs.open({ url: "http://www.example.com", onready: funct
ion onready(tab) { console.log(tab.title); } }); even then, you don't get direct access to any content hosted in the tab.
...this add-on loads a page, then attaches a script to the page which adds a red border to it: var tabs = require("sdk/tabs"); tabs.open({ url: "http://www.example.com", onready: runscript }); funct
ion runscript(tab) { tab.attach({ contentscript: "document.body.style.border = '5px solid red';" }); } learning more to learn more about working with tabs in the sdk, see the tabs api reference.
Tutorials - Archive of obsolete content
getting started installat
ion how to install the jpm tool, which you will use for developing add-ons.
... listen for load and unload get notificat
ions when your add-on is loaded or unloaded by firefox, and pass arguments into your add-on from the command line.
... using third-party modules (jpm) install and use addit
ional modules which don't ship with the sdk itself.
... localizat
ion writing localizable code.
LookupPrefix - Archive of obsolete content
here is an implementat
ion of lookupprefix which should work cross-browser.
...this funct
ion is not necessary for gecko-based browsers when used in xhtml.
... funct
ion lookupprefix (node, namespaceuri) { var htmlmode = document.contenttype; // mozilla only // depends on private funct
ion _lookupnamespaceprefix() below and on https://developer.mozilla.org/en/code_snippets/lookupnamespaceuri // http://www.w3.org/tr/dom-level-3-core/core.html#node3-lookupnamespaceprefix // http://www.w3.org/tr/dom-level-3-core/namespaces-algorithms.html#lookupnamespaceprefixalgo // (the above had a few apparent 'bugs' in the pseudo-code which were corrected here) if (node.lookupprefix && htmlmode !== 'text/html') { // shouldn't use this in text/html for mozilla as will return null return node.lookupprefix(namespaceuri); } if (namespaceuri === null || namespaceuri === '') { return null; } switch (node.nodetype) { case 1: // node.element_node retu...
...rn _lookupnamespaceprefix(namespaceuri, node); case 9: // node.document_node return _lookupnamespaceprefix(namespaceuri, node.documentelement); case 6: // node.entity_node case 12: // node.notat
ion_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.ownerelement) { return _lookupnamespaceprefix(namespaceuri, node.ownerelement); } return null; default: if (node.parentnode) { // entityreferences may have to be skipped to get to it return _lookupnamespaceprefix(namespaceuri, node.parentnode); } return null; } } // private funct
ion for lookupprefix only funct
ion _lookupnamespaceprefix (namespaceuri, originalelement) { var xmlnspattern = /^xml...
QuerySelector - Archive of obsolete content
along the lines of other frameworks such as jquery or prototype, shortening the "queryselector" name can be convenient: funct
ion $ (selector, el) { if (!el) {el = document;} return el.queryselector(selector); } funct
ion $$ (selector, el) { if (!el) {el = document;} return el.queryselectorall(selector); // note: the returned object is a nodelist.
... // if you'd like to convert it to a array for convenience, use this instead: // return array.prototype.slice.call(el.queryselectorall(selector)); } alert($('#myid').id); (note that while using the firefox web console, the above funct
ions are available automatically.) both xul and even xml can be easily made supportable (an alternative approach to the following would be to add chromewindow.prototype or window.prototype, accessing this.document.queryselector, or following the jquery style of chaining by returning 'this' within each prototype method of $()): htmldocument.prototype.$ = funct
ion (selector) { // only for html return this.queryselector(selector); }; example: <h1>test!</h1> <script> htmldocument.prototype.$ = funct
ion (selector) { return this.queryselector(sele...
...ctor); }; alert(document.$('h1')); // [object htmlheadingelement] </script> xuldocument.prototype.$ = funct
ion (selector) { // only for xul return this.queryselector(selector); }; example: <label value="test!"/> <script type="text/javascript"><![cdata[ xuldocument.prototype.$ = funct
ion (selector) { // only for xul return this.queryselector(selector); }; alert(document.$('label')); // [object xulelement] ]]></script> document.prototype.$ = funct
ion (selector) { // only for plain xml return this.queryselector(selector); }; var foo = document.implementat
ion.createdocument('somens', 'foo', null); // create an xml document <foo xmlns="somens"/> var bar = foo.createelementns('somens', 'bar'); // add <bar xmlns="somens"/> foo.documentelement.appendchild(bar); alert(foo.$('bar').no...
...dename); // gives 'bar' element.prototype.$ = funct
ion (selector) { // works for html, xul, and plain xml return this.queryselector(selector); }; html example: <h1><a>test!<a/></h1> <script> element.prototype.$ = funct
ion (selector) { return this.queryselector(selector); }; alert(document.getelementsbytagname('h1')[0].$('a').nodename); // 'a' xul example: <hbox><vbox/></hbox> <script type="text/javascript"><![cdata[ element.prototype.$ = funct
ion (selector) { return this.queryselector(selector); }; var xulns = 'http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul'; alert(document.getelementsbytagnamens(xulns, 'hbox')[0].$('vbox').nodename); // vbox ]]></script> xml example: <foo xmlns="somens"><bar/></foo> in document earlier var foo = document.getelementsbytagnamens...
SVG General - Archive of obsolete content
on this page you will find some simple, general informat
ion on svg markup.
...the tutorial and authoring guidelines have more informat
ion.
... dynamic scripting helper this little helper script can be used to simplify creat
ion of svg elements in script.
...here is the script: var svgns = "http://www.w3.org/2000/svg"; var xlinkns = "http://www.w3.org/1999/xlink"; var attr_map = { "classname": "class", "svghref": "href" } var ns_map = { "svghref": xlinkns }; funct
ion makesvg(tag, attributes) { var elem = document.createelementns(svgns, tag); for (var attribute in attributes) { var name = (attribute in attr_map ?
Tree - Archive of obsolete content
expanding/collapsing all tree nodes to expand all tree nodes: var treeview = tree.treeboxobject.view; for (var i = 0; i < treeview.rowcount; i++) { if (treeview.iscontainer(i) && !treeview.iscontaineropen(i)) treeview.toggleopenstate(i); } to collapse all tree nodes just change the condit
ion: var treeview = tree.treeboxobject.view; for (var i = 0; i < treeview.rowcount; i++) { if (treeview.iscontainer(i) && treeview.iscontaineropen(i)) treeview.toggleopenstate(i); } getting the text from the selected row assuming the given <tree>: <tree id="my-tree" seltype="single" onselect="ontreeselected()"> use the following javascript: funct
ion ontreeselected(){ var tree = document.getelementbyid("my-tree"); var cellindex = 0; var celltext = tr...
...ee.view.getcelltext(tree.currentindex, tree.columns.getcolumnat(cellindex)); alert(celltext); } getting the tree item from the focused row assuming <tree id="my-tree">, you can use the following to get the tree item: var view = document.getelementbyid("my-tree").view; var sel = view.select
ion.currentindex; //returns -1 if the tree is not focused var treeitem = view.getitematindex(sel); note that the current index may be unselected (for example, a multi-select tree).
...for example, assuming the given <tree>: <tree id="my-tree" onclick="ontreeclicked(event)"> use the following javascript: funct
ion ontreeclicked(event){ var tree = document.getelementbyid("my-tree"); var tbo = tree.treeboxobject; // get the row, col and child element at the point var row = { }, col = { }, child = { }; tbo.getcellat(event.clientx, event.clienty, row, col, child); var celltext = tree.view.getcelltext(row.value, col.value); alert(celltext); } getting the selected indices of a multiselect tree...
... var start = {}, end = {}, numranges = tree.view.select
ion.getrangecount(), selectedindices = []; for (var t = 0; t < numranges; t++){ tree.view.select
ion.getrangeat(t, start, end); for (var v = start.value; v <= end.value; v++) selectedindices.push(v); } other resources xul: tree documentat
ion xul tutorial: tree select
ion ...
Windows - Archive of obsolete content
example var startpos = null; funct
ion mousedown(event) { startpos = [event.clientx, event.clienty]; } funct
ion mousemove(event) { if (startpos) { var newx = event.screenx - startpos[0]; var newy = event.screeny - startpos[1]; window.moveto(newx, newy); } } funct
ion mouseup(event) { startpos = null; } window.addeventlistener("mousedown", mousedown, false); window.addeventlistener("mouseup", mouseup, false); windo...
...w.addeventlistener("mousemove", mousemove, false); xul titlebar element xul applicat
ions can take advantage of the titlebar element to achieve a similar result without extra javascript code.
...addit
ionally, if the window is in the background, it may not be brought to the front.
...this can be used in cases in which you need to uniquely identify a dom window during the durat
ion of the applicat
ion's lifespan: var util = win.queryinterface(components.interfaces.nsiinterfacerequestor).getinterface(components.interfaces.nsidomwindowutils); var windowid = util.outerwindowid; after running that code, windowid contains the outer window's unique id.
chargingchange - Archive of obsolete content
general info specificat
ion battery interface event bubbles no cancelable no target batterymanager default act
ion none properties the event callback doesn't receive any event objects, but properties can be read from the batterymanager object received from the navigator.getbattery method.
... property type descript
ion batterymanager.charging boolean the system's battery charging status.
... example navigator.getbattery().then(funct
ion(battery) { console.log("battery charging?
..."yes" : "no")); battery.addeventlistener('chargingchange', funct
ion() { console.log("battery charging?
chargingtimechange - Archive of obsolete content
general info specificat
ion battery interface event bubbles no cancelable no target batterymanager default act
ion none properties the event callback doesn't receive any event objects, but properties can be read from the batterymanager object received from the navigator.getbattery method.
... property type descript
ion batterymanager.chargingtime double (float) the remaining time in seconds until the system's battery is fully charged.
...returns positive infinity, if the battery is discharging or if the implementat
ion is unable to report the remaining charging time.
... example navigator.getbattery().then(funct
ion(battery) { console.log("battery charging time: " + battery.chargingtime + " seconds"); battery.addeventlistener('chargingtimechange', funct
ion() { console.log("battery charging time: " + battery.chargingtime + " seconds"); }); }); related events chargingchange dischargingtimechange levelchange ...
dischargingtimechange - Archive of obsolete content
general info specificat
ion battery interface event bubbles no cancelable no target batterymanager default act
ion none properties the event callback doesn't receive any event objects, but properties can be read from the batterymanager object received from the navigator.getbattery method.
... property type descript
ion batterymanager.dischargingtime double (float) the remaining time in seconds until the system's battery is completely discharged and the system is about to be suspended.
... returns positive infinity if the battery is charging, if the implementat
ion is unable to report the remaining discharging time, or if there is no battery attached to the system.
... example navigator.getbattery().then(funct
ion(battery) { console.log("battery discharging time: " + battery.dischargingtime + " seconds"); battery.addeventlistener('dischargingtimechange', funct
ion() { console.log("battery discharging time: " + battery.dischargingtime + " seconds"); }); }); related events chargingchange dischargingtimechange levelchange ...
levelchange - Archive of obsolete content
general info specificat
ion battery interface event bubbles no cancelable no target batterymanager default act
ion none properties the event callback doesn't receive any event objects, but properties can be read from the batterymanager object received from the navigator.getbattery method.
... property type descript
ion batterymanager.level double (float) the system's battery charging level scaled from 0 to 1.0.
...returns 1.0 if the battery is full, if the implementat
ion is unable to report the battery's level, or if there is no battery attached to the system.
... example navigator.getbattery().then(funct
ion(battery) { console.log("battery level: " + battery.level * 100 + " %"); battery.addeventlistener('levelchange', funct
ion() { console.log("battery level: " + battery.level * 100 + " %"); }); }); related events chargingchange chargingtimechange dischargingtimechange ...
cert_override.txt - Archive of obsolete content
cert_override.txt is a text file generated in the user profile to store certificate except
ions specified by the user.
... this file is used by firefox, thunderbird, and other xul-based applicat
ions.
... since there is no way to add easily an except
ion in a xulrunner 1.9 project, you can open the page in firefox, accept the certificate, then copy the cert_override.txt to the xulrunner applicat
ion profile.
... domainname:port : port 443 for https (ssl) hash algorithm oid sha1-256: oid.2.16.840.1.101.3.4.2.1 (most used) sha-384: oid.2.16.840.1.101.3.4.2.2 sha-512: oid.2.16.840.1.101.3.4.2.3 certificate fingerprint using prev
ious hash algorithm one or more characters for override type: m : allow mismatches in the hostname u : allow untrusted certs (whether it's self signed cert or a missing or invalid issuer cert) t : allow errors in the validity time, for example, for expired or not yet valid certs certificate's serial number and the issuer name as a base64 encoded string ...
Monitoring WiFi access points - Archive of obsolete content
code with universalxpconnect privileges can monitor the list of available wifi access points to obtain informat
ion about them including their ssid, mac address, and signal strength.
... this capability was introduced primarily to allow wifi-based locat
ion services to be used by geolocat
ion services.
...<html> <head> <title>wifi monitor example</title> <script> var count = 0; funct
ion test() { } test.prototype = { onchange: funct
ion (accesspoints) { netscape.security.privilegemanager.enableprivilege('universalxpconnect'); var d = document.getelementbyid("d"); d.innerhtml = ""; for (var i=0; i<accesspoints.length; i++) { var a = accesspoints[i]; d.innerhtml += "<p>" + a.mac + " " + a.ssid + " " + a.signal + "</p>"; } var c = document.getelementbyid("c"); c.innerhtml = "<p>" + count++ + "</p>"; }, onerror: funct
ion (value) { alert("error: " +value); }, queryinterface: funct
ion(iid) { netscape.security.privilegemanager.enableprivilege('universalx...
...ew test(); var wifi_service = components.classes["@mozilla.org/wifi/monitor;1"].getservice(components.interfaces.nsiwifimonitor); wifi_service.startwatching(listener); </script> </head> <body> <div id="d"><p></p></div> <div id="c"><p></p></div> </body> </html> the nsiwifilistener object the first thing the code above does is to prototype the listener object that will be receiving notificat
ions of changes to the access point list.
Prerequisites - Archive of obsolete content
in order to complete this tutorial you need to have and know how to use the following programs on your computer: an installat
ion of mozilla; zip and unzip utilities; a text editor.
...if you currently use mozilla, you should install a new copy of the software in a different locat
ion from the existing installat
ion for the purposes of this demo.
... this tutorial instructs you to do things that can damage your installat
ion and make it unusable, so don't modify your primary mozilla installat
ion per the instruct
ions in this tutorial unless you really know what you are doing!
... « prev
iousnext » ...
Tinderbox - Archive of obsolete content
the mozilla sheriff, a rotating posit
ion responsible for watching the code and getting engineers to fix breakage, checks tinderbox even more regularly.
...different platforms), most people only care about the overall situat
ion, i.e.
...by checking for build failures first and test failures second, we make sure to show users the worst possible situat
ion, i.e.
... « prev
iousnext » ...
contents.rdf - Archive of obsolete content
copy the following text and paste it into a text file, then save that file as "contents.rdf": <?xml vers
ion="1.0"?> <rdf:rdf xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:chrome="http://www.mozilla.org/rdf/chrome#"> <!-- list all the skins being supplied by this theme --> <rdf:seq about="urn:mozilla:skin:root"> <rdf:li resource="urn:mozilla:skin:myskin/1.0" /> </rdf:seq> <rdf:descript
ion about="urn:mozilla:skin:myskin/1.0" chrome:displayname="my skin" chrome:accesskey="m" chrome:author="me" chrome:descript
ion="this is my custom skin for mozilla" chrome:name="myskin/1.0" chrome:image="preview.png"> <chrome:packages> <rdf:seq about="urn:mozilla:skin:myskin/1.0:packages"> <rdf:li resource...
...="urn:mozilla:skin:myskin/1.0:communicator"/> <rdf:li resource="urn:mozilla:skin:myskin/1.0:editor"/> <rdf:li resource="urn:mozilla:skin:myskin/1.0:global"/> <rdf:li resource="urn:mozilla:skin:myskin/1.0:messenger"/> <rdf:li resource="urn:mozilla:skin:myskin/1.0:navigator"/> </rdf:seq> </chrome:packages> </rdf:descript
ion> <!-- vers
ion informat
ion.
... state that we work only with major vers
ion 1 of this package.
... --> <rdf:descript
ion chrome:skinvers
ion="1.0" about="urn:mozilla:skin:myskin/1.0:communicator"/> <rdf:descript
ion chrome:skinvers
ion="1.0" about="urn:mozilla:skin:myskin/1.0:editor"/> <rdf:descript
ion chrome:skinvers
ion="1.0" about="urn:mozilla:skin:myskin/1.0:global"/> <rdf:descript
ion chrome:skinvers
ion="1.0" about="urn:mozilla:skin:myskin/1.0:messenger"/> <rdf:descript
ion chrome:skinvers
ion="1.0" about="urn:mozilla:skin:myskin/1.0:navigator"/> </rdf:rdf> ...
Creating a Skin for Mozilla - Archive of obsolete content
introduct
ion in order to create a skin for mozilla, you will need to know three things.
...if you want to change the funct
ionality of mozilla, you'll have to look into modifying the chrome.
... organizing images adding an image to the right of a toolbar jar file installer utility (provided by neil marshall) frequently asked quest
ions links original document informat
ion author: neil marshall other contributors (suggest
ions/correct
ions): brent marshall, cdn (http://themes.mozdev.org), jp martin, boris zbarsky, asa dotzler, wesayso, david james, dan mauch last updated date: jan 5th, 2003 copyright informat
ion: copyright 2002-2003 neil marshall, permiss
ion given to devmo to migrate into the wiki april 2005 via email.
... original locat
ion: http://www.eightlines.com/neil/mozskin ...
Embedding FAQ - Archive of obsolete content
you can get more detailed informat
ion on what interfaces are required and which are opt
ional to impelement here.
... scroll down to "initalizat
ion and teardown.
...you can find more informat
ion on adding new protocols here how to embedding mozilla inside of java there hasn't been any good code examples found.
... nsidomdocument doc = browser.getdocument(); system.out.println(doc); } }); while (!shell.isdisposed()) { if (!display.readanddispatch()) { display.sleep(); } } } how to map a javascript funct
ion to a c++ funct
ion define an xpcom class defining the funct
ion you'll be doing in javascript.
Content states and the style system - Archive of obsolete content
content states are what gecko uses to implement the var
ious state-dependent in css (examples would be :hover, :active, :focus, :target, :checked).
...this is an expensive operat
ion, however, so the style system tries to minimize the number of style reresolves it does.
... to this end, when a <code>contentstateschanged</code> notificat
ion is dispatched for a content node the first thing that's done is to is to check whether the content state change something could affect any styles.
...we then try matching the node against these selectors, with the assumpt
ion that both :hover and :not(:hover) match the node.
HTTP Class Overview - Archive of obsolete content
this document provides an overview of the classes used by the mozilla http implementat
ion.
... it's meant as a guide to developers wishing to understand or extend the mozilla http implementat
ion.
... nshttphandler implements nsiprotocolhandler manages preferences owns the authenticat
ion cache holds references to frequently used services nshttpchannel implements nsihttpchannel talks to the cache initiates http transact
ions processes http response codes intercepts progress notificat
ions nshttpconnect
ion implements nsistreamlistener & nsistreamprovider talks to the socket transport service feeds data to its transact
ion object routes progress notificat
ions nshttpconnect
ioninfo identifies a connect
ion nshttptransact
ion implements nsirequest encapsulates a http request and response parses incoming data nshttpchunkeddecoder owned by a transact
ion strips chunked transfer encoding nshttprequesthead owns a nshttpheaderarray knows how to fill a reque...
...st buffer nshttpresponsehead owns a nshttpheaderarray knows how to parse response lines performs common header manipulat
ions/calculat
ions nshttpheaderarray stores http "<header>:<value>" pairs nshttpauthcache stores authenticat
ion credentials for http auth domains nshttpbasicauth implements nsihttpauthenticator generates basic auth credentials from user:pass nshttpdigestauth implements nsihttpauthenticator generates digest auth credentials from user:pass original document informat
ion author(s): darin fisher last updated date: august 5, 2002 copyright informat
ion: port
ions of this content are © 1998–2007 by individual mozilla.org contributors; content available under a creative commons license | details.
CRMF Request object - Archive of obsolete content
do not use it on product
ion sites facing the web: it will not work for every user.
... there may also be large incompatibilities between implementat
ions and the behav
ior may change in the future.
...avoid using it and update existing code if possible; see the compatibility table at the bottom of this page to guide your decis
ion.
... warning: the features ment
ioned in this article are deleted proprietary mozilla extens
ions, and are not supported in any other browser.
slideBar - Archive of obsolete content
slidebar is a reinvent
ion of the old sidebar features of browsers.
... they allow quick access to a wide range of both temporary and permanent informat
ion at the side of your browser window.
...jetpack.future.import("slidebar"); methods append(iconurihtmlhtml/xmlurluriwidthintpersistboolautoreloadboolonclickfunct
iononselectfunct
iononreadyfunct
ion)this is a list of opt
ions to specify modificat
ions 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 behav
ior when being selectedbool autoreloadautomatically reload content on selectbool onclickcallback when the icon is clickedfunct
ion onselectcallback when the feature is selectedfunct
ion onreadycallback when featured is loadedfunct
ion an example: jetpack.slidebar.append({ url: "http://mozilla.com", width: 150, onclick: funct
ion(slide){ slide.icon.src = "chrome://branding/content/icon48.png"; }}); ...
Plugin Architecture - Archive of obsolete content
classes there are some classes involved in plugins: nsobjectloadingcontent embed, object and applet nodes inherit from that class, which provides services for loading var
ious kinds of objects.
... sequence of events in content a content node for a plugin dom element gets created in bindtotree (usually) or another funct
ion, it calls loadobject loadobject either notices directly that it is dealing with a plugin, or it starts a network request and notices this in onstartrequest when it realizes that, it tries to create a frame, if anotify is true and no frame exists yet if a frame exists now, it is asked to instantiate the plugin that was the normal case.
... if a frame comes into existance independent of that, it tells the content node that it exists now (ns
iobjectloadingcontent::hasnewframe).
... that funct
ion will post an event and when that fires, asks the frame to instantiate the plugin.
Build - Archive of obsolete content
building prism is similar to building mccoy, but there are some differences which is why a separate build documentat
ion article.
...the contents of the file should look something like this : mk_add_opt
ions moz_co_project=xulrunner mk_add_opt
ions moz_objdir=@topsrcdir@/mozilla-obj ac_add_opt
ions --enable-applicat
ion=xulrunner ac_add_opt
ions --disable-debug ac_add_opt
ions --enable-optimize ac_add_opt
ions --disable-tests ac_add_opt
ions --disable-javaxpcom build xulrunner : make -f client.mk build once the build is done, there will be a directory called mozilla-obj.
... go into the prism/ directory and create a .mozconfig file mk_add_opt
ions moz_objdir=@topsrcdir@/mozilla-obj/prism ac_add_opt
ions --with-libxul-sdk=../dist ac_add_opt
ions --enable-applicat
ion=prism you need to define an environment variable to point the build to the new .mozconfig.
... this variable is called mozconfig export mozconfig=$pwd/.mozconfig #this should point to mozilla/prism/.mozconfig go back to the mozilla/ directory and do another build, this time, prism will get built cd ../ make -f client.mk build congratulat
ions, you have just built prism.
Remote debugging - Archive of obsolete content
this requires quite a bit of trust, in both direct
ions.
... there give more informat
ion about the stack than a breakpad crash report: not only the names of the funct
ions on the stack, but also the values they were passed.
...transferring a core dump is tricky, because it is large and can contain private informat
ion.
...see here for instruct
ions on how to do so with microsoft's free debugger, windbg.
right - Archive of obsolete content
« xul reference home right type: string (representing an integer) for elements placed directly within a stack, specifies the pixel posit
ion of the right edge of the element relative to the right edge of the stack.
...this locat
ion is specified with respect to the right edge of the stack pr
ior to the element being evaluated, or added to the stack.
... for example, using right="-80" causes the stack to be enlarged 80 pixels to the right and the element's right edge to be at the same locat
ion as the right edge of the stack.
... in other words, the right edge of the element is placed 80 pixels to the right of where the right edge of the stack was pr
ior to the element being added.
Attribute (XUL) - Archive of obsolete content
« xul reference home acceltext accessible accesskey activetitlebarcolor afterselected align allowevents allownegativeassert
ions alternatingbackground alwaysopenpopup attribute autocheck autocompleteenabled autocompletepopup autocompletesearch autocompletesearchparam autofill autofillaftermatch autoscroll beforeselected buttonaccesskeyaccept buttonaccesskeycancel buttonaccesskeydisclosure buttonaccesskeyextra1 buttonaccesskeyextra2 buttonaccesskeyhelp buttonalign buttondir buttondisabledaccept buttonlabelaccept buttonlabelcancel buttonlabeldisclosure buttonlabelextra1 buttonlabelextra2 buttonlabelhelp buttonorient buttonpack buttons checked checkstate clicktoscroll class closebutton closemenu coalesceduplicatearcs collapse collapsed ...
...color cols command commandupdater completedefaultindex container containment contentcontextmenu contenttooltip context contextmenu control crop curpos current currentset customindex customizable cycler datasources decimalplaces default defaultbutton defaultset descript
ion dir disableautocomplete disableautoselect disableclose disabled disablehistory disablekeynavigat
ion disablesecurity dlgtype dragging editable editortype element empty emptytext deprecated since gecko 2 enablecolumndrag enablehistory equalsize eventnode events expr firstdayofweek firstpage first-tab fixed flags flex focused forcecomplete grippyhidden grippytooltiptext group handlectrltab height helpuri hidden hidechrome hidecolumnpicker hideheader hideseconds ...
...d onpageshow onpaneload onpopuphidden onpopuphiding onpopupshowing onpopupshown onsearchcomplete onselect ontextcommand ontextentered ontextrevert ontextreverted onunload onwizardback onwizardcancel onwizardfinish onwizardnext open ordinal orient pack pageid pageincrement pagestep parent parsetype persist persistence phase pickertooltiptext placeholder popup posit
ion predicate preference preference-editable primary pr
iority properties querytype readonly ref rel removeelement resizeafter resizebefore rows screenx screeny searchbutton searchsess
ions searchlabel selected selectedindex seltype setfocus showcaret showcommentcolumn showpopup size sizemode sizetopopup smoothscroll sort sortactive sortdirect
ion sortresource sortres...
...ource2 spellcheck src state statedatasource statusbar statustext style subject substate suppressonselect tabindex tabscrolling targets template timeout title toolbarname tooltip tooltiptext tooltiptextnew top type uri useract
ion validate value var visuallyselected wait-cursor width windowtype wrap wraparound ...
loadURIWithFlags - Archive of obsolete content
in addit
ion to the flags allowed for the reloadwithflags method, the following flags are also valid: load_flags_is_refresh: this flag is used when the url is loaded because of a meta tag refresh or redirect.
... load_flags_bypass_history: do not add the url to the sess
ion history.
... load_flags_replace_history: replace the current url in the sess
ion history with a new one.
... (see nsiwebnavigat
ion.loaduri() for details on the referrer and postdata parameters.) ...
replaceGroup - Archive of obsolete content
« xul reference home replacegroup( group ) not in firefox return type: array of sess
ion history objects replaces existing tabs with a new set.
... if there were more tabs before, the addit
ional ones are not removed.
...a referreruri property may also be opt
ionally used to set the referrer page.
... this method returns an array of the sess
ion history objects for the tabs that were removed.
MoveResize - Archive of obsolete content
void moveto(in long left, in long top); the left argument is the horizontal screen posit
ion and the top argument is the vertical screen posit
ion.
... for instance, the following example will move a popup to the upper left corner of the screen: popup.moveto(0, 0); the posit
ion may be shifted so as not to cover user interface elements provided by the operating system, such as the menu bar or the task bar.
...sometimes, a menu will be larger than the available space on the screen; in this situat
ion, the menu may be moved such that it will fit on screen.
...you can see this effect in a xul applicat
ion by moving a window near the bottom of the screen and clicking a menu or button that has a menu.
Scrolling Menus - Archive of obsolete content
« prev
iousnext » this sect
ion will describe scrolling menus and how to use the mechanism with other elements.
...note that the exact behav
ior of the scrolling will depend on the current theme.
... this behav
ior is automatic.
... « prev
iousnext » ...
Splitters - Archive of obsolete content
« prev
iousnext » we'll now look at how to add splitters to a window.
... splitting a box there may be times when you want to have two sect
ions of a window where the user can resize the sect
ions.
...it creates a skinny bar between two sect
ions which allows these sect
ions to be resized.
... « prev
iousnext » ...
XUL Accesskey FAQ and Policies - Archive of obsolete content
for example, here's how we add an accesskey to a xul button: <button label="apply instantly" accesskey="a" /> apply instantly - or - <button label="apply instantly" accesskey="a" /> apply instantly in mozilla, we use dtd's for one more layer of abstract
ion, for purposes of internat
ionalizat
ion.
...mozilla's accesskey implementat
ion will first try to underline a letter of the same case, but if there isn't one it will fall back on a letter of the opposite case.
... finally, use any non-silent letter in an act
ion word (do these after the rest of the dialog has accesskeys chosen).
...file bugs under the keyboard navigat
ion component, and make meta bug 129179 dependent on them.
XUL and RDF - Archive of obsolete content
the implementat
ion of the applicat
ion object modelpurpose - the purpose of this document is two-fold.
... the first sect
ion of the document describes the motivat
ion and reasoning behind using rdf as the foundat
ion of xul.
... this sect
ion makes a technical argument both for having xul in the first place and for using rdf as the underlying implementat
ion of xul's content model.
... the second sect
ion describes the xul/rdf architecture itself and outlines enhancements to the xul language in order to allow the markup language to reference local data and to indicate how and when it would like to be annotatable with local data.
attribute.align - Archive of obsolete content
for boxes that have horizontal orientat
ion, it specifies how its children will be aligned vertically.
... for boxes that have vertical orientat
ion, it is used to specify how its children are algined horizontally.
... the pack attribute is related to the alignment but is used to specify the posit
ion in the opposite direct
ion.
...use the flex attribute to create elements that stretch in the opposite direct
ion.
bindings - Archive of obsolete content
this element is opt
ional in firefox 3/mozilla 1.9 and later; instead binding elements may be placed directly inside the rule element.
... more informat
ion is available in the template guide.
... examples (example needed) attributes inherited from xul element align, allowevents, allownegativeassert
ions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, posit
ion, preference-editable, querytype, ref, removeelement, sortdirect
ion, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width object type: string the object of the element.
...textmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposit
ion, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaul...
box - Archive of obsolete content
the default orientat
ion is horizontal.
... more informat
ion is available in the xul tutorial.
... examples <box orient="horizontal"> <label value="zero"/> <box orient="vertical"> <label value="one"/> <label value="two"/> </box> <box orient="horizontal"> <label value="three"/> <label value="four"/> </box> </box> attributes inherited from xul element align, allowevents, allownegativeassert
ions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, posit
ion, preference-editable, querytype, ref, removeelement, sortdirect
ion, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri,...
...textmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposit
ion, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaul...
columns - Archive of obsolete content
other elements placed inside a columns element occupy the full height of the grid and are placed in their corresponding posit
ions between the columns.
... more informat
ion about columns is available in the xul tutorial.
... attributes inherited from xul element align, allowevents, allownegativeassert
ions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, posit
ion, preference-editable, querytype, ref, removeelement, sortdirect
ion, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, hei...
...ght, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposit
ion, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupname...
deck - Archive of obsolete content
more informat
ion is available in the xul tutorial.
... attributes selectedindex properties selectedindex, selectedpanel examples <deck selectedindex="2"> <descript
ion value="this is the first page"/> <button label="this is the second page"/> <box> <descript
ion value="this is the third page"/> <button label="this is also the third page"/> </box> </deck> attributes selectedindex type: integer gets and sets the index of the currently selected panel.
... inherited from xul element align, allowevents, allownegativeassert
ions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, posit
ion, preference-editable, querytype, ref, removeelement, sortdirect
ion, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties selectedindex type: integer returns the index of the currently selected item.
...textmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposit
ion, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaul...
hbox - Archive of obsolete content
this is equivalent to the box element, except it defaults to horizontal orientat
ion.
... more informat
ion is available in the xul tutorial.
... example <!-- two button on the right --> <hbox> <spacer flex="1"/> <button label="connect"/> <button label="ping"/> </hbox> attributes inherited from xul element align, allowevents, allownegativeassert
ions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, posit
ion, preference-editable, querytype, ref, removeelement, sortdirect
ion, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties inherited properties align, , allowevents, , boxobject, builder, , , ,...
...textmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposit
ion, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaul...
listhead - Archive of obsolete content
if the element is disabled, it does not respond to user act
ions, it cannot be focused, and the command event will not fire.
... visible controls have a disabled property which, except for menus and menuitems, is normally preferred to use of the attribute, as it may need to update addit
ional state.
... inherited from xul element align, allowevents, allownegativeassert
ions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, posit
ion, preference-editable, querytype, ref, removeelement, sortdirect
ion, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties accessibletype type: integer a value indicating the type of accessibility object for the element.
...textmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposit
ion, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaul...
member - Archive of obsolete content
« xul reference home [ examples | attributes | properties | methods | related ] used within a rule's condit
ions element to match elements that are containers or are contained within another element.
... more informat
ion is available in the xul tutorial.
... properties child, container examples (example needed) attributes inherited from xul element align, allowevents, allownegativeassert
ions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, posit
ion, preference-editable, querytype, ref, removeelement, sortdirect
ion, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties child type: ?
...textmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposit
ion, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaul...
popupset - Archive of obsolete content
this element is opt
ional; the given elements need not appear in a popupset container.
... more informat
ion is available in the xul tutorial.
... examples <popupset> <menupopup id="clipmenu"> <menuitem label="cut"/> <menuitem label="copy"/> <menuitem label="paste"/> </menupopup> </popupset> <label value="right click for popup" context="clipmenu"/> attributes inherited from xul element align, allowevents, allownegativeassert
ions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, posit
ion, preference-editable, querytype, ref, removeelement, sortdirect
ion, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width ...
...textmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposit
ion, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaul...
rows - Archive of obsolete content
non-row related elements placed inside a rows element occupy the full width of the grid and are placed in their corresponding posit
ions between the rows.
... more informat
ion is available in the xul tutorial.
... attributes inherited from xul element align, allowevents, allownegativeassert
ions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, posit
ion, preference-editable, querytype, ref, removeelement, sortdirect
ion, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, hei...
...ght, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposit
ion, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupname...
<statusbarpanel> - Archive of obsolete content
if the box direct
ion is reversed, the cropping is reversed.
...the posit
ion of the image is determined by the dir and orient attributes.
...for an editable menuitem element the value of this attribute is copied to the menulist.value property upon user select
ion of the menuitem.
...textmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposit
ion, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaul...
tabpanel - Archive of obsolete content
this element is opt
ional and you may just use any other container in place of it.
... more informat
ion is available in the xul tutorial.
... examples (example needed) attributes inherited from xul element align, allowevents, allownegativeassert
ions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, posit
ion, preference-editable, querytype, ref, removeelement, sortdirect
ion, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hi...
...dden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposit
ion, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceur...
titlebar - Archive of obsolete content
if you don't want this behav
ior, you can override it by setting allowevents="true" on the titlebar element.
... <?xml vers
ion="1.0"?> <window title="movable hud window" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" width="300" height="200" style="background: transparent; -moz-appearance: none;"> <titlebar flex="1" oncommand="close()" style="background: rgba(30, 30, 30, 0.9); -moz-border-radius: 10px; -moz-box-shadow: 0 1px 8px rgba(0, 0, 0, 0.8); margin: 8px 12px 16px;"/> </window> it can be opened from the error console like this: open("file:///users/markus/sites/hudwindow.xul",...
... "", "chrome=1, titlebar=0") attributes inherited from xul element align, allowevents, allownegativeassert
ions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, posit
ion, preference-editable, querytype, ref, removeelement, sortdirect
ion, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width note: the allowevents attribute did not work for title bars pr
ior to firefox 3.
...textmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposit
ion, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaul...
toolbarpalette - Archive of obsolete content
it is not displayed, but is used by the toolbar customizat
ion dialog to display the list of items.
...do not add the var
ious spacing items, as those are added automatically.
... examples <toolbarpalette id="browsertoolbarpalette"> <toolbarbutton id="toolbarpalette-button" class="toolbarbutton-class" label="&mylabel;" tooltiptext="&mytiptext;" oncommand="somefunct
ion()"/> </toolbarpalette> attributes inherited from xul element align, allowevents, allownegativeassert
ions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, p...
...ersist, popup, posit
ion, preference-editable, querytype, ref, removeelement, sortdirect
ion, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposit
ion, dispatchevent(), docommand, focus, getattribute(), getattributenode()...
treeitem - Archive of obsolete content
in a template condit
ion, you should use a treeitem instead of a content element when the dont-build-content flag is specified.
... more informat
ion is available in the xul tutorial.
... uri type: string for template-generated content, the attribute should be placed on the element where content generat
ion should begin.
...textmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposit
ion, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaul...
treerow - Archive of obsolete content
more informat
ion is available in the xul tutorial.
...for more informat
ion, see styling a tree.
... inherited from xul element align, allowevents, allownegativeassert
ions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, posit
ion, preference-editable, querytype, ref, removeelement, sortdirect
ion, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwid...
...th, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposit
ion, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), querysele...
vbox - Archive of obsolete content
this is equivalent to the box element, except it defaults to vertical orientat
ion.
... more informat
ion is available in the xul tutorial.
... example <!-- two labels at bottom --> <vbox> <spacer flex="1"/> <label value="one"/> <label value="two"/> </vbox> attributes inherited from xul element align, allowevents, allownegativeassert
ions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, posit
ion, preference-editable, querytype, ref, removeelement, sortdirect
ion, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties inherited properties align, , allowevents, , boxobject, builder, , , , classna...
...textmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposit
ion, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaul...
wizardpage - Archive of obsolete content
more informat
ion is available in the xul tutorial.
... attributes descript
ion, label, next, pageid properties next, pageid attributes descript
ion type: string descriptive text to appear in addit
ion to the dialog title.
...for an editable menuitem element the value of this attribute is copied to the menulist.value property upon user select
ion of the menuitem.
...tabase, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposit
ion, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaul...
Components - Archive of obsolete content
unlike extens
ions, it must be directly in that directory, not a subdirectory.
... registrat
ion most initial problems with components are due to registrat
ion.
... for new components or interface changes of existing ones to be noticed at all, you need to change the buildid in applicat
ion.ini to trigger a re-registrat
ion of the components.
...it's named after your vendor and app name in applicat
ion.ini, e.g.
Opening a Link in the Default Browser - Archive of obsolete content
xulrunner applicat
ions may have situat
ion where they wish to open a uri in the default browser.
...this can be done using the nsiexternalprotocolservice interface: // first construct an nsiuri object using the
ioservice var
ioservice = components.classes["@mozilla.org/network/
io-service;1"] .getservice(components.interfaces.nsi
ioservice); var uritoopen =
ioservice.newuri("http://www.example.com/", null, null); var extps = components.classes["@mozilla.org/uriloader/external-protocol-service;1"] .getservice(components.interfaces.nsiexternalprotocolservice); // now, open it!
... extps.loaduri(uritoopen, null); by default, the external protocol service will warn the user about opening the link in another applicat
ion.
... to suppress this warning for particular protocols that are safe to open in the default applicat
ion, you must set default prefs (thunderbird sets the following prefs): // suppress external-load warning for standard browser schemes pref("network.protocol-handler.warn-external.http", false); pref("network.protocol-handler.warn-external.https", false); pref("network.protocol-handler.warn-external.ftp", false); you can also check whether an external handler for a scheme exists.
2006-11-22 - Archive of obsolete content
summary: mozilla.dev.accessibility - nov 17-nov 22, 2006 announcements mozilla osk project grant aaron leventhal (on behalf of michael curran) ment
iond that there is now an nvda email list you can join if you wish to keep up to date with the latest changes, or if you wish to discuss new features or talk with other nvda users.
... new mailing list for nvda steve lee was pleased to announce that the mozilla foundat
ion has approved a grant spearheaded by himself and aaron leventhal for "improved switch access to firefox".
...for more informat
ion click here.
... discuss
ions image labelling for blind help machines frank hecker brought up a valid discuss
ion about the problem of getting images tagged for use by screen.
title - Archive of obsolete content
netscape rss 0.91 revis
ion 3 example <?xml vers
ion="1.0"?> <!doctype rss system "http://my.netscape.com/publish/formats/rss-0.91.dtd"> <rss vers
ion="0.91"> <channel> <title>advogato</title> <link>http://www.advogato.org/article/</link> <descript
ion>recent advogato articles</descript
ion> <language>en-us</language> <image> <link>http://www.advogato.org/</link> <title>advogato</title> ...
... <url>http://www.advogato.org/image/tinyadvogato.png</url> </image> <item> <title>why can i not get any tang?!</title> <link>http://www.advogato.org/article/10101.html</link> <descript
ion>ser
iously.
... why can't i get any tang?</descript
ion> </item> </channel> </rss> attributes none sub-elements none parent elements the table below shows a list of rss elements that this element can be a child of.
...✔</td> <td>✔</td> <td>✔</td> <td>✔</td> <td>?</td> <td>?</td> <td>?</td> <td>?</td> <td>?</td> </tr> <tr> <td>rss text input element</td> <td><textinput></td> <td>✔</td> <td>✔</td> <td>✔</td> <td>✔</td> <td>?</td> <td>?</td> <td>?</td> <td>?</td> <td>?</td> </tr> </table> </center> see also none rss element</td> <th colspan="9" style="text-align:center">rss vers
ion ...
The Basics of Web Services - Archive of obsolete content
(xml introduct
ion).
... a better way to understand a web service is to compare it to a html form communicat
ion with a server side script (such as php or asp) to post and send data.
... examples of web services in act
ion as said before, rss and atom feeds are a simple example of how a web service works, most commonly, xml-rpc or soap are also used to communicate between a server and a client.
...an example is, it is easier to send a multi-dimens
ional array with soap rather then with xml-rpc.
contents.rdf - Archive of obsolete content
copy the following text and paste it into a text file, then save that file as "contents.rdf": <?xml vers
ion="1.0"?> <rdf:rdf xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:chrome="http://www.mozilla.org/rdf/chrome#"> <!-- list all the skins being supplied by this theme --> <rdf:seq about="urn:mozilla:skin:root"> <rdf:li resource="urn:mozilla:skin:my_theme"/> </rdf:seq> <rdf:descript
ion about="urn:mozilla:skin:my_theme" chrome:displayname="my theme" chrome:accesskey="n" chrome:author="" chrome:authorurl="" chrome:descript
ion="" chrome:name="my_theme" chrome:image="preview.png"> <chrome:packages> <rdf:seq about="urn:mozilla:skin:my_theme:packages"> <rdf:li resource="urn:mozilla:skin:my...
..._theme:browser"/> <rdf:li resource="urn:mozilla:skin:my_theme:communicator"/> <rdf:li resource="urn:mozilla:skin:my_theme:global"/> <rdf:li resource="urn:mozilla:skin:my_theme:mozapps"/> <rdf:li resource="urn:mozilla:skin:my_theme:help"/> </rdf:seq> </chrome:packages> </rdf:descript
ion> <!-- vers
ion informat
ion.
... state that we work only with major vers
ion 1 of this package.
... --> <rdf:descript
ion chrome:skinvers
ion="1.5" about="urn:mozilla:skin:my_theme:browser"/> <rdf:descript
ion chrome:skinvers
ion="1.5" about="urn:mozilla:skin:my_theme:communicator"/> <rdf:descript
ion chrome:skinvers
ion="1.5" about="urn:mozilla:skin:my_theme:global"/> <rdf:descript
ion chrome:skinvers
ion="1.5" about="urn:mozilla:skin:my_theme:mozapps"/> <rdf:descript
ion chrome:skinvers
ion="1.5" about="urn:mozilla:skin:my_theme:help"/> </rdf:rdf> ...
Creating a Skin for Firefox - Archive of obsolete content
introduct
ion in order to create a skin for firefox, there are three things you need to know: how to edit images, how to extract zip files, and how to modify css.
...if you want to change the funct
ionality of firefox, you'll have to look into modifying the chrome, which is beyond the scope of this document.
... contents getting started original document informat
ion author(s): neil marshall and tucker lee other contributors: brent marshall, cdn (http://themes.mozdev.org), jp martin, boris zbarsky, asa dotzler, wesayso, david james, dan mauch, anders conbere, tim regula (http://www.igraphics.nn.cx) copyright informat
ion: copyright 2002-2003 neil marshall, permiss
ion given to mdc to migrate into the wiki april 2005 via email.
... original locat
ion: http://www.eightlines.com/neil/mozskin ...
Theme changes in Firefox 3.5 - Archive of obsolete content
global/checkbox.css, global/rad
io.css since bug 394892, rad
io buttons and checkboxes no longer have a minimum size on mac os x.
... if your theme uses native checkboxes or rad
iobuttons (-moz-appearance: rad
io / checkbox), this can result in distorted controls.
... you might have to set the width and height of .checkbox-check and .rad
io-check to 16px to avoid that problem.
... supporting 3.5 features video/aud
io player: controlbar has to be styled (chrome://global/skin/media/videocontrols.css) shadow effect for disabled text using text-shadow.
References - Archive of obsolete content
<- prev
ious sect
ion: summary of changes you can learn more on using web standards from these sites (listed in no particular order): what are web standards and why should i use them?
...from web standards project web standards group from web standards group web page development: best practices from apple developer connect
ion mozilla web author faq from henri sivonen making your web page compatible with mozilla from nicolás lichtmaier complete css guide from westciv.com css lessons and tutorials from alsacreat
ions html and css lessons and tutorials from htmldog.com preparing for standard-compliant browsers, part 1 from makiko itoh preparing for standard-compliant browsers, part 2 from makiko itoh javascript best practices lists 15 of the most frequent coding practices which create problems for javascript and dhtml-driven webpages.
...from matt kruse debugging html and css is a well designed website explaining well the how, why and where of html validat
ion, css validat
ion and debugging tools.
... <- prev
ious sect
ion: summary of changes ...
-moz-text-blink - Archive of obsolete content
the -moz-text-blink non-standard mozilla css extens
ion specifies the blink mode.
... initial valuenoneapplies toall elementsinheritednocomputed valueas specifiedanimat
ion typediscrete syntax values none produces no blinking.
... formal syntax none | blink example .example { -moz-text-blink: blink; } specificat
ions this property was defined in an old draft of the css 3 text specificat
ion.
... newer vers
ions removed its definit
ion.
-ms-content-zoom-limit-max - Archive of obsolete content
the -ms-content-zoom-limit-max css property is a microsoft extens
ion that specifies the selected elements' maximum zoom factor.
...smaller values zoom out.computed valueas specifiedanimat
ion typediscrete syntax values <percentage> the maximum zoom factor.
... formal syntax <percentage> specificat
ions not part of any specificat
ion.
... starting with windows 8.1, this property is also supported for touchpad interact
ion.
-ms-content-zoom-limit-min - Archive of obsolete content
the -ms-content-zoom-limit-min css property is a microsoft extens
ion that specifies the minimum zoom factor.
...smaller values zoom out.computed valueas specifiedanimat
ion typediscrete syntax values <percentage> the minimum zoom factor.
... formal syntax <percentage> specificat
ions not part of any specificat
ion.
... starting with windows 8.1, this property is also supported for touchpad interact
ion.
-ms-content-zoom-limit - Archive of obsolete content
the -ms-content-zoom-limit css shorthand property is a microsoft extens
ion that specifies values for the -ms-content-zoom-limit-min and -ms-content-zoom-limit-max properties.
...smaller values zoom out.computed valueas each of the properties of the shorthand:-ms-content-zoom-limit-max: as specified-ms-content-zoom-limit-min: as specifiedanimat
ion typediscrete syntax the -ms-content-zoom-limit shorthand property is specified as one or both of the following content zoom limit values, in order, separated by spaces.
... formal syntax <'-ms-content-zoom-limit-min'> <'-ms-content-zoom-limit-max'> specificat
ions not part of any specificat
ion.
... starting with windows 8.1, this property is also supported for touchpad interact
ion.
-ms-content-zoom-snap - Archive of obsolete content
the -ms-content-zoom-snap css shorthand property is a microsoft extens
ion that specifies values for the -ms-content-zoom-snap-type and -ms-content-zoom-snap-points properties.
... initial valueas each of the properties of the shorthand:-ms-content-zoom-snap-type: none-ms-content-zoom-snap-points: snapinterval(0%, 100%)applies tonon-replaced block-level elements and non-replaced inline-block elementsinheritednocomputed valueas each of the properties of the shorthand:-ms-content-zoom-snap-type: as specified-ms-content-zoom-snap-points: as specifiedanimat
ion typediscrete syntax the -ms-content-zoom-snap shorthand property is specified as one or both of the following content zoom snap values, in order, separated by spaces.
... formal syntax <'-ms-content-zoom-snap-type'> | <'-ms-content-zoom-snap-points'> specificat
ions not part of any specificat
ion.
... starting with windows 8.1, this property is also supported for touchpad interact
ion.
-ms-content-zooming - Archive of obsolete content
the -ms-content-zooming css property is a microsoft extens
ion that specifies whether zooming is enabled.
... initial valuezoom for the top level element, none for all other elementsapplies tonon-replaced block-level elements and non-replaced inline-block elementsinheritednocomputed valueas specifiedanimat
ion typediscrete syntax values none the initial value of all elements except the top-level element.
... formal syntax none | zoom specificat
ions not part of any specificat
ion.
... starting with windows 8.1, this property is also supported for touchpad interact
ion.
-ms-flow-from - Archive of obsolete content
the -ms-flow-from css property is a microsoft extens
ion that gets or sets a value identifying a reg
ion container in the document that accepts the content flow from the data source.
... initial valuenoneapplies tonon-replaced elementsinheritednocomputed valueas specifiedanimat
ion typediscrete syntax values none default.
... <custom-ident> the name of the reg
ion container.
... formal syntax [ none | <custom-ident> ]# specificat
ions not part of any specificat
ion.
-ms-flow-into - Archive of obsolete content
the -ms-flow-into css property is a microsoft extens
ion that gets or sets a value identifying an iframe container in the document that serves as the reg
ion's data source.
... initial valuenoneapplies toiframe elementsinheritednocomputed valueas specifiedanimat
ion typediscrete syntax values none default.
... <custom-ident> the name of the reg
ion container.
... formal syntax [ none | <custom-ident> ]# specificat
ions not part of any specificat
ion.
-ms-hyphenate-limit-chars - Archive of obsolete content
the -ms-hyphenate-limit-chars css property is a microsoft extens
ion that specifies one to three values indicating the minimum number of characters in a hyphenated word.
... initial valueautoapplies toall elementsinheritedyescomputed valueas specifiedanimat
ion typediscrete syntax values auto corresponds to a value of 5 2 2, indicating a 5-character word limit, 2 characters required before a hyphenat
ion break, and 2 characters required following a hyphenat
ion break.
... <integer>{1,3} one to three integer values, corresponding to the word limit, the minimum number of characters required before a hyphenat
ion break, and the minimum number of characters required following a hyphenat
ion break, respectively.
... formal syntax auto | <integer>{1,3} specificat
ions not part of any specificat
ion.
Array.unobserve() - Archive of obsolete content
descript
ion array.unobserve() should be called after array.observe() in order to remove an observer from an array.
... the callback should be a reference to a funct
ion and not an anonymous funct
ion, because this reference will be used to unset the prev
ious observer.
... it's useless to call array.unobserve() with an anonymous funct
ion as callback, it will not remove any observer.
... examples unobserving an array var arr = [1, 2, 3]; var observer = funct
ion(changes) { console.log(changes); } array.observe(arr, observer); arr.push(4); // [{type: "splice", object: <arr>, index: 3, removed:[], addedcount: 1}] array.unobserve(arr, observer); arr.pop(); // the callback wasn't called using an anonymous funct
ion var persons = ['khalid', 'ahmed', 'mohammed']; array.observe(persons, funct
ion (changes) { console.log(changes); }); persons.shift(); // [{type: "splice", object: <arr>, index: 0, removed: [ "khalid" ], addedcount: 0 }] array.unobserve(persons, funct
ion (changes) { console.log(changes); }); persons.push('abdullah'); // [{type: "splice", object: <arr>, index: 2, removed: [], addedcount: 1 }] // the callback will always be called ...
Enumerator.atEnd - Archive of obsolete content
this object is a microsoft extens
ion and is only supported in internet explorer.
... the enumerator.atend method returns a boolean value indicating if the enumerator is at the end of the collect
ion.
... the atend method returns true if the current item is the last one in the collect
ion, the collect
ion is empty, or the current item is undefined.
... example in following code, the atend method is used to determine if the end of a list of drives has been reached: funct
ion showdrives() { var s = ""; var bytespergb = 1024 * 1024 * 1024; var fso = new activexobject("scripting.filesystemobject"); var e = new enumerator(fso.drives); e.movefirst(); while (e.atend() == false) { var drv = e.item(); s += drv.path + " - "; if (drv.isready) { var freegb = drv.freespace / bytespergb; var totalgb = drv.totalsize / bytespergb; s += freegb.tofixed(3) + " gb free of "; s += totalgb.tofixed(3) + " gb"; } else { s += "not ready"; } s += "<br />"; e.mov...
Enumerator.item - Archive of obsolete content
this object is a microsoft extens
ion and is only supported in internet explorer.
... the enumerator.item method returns the current item in the collect
ion.
...if the collect
ion is empty or the current item is undefined, it returns undefined.
... example funct
ion showdrives() { var s = ""; var bytespergb = 1024 * 1024 * 1024; var fso = new activexobject("scripting.filesystemobject"); var e = new enumerator(fso.drives); e.movefirst(); while (e.atend() == false) { var drv = e.item(); s += drv.path + " - "; if (drv.isready) { var freegb = drv.freespace / bytespergb; var totalgb = drv.totalsize / bytespergb; s += freegb.tofixed(3) + " gb free of "; s += totalgb.tofixed(3) + " gb"; } else { s += "not ready"; } s += "<br />"; e.movenext(); } return(s); } requirements supported in the following document modes: quirks, internet explorer 6 standards, intern...
Enumerator.moveFirst - Archive of obsolete content
this object is a microsoft extens
ion and is only supported in internet explorer.
... the enumerator.movefirst method resets the current item in the collect
ion to the first item.
... if there are no items in the collect
ion, the current item is set to undefined.
... example in following example, the movefirst method is used to evaluate members of the drivescollect
ion from the beginning of the list: funct
ion showdrives() { var s = ""; var bytespergb = 1024 * 1024 * 1024; var fso = new activexobject("scripting.filesystemobject"); var e = new enumerator(fso.drives); e.movefirst(); while (e.atend() == false) { var drv = e.item(); s += drv.path + " - "; if (drv.isready) { var freegb = drv.freespace / bytespergb; var totalgb = drv.totalsize / bytespergb; s += freegb.tofixed(3) + " gb free of "; s += totalgb.tofixed(3) + " gb"; } else { s += "not ready"; } s += "<br />"; e.movenext();...
Enumerator.moveNext - Archive of obsolete content
this object is a microsoft extens
ion and is only supported in internet explorer.
... the enumerator.movenext method moves the current item to the next item in the collect
ion.
... if the enumerator is at the end of the collect
ion or the collect
ion is empty, the current item is set to undefined.
... example in following example, the movenext method is used to move to the next drive in the drives collect
ion: funct
ion showdrives() { var s = ""; var bytespergb = 1024 * 1024 * 1024; var fso = new activexobject("scripting.filesystemobject"); var e = new enumerator(fso.drives); e.movefirst(); while (e.atend() == false) { var drv = e.item(); s += drv.path + " - "; if (drv.isready) { var freegb = drv.freespace / bytespergb; var totalgb = drv.totalsize / bytespergb; s += freegb.tofixed(3) + " gb free of "; s += totalgb.tofixed(3) + " gb"; } else { s += "not ready"; } s += "<br />"; e.movenext(); } return(s); } ...
New in JavaScript 1.8.1 - Archive of obsolete content
this vers
ion was included in firefox 3.5.
... javascript 1.8.1 is a modest update syntactically to javascript; the main change in this release is the addit
ion of the tracemonkey just-in-time compiler, which improves performance.
... new features in javascript 1.8.1 object.getprototypeof() support for native json string.prototype.trim() string.prototype.trimleft() string.prototype.trimright() changed funct
ionality in javascript 1.8.1 implicit setting of properties in object and array initializers no longer execute setters in javascript.
... this makes the behav
ior of setting the values of properties more predictable.
ECMAScript 5 support in Mozilla - Archive of obsolete content
ecmascript 5.1, an older vers
ion of the standard upon which javascript is based, was approved in june 2011.
... the javascript runtime used in the latest vers
ions of mozilla projects including both firefox and thunderbird has full support for ecmascript 5.1 features.
... this article covers the features supported by different vers
ions of mozilla's javascript runtime.
... gecko 1.9.1.4 updated the implementat
ion of json.stringify() to be compliant with ecmascript 5.
Object.getNotifier() - Archive of obsolete content
return value the notifier object associated with the object being passed to the funct
ion.
... descript
ion the notifier is used to trigger synthetic changes that will be observed by object.observe().
... specificat
ions not part of any standard.
... strawman proposal specificat
ion.
arguments.caller - Archive of obsolete content
the obsolete arguments.caller property used to provide the funct
ion that invoked the currently executing funct
ion.
... descript
ion this property is not available anymore, but you can still use funct
ion.caller.
... funct
ion whocalled() { if (whocalled.caller == null) console.log('i was called from the global scope.'); else console.log(whocalled.caller + ' called me!'); } examples the following code was used to check the value of arguments.caller in a funct
ion, but doesn't work anymore.
... funct
ion whocalled() { if (arguments.caller == null) console.log('i was called from the global scope.'); else console.log(arguments.caller + ' called me!'); } specificat
ions not part of any standard.
JavaObject - Archive of obsolete content
in addit
ion, you can explicitly construct a javaobject using the object's java constructor with the packages keyword: new packages.javaclass(parameterlist) javaclassis the fully-specified name of the object's java class.
... parameters parameterlist an opt
ional list of parameters, specified by the constructor of the java class.
... descript
ion the javaobject object is an instance of a java class that is created in or passed to javascript.
...see the core javascript 1.5 guide for more informat
ion about data type convers
ions.
JavaPackage - Archive of obsolete content
if the package is in the java, netscape, or sun packages, the packages keyword is opt
ional.
... descript
ion in java, a package is a collect
ion of java classes or other java packages.
... for example, the netscape package contains the package netscape.javascript; the netscape.javascript package contains the classes jsobject and jsexcept
ion.
... examples suppose the redwood corporat
ion uses the java redwood package to contain var
ious java classes that it implements.
XForms Custom Controls Examples - Archive of obsolete content
introduct
ion here is a collect
ion of misc.
... output showing images <binding id="output-image" extends="chrome://xforms/content/xforms.xml#xformswidget-base"> <content> <html:div> <html:img anonid="content"/> </html:div> </content> <implementat
ion implements="nsixformsuiwidget"> <method name="refresh"> <body> var img = document.getanonymouselementbyattribute(this, "anonid", "content"); img.setattribute("src", this.stringvalue); return true; </body> </method> </implementat
ion> </binding> output showing xhtml <binding id="output-xhtml" extends="chrome://xforms/content/xforms-xhtml.xml#xformswidget-output"> <content> <children includ...
...es="label"/> <xhtml:div class="xf-value" anonid="content"></xhtml:div> <children/> </content> <implementat
ion implements="nsixformsuiwidget"> <field name="_domparser">null</field> <property name="domparser" readonly="true"> <getter> if (!this._domparser) this._domparser = new domparser(); return this._domparser; </getter> </property> <method name="refresh"> <body> // get new value, parse, and import it.
...his.domparser.parsefromstring(val, "text/xml"); var impnode = document.importnode(newdom.firstchild, true); // get content node, clean it, and update it var content = document.getanonymouselementbyattribute(this, "anonid", "content"); if (content.firstchild) { content.removechild(content.firstchild); } content.appendchild(impnode); return true; </body> </method> </implementat
ion> </binding> ...
Developing Mozilla XForms - Archive of obsolete content
debugging always start with a debug build of the xforms and the schema-validat
ion extens
ions.
...then start firefox out of the build directory: cd obj-*/dist/firefox ./firefox -no-remote -jsconsole -p yourprofilename the xforms extens
ion that was built together with firefox should be already installed.
...schema validat
ion problems the schema-validat
ion extens
ion contains a logging facility that can show some internals on the schema processing.
... to activate this logging output, set the nspr_log_modules environment variable: export nspr_log_modules=schemavalidat
ion:5 this only works on a debug build as described above.
RFE to the Custom Controls - Archive of obsolete content
introduct
ion if you have a custom control that you believe will help fulfill the needs of form authors or other custom controls authors, please file it here.
...xul, in many cases, is much better suited for applicat
ion development than xhtml.
... therefore the control set may need to be more extensive to address the wider spectrum of requirements that a xul applicat
ion will have on its controls.
... output that shows the dom if output contains cdata sect
ion or text node and its data is any mozilla known language like xhtml/xul/svg then output should parse and display it (see bug 316817).
XForms Range Element - Archive of obsolete content
introduct
ion allows the user to choose a value from within a specific range of values (see the spec).
...this determines how much the value of the range will be changed upon user interact
ion.
... type restrict
ions the range element can be bound to a node of type xsd:durat
ion, xsd:date, xsd:time, xsd:datetime, xsd:gyearmonth, xsd:gyear, xsd:gmonthday, xsd:gday, xsd:gmonth, xsd:float, xsd:decimal or xsd:double or any type derived from one of these.
... representat
ions the xforms range element is represented by a slider widget (xhtml only).
Tools for game development - Game development
this is a great tool for porting applicat
ions to the web!
...note that we are aiming to cover emscripten in its own sect
ion of mdn.
... gecko profiler the gecko profiler extens
ion lets you profile your code to help figure out where your performance issues are so that you can make your game run at top speed.
...a lot of this is going to be covered by will in tools, but here we should provide a kind of practical toolchain tutorial for debugging games, with links to will's stuff: basic tools overview shader editor performance tools (still in product
ion, estimated early 2014) ...
Bounce off the walls - Game development
« prev
iousnext » this is the 6th step out of 16 of the gamedev phaser tutorial.
... now that physics have been introduced, we can start implementing collis
ion detect
ion into the game — first we'll look at the walls.
...add the following line below the prev
ious 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.
... « prev
iousnext » ...
A cool-looking box - Learn web development
objective: to test comprehens
ion of the css box model and other box-related features such as borders and backgrounds.
... note: if you get stuck, then ask us for help — see the assessment or further help sect
ion at the bottom of this page.
... a link to the example you want assessed or need help with, in an online shareable editor (as ment
ioned in step 1 above).
... a link to the actual task or assessment page, so we can find the quest
ion you want help with.
Example - Learn web development
a payment form html content <form method="post"> <h1>payment form</h1> <p>required fields are followed by <strong><abbr title="required">*</abbr></strong>.</p> <sect
ion> <h2>contact informat
ion</h2> <fieldset> <legend>title</legend> <ul> <li> <label for="title_1"> <input type="rad
io" id="title_1" name="title" value="a"> ace </label> </li> <li> <label for="title_2"> <input type="rad
io" id="title_2" name="title" value="k" > king </label> </li> <li> <label for="title_3"> <input type="rad
io" id="title_3" name="title" value="...
...p> <label for="mail"> <span>e-mail: </span> <strong><abbr title="required">*</abbr></strong> </label> <input type="email" id="mail" name="usermail"> </p> <p> <label for="pwd"> <span>password: </span> <strong><abbr title="required">*</abbr></strong> </label> <input type="password" id="pwd" name="password"> </p> </sect
ion> <sect
ion> <h2>payment informat
ion</h2> <p> <label for="card"> <span>card type:</span> </label> <select id="card" name="usercard"> <opt
ion value="visa">visa</opt
ion> <opt
ion value="mc">mastercard</opt
ion> <opt
ion value="amex">american express</opt
ion> </select> </p> <p> <label for="number"> <span>card number:...
...</span> <strong><abbr title="required">*</abbr></strong> </label> <input type="tel" id="number" name="cardnumber"> </p> <p> <label for="date"> <span>expirat
ion date:</span> <strong><abbr title="required">*</abbr></strong> <em>formatted as mm/dd/yyyy</em> </label> <input type="date" id="date" name="expirat
ion"> </p> </sect
ion> <sect
ion> <p> <button type="submit">validate the payment</button> </p> </sect
ion> </form> css content h1 { margin-top: 0; } ul { margin: 0; padding: 0; list-style: none; } form { margin: 0 auto; width: 400px; padding: 1em; border: 1px solid #ccc; border-radius: 1em; } div+div { margin-top: 1em; } label span { display: inline-block; wi...
...dth: 120px; text-align: right; } input, textarea { font: 1em sans-serif; width: 250px; box-sizing: border-box; border: 1px solid #999; } input[type=checkbox], input[type=rad
io] { 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 { posit
ion: relative; } label em { posit
ion: absolute; right: 5px; top: 20px; } result ...
Getting started with the Web - Learn web development
the story of your first website it's a lot of work to create a profess
ional website, so if you're new to web development, we encourage you to start small.
...what informat
ion are you showcasing?
...without overwhelming you, html basics provides enough informat
ion to make you familiar with html.
...some examples could be games, things that happen when buttons are pressed or data is entered in forms, dynamic styling effects, animat
ion, and much more.
HTML Tables - Learn web development
coupled with a little css for styling, html makes it easy to display tables of informat
ion on the web such as your school lesson plan, the timetable at your local swimming pool, or statistics about your favorite dinosaurs or football team.
... we have put together a course that includes all the essential informat
ion you need to work towards your goal.
... get started prerequisites before starting this module, you should already have covered the basics of html — see introduct
ion to html.
... html table advanced features and accessibility this module looks at some more advanced features of html tables — such as capt
ions/summaries and grouping your rows into table head, body and footer sect
ions — as well as looking at the accessibility of tables for visually impaired users.
ChromeWorkers and the Chrome worker loader
to complement the open web worker funct
ionality, mozilla has introduced the chromeworker interface, which provides this capability within applicat
ion chrome.
... that makes it available not only to the applicat
ion itself, but also to add-ons.
... this documentat
ion covers chrome workers and the chrome worker module loader.
... note: if you're contributing content to this sect
ion, create subpages using the "new sub-page" opt
ion in the "this page" menu.
Building SpiderMonkey with UBSan
compile a recent vers
ion of llvm & clang.
...save the following bash script, fixing llvm_root to point to your installat
ion.
...this enables all the cheap undefined behav
ior checks other than: alignment, which hits known bugs in spidermonkey, and is more implementat
ion-defined (slow on x86 / crash on arm) than undefined behav
ior float-cast-overflow, which hits known bugs in spidermonkey, and isn't exploited by today's compilers float-divide-by-zero, which jesse doesn't think is actually undefined behav
ior (aside from the quest
ion of whether cpu overflow flags...
... the stack trace should show a funct
ion such as __ubsan_handle_load_invalid_value or __ubsan_handle_type_mismatch being called by the buggy c++ code.
Linux compatibility matrix
the following table lists the available library vers
ions for the mozilla.org-distributed firefox builds dependencies, and/or to build firefox.
... distribut
ion 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 3.10 0.30 4.8.2 4.8 3.3 n/a dec 2013 jun 2015 fedora 21 3.17 2.20 2.42 2.24 3.14 0.32 4.9 ...
... distribut
ion kernel glibc glib gtk+2 gtk+3 pixman stdc++ gcc clang python3 released eol notes red backgrounds denote lack of compatibility with current vers
ions of firefox.
... in the eol column, they denote distribut
ion vers
ions past their end of life.
Message manager overview
in the initial vers
ion of multiprocess firefox there are two processes: the chrome process, also called the parent process, runs the browser ui (chrome) code and code inserted by extens
ions the content processes, also called the child processes, run all web content.
...all three enable chrome code to: load a script into a frame in the content the content process using a loadframescript() funct
ion.
... communicate with frame scripts using addmessagelistener() and broadcastasyncmessage() or sendasyncmessage() funct
ions.
...this is the recommended way to load a script that executes just once per child process, which is something you might want to do if you are interacting with some global service (for example, adding listeners to observer notificat
ions or registering components).
Security best practices for Firefox front-end engineers
we use our built-in sanitizer with the following flags: sanitizerallowstyle sanitizerallowcomments sanitizerdropforms sanitizerlogremovals the sanitizer removes all scripts (script tags, event handlers) and form elements (form, input, keygen, opt
ion, optgroup, select, button, datalist).
... linter rules against unsanitized dom interact
ion the security assurance team maintains an eslint rule that disallows unsafe uses of innerhtml and similar dom apis.
... the linter makes an except
ion for code that uses string literals that are hard coded in the source code, assuming benevolent developers.
... developers are able to avoid tripping the rule by using escaping funct
ions in combinat
ion with template strings, for example: bar.innerhtml = escapehtml`<a href='${url}'>about</a>`; in system-privileged chrome code, any kind of remaining scripts will still be removed by our sanitizer.
HTMLIFrameElement.addNextPaintListener()
this event provides informat
ion about what has been repainted.
... it is mainly used to investigate performance optimizat
ion.
... parameters listener a funct
ion handler to listen for a mozafterpaint event.
... examples var browser = document.queryselector('iframe'); funct
ion onnextpaint() { console.log("paint has occured"); } browser.addnextpaintlistener(onnextpaint); specificat
ion not part of any specificat
ion.
HTMLIFrameElement.clearMatch()
note: use of the browser api requires a privileged app, and browser and/or embed-apps permiss
ions, depending on what you want to do.
... examples the following funct
ion is taken from our browser api demo, and (amongst other things) clears the search results when the search bar is hidden, if an existing search is active.
... see implementing the search bar for more explanat
ion.
... searchtoggle.addeventlistener('touchend',funct
ion() { if(search.getattribute('class') === 'search') { search.setattribute('class', 'search shifted'); } else if(search.getattribute('class') === 'search shifted') { search.setattribute('class', 'search'); if(searchactive) { browser.clearmatch(); searchactive = false; prev.disabled = true; next.disabled = true; searchbar.value = ''; } } }); specificat
ion not part of any specificat
ion.
HTMLIFrameElement.download()
syntax var instanceofdomrequest = instanceofhtmliframeelement.download(url, opt
ions); returns a domrequest for handling the download request.
... opt
ions opt
ional an opt
ions object allowing opt
ional settings to be specified for the download.
... the available opt
ions are: filename: the filename to save the downloaded file as.
... examples var browser = document.queryselector('iframe'); var request = browser.download(foourl, { filename: 'foo.bin' }); request.onsuccess = funct
ion() { console.log("file downladed"); } request.onerror = funct
ion() { console.log("download error"); } specificat
ion not part of any specificat
ion.
HTMLIFrameElement.getVisible()
do not use it on product
ion sites facing the web: it will not work for every user.
... there may also be large incompatibilities between implementat
ions and the behav
ior may change in the future.
... example var browser = document.queryselector('iframe'); var request = browser.getvisible(); request.onsuccess = funct
ion() { console.log('the visible state is: ' + this.result ?
... 'true' : 'false'); } specificat
ion not part of any specificat
ion.
HTMLIFrameElement.goBack()
do not use it on product
ion sites facing the web: it will not work for every user.
... there may also be large incompatibilities between implementat
ions and the behav
ior may change in the future.
... by calling this method, the browser <iframe> changes its locat
ion for the prev
ious locat
ion available in its navigat
ion history, which sends a series of related events: mozbrowserlocat
ionchange, mozbrowserloadstart, and so on.
... examples back.addeventlistener('touchend',funct
ion() { browser.goback(); }); specificat
ion not part of any specificat
ion.
HTMLIFrameElement.goForward()
do not use it on product
ion sites facing the web: it will not work for every user.
... there may also be large incompatibilities between implementat
ions and the behav
ior may change in the future.
... by calling this method, the browser <iframe> changes its locat
ion to the next locat
ion available in its navigat
ion history, which sends a series of related events: mozbrowserlocat
ionchange, mozbrowserloadstart and so on.
... examples fwd.addeventlistener('touchend',funct
ion() { browser.goforward(); }); specificat
ion not part of any specificat
ion.
mozbrowserclose
do not use it on product
ion sites facing the web: it will not work for every user.
... there may also be large incompatibilities between implementat
ions and the behav
ior may change in the future.
... general info specificat
ion non standard interface customevent bubbles yes cancelable yes target <iframe> default act
ion none properties property type descript
ion target read only eventtarget the event target (the topmost target in the dom tree).
... example var browser = document.queryselector("iframe"); browser.addeventlistener("mozbrowserclose", funct
ion() { console.log("browser window has been closed; iframe will be destroyed."); }); related events mozbrowserasyncscroll mozbrowsercontextmenu mozbrowsererror mozbrowsericonchange mozbrowserloadend mozbrowserloadstart mozbrowserlocat
ionchange mozbrowseropenwindow mozbrowsersecuritychange mozbrowsershowmodalprompt mozbrowsertitlechange mozbrowserusernameandpasswordrequired ...
mozbrowserdocumentfirstpaint
do not use it on product
ion sites facing the web: it will not work for every user.
... there may also be large incompatibilities between implementat
ions and the behav
ior may change in the future.
... general info specificat
ion non standard interface customevent bubbles yes cancelable yes target <iframe> default act
ion none properties property type descript
ion target read only eventtarget the event target (the topmost target in the dom tree).
... example var browser = document.queryselector("iframe"); browser.addeventlistener("mozbrowserdocumentfirstpaint", funct
ion() { console.log("first content painted."); }); related events mozbrowserasyncscroll mozbrowsercontextmenu mozbrowsererror mozbrowsericonchange mozbrowserloadend mozbrowserloadstart mozbrowserlocat
ionchange mozbrowseropenwindow mozbrowsersecuritychange mozbrowsershowmodalprompt mozbrowsertitlechange mozbrowserusernameandpasswordrequired ...
mozbrowserfirstpaint
do not use it on product
ion sites facing the web: it will not work for every user.
... there may also be large incompatibilities between implementat
ions and the behav
ior may change in the future.
... general info specificat
ion non standard interface customevent bubbles yes cancelable yes target <iframe> default act
ion none properties property type descript
ion target read only eventtarget the event target (the topmost target in the dom tree).
... example var browser = document.queryselector("iframe"); browser.addeventlistener("mozbrowserfirstpaint", funct
ion(event) { console.log("first content painted."); }); related events mozbrowserasyncscroll mozbrowsercontextmenu mozbrowsererror mozbrowsericonchange mozbrowserloadend mozbrowserloadstart mozbrowserlocat
ionchange mozbrowseropenwindow mozbrowsersecuritychange mozbrowsershowmodalprompt mozbrowsertitlechange mozbrowserusernameandpasswordrequired ...
mozbrowsericonchange
do not use it on product
ion sites facing the web: it will not work for every user.
... there may also be large incompatibilities between implementat
ions and the behav
ior may change in the future.
... general info specificat
ion non standard interface customevent bubbles yes cancelable yes target <iframe> default act
ion none properties property type descript
ion target read only eventtarget the browser iframe type read only domstring the type of event.
... example var browser = document.queryselector("iframe"); browser.addeventlistener("mozbrowsericonchange", funct
ion( event ) { console.log("the url of the new favicon is:" + event.details.href); }); related events mozbrowserasyncscroll mozbrowserclose mozbrowsercontextmenu mozbrowsererror mozbrowserloadend mozbrowserloadstart mozbrowserlocat
ionchange mozbrowseropenwindow mozbrowsersecuritychange mozbrowsershowmodalprompt mozbrowsertitlechange mozbrowserusernameandpasswordrequired ...
mozbrowserloadend
although implementat
ions may change in the future and it is not supported widely across browsers, it is suitable for use in code dedicated to firefox os apps.
... general info specificat
ion non standard interface customevent bubbles yes cancelable yes target <iframe> default act
ion none properties property type descript
ion target read only eventtarget the browser iframe type read only domstring the type of event.
...in addit
ion, the background of the controls ui bar is changed to the background color of the site that has just loaded, to provide a more integrated experience.
... var browser = document.queryselector("iframe"); browser.addeventlistener('mozbrowserloadend',funct
ion(e) { stopreload.textcontent = 'r'; console.log(e.detail.backgroundcolor); controls.style.background = e.detail.backgroundcolor; }); browser.addeventlistener('mozbrowserloadend',funct
ion() { stopreload.textcontent = 'r'; }); related events mozbrowserasyncscroll mozbrowserclose mozbrowsercontextmenu mozbrowsererror mozbrowsericonchange mozbrowserloadstart mozbrowserlocat
ionchange mozbrowseropenwindow mozbrowsersecuritychange mozbrowsershowmodalprompt mozbrowsertitlechange mozbrowserusernameandpasswordrequired ...
mozbrowserloadstart
do not use it on product
ion sites facing the web: it will not work for every user.
... there may also be large incompatibilities between implementat
ions and the behav
ior may change in the future.
... general info specificat
ion non standard interface customevent bubbles yes cancelable yes target <iframe> default act
ion none properties property type descript
ion target read only eventtarget the event target (the topmost target in the dom tree).
... var browser = document.queryselector("iframe"); browser.addeventlistener('mozbrowserloadstart',funct
ion() { stopreload.textcontent = 'x'; }); browser.addeventlistener('mozbrowserloadend',funct
ion() { stopreload.textcontent = 'r'; }); related events mozbrowserasyncscroll mozbrowserclose mozbrowsercontextmenu mozbrowsererror mozbrowsericonchange mozbrowserloadend mozbrowserlocat
ionchange mozbrowseropenwindow mozbrowsersecuritychange mozbrowsershowmodalprompt mozbrowsertitlechange ...
mozbrowseropentab
do not use it on product
ion sites facing the web: it will not work for every user.
... there may also be large incompatibilities between implementat
ions and the behav
ior may change in the future.
... the mozbrowseropentab event is fired when a new tab is opened within a browser <iframe> as a result of the user issuing a command to open a link target in a new tab (for example ctrl/cmd + click.) general info specificat
ion non standard interface customevent bubbles yes cancelable yes target <iframe> default act
ion none properties property type descript
ion target read only eventtarget the browser iframe type read only domstring the type of event.
... example var browser = document.queryselector("iframe"); browser.addeventlistener("mozbrowseropentab", funct
ion( event ) { console.log("a new document has opened containing the content at " + event.details.url + "."); }); related events mozbrowserasyncscroll mozbrowserclose mozbrowsercontextmenu mozbrowsererror mozbrowsericonchange mozbrowserloadend mozbrowserloadstart mozbrowserlocat
ionchange mozbrowsersecuritychange mozbrowsertitlechange mozbrowserusernameandpasswordrequired ...
mozbrowseropenwindow
do not use it on product
ion sites facing the web: it will not work for every user.
... there may also be large incompatibilities between implementat
ions and the behav
ior may change in the future.
... general info specificat
ion non standard interface customevent bubbles yes cancelable yes target <iframe> default act
ion none properties property type descript
ion target read only eventtarget the browser iframe type read only domstring the type of event.
... example var browser = document.queryselector("iframe"); browser.addeventlistener("mozbrowseropenwindow", funct
ion( event ) { console.log("a new window has opened containing the content at " + event.details.url + "."); }); related events mozbrowserasyncscroll mozbrowserclose mozbrowsercontextmenu mozbrowsererror mozbrowsericonchange mozbrowserloadend mozbrowserloadstart mozbrowserlocat
ionchange mozbrowsersecuritychange mozbrowsertitlechange mozbrowserusernameandpasswordrequired ...
mozbrowserresize
do not use it on product
ion sites facing the web: it will not work for every user.
... there may also be large incompatibilities between implementat
ions and the behav
ior may change in the future.
... general info specificat
ion non standard interface customevent bubbles yes cancelable yes target <iframe> default act
ion none properties property type descript
ion target read only eventtarget the browser iframe type read only domstring the type of event.
... example var browser = document.queryselector("iframe"); browser.addeventlistener("mozbrowserresize", funct
ion( event ) { console.log("the new window size is " + event.details.width + " x " + event.details.height + "."); }); related events mozbrowserasyncscroll mozbrowserclose mozbrowsercontextmenu mozbrowsererror mozbrowsericonchange mozbrowserloadend mozbrowserloadstart mozbrowserlocat
ionchange mozbrowsersecuritychange mozbrowsertitlechange mozbrowserusernameandpasswordrequired ...
mozbrowserscrollareachanged
do not use it on product
ion sites facing the web: it will not work for every user.
... there may also be large incompatibilities between implementat
ions and the behav
ior may change in the future.
...this can occur on resize and when the page size changes (while loading for example.) general info specificat
ion non standard interface customevent bubbles yes cancelable yes target <iframe> default act
ion none properties property type descript
ion target read only eventtarget the browser iframe type read only domstring the type of event.
... example var browser = document.queryselector("iframe"); browser.addeventlistener("mozbrowserscrollareachanged", funct
ion( event ) { console.log("the new scroll area is " + event.details.width + " x " + event.details.height + "."); }); related events mozbrowserasyncscroll mozbrowserclose mozbrowsercontextmenu mozbrowsererror mozbrowsericonchange mozbrowserloadend mozbrowserloadstart mozbrowserlocat
ionchange mozbrowsersecuritychange mozbrowsertitlechange mozbrowserusernameandpasswordreq...
mozbrowserscrollviewchange
do not use it on product
ion sites facing the web: it will not work for every user.
... there may also be large incompatibilities between implementat
ions and the behav
ior may change in the future.
... general info specificat
ion non standard interface customevent bubbles yes cancelable yes target <iframe> default act
ion none properties property type descript
ion target read only eventtarget the browser iframe type read only domstring the type of event.
... example var browser = document.queryselector("iframe"); browser.addeventlistener("mozbrowserscrollviewchange", funct
ion( event ) { console.log("scrolling has " + event.details.state + "."); }); related events mozbrowserasyncscroll mozbrowserclose mozbrowsercontextmenu mozbrowsererror mozbrowsericonchange mozbrowserloadend mozbrowserloadstart mozbrowserlocat
ionchange mozbrowsersecuritychange mozbrowsertitlechange mozbrowserusernameandpasswordrequired ...
mozbrowsertitlechange
do not use it on product
ion sites facing the web: it will not work for every user.
... there may also be large incompatibilities between implementat
ions and the behav
ior may change in the future.
... general info specificat
ion non standard interface customevent bubbles yes cancelable yes target <iframe> default act
ion none properties property type descript
ion target read only eventtarget the browser iframe type read only domstring the type of event.
... example var browser = document.queryselector("iframe"); browser.addeventlistener("mozbrowsertitlechange", funct
ion( event ) { console.log("the title of the document is:" + event.detail); }); related events mozbrowserasyncscroll mozbrowserclose mozbrowsercontextmenu mozbrowsererror mozbrowsericonchange mozbrowserloadend mozbrowserloadstart mozbrowserlocat
ionchange mozbrowseropenwindow mozbrowsersecuritychange mozbrowsershowmodalprompt mozbrowserusernameandpasswordrequired ...
mozbrowservisibilitychange
do not use it on product
ion sites facing the web: it will not work for every user.
... there may also be large incompatibilities between implementat
ions and the behav
ior may change in the future.
... general info specificat
ion non standard interface customevent bubbles yes cancelable yes target <iframe> default act
ion none properties property type descript
ion target read only eventtarget the browser iframe type read only domstring the type of event.
... example var browser = document.queryselector("iframe"); browser.addeventlistener("mozbrowservisibilitychange", funct
ion( event ) { if(event.details.visible) { console.log("the browser is visible."); } else { console.log("the browser is hidden."); } }); related events mozbrowserasyncscroll mozbrowserclose mozbrowsercontextmenu mozbrowsererror mozbrowsericonchange mozbrowserloadend mozbrowserloadstart mozbrowserlocat
ionchange mozbrowseropenwindow mozbrowsersecuritychange mozbrowsertitlec...
HTMLIFrameElement.mute()
do not use it on product
ion sites facing the web: it will not work for every user.
... there may also be large incompatibilities between implementat
ions and the behav
ior may change in the future.
... the mute() method of the htmliframeelement mute any aud
io playing in the browser <iframe>.
... example var browser = document.queryselector('iframe'); browser.mute(); specificat
ion not in a specificat
ion.
HTMLIFrameElement.reload()
do not use it on product
ion sites facing the web: it will not work for every user.
... there may also be large incompatibilities between implementat
ions and the behav
ior may change in the future.
... parameters hardreload opt
ional 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 stopreload.addeventlistener('touchend',funct
ion() { if(stopreload.textcontent === 'x') { browser.stop(); } else { browser.reload(); } }); specificat
ion not part of any specificat
ion.
HTMLIFrameElement.setActive()
do not use it on product
ion sites facing the web: it will not work for every user.
... there may also be large incompatibilities between implementat
ions and the behav
ior may change in the future.
... the setactive() method of the htmliframeelement sets the current <iframe> as the active frame, which has an effect on how it is pr
ioritized by the process manager.
... example var browser = document.queryselector('iframe'); browser.setactive(); specificat
ion not part of any specificat
ion.
HTMLIFrameElement.unmute()
do not use it on product
ion sites facing the web: it will not work for every user.
... there may also be large incompatibilities between implementat
ions and the behav
ior may change in the future.
... the unmute() method of the htmliframeelement unmutes any aud
io playing in the browser <iframe>.
... example var browser = document.queryselector('iframe'); browser.unmute(); specificat
ion not part of any specificat
ion.
Chrome-only API reference
browser apithe html browser api is an extens
ion of the html <iframe> element that allows web apps to implement browsers or browser-like applicat
ions.
... it currently works in (privileged) chrome code on firefox desktop (vers
ion 47 and above).chromeworkerif you're developing privileged code, and would like to create a worker that can use js-ctypes to perform calls to native code, you can do so by using chromeworker instead of the standard worker object.
...examples of chromeworker's using js-ctypes are availabe on github and are linked to from the see also sect
ion below.
... to use a postmessage with callback vers
ion of chromeworker that features promises, see promiseworker.
Chrome-only CSS reference
ua stylesheets.) note: most of the css properties exposed to the web in general are also usable in chrome stylesheets: see the css documentat
ion for a list of these.
...xtactivated by the properties attribute.::-moz-tree-cell-text(hover)the :-moz-tree-cell-text(hover) css pseudo-class will match an element if the mouse cursor is presently hovering over text in a tree cell.::-moz-tree-columnactivated by the properties attribute.::-moz-tree-drop-feedbackactivated by the properties attribute.::-moz-tree-imageactivated by the properties attribute.::-moz-tree-indentat
ionactivated by the properties attribute.::-moz-tree-lineactivated by the properties attribute.::-moz-tree-progressmeteractivated when the type attribute is set to progressmeter.
...oz-tree-rowthe ::-moz-tree-row css pseudo-element is used to select rows and apply styles to tree rows.::-moz-tree-row(hover)the ::-moz-tree-row(hover) css pseudo-class will match an element if the mouse cursor is presently hovering over a tree row.::-moz-tree-separatoractivated by the properties attribute.::-moz-tree-twistyactivated by the properties attribute.css -moz-bool-pref() @supports funct
ionthe -moz-bool-pref() @supports condit
ion 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 direct
ion.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 direct
ion.
Hacking with Bonsai
the original navigator code base had large sect
ions that were shared across multiple platforms.
...use the bonsai query tool to see what's been checked in to the tree lately and to look at differences between vers
ions.
... read the introduct
ion to bonsai for more informat
ion about queries.
...if you are on the hook, your top pr
iority is to be available to the build team to fix bustages.
How to add a build-time test
we have var
ious automat
ion tools that help make this possible.
...if a test is added, that test or its directory needs to be ment
ioned in a makefile.in file somewhere so that the build system knows about it.
...you can of course just use the onetests_type directory here, but if you want to subdivide your tests by funct
ionality, separate directories is the way to go.
... reference the test dir in a parent makefile (<tt>yourmoduledir/makefile.in</tt>): ifdef enable_tests dirs += tests_type endif (opt
ional, but recommended) add the new makefile to allmakefiles.sh (todo: need more details about this) reconfigure (e.g.
How to get a process dump with Windows Task Manager
introduct
ion when tracking down the causes of process hangs, it is often helpful to obtain a process dump while the process is experiencing a hang.
...(to get a process dump for thunderbird or some other product, substitute the product name where ever you see firefox in these instruct
ions.) caut
ion the memory dump that will be created through this process is a complete snapshot of the state of firefox when you create the file, so it contains urls of active tabs, history informat
ion, and possibly even passwords depending on what you are doing when the snapshot is taken.
... a firefox nightly or release you need a firefox vers
ion for which symbols are available from the mozilla symbol server.
... you can use any official nightly build or released vers
ion of firefox from mozilla.
How to investigate Disconnect failures
an example of such a failure disconnect failures happens when one side is closing the connect
ion and mozmill is unable to send the informat
ion over the bridge or when firefox crashes.
...we cannot investigate failures via mozmill, because we do not catch the crashes, so the crashes' informat
ion is not logged; we have to go to ci machines and investigate directly.
... the event viewer can be found on windows: computer management > event viewer > windows logs > applicat
ion and here we look for errors that overlapped with the test run; we cannot see the freezes (the main thread is blocked).
... in “extens
ions” check installed addons and check if they might be responsible for the failure.
How to Report a Hung Firefox
this may be because of a code error within firefox itself, such as a deadlock or infinite loop, or it may be caused by 3rd-party software such as a firefox extens
ion, antivirus software, or even malware or a virus on your computer.
... what informat
ion to include in a bug report as usual, following bug writing guidelines will make your report much more likely to lead to a fix in firefox.
... (if you're experiencing high cpu usage and firefox eventually recovers from a hang, you should try the instruct
ions at reporting a performance problem instead.) is the rest of your system busy (high cpu or memory usage, or high disk activity)?
...the tool also has command-line opt
ions to kill processes with other names or by process id.
Code Samples
simply replace yourextens
ionid with your add-on's id.
... components.utils.import("resource://gre/modules/addonmanager.jsm"); addonmanager.getaddonbyid("yourextens
ionid", funct
ion(addon) { var addonlocat
ion = addon.getresourceuri("").queryinterface(components.interfaces.nsifileurl).file.path; }); accessing file and vers
ion informat
ion components.utils.import("resource://gre/modules/addonmanager.jsm"); addonmanager.getaddonbyid("my-addon@foo.com", funct
ion(addon) { alert("my extens
ion's vers
ion is " + addon.vers
ion); alert("did i remember to include that file.txt file in my xpi?
..."yes!" : "no"); alert("let's pretend i did, it's available from the url " + addon.getresourceuri("file.txt").spec); }); uninstall an add-on components.utils.import("resource://gre/modules/addonmanager.jsm"); addonmanager.getaddonbyid("youraddon@youraddon.com", funct
ion(addon) { addon.uninstall(); }); disable an add-on components.utils.import("resource://gre/modules/addonmanager.jsm"); addonmanager.getaddonbyid("youraddon@youraddon.com", funct
ion(addon) { if (addon.isactive) addon.userdisabled = addon.isactive; }); listening for add-on uninstall this example sets a variable beinguninstalled that you can check when you get a profile-before-change message to do cleanup for your add-on on uninstall.
... var beinguninstalled; let listener = { onuninstalling: funct
ion(addon) { if (addon.id == "youraddon@youraddon.com") { beinguninstalled = true; } }, onoperat
ioncancelled: funct
ion(addon) { if (addon.id == "youraddon@youraddon.com") { beinguninstalled = (addon.pendingoperat
ions & addonmanager.pending_uninstall) != 0; } } } try { components.utils.import("resource://gre/modules/addonmanager.jsm"); addonmanager.addaddonlistener(listener); } catch (ex) {} ...
InstallListener
void ondownloadfailed( in addoninstall install ) parameters install the addoninstall representing the install oninstallstarted() called when installat
ion of an add-on begins.
... void oninstallstarted( in addoninstall install ) parameters install the addoninstall representing the install oninstallended() called when installat
ion of an add-on is complete.
... void oninstallended( in addoninstall install in addon addon ) parameters install the addoninstall representing the install addon the addon addon that has been installed oninstallcancelled() called when installat
ion is cancelled.
... void onexternalinstall( in addon addon, in addon existingaddon, in boolean needsrestart ) parameters addon the newly installed addon existingaddon an addon that will be replaced by this install or null if no add-on is being replaced needsrestart true if the installat
ion requires a restart ...
UpdateInfo
updateinfo objects hold informat
ion about available vers
ions of add-ons and are generated as a result of an update check performed by addonupdatechecker.
... attributes attribute type descript
ion vers
ion string the vers
ion of the update.
... targetapplicat
ions object[] informat
ion about what applicat
ions the update is compatible with.
... each item in the array contains "id", "minvers
ion", and "maxvers
ion" properties.
Widget Wrappers
widget wrappers are objects that provide informat
ion about a widget.
... there are 'group' wrappers which provide informat
ion about the widget across all windows, and 'single' wrappers which provide informat
ion about a specific instance in a specific window.
... attribute descript
ion id the widget's id type the type of widget (button, view, custom).
... attribute descript
ion id the widget's id type the type of widget (button, view, custom).
NSS 3.40.1 release notes
introduct
ion the nss team has released network security services (nss) 3.40.1, which is a patch release for nss 3.40 distribut
ion informat
ion the hg tag is nss_3_40_1_rtm.
... nss 3.40 source distribut
ions 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 funct
ionality no new funct
ionality is introduced in this release.
... this is a patch release to fix cve-2018-12404 new funct
ions 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.
...furthermore, applicat
ions that restrict their use of nss apis to the funct
ions listed in nss public funct
ions will remain compatible with future vers
ions of the nss shared libraries.
NSS Sample Code sample4
nss sample code 4: pki encrypt
ion /* example code to illustrate pki crypto ops (encrypt with public key, * decrypt with private key) * * code assumes that you have set up a nss database with a certificate * and a private key.
...for example purposes, this funct
ion hardcodes the password.
... * in a real app, this funct
ion should obtain the password using secure means * such as prompting an operator, or retrieving it over a secure communicat
ion * channel */ char *passwdcb(pk11slotinfo *info, prbool retry, void *arg); int main(int argc, char **argv) { secstatus rv; certcertificate *cert = null; seckeypublickey *pubkey = null; seckeyprivatekey *pvtkey = null; int modulus_len, i, outlen; char *buf1 = null; char *buf2 = null; /* initialize nss */ pk11_setpasswordfunc(passwdcb); rv = nss_init("."); if (rv != secsuccess) { fprintf(stderr, "nss initializat
ion failed (err %d)\n", pr_geterror()); goto cleanup; } cert = pk11_findcertfromnickname("testca", null); if (cert == nul...
...buf1 */ for (i=0;i<modulus_len;i++) { buf1[i]= '\0'; } /* decrypt buf2, result will be in buf1 */ rv = pk11_pubdecryptraw(pvtkey, buf1, &outlen, modulus_len, buf2, modulus_len); if (rv != secsuccess) { fprintf(stderr, "decrypt with private key failed (err %d)\n", pr_geterror()); goto cleanup; } fprintf(stderr, "result of decrypt
ion, outlen = %d\n", outlen); fprintf(stderr, "result of decrypt
ion, buf = \n%s\n", buf1); exit(0); cleanup: if (cert) cert_destroycertificate(cert); if (pubkey) seckey_destroypublickey(pubkey); if (pvtkey) seckey_destroyprivatekey(pvtkey); if (buf1) free(buf1); if (buf2) free(buf2); exit(1); } char *passwdcb(pk11slotinfo *info, prbool retry, void *arg) { if ...
NSS Sample Code sample5
nss sample code 5: pki encrypt
ion with a raw public & private key in der format /* example code to illustrate pki crypto ops (encrypt with public key, * decrypt with private key) * * no nss db needed.
...item nickname; pk11slotinfo *slot = null; /* initialize nss * you need to explicitly authenticate to the internal token if you use * nss_init insteadf of nss_nodb_init * invoke this after getting the internal token handle * pk11_authenticate(slot, pr_false, null); */ rv = nss_nodb_init("."); if (rv != secsuccess) { fprintf(stderr, "nss initializat
ion failed (err %d)\n", pr_geterror()); goto cleanup; } /* get internal slot */ slot = pk11_getinternalkeyslot(); if (slot == null) { fprintf(stderr, "couldn't find slot (err %d)\n", pr_geterror()); goto cleanup; } rv = atob_convertasciitoitem(&der, pubkstr); if (rv!= secsuccess) { fprintf(stderr, "atob_convertasciitoitem failed %d\n", pr_geterror()); ...
...leanup; } nickname.type = sibuffer; nickname.data = "pvtkeynickname"; nickname.len = strlen("pvtkeynickname"); rv = atob_convertasciitoitem(&der, pvtkstr); if (rv!= secsuccess) { fprintf(stderr, "atob_convertasciitoitem failed %d\n", pr_geterror()); goto cleanup; } /* ku_all includes a lot of different key usages, ku_data_encipherment * is enough for just rsa encrypt
ion.
...buf1 */ for (i=0;i<modulus_len;i++) { buf1[i]= '\0'; } /* decrypt buf2, result will be in buf1 */ rv = pk11_pubdecryptraw(pvtkey, buf1, &outlen, modulus_len, buf2, modulus_len); if (rv != secsuccess) { fprintf(stderr, "decrypt with private key failed (err %d)\n", pr_geterror()); goto cleanup; } fprintf(stderr, "result of decrypt
ion, outlen = %d\n", outlen); fprintf(stderr, "result of decrypt
ion, buf = \n%s\n", buf1); cleanup: if (cert) cert_destroycertificate(cert); if (pubkey) seckey_destroypublickey(pubkey); if (pvtkey) seckey_destroyprivatekey(pvtkey); if (spki) seckey_destroysubjectpublickeyinfo(spki); if (slot) pk11_freeslot(slot); if (buf1) free(buf1); if (buf2) free(buf2)...
NSS Sample Code sample6
nss sample code 6: persistent symmetric keys in nss database /* example code to illustrate generat
ion of a secret symmetric key ring * that persists in the nss database.
...for example purposes, this funct
ion hardcodes the password.
... * in a real app, this funct
ion should obtain the password using secure means * such as prompting an operator, or retrieving it over a secure communicat
ion * channel */ char *passwdcb(pk11slotinfo *info, prbool retry, void *arg); int main(int argc, char **argv) { secstatus rv; /* initialize nss */ pk11_setpasswordfunc(passwdcb); /* the nss db must be initialized read-write since we'll be creating * keys in it.
... */ rv = nss_initreadwrite("."); if (rv != secsuccess) { fprintf(stderr, "nss initializat
ion failed (err %d)\n", pr_geterror()); exit(1); } /* generate a key with id 1.
Hashing - sample 1
*/ /* nspr headers */ #include <prprf.h> #include <prtypes.h> #include <plgetopt.h> #include <pr
io.h> /* nss headers */ #include <secoid.h> #include <secmodt.h> #include <sechash.h> #include <nss.h> typedef struct { const char *hashname; secoidtag oid; } nametagpair; /* the hash algorithms supported */ static const nametagpair hash_names[] = { { "md2", sec_oid_md2 }, { "md5", sec_oid_md5 }, { "sha1", sec_oid_sha1 }, { "sha256", sec_oid_sha256 }, { "sha384", sec_o...
... fprintf(stderr, " (case ignored))\n"); fprintf(stderr, "%-20s define an input file to use (default is stdin)\n", "< input"); fprintf(stderr, "%-20s define an output file to use (default is stdout)\n", "> output"); exit(-1); } /* * check for the missing arguments */ static void printmsgandexit(const char *progname, char opt) { fprintf(stderr, "%s: opt
ion -%c requires an argument\n", progname, opt); usage(progname); } #define require_arg(opt,value) if (!(value)) printmsgandexit(progname, opt) /* * digests a file according to the specified algorithm.
...o { hash_begin(hashcontext); /* incrementally hash the file contents */ while ((nb = pr_read(infile, ibuf, sizeof(ibuf))) > 0) { hash_update(hashcontext, ibuf, nb); } hash_end(hashcontext, digest, &len, 64); /* normally we would write it out in binary with * nb = pr_write(outfile, digest, len); * but for illustrat
ion let's print it in hex.
...progname + 1 : argv[0]; rv = nss_nodb_init("/tmp"); if (rv != secsuccess) { fprintf(stderr, "%s: nss_init failed in directory %s\n", progname, "/tmp"); return -1; } /* parse command line arguments */ optstate = pl_createoptstate(argc, argv, "t:"); while ((status = pl_getnextopt(optstate)) == pl_opt_ok) { switch (optstate->opt
ion) { case 't': require_arg(optstate->opt
ion, optstate->value); hashname = strdup(optstate->value); break; } } if (!hashname) usage(progname); /* convert and validate */ hashoidtag = hashnametooidtag(hashname); if (hashoidtag == sec_oid_unknown) { fprintf(stderr, "%s: invalid digest type - %s\n", progname, has...
Initialize NSS database - sample 2
ccess) { pr_fprintf(pr_stderr, "failed to change password.\n"); return secfailure; } port_memset(oldpw, 0, pl_strlen(oldpw)); port_free(oldpw); pr_fprintf(pr_stdout, "password changed successfully.\n"); } port_memset(newpw, 0, pl_strlen(newpw)); port_free(newpw); return secsuccess; } /* * this example illustrates initializat
ion of the nss database.
... * it creates an nss configurat
ion directory with empty databases * and initializes the databases.
...progname + 1 : argv[0]; /* parse command line arguments */ optstate = pl_createoptstate(argc, argv, "d:p:q:f:g:"); while ((status = pl_getnextopt(optstate)) == pl_opt_ok) { switch (optstate->opt
ion) { case 'd': dbdir = strdup(optstate->value); break; case 'p': plainpass = strdup(optstate->value); break; case 'f': pwfile = strdup(optstate->value); break; default: usage(progname); break; } } pl_destroyoptstate(optstate); if (!dbdir) ...
... usage(progname); pr_init(pr_user_thread, pr_pr
iority_normal, 0); /* create the database */ rv = nss_initreadwrite(dbdir); if (rv != secsuccess) { pr_fprintf(pr_stderr, "nss_initialize failed"); pr_cleanup(); exit(rv); } if (pl_strcmp(slotname, "internal") == 0) slot = pk11_getinternalkeyslot(); /* if creating new database, initialize the password.
sample1
/* nspr headers */ #include <prprf.h> #include <prtypes.h> #include <plgetopt.h> #include <pr
io.h> #include <prprf.h> /* nss headers */ #include <secoid.h> #include <secmodt.h> #include <sechash.h> typedef struct { const char *hashname; secoidtag oid; } nametagpair; /* the hash algorithms supported */ static const nametagpair hash_names[] = { { "md2", sec_oid_md2 }, { "md5", sec_oid_md5 }, { "sha1", sec_oid_sha1 }, { "sha256", sec_oid_sha256 }, { "sha384", sec_oid_sha384 }, { "sha512", sec_oid_sha512 } }; /* maps a hash name to a secoidtag.
...tf(stderr, " (case ignored))\n"); fprintf(stderr, "%-20s define an input file to use (default is stdin)\n", "< input"); fprintf(stderr, "%-20s define an output file to use (default is stdout)\n", "> output"); exit(-1); } /* check for the missing arguments */ static void printmsgandexit(const char *progname, char opt) { fprintf(stderr, "%s: opt
ion -%c requires an argument\n", progname, opt); usage(progname); } #define require_arg(opt,value) if (!(value)) printmsgandexit(progname, opt) /* digests a file according to the specified algorithm.
... hash_begin(hashcontext); /* incrementally hash the file contents */ while ((nb = pr_read(infile, ibuf, sizeof(ibuf))) > 0) { hash_update(hashcontext, ibuf, nb); } hash_end(hashcontext, digest, &len, 64); /* normally we would write it out in binary with * nb = pr_write(outfile, digest, len); * but for illustrat
ion let's print it in hex.
...progname + 1 : argv[0]; rv = nss_nodb_init("/tmp"); if (rv != secsuccess) { fprintf(stderr, "%s: nss_init failed in directory %s\n", progname, "/tmp"); return -1; } /* parse command line arguments */ optstate = pl_createoptstate(argc, argv, "t:"); while ((status = pl_getnextopt(optstate)) == pl_opt_ok) { switch (optstate->opt
ion) { case 't': require_arg(optstate->opt
ion, optstate->value); hashname = strdup(optstate->value); break; } } if (!hashname) usage(progname); /* convert and validate */ hashoidtag = hashnametooidtag(hashname); if (hashoidtag == sec_oid_unknown) { fprintf(stderr, "%s: invalid digest type - %s\n",...
FC_Decrypt
syntax ck_rv fc_decrypt( ck_sess
ion_handle hsess
ion, ck_byte_ptr pencrypteddata, ck_ulong usencrypteddatalen, ck_byte_ptr pdata, ck_ulong_ptr pusdatalen ); parameters hsess
ion [in] sess
ion handle.
...pdata [out] pointer to locat
ion where recovered data is to be stored.
... pusdatalen [in,out] pointer to locat
ion where the length of recovered data is to be stored.
... descript
ion fc_decrypt decrypts a block of data according to the attributes of the prev
ious call to fc_decryptinit.
FC_DecryptInit
name fc_decryptinit - initialize a decrypt
ion operat
ion.
... syntax ck_rv fc_decryptinit( ck_sess
ion_handle hsess
ion, ck_mechanism_ptr pmechanism, ck_object_handle hkey ); parameters hsess
ion [in] sess
ion handle.
... pmechanism [in] mechanism to be used for the subsequent decrypt
ion operat
ion.
... descript
ion fc_decryptinit initializes a decrypt
ion operat
ion.
FC_Digest
syntax ck_rv fc_digest( ck_sess
ion_handle hsess
ion, ck_byte_ptr pdata, ck_ulong usdatalen, ck_byte_ptr pdigest, ck_ulong_ptr pusdigestlen ); parameters hsess
ion [in] sess
ion handle.
...pdigest [out] pointer to locat
ion where recovered data is to be stored.
... pusdigestlen [in, out] pointer to the maximum size of the output buffer, replaced by the length of the message digest if the operat
ion is successful.
... descript
ion fc_digest digests a message in a single operat
ion according to the attributes of the prev
ious call to fc_digestinit.
FC_DigestFinal
name fc_digestfinal - finish a multi-part digest operat
ion.
... syntax ck_rv fc_digestfinal( ck_sess
ion_handle hsess
ion, ck_byte_ptr pdigest, ck_ulong_ptr puldigestlen ); parameters hsess
ion [in] sess
ion handle.
...puldigestlen [in, out] pointer to locat
ion containing the maximum buffer size.
... descript
ion fc_digestfinal finishes a multi-part digest operat
ion by returning the complete digest and clearing the operat
ion context.
FC_DigestInit
name fc_digestinit - initialize a message-digest operat
ion.
... syntax ck_rv fc_digestinit( ck_sess
ion_handle hsess
ion, ck_mechanism_ptr pmechanism ); parameters hsess
ion [in] sess
ion handle.
... pmechanism [in] mechanism to be used for the subsequent digest operat
ion.
... descript
ion fc_digestinit initializes a message-digest operat
ion.
FC_DigestUpdate
name fc_digestupdate - process the next block of a multi-part digest operat
ion.
... syntax ck_rv fc_digestupdate( ck_sess
ion_handle hsess
ion, ck_byte_ptr ppart, ck_ulong uspartlen ); parameters hsess
ion [in] sess
ion handle.
... descript
ion fc_digestupdate starts or continues a multi-part digest operat
ion.
... one or more blocks may be part of the message digest operat
ion.
FC_EncryptFinal
name fc_encryptfinal - finish a multi-part encrypt
ion operat
ion.
... syntax ck_rv fc_encryptfinal( ck_sess
ion_handle hsess
ion, ck_byte_ptr plastencryptedpart, ck_ulong_ptr puslastencryptedpartlen ); parameters hsess
ion [in] sess
ion handle.
... plastencryptedpart [out] pointer to the locat
ion that receives the last encrypted data part, if any puslastencryptedpartlen [in,out] pointer to locat
ion where the number of bytes of the last encrypted data part is to be stored.
... descript
ion fc_encryptfinal returns the last block of data of a multi-part encrypt
ion operat
ion.
FC_Finalize
name fc_finalize - indicate that an applicat
ion is done with the pkcs #11 library.
... syntax ck_rv fc_finalize (ck_void_ptr preserved); parameters fc_finalize has one parameter: preserved must be null descript
ion fc_finalize shuts down the nss cryptographic module in the fips mode of operat
ion.
... examples #include <assert.h> ck_funct
ion_list_ptr pfunct
ionlist; ck_rv crv; crv = fc_getfunct
ionlist(&pfunct
ionlist); assert(crv == ckr_ok); ...
... /* invoke fc_finalize as pfunct
ionlist->c_finalize */ crv = pfunct
ionlist->c_finalize(null); see also fc_initialize, nsc_initialize, nsc_finalize ...
FOSS
bove, has lots of goodies spiderape - the oldest c++ bindings for spidermonkey trixul - (trixul cvs) - trixul xml-based gui toolkit embeds spidermonkey, using javascript to implement logic behind its gui, supporting calls from javascript to c++ objects rust mozjs - rust bindings used by servo gnome gjs - javascript bindings to gnome (broadly, to any library using the gobject introspect
ion mechanism) objective caml http://alain.frisch.fr/soft.html#spider - bindings to embed spidermonkey in ocaml applicat
ions perl http://jspl.msg.mx/ - bindings to cross-embed spidermonkey and perl.
... python http://pypi.python.org/pypi/python-spidermonkey wxwidgets gluescript (formerly wxjavascript) code generators jsapigen - generates bindings for embedding spidermonkey in c applicat
ions extens
ions http://code.google.com/p/jslibs/ - zlib, sqlite, nspr, ode, libpng, libjpeg, libffi, (...) libraries for spidermonkey http://www.jsdb.org/ - a js shell with native objects for files, networks, databases, compress
ion, email, etc.
...designed to supplement existing embeddings, gpsee ships with a sample trivial embedding, a scripting host, and an augmented vers
ion of mozilla's js shell.
...amework http://www.synchro.net/ - a telnet/ssh bulletin board system (bbs) and internet server (http/smtp/ftp) with extra internet services written in javascript (irc, imap, gopher, and many more) https://github.com/mindbit/libjssql/wiki - a library that aims to provide a generic sql api for javascript that is as similar as possible to jdbc miscellaneous serverjs, a standardizat
ion effort for the fragmented server-side javascript world 0 a.d., historical rts game with javascript scripting http://soubok.googlepages.com/javascript malzilla - tool for hunting malware by deobfuscating javascripts on web pages, using spidermonkey ...
INT_FITS_IN_JSVAL
*/ name type descript
ion i jsint the c integer value to check.
... descript
ion determines if a specified c integer value, i, lies within the range allowed for integer jsvals.
...in this case, the applicat
ion can still convert i to a jsval using js_newnumbervalue.
... example the following code snippet illustrates how a c variable, item, is condit
ionally tested in an if statement to see if it is a legal jsval integer value.
JS::GetFirstArgumentAsTypeHint
syntax bool js::getfirstargumentastypehint(jscontext* cx, callargs args, jstype *result); name type descript
ion cx jscontext * the context in which to define funct
ions.
... fs callargs the arguments of the funct
ion call.
... behav
ior jstype * receives the result of convers
ion.
... descript
ion js::getfirstargumentastypehint converts first argument of @@toprimitive method to jstype.
JS::OrdinaryToPrimitive
syntax bool js::ordinarytoprimitive(jscontext *cx, js::handleobject obj, jstype type, js::mutablehandlevalue vp); name type descript
ion cx jscontext * the context in which to perform the convers
ion.
... descript
ion js::ordinarytoprimitive converts a javascript object to a specified type value, by the algorithm specified in es6 draft rev 28 (2014 oct 14) 7.1.1, second algorithm.
...it implements the default convers
ion behav
ior shared by most objects in js, so it's useful as a fallback.
...on error or except
ion, it returns false, and the value left in *vp is undefined.
JS::PropertySpecNameEqualsId
this article covers features introduced in spidermonkey 38 determine if the given jspropertyspec::name or jsfunct
ionspec::name value equals the given jsid.
... syntax bool js::propertyspecnameequalsid(const char *name, js::handleid id); name type descript
ion name const char * jspropertyspec::name or jsfunct
ionspec::name.
... descript
ion js::propertyspecnameequalsid determines if the given jspropertyspec::name or jsfunct
ionspec::name value equals the given jsid, and returns true if so.
... see also mxr id search for js::propertyspecnameequalsid js::propertyspecnameissymbol js::propertyspecnametopermanentid jspropertyspec jsfunct
ionspec bug 1082672 ...
JS::PropertySpecNameIsSymbol
this article covers features introduced in spidermonkey 38 determine if the given jspropertyspec::name or jsfunct
ionspec::name value is actually a symbol code and not a string.
... syntax bool js::propertyspecnameissymbol(const char *name); name type descript
ion name const char * the pointer of the name, actually the uintptr_t type, and not a pointer to any string.
... descript
ion js::propertyspecnameissymbol determines if the given jspropertyspec::name or jsfunct
ionspec::name value is actually a symbol code and not a string, and returns true if so.
... see also mxr id search for js::propertyspecnameissymbol js::propertyspecnameequalsid js::propertyspecnametopermanentid jspropertyspec jsfunct
ionspec bug 1082672 ...
JS::PropertySpecNameToPermanentId
syntax bool js::propertyspecnametopermanentid(jscontext *cx, const char *name, jsid *idp); name type descript
ion cx jscontext * pointer to a js context from which to derive runtime informat
ion.
... name const char * jspropertyspec::name or jsfunct
ionspec::name.
... descript
ion js::propertyspecnametopermanentid creates a jsid that does not need to be marked for gc from jspropertyspec::name or jsfunct
ionspec::name.
... see also mxr id search for js::propertyspecnametopermanentid js::propertyspecnameissymbol js::propertyspecnameequalsid jspropertyspec jsfunct
ionspec bug 1082672 ...
JS::ToPrimitive
syntax bool js::toprimitive(jscontext *cx, js::handleobject obj, jstype hint, js::mutablehandlevalue vp); name type descript
ion cx jscontext * the context in which to perform the convers
ion.
... descript
ion js::toprimitive converts a javascript object, obj, to a primitive value using ecmascript 6 toprimitive.
...on error or except
ion, it returns false, and the value left in *vp is undefined.
... see also mxr id search for js::toprimitive js::getfirstargumentastypehint js_defaultvalue -- old name of this funct
ion bug 1054756 - added ...
JSCheckAccessOp
(it is also the type of the callback set by js_setcheckobjectaccesscallback.) syntax typedef jsbool (* jscheckaccessop)(jscontext *cx, jsobject *obj, jsval id, jsaccessmode mode, jsval *vp); name type descript
ion cx jscontext * the js context in which the property access attempt is occurring.
... descript
ion check whether obj[id] may be accessed per mode, returning js_false on error/except
ion, js_true on success with obj[id]'s stored value in *vp.
... jscheckaccessop implementat
ions generally work by using jsdbgapi funct
ions such as js_frameiterator and js_stackframeprincipals to obtain the principals of the code attempting the checked operat
ion, then examining those principals and comparing them with the system's security policy.
... the nature of principals and the security policy are entirely up to the applicat
ion.
JSObject
an object's parent is another object, usually either the global object or an object that represents an activat
ion record.
... the javascript engine sometimes uses this relat
ionship to implement lexical scoping.
... security-sensitive applicat
ions can use this relat
ionship to make every object a member of some security domain.
...these are c/c++ hooks and metadata that govern var
ious aspects of the object's behav
ior and describe its layout in memory.
JSObjectOps.lookupProperty
this documentat
ion should be considered spidermonkey internals documentat
ion, not api documentat
ion.
... syntax typedef jsbool (*jslookuppropop)(jscontext *cx, jsobject *obj, jsid id, jsobject **objp, jsproperty **propp); name type descript
ion cx jscontext * pointer to the js context in which the property lookup is happening.
... descript
ion look for id in obj and its prototype chain, returning js_false on error or except
ion, js_true on success.
... note: a successful return with non-null *propp means the implementat
ion may have locked *objp and added a reference count associated with *propp, so callers should not risk deadlock by nesting or interleaving other lookups or any obj-bearing ops before dropping *propp.
JSObjectOps.setProto
this documentat
ion should be considered spidermonkey internals documentat
ion, not api documentat
ion.
... the jsobjectops.setproto and setparent callbacks implement the js_setprototype and js_setparent funct
ions.
... syntax typedef jsbool (*jssetobjectslotop)(jscontext *cx, jsobject *obj, uint32 slot, jsobject *pobj); name type descript
ion cx jscontext * pointer to the js context in which the object's prototype or parent is being modified.
... descript
ion these hooks must check for cycles without deadlocking, and otherwise take special steps.
JSPropertySpec
syntax struct jspropertyspec { struct selfhostedwrapper { void *unused; const char *funname; }; const char *name; int8 tinyid; // obsolete since jsapi 31 uint8_t flags; un
ion { jsnativewrapper native; selfhostedwrapper selfhosted; } getter; un
ion { jsnativewrapper native; selfhostedwrapper selfhosted; } setter; /* obsolete since jsapi 29 */ /* added in jsapi 28 */ const char *selfhostedgetter; const char *selfhostedsetter; }; name type descript
ion name const char * name to assign the pro...
...the getter/setter funct
ion is only used by one property).
... descript
ion jspropertyspec defines the attributes for a single js property to associate with an object.
...to define an array of jspropertyspec, use js_psg, js_psgs, js_self_hosted_get, js_self_hosted_getset, and js_ps_end see also mxr id search for jspropertyspec jsfunct
ionspec jsnativewrapper js_defineproperties js_psg js_psgs js_self_hosted_get js_self_hosted_getset js_ps_end bug 766448 - changed type of getter and setter to wrapper bug 938728 - added selfhostedgetter and selfhostedsetter bug 958262 - changed type of getter and setter to un
ion, and removed selfhostedgetter and selfhostedsetter.
JSRuntime
it contains the global object and the execut
ion stack.
... except
ion handling, error reporting, and some language opt
ions are per-jscontext.
...there's no fixed associat
ion between an object and the context in which it is created.
... earlier vers
ions allowed using js_clearcontextthread and other funct
ions to move a jscontext from one thread to another.
JSVAL_IS_GCTHING
indicates whether a js value has a type that is subject to garbage collect
ion.
... syntax jsval_is_gcthing(v) descript
ion jsval_is_gcthing(v) is true if the jsval v is either jsval_null or a reference to a value that is subject to garbage collect
ion.
... javascript performs automatic garbage collect
ion of objects, strings, and doubles.
... this macro exposes javascript engine implementat
ion details and usually isn't what the applicat
ion really means.
JS_SetGlobalObject
syntax void js_setglobalobject(jscontext *cx, jsobject *obj); name type descript
ion cx jscontext * the context to configure.
... descript
ion this funct
ion is obsolete; see also js_getglobalobject.
...this means that global objects are automatically protected from garbage collect
ion, as are any values reachable from their properties.
...applicat
ions typically set a context's global object using js_initstandardclasses instead.
JS_SetObjectPrincipalsFinder
this funct
ion is deprecated.
...syntax jsobjectprincipalsfinder js_setobjectprincipalsfinder(jsruntime *rt, jsobjectprincipalsfinder fop); name type descript
ion rt jsruntime * the runtime to configure.
... descript
ion js_setobjectprincipalsfinder allows the applicat
ion to set a callback that the javascript engine uses to obtain an object's principals.
...js_setobjectprincipalsfinder returns the prev
ious object-principals-finder callback.
JS_SetPrincipalsTranscoder
this funct
ion is deprecated.
...syntax jsprincipalstranscoder js_setprincipalstranscoder(jsruntime *rt, jsprincipalstranscoder px); name type descript
ion rt jsruntime * the runtime to configure.
... descript
ion js_setprincipalstranscoder sets a runtime-wide callback which the javascript engine uses to serialize and deserialize principals.
...js_setprincipalstranscoder returns the prev
ious principals transcoder.
JS_StringHasLatin1Chars
syntax bool js_stringhaslatin1chars(jsstring *str); name type descript
ion str jsstring * string to examine.
... descript
ion js_stringhaslatin1chars returns true iff the string's characters are stored as latin1.
...clients can use js_stringhaslatin1chars and can then call either the latin1* or twobyte* funct
ions.
... some funct
ions like js_copystringchars and js_getstringcharat accept both latin1 and twobyte strings.
JS_TypeOfValue
syntax jstype js_typeofvalue(jscontext *cx, js::handle<js::value> v); name type descript
ion cx jscontext * the context in which to perform the type check.
... descript
ion js_typeofvalue examines a specified js value, v, and returns its js data type.
... the return value is always one of jstype_void, jstype_object, jstype_funct
ion, jstype_string, jstype_number, or jstype_boolean.
... see also mxr id search for js_typeofvalue js_convertvalue js_gettypename js_valuetoboolean js_valuetofunct
ion js_valuetoint32 js_valuetonumber js_valuetoobject js_valuetostring ...
JS_ValueToSource
syntax jsstring * js_valuetosource(jscontext *cx, js::handle<js::value> v); name type descript
ion cx jscontext * the context in which to perform the convers
ion.
... descript
ion js_valuetosource converts a specified javascript value, v, to a javascript source.
...on error or except
ion, it returns null.
... this happens, for example, if v is an object and v.tosource() throws an except
ion.
PRIVATE_TO_JSVAL
syntax jsval private_to_jsval(void *ptr); void * jsval_to_private(jsval v); // obsoleted since jsapi 32 descript
ion with private_to_jsval(), an applicat
ion can store a private data pointer, p, as a jsval.
... the private data pointer can point to applicat
ion-defined memory of any type, but the pointer must be two-byte-aligned (that is, (int) p must be even).
... private data is managed entirely by the applicat
ion.
...it is the applicat
ion's responsibility to determine when it is safe to dereference a private data pointer.
JSDBGAPI
breakpoints js_settrap js_gettrapopcode js_cleartrap js_clearscripttraps js_clearalltraps js_handletrap js_setinterrupt js_clearinterrupt watchpoints js_setwatchpoint js_clearwatchpoint js_clearwatchpointsforobject js_clearallwatchpoints inspecting the stack js_pctolinenumber js_linenumbertopc js_getfunct
ionscript js_getfunct
ionnative js_getfunct
ionfastnative js_getscriptprincipals typedef jsstackframe js_frameiterator js_getframescript js_getframepc js_getscriptedcaller js_stackframeprincipals js_evalframeprincipals js_getframeannotat
ion js_setframeannotat
ion js_getframeprincipalarray js_isnativeframe js_getframeobject js_getframescopechain js_getframecallobject js_getframeth...
...is js_getframefunct
ion js_getframefunct
ionobject js_isconstructorframe js_isdebuggerframe js_getframereturnvalue js_setframereturnvalue js_getframecalleeobject js_getscriptfilename js_getscriptbaselinenumber js_getscriptlineextent js_getscriptvers
ion js_gettopscriptfilenameflags js_getscriptfilenameflags js_flagscriptfilenameprefix jsfilename_null jsfilename_system jsfilename_protected evaluating debug code js_evaluateinstackframe examining object properties typedef jspropertydesc jspd_enumerate jspd_readonly jspd_permanent jspd_alias jspd_argument jspd_variable jspd_except
ion jspd_error typedef jspropertydescarray js_propertyiterator js_getpropertydesc js_getpropertydescarray js_putpropertydescarray hooks js_setdebuggerhandler ...
...js_setsourcehandler js_setexecutehook js_setcallhook js_setobjecthook js_setthrowhook js_setdebugerrorhook js_setnewscripthook js_setdestroyscripthook js_getglobaldebughooks js_setcontextdebughooks memory usage js_getobjecttotalsize js_getfunct
iontotalsize js_getscripttotalsize system objects js_issystemobject js_newsystemobject profiling these funct
ions can be used to profile a spidermonkey applicat
ion using the mac profiler, shark.
... js_connectshark js_disconnectshark js_startchudremote js_stopchudremote the following jsnative funct
ions can be used to expose the above four apis to scripts.
SpiderMonkey releases
our continuous integrat
ion system does produce a tarball that is built into a binary that runs our smoke tests, but we do not maintain it nor actively test its suitability for general embedding.
... we have per
iodically created "releases", but they are best-effort and incomplete.
...we are very limited in our ability to support older vers
ions, including those labeled as "releases" on this page.
... the easiest way to fetch the vers
ion corresponding to the current firefox release is to visit the treeherder page for the release repository and click on the first sm(pkg) link you see.
TPS Tab Lists
title: the title of the tab, opt
ional.
... if specified, only used during verify act
ions.
...required for verify act
ions.
... for example: var tabs1 = [ { uri: "http://hg.mozilla.org/automat
ion/crossweave/raw-file/2d9aca9585b6/pages/page1.html", title: "crossweave test page 1", profile: "profile1" }, { uri: "data:text/html,<html><head><title>hello</title></head><body>hello</body></html>", title: "hello", profile: "profile1" } ]; tab lists and phase act
ions tabs cannot be modified or deleted, only added or verified with the following funct
ions: tabs.add - opens the specified tabs in the browser window.
The Rust programming language
rust is a new open-source systems programming language created by mozilla and a community of volunteers, designed to help developers create fast, secure applicat
ions which take full advantage of the powerful features of modern multi-core processors.
... it prevents segmentat
ion faults and guarantees thread safety, all with an easy-to-learn syntax.
... in addit
ion, rust offers zero-cost abstract
ions, move semantics, guaranteed memory safety, threads with no data races, trait-based generics, pattern matching, type inference, and efficient c bindings, with a minimum runtime size.
... rust and the future of systems programming unlocking the power of parallelism with rust rust for web developers safe systems programming with rust growing the rust community putting rust into product
ion at mozilla ...
places.sqlite Database Troubleshooting
this article describes troubleshooting act
ions to deal with a broken places.sqlite database.
... sqlite> .clone places.sqlite sqlite> pragma user_vers
ion; note the vers
ion number returned by the last pragma query.
... let's fix the schema vers
ion.
... nn must be replaced with the number we had noted prev
iously: sqlite> pragma user_vers
ion = nn; let's update the page_size value: sqlite> pragma journal_mode = truncate; sqlite> pragma page_size = 32768; sqlite> vacuum; sqlite> pragma journal_mode = wal; sqlite> .exit copy the new places.sqlite to the profile folder, overwriting the existing one.
Binary compatibility
if mozilla decides to upgrade to a compiler that does not have the same abi as the current vers
ion, any built component may fail.
...if you build a component and it works fine in vers
ion 1.0 of mozilla.
...for more informat
ion on issues of componentizat
ion and binary compatibility, see http://mozilla.org/projects/xpcom/gl...ent_reuse.html .
... comments and quest
ions should be directed to the newsgroup, mozilla.dev.tech.xpcom, or the mailing list, mozilla-xpcom@mozilla.org.
XPCOM Glue without mozalloc
starting with xulrunner 2.0, the frozen linkage dependent glue (xpcomglue_s.lib on windows, libxpcomglue_s.a on linux and mac) is dependent on the new infallible memory allocat
ion routines (mozalloc).
... since these routines didn't exist pr
ior to xulrunner 2.0, xpcom components that link against the frozen linkage dependent glue will not be compatible with xulrunner applicat
ions pr
ior to 2.0.
... the solut
ion is to link against xpcomglue_s_nomozalloc instead (xpcomglue_s_nomozalloc.lib on windows, libxpcomglue_s_nomozalloc.a on linux and mac).
... resulting xpcom components will no longer have a dependency on mozalloc, and will thus be compatible with xulrunner applicat
ions pr
ior to 2.0 as well.
Making cross-thread calls using runnables
in the mozilla platform, most activities such as layout, dom operat
ions, content javascript, and chrome javascript run on the main thread.
...each runnable represents a task which can then be dispatched to another thread for execut
ion.
...for example, let's say we have a funct
ion, calculatepi(int digits), which will calculate π to an arbitrary number of digits: void calculatepi(int digits, nscstring& result); // this is synchronous this can take a while, so we don't want to run this on the main thread.
...so we declare an asynchronous vers
ion of the same funct
ion: typedef void (*picallback)(const nscstring& result); // callback funct
ion void calculatepiasynchronously(int digits, picallback callback); creating a runnable nsrunnable is a helper class: it already implements threadsafe refcounting, so all you need to do is override the run() funct
ion.
Components.lastResult
introduct
ion generally, components.lastresult is only useful for testing the result of xpcom methods that can return interesting 'success' codes.
... this is because failure result codes get converted by xpconnect into except
ions that are thrown into the calling javascript method.
...} catch (e) { // the call threw an except
ion or a native component returned // a failure code!
... if (e instanceof components.interfaces.nsixpcexcept
ion) { // we might do something interesting here with the except
ion object var rv = e.result; } else { // if we don't know how to handle it then rethrow throw e; } } ...
Components.utils.unload
this can be particularly handy with restartless (boostrapped) extens
ions, so that you can unload an old vers
ion of a code module when a new vers
ion of your add-on is installed.
...you should not unload modules that are part of the applicat
ion (anything under resource://gre/ or resource:/// or resource://app/) as these may be in use by other extens
ions and the applicat
ion.
... only unload modules you include as part of your extens
ion.
...see bug 769253 see also bug 481603 the documentat
ion in xpccomponents.idl the tests in js/xpconnect/tests/unit/ ...
Profiling XPCShell
introduct
ion sometimes, you might want to get a performance profile of a certain piece of javascript (like an xpcom module), to see which part takes the most time.
...to use it, you need to enable it in your mozconfig: ac_add_opt
ions --enable-xpctools now you can profile an entire script by setting the environment variable <tt>mozilla_js_profiler_output</tt> to a filename where you want the output file.
...then, the next lines shows the amount of time spend in the funct
ions in that file.
... the line consists of: the compile count of the funct
ion; the call count of the funct
ion; the funct
ions name; the starting line number; the ending line number; the funct
ion's size; the amount of time (in milliseconds) the fastest call took; the time of the slowest call; the average time spend; the total time; the time spend in the funct
ion itself is given (that is the total time excluding the time spend in funct
ions called from this funct
ion).
NS_NewLocalFile
« xpcom api reference summary the ns_newlocalfile funct
ion creates an instance of nsilocalfile that provides a platform independent representat
ion of a file path.
... return values the ns_newlocalfile funct
ion returns ns_ok if successful.
... example code // create a local file that references c:\foo.txt nsresult rv; nscomptr<nsilocalfile> file; rv = ns_newlocalfile(nsembedstring(l"c:\\foo.txt"), pr_false, getter_addrefs(file)); if (ns_failed(rv)) return rv; note: gcc requires the -fshort-wchar opt
ion to compile this example since prunichar is an unsigned short.
... history this funct
ion was finalized for mozilla 1.0.
NS_Realloc
this pointer must have been prev
iously allocated by the xpcom memory manager, or this parameter may be null in which case this funct
ion behaves like ns_alloc.
... return values this funct
ion returns a pointer to the allocated block of memory, which is suitably aligned for any kind of variable, or null if the allocat
ion failed.
... remarks this funct
ion provides a convenient way to access the xpcom memory manager.
... history this funct
ion was finalized for mozilla 1.8.
nsresult
« xpcom api reference the nsresult data type is a strongly-typed enum used to represent a value returned by an xpcom funct
ion; these are typically error or status codes.
... note: on compilers that do not support strongly-typed enums (that is, compilers that don't support this feature of c++11), it falls back to being an unsigned 32-bit integer, as in past vers
ions of gecko.
... note: pr
ior to gecko 19.0, nsresult was not strongly typed.
... as a result, it was possible for code to misuse it, such as returning an nsresult value from a funct
ion whose signature indicates it returns a boolean.
NS ConvertASCIItoUTF16 external
class declarat
ion method overview constructors get operator= adopt beginreading endreading charat operator[] first beginwriting endwriting setlength length isempty setisvoid isvoid assign assignliteral replace append appendliteral operator+= insert cut truncate stripchars stripwhitespace trim defaultcomparator compare equals operator< operator<= operator== operator>= operator> operator!= equalsliteral lowercaseequalsliteral find ...
...char) - source parameters prunichar achar adopt void adopt(const prunichar*, pruint32) - source parameters prunichar* adata pruint32 alength beginreading pruint32 beginreading(const prunichar**, const prunichar**) const - source returns the length, beginning, and end of a string in one operat
ion.
...rce parameters pruint32 apos operator[] prunichar operator[](pruint32) const - source parameters pruint32 apos first prunichar first() const - source beginwriting pruint32 beginwriting(prunichar**, prunichar**, pruint32) - source get the length, begin writing, and opt
ionally set the length of a string all in one operat
ion.
... parameters prunichar achar appendint void appendint(int, print32) - source append a string representat
ion of a number.
NS ConvertUTF16toUTF8 external
class declarat
ion method overview constructors get operator= adopt beginreading endreading charat operator[] first beginwriting endwriting setlength length isempty setisvoid isvoid assign assignliteral replace append appendliteral operator+= insert cut truncate stripchars stripwhitespace trim defaultcomparator compare equals operator< operator<= operator== operator>= operator> operator!= equalsliteral find rfind findchar ...
... nsacstring& operator=(char) - source parameters char achar adopt void adopt(const char*, pruint32) - source parameters char* adata pruint32 alength beginreading pruint32 beginreading(const char**, const char**) const - source returns the length, beginning, and end of a string in one operat
ion.
...ruint32) const - source parameters pruint32 apos operator[] char operator[](pruint32) const - source parameters pruint32 apos first char first() const - source beginwriting pruint32 beginwriting(char**, char**, pruint32) - source get the length, begin writing, and opt
ionally set the length of a string all in one operat
ion.
... parameters char achar appendint void appendint(int, print32) - source append a string representat
ion of a number.
NS ConvertUTF8toUTF16 external
class declarat
ion method overview constructors get operator= adopt beginreading endreading charat operator[] first beginwriting endwriting setlength length isempty setisvoid isvoid assign assignliteral replace append appendliteral operator+= insert cut truncate stripchars stripwhitespace trim defaultcomparator compare equals operator< operator<= operator== operator>= operator> operator!= equalsliteral lowercaseequalsliteral find ...
...char) - source parameters prunichar achar adopt void adopt(const prunichar*, pruint32) - source parameters prunichar* adata pruint32 alength beginreading pruint32 beginreading(const prunichar**, const prunichar**) const - source returns the length, beginning, and end of a string in one operat
ion.
...rce parameters pruint32 apos operator[] prunichar operator[](pruint32) const - source parameters pruint32 apos first prunichar first() const - source beginwriting pruint32 beginwriting(prunichar**, prunichar**, pruint32) - source get the length, begin writing, and opt
ionally set the length of a string all in one operat
ion.
... parameters prunichar achar appendint void appendint(int, print32) - source append a string representat
ion of a number.
NS LossyConvertUTF16toASCII external
class declarat
ion method overview constructors get operator= adopt beginreading endreading charat operator[] first beginwriting endwriting setlength length isempty setisvoid isvoid assign assignliteral replace append appendliteral operator+= insert cut truncate stripchars stripwhitespace trim defaultcomparator compare equals operator< operator<= operator== operator>= operator> operator!= equalsliteral find rfind findchar ...
... nsacstring& operator=(char) - source parameters char achar adopt void adopt(const char*, pruint32) - source parameters char* adata pruint32 alength beginreading pruint32 beginreading(const char**, const char**) const - source returns the length, beginning, and end of a string in one operat
ion.
...ruint32) const - source parameters pruint32 apos operator[] char operator[](pruint32) const - source parameters pruint32 apos first char first() const - source beginwriting pruint32 beginwriting(char**, char**, pruint32) - source get the length, begin writing, and opt
ionally set the length of a string all in one operat
ion.
... parameters char achar appendint void appendint(int, print32) - source append a string representat
ion of a number.
PromiseFlatCString (External)
class declarat
ion method overview get operator= adopt beginreading endreading charat operator[] first beginwriting endwriting setlength length isempty setisvoid isvoid assign assignliteral replace append appendliteral operator+= insert cut truncate stripchars stripwhitespace trim defaultcomparator compare equals operator< operator<= operator== operator>= operator> operator!= equalsliteral find rfind findchar rfindchar ...
... nsacstring& operator=(char) - source parameters char achar adopt void adopt(const char*, pruint32) - source parameters char* adata pruint32 alength beginreading pruint32 beginreading(const char**, const char**) const - source returns the length, beginning, and end of a string in one operat
ion.
...ruint32) const - source parameters pruint32 apos operator[] char operator[](pruint32) const - source parameters pruint32 apos first char first() const - source beginwriting pruint32 beginwriting(char**, char**, pruint32) - source get the length, begin writing, and opt
ionally set the length of a string all in one operat
ion.
... parameters char achar appendint void appendint(int, print32) - source append a string representat
ion of a number.
PromiseFlatString (External)
class declarat
ion method overview get operator= adopt beginreading endreading charat operator[] first beginwriting endwriting setlength length isempty setisvoid isvoid assign assignliteral replace append appendliteral operator+= insert cut truncate stripchars stripwhitespace trim defaultcomparator compare equals operator< operator<= operator== operator>= operator> operator!= equalsliteral lowercaseequalsliteral find rfind ...
...char) - source parameters prunichar achar adopt void adopt(const prunichar*, pruint32) - source parameters prunichar* adata pruint32 alength beginreading pruint32 beginreading(const prunichar**, const prunichar**) const - source returns the length, beginning, and end of a string in one operat
ion.
...rce parameters pruint32 apos operator[] prunichar operator[](pruint32) const - source parameters pruint32 apos first prunichar first() const - source beginwriting pruint32 beginwriting(prunichar**, prunichar**, pruint32) - source get the length, begin writing, and opt
ionally set the length of a string all in one operat
ion.
... parameters prunichar achar appendint void appendint(int, print32) - source append a string representat
ion of a number.
nsACString (External)
class declarat
ion <map id="classes" name="classes"><area alt="" coords="1005,6,1096,54" href="http://developer.mozilla.org/en/nsacstring_(external)" shape="rect" title="nsacstring_(external)"> <area alt="" coords="980,102,1121,150" href="http://developer.mozilla.org/en/nscstringcontainer_(external)" shape="rect" title="nscstringcontainer_(external)"> <area alt="" coords="571,198,707,246" href="http://developer.mozilla.org/en/nscstring_external" shape="rect" title="nscstring_external"> <area alt="" coords="731,198,955,246" href="http://developer.mozilla.org/en/nsdependentcsubstring_external" shape="rect" title="nsdependentcsubstring_external"> <area alt="" coords="979,198,1123,246" href="http://developer.mozilla.org/en/promiseflatcstring_(external)" shape="rect" title="promiseflatcstr...
...methods beginreading pruint32 beginreading(const char**, const char**) const - source returns the length, beginning, and end of a string in one operat
ion.
...ruint32) const - source parameters pruint32 apos operator[] char operator[](pruint32) const - source parameters pruint32 apos first char first() const - source beginwriting pruint32 beginwriting(char**, char**, pruint32) - source get the length, begin writing, and opt
ionally set the length of a string all in one operat
ion.
... parameters char achar appendint void appendint(int, print32) - source append a string representat
ion of a number.
nsAString (External)
class declarat
ion this header provides wrapper classes around the frozen string api which are roughly equivalent to the internal string classes.
...methods beginreading pruint32 beginreading(const prunichar**, const prunichar**) const - source returns the length, beginning, and end of a string in one operat
ion.
...urce endreading prunichar* endreading() const - source charat prunichar charat(pruint32) const - source parameters pruint32 apos operator[] prunichar operator[](pruint32) const - source parameters pruint32 apos first prunichar first() const - source beginwriting pruint32 beginwriting(prunichar**, prunichar**, pruint32) - source get the length, begin writing, and opt
ionally set the length of a string all in one operat
ion.
...parameters prunichar achar appendint void appendint(int, print32) - source append a string representat
ion of a number.
nsAutoString (External)
class declarat
ion method overview get operator= adopt beginreading endreading charat operator[] first beginwriting endwriting setlength length isempty setisvoid isvoid assign assignliteral replace append appendliteral operator+= insert cut truncate stripchars stripwhitespace trim defaultcomparator compare equals operator< operator<= operator== operator>= operator> operator!= equalsliteral lowercaseequalsliteral find rfind ...
...char) - source parameters prunichar achar adopt void adopt(const prunichar*, pruint32) - source parameters prunichar* adata pruint32 alength beginreading pruint32 beginreading(const prunichar**, const prunichar**) const - source returns the length, beginning, and end of a string in one operat
ion.
...rce parameters pruint32 apos operator[] prunichar operator[](pruint32) const - source parameters pruint32 apos first prunichar first() const - source beginwriting pruint32 beginwriting(prunichar**, prunichar**, pruint32) - source get the length, begin writing, and opt
ionally set the length of a string all in one operat
ion.
... parameters prunichar achar appendint void appendint(int, print32) - source append a string representat
ion of a number.
nsCAutoString (External)
class declarat
ion method overview get operator= adopt beginreading endreading charat operator[] first beginwriting endwriting setlength length isempty setisvoid isvoid assign assignliteral replace append appendliteral operator+= insert cut truncate stripchars stripwhitespace trim defaultcomparator compare equals operator< operator<= operator== operator>= operator> operator!= equalsliteral find rfind findchar rfindchar ...
... nsacstring& operator=(char) - source parameters char achar adopt void adopt(const char*, pruint32) - source parameters char* adata pruint32 alength beginreading pruint32 beginreading(const char**, const char**) const - source returns the length, beginning, and end of a string in one operat
ion.
...ruint32) const - source parameters pruint32 apos operator[] char operator[](pruint32) const - source parameters pruint32 apos first char first() const - source beginwriting pruint32 beginwriting(char**, char**, pruint32) - source get the length, begin writing, and opt
ionally set the length of a string all in one operat
ion.
... parameters char achar appendint void appendint(int, print32) - source append a string representat
ion of a number.
nsCStringContainer (External)
class declarat
ion method overview beginreading endreading charat operator[] first beginwriting endwriting setlength length isempty setisvoid isvoid assign assignliteral operator= replace append appendliteral operator+= insert cut truncate stripchars stripwhitespace trim defaultcomparator compare(const char*, print32 (*) compare(const nsacstring&, print32 (*) equals(const char*, print32 (*) equals(const nsacstring&, print32 (*) operator< operator<= operator== operator>= opera...
...methods beginreading pruint32 beginreading(const char**, const char**) const - source returns the length, beginning, and end of a string in one operat
ion.
...ruint32) const - source parameters pruint32 apos operator[] char operator[](pruint32) const - source parameters pruint32 apos first char first() const - source beginwriting pruint32 beginwriting(char**, char**, pruint32) - source get the length, begin writing, and opt
ionally set the length of a string all in one operat
ion.
... parameters char achar appendint void appendint(int, print32) - source append a string representat
ion of a number.
nsCString external
class declarat
ion method overview constructors get operator= adopt beginreading endreading charat operator[] first beginwriting endwriting setlength length isempty setisvoid isvoid assign assignliteral replace append appendliteral operator+= insert cut truncate stripchars stripwhitespace trim defaultcomparator compare equals operator< operator<= operator== operator>= operator> operator!= equalsliteral find rfind findchar ...
... nsacstring& operator=(char) - source parameters char achar adopt void adopt(const char*, pruint32) - source parameters char* adata pruint32 alength beginreading pruint32 beginreading(const char**, const char**) const - source returns the length, beginning, and end of a string in one operat
ion.
...ruint32) const - source parameters pruint32 apos operator[] char operator[](pruint32) const - source parameters pruint32 apos first char first() const - source beginwriting pruint32 beginwriting(char**, char**, pruint32) - source get the length, begin writing, and opt
ionally set the length of a string all in one operat
ion.
... parameters char achar appendint void appendint(int, print32) - source append a string representat
ion of a number.
nsDependentCString external
class declarat
ion method overview constructors rebind get operator= adopt beginreading endreading charat operator[] first beginwriting endwriting setlength length isempty setisvoid isvoid assign assignliteral replace append appendliteral operator+= insert cut truncate stripchars stripwhitespace trim defaultcomparator compare equals operator< operator<= operator== operator>= operator> operator!= equalsliteral find rfind ...
... nsacstring& operator=(char) - source parameters char achar adopt void adopt(const char*, pruint32) - source parameters char* adata pruint32 alength beginreading pruint32 beginreading(const char**, const char**) const - source returns the length, beginning, and end of a string in one operat
ion.
...ruint32) const - source parameters pruint32 apos operator[] char operator[](pruint32) const - source parameters pruint32 apos first char first() const - source beginwriting pruint32 beginwriting(char**, char**, pruint32) - source get the length, begin writing, and opt
ionally set the length of a string all in one operat
ion.
... parameters char achar appendint void appendint(int, print32) - source append a string representat
ion of a number.
nsDependentCSubstring external
class declarat
ion method overview constructors rebind beginreading endreading charat operator[] first beginwriting endwriting setlength length isempty setisvoid isvoid assign assignliteral operator= replace append appendliteral operator+= insert cut truncate stripchars stripwhitespace trim defaultcomparator compare equals operator< operator<= operator== operator>= operator> operator!= equalsliteral find rfind findchar rfi...
...ers nsacstring& astr pruint32 astartpos pruint32 alength rebind void rebind(const char*, pruint32) - source parameters char* astart pruint32 alength beginreading pruint32 beginreading(const char**, const char**) const - source returns the length, beginning, and end of a string in one operat
ion.
...ruint32) const - source parameters pruint32 apos operator[] char operator[](pruint32) const - source parameters pruint32 apos first char first() const - source beginwriting pruint32 beginwriting(char**, char**, pruint32) - source get the length, begin writing, and opt
ionally set the length of a string all in one operat
ion.
... parameters char achar appendint void appendint(int, print32) - source append a string representat
ion of a number.
nsDependentString external
class declarat
ion dependent strings method overview constructors rebind get operator= adopt beginreading endreading charat operator[] first beginwriting endwriting setlength length isempty setisvoid isvoid assign assignliteral replace append appendliteral operator+= insert cut truncate stripchars stripwhitespace trim defaultcomparator compare equals operator< operator<= operator== operator>= operator> operator!= equalsliteral lowe...
...char) - source parameters prunichar achar adopt void adopt(const prunichar*, pruint32) - source parameters prunichar* adata pruint32 alength beginreading pruint32 beginreading(const prunichar**, const prunichar**) const - source returns the length, beginning, and end of a string in one operat
ion.
...rce parameters pruint32 apos operator[] prunichar operator[](pruint32) const - source parameters pruint32 apos first prunichar first() const - source beginwriting pruint32 beginwriting(prunichar**, prunichar**, pruint32) - source get the length, begin writing, and opt
ionally set the length of a string all in one operat
ion.
... parameters prunichar achar appendint void appendint(int, print32) - source append a string representat
ion of a number.
nsDependentSubstring external
class declarat
ion substrings method overview constructors rebind beginreading endreading charat operator[] first beginwriting endwriting setlength length isempty setisvoid isvoid assign assignliteral operator= replace append appendliteral operator+= insert cut truncate stripchars stripwhitespace trim defaultcomparator compare(const prunichar*, print32 (*) compare(const nsastring&, print32 (*) equals(const prunichar*, print32 (*) equals(const nsastring&, print32 (*) operator< operator...
...string astr pruint32 astartpos pruint32 alength rebind void rebind(const prunichar*, pruint32) - source parameters prunichar astart pruint32 alength beginreading pruint32 beginreading(const prunichar**, const prunichar**) const - source returns the length, beginning, and end of a string in one operat
ion.
...rce parameters pruint32 apos operator[] prunichar operator[](pruint32) const - source parameters pruint32 apos first prunichar first() const - source beginwriting pruint32 beginwriting(prunichar**, prunichar**, pruint32) - source get the length, begin writing, and opt
ionally set the length of a string all in one operat
ion.
... parameters prunichar achar appendint void appendint(int, print32) - source append a string representat
ion of a number.
nsLiteralCString (External)
class declarat
ion method overview rebind get operator= adopt beginreading endreading charat operator[] first beginwriting endwriting setlength length isempty setisvoid isvoid assign assignliteral replace append appendliteral operator+= insert cut truncate stripchars stripwhitespace trim defaultcomparator compare equals operator< operator<= operator== operator>= operator> operator!= equalsliteral find rfind findchar ...
... nsacstring& operator=(char) - source parameters char achar adopt void adopt(const char*, pruint32) - source parameters char* adata pruint32 alength beginreading pruint32 beginreading(const char**, const char**) const - source returns the length, beginning, and end of a string in one operat
ion.
...ruint32) const - source parameters pruint32 apos operator[] char operator[](pruint32) const - source parameters pruint32 apos first char first() const - source beginwriting pruint32 beginwriting(char**, char**, pruint32) - source get the length, begin writing, and opt
ionally set the length of a string all in one operat
ion.
... parameters char achar appendint void appendint(int, print32) - source append a string representat
ion of a number.
nsLiteralString (External)
class declarat
ion method overview rebind get operator= adopt beginreading endreading charat operator[] first beginwriting endwriting setlength length isempty setisvoid isvoid assign assignliteral replace append appendliteral operator+= insert cut truncate stripchars stripwhitespace trim defaultcomparator compare equals operator< operator<= operator== operator>= operator> operator!= equalsliteral find rfind findchar ...
... nsacstring& operator=(char) - source parameters char achar adopt void adopt(const char*, pruint32) - source parameters char* adata pruint32 alength beginreading pruint32 beginreading(const char**, const char**) const - source returns the length, beginning, and end of a string in one operat
ion.
...ruint32) const - source parameters pruint32 apos operator[] char operator[](pruint32) const - source parameters pruint32 apos first char first() const - source beginwriting pruint32 beginwriting(char**, char**, pruint32) - source get the length, begin writing, and opt
ionally set the length of a string all in one operat
ion.
... parameters char achar appendint void appendint(int, print32) - source append a string representat
ion of a number.
nsStringContainer (External)
class declarat
ion method overview beginreading endreading charat operator[] first beginwriting endwriting setlength length isempty setisvoid isvoid assign assignliteral operator= replace append appendliteral operator+= insert cut truncate stripchars stripwhitespace trim defaultcomparator compare equals operator< operator<= operator== operator>= operator> operator!= equalsliteral lowercaseequalsliteral find rfind findchar rfindchar...
...methods beginreading pruint32 beginreading(const prunichar**, const prunichar**) const - source returns the length, beginning, and end of a string in one operat
ion.
...rce parameters pruint32 apos operator[] prunichar operator[](pruint32) const - source parameters pruint32 apos first prunichar first() const - source beginwriting pruint32 beginwriting(prunichar**, prunichar**, pruint32) - source get the length, begin writing, and opt
ionally set the length of a string all in one operat
ion.
... parameters prunichar achar appendint void appendint(int, print32) - source append a string representat
ion of a number.
nsString external
class declarat
ion basic strings method overview constructors get operator= adopt beginreading endreading charat operator[] first beginwriting endwriting setlength length isempty setisvoid isvoid assign assignliteral replace append appendliteral operator+= insert cut truncate stripchars stripwhitespace trim defaultcomparator compare equals operator< operator<= operator== operator>= operator> operator!= equalsliteral lowercaseequalsliteral ...
...char) - source parameters prunichar achar adopt void adopt(const prunichar*, pruint32) - source parameters prunichar* adata pruint32 alength beginreading pruint32 beginreading(const prunichar**, const prunichar**) const - source returns the length, beginning, and end of a string in one operat
ion.
...rce parameters pruint32 apos operator[] prunichar operator[](pruint32) const - source parameters pruint32 apos first prunichar first() const - source beginwriting pruint32 beginwriting(prunichar**, prunichar**, pruint32) - source get the length, begin writing, and opt
ionally set the length of a string all in one operat
ion.
... parameters prunichar achar appendint void appendint(int, print32) - source append a string representat
ion of a number.
nsSupportsWeakReference
see weak reference for detailed descript
ion of weak references.
...}; remarks in addit
ion to inheriting from this class, you will need to ensure that your nsisupports::queryinterface implementat
ion exposes nsisupportsweakreference as a supported interface.
... to use this class, you must link your component or applicat
ion against the xpcom glue library.
... example code // supporting weak references to a hypothetical implementat
ion // of the nsifoo interface...
IAccessibleEditableText
1.0 66 introduced gecko 1.9 inherits from: iunknown last changed in gecko 1.9 (firefox 3) this interface is typically used in conjunct
ion with the iaccessibletext interface and complements that interface with the addit
ional capability of clipboard operat
ions.
...refer to the @ref _specialoffsets "special offsets for use in the iaccessibletext and iaccessibleeditabletext methods" for informat
ion about a special offset constant that can be used in iaccessibleeditabletext methods.
...inserttext() inserts text at the specified posit
ion.
...attributes set of attributes that replaces the old list of attributes of the specified text port
ion.
mozIVisitInfo
toolkit/components/places/moziasynchistory.idlscriptable this interface provides addit
ional info for a visit.
... 1.0 66 introduced gecko 2.0 inherits from: nsisupports last changed in gecko 2.0 (firefox 4 / thunderbird 3.3 / seamonkey 2.1) attributes attribute type descript
ion referreruri nsiuri read only: the referring uri of this visit.
... sess
ionid long read only: the sess
ionid of this visit.
... transit
iontype long read only: the transit
ion type used to get to this visit.
GetAccessibleRelated
« nsiaccessible page summary this method returns an accessible related to this one by the given relat
ion type.
... nsiaccessible getaccessiblerelated( in unsigned long arelat
iontype ); parameters arelat
iontype[in] the relat
ion type between the accessible (see constants listed in relat
ions documentat
ion).
... return value returns an accessible which is related to the one provided by the given relat
ion type.
... except
ions thrown ns_error_failure indicates that the accessible is unattached from the accessible tree.ns_error_not_implemented indicates that the given relat
ion type is unsupported see also nsiaccessible.getrelat
ions() nsiaccessible.relat
ionscount nsiaccessible.getrelat
ion() ...
nsIDocumentLoader
it is also responsible for sending nsiwebprogresslistener notificat
ions.
...documentloader = components.classes["@mozilla.org/docloaderservice;1"] .createinstance(components.interfaces.nsidocumentloader); method overview void clearparentdocloader(); obsolete since gecko 1.8 void createdocumentloader(out nsidocumentloader aninstance); obsolete since gecko 1.8 void destroy(); obsolete since gecko 1.8 void fireonlocat
ionchange(in nsiwebprogress awebprogress, in nsirequest arequest, in nsiuri auri); obsolete since gecko 1.8 void fireonstatuschange(in nsiwebprogress awebprogress, in nsirequest arequest, in nsresult astatus, in wstring amessage); obsolete since gecko 1.8 void getcontentviewercontainer(in nsisupports adocumentid, out nsicontentviewercontainer aresult); native code only!
... obsolete since gecko 1.8 nsiloadgroup getloadgroup(); obsolete since gecko 1.8 boolean isbusy(); obsolete since gecko 1.8 void stop(); attributes attribute type descript
ion container nsisupports read only.
... fireonlocat
ionchange() obsolete since gecko 1.8 (firefox 1.5 / thunderbird 1.5 / seamonkey 1.0) void fireonlocat
ionchange( in nsiwebprogress awebprogress, in nsirequest arequest, in nsiuri auri ); parameters awebprogress arequest auri fireonstatuschange() obsolete since gecko 1.8 (firefox 1.5 / thunderbird 1.5 / seamonkey 1.0) vo...
nsIDownloadHistory
1.0 66 introduced gecko 1.9 inherits from: nsisupports last changed in gecko 1.9 (firefox 3) method overview void adddownload(in nsiuri asource, [opt
ional] in nsiuri areferrer, [opt
ional] in prtime astarttime); methods adddownload() adds a download to history.
...void adddownload( in nsiuri asource, in nsiuri areferrer, opt
ional in prtime astarttime opt
ional ); parameters asource the source of the download we are adding to history.
...areferrer opt
ional the referrer of source uri.
... astarttime opt
ional the time the download was started.
nsIEventListenerInfo
1.0 66 introduced gecko 1.9.2 inherits from: nsisupports last changed in gecko 1.9.2 (firefox 3.6 / thunderbird 3.1 / fennec 1.0) method overview nsisupports getdebugobject(); astring tosource(); attributes attribute type descript
ion allowsuntrusted boolean indicates whether or not the event listener allows untrusted events.
...this is the method you should use if you want to get access to the actual listener, but the debugger service must be already active, which significantly slows down script execut
ion.
...this approach is necessary because event listeners added with addeventlistener won't necessarily be nsieventlisteners; the dom code will fix up ordinary javascript funct
ions to act as listeners.
...return value returns a string describing the event listener, or null if serializat
ion isn't possible (for example, if the listener was written in c++).
nsIFaviconDataCallback
1.0 66 introduced gecko 2.0 inherits from: nsisupports last changed in gecko 2.0 (firefox 4 / thunderbird 3.3 / seamonkey 2.1) method overview void oncomplete(in nsiuri auri, in unsigned long adatalen, [const,array,size_is(adatalen)] in octet adata, in autf8string amimetype); methods oncomplete() called when the required favicon's informat
ion is available.
... check the method documentat
ion to ensure that.
... the caller will receive the most informat
ion we can gather on the icon, but it's not guaranteed that all of them will be set.
...it's up to the caller to check adatalen > 0 before using any data-related informat
ion like mime-type or data itself.
nsIFeedProgressListener
programs using the feed content access api do not have to implement any of these callbacks; they are opt
ional, but allow you to provide feedback during the parsing process.
... void handleentry( in nsifeedentry entry, in nsifeedresult result ); parameters entry pointer to an nsifeedentry containing informat
ion about the entry that was just processed.
... result pointer to an nsifeedresult containing the current informat
ion about the feed being processed.
... void reporterror( in astring errortext, in long linenumber, in boolean bozo ); parameters errortext a short descript
ion of the error.
nsIFeedTextConstruct
some extens
ion elements also include "type" parameters, and this interface could be used to represent those as well.
...var
ious 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 descript
ion base nsiuri if the text construct contains html or xhtml, relative references in the content should be resolved against this base uri.
... return value the plain text vers
ion of the text construct's contents.
nsIFileProtocolHandler
warning: this restrict
ion may not be enforced at runtime!
...warning: this restrict
ion may not be enforced at runtime!
...note: under some platforms this is a lossy convers
ion.
...except
ions thrown ns_error_not_available the os does not support such files.
nsIHttpActivityDistributor
1 as a service: var httpactivitydistributor = components.classes["@mozilla.org/network/http-activity-distributor;1"] .getservice(components.interfaces.nsihttpactivitydistributor); method overview void addobserver(in nsihttpactivityobserver aobserver); void removeobserver(in nsihttpactivityobserver aobserver); methods addobserver() begins delivery of notificat
ions of http transport activity.
... void addobserver( in nsihttpactivityobserver aobserver ); parameters aobserver the nsihttpactivityobserver that should receive notificat
ions of http transport activity; this object's nsihttpactivityobserver.observeactivity() method will be called each time activity occurs.
... removeobserver() stops delivery of notificat
ions of http transport activity.
... void removeobserver( in nsihttpactivityobserver aobserver ); parameters aobserver the nsihttpactivityobserver that should no longer receive notificat
ions of http transport activity.
nsILoginManagerCrypto
1.0 66 introduced gecko 2.0 inherits from: nsisupports last changed in gecko 2.0 (firefox 4 / thunderbird 3.3 / seamonkey 2.1) method overview astring decrypt(in astring ciphertext); astring encrypt(in astring plaintext); attributes attribute type descript
ion isloggedin boolean current login state of the token used for encrypt
ion.
... if the user is not logged in, performing a crypto operat
ion will result in a master password prompt.
...note: the current implement
ion of this inferface simply uses nss/psm's "secret decoder ring" service.
... it is not recommended for general purpose encrypt
ion/decrypt
ion.
nsIMessageListener
this funct
ion receives a message from one of the three message-sending funct
ions in the message manager framework: broadcastasyncmessage sendasyncmessage sendsyncmessage.
...this is the first argument passed into the message-sending funct
ion.
... data a structured clone of the message payload: the second argument passed into the message-sending funct
ion.
... objects an object whose properties are any cross process object wrappers exposed by the sender as the third argument to the message-sending funct
ion.
nsIMessageSender
see message manager interfaces for more details on the distinct
ion between message senders and message broadcasters.
... methods void sendasyncmessage([opt
ional] in astring messagename, [opt
ional] in jsval obj, [opt
ional] in jsval objects, [opt
ional] in nsiprincipal principal); sendasyncmessage() send messagename and obj to the "other side" of this message manager.
...parameters name type descript
ion messagename string the name of the message.
... opt
ional.
nsIMimeConverter
header, in boolean structured, in string mailcharset, in long fieldnamelen, in long encodedwordsize); string encodemimepartiistr_utf8(in autf8string header, in boolean structured, in string mailcharset, in long fieldnamelen, in long encodedwordsize); string decodemimeheadertocharptr(in string header, in string default_charset, in boolean override_charset, in boolean eatcontinuat
ions); astring decodemimeheader(in string header, in string default_charset, in boolean override_charset, in boolean eatcontinuat
ions); mimeencoderdata *b64encoderinit(in mimeconverteroutputcallback output_fn, in void *closure); mimeencoderdata *qpencoderinit(in mimeconverteroutputcallback output_fn, in void *closure); void encoderdestroy(in mimeencoderdata *data,...
...this should only be used by native code, as xpconnect translat
ion causes it to not work properly.
...thunderbird stored uint32 properties (not a complete list): indexed used for spotlight integrat
ion on osx.
...thunderbird provides a utility funct
ion which performs this for the currently selected message: markcurrentmessageasread().
nsINavHistoryQueryResultNode
1.0 66 introduced gecko 1.8 inherits from: nsinavhistorycontainerresultnode last changed in gecko 2.0 (firefox 4 / thunderbird 3.3 / seamonkey 2.1) note: if you request that places not be expanded in the opt
ions that generated the node, the node will report that it has no children and will never try to populate itself.
... method overview void getqueries([opt
ional] out unsigned long querycount, [retval,array,size_is(querycount)] out nsinavhistoryquery queries); attributes attribute type descript
ion folderitemid long long for both simple folder nodes and simple-folder-query nodes, this is set to the concrete itemid of the folder.
... queryopt
ions nsinavhistoryqueryopt
ions the opt
ions that group the node's children; only valid for result_type_query nodes.
... void getqueries( out unsigned long querycount, opt
ional from gecko 2.0 [retval,array,size_is(querycount)] out nsinavhistoryquery queries ); parameters querycount opt
ional from gecko 2.0 the number of queries in the queries array.
nsIProfile
to get access to the profile manager service: var profile = components.classes["@mozilla.org/profile/manager;1"] .getservice(components.interfaces.nsiprofile); note: this interface was used by seamonkey up through seamonkey 1.1 vers
ions, which were based off gecko 1.8.1.
...g name, in boolean candeletefiles); void getprofilelist(out unsigned long length, [retval, array, size_is(length)] out wstring profilenames); boolean profileexists(in wstring profilename); void renameprofile(in wstring oldname, in wstring newname); void shutdowncurrentprofile(in unsigned long shutdowntype); attributes attribute type descript
ion currentprofile wstring the name of the profile currently in use.
... constants profile shutdown types constant value descript
ion shutdown_persist 0x00000001 when shutting down the profile, save all changes.
... except
ions thrown ns_error_failure a profile already exists with the name newname.
nsISSLSocketControl
netwerk/socket/nsisslsocketcontrol.idlscriptable this interface establishes tls and ssl connect
ions.
... inherits from: nsisupports last changed in gecko 1.9 (firefox 3) method overview void proxystartssl(); void starttls(); attributes attribute type descript
ion forcehandshake boolean obsolete since gecko 1.9 notificat
ioncallbacks nsiinterfacerequestor methods proxystartssl() starts an ssl proxy connect
ion.
...starttls() establishes a starttls connect
ion.
... this is used to encrypt plain-text data communicat
ion.
nsIXULBrowserWindow
see the documentat
ion for xulbrowserwindow for details.
...setjsdefaultstatus() sets the default status according to javascript's vers
ion of the default status.
... setjsstatus() sets the status according to javascript's vers
ion of the status.
... setoverlink() tells the object implementing this funct
ion what link we are currently over.
nsMsgSearchAttrib
defined in comm-central/ mailnews/ base/ search/ public/ nsmsgsearchcore.idl typedef long nsmsgsearchattribvalue; /** * definit
ions of search attribute types.
...ace nsmsgsearchattrib { const nsmsgsearchattribvalue custom = -2; /* a custom term, see nsimsgsearchcustomterm */ const nsmsgsearchattribvalue default = -1; const nsmsgsearchattribvalue subject = 0; /* mail and news */ const nsmsgsearchattribvalue sender = 1; const nsmsgsearchattribvalue body = 2; const nsmsgsearchattribvalue date = 3; const nsmsgsearchattribvalue pr
iority = 4; /* mail only */ const nsmsgsearchattribvalue msgstatus = 5; const nsmsgsearchattribvalue to = 6; const nsmsgsearchattribvalue cc = 7; const nsmsgsearchattribvalue toorcc = 8; const nsmsgsearchattribvalue alladdresses = 9; const nsmsgsearchattribvalue locat
ion = 10; /* result list only */ const nsmsgsearchattribvalue messagekey = 11; /* m...
...essage result elems */ const nsmsgsearchattribvalue ageindays = 12; const nsmsgsearchattribvalue folderinfo = 13; /* for "view thread context" from result */ const nsmsgsearchattribvalue size = 14; const nsmsgsearchattribvalue anytext = 15; const nsmsgsearchattribvalue keywords = 16; // keywords are the internal representat
ion of tags.
... const nsmsgsearchattribvalue name = 17; const nsmsgsearchattribvalue displayname = 18; const nsmsgsearchattribvalue nickname = 19; const nsmsgsearchattribvalue screenname = 20; const nsmsgsearchattribvalue email = 21; const nsmsgsearchattribvalue addit
ionalemail = 22; const nsmsgsearchattribvalue phonenumber = 23; const nsmsgsearchattribvalue workphone = 24; const nsmsgsearchattribvalue homephone = 25; const nsmsgsearchattribvalue fax = 26; const nsmsgsearchattribvalue pager = 27; const nsmsgsearchattribvalue mobile = 28; const nsmsgsearchattribvalue city = 29; const nsmsgsearchattribvalue street = 30; const nsmsgsearchattribvalue title = 31; const nsmsgsearchattribvalue organizat
ion = 32; const nsmsgsear...
NS_CStringAppendData
« xpcom api reference summary the ns_cstringappenddata funct
ion appends data to the existing value of a nsacstring instance.
... return values the ns_cstringappenddata funct
ion returns ns_ok if successful.
... remarks this funct
ion is defined inline as a wrapper around ns_cstringsetdatarange.
... example nscstringcontainer str; ns_cstringcontainerinit(str); ns_cstringsetdata(str, "hello"); ns_cstringappenddata(str, " world"); const char* data; ns_cstringgetdata(str, &data); printf("%s\n", data); // prints out "hello world" ns_cstringcontainerfinish(str); history this funct
ion was frozen for mozilla 1.7.
NS_CStringInsertData
« xpcom api reference summary the ns_cstringinsertdata funct
ion appends data to the existing value of a nsacstring instance.
... return values the ns_cstringinsertdata funct
ion returns ns_ok if successful.
... remarks this funct
ion is defined inline as a wrapper around ns_cstringsetdatarange.
... example code nscstringcontainer str; ns_cstringcontainerinit(str); ns_cstringsetdata(str, "hello"); ns_cstringinsertdata(str, 5, " world"); const char* data; ns_cstringgetdata(str, &data); printf("%s\n", data); // prints out "hello world" ns_cstringcontainerfinish(str); history this funct
ion was frozen for mozilla 1.7.
NS_CStringSetData
« xpcom api reference summary the ns_cstringsetdata funct
ion copies data into the string's internal buffer.
... return values the ns_cstringsetdata funct
ion returns ns_ok if successful.
... example nscstringcontainer str; rv = ns_cstringcontainerinit(str); if (ns_succeeded(rv)) { rv = ns_cstringsetdata(str, "hello world"); if (ns_succeeded(rv)) { // now, pass |str| to some funct
ion expecting a |const nsacstring&| parameter.
... } ns_cstringcontainerfinish(str); } history this funct
ion was frozen for mozilla 1.7.
NS_CStringToUTF16
« xpcom api reference summary the ns_cstringtoutf16 funct
ion converts the value of a nsacstring instance to utf-16 and stores the result in a nsastring instance.
... adest [out] a nsastring instance that will contain the result of the convers
ion.
... return values the ns_cstringtoutf16 funct
ion returns ns_ok if successful.
... example code nsembedcstring str("hello"); nsembedstring ustr; ns_cstringtoutf16(str, ns_cstring_encoding_ascii, ustr); const prunichar *unicharbuf = ustr.get(); history this funct
ion was frozen for mozilla 1.7.
NS_StringAppendData
« xpcom api reference summary the ns_stringappenddata funct
ion appends data to the existing value of a nsastring instance.
... return values the ns_stringappenddata funct
ion returns ns_ok if successful.
... remarks this funct
ion is defined inline as a wrapper around ns_stringsetdatarange note: gcc requires the -fshort-wchar opt
ion to compile this example since prunichar is an unsigned short.
... example code nsstringcontainer str; ns_stringcontainerinit(str); ns_stringsetdata(str, l"hello"); ns_stringappenddata(str, l" world"); const prunichar* data; ns_stringgetdata(str, &data); // data now points to the string: l"hello world" ns_stringcontainerfinish(str); history this funct
ion was frozen for mozilla 1.7.
NS_StringGetData
« xpcom api reference summary the ns_stringgetdata funct
ion gives the caller access to the string's internal buffer.
...aterminated [out] this opt
ional result parameter indicates whether or not adata is null-terminated.
... return values the ns_stringgetdata funct
ion returns the length of adata, measured in storage units (bytes).
... example code pruint32 countchar(const nsastring& str, prunichar c) { const prunichar* data; pruint32 len = ns_stringgetdata(str, &data); pruint32 count = 0; for (pruint32 i = 0; i < len; ++i) { if (data[i] == c) ++count; } return count; } history this funct
ion was frozen for mozilla 1.7.
NS_StringSetData
« xpcom api reference summary the ns_stringsetdata funct
ion copies data into the string's internal buffer.
... return values the ns_stringsetdata funct
ion returns ns_ok if successful.
... example code nsstringcontainer str; rv = ns_stringcontainerinit(str); if (ns_succeeded(rv)) { rv = ns_stringsetdata(str, "hello world"); if (ns_succeeded(rv)) { // now, pass |str| to some funct
ion expecting a |const nsastring&| parameter.
... } ns_stringcontainerfinish(str); } history this funct
ion was frozen for mozilla 1.7.
Status, Recent Changes, and Plans
i'm sorry this sect
ion is in the way for first-time readers.
...i put this sect
ion at the top so that checking for recent changes will be easy.
... plans for nscomptr bug 59212: as soon as we test on more compilers, start recommending already_addrefed as a funct
ion result.
... added an entire sect
ion to the getting started guide on nscomptrs in funct
ion signatures added references to recent bugs influencing the use of nscomptr machinery: bug 59212, and bug 59414 fixed comparisons 1 and 3, as per comments by morten welinder updated examples to prefer direct initializat
ion over copy initializat
ion.
XSLT 2.0
for users saxon-ce no extens
ions are required, saxon-ce runs whenever a html page is loaded that links to the saxon-ce javascript library.
... saxon-b the xsl results extens
ion uses the new incarnat
ion of liveconnect (handled by java 1.6v12+ instead of mozilla-specific code) to connect with the java-based saxon-b library, and adds support for having xslt performed automatically when visiting a page with the appropriate xslt processing instruct
ion (and which isn't processed by firefox's own xslt 1.0 processor).
... saxon-b the extens
ion demonstrates how one can use liveconnect code to communicate with the saxon-b library, but one might find the javascript code module approach used inside the extens
ion xquseme as a more reusable approach.
... the code does not currently work on the mac (except for server edit
ion supporting java 1.6) due to its lagging java support (and thus liveconnect support).
Styling the Folder Pane
since thunderbird 3, the folder pane is designed in a more modular and extensible fash
ion.
... treeview row/cell properties css property equivalent call explanat
ion foldernamecol -- a property for indicating that a column is the folder name column.
... issecure-{true, false} afolder.server.issecure indicates whether or not the connect
ion to the server will be secure.
... specialfolder-smart -- indicates that the folder is a child of a unified folder (prev
iously known as smart folder) in the smart folders view.
Tips and Tricks from the newsgroups
the following discuss
ions on mozilla.dev.apps.thunderbird and mozilla.dev.extens
ions include useful tips for thunderbird add-on developers.
...we will add a categorizat
ion system as the link list grows.
... extens
ions load an extens
ion in its own tab run shell scripts from an extens
ion (for example, to create a symlink) get extens
ion metadata call java from thunderbird extens
ions (also an example here, written for firefox but compatible with thunderbird 3.x) define a custom protocol handler to call an external program save attachment and send it repeat image display using css sprites messages use reminderfox to open a message in the default thunderbird message window (when messageuri, folderuri and gdbview are unknown) determine whether a message has been flagged as junk imap: getting message key of copied message by nsimsgcopyservice::copyfilemessage access the plain text conte...
...nt of the email body get informat
ion about attachment without selecting message repeat image display using css sprites scan for new messages at startup and manually scan a folder initiated by user force listeners to run consecutively to prevent pop messages from getting garbled during message retrieval ...
Debugging Tips
printing cdata and ctype currently console.log doesn't show type informat
ion of cdata.
... running the following code shows only partial value informat
ion.
...tils.import("resource://gre/modules/ctypes.jsm", {}); let i = ctypes.int32_t(10); console.log(i); let point = ctypes.structtype("point", [{ x: ctypes.int32_t }, { y: ctypes.int32_t }]) let p = point(10, 20); console.log(p); let pp = p.address(); console.log(pp); the result will be as following: cdata { value: 10 } cdata { x: 10, y: 20 } cdata { contents: cdata } to see more descriptive informat
ion, you can use .tosource().
.../modules/ctypes.jsm", {}); let i = ctypes.int32_t(10); console.log(i.tosource()); let point = ctypes.structtype("point", [{ x: ctypes.int32_t }, { y: ctypes.int32_t }]) let p = point(10, 20); console.log(p.tosource()); let pp = p.address(); console.log(pp.tosource()); the result will be : ctypes.int32_t(10) point(10, 20) point.ptr(ctypes.uint64("0x15fdafb08")) to see the complete type informat
ion, you can use .constructor.tosource(), to print the source of ctype.
Memory Management
it is usually best to expose a freeing funct
ion from the binary.
...this is not an exhaustive list, but will help you to understand memory management and how it affects your use of js-ctypes: a funct
ion or static data declared using the declare() method will hold that library alive.
...be sure to hold an explicit reference so that the referent object doesn't get into garbage collect
ion, before you're done using it.
...this should be obv
ious, but is important enough to be worth stating explicitly.
CSSMathValue - Web APIs
examples we create an element with a width determined using a calc() funct
ion, then console.log() the operator.
... <div>has width</div> we assign a width with a calculat
ion div { width: calc(30% - 20px); } we add the javascript const stylemap = document.queryselector('div').computedstylemap(); console.log( stylemap.get('width') ); // cssmathsum {values: cssnumericarray, operator: "sum"} console.log( stylemap.get('width').operator ); // 'sum' console.log( stylemap.get('width').values[1].value ); // -20 the cssmathvalue.operator returns 'sum' because stylemap.get('width').values[1].value ); is -20: adding a negative number.
... specificat
ions specificat
ion status comment css typed om level 1the definit
ion of 'cssmathvalue' in that specificat
ion.
... working draft initial definit
ion.
CSSNumericValue.type - Web APIs
the type() method of the cssnumericvalue interface returns the type of cssnumericvalue, one of angle, flex, frequency, length, resolut
ion, percent, percenthint, or time.
... except
ions none.
... examples let mathsum = css.px("23").sub(css.percent("4")).sub(css.cm("3")).sub(css.in("9")); // returns an object with the structure: {length: 1, percenthint: "length"} let cssnumerictype = mathsum.type(); specificat
ions specificat
ion status comment css typed om level 1the definit
ion of 'type' in that specificat
ion.
... working draft initial definit
ion.
CSSNumericValue - Web APIs
the cssnumericvalue interface of the css typed object model api represents operat
ions that all numeric values can perform.
... cssmathinvert cssmathmax cssmathmin cssmathnegate cssmathproduct cssmathsum cssmathvalue cssnumericarray cssperspective cssposit
ionvalue cssrotate cssskew cssskeyx cssskeyw csstranslate cssunitvalue properties none.
... specificat
ions specificat
ion status comment css typed om level 1the definit
ion of 'cssnumericvalue' in that specificat
ion.
... working draft initial definit
ion.
CSSPrimitiveValue.getStringValue() - Web APIs
if this css value doesn't contain a string value, a domexcept
ion is raised.
... except
ions type descript
ion domexcept
ion an invalid_access_err is raised if the css value doesn't contain a string value.
... example var cs = window.getcomputedstyle(document.body); var cssvalue = cs.getpropertycssvalue("display"); console.log(cssvalue.getstringvalue()); specificat
ions specificat
ion status comment document object model (dom) level 2 style specificat
ionthe definit
ion of 'cssprimitivevalue.getstringvalue' in that specificat
ion.
... obsolete initial definit
ion ...
CSSRule.cssText - Web APIs
note: do not confuse this property with element-style cssstyledeclarat
ion.csstext.
... be aware that this property can no longer be set directly, as it is now specified to be funct
ionally modify-only, and silently so.
...see using dynamic styling informat
ion for details.
... syntax string = cssrule.csstext example <style> body { background-color: darkblue; } </style> <script> var stylesheet = document.stylesheets[0]; alert(stylesheet.cssrules[0].csstext); // body { background-color: darkblue; } </script> specificat
ions specificat
ion status comment css object model (cssom)the definit
ion of 'cssrule: csstext' in that specificat
ion.
CSSRuleList - Web APIs
a cssrulelist is an (indirect-modify only) array-like object containing an ordered collect
ion of cssrule objects.
... descript
ion each cssrule can be accessed as rules.item(index), or simply rules[index], where rules is an object implementing the cssrulelist interface (such as cssstylesheet.cssrules), and index is the 0-based index of the rule, in the order as it appears in the style sheet css.
... example // get the first style sheet’s first rule var first_rule = document.stylesheets[0].cssrules[0]; see also cssrule cssrulelist implementat
ions there are multiple properties in the cssom that will return a cssrulelist.
... they are: cssstylesheet property cssrules cssmediarule property cssrules csskeyframesrule property cssrules cssmozdocumentrule property cssrules specificat
ions specificat
ion status comment css object model (cssom)the definit
ion of 'cssrulelist' in that specificat
ion.
CSSStyleRule - Web APIs
properties cssstylerule.selectortext returns the textual representat
ion of the selector for this rule, e.g.
... cssstylerule.style read only returns the cssstyledeclarat
ion object for the rule.
... specificat
ions specificat
ion status comment css object model (cssom)the definit
ion of 'cssstylerule' in that specificat
ion.
... working draft no changes document object model (dom) level 2 style specificat
ionthe definit
ion of 'cssrule' in that specificat
ion.
CacheStorage.delete() - Web APIs
syntax caches.delete(cachename).then(funct
ion(boolean) { // your cache is now deleted }); parameters cachename the name of the cache you want to delete.
... this.addeventlistener('activate', funct
ion(event) { var cachestokeep = ['v2']; event.waituntil( caches.keys().then(funct
ion(keylist) { return promise.all(keylist.map(funct
ion(key) { if (cachestokeep.indexof(key) === -1) { return caches.delete(key); } })); }) ); }); specificat
ions specificat
ion status comment service workersthe definit
ion of 'cachestorage: dele...
...te' in that specificat
ion.
... working draft initial definit
ion.
CacheStorage.keys() - Web APIs
syntax caches.keys().then(funct
ion(keylist) { //do something with your keylist }); parameters none.
... then.addeventlistener('activate', funct
ion(event) { var cachewhitelist = ['v2']; event.waituntil( caches.keys().then(funct
ion(keylist) { return promise.all(keylist.map(funct
ion(key) { if (cachewhitelist.indexof(key) === -1) { return caches.delete(key); } }); }) ); }); specificat
ions specificat
ion status comment service workersthe definit
ion of 'cachestorage: k...
...eys' in that specificat
ion.
... working draft initial definit
ion.
CacheStorage.open() - Web APIs
syntax caches.open(cachename).then(funct
ion(cache) { // do something with your cache }); parameters cachename the name of the cache you want to open.
... self.addeventlistener('install', funct
ion(event) { event.waituntil( caches.open('v1').then(funct
ion(cache) { return cache.addall([ '/sw-test/', '/sw-test/index.html', '/sw-test/style.css', '/sw-test/app.js', '/sw-test/image-list.js', '/sw-test/star-wars-logo.jpg', '/sw-test/gallery/bountyhunters.jpg', '/sw-test/gallery/mylittlevader.jpg', '/sw-test/galle...
...ry/snowtroopers.jpg' ]); }) ); specificat
ions specificat
ion status comment service workersthe definit
ion of 'cachestorage: open' in that specificat
ion.
... working draft initial definit
ion.
CanvasRenderingContext2D.arc() - Web APIs
the path starts at startangle, ends at endangle, and travels in the direct
ion given by anticlockwise (defaulting to clockwise).
... anticlockwise opt
ional an opt
ional boolean.
... const canvas = document.queryselector('canvas'); const ctx = canvas.getcontext('2d'); ctx.beginpath(); ctx.arc(100, 75, 50, 0, 2 * math.pi); ctx.stroke(); result different shapes demonstrated this example draws var
ious shapes to show what is possible with arc().
... = 0; // starting point on circle let endangle = math.pi + (math.pi * j) / 2; // end point on circle let anticlockwise = i % 2 == 1; // draw anticlockwise ctx.arc(x, y, radius, startangle, endangle, anticlockwise); if (i > 1) { ctx.fill(); } else { ctx.stroke(); } } } result screenshotlive sample specificat
ions specificat
ion status comment html living standardthe definit
ion of 'canvasrenderingcontext2d.arc' in that specificat
ion.
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 direct
ion it must to meet the specified radius.
... const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); const p0 = { x: 230, y: 20 } const p1 = { x: 90, y: 130 } const p2 = { x: 20, y: 20 } const labelpoint = funct
ion (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.
...ut = document.getelementbyid('radius-output'); const control = document.getelementbyid('radius'); control.oninput = () => { controlout.textcontent = r = control.value; }; const mouse = { x: 0, y: 0 }; let r = 100; // radius const p0 = { x: 0, y: 50 }; const p1 = { x: 100, y: 100 }; const p2 = { x: 150, y: 50 }; const p3 = { x: 200, y: 100 }; const labelpoint = funct
ion (p, offset, i = 0){ const {x, y} = offset; ctx.beginpath(); ctx.arc(p.x, p.y, 2, 0, math.pi * 2); ctx.fill(); ctx.filltext(`${i}:(${p.x}, ${p.y})`, p.x + x, p.y + y); } const drawpoints = funct
ion (points){ for (let i = 0; i < points.length; i++) { var p = points[i]; labelpoint(p, { x: 0, y: -20 } , i) } } // draw arc const drawarc = funct
ion ([p0, p1, p2], r) ...
...{ ctx.beginpath(); ctx.moveto(p0.x, p0.y); ctx.arcto(p1.x, p1.y, p2.x, p2.y, r); ctx.lineto(p2.x, p2.y); ctx.stroke(); } let t0 = 0; let rr = 0; // the radius that changes over time let a = 0; // angle let pi2 = math.pi * 2; const loop = funct
ion (t) { t0 = t / 1000; a = t0 % pi2; rr = math.abs(math.cos(a) * r); ctx.clearrect(0, 0, canvas.width, canvas.height); drawarc([p1, p2, p3], rr); drawpoints([p1, p2, p3]); requestanimat
ionframe(loop); } loop(0); result specificat
ions specificat
ion status comment html living standardthe definit
ion of 'canvasrenderingcontext2d.arcto' in that specificat
ion.
CanvasRenderingContext2D.currentTransform - Web APIs
the canvasrenderingcontext2d.currenttransform property of the canvas 2d api returns or sets a dommatrix (current specificat
ion) or svgmatrix (old specificat
ion) object for the current transformat
ion matrix.
... syntax ctx.currenttransform [= value]; value a dommatrix or svgmatrix object to use as the current transformat
ion matrix.
... examples manually changing the matrix this example uses the currenttransform property to set a transformat
ion matrix.
... a rectangle is then drawn using that transformat
ion.
CanvasRenderingContext2D.drawFocusIfNeeded() - Web APIs
>quit</button> </canvas> javascript const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); const button1 = document.getelementbyid('button1'); const button2 = document.getelementbyid('button2'); document.addeventlistener('focus', redraw, true); document.addeventlistener('blur', redraw, true); canvas.addeventlistener('click', handleclick, false); redraw(); funct
ion redraw() { ctx.clearrect(0, 0, canvas.width, canvas.height); drawbutton(button1, 20, 20); drawbutton(button2, 20, 80); } funct
ion handleclick(e) { // calculate click coordinates const x = e.clientx - canvas.offsetleft; const y = e.clienty - canvas.offsettop; // focus button1, if appropriate drawbutton(button1, 20, 20); if (ctx.ispointinpath(x, y)) { button1.focus(); } ...
... // focus button2, if appropriate drawbutton(button2, 20, 80); if (ctx.ispointinpath(x, y)) { button2.focus(); } } funct
ion drawbutton(el, x, y) { const active = document.activeelement === el; const width = 150; const height = 40; // button background ctx.fillstyle = active ?
...'blue' : 'black'; ctx.filltext(el.textcontent, x + width / 2, y + height / 2); // define clickable area ctx.beginpath(); ctx.rect(x, y, width, height); // draw focus ring, if appropriate ctx.drawfocusifneeded(el); } result specificat
ions specificat
ion status comment html living standardthe definit
ion of 'canvasrenderingcontext2d.drawfocusifneeded' in that specificat
ion.
... living standard initial definit
ion ...
CanvasRenderingContext2D.globalAlpha - Web APIs
syntax ctx.globalalpha = value; opt
ions value a number between 0.0 (fully transparent) and 1.0 (fully opaque), inclusive.
...values outside that range, including infinity and nan, will not be set, and globalalpha will retain its prev
ious value.
... with each new circle, the opacity of the prev
ious circles underneath is effectively increased.
...#6c0'; ctx.fillrect(75, 0, 75, 75); ctx.fillstyle = '#09f'; ctx.fillrect(0, 75, 75, 75); ctx.fillstyle = '#f30'; ctx.fillrect(75, 75, 75, 75); ctx.fillstyle = '#fff'; // set transparency value ctx.globalalpha = 0.2; // draw transparent circles for (let i = 0; i < 7; i++) { ctx.beginpath(); ctx.arc(75, 75, 10 + 10 * i, 0, math.pi * 2, true); ctx.fill(); } screenshotlive sample specificat
ions specificat
ion status comment html living standardthe definit
ion of 'canvasrenderingcontext2d.globalalpha' in that specificat
ion.
CanvasRenderingContext2D.isPointInPath() - Web APIs
syntax ctx.ispointinpath(x, y [, fillrule]); ctx.ispointinpath(path, x, y [, fillrule]); parameters x the x-axis coordinate of the point to check, unaffected by the current transformat
ion of the context.
... y the y-axis coordinate of the point to check, unaffected by the current transformat
ion of the context.
... html <canvas id="canvas"></canvas> javascript const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); // create circle const circle = new path2d(); circle.arc(150, 75, 50, 0, 2 * math.pi); ctx.fillstyle = 'red'; ctx.fill(circle); // listen for mouse moves canvas.addeventlistener('mousemove', funct
ion(event) { // check whether point is inside circle if (ctx.ispointinpath(circle, event.offsetx, event.offsety)) { ctx.fillstyle = 'green'; } else { ctx.fillstyle = 'red'; } // draw circle ctx.clearrect(0, 0, canvas.width, canvas.height); ctx.fill(circle); }); result specificat
ions specificat
ion status comment html living standardthe definit
ion...
... of 'canvasrenderingcontext2d.ispointinpath' in that specificat
ion.
CanvasRenderingContext2D.resetTransform() - Web APIs
html <canvas id="canvas"></canvas> javascript the rotate() method rotates the transformat
ion matrix by 45°.
... const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); // draw a rotated rectangle ctx.rotate(45 * math.pi / 180); ctx.fillrect(60, 0, 100, 30); // reset transformat
ion matrix to the identity matrix ctx.resettransform(); result continuing with a regular matrix whenever you're done drawing transformed shapes, you should call resettransform() before rendering anything else.
... in this example, the first two shapes are drawn with a skew transformat
ion, and the last two are drawn with the identity (regular) transformat
ion.
... polyfill you can also use the settransform() method to reset the current transform to the identity matrix, like so: ctx.settransform(1, 0, 0, 1, 0, 0); specificat
ions specificat
ion status comment html living standardthe definit
ion of 'canvasrenderingcontext2d.resettransform' in that specificat
ion.
CanvasRenderingContext2D.save() - Web APIs
the drawing state the drawing state that gets saved onto a stack consists of: the current transformat
ion matrix.
... the current clipping reg
ion.
... the current values of the following attributes: strokestyle, fillstyle, globalalpha, linewidth, linecap, linejoin, miterlimit, linedashoffset, shadowoffsetx, shadowoffsety, shadowblur, shadowcolor, globalcompositeoperat
ion, font, textalign, textbaseline, direct
ion, imagesmoothingenabled.
... html <canvas id="canvas"></canvas> javascript const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); // save the default state ctx.save(); ctx.fillstyle = 'green'; ctx.fillrect(10, 10, 100, 100); // restore the default state ctx.restore(); ctx.fillrect(150, 40, 100, 100); result specificat
ions specificat
ion status comment html living standardthe definit
ion of 'canvasrenderingcontext2d.save' in that specificat
ion.
CanvasRenderingContext2D.stroke() - Web APIs
the stroke is drawn using the non-zero winding rule, which means that path intersect
ions will still get filled.
...if you don't, the prev
ious sub-paths will remain part of the current path, and get stroked every time you call the stroke() method.
...0); ctx.lineto(160, 20); ctx.stroke(); // second sub-path ctx.linewidth = 14; ctx.strokestyle = 'green'; ctx.moveto(20, 80); ctx.lineto(220, 80); ctx.stroke(); // third sub-path ctx.linewidth = 4; ctx.strokestyle = 'pink'; ctx.moveto(20, 140); ctx.lineto(280, 140); ctx.stroke(); result stroking and filling if you want to both stroke and fill a path, the order in which you perform these act
ions will determine the result.
... html <canvas id="canvas"></canvas> javascript const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); ctx.linewidth = 16; ctx.strokestyle = 'red'; // stroke on top of fill ctx.beginpath(); ctx.rect(25, 25, 100, 100); ctx.fill(); ctx.stroke(); // fill on top of stroke ctx.beginpath(); ctx.rect(175, 25, 100, 100); ctx.stroke(); ctx.fill(); result specificat
ions specificat
ion status comment html living standardthe definit
ion of 'canvasrenderingcontext2d.stroke' in that specificat
ion.
CanvasRenderingContext2D.strokeText() - Web APIs
an opt
ional parameter allows specifying a maximum width for the rendered text, which the user agent will achieve by condensing the text or by using a lower font size.
...the text is rendered using the settings specified by font, textalign, textbaseline, and direct
ion.
... maxwidth opt
ional the maximum width the text may be once rendered.
... html <canvas id="canvas" width="400" height="150"></canvas> javascript const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); ctx.font = '50px serif'; ctx.stroketext('hello world', 50, 90, 140); result specificat
ions specificat
ion status comment html living standardthe definit
ion of 'canvasrenderingcontext2d.stroketext' in that specificat
ion.
CanvasRenderingContext2D.textAlign - Web APIs
syntax ctx.textalign = "left" || "right" || "center" || "start" || "end"; opt
ions possible values: "left" the text is left-aligned.
...nvas.width = 350; const ctx = canvas.getcontext('2d'); const x = canvas.width / 2; ctx.beginpath(); ctx.moveto(x, 0); ctx.lineto(x, canvas.height); ctx.stroke(); ctx.font = '30px serif'; ctx.textalign = 'left'; ctx.filltext('left-aligned', x, 40); ctx.textalign = 'center'; ctx.filltext('center-aligned', x, 85); ctx.textalign = 'right'; ctx.filltext('right-aligned', x, 130); result direct
ion-dependent text alignment this example demonstrates the two direct
ion-dependent values of the textalign property: "start" and "end".
... note that the direct
ion property is manually specified as "ltr", although this is also the default for english-language text.
... html <canvas id="canvas"></canvas> javascript const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); ctx.font = '30px serif'; ctx.direct
ion = 'ltr'; ctx.textalign = 'start'; ctx.filltext('start-aligned', 0, 50); ctx.textalign = 'end'; ctx.filltext('end-aligned', canvas.width, 120); result specificat
ions specificat
ion status comment html living standardthe definit
ion of 'canvasrenderingcontext2d.textalign' in that specificat
ion.
Canvas tutorial - Web APIs
this can, for instance, be used to draw graphs, combine photos, or create simple (and not so simple) animat
ions.
... the images on this page show examples of <canvas> implementat
ions which will be created in this tutorial.
...the <canvas> element is not supported in some older browsers, but is supported in recent vers
ions of all major browsers.
... in this tutorial basic usage drawing shapes applying styles and colors drawing text using images transformat
ions compositing and clipping basic animat
ions advanced animat
ions pixel manipulat
ion hit reg
ions and accessibility optimizing the canvas finale ...
ChannelMergerNode() - Web APIs
syntax var mynode = new channelmergernode(context, opt
ions); parameters context a baseaud
iocontext representing the aud
io context you want the node to be associated with.
... opt
ions opt
ional a channelmergeropt
ions dict
ionary object defining the properties you want the channelmergernode to have (also inherits parameters from the aud
ionodeopt
ions dict
ionary): numberofinputs: a number defining the number of inputs the channelmergernode should have.
... except
ions invalidstateerror an opt
ion such as channelcount or channelcountmode has been given an invalid value.
... example var ac = new aud
iocontext(); var opt
ions = { numberofinputs : 2 } var mymerger = new channelmergernode(ac, opt
ions); specificat
ions specificat
ion status comment web aud
io apithe definit
ion of 'channelmergernode' in that specificat
ion.
ChildNode - Web APIs
specificat
ions specificat
ion status comment domthe definit
ion of 'childnode' in that specificat
ion.
...prev
iouselementsibling and nextelementsibling are now defined on the latter.
... element traversal specificat
ionthe definit
ion of 'elementtraversal' in that specificat
ion.
... obsolete added the initial definit
ion of its properties to the elementtraversal pure interface and use it on element.
Clipboard.readText() - Web APIs
the "clipboard-read" permiss
ion of the permiss
ions api must be granted before you can read data from the clipboard.
...returns an empty string if the clipboard is empty, does not contain text, or does not include a textual representat
ion among the datatransfer objects representing the clipboard's contents.
... navigator.clipboard.readtext().then( cliptext => document.getelementbyid("outbox").innertext = cliptext); specificat
ions specificat
ion status comment clipboard api and eventsthe definit
ion of 'readtext()' in that specificat
ion.
... working draft initial definit
ion.
ClipboardEvent - Web APIs
the clipboardevent interface represents events providing informat
ion related to modificat
ion of the clipboard, that is cut, copy, and paste events.
... clipboardevent.clipboarddata read only is a datatransfer object containing the data affected by the user-initiated cut, copy, or paste operat
ion, along with its mime type.
... specificat
ions specificat
ion status comment clipboard api and eventsthe definit
ion of 'clipboardevent' in that specificat
ion.
... working draft initial definit
ion.
ClipboardItem.getType() - Web APIs
except
ions domexcept
ion the type does not match a known mime type.
... async funct
ion getclipboardcontents() { try { const clipboarditems = await navigator.clipboard.read(); for (const clipboarditem of clipboarditems) { for (const type of clipboarditem.types) { const blob = await clipboarditem.gettype(type); // we can now use blob here } } } catch (err) { console.error(err.name, err.message); } } specificat
ions specificat
ion status comment clipboard api and eventsthe ...
...definit
ion of 'clipboarditem' in that specificat
ion.
... working draft initial definit
ion.
CloseEvent.initCloseEvent() - Web APIs
the page on creating and triggering events gives more informat
ion about the way to use these.
... cancelable whether or not the event's default act
ion can be prevented.
... wasclean whether or not the connect
ion was cleanly closed.
... specificat
ions this is no part of any specificat
ions, though it was in some early drafts.
Console.groupCollapsed() - Web APIs
see using groups in the console in the console documentat
ion for details and examples.
...opt
ional.
... specificat
ions specificat
ion status comment console apithe definit
ion of 'console.groupcollapsed()' in that specificat
ion.
... living standard initial definit
ion ...
Console.time() - Web APIs
starts a timer you can use to track how long an operat
ion takes.
... see timers in the console documentat
ion for details and examples.
... specificat
ions specificat
ion status comment console apithe definit
ion of 'console.time()' in that specificat
ion.
... living standard initial definit
ion ...
Document: dragenter event - Web APIs
the dragenter event is fired when a dragged element or text select
ion enters a valid drop target.
... the target object is the immediate user select
ion (the element directly indicated by the user as the drop target), or the <body> element.
... bubbles yes cancelable yes default act
ion reject immediate user select
ion as potential target element.
... specificat
ions specificat
ion status comment html living standardthe definit
ion of 'dragenter' in that specificat
ion.
Document.hasFocus() - Web APIs
to test the funct
ionality of hasfocus(), click on the button to open a new window, and try switching between the two pages.
... html <p id="log">awaiting focus check.</p> <button onclick="openwindow()">open a new window</button> javascript funct
ion checkpagefocus() { let body = document.queryselector('body'); let log = document.getelementbyid('log'); if (document.hasfocus()) { log.textcontent = 'this document has the focus.'; body.style.background = '#fff'; } else { log.textcontent = 'this document does not have the focus.'; body.style.background = '#ccc'; } } funct
ion openwindow() { window.open('https://developer.mozilla.org/', 'mdn', 'width=640,height=320,left=150,top=150'); } // check page focus every 300 milliseconds setinterval(checkpagefocus, 300); result specificat
ion specificat
ion status comment html living standardthe definit
ion of 'docum...
...ent.hasfocus()' in that specificat
ion.
... living standard initial definit
ion ...
Document.hasStorageAccess() - Web APIs
see storage access api for more informat
ion.
... if the promise gets resolved and a user gesture event was being processed when the funct
ion was originally called, the resolve handler will run as if a user gesture was being processed, so it will be able to call apis that require user activat
ion.
... } }); specificat
ions the api is currently only at the proposal stage — the standardizat
ion process has yet to begin.
... you can currently find specificat
ion details of the api at apple's introducing storage access api blog post, and whatwg html issue 3338 — proposal: storage access api.
Document.head - Web APIs
specificat
ions specificat
ion status comment html 5.1the definit
ion of 'document.head' in that specificat
ion.
... recommendat
ion html5the definit
ion of 'document.head' in that specificat
ion.
... recommendat
ion html living standardthe definit
ion of 'document.head' in that specificat
ion.
... living standard initial definit
ion.
Document.mozSetImageElement() - Web APIs
syntax document.mozsetimageelement(imageelementid, imageelement); parameters imageelementid is a string indicating the name of an element that has been specified as a background image using the -moz-element css funct
ion.
... var c = 0x00; funct
ion clicked() { var canvas = document.createelement("canvas"); canvas.setattribute("width", 100); canvas.setattribute("height", 100); var ctx = canvas.getcontext('2d'); ctx.fillstyle = "#" + c.tostring(16) + "0000"; ctx.fillrect(25, 25, 75, 75); c += 0x11; if (c > 0xff) { c = 0x00; } document.mozsetimageelement("canvasbg", canvas); } the code here is called each time the...
...each time the funct
ion is called, the square is a different color (its red component is increased each time), so each time the user clicks the element, the background is filled with a brighter and brighter pattern of red tiles.
... specificat
ions not part of any specificat
ion.
Document: selectstart event - Web APIs
the selectstart event of the select
ion api is fired when a user starts a new select
ion.
... if the event is canceled, the select
ion is not changed.
... bubbles yes cancelable yes interface event event handler property onselectstart examples // addeventlistener vers
ion document.addeventlistener('selectstart', () => { console.log('select
ion started'); }); // onselectstart vers
ion document.onselectstart = () => { console.log('select
ion changed.'); }; specificat
ions specificat
ion status comment select
ion apithe definit
ion of 'selectstart' in that specificat
ion.
... working draft initial definit
ion.
Document.visibilityState - Web APIs
the document may start in this state, but will never transit
ion to it from another value.
... syntax var string = document.visibilitystate examples document.addeventlistener("visibilitychange", funct
ion() { console.log( document.visibilitystate ); // modify behav
ior...
... }); specificat
ions specificat
ion status comment page visibility (second edit
ion)the definit
ion of 'document.visibilitystate' in that specificat
ion.
... recommendat
ion initial definit
ion.
DocumentFragment.querySelectorAll() - Web APIs
if the selectors specified in parameter are invalid a domexcept
ion with a syntax_err value is raised.
... note: the definit
ion of this api was moved to the parentnode interface.
... examples this example returns a list of all div elements within the documentfragment with a class of either "note" or "alert": var matches = documentfrag.queryselectorall("div.note, div.alert"); specificat
ions specificat
ion status comment selectors api level 1the definit
ion of 'documentfragment.queryselectorall' in that specificat
ion.
... obsolete initial definit
ion.
DocumentOrShadowRoot.elementFromPoint() - Web APIs
if you need to find the specific posit
ion inside the element, use document.caretposit
ionfrompoint().
... javascript funct
ion changecolor(newcolor) { elem = document.elementfrompoint(2, 2); elem.style.color = newcolor; } the changecolor() method simply obtains the element located at the specified point, then sets that element's current foreground color property to the color specified by the newcolor parameter.
... result specificat
ions specificat
ion status shadow domthe definit
ion of 'elementsfrompoint()' in that specificat
ion.
... obsolete css object model (cssom) view modulethe definit
ion of 'elementsfrompoint()' in that specificat
ion.
DocumentOrShadowRoot.fullscreenElement - Web APIs
although this property is read-only, it will not throw if it is modified (even in strict mode); the setter is a no-operat
ion and it will be ignored.
... example this example presents a funct
ion, isvideoinfullscreen(), which looks at the value returned by fullscreenelement; if the document is in full-screen mode (fullscreenelement isn't null) and the full-screen element's nodename is video, indicating a <video> element, the funct
ion returns true, indicating that the video is in full-screen mode.
... funct
ion isvideoinfullscreen() { if (document.fullscreenelement && document.fullscreenelement.nodename == 'video') { return true; } return false; } specificat
ions specificat
ion status comment fullscreen apithe definit
ion of 'document.fullscreenelement' in that specificat
ion.
... living standard initial definit
ion ...
Locating DOM elements using selectors - Web APIs
the nodeselector interface this specificat
ion adds two new methods to any objects implementing the document, documentfragment, or element interfaces: queryselector() returns the first matching element node within the node's subtree.
... note: the nodelist returned by queryselectorall() is not live, which means that changes in the dom are not reflected in the collect
ion.
... you may find examples and details by reading the documentat
ion for the element.queryselector() and element.queryselectorall() methods, as well as in the article code snippets for queryselector.
...for example: var el = document.queryselector( "#main, #basic, #exclamat
ion" ); after executing the above code, el contains the first element in the document whose id is one of main, basic, or exclamat
ion.
DoubleRange - Web APIs
the doublerange dict
ionary is used to define a range of permitted double-precis
ion floating-point values for a property, with either or both a maximum and minimum value specified.
... the constraindouble dict
ionary is based on this, augmenting it to support exact and ideal values as well.
... specificat
ions specificat
ion status comment media capture and streamsthe definit
ion of 'doublerange' in that specificat
ion.
... candidate recommendat
ion initial definit
ion ...
EXT_disjoint_timer_query.getQueryEXT() - Web APIs
the ext_disjoint_timer_query.getqueryext() method of the webgl api returns informat
ion about a query target.
... pname a glenum specifying which informat
ion to return.
... examples var ext = gl.getextens
ion('ext_disjoint_timer_query'); var startquery = ext.createqueryext(); ext.querycounterext(startquery, ext.timestamp_ext); var currentquery = ext.getqueryext(ext.timestamp_ext, ext.current_query_ext); specificat
ions specificat
ion status comment ext_disjoint_timer_querythe definit
ion of 'ext_disjoint_timer_query' in that specificat
ion.
... working draft initial definit
ion.
EcdhKeyDeriveParams - Web APIs
the ecdhkeyderiveparams dict
ionary of the web crypto api represents the object that should be passed as the algorithm parameter into subtlecrypto.derivekey(), when using the ecdh algorithm.
...they exchange public keys and use the combinat
ion of their private key and the other entity's public key to derive a secret key that they — and noone else — share.
... specificat
ions specificat
ion status comment web cryptography apithe definit
ion of 'subtlecrypto.ecdhkeyderiveparams' in that specificat
ion.
... recommendat
ion ...
EffectTiming.delay - Web APIs
the effecttiming dict
ionary's delay property in the web animat
ions api represents the number of milliseconds to delay the start of the animat
ion.
...the value of delay corresponds directly to effecttiming.delay in timing objects returned by animat
ioneffectreadonly, keyframeeffectreadonly, and keyframeeffect.
... syntax var timingproperties = { delay: delayinmilliseconds }; timingproperties.delay = delayinmilliseconds; value a number specifying the delay, in milliseconds, from the start of the animat
ion's play cycle to the beginning of its active interval (the time index at which actual animat
ion begins).
... examples in the pool of tears example, each tear is passed a random delay via its timing object: // randomizer funct
ion var getrandommsrange = funct
ion(min, max) { return math.random() * (max - min) + min; } // loop through each tear tears.foreach(funct
ion(el) { // animate each tear el.animate( tearsfalling, { delay: getrandommsrange(-1000, 1000), // randomized for each tear durat
ion: getrandommsrange(2000, 6000), // randomized for each tear iterat
ions: infinity, easing: "cubic-bezier(0.6, 0.04, 0.98, 0.335)" }); }); specificat
ions specificat
ion status comment web animat
ionsthe definit
ion of 'delay' in that specificat
ion.
Element.className - Web APIs
specificat
ions specificat
ion status comment domthe definit
ion of 'element.classname' in that specificat
ion.
... living standard dom4the definit
ion of 'element.classname' in that specificat
ion.
... obsolete document object model (dom) level 2 html specificat
ionthe definit
ion of 'element.classname' in that specificat
ion.
... obsolete initial definit
ion ...
Element: copy event - Web APIs
the copy event fires when the user initiates a copy act
ion through the browser's user interface.
... bubbles yes cancelable yes interface clipboardevent event handler property oncopy the event's default act
ion is to copy the select
ion (if any) to the clipboard.
... a handler for this event can modify the clipboard contents by calling setdata(format, data) on the event's clipboardevent.clipboarddata property, and cancelling the event's default act
ion using event.preventdefault().
..."true">try copying text from this box...</div> <div class="target" contenteditable="true">...and pasting it into this one</div> css div.source, div.target { border: 1px solid gray; margin: .5rem; padding: .5rem; height: 1rem; background-color: #e9eef1; } js const source = document.queryselector('div.source'); source.addeventlistener('copy', (event) => { const select
ion = document.getselect
ion(); event.clipboarddata.setdata('text/plain', select
ion.tostring().touppercase()); event.preventdefault(); }); result specificat
ions specificat
ion status clipboard api and events working draft ...
Element.hasAttributes() - Web APIs
examples let foo = document.getelementbyid('foo'); if (foo.hasattributes()) { // do something with 'foo.attributes' } polyfill ;(funct
ion(prototype) { prototype.hasattributes = prototype.hasattributes || funct
ion() { return (this.attributes.length > 0); } })(element.prototype); specificat
ions specificat
ion status comment domthe definit
ion of 'element.hasattributes()' in that specificat
ion.
... document object model (dom) level 3 core specificat
ionthe definit
ion of 'hasattributes()' in that specificat
ion.
... obsolete no change from document object model (dom) level 2 core specificat
ion document object model (dom) level 2 core specificat
ionthe definit
ion of 'hasattributes()' in that specificat
ion.
... obsolete initial definit
ion, on the node interface.
Element.matches() - Web APIs
except
ions syntax_err the specified selector string is invalid.
...ement.matchesselector(), but include support for document.queryselectorall(), a polyfill exists: if (!element.prototype.matches) { element.prototype.matches = element.prototype.matchesselector || element.prototype.mozmatchesselector || element.prototype.msmatchesselector || element.prototype.omatchesselector || element.prototype.webkitmatchesselector || funct
ion(s) { var matches = (this.document || this.ownerdocument).queryselectorall(s), i = matches.length; while (--i >= 0 && matches.item(i) !== this) {} return i > -1; }; } however, given the practicality of supporting older browsers, the following should suffice for most (if not all) practical cases (i.e.
... if (!element.prototype.matches) { element.prototype.matches = element.prototype.msmatchesselector || element.prototype.webkitmatchesselector; } specificat
ion specificat
ion status comment domthe definit
ion of 'element.prototype.matches' in that specificat
ion.
... living standard initial definit
ion ...
Element: mouseenter event - Web APIs
examples the mouseover documentat
ion has an example illustrating the difference between mouseover and mouseenter.
...dlist'); mousetarget.addeventlistener('mouseenter', e => { mousetarget.style.border = '5px dotted orange'; entereventcount++; addlistitem('this is mouseenter event ' + entereventcount + '.'); }); mousetarget.addeventlistener('mouseleave', e => { mousetarget.style.border = '1px solid #333'; leaveeventcount++; addlistitem('this is mouseleave event ' + leaveeventcount + '.'); }); funct
ion addlistitem(text) { // create a new text node using the supplied text var newtextnode = document.createtextnode(text); // create a new li element var newlistitem = document.createelement("li"); // add the text node to the li element newlistitem.appendchild(newtextnode); // add the newly created list item to list unorderedlist.appendchild(newlistitem); } result specificat
io...
...ns specificat
ion status ui eventsthe definit
ion of 'mouseenter' in that specificat
ion.
... working draft document object model (dom) level 3 events specificat
ionthe definit
ion of 'mouseenter' in that specificat
ion.
Element: mouseleave event - Web APIs
examples the mouseout documentat
ion has an example illustrating the difference between mouseout and mouseleave.
...dlist'); mousetarget.addeventlistener('mouseenter', e => { mousetarget.style.border = '5px dotted orange'; entereventcount++; addlistitem('this is mouseenter event ' + entereventcount + '.'); }); mousetarget.addeventlistener('mouseleave', e => { mousetarget.style.border = '1px solid #333'; leaveeventcount++; addlistitem('this is mouseleave event ' + leaveeventcount + '.'); }); funct
ion addlistitem(text) { // create a new text node using the supplied text var newtextnode = document.createtextnode(text); // create a new li element var newlistitem = document.createelement("li"); // add the text node to the li element newlistitem.appendchild(newtextnode); // add the newly created list item to list unorderedlist.appendchild(newlistitem); } result specificat
io...
...ns specificat
ion status ui eventsthe definit
ion of 'mouseleave' in that specificat
ion.
... working draft document object model (dom) level 3 events specificat
ionthe definit
ion of 'mouseleave' in that specificat
ion.
Element.onfullscreenerror - Web APIs
the element interface's onfullscreenerror property is an event handler for the fullscreenerror event which is sent to the element when an error occurs while attempting to transit
ion into or out of full-screen mode.
...since full-screen mode changes are only permitted in response to a user input, this causes an error to occur, which triggers the delivery of the fullscreenerror event to the error handler, let elem = document.queryselector("video")}} elem.onfullscreenerror = funct
ion ( event ) { displaywarning("unable to switch into full-screen mode."); }; //....
... elem.requestfullscreen(); specificat
ions specificat
ion status comment fullscreen apithe definit
ion of 'onfullscreenerror' in that specificat
ion.
... living standard initial definit
ion.
Element: paste event - Web APIs
the paste event is fired when the user has initiated a "paste" act
ion through the browser's user interface.
... bubbles yes cancelable yes interface clipboardevent event handler property onpaste if the cursor is in an editable context (for example, in a <textarea> or an element with contenteditable attribute set to true) then the default act
ion is to insert the contents of the clipboard into the document at the cursor posit
ion.
... to override the default behav
ior (for example to insert some different data or a transformat
ion of the clipboard contents) an event handler must cancel the default act
ion using event.preventdefault(), and then insert its desired data manually.
...his one</div> css div.source, div.target { border: 1px solid gray; margin: .5rem; padding: .5rem; height: 1rem; background-color: #e9eef1; } js const target = document.queryselector('div.target'); target.addeventlistener('paste', (event) => { let paste = (event.clipboarddata || window.clipboarddata).getdata('text'); paste = paste.touppercase(); const select
ion = window.getselect
ion(); if (!select
ion.rangecount) return false; select
ion.deletefromdocument(); select
ion.getrangeat(0).insertnode(document.createtextnode(paste)); event.preventdefault(); }); result specificat
ions specificat
ion status clipboard api and events working draft ...
Element.scrollBy() - Web APIs
syntax element.scrollby(x-coord, y-coord); element.scrollby(opt
ions) parameters x-coord is the horizontal pixel value that you want to scroll by.
... - or - opt
ions is a scrolltoopt
ions dict
ionary.
... examples // scroll an element element.scrollby(300, 300); using opt
ions: element.scrollby({ top: 100, left: 100, behav
ior: 'smooth' }); specificat
ion specificat
ion status comment css object model (cssom) view modulethe definit
ion of 'element.scrollby()' in that specificat
ion.
... working draft initial definit
ion.
Element.scrollWidth - Web APIs
if you need a fract
ional value, use element.getboundingclientrect().
...ar-foobar-foobar-foobar </div> <button id="anotherbutton"> check for overflow </button> </body> <script> var buttonone = document.getelementbyid('abutton'), buttontwo = document.getelementbyid('anotherbutton'), divone = document.getelementbyid('adiv'), divtwo = document.getelementbyid('anotherdiv'); //check to determine if an overflow is happening funct
ion isoverflowing(element) { return (element.scrollwidth > element.offsetwidth); } funct
ion alertoverflow(element) { if (isoverflowing(element)) { alert('contents are overflowing the container.'); } else { alert('no overflows!'); } } buttonone.addeventlistener('click', funct
ion() { alertoverflow(divone); }); b...
...uttontwo.addeventlistener('click', funct
ion() { alertoverflow(divtwo); }); </script> </html> result specificat
ion specificat
ion status comment css object model (cssom) view modulethe definit
ion of 'element.scrollwidth' in that specificat
ion.
... working draft initial definit
ion ...
Element.slot - Web APIs
a slot is a placeholder inside a web component that users can fill with their own markup (see using templates and slots for more informat
ion).
... let slottedspan = document.queryselector('my-paragraph span') console.log(slottedspan.slot); // logs 'my-text' specificat
ions specificat
ion status comment domthe definit
ion of 'slot' in that specificat
ion.
... desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on
iossamsung internetslotchrome full support 53edge full support ≤79firefox full support 63ie ?
... yessafari full support 10webview android full support 53chrome android full support 53firefox android full support 63opera android full support yessafari
ios full support yessamsung internet android full support 6.0legend full support full support compatibility unknown compatibility unknown ...
Element.toggleAttribute() - Web APIs
force opt
ional a boolean value to determine whether the attribute should be added or removed, no matter whether the attribute is present or not at the moment.
... except
ions invalidcharactererror the specified attribute name contains one or more characters which are not valid in attribute names.
... html <input value="text"> <button>toggleattribute("readonly")</button> javascript var button = document.queryselector("button"); var input = document.queryselector("input"); button.addeventlistener("click", funct
ion(){ input.toggleattribute("readonly"); }); result dom methods dealing with element's attributes: not namespace-aware, most commonly used methods namespace-aware variants (dom level 2) dom level 1 methods for dealing with attr nodes directly (seldom used) dom level 2 namespace-aware methods for dealing with attr nodes directly (seldom used) setattribute (dom 1) setattributens setattributenode setattributenodens getattribute (dom 1) getattributens getat...
...tributenode getattributenodens hasattribute (dom 2) hasattributens - - removeattribute (dom 1) removeattributens removeattributenode - polyfill if (!element.prototype.toggleattribute) { element.prototype.toggleattribute = funct
ion(name, force) { if(force !== void 0) force = !!force if (this.hasattribute(name)) { if (force) return true; this.removeattribute(name); return false; } if (force === false) return false; this.setattribute(name, ""); return true; }; } specificat
ion specificat
ion status comment domthe definit
ion of 'element.toggleattribute' in that specificat
ion.
Element: webkitmouseforcewillbegin event - Web APIs
this offers the opportunity to tell the system not to trigger any default force touch act
ions if and when the click turns into a force touch event.
... to instruct macos not to engage any default force touch act
ions if the user apply enough pressure to activate a force touch event, call preventdefault() on the webkitmouseforcewillbegin event object.
... specificat
ions not part of any specificat
ion.
... apple has a descript
ion at the mac developer library.
ElementCSSInlineStyle - Web APIs
each of these interfaces can, of course, add more features in addit
ion to the ones listed below.
...when getting, it returns a cssstyledeclarat
ion object that contains a list of all styles properties for that element with values assigned for the attributes that are defined in the element's inline style attribute.methodsthis interface has no methods.
... specificat
ions specificat
ion status comment css object model (cssom)the definit
ion of 'htmlorforeignelement' in that specificat
ion.
... working draft initial definit
ion.
Event.cancelBubble - Web APIs
the cancelbubble property of the event interface is a historical alias to event.stoppropagat
ion().
... setting its value to true before returning from an event handler prevents propagat
ion of the event.
... in later implementat
ions, setting this to false does nothing.
... example elem.onclick = funct
ion(event) { // do cool things here event.cancelbubble = true; } specificat
ions specificat
ion status comment domthe definit
ion of 'cancelbubble' in that specificat
ion.
Event.composedPath() - Web APIs
the first definit
ion looks like this, for example: customelements.define('open-shadow', class extends htmlelement { constructor() { super(); let pelem = document.createelement('p'); pelem.textcontent = this.getattribute('text'); let shadowroot = this.attachshadow({mode: 'open'}) .appendchild(pelem); } }); we then insert one of each element into our page: <open-shadow tex...
...t="i have an open shadow root"></open-shadow> <closed-shadow text="i have a closed shadow root"></closed-shadow> then include a click event listener on the <html> element: document.queryselector('html').addeventlistener('click',funct
ion(e) { console.log(e.composed); console.log(e.composedpath()); }); when you click on the <open-shadow> element and then the <closed-shadow> element, you'll notice two things.
...the <open-shadow> element's composed path is this: array [ p, shadowroot, open-shadow, body, html, htmldocument https://mdn.github.
io/web-components-examples/composed-composed-path/, window ] whereas the <closed-shadow> element's composed path is a follows: array [ closed-shadow, body, html, htmldocument https://mdn.github.
io/web-components-examples/composed-composed-path/, window ] in the second case, the event listeners only propagate as far as the <closed-shadow> element itself, but not to the nodes inside the shadow boundary.
... specificat
ions specificat
ion status comment domthe definit
ion of 'composedpath()' in that specificat
ion.
Event.type - Web APIs
html <p>press any key or click the mouse to get the event type.</p> <p id="log"></p> javascript funct
ion geteventtype(event) { const log = document.getelementbyid('log'); log.innertext = event.type + '\n' + log.innertext; } // keyboard events document.addeventlistener('keydown', geteventtype, false); // first document.addeventlistener('keypress', geteventtype, false); // second document.addeventlistener('keyup', geteventtype, false); // third // mouse events document.addeventlistener('mou...
...sedown', geteventtype, false); // first document.addeventlistener('mouseup', geteventtype, false); // second document.addeventlistener('click', geteventtype, false); // third result specificat
ions specificat
ion status comment domthe definit
ion of 'event.type' in that specificat
ion.
... living standard document object model (dom) level 2 events specificat
ionthe definit
ion of 'event.type' in that specificat
ion.
... obsolete initial definit
ion.
EventSource.onopen - Web APIs
the onopen property of the eventsource interface is an eventhandler called when an open event is received, that is when the connect
ion was just opened.
... syntax eventsource.onopen = funct
ion examples evtsource.onopen = funct
ion() { console.log("connect
ion to server opened."); }; note: you can find a full example on github — see simple sse demo using php.
... specificat
ions specificat
ion status comment html living standardthe definit
ion of 'onopen' in that specificat
ion.
... living standard initial definit
ion ...
EventSource.readyState - Web APIs
the readystate read-only property of the eventsource interface returns a number representing the state of the connect
ion.
... syntax var myreadystate = eventsource.readystate; value a number representing the state of the connect
ion.
... specificat
ions specificat
ion status comment html living standardthe definit
ion of 'readystate' in that specificat
ion.
... living standard initial definit
ion ...
ExtendableEvent() - Web APIs
init opt
ional an opt
ions object containing any custom settings that you want to apply to the event object.
... currently no possible opt
ions exist inside the spec, but this has been defined for forward compatibility across the different derived events.
... specificat
ions specificat
ion status comment service workersthe definit
ion of 'extendableevent' in that specificat
ion.
... working draft initial definit
ion.
ExtendableEvent.waitUntil() - Web APIs
the activate events in service workers use waituntil() to buffer funct
ional events such as fetch and push until the promise passed to waituntil() settles.
... note: the behav
iour described in the above paragraph was fixed in firefox 43 (see bug 1180274).
... example using waituntil() within a service worker's install event: addeventlistener('install', event => { const precache = async () => { const cache = await caches.open('static-v1'); return cache.addall([ '/', '/about/', '/static/styles.css' ]); }; event.waituntil(precache()); }); specificat
ions specificat
ion status comment service workersthe definit
ion of 'waituntil()' in that specificat
ion.
... working draft initial definit
ion ...
ExtendableMessageEvent - Web APIs
examples in the below example a page gets a handle to the serviceworker object via serviceworkerregistrat
ion.active, and then calls its postmessage() funct
ion.
... // in the page being controlled if (navigator.serviceworker) { navigator.serviceworker.register('service-worker.js'); navigator.serviceworker.addeventlistener('message', event => { // event is a messageevent object console.log(`the service worker sent me a message: ${event.data}`); }); navigator.serviceworker.ready.then( registrat
ion => { registrat
ion.active.postmessage("hi service worker"); }); } the service worker can receive the message by listening to the message event: // in the service worker addeventlistener('message', event => { // event is an extendablemessageevent object console.log(`the client sent me a message: ${event.data}`); event.source.postmessage("hi client"); }); specificat
ions specificat
ion status comment serv...
...ice workersthe definit
ion of 'extendablemessageevent' in that specificat
ion.
... working draft initial definit
ion.
FeaturePolicy.allowedFeatures() - Web APIs
the allowedfeatures() method of the featurepolicy interface returns a list of directive names of all features allowed by the feature policy.enables introspect
ion of individual directives of the feature policy it is run on.
...please note that these features might be restricted by the permiss
ions api, if the user did not grant the corrsponding permiss
ion yet.
... // first, get the feature policy object const featurepolicy = document.featurepolicy // then query feature for specific const allowed = featurepolicy.allowedfeatures() for (const directive of allowed){ console.log(directive) } specificat
ions specificat
ion status comment feature policythe definit
ion of 'allowsfeature' in that specificat
ion.
... editor's draft initial definit
ion.
FeaturePolicy.getAllowlistForFeature() - Web APIs
errors the funct
ion will raise a warning if the specified feature policy directive name is not known.
...please note that camera api might be restricted by the permiss
ions api, if the user did not grant the corrsponding permiss
ion yet.
... // first, get the feature policy object const featurepolicy = document.featurepolicy // then query feature for specific const allowlist = featurepolicy.getallowlistforfeature("camera") for (const origin of allowlist){ console.log(origin) } specificat
ion specificat
ion status comment feature policythe definit
ion of 'getallowlistforfeature' in that specificat
ion.
... editor's draft initial definit
ion.
FeaturePolicy - Web APIs
the featurepolicy interface of the feature policy api represents the set of policies applied to the current execut
ion context.
...feature whose name appears on the list might not be allowed by the feature policy of the current execut
ion context and/or might not be accessible because of user's permiss
ions.
...note that features appearing on this list might still be behind a user permiss
ion.
... specificat
ion specificat
ion status comment feature policy editor's draft initial definit
ion.
FederatedCredential - Web APIs
syntax var mycredential = new federatedcredential(init) parameters init opt
ions are: provider: a usvstring; identifying the credential provider.
... specificat
ions specificat
ion status comment credential management level 1 working draft initial definit
ion.
... desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on
iossamsung internetfederatedcredential() constructor non-standardchrome full support 51edge full support ≤79firefox ?
... safari
ios ?
FetchEvent.resultingClientId - Web APIs
the resultingclientid read-only property of the fetchevent interface is the id of the client that replaces the prev
ious client during a page navigat
ion.
... if the fetch request is a subresource request or the request's destinat
ion is report, resultingclientid will be an empty string.
... example self.addeventlistener('fetch', funct
ion(event) { console.log(event.resultingclientid); }); specificat
ions specificat
ion status comment service workersthe definit
ion of 'resultingclientid' in that specificat
ion.
... working draft initial definit
ion.
Fetch basic concepts - Web APIs
if you find a fetch concept that you feel needs explaining better, let someone know on the mdn discuss
ion forum, or mdn web docs room on matrix.
... in a nutshell at the heart of fetch are the interface abstract
ions of http requests, responses, headers, and body payloads, along with a global fetch method for initiating asynchronous resource requests.
... because the main components of http are abstracted as javascript objects, it is easy for other apis to make use of such funct
ionality.
...however, the operat
ion will work if guard is request and the header name isn't a forbidden header name .
File.File() - Web APIs
syntax new file(bits, name[, opt
ions]); parameters bits an array of arraybuffer, arraybufferview, blob, usvstring objects, or a mix of any of such objects, that will be put inside the file.
... opt
ions opt
ional an opt
ions object containing opt
ional attributes for the file.
... available opt
ions are as follows: type: a domstring representing the mime type of the content that will be put into the file.
... example var file = new file(["foo"], "foo.txt", { type: "text/plain", }); specificat
ions specificat
ion status comment file api working draft initial definit
ion ...
File.getAsBinary() - Web APIs
do not use it on product
ion sites facing the web: it will not work for every user.
... there may also be large incompatibilities between implementat
ions and the behav
ior may change in the future.
... example // fileinput is an htmlinputelement: <input type="file" id="myfileinput" multiple> var fileinput = document.getelementbyid("myfileinput"); // files is a filelist object (similar to nodelist) var files = fileinput.files; // object for allowed media types var accept = { binary : ["image/png", "image/jpeg"], text : ["text/plain", "text/css", "applicat
ion/xml", "text/html"] }; var file; for (var i = 0; i < files.length; i++) { file = files[i]; // if file type could be detected if (file !== null) { if (accept.binary.indexof(file.type) > -1) { // file is a binary, which we accept var data = file.getasbinary(); } else if (accept.text.indexof(file.type) > -1) { // file is of type text, which we accept var data...
... = file.getastext(); // modify data with string methods } } } specificat
ion not part of any specificat
ion.
GlobalEventHandlers.ondrag - Web APIs
<!doctype html> <html lang=en> <title>examples of using the ondrag global event attribute</title> <meta content="width=device-width"> <style> div { margin: 0em; padding: 2em; } #source { color: blue; border: 1px solid black; } #target { border: 1px solid black; } </style> </head> <script> funct
ion drag_handler(ev) { console.log("drag"); } funct
ion dragstart_handler(ev) { console.log("dragstart"); ev.datatransfer.setdata("text", ev.target.id); } funct
ion drop_handler(ev) { console.log("drop"); ev.currenttarget.style.background = "lightyellow"; ev.preventdefault(); var data = ev.datatransfer.getdata("text"); ev.target.appendchild(document.getelementbyid(data)); } funct
ion dragov...
...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 select
ion to move the element.</p> </div> <div id="target" ondrop="drop_handler(event);" ondragover="dragover_handler(event);">drop zone</div> </body> </html> specificat
ions specificat
ion status comment html living standardthe definit
ion of 'ondrag' in that specificat
ion.
... living standard html 5.1the definit
ion of 'ondrag' in that specificat
ion.
... recommendat
ion initial definit
ion ...
GlobalEventHandlers.ondragover - Web APIs
<!doctype html> <html lang=en> <title>examples of using the ondrag global event attribute</title> <meta content="width=device-width"> <style> div { margin: 0em; padding: 2em; } #source { color: blue; border: 1px solid black; } #target { border: 1px solid black; } </style> </head> <script> funct
ion drag_handler(ev) { console.log("drag"); } funct
ion dragstart_handler(ev) { console.log("dragstart"); ev.datatransfer.setdata("text", ev.target.id); } funct
ion drop_handler(ev) { console.log("drop"); ev.currenttarget.style.background = "lightyellow"; ev.preventdefault(); var data = ev.datatransfer.getdata("text"); ev.target.appendchild(document.getelementbyid(data)); } funct
ion dragov...
...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> <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 select
ion to move the element.</p> </div> <div id="target" ondrop="drop_handler(event);" ondragover="dragover_handler(event);">drop zone</div> </body> </html> specificat
ions specificat
ion status comment html living standardthe definit
ion of 'ondragover' in that specificat
ion.
... living standard html 5.1the definit
ion of 'ondragover' in that specificat
ion.
... recommendat
ion initial definit
ion ...
GlobalEventHandlers.ondragstart - Web APIs
<!doctype html> <html lang=en> <title>examples of using the ondrag global event attribute</title> <meta content="width=device-width"> <style> div { margin: 0em; padding: 2em; } #source { color: blue; border: 1px solid black; } #target { border: 1px solid black; } </style> </head> <script> funct
ion drag_handler(ev) { console.log("drag"); } funct
ion dragstart_handler(ev) { console.log("dragstart"); ev.datatransfer.setdata("text", ev.target.id); } funct
ion drop_handler(ev) { console.log("drop"); ev.currenttarget.style.background = "lightyellow"; ev.preventdefault(); var data = ev.datatransfer.getdata("text"); ev.target.appendchild(document.getelementbyid(data)); } funct
ion dragov...
...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> <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 select
ion to move the element.</p> </div> <div id="target" ondrop="drop_handler(event);" ondragover="dragover_handler(event);">drop zone</div> </body> </html> specificat
ions specificat
ion status comment html living standardthe definit
ion of 'ondragstart' in that specificat
ion.
... living standard html 5.1the definit
ion of 'ondragstart' in that specificat
ion.
... recommendat
ion initial definit
ion ...
GlobalEventHandlers.ondrop - Web APIs
<!doctype html> <html lang=en> <title>examples of using the ondrag global event attribute</title> <meta content="width=device-width"> <style> div { margin: 0em; padding: 2em; } #source { color: blue; border: 1px solid black; } #target { border: 1px solid black; } </style> </head> <script> funct
ion drag_handler(ev) { console.log("drag"); } funct
ion dragstart_handler(ev) { console.log("dragstart"); ev.datatransfer.setdata("text", ev.target.id); } funct
ion drop_handler(ev) { console.log("drop"); ev.currenttarget.style.background = "lightyellow"; ev.preventdefault(); var data = ev.datatransfer.getdata("text"); ev.target.appendchild(document.getelementbyid(data)); } funct
ion dragov...
...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 select
ion to move the element.</p> </div> <div id="target" ondrop="drop_handler(event);" ondragover="dragover_handler(event);">drop zone</div> </body> </html> specificat
ions specificat
ion status comment html living standardthe definit
ion of 'ondrop' in that specificat
ion.
... living standard html 5.1the definit
ion of 'ondrop' in that specificat
ion.
... recommendat
ion initial definit
ion ...
GlobalEventHandlers.onemptied - Web APIs
syntax element.onemptied = handlerfunct
ion; var handlerfunct
ion = element.onemptied; handlerfunct
ion should be either null or a javascript funct
ion specifying the handler for the event.
... notes see the dom event handlers page for informat
ion on working with on...
... see the emptied event documentat
ion for more informat
ion about the event.
... specificat
ion specificat
ion status comment html living standardthe definit
ion of 'onemptied' in that specificat
ion.
GlobalEventHandlers.onfocus - Web APIs
syntax target.onfocus = funct
ionref; value funct
ionref is a funct
ion name or a funct
ion express
ion.
... the funct
ion receives a focusevent object as its sole argument.
... html <input type="text" value="click here"> javascript let input = document.queryselector('input'); input.onblur = inputblur; input.onfocus = inputfocus; funct
ion inputblur() { input.value = 'focus has been lost'; } funct
ion inputfocus() { input.value = 'focus is here'; } result try clicking in and out of the form field, and watch its contents change accordingly.
... specificat
ions specificat
ion status comment html living standardthe definit
ion of 'onfocus' in that specificat
ion.
GlobalEventHandlers.ongotpointercapture - Web APIs
syntax target.ongotpointercapture = funct
ionref; value funct
ionref is a funct
ion name or a funct
ion express
ion.
... the funct
ion receives a pointerevent object as its sole argument.
... example funct
ion overhandler(event) { // determine the target event's gotpointercapture handler let gotcapturehandler = event.target.ongotpointercapture; } funct
ion init() { let el = document.getelementbyid('target'); el.ongotpointercapture = overhandler; } specificat
ions specificat
ion status comment pointer events – level 2the definit
ion of 'ongotpointercapture' in that specificat
ion.
... recommendat
ion ...
GlobalEventHandlers.onkeyup - Web APIs
the keyup event fires when the user releases a key that was prev
iously pressed.
... syntax target.onkeyup = funct
ionref; value funct
ionref is a funct
ion name or a funct
ion express
ion.
... the funct
ion receives a keyboardevent object as its sole argument.
... html <input> <p id="log"></p> javascript const input = document.queryselector('input'); const log = document.getelementbyid('log'); input.onkeyup = logkey; funct
ion logkey(e) { log.textcontent += ` ${e.code}`; } result specificat
ions specificat
ion status comment html living standardthe definit
ion of 'onkeyup' in that specificat
ion.
GlobalEventHandlers.onload - Web APIs
syntax target.onload = funct
ionref; value funct
ionref is the handler funct
ion to be called when the window’s load event fires.
... examples window.onload = funct
ion() { init(); dosomethingelse(); }; <!doctype html> <html> <head> <title>onload test</title> // es5 <script> funct
ion load() { console.log("load event detected!"); } window.onload = load; </script> // es2015 <script> const load = () => { console.log("load event detected!"); } window.onload = load; </script> </head> <body> <p>the load event fires when the document has finished loading!</p> </body> </html> notes the load event fires at the end of the document loading process.
... specificat
ions specificat
ion status comment html living standardthe definit
ion of 'onload' in that specificat
ion.
... living standard initial definit
ion ...
GlobalEventHandlers.onlostpointercapture - Web APIs
syntax target.onlostpointercapture = funct
ionref; value funct
ionref is a funct
ion name or a funct
ion express
ion.
... the funct
ion receives a pointerevent object as its sole argument.
... example funct
ion overhandler(event) { // determine the target event's lostpointercapture handler let lostcapturehandler = event.target.onlostpointercapture; } funct
ion init() { let el = document.getelementbyid('target'); el.onlostpointercapture = overhandler; } specificat
ions specificat
ion status comment pointer events – level 2the definit
ion of 'onlostpointercapture' in that specificat
ion.
... recommendat
ion ...
GlobalEventHandlers.onmousedown - Web APIs
syntax target.onmousedown = funct
ionref; value funct
ionref is a funct
ion name or a funct
ion express
ion.
... the funct
ion receives a mouseevent object as its sole argument.
... html <div class="container"> <div class="view" hidden></div> <img src="https://udn.realityripple.com/samples/90/a34a525ace.jpg"> </div> css .container { width: 320px; height: 213px; background: black; } .view { posit
ion: absolute; width: 100px; height: 100px; background: white; border-radius: 50%; } img { mix-blend-mode: darken; } javascript funct
ion showview(event) { view.removeattribute('hidden'); view.style.left = event.clientx - 50 + 'px'; view.style.top = event.clienty - 50 + 'px'; event.preventdefault(); } funct
ion moveview(event) { view.style.left = event.clientx - 50 + 'px'; view.style.t...
...op = event.clienty - 50 + 'px'; } funct
ion hideview(event) { view.setattribute('hidden', ''); } const container = document.queryselector('.container'); const view = document.queryselector('.view'); container.onmousedown = showview; container.onmousemove = moveview; document.onmouseup = hideview; result specificat
ion specificat
ion status comment html living standardthe definit
ion of 'onmousedown' in that specificat
ion.
GlobalEventHandlers.onmouseup - Web APIs
syntax target.onmouseup = funct
ionref; value funct
ionref is a funct
ion name or a funct
ion express
ion.
... the funct
ion receives a mouseevent object as its sole argument.
... html <div class="container"> <div class="toaster"></div> <div class="toast">hello world!</div> </div> css .container { posit
ion: absolute; left: 50%; bottom: 20px; transform: translate(-50%); } .toaster { width: 160px; height: 110px; background: #bbb; border-radius: 10px 10px 0 0; } .toast { posit
ion: 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); transit
ion: transform .3s; } .depressed { transform: translate(-50%, -50%); } javascript funct
ion dep...
...ress() { toast.classlist.add('depressed'); } funct
ion release() { toast.classlist.remove('depressed'); } const toaster = document.queryselector('.toaster'); const toast = document.queryselector('.toast'); toaster.onmousedown = depress; document.onmouseup = release; result specificat
ion specificat
ion status comment html living standardthe definit
ion of 'onmouseup' in that specificat
ion.
GlobalEventHandlers.onpointercancel - Web APIs
<html> <script> funct
ion cancelhandler(ev) { // process the pointercancel event } funct
ion init() { var el = document.getelementbyid('target1'); el.onpointercancel = cancelhandler; } </script> <body onload="init();"> <div id="target1"> touch me ...
...</div> </body> </html> specificat
ions specificat
ion status comment pointer events – level 2the definit
ion of 'onpointercancel' in that specificat
ion.
... recommendat
ion non-stable vers
ion pointer eventsthe definit
ion of 'onpointercancel' in that specificat
ion.
... obsolete initial definit
ion ...
GlobalEventHandlers.onpointerenter - Web APIs
<html> <script> funct
ion enterhandler(ev) { // process the pointerenter event } funct
ion init() { let el = document.getelementbyid('target1'); el.onpointerenter = enterhandler; } </script> <body onload="init();"> <div id="target1"> touch me ...
...</div> </body> </html> specificat
ions specificat
ion status comment pointer events – level 2the definit
ion of 'onpointerenter' in that specificat
ion.
... recommendat
ion non-stable vers
ion pointer eventsthe definit
ion of 'onpointerenter' in that specificat
ion.
... obsolete initial definit
ion ...
GlobalEventHandlers.onpointermove - Web APIs
<html> <script> funct
ion movehandler(ev) { // process the pointermove event } funct
ion init() { let el=document.getelementbyid('target1'); el.onpointermove = movehandler; } </script> <body onload="init();"> <div id="target1"> touch me ...
...</div> </body> </html> specificat
ions specificat
ion status comment pointer events – level 2the definit
ion of 'onpointermove' in that specificat
ion.
... recommendat
ion non-stable vers
ion pointer eventsthe definit
ion of 'onpointermove' in that specificat
ion.
... obsolete initial definit
ion ...
GlobalEventHandlers.onpointerout - Web APIs
<html> <script> funct
ion outhandler(ev) { // process the pointerout event } funct
ion init() { let el=document.getelementbyid('target1'); el.onpointerout = outhandler; } </script> <body onload="init();"> <div id="target1"> touch me ...
...</div> </body> </html> specificat
ions specificat
ion status comment pointer events – level 2the definit
ion of 'onpointerout' in that specificat
ion.
... recommendat
ion non-stable vers
ion pointer eventsthe definit
ion of 'onpointerout' in that specificat
ion.
... obsolete initial definit
ion ...
GlobalEventHandlers.onpointerover - Web APIs
<html> <script> funct
ion overhandler(ev) { // process the pointerover event } funct
ion init() { let el = document.getelementbyid('target1'); el.onpointerover = overhandler; } </script> <body onload="init();"> <div id="target1"> touch me ...
...</div> </body> </html> specificat
ions specificat
ion status comment pointer events – level 2the definit
ion of 'onpointerover' in that specificat
ion.
... recommendat
ion non-stable vers
ion pointer eventsthe definit
ion of 'onpointerover' in that specificat
ion.
... obsolete initial definit
ion ...
GlobalEventHandlers.onpointerup - Web APIs
<html> <script> funct
ion uphandler(ev) { // process the pointerup event } funct
ion init() { let el = document.getelementbyid('target1'); el.onpointerup = uphandler; } </script> <body onload="init();"> <div id="target1"> touch me ...
...</div> </body> </html> specificat
ions specificat
ion status comment pointer events – level 2the definit
ion of 'onpointerup' in that specificat
ion.
... recommendat
ion non-stable vers
ion pointer eventsthe definit
ion of 'onpointerup' in that specificat
ion.
... obsolete initial definit
ion ...
GlobalEventHandlers.onreset - Web APIs
syntax target.onreset = funct
ionref; value funct
ionref is a funct
ion name or a funct
ion express
ion.
... the funct
ion receives an event object as its sole argument.
... html <form id="form"> <label>test field: <input type="text"></label> <br><br> <button type="reset">reset form</button> </form> <p id="log"></p> javascript funct
ion logreset(event) { log.textcontent = `form reset!
... time stamp: ${event.timestamp}`; } const form = document.getelementbyid('form'); const log = document.getelementbyid('log'); form.onreset = logreset; result specificat
ion specificat
ion status comment html living standardthe definit
ion of 'onreset' in that specificat
ion.
HTMLBRElement - Web APIs
<div id="interfacediagram" style="display: inline-block; posit
ion: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; posit
ion: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectrat
io="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#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...
... specificat
ions specificat
ion status comment html living standardthe definit
ion of 'htmlbrelement' in that specificat
ion.
... living standard no change from html5 html5the definit
ion of 'htmlbrelement' in that specificat
ion.
... recommendat
ion no change from document object model (dom) level 2 html specificat
ion ...
HTMLCanvasElement.captureStream() - Web APIs
syntax mediastream = canvas.capturestream(framerate); parameters framerate opt
ional a double-precis
ion floating-point value that indicates the rate of capture of each frame.
... except
ions notsupportederror the value of framerate is negative.
...send it to another computer using an rtcpeerconnect
ion // pc is an rtcpeerconnect
ion created elsewhere pc.addstream(stream); specificat
ions specificat
ion status comment media capture from dom elementsthe definit
ion of 'htmlcanvaselement.capturestream()' in that specificat
ion.
... working draft initial definit
ion ...
HTMLCanvasElement.height - Web APIs
syntax var pxl = canvas.height; canvas.height = pxl; examples given this <canvas> element: <canvas id="canvas" width="300" height="300"></canvas> you can get the height of the canvas with the following code: var canvas = document.getelementbyid('canvas'); console.log(canvas.height); // 300 specificat
ions specificat
ion status comment html living standardthe definit
ion of 'htmlcanvaselement.height' in that specificat
ion.
... living standard no change since the latest snapshot, html5 html 5.1the definit
ion of 'htmlcanvaselement.height' in that specificat
ion.
... recommendat
ion html5the definit
ion of 'htmlcanvaselement.height' in that specificat
ion.
... recommendat
ion snapshot of the html living standard containing the initial definit
ion.
HTMLCanvasElement.mozGetAsFile() - Web APIs
type opt
ional a domstring which specifies the image file format to use when creating the new image file.
...for other opt
ions, see our image file type and format guide.
... funct
ion draw() { var canvas = document.getelementbyid('canvas'); var ctx = canvas.getcontext('2d'); ctx.fillstyle = 'rgb(200, 0, 0)'; ctx.fillrect(10, 10, 55, 50); ctx.fillstyle = 'rgba(0, 0, 200, 0.5)'; ctx.fillrect(30, 30, 55, 50); var link = document.getelementbyid('link'); link.addeventlistener('click', copy); } funct
ion copy() { var canvas = document.getelementbyid('canvas'); ...
... var f = canvas.mozgetasfile('test.png'); var reader = new filereader(); reader.readasdataurl(f); reader.onloadend = funct
ion() { var newimg = document.createelement('img'); newimg.src = reader.result; document.body.appendchild(newimg); } } window.addeventlistener('load', draw); specificat
ions not part of any specificat
ion.
HTMLCanvasElement: webglcontextrestored event - Web APIs
you need to reinitialize the state of your webgl applicat
ion and recreate resources.
... bubbles yes cancelable yes interface webglcontextevent event handler property none example with the help of the webgl_lose_context extens
ion, you can simulate the webglcontextrestored event: var canvas = document.getelementbyid('canvas'); var gl = canvas.getcontext('webgl'); canvas.addeventlistener('webglcontextrestored', funct
ion(e) { console.log(e); }, false); gl.getextens
ion('webgl_lose_context').restorecontext(); // "webglcontextrestored" event is logged.
... specificat
ions specificat
ion status comment webgl 1.0the definit
ion of 'webglcontextrestored' in that specificat
ion.
... recommendat
ion initial definit
ion.
HTMLCanvasElement.width - Web APIs
syntax var pxl = canvas.width; canvas.width = pxl; examples given this <canvas> element: <canvas id="canvas" width="300" height="300"></canvas> you can get the width of the canvas with the following code: var canvas = document.getelementbyid('canvas'); console.log(canvas.width); // 300 specificat
ions specificat
ion status comment html living standardthe definit
ion of 'htmlcanvaselement.width' in that specificat
ion.
... living standard no change since the latest snapshot, html5 html 5.1the definit
ion of 'htmlcanvaselement.width' in that specificat
ion.
... recommendat
ion html5the definit
ion of 'htmlcanvaselement.width' in that specificat
ion.
... recommendat
ion snapshot of the html living standard containing the initial definit
ion.
HTMLDataElement - Web APIs
<div id="interfacediagram" style="display: inline-block; posit
ion: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; posit
ion: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectrat
io="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyli...
... specificat
ions specificat
ion status comment html living standardthe definit
ion of 'htmldataelement' in that specificat
ion.
... living standard html5the definit
ion of 'htmldataelement' in that specificat
ion.
... recommendat
ion ...
HTMLDetailsElement: toggle event - Web APIs
bubbles no cancelable no interface event event handler property none default act
ion toggles the open state of the <details> element.
... html <aside id="log"> <b>open chapters:</b> <div data-id="ch1" hidden>i</div> <div data-id="ch2" hidden>ii</div> <div data-id="ch3" hidden>iii</div> </aside> <sect
ion id="summaries"> <b>chapter summaries:</b> <details id="ch1"> <summary>chapter i</summary> philosophy reproves boethius for the foolishness of his complaints against fortune.
... </details> </sect
ion> css body { display: flex; flex-direct
ion: row-reverse; } #log { flex-shrink: 0; padding-left: 3em; } #summaries { flex-grow: 1; } javascript funct
ion logitem(e) { const item = document.queryselector(`[data-id=${e.target.id}]`); item.toggleattribute('hidden'); } const chapters = document.queryselectorall('details'); chapters.foreach((chapter) => { chapter.addeventlistener(...
...'toggle', logitem); }); result specificat
ions specificat
ion status comment html living standardthe definit
ion of 'toggle event' in that specificat
ion.
HTMLElement: input event - Web APIs
for <input> elements with type=checkbox or type=rad
io, the input event should fire whenever a user toggles the control, per the html5 specificat
ion.
...this is unlike the change event, which only fires when the value is committed, such as by pressing the enter key, selecting a value from a list of opt
ions, and the like.
... html <input placeholder="enter some text" name="name"/> <p id="values"></p> javascript const input = document.queryselector('input'); const log = document.getelementbyid('values'); input.addeventlistener('input', updatevalue); funct
ion updatevalue(e) { log.textcontent = e.target.value; } result specificat
ions specificat
ion status html living standardthe definit
ion of 'input event' in that specificat
ion.
... living standard document object model (dom) level 3 events specificat
ionthe definit
ion of 'input event' in that specificat
ion.
HTMLElement.isContentEditable - Web APIs
</p> javascript document.getelementbyid('infotext1').innerhtml += document.getelementbyid('mytext1').iscontenteditable; document.getelementbyid('infotext2').innerhtml += document.getelementbyid('mytext2').iscontenteditable; result specificat
ions specificat
ion status comment html living standardthe definit
ion of 'htmlelement.contenteditable' in that specificat
ion.
... living standard no change from latest snapshot, html 5.1 html 5.1the definit
ion of 'htmlelement.contenteditable' in that specificat
ion.
... recommendat
ion snapshot of html living standard, no change from html5 html5the definit
ion of 'htmlelement.contenteditable' in that specificat
ion.
... recommendat
ion snapshot of html living standard, initial definit
ion.
HTMLElement.offsetLeft - Web APIs
however, for inline-level elements (such as span) that can wrap from one line to the next, offsettop and offsetleft describe the posit
ions of the first border box (use element.getclientrects() to get its width and height), while offsetwidth and offsetheight describe the dimens
ions of the bounding border box (use element.getboundingclientrect() to get its posit
ion).
... syntax left = element.offsetleft; left is an integer representing the offset to the left in pixels from the closest relatively posit
ioned parent element.
...</span> <span id="longspan">long span that wraps within this div.</span> </div> <div id="box" style="posit
ion: absolute; border-color: red; border-width: 1; border-style: solid; z-index: 10"> </div> <script type="text/javascript"> var box = document.getelementbyid("box"); var longspan = document.getelementbyid("longspan"); box.style.left = longspan.offsetleft + document.body.scrollleft + "px"; box.style.top = longspan.offsettop + document.body.scrolltop + "px"; box.style.width = longspan.offs...
...etwidth + "px"; box.style.height = longspan.offsetheight + "px"; </script> specificat
ion specificat
ion status comment css object model (cssom) view modulethe definit
ion of 'offsetleft' in that specificat
ion.
HTMLElement.onpaste - Web APIs
note that there is currently no dom-only way to obtain the text being pasted; you'll have to use an nsiclipboard to get that informat
ion.
... syntax target.onpaste = funct
ionref; value funct
ionref is a funct
ion name or a funct
ion express
ion.
... the funct
ion receives a clipboardevent object as its sole argument.
... html <h3>play with this text area:</h3> <textarea id="editor" rows="3">try copying and pasting text into this field!</textarea> <h3>log:</h3> <p id="log"></p> javascript funct
ion logcopy(event) { log.innertext = 'copied!\n' + log.innertext; } funct
ion logpaste(event) { log.innertext = 'pasted!\n' + log.innertext; } const editor = document.getelementbyid('editor'); const log = document.getelementbyid('log'); editor.oncopy = logcopy; editor.onpaste = logpaste; result specificat
ion whatwg standard ...
HTMLImageElement.crossOrigin - Web APIs
const imageurl = "https://mdn.mozillademos.org/files/16797/clock-demo-400px.png"; const container = document.queryselector(".container"); funct
ion loadimage(url) { const image = new image(200, 200); image.addeventlistener("load", () => container.prepend(image) ); image.addeventlistener("error", () => { const errmsg = document.createelement("output"); errmsg.value = `error loading image at ${url}`; container.append(errmsg); }); image.crossorigin = "anonymous"; image.alt = ""; image.src = url; } loadimage(i...
...thanks for reading me.</p> </div> css body { font: 1.125rem/1.5, helvetica, sans-serif; } .container { display: flow-root; width: 37.5em; border: 1px solid #d2d2d2; } img { float: left; padding-right: 1.5em; } output { background: rgba(100, 100, 100, 0.1); font-family: courier, monospace; width: 95%; } result specificat
ions specificat
ion status comment html living standardthe definit
ion of 'htmlimageelement.crossorigin' in that specificat
ion.
... desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on
iossamsung internetcrossoriginchrome full support 13edge full support 12firefox full support yesie full support 9opera full support yessafari full support ...
... safari
ios full support yessamsung internet android full support yeslegend full support full support compatibility unknown compatibility unknown ...
HTMLImageElement.decoding - Web APIs
possible values are: sync: decode the image synchronously for atomic presentat
ion with other content.
... examples var img = new image(); img.decoding = 'sync'; img.src = 'img/logo.png'; specificat
ions specificat
ion status comment html living standardthe definit
ion of 'decoding' in that specificat
ion.
... desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on
iossamsung internetdecodingchrome full support 65edge full support ≤79firefox full support 63ie no support noopera full support yessafari full support ...
... safari
ios full support 11.3samsung internet android full support 9.0legend full support full support no support no support compatibility unknown compatibility unknown ...
HTMLImageElement.naturalHeight - Web APIs
if the intrinsic height is not available—either because the image does not specify an intrinsic height or because the image data is not available in order to obtain this informat
ion, naturalheight returns 0.
... result specificat
ions specificat
ion status comment html living standardthe definit
ion of 'htmlimageelement.naturalheight' in that specificat
ion.
... desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on
iossamsung internetnaturalheightchrome full support 1edge full support 12firefox full support yesie full support 9opera full support yessafari full support ...
... safari
ios full support yessamsung internet android full support yeslegend full support full support compatibility unknown compatibility unknown ...
HTMLImageElement.naturalWidth - Web APIs
if the intrinsic width is not available—either because the image does not specify an intrinsic width or because the image data is not available in order to obtain this informat
ion, naturalwidth returns 0.
... result specificat
ions specificat
ion status comment html living standardthe definit
ion of 'htmlimageelement.naturalwidth' in that specificat
ion.
... desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on
iossamsung internetnaturalwidthchrome full support 1edge full support 12firefox full support yesie full support 9opera full support yessafari full support ...
... safari
ios full support yessamsung internet android full support yeslegend full support full support compatibility unknown compatibility unknown ...
HTMLImageElement.useMap - Web APIs
<map> that looks like this: <map name="mainmenu-map"> <area shape="circle" coords="25, 25, 75, 75" href="/index.html" alt="return to home page"> <area shape="rect" coords="25, 25, 100, 150" href="/index.html" alt="shop"> </map> given the image map named mainmenu-map, the image which uses it should look something like the following: <img src="menubox.png" usemap="#mainmenu-map"> for addit
ional examples (including interactive ones), see the articles about the <map> and <area> elements, as well as the guide to using image maps.
... specificat
ions specificat
ion status comment html living standardthe definit
ion of 'htmlimageelement.usemap' in that specificat
ion.
... desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on
iossamsung internetusemapchrome full support 1edge full support 12firefox full support yesie ?
... yessafari full support yeswebview android full support yeschrome android full support yesfirefox android full support yesopera android full support yessafari
ios full support yessamsung internet android full support yeslegend full support full support compatibility unknown compatibility unknown ...
HTMLImageElement.width - Web APIs
this is done in the window's load and resize event handlers, in order to always provide this informat
ion.
... specificat
ions specificat
ion status comment html living standardthe definit
ion of 'htmlimageelement.width' in that specificat
ion.
... desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on
iossamsung internetwidthchrome full support 1edge full support 12firefox full support yesie .html?
... yessafari full support yeswebview android full support yeschrome android full support yesfirefox android full support yesopera android full support yessafari
ios full support yessamsung internet android full support yeslegend full support full support compatibility unknown compatibility unknown ...
HTMLImageElement.x - Web APIs
html in this example, we see a table showing informat
ion about users of a web site, including their user id, their full name, and their avatar image.
... css the css defining the appearance of the table: .group1 { background-color: #d7d9f2; } table { border-collapse: collapse; border: 2px solid rgb(100, 100, 100); font-family: sans-serif; } td, th { border: 1px solid rgb(100, 100, 100); padding: 10px 14px; } td > img { max-width: 4em; } result the resulting table looks like this: specificat
ions specificat
ion status comment css object model (cssom) view modulethe definit
ion of 'htmlimageelement.x' in that specificat
ion.
... desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on
iossamsung internetxchrome full support 1edge full support 12firefox full support 14 full support 14 no support ?
...— 7opera android full support yessafari
ios full support yessamsung internet android full support yeslegend full support full support no support no support ...
HTMLImageElement.y - Web APIs
html in this example, we see a table showing informat
ion about users of a web site, including their user id, their full name, and their avatar image.
... css the css defining the appearance of the table: .group1 { background-color: #d7d9f2; } table { border-collapse: collapse; border: 2px solid rgb(100, 100, 100); font-family: sans-serif; } td, th { border: 1px solid rgb(100, 100, 100); padding: 10px 14px; } td > img { max-width: 4em; } result the resulting table looks like this: specificat
ions specificat
ion status comment css object model (cssom) view modulethe definit
ion of 'htmlimageelement.y' in that specificat
ion.
... desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on
iossamsung internetychrome full support 1edge full support 12firefox full support 14 full support 14 no support ?
...— 7opera android full support yessafari
ios full support yessamsung internet android full support yeslegend full support full support no support no support ...
HTMLMediaElement.buffered - Web APIs
syntax var timerange = aud
ioobject.buffered value a timeranges object.
... example var obj = document.createelement('video'); console.log(obj.buffered); // timeranges { length: 0 } specificat
ions specificat
ion status comment html living standardthe definit
ion of 'htmlmediaelement.buffered' in that specificat
ion.
... living standard no change from html5 html5the definit
ion of 'htmlmediaelement.buffered' in that specificat
ion.
... recommendat
ion initial definit
ion.
HTMLMediaElement: canplay event - Web APIs
bubbles no cancelable no interface event target element default act
ion none event handler property globaleventhandlers.oncanplay specificat
ion html5 media examples these examples add an event listener for the htmlmediaelement's canplay event, then post a message when that event handler has reacted to the event firing.
... addeventlistener(): const video = document.queryselector('video'); video.addeventlistener('canplay', (event) => { console.log('video can start, but not sure it will play through.'); }); using the oncanplay event handler property: const video = document.queryselector('video'); video.oncanplay = (event) => { console.log('video can start, but not sure it will play through.'); }; specificat
ions specificat
ion status html living standardthe definit
ion of 'canplay media event' in that specificat
ion.
... living standard html5the definit
ion of 'canplay media event' in that specificat
ion.
... recommendat
ion ...
HTMLMediaElement: canplaythrough event - Web APIs
bubbles no cancelable no interface event target element default act
ion none event handler property globaleventhandlers.oncanplaythrough specificat
ion html5 media examples these examples add an event listener for the htmlmediaelement's canplaythrough event, then post a message when that event handler has reacted to the event firing.
...ough', (event) => { console.log('i think i can play through the entire ' + ' video without ever having to stop to buffer.'); }); using the oncanplaythrough event handler property: const video = document.queryselector('video'); video.oncanplaythrough = (event) => { console.log('i think i can play thru the entire ' + ' video without ever having to stop to buffer.'); }; specificat
ions specificat
ion status html living standardthe definit
ion of 'canplaythrough media event' in that specificat
ion.
... living standard html5the definit
ion of 'canplaythrough media event' in that specificat
ion.
... recommendat
ion ...
HTMLMediaElement.controls - Web APIs
syntax var ctrls = video.controls; aud
io.controls = true; value a boolean.
... example var obj = document.createelement('video'); obj.controls = true; specificat
ions specificat
ion status comment html living standardthe definit
ion of 'htmlmediaelement.controls' in that specificat
ion.
... living standard no change from html5 html5the definit
ion of 'htmlmediaelement.controls' in that specificat
ion.
... recommendat
ion initial definit
ion.
HTMLMediaElement: emptied event - Web APIs
bubbles no cancelable no interface event target element default act
ion none event handler property globaleventhandlers.onemptied specificat
ion html5 media examples these examples add an event listener for the htmlmediaelement's emptied event, then post a message when that event handler has reacted to the event firing.
...did you call load()?'); }; specificat
ions specificat
ion status html living standardthe definit
ion of 'emptied media event' in that specificat
ion.
... living standard html5the definit
ion of 'emptied media event' in that specificat
ion.
... recommendat
ion ...
HTMLMediaElement: loadstart event - Web APIs
" "video log"; } button { grid-area: button; width: 10rem; margin: .5rem 0; } video { grid-area: video; } .event-log { grid-area: log; } .event-log>label { display: block; } js const loadvideo = document.queryselector('button'); const video = document.queryselector('video'); const eventlog = document.queryselector('.event-log-contents'); let source = null; funct
ion 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.locat
ion.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 specificat
ions specificat
ion status html living standardthe definit
ion of 'loadstart media event' in that specificat
ion.
... living standard html5the definit
ion of 'loadstart media event' in that specificat
ion.
... recommendat
ion ...
HTMLMediaElement.loop - Web APIs
syntax var loop = video.loop; aud
io.loop = true; value a boolean.
... example var obj = document.createelement('video'); obj.loop = true; // true specificat
ions specificat
ion status comment html living standardthe definit
ion of 'htmlmediaelement.loop' in that specificat
ion.
... living standard html5the definit
ion of 'htmlmediaelement.loop' in that specificat
ion.
... recommendat
ion ...
HTMLMediaElement.muted - Web APIs
syntax var ismuted = aud
ioorvideo.muted aud
io.muted = true; value a boolean.
... example var obj = document.createelement('video'); console.log(obj.muted); // false specificat
ions specificat
ion status comment html living standardthe definit
ion of 'htmlmediaelement.muted' in that specificat
ion.
... living standard html5the definit
ion of 'htmlmediaelement.muted' in that specificat
ion.
... recommendat
ion ...
HTMLMediaElement: pause event - Web APIs
general info bubbles no cancelable no interface event target element default act
ion none event handler property globaleventhandlers.onpause specificat
ion html5 media examples these examples add an event listener for the htmlmediaelement's pause event, then post a message when that event handler has reacted to the event firing.
...either the ' + 'pause() method was called or the autoplay attribute was toggled.'); }; specificat
ions specificat
ion status html living standardthe definit
ion of 'pause media event' in that specificat
ion.
... living standard html5the definit
ion of 'pause media event' in that specificat
ion.
... recommendat
ion ...
HTMLMediaElement.paused - Web APIs
syntax var ispaused = aud
ioorvideo.paused value a boolean.
... example var obj = document.createelement('video'); console.log(obj.paused); // true specificat
ions specificat
ion status comment html living standardthe definit
ion of 'htmlmediaelement.paused' in that specificat
ion.
... living standard html5the definit
ion of 'htmlmediaelement.paused' in that specificat
ion.
... recommendat
ion ...
HTMLMediaElement: play event - Web APIs
bubbles no cancelable no interface event target element default act
ion none event handler property globaleventhandlers.onplay specificat
ion html5 media examples these examples add an event listener for the htmlmediaelement's play event, then post a message when that event handler has reacted to the event firing.
...either the ' + 'play() method was called or the autoplay attribute was toggled.'); }; specificat
ions specificat
ion status html living standardthe definit
ion of 'play media event' in that specificat
ion.
... living standard html5the definit
ion of 'play media event' in that specificat
ion.
... recommendat
ion ...
HTMLMediaElement: playing event - Web APIs
bubbles no cancelable no interface event target element default act
ion none event handler property globaleventhandlers.onplaying specificat
ion html5 media examples these examples add an event listener for the htmlmediaelement's playing event, then post a message when that event handler has reacted to the event firing.
... using addeventlistener(): const video = document.queryselector('video'); video.addeventlistener('playing', (event) => { console.log('video is no longer paused'); }); using the onplaying event handler property: const video = document.queryselector('video'); video.onplaying = (event) => { console.log('video is no longer paused.'); }; specificat
ions specificat
ion status html living standardthe definit
ion of 'playing media event' in that specificat
ion.
... living standard html5the definit
ion of 'playing media event' in that specificat
ion.
... recommendat
ion ...
HTMLMediaElement: ratechange event - Web APIs
bubbles no cancelable no interface event target element default act
ion none event handler property globaleventhandlers.onratechange specificat
ion html5 media examples these examples add an event listener for the htmlmediaelement's ratechange event, then post a message when that event handler has reacted to the event firing.
... using addeventlistener(): const video = document.queryselector('video'); video.addeventlistener('ratechange', (event) => { console.log('the playback rate changed.'); }); using the onratechange event handler property: const video = document.queryselector('video'); video.onratechange = (event) => { console.log('the playback rate changed.'); }; specificat
ions specificat
ion status html living standardthe definit
ion of 'ratechange media event' in that specificat
ion.
... living standard html5the definit
ion of 'ratechange media event' in that specificat
ion.
... recommendat
ion ...
HTMLMediaElement.src - Web APIs
note: the best way to know the url of the media resource currently in active use in this element is to look at the value of the currentsrc attribute, which also takes into account select
ion of a best or preferred media resource from a list provided in an htmlsourceelement (which represents a <source> element).
... example var obj = document.createelement('video'); console.log(obj.src); // "" specificat
ions specificat
ion status comment html living standardthe definit
ion of 'htmlmediaelement.src' in that specificat
ion.
... living standard no change from html5 html5the definit
ion of 'htmlmediaelement.src' in that specificat
ion.
... recommendat
ion initial definit
ion.
HTMLMediaElement.srcObject - Web APIs
usage notes older vers
ions of the media source specificat
ion required using createobjecturl() to create an object url then setting src to that url.
... const mediasource = new mediasource(); const video = document.createelement('video'); video.srcobject = mediasource; supporting fallback to the src property the examples below support older browser vers
ions that require you to create an object url and assign it to src if srcobject isn't supported.
...ment.createelement('video'); // older browsers may not have srcobject if ('srcobject' in video) { try { video.srcobject = mediasource; } catch (err) { if (err.name != "typeerror") { throw err; } // even if they do, they may only support mediastream video.src = url.createobjecturl(mediasource); } } else { video.src = url.createobjecturl(mediasource); } specificat
ions specificat
ion status comment html living standardthe definit
ion of 'srcobject' in that specificat
ion.
... living standard initial definit
ion.
HTMLMediaElement: stalled event - Web APIs
bubbles no cancelable no interface event target element default act
ion none event handler property globaleventhandlers.onstalled specificat
ion html5 media examples these examples add an event listener for the htmlmediaelement's stalled event, then post a message when that event handler has reacted to the event firing.
... using addeventlistener(): const video = document.queryselector('video'); video.addeventlistener('stalled', (event) => { console.log('failed to fetch data, but trying.'); }); using the onstalled event handler property: const video = document.queryselector('video'); video.onstalled = (event) => { console.log('failed to fetch data, but trying.'); }; specificat
ions specificat
ion status html living standardthe definit
ion of 'stalled media event' in that specificat
ion.
... living standard html5the definit
ion of 'stalled media event' in that specificat
ion.
... recommendat
ion ...
HTMLMediaElement: suspend event - Web APIs
bubbles no cancelable no interface event target element default act
ion none event handler property globaleventhandlers.onsuspend specificat
ion html5 media examples these examples add an event listener for the htmlmediaelement's suspend event, then post a message when that event handler has reacted to the event firing.
... using addeventlistener(): const video = document.queryselector('video'); video.addeventlistener('suspend', (event) => { console.log('data loading has been suspended.'); }); using the onsuspend event handler property: const video = document.queryselector('video'); video.onsuspend = (event) => { console.log('data loading has been suspended.'); }; specificat
ions specificat
ion status html living standardthe definit
ion of 'suspend media event' in that specificat
ion.
... living standard html5the definit
ion of 'suspend media event' in that specificat
ion.
... recommendat
ion ...
HTMLMediaElement: timeupdate event - Web APIs
bubbles no cancelable no interface event target element default act
ion none event handler property globaleventhandlers.ontimeupdate specificat
ion html5 media examples these examples add an event listener for the htmlmediaelement's timeupdate event, then post a message when that event handler has reacted to the event firing.
...again.'); }; specificat
ions specificat
ion status html living standardthe definit
ion of 'timeupdate media event' in that specificat
ion.
... living standard html5the definit
ion of 'timeupdate media event' in that specificat
ion.
... recommendat
ion ...
HTMLMediaElement: volumechange event - Web APIs
bubbles no cancelable no interface event target element default act
ion none event handler property globaleventhandlers.onvolumechange specificat
ion html5 media examples these examples add an event listener for the htmlmediaelement's volumechange event, then post a message when that event handler has reacted to the event firing.
... using addeventlistener(): const video = document.queryselector('video'); video.addeventlistener('volumechange', (event) => { console.log('the volume changed.'); }); using the onvolumechange event handler property: const video = document.queryselector('video'); video.onvolumechange = (event) => { console.log('the volume changed.'); }; specificat
ions specificat
ion status html living standardthe definit
ion of 'volumechange media event' in that specificat
ion.
... living standard html5the definit
ion of 'volumechange media event' in that specificat
ion.
... recommendat
ion ...
HTMLMediaElement: waiting event - Web APIs
bubbles no cancelable no interface event target element default act
ion none event handler property globaleventhandlers.onwaiting specificat
ion html5 media examples these examples add an event listener for the htmlmediaelement's waiting event, then post a message when that event handler has reacted to the event firing.
... using addeventlistener(): const video = document.queryselector('video'); video.addeventlistener('waiting', (event) => { console.log('video is waiting for more data.'); }); using the onwaiting event handler property: const video = document.queryselector('video'); video.onwaiting = (event) => { console.log('video is waiting for more data.'); }; specificat
ions specificat
ion status html living standardthe definit
ion of 'waiting media event' in that specificat
ion.
... living standard html5the definit
ion of 'waiting media event' in that specificat
ion.
... recommendat
ion ...
HTMLMenuItemElement - Web APIs
<div id="interfacediagram" style="display: inline-block; posit
ion: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; posit
ion: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectrat
io="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">e...
...12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlmenuitemelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} propertiesthis interface has no properties, but inherits properties from: htmlelementmethodsthis interface has no methods, but inherits methods from: htmlelement specificat
ions specificat
ion status comment html 5.1the definit
ion of 'htmlmenuitemelement' in that specificat
ion.
... recommendat
ion snapshot of the html living standard.
... initial definit
ion.
HTMLObjectElement.checkValidity - Web APIs
the checkvalidity() method of the htmlobjectelement interface returns a boolean that always is true, because object objects are never candidates for constraint validat
ion.
... return value true except
ions none.
... specificat
ions specificat
ion status comment html living standardthe definit
ion of 'checkvalidity' in that specificat
ion.
... living standard initial definit
ion.
HTMLElement.blur() - Web APIs
syntax element.blur(); examples remove focus from a text input html <input type="text" id="mytext" value="sample text"> <br><br> <button type="button" onclick="focusinput()">click me to gain focus</button> <button type="button" onclick="blurinput()">click me to lose focus</button> javascript funct
ion focusinput() { document.getelementbyid('mytext').focus(); } funct
ion blurinput() { document.getelementbyid('mytext').blur(); } result specificat
ion specificat
ion status comment html living standardthe definit
ion of 'blur' in that specificat
ion.
... living standard html 5.1the definit
ion of 'blur' in that specificat
ion.
... recommendat
ion html5the definit
ion of 'blur' in that specificat
ion.
... recommendat
ion document object model (dom) level 2 html specificat
ionthe definit
ion of 'blur' in that specificat
ion.
HTMLSelectElement.autofocus - Web APIs
setting it after the insert
ion, that is most of the time after the document load, has no visible effect.
... syntaxedit abool = aselectelement.autofocus; // get the value of autofocus aselectelement.autofocus = abool; // set the value of autofocus example html <select id="myselect" autofocus> <opt
ion>opt
ion 1</opt
ion> <opt
ion>opt
ion 2</opt
ion> </select> javascript // check if the autofocus attribute on the <select> var hasautofocus = document.getelementbyid('myselect').autofocus; specificat
ions specificat
ion status comment html living standardthe definit
ion of 'autofocus' in that specificat
ion.
... living standard html 5.2the definit
ion of 'autofocus' in that specificat
ion.
... recommendat
ion ...
HTMLSelectElement.disabled - Web APIs
<input id="allow-drinks" type="checkbox"/> </label> <label for="drink-select">drink select
ion:</label> <select id="drink-select" disabled> <opt
ion value="1">water</opt
ion> <opt
ion value="2">beer</opt
ion> <opt
ion value="3">pepsi</opt
ion> <opt
ion value="4">whisky</opt
ion> </select> javascript var allowdrinkscheckbox = document.getelementbyid("allow-drinks"); var drinkselect = document.getelementbyid("drink-select"); allowdrinkscheckbox.addeventlistener("change", funct
ion(event)...
... { if (event.target.checked) { drinkselect.disabled = false; } else { drinkselect.disabled = true; } }, false); result specificat
ions specificat
ion status comment html living standardthe definit
ion of 'disabled' in that specificat
ion.
... living standard html5the definit
ion of 'htmlselectelement' in that specificat
ion.
... recommendat
ion initial definit
ion, snapshot of html living standard.
HTMLSelectElement.labels - Web APIs
example html <label id="label1" for="test">label 1</label> <select id="test"> <opt
ion value="1">opt
ion 1</opt
ion> <opt
ion value="2">opt
ion 2</opt
ion> </select> <label id="label2" for="test">label 2</label> javascript window.addeventlistener("domcontentloaded", funct
ion() { const select = document.getelementbyid("test"); for(var i = 0; i < select.labels.length; i++) { console.log(select.labels[i].textcontent); // "label 1" and "label 2" } }); specificat
ions specificat
ion status comment ...
... html living standardthe definit
ion of 'labels' in that specificat
ion.
... living standard no change html5the definit
ion of 'labels' in that specificat
ion.
... recommendat
ion initial definit
ion ...
HTMLSelectElement.setCustomValidity() - Web APIs
the htmlselectelement.setcustomvalidity() method sets the custom validity message for the select
ion element to the specified message.
... specificat
ions specificat
ion status comment html living standardthe definit
ion of 'htmlselectelement.setcustomvalidity()' in that specificat
ion.
... html5the definit
ion of 'htmlselectelement.setcustomvalidity()' in that specificat
ion.
... recommendat
ion initial definit
ion, snapshot of html living standard ...
HTMLSlotElement - Web APIs
methods htmlslotelement.assignednodes() returns a sequence of the nodes assigned to this slot, and if the flatten opt
ion is set to true, the assigned nodes of any other slots that are descendants of this slot.
...if the flatten opt
ion is set to true, it also returns the assigned elements of any other slots that are descendants of this slot.
... let slots = this.shadowroot.queryselectorall('slot'); slots[1].addeventlistener('slotchange', funct
ion(e) { let nodes = slots[1].assignednodes(); console.log('element in slot "' + slots[1].name + '" changed to "' + nodes[0].outerhtml + '".'); }); here we grab references to all the slots, then add a slotchange event listener to the 2nd slot in the template — which is the one that keeps having its contents changed in the example.
... specificat
ions specificat
ion status comment html living standardthe definit
ion of 'htmlslotelement' in that specificat
ion.
HTMLTemplateElement - Web APIs
<div id="interfacediagram" style="display: inline-block; posit
ion: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; posit
ion: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectrat
io="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1=...
... specificat
ions specificat
ion status comment html living standardthe definit
ion of 'htmltemplateelement interface' in that specificat
ion.
... living standard html5the definit
ion of 'htmltemplateelement interface' in that specificat
ion.
... recommendat
ion initial definit
ion ...
HTMLVideoElement.msInsertVideoEffect() - Web APIs
do not use it on product
ion sites facing the web: it will not work for every user.
... there may also be large incompatibilities between implementat
ions and the behav
ior may change in the future.
... configopt
ional an opt
ional object to help with defining any addit
ional configurat
ion needed.
... example var ovideo1 = document.getelementbyid("video1"); ovideo1.msinsertvideoeffect("windows.media.videoeffects.videostabilizat
ion", true, null); see also htmlvideoelement microsoft api extens
ions ...
History.length - Web APIs
the history.length read-only property returns an integer representing the number of elements in the sess
ion history, including the currently loaded page.
... syntax const length = history.length specificat
ions specificat
ion status comment html living standardthe definit
ion of 'history.length' in that specificat
ion.
... html5the definit
ion of 'history.length' in that specificat
ion.
... recommendat
ion initial definit
ion.
IDBDatabase: abort event - Web APIs
the abort event is fired on idbdatabase when a transact
ion is aborted and bubbles up to the connect
ion object.
... bubbles yes cancelable no interface event event handler property onabort examples this example opens a database (creating the database if it does not exist), then opens a transact
ion, adds a listener to the abort event, then aborts the transact
ion to trigger the event.
...); objectstore.createindex('minutes', 'minutes', { unique: false }); objectstore.createindex('day', 'day', { unique: false }); objectstore.createindex('month', 'month', { unique: false }); objectstore.createindex('year', 'year', { unique: false }); }; dbopenrequest.onsuccess = (event) => { const db = dbopenrequest.result; db.addeventlistener('abort', () => { console.log('transact
ion aborted'); }); // open a read/write db transact
ion, ready for adding the data const transact
ion = db.transact
ion(['todolist'], 'readwrite'); // abort the transact
ion transact
ion.abort(); }; the same example, but assigning the event handler to the onabort property: // open the database const dbopenrequest = window.indexeddb.open('todolist', 4); dbopenrequest.onupgradeneeded = (eve...
... unique: false }); objectstore.createindex('minutes', 'minutes', { unique: false }); objectstore.createindex('day', 'day', { unique: false }); objectstore.createindex('month', 'month', { unique: false }); objectstore.createindex('year', 'year', { unique: false }); }; dbopenrequest.onsuccess = (event) => { const db = dbopenrequest.result; db.onabort = () => { console.log('transact
ion aborted'); }; // open a read/write db transact
ion, ready for adding the data const transact
ion = db.transact
ion(['todolist'], 'readwrite'); // abort the transact
ion transact
ion.abort(); }; ...
IDBDatabase: close event - Web APIs
the close event is fired on idbdatabase when the database connect
ion is unexpectedly closed.
... note that it is not fired if the database connect
ion is closed normally using idbdatabase.close().
...ectstore.createindex('minutes', 'minutes', { unique: false }); objectstore.createindex('day', 'day', { unique: false }); objectstore.createindex('month', 'month', { unique: false }); objectstore.createindex('year', 'year', { unique: false }); }; dbopenrequest.onsuccess = (event) => { const db = dbopenrequest.result; db.addeventlistener('close', () => { console.log('database connect
ion closed'); }); }; the same example, using the onclose property instead of addeventlistener(): // open the database const dbopenrequest = window.indexeddb.open('todolist', 4); dbopenrequest.onupgradeneeded = (event) => { const db = event.target.result; // create an objectstore for this database const objectstore = db.createobjectstore('todolist', { keypath: 'tasktitle' }); // defi...
... false }); objectstore.createindex('minutes', 'minutes', { unique: false }); objectstore.createindex('day', 'day', { unique: false }); objectstore.createindex('month', 'month', { unique: false }); objectstore.createindex('year', 'year', { unique: false }); }; dbopenrequest.onsuccess = (event) => { const db = dbopenrequest.result; db.onclose = () => { console.log('database connect
ion closed'); }; }; ...
IDBDatabase: error event - Web APIs
the error event is fired on idbdatabase when a request returns an error and the event bubbles up to the connect
ion object.
... bubbles yes cancelable no interface event event handler property onerror examples this example opens a database and tries to add a record, listening for the error event for the add() operat
ion (this will occur if, for example, a record with the given tasktitle already exists): // open the database const dbopenrequest = window.indexeddb.open('todolist', 4); dbopenrequest.onupgradeneeded = (event) => { const db = event.target.result; // create an objectstore for this database const objectstore = db.createobjectstore('todolist', { keypath: 'tasktitle' }); // define what data items the objectstore will contain objectstore.createindex('hours', 'hours', { unique: false }); objectstore.createindex('minutes', 'minutes', { uniq...
...lse }); objectstore.createindex('year', 'year', { unique: false }); }; dbopenrequest.onsuccess = (event) => { const newitem = { tasktitle: 'my task', hours: 10, minutes: 10, day: 10, month: 'january', year: 2020 }; const db = dbopenrequest.result; db.addeventlistener('error', () => { console.log(`error adding new item: ${newitem.tasktitle}`); }); // open a read/write db transact
ion, ready for adding the data const transact
ion = db.transact
ion(['todolist'], 'readwrite'); const objectstore = transact
ion.objectstore('todolist'); const objectstorerequest = objectstore.add(newitem); }; the same example, using the onerror property instead of addeventlistener(): // open the database const dbopenrequest = window.indexeddb.open('todolist', 4); dbopenrequest.onupgradeneede...
...th', { unique: false }); objectstore.createindex('year', 'year', { unique: false }); }; dbopenrequest.onsuccess = (event) => { const newitem = { tasktitle: 'my task', hours: 10, minutes: 10, day: 10, month: 'january', year: 2020 }; const db = dbopenrequest.result; db.onerror = () => { console.log(`error adding new item: ${newitem.tasktitle}`); }; // open a read/write db transact
ion, ready for adding the data const transact
ion = db.transact
ion(['todolist'], 'readwrite'); const objectstore = transact
ion.objectstore('todolist'); const objectstorerequest = objectstore.add(newitem); }; ...
IDBIndex.isAutoLocale - Web APIs
the isautolocale read-only property of the idbindex interface returns a boolean indicating whether the index had a locale value of auto specified upon its creat
ion (see createindex()'s opt
ionalparameters.) syntax var myindex = objectstore.index('index'); console.log(myindex.isautolocale); value a boolean.
... example in the following example we open a transact
ion and an object store, then get the index lname from a simple contacts database.
... funct
ion displaydatabyindex() { tableentry.innerhtml = ''; var transact
ion = db.transact
ion(['contactslist'], 'readonly'); var objectstore = transact
ion.objectstore('contactslist'); var myindex = objectstore.index('lname'); console.log(myindex.isautolocale); myindex.opencursor().onsuccess = funct
ion(event) { var cursor = event.target.result; if(cursor) { var tablerow = document.createelement('tr'); tablerow.innerhtml = '<td>' + cursor.value.id + '</td>' ...
... + '<td>' + cursor.value.company + '</td>' + '<td>' + cursor.value.email + '</td>' + '<td>' + cursor.value.phone + '</td>' + '<td>' + cursor.value.age + '</td>'; tableentry.appendchild(tablerow); cursor.continue(); } else { console.log('entries all displayed.'); } }; }; specificat
ions not currently part of any specificat
ion.
IDBIndex.locale - Web APIs
the locale read-only property of the idbindex interface returns the locale of the index (for example en-us, or pl) if it had a locale value specified upon its creat
ion (see createindex()'s opt
ionalparameters.) note that this property always returns the current locale being used in this index, in other words, it never returns "auto".
... example in the following example we open a transact
ion and an object store, then get the index lname from a simple contacts database.
... funct
ion displaydatabyindex() { tableentry.innerhtml = ''; var transact
ion = db.transact
ion(['contactslist'], 'readonly'); var objectstore = transact
ion.objectstore('contactslist'); var myindex = objectstore.index('lname'); console.log(myindex.locale); myindex.opencursor().onsuccess = funct
ion(event) { var cursor = event.target.result; if(cursor) { var tablerow = document.createelement('tr'); tablerow.innerhtml = '<td>' + cursor.value.id + '</td>' ...
... + '<td>' + cursor.value.company + '</td>' + '<td>' + cursor.value.email + '</td>' + '<td>' + cursor.value.phone + '</td>' + '<td>' + cursor.value.age + '</td>'; tableentry.appendchild(tablerow); cursor.continue(); } else { console.log('entries all displayed.'); } }; }; specificat
ion not currently part of any specificat
ion.
FileHandle.onabort - Web APIs
do not use it on product
ion sites facing the web: it will not work for every user.
... there may also be large incompatibilities between implementat
ions and the behav
ior may change in the future.
... syntax instanceoffilehandle.onabort = funcref; where funcref is a funct
ion to be called when the abort event occurs.
... specificat
ions specificat
ion status comment filesystem api editor's draft draft proposal.
FileHandle.onerror - Web APIs
do not use it on product
ion sites facing the web: it will not work for every user.
... there may also be large incompatibilities between implementat
ions and the behav
ior may change in the future.
... syntax instanceoffilehandle.onerror = funcref; where funcref is a funct
ion to be called when the error event occurs.
... specificat
ions specificat
ion status comment filesystem api editor's draft draft proposal.
IDBOpenDBRequest: blocked event - Web APIs
the blocked handler is executed when an open connect
ion to a database is blocking a vers
ionchange transact
ion on the same database.
... bubbles no cancelable no interface idbvers
ionchangeevent event handler property onblocked examples using addeventlistener(): // open the database const dbopenrequest = window.indexeddb.open('todolist', 4); dbopenrequest.onupgradeneeded = (event) => { const db = event.target.result; db.onerror = () => { console.log('error creating database'); }; // create an objectstore for this database var objectstore = db.createobjectstore('todolist', { keypath: 'tasktitle' }); // define what data items the objectstore will contain objectstore.createindex('hours', 'hours', { unique: false }); objectstore.createindex('minutes', 'minutes', { unique: false }); objectstore.createindex('day', 'day', { unique: false }); object...
...store.createindex('month', 'month', { unique: false }); objectstore.createindex('year', 'year', { unique: false }); }; dbopenrequest.onsuccess = (event) => { // let's try to open the same database with a higher revis
ion vers
ion const req2 = indexeddb.open('todolist', 5); // in this case the onblocked handler will be executed req2.addeventlistener('blocked', () => { console.log('request was blocked'); }); }; using the onblocked property: // open the database const dbopenrequest = window.indexeddb.open('todolist', 4); dbopenrequest.onupgradeneeded = (event) => { const db = event.target.result; db.onerror = () => { console.log('error creating database'); }; // create an objectstore for this database var objectstore = db.createobjectstore('todolist', { keypa...
...ndex('hours', 'hours', { unique: false }); objectstore.createindex('minutes', 'minutes', { unique: false }); objectstore.createindex('day', 'day', { unique: false }); objectstore.createindex('month', 'month', { unique: false }); objectstore.createindex('year', 'year', { unique: false }); }; dbopenrequest.onsuccess = (event) => { // let's try to open the same database with a higher revis
ion vers
ion const req2 = indexeddb.open('todolist', 5); // in this case the onblocked handler will be executed req2.onblocked = () => { console.log('request was blocked'); }; }; ...
IdleDeadline - Web APIs
it offers a method, timeremaining(), which lets you determine how much longer the user agent estimates it will remain idle and a property, didtimeout, which lets you determine if your callback is executing because its timeout durat
ion expired.
... methods idledeadline.timeremaining() returns a domhighrestimestamp, which is a floating-point value providing an estimate of the number of milliseconds remaining in the current idle per
iod.
... if the idle per
iod is over, the value is 0.
... specificat
ions specificat
ion status comment cooperative scheduling of background tasks proposed recommendat
ion ...
ImageCapture.getPhotoCapabilities() - Web APIs
the getphotocapabilities() method of the imagecapture interface returns a promise that resolves with a photocapabilities object containing the ranges of available configurat
ion opt
ions.
... example the following example, extracted from chrome's image capture / photo resolut
ion sample, uses the results from getphotocapabilities() to modify the size of an input range.
...ilities => { const settings = imagecapture.track.getsettings(); input.min = photocapabilities.imagewidth.min; input.max = photocapabilities.imagewidth.max; input.step = photocapabilities.imagewidth.step; return imagecapture.getphotosettings(); }) .then(photosettings => { input.value = photosettings.imagewidth; }) .catch(error => console.log('argh!', error.name || error)); specificat
ions specificat
ion status comment mediastream image capturethe definit
ion of 'getphotocapabilities()' in that specificat
ion.
... working draft initial definit
ion.
ImageData() - Web APIs
syntax new imagedata(array, width [, height]); new imagedata(width, height); parameters array opt
ional a uint8clampedarray containing the underlying pixel representat
ion of the image.
...this value is opt
ional if an array is given: the height will be inferred from the array's size and the given width.
...int8clampedarray(40000); // iterate through every pixel for (let i = 0; i < arr.length; i += 4) { arr[i + 0] = 0; // r value arr[i + 1] = 190; // g value arr[i + 2] = 0; // b value arr[i + 3] = 255; // a value } // initialize a new imagedata object let imagedata = new imagedata(arr, 200); // draw image data to the canvas ctx.putimagedata(imagedata, 20, 20); result specificat
ion specificat
ion status comment html living standardthe definit
ion of 'imagedata()' in that specificat
ion.
... living standard initial definit
ion.
enabled - Web APIs
summary indicates whether or not software installat
ion is enabled for this client machine.
... method of installtrigger object syntax boolean enabled (); parameters none returns true if software installat
ion is enabled for this client machine; otherwise, false.
... the method reflects the value of the software installat
ion preference in the user interface, and of the xpinstall.enabled preference in pref.js.
... example the following code uses the startsoftwareupdate method to uncondit
ionally trigger a download from http://royalairways/royalpkg.xpi as long as software installat
ion is enabled on the browser: if (installtrigger.enabled() ) { installtrigger.startsoftwareupdate ("http://royalair.com/rasoft.xpi"); } ...
startSoftwareUpdate - Web APIs
summary triggers the downloading and installat
ion of the software at the specified url.
... method of installtrigger object syntax boolean startsoftwareupdate ( string url); parameters the startsoftwareupdate method has the following parameter: url a uniform resource locator specifying the locat
ion of the xpi file containing the software.
... descript
ion the startsoftwareupdate method triggers a software download and install from the specified url.
...note also that xpis installed with this method must have their own install.js files in which the full installat
ion is defined.
Keyboard.getLayoutMap() - Web APIs
the getlayoutmap() method of the keyboard interface returns a promise that resolves with an instance of keyboardlayoutmap which is a map-like object with funct
ions for retrieving the strings associated with specific physical keys.
... example the following example demonstrates how to get the locat
ion- or layout-specific string associated with the key that corresponds to the 'w' key on an english qwerty keyboard.
... var keyboard = navigator.keyboard; keyboard.getlayoutmap() .then(keyboardlayoutmap => { var upkey = keyboardlayoutmap.get('keyw'); window.alert('press ' + upkey + ' to move up.'); }) specificat
ions specificat
ion status comment keyboard mapthe definit
ion of 'getlayoutmap()' in that specificat
ion.
... editor's draft initial definit
ion.
Keyboard.lock() - Web APIs
syntax var promise = keyboard.lock([keycodes[]]) parameters keycodes opt
ional an array of one or more key codes to lock.
...assuming a standard us qwerty layout, registering "keyw" ensures that "w", shift+"w", control+"w", control+shift+"w", and all other key modifier combinat
ions with "w" are sent to the app.
... navigator.keyboard.lock(["keyw", "keya", "keys", "keyd"]); specificat
ions specificat
ion status comment keyboard lockthe definit
ion of 'lock()' in that specificat
ion.
... editor's draft initial definit
ion.
KeyboardEvent.altKey - Web APIs
the keyboardevent.altkey read-only property is a boolean that indicates if the alt key (opt
ion or ⌥ on os x) was pressed (true) or not (false) when the event occured.
... syntax var altkeypressed = instanceofkeyboardevent.altkey return value boolean examples <html> <head> <title>altkey example</title> <script type="text/javascript"> funct
ion showchar(e){ alert( "key keydown: " + string.fromcharcode(e.charcode) + "\n" + "charcode: " + e.charcode + "\n" + "alt key keydown: " + e.altkey + "\n" ); } </script> </head> <body onkeydown="showchar(event);"> <p> press any character key, with or without holding down the alt key.<br /> you can also use the shift key together with the alt key.
... </p> </body> </html> specificat
ions specificat
ion status comment document object model (dom) level 3 events specificat
ionthe definit
ion of 'keyboardevent.altkey' in that specificat
ion.
... obsolete initial definit
ion.
KeyboardEvent.keyCode - Web APIs
the deprecated keyboardevent.keycode read-only property represents a system and implementat
ion dependent numerical code identifying the unmodified value of the pressed key.
... example window.addeventlistener("keydown", funct
ion (event) { if (event.defaultprevented) { return; // should do nothing if the default act
ion has been cancelled } var handled = false; if (event.key !== undefined) { // handle the event with keyboardevent.key and set handled true.
... } if (handled) { // suppress "double act
ion" if event handled event.preventdefault(); } }, true); specificat
ions specificat
ion status comment document object model (dom) level 3 events specificat
ionthe definit
ion of 'keyboardevent.keycode' in that specificat
ion.
... obsolete initial definit
ion; specified as deprecated ...
KeyframeEffect.target - Web APIs
it may be null for animat
ions that do not target a specific element.
... it performs as both a getter and a setter, except with animat
ions and transit
ions generated by css.
... syntax var targetelement = document.getelementbyid("elementtoanimate"); var keyframes = new keyframeeffect( targetelement, keyframeblock, timingopt
ions ); // returns #elementtoanimate keyframes.target; // assigns keyframes a new target keyframes.target = newtargetelement; value an element, csspseudoelement, or null.
... examples in the follow the white rabbit example, whiterabbit sets the target element to be animated: var whiterabbit = document.getelementbyid("rabbit"); var rabbitdownkeyframes = new keyframeeffect( whiterabbit, [ { transform: 'translatey(0%)' }, { transform: 'translatey(100%)' } ], { durat
ion: 3000, fill: 'forwards' } ); // returns <div id="rabbit">click the rabbit's ears!</div> rabbitdownkeyframes.target; specificat
ions specificat
ion status comment web animat
ionsthe definit
ion of 'keyframeeffect' in that specificat
ion.
LockedFile.active - Web APIs
do not use it on product
ion sites facing the web: it will not work for every user.
... there may also be large incompatibilities between implementat
ions and the behav
ior may change in the future.
...if the object is inactive then it is impossible to perform any read or write operat
ion with it.
... specificat
ions specificat
ion status comment filesystem api editor's draft draft proposal.
LockedFile.getMetadata() - Web APIs
do not use it on product
ion sites facing the web: it will not work for every user.
... there may also be large incompatibilities between implementat
ions and the behav
ior may change in the future.
... syntax var request = instanceoflockedfile.getmetadata(param); parameters param opt
ional an object used to request specific metadata.
...they have the following format: size : a number lastmodified : a date object specificat
ions specificat
ion status comment filesystem api editor's draft draft proposal ...
NodeIterator.root - Web APIs
syntax root = nodeiterator.root; example var nodeiterator = document.createnodeiterator( document.body, nodefilter.show_element, { acceptnode: funct
ion(node) { return nodefilter.filter_accept; } }, false ); root = nodeiterator.root; // document.body in this case specificat
ions specificat
ion status comment domthe definit
ion of 'nodeiterator.root' in that specificat
ion.
... living standard no change from document object model (dom) level 2 traversal and range specificat
ion.
... document object model (dom) level 2 traversal and range specificat
ionthe definit
ion of 'nodeiterator.root' in that specificat
ion.
... obsolete initial definit
ion.
PaintWorklet - Web APIs
properties paintworklet.devicepixelrat
io returns the current device's rat
io of physical pixels to logical pixels.
...s[(x + y) % colors.length]; ctx.beginpath(); ctx.fillstyle = color; ctx.rect(x * size, y * size, size, size); ctx.fill(); } } } } // register our class under a specific name registerpaint('checkerboard', checkerboardpainter); load a paintworklet the following example demonstrates loading the above worklet from its js file and does so by feature detect
ion.
... @supports (background: paint(id)) { background-image: paint(checkerboard); } specificat
ions specificat
ion status comment css painting api level 1the definit
ion of 'paintworkletglobalscope' in that specificat
ion.
... working draft initial definit
ion.
PannerNode.rolloffFactor - Web APIs
syntax var aud
ioctx = new aud
iocontext(); var panner = aud
ioctx.createpanner(); panner.rollofffactor = 1; value a number whose range depends on the distancemodel of the panner as follows (negative values are not allowed): "linear" the range is 0 to 1.
... except
ions rangeerror the property has been given a value that is outside the accepted range.
... example this example demonstrates how different rollofffactor values affect how the volume of the test tone decreases with increasing distance from the listener: const context = new aud
iocontext(); // all our test tones will last this many seconds const note_length = 4; // this is how far we'll move the sound const z_distance = 20; // this funct
ion creates a graph for the test tone with a given rollofffactor // and schedules it to move away from the listener along the z (depth-wise) axis // at the given start time, resulting in a decrease in volume (decay) const scheduletesttone = (rollofffactor, starttime) => { const osc = new oscillatornode(context); const panner = new pannernode(context); panner.rollofffactor = rollofffactor; // set the initial z posit
ion, then schedule th...
...e ramp panner.posit
ionz.setvalueattime(0, starttime); panner.posit
ionz.linearramptovalueattime(z_distance, starttime + note_length); osc.connect(panner) .connect(context.destinat
ion); osc.start(starttime); osc.stop(starttime + note_length); }; // this tone should decay fairly quickly scheduletesttone(1, context.currenttime); // this tone should decay slower than the prev
ious one scheduletesttone(0.5, context.currenttime + note_length); // this tone should decay only slightly scheduletesttone(0.1, context.currenttime + note_length * 2); after running this code, the resulting waveforms should look something like this: specificat
ions specificat
ion status comment web aud
io apithe definit
ion of 'rollofffactor' in that specificat
ion.
ParentNode.childElementCount - Web APIs
example var foo = document.getelementbyid('foo'); if (foo.childelementcount > 0) { // do something } polyfill for ie8 & ie9 & safari this property is completely unsupported pr
ior to ie9.
... ;(funct
ion(constructor) { if (constructor && constructor.prototype && constructor.prototype.childelementcount == null) { object.defineproperty(constructor.prototype, 'childelementcount', { get: funct
ion() { var i = 0, count = 0, node, nodes = this.childnodes; while (node = nodes[i++]) { if (node.nodetype === 1) count++; } return count; } }); } })(window.node || window.element); specificat
ion specificat
ion status comment domthe definit
ion of 'parentnode.childelementcount' in that specificat
ion.
... element traversal specificat
ionthe definit
ion of 'elementtraversal.childelementcount' in that specificat
ion.
... obsolete added its initial definit
ion to the elementtraversal pure interface and use it on element.
ParentNode.firstElementChild - Web APIs
;(funct
ion(constructor) { if (constructor && constructor.prototype && constructor.prototype.firstelementchild == null) { object.defineproperty(constructor.prototype, 'firstelementchild', { get: funct
ion() { var node, nodes = this.childnodes, i = 0; while (node = nodes[i++]) { if (node.nodetype === 1) { ...
... return node; } } return null; } }); } })(window.node || window.element); specificat
ion specificat
ion status comment domthe definit
ion of 'parentnode.firstelementchild' in that specificat
ion.
... element traversal specificat
ionthe definit
ion of 'elementtraversal.firstelementchild' in that specificat
ion.
... obsolete added its initial definit
ion to the elementtraversal pure interface and use it on element.
ParentNode - Web APIs
parentnode.children read only returns a live htmlcollect
ion containing all of the element objects that are children of this parentnode, omitting all of its non-element nodes.
... specificat
ion specificat
ion status comment domthe definit
ion of 'parentnode' in that specificat
ion.
... element traversal specificat
ionthe definit
ion of 'elementtraversal' in that specificat
ion.
... obsolete added the initial definit
ion of its properties to the elementtraversal pure interface and used it on element.
PasswordCredential - Web APIs
syntax var mycredential = new passwordcredential(passwordcredentialdata) var mycredential = new passwordcredential(htmlformelement) parameters either of the following: passwordcredentialdata a passwordcredentialdata dict
ionary containing the following fields: iconurl: (opt
ional) the url of a user's avatar image.
... name: (opt
ional) the name of the user signing in.
...navigator.credentials.store(creds) .then(funct
ion(creds) { // do something with the credentials if you need to.
... }); specificat
ions specificat
ion status comment credential management level 1 working draft initial definit
ion.
Path2D.addPath() - Web APIs
transform opt
ional a dommatrix to be used as the transformat
ion matrix for the path that is added.
... const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); // create first path and add a rectangle let p1 = new path2d(); p1.rect(0, 0, 100, 150); // create second path and add a rectangle let p2 = new path2d(); p2.rect(0, 0, 100, 75); // create transformat
ion matrix that moves 200 points to the right let m = document.createelementns('http://www.w3.org/2000/svg', 'svg').createsvgmatrix(); m.a = 1; m.b = 0; m.c = 0; m.d = 1; m.e = 200; m.f = 0; // add second path to the first path p1.addpath(p2, m); // draw the first path ctx.fill(p1); result specificat
ions specificat
ion status comment html living standardthe definit
ion ...
...of 'path2d.addpath()' in that specificat
ion.
... living standard initial defint
ion.
PaymentAddress.city - Web APIs
the city read-only property of the paymentaddress interface returns a string containing the city or town port
ion of the address.
... syntax var paymentcity = paymentaddress.city; value a domstring indicating the city or town port
ion of the address described by the paymentaddress object.
... specificat
ions specificat
ion status comment payment request apithe definit
ion of 'paymentaddress.city' in that specificat
ion.
... candidate recommendat
ion initial definit
ion.
performance.clearResourceTimings() - Web APIs
example funct
ion load_resource() { var image = new image(); image.src = "https://developer.mozilla.org/static/img/opengraph-logo.png"; } funct
ion clear_performance_timings() { if (performance === undefined) { log("browser does not support web performance"); return; } // create a resource timing performance entry by loading an image load_resource(); var supported = typeof performance.clearr...
...esourcetimings == "funct
ion"; if (supported) { console.log("run: performance.clearresourcetimings()"); performance.clearresourcetimings(); } else { console.log("performance.clearresourcetimings() not supported"); return; } // getentries should now return zero var p = performance.getentriesbytype("resource"); if (p.length == 0) console.log("...
...performance data buffer not cleared!"); } specificat
ions specificat
ion status comment resource timing level 1the definit
ion of 'clearresourcetimings()' in that specificat
ion.
... candidate recommendat
ion initial definit
ion.
performance.mark() - Web APIs
the applicat
ion defined timestamp can be retrieved by one of the performance interface's getentries*() methods (getentries(), getentriesbyname() or getentriesbytype()).
...performance.clearmarks(); specificat
ions specificat
ion status comment user timing level 2the definit
ion of 'mark()' in that specificat
ion.
... user timingthe definit
ion of 'mark()' in that specificat
ion.
... recommendat
ion basic definit
ion.
Performance.timing - Web APIs
this property is deprecated in the navigat
ion timing level 2 specificat
ion.
... please use the performancenavigat
iontiming interface instead.
... the legacy performance.timing read-only property returns a performancetiming object containing latency-related performance informat
ion.
... syntax timinginfo = performance.timing; specificat
ions specificat
ion status comment navigat
ion timing level 2 working draft initial definit
ion.
performance.toJSON() - Web APIs
the tojson() method of the performance interface is a standard serializer: it returns a json representat
ion of the performance object's properties.
... syntax myperf = performance.tojson() arguments none return value myperf a json object that is the serializat
ion of the performance object.
... example var js; js = window.performance.tojson(); console.log("json = " + json.stringify(js)); specificat
ions specificat
ion status comment high resolut
ion time level 2the definit
ion of 'tojson() serializer' in that specificat
ion.
... recommendat
ion defines tojson().
PerformanceResourceTiming.decodedBodySize - Web APIs
if the resource is retrieved from an applicat
ion cache or local resources, it returns the size of the payload after removing any applied content-codings.
... funct
ion log_sizes(perfentry){ // check for support of the *size properties and print their values // if supported.
...codedbodysize); else console.log("decodedbodysize = not supported"); if ("encodedbodysize" in perfentry) console.log("encodedbodysize = " + perfentry.encodedbodysize); else console.log("encodedbodysize = not supported"); if ("transfersize" in perfentry) console.log("transfersize = " + perfentry.transfersize); else console.log("transfersize = not supported"); } funct
ion check_performanceentries() { // use getentriesbytype() to just get the "resource" events var p = performance.getentriesbytype("resource"); for (var i=0; i < p.length; i++) { log_sizes(p[i]); } } specificat
ions specificat
ion status comment resource timing level 2the definit
ion of 'decodedbodysize' in that specificat
ion.
... working draft initial definit
ion.
PerformanceResourceTiming.domainLookupStart - Web APIs
funct
ion print_performanceentries() { // use getentriesbytype() to just get the "resource" events var p = performance.getentriesbytype("resource"); for (var i=0; i < p.length; i++) { print_start_and_end_properties(p[i]); } } funct
ion print_start_and_end_properties(perfentry) { // print timestamps of the performanceentry *start and *end properties properties = ["connectstart", "connectend"...
..., "domainlookupstart", "domainlookupend", "fetchstart", "redirectstart", "redirectend", "requeststart", "responsestart", "responseend", "secureconnect
ionstart"]; for (var i=0; i < properties.length; i++) { // check each property var supported = properties[i] in perfentry; if (supported) { var value = perfentry[properties[i]]; console.log("...
..." + properties[i] + " = not supported"); } } } specificat
ions specificat
ion status comment resource timing level 1the definit
ion of 'domainlookupstart' in that specificat
ion.
... candidate recommendat
ion initial definit
ion.
PerformanceTiming.redirectEnd - Web APIs
this interface of this property is deprecated in the navigat
ion timing level 2 specificat
ion.
... please use the performancenavigat
iontiming interface instead.
... syntax time = performancetiming.redirectend; specificat
ions specificat
ion status comment navigat
ion timingthe definit
ion of 'performancetiming.redirectend' in that specificat
ion.
... recommendat
ion initial definit
ion.
PerformanceTiming.redirectStart - Web APIs
this interface of this property is deprecated in the navigat
ion timing level 2 specificat
ion.
... please use the performancenavigat
iontiming interface instead.
... syntax time = performancetiming.redirectstart; specificat
ions specificat
ion status comment navigat
ion timingthe definit
ion of 'performancetiming.redirectstart' in that specificat
ion.
... recommendat
ion initial definit
ion.
PerformanceTiming.responseStart - Web APIs
this interface of this property is deprecated in the navigat
ion timing level 2 specificat
ion.
... please use the performancenavigat
iontiming interface instead.
... syntax time = performancetiming.responsestart; specificat
ions specificat
ion status comment navigat
ion timingthe definit
ion of 'performancetiming.responsestart' in that specificat
ion.
... recommendat
ion initial definit
ion.
PointerEvent.height - Web APIs
specificat
ions specificat
ion status comment pointer events – level 2the definit
ion of 'height' in that specificat
ion.
... recommendat
ion non-stable vers
ion.
... pointer eventsthe definit
ion of 'height' in that specificat
ion.
... obsolete initial definit
ion.
PointerEvent.tangentialPressure - Web APIs
syntax var tanpressure = pointerevent.tangentialpressure; return value a float representing the normalized tangential pressure of the pointer input in the range -1 to 1, inclusive, where 0 is the neutral posit
ion of the control.
... example in this snippet, when a pointerdown event is fired, different funct
ions are called depending on the value of the event's tangentialpressure property.
... someelement.addeventlistener('pointerdown', funct
ion(event) { if (event.tangentialpressure == 0) { // no pressure process_no_tanpressure(event); } else if (event.tangentialpressure == 1) { // maximum pressure process_max_tanpressure(event); } else { // default process_tanpressure(event); } }, false); specificat
ions specificat
ion status comment pointer events – level 2the definit
ion of 'tangentialpressure' in that specificat
ion.
... recommendat
ion ...
PointerEvent.twist - Web APIs
the twist read-only property of the pointerevent interface represents the clockwise rotat
ion of the pointer (e.g., pen stylus) around its major axis, in degrees.
... example when a pointerdown event is fired, different funct
ions are called depending on the value of the event's twist property.
... someelement.addeventlistener('pointerdown', funct
ion(event) { if (event.twist == 0) { // no twist process_no_twist(event); } else { // default process_twist(event); } }, false); specificat
ions specificat
ion status comment pointer events – level 2the definit
ion of 'twist' in that specificat
ion.
... recommendat
ion ...
PointerEvent.width - Web APIs
target.addeventlistener("pointerdown", funct
ion(ev) { // calculate the contact area var area = ev.width * ev.height; }, false); specificat
ions specificat
ion status comment pointer events – level 2the definit
ion of 'width' in that specificat
ion.
... recommendat
ion non-stable vers
ion.
... pointer eventsthe definit
ion of 'width' in that specificat
ion.
... obsolete initial definit
ion.
ProgressEvent - Web APIs
the progressevent interface represents events measuring progress of an underlying process, like an http request (for an xmlhttprequest, or the loading of the underlying resource of an <img>, <aud
io>, <video>, <style> or <link>).
... <div id="interfacediagram" style="display: inline-block; posit
ion: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; posit
ion: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectrat
io="xminymin meet"><a xlink:href="/docs/web/api/event" target="_top"><rect x="1" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="38.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">event</text></a><polyline points="76,25 86,20 86,30 76,25" stroke="#d4dde4" fill="none"/><line x1="86" y1="25" x2="116" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/progressevent" targ...
...the rat
io of work done can be calculated with the property and progressevent.total.
... var progressbar = document.getelementbyid("p"), client = new xmlhttprequest() client.open("get", "magical-unicorns") client.onprogress = funct
ion(pe) { if(pe.lengthcomputable) { progressbar.max = pe.total progressbar.value = pe.loaded } } client.onloadend = funct
ion(pe) { progressbar.value = pe.loaded } client.send() specificat
ions specificat
ion status comment xmlhttprequestthe definit
ion of 'progressevent' in that specificat
ion.
PublicKeyCredential.rawId - Web APIs
the publickeycredential.id property is a base64url encoded vers
ion of this identifier.
...this identifier is expected to be globally unique and is appointed for the current publickeycredential and its associated authenticatorassert
ionresponse.
... examples var opt
ions = { challenge: new uint8array(26) /* from the server */, rp: { name: "example corp", id : "login.example.com" }, user: { id: new uint8array(26), /* to be changed for each user */ name: "jdoe@example.com", displayname: "john doe", }, pubkeycredparams: [ { type: "public-key", alg: -7 } ] }; navigator.credentials.create({ publickey: opt
ions }) .then(funct
ion (pubkeycredential) { var rawid = pubkeycredential.rawid; // do something with rawid }).catch(funct
ion (err) { // deal with any error }); specificat
ions specificat
ion status comment web authenticat
ion: an api for accessing public key credentials level 1the definit
ion of 'rawid' in that specificat
ion.
... recommendat
ion initial definit
ion.
PushMessageData - Web APIs
the pushmessagedata interface of the push api provides methods which let you retrieve the push data sent by a server in var
ious formats.
... examples self.addeventlistener('push', funct
ion(event) { var obj = event.data.json(); if(obj.act
ion === 'subscribe' || obj.act
ion === 'unsubscribe') { firenotificat
ion(obj, event); port.postmessage(obj); } else if(obj.act
ion === 'init' || obj.act
ion === 'chatmsg') { port.postmessage(obj); } }); specificat
ions specificat
ion status comment push apithe definit
ion of 'pushmessagedata' in that specifi...
...cat
ion.
... working draft initial definit
ion.
RTCDataChannel.bufferedAmountLowThreshold - Web APIs
the user agent may implement the process of actually sending data in any way it chooses; this may be done per
iodically during the event loop or truly asynchronously.
...tachannel.bufferedamountlowthreshold; adatachannel.bufferedamountlowthreshold = threshold; value the number of queued outgoing data bytes below which the buffer is considered to be "low." example in this snippet of code, bufferedamountlowthreshold is set to 64kb, and a handler for the bufferedamountlow event is established by setting the rtcdatachannel.onbufferedamountlow property to a funct
ion which should send more data into the buffer by calling send().
... var dc = peerconnect
ion.createdatachannel("file transfer"); dc.bufferedamountlowthreshold = 65535; dc.onbufferedamountlow = funct
ion() { /* use send() to queue more data to be sent */ }; specificat
ions specificat
ion status comment webrtc 1.0: real-time communicat
ion between browsersthe definit
ion of 'rtcdatachannel.bufferedamountlowthreshold' in that specificat
ion.
... candidate recommendat
ion initial specificat
ion.
RTCDataChannel.close() - Web APIs
most of the process of closing the connect
ion is handled asynchronously; you can detect when the channel has finished closing by watching for a close event on the data channel.
... example var pc = new rtcpeerconnect
ion(); var dc = pc.createdatachannel("my channel"); dc.onmessage = funct
ion (event) { console.log("received: " + event.data); dc.close(); // we decided to close after the first received message }; dc.onopen = funct
ion () { console.log("datachannel open"); }; dc.onclose = funct
ion ( console.log("datachannel close"); }; // now negotiate the connect
ion and so forth...
... specificat
ions specificat
ion status comment webrtc 1.0: real-time communicat
ion between browsersthe definit
ion of 'rtcdatachannel.close()' in that specificat
ion.
... candidate recommendat
ion initial specificat
ion.
RTCDataChannel.maxRetransmits - Web APIs
this can only be set when the rtcdatachannel is created by calling rtcpeerconnect
ion.createdatachannel(), using the maxretransmits field in the specified opt
ions.
... syntax var tries = adatachannel.maxretransmits; value the maximum number of times the browser will try to retransmit a message before giving up, or null if not set when rtcpeerconnect
ion.createdatachannel() was called.
... example // tbd specificat
ions specificat
ion status comment webrtc 1.0: real-time communicat
ion between browsersthe definit
ion of 'rtcdatachannel.maxretransmits' in that specificat
ion.
... candidate recommendat
ion initial specificat
ion.
RTCDataChannel: message event - Web APIs
bubbles no cancelable no interface messageevent event handler property onmessage note: the message event uses as its event object type the messageevent interface defined by the html specificat
ion.
... examples for a given rtcdatachannel, dc, created for a peer connect
ion using its createdatachannel() method, this code sets up a handler for incoming messages and acts on them by adding the data contained within the message to the current document as a new <p> (paragraph) element.
... you can also use an rtcdatachannel object's onmessage event handler property to set the event handler: dc.onmessage = ev => { let newparagraph = document.createelement("p"); let textnode = document.createtextnode(event.data); newparagraph.appendchild(textnode); document.body.appendchild(newparagraph); } specificat
ions specificat
ion status comment webrtc 1.0: real-time communicat
ion between browsersthe definit
ion of 'the <code>message</code> event' in that specificat
ion.
... candidate recommendat
ion ...
RTCIceCandidate.sdpMLineIndex - Web APIs
syntax var sdpmlineindex = rtcicecandidate.sdpmlineindex; value a number containing a 0-based index into the set of m-lines providing media descript
ions, indicating which media source is associated with the candidate, or null if no such associat
ion is available.
... note: attempting to add a candidate (using addicecandidate()) that has a value of null for either sdpmid or sdpmlineindex will throw a typeerror except
ion.
... specificat
ions specificat
ion status comment webrtc 1.0: real-time communicat
ion between browsersthe definit
ion of 'rtcicecandidate.sdpmlineindex' in that specificat
ion.
... candidate recommendat
ion initial definit
ion.
RenderingContext - Web APIs
by using the shorthand renderingcontext, methods and properties which can make use of any of these interfaces can be specified and written more easily; since <canvas> supports several rendering systems, it's helpful from a specificat
ion and browser implementat
ion perspective to have a shorthand that means "one of these interfaces." as such, renderingcontext is an implementat
ion detail, and isn't something web developers directly use.
... the primary use of this type is the definit
ion of the <canvas> element's htmlcanvaselement.getcontext() method, which returns a renderingcontext (meaning it returns any one of the rendering context types).
... specificat
ions specificat
ion status comment html living standardthe definit
ion of 'renderingcontext' in that specificat
ion.
... living standard initial definit
ion.
Report.type - Web APIs
deprecat
ion or intervent
ion.
...currently the available types are deprecat
ion, intervent
ion, and crash.
... examples let opt
ions = { types: ['deprecat
ion'], buffered: true } let observer = new reportingobserver(funct
ion(reports, observer) { let firstreport = reports[0]; // log the first report's report type, i.e.
... "deprecat
ion" console.log(firstreport.type); }, opt
ions); specificat
ions specificat
ion status comment reporting apithe definit
ion of 'report.body' in that specificat
ion.
Request.context - Web APIs
the deprecated context read-only property of the request interface contains the context of the request (e.g., aud
io, image, iframe).
...this has been replaced by the destinat
ion property.
... the context of a request is only relevant in the serviceworker api; a service worker can make decis
ions based on whether the url is for an image, or an embeddable object such as a <video>, iframe, etc.
... note: you can find a full list of the different available contexts including associated context frame types, csp directives, and platform feature examples in the fetch spec request context sect
ion.
Request.referrerPolicy - Web APIs
the referrerpolicy read-only property of the request interface returns the referrer policy, which governs what referrer informat
ion, sent in the referer header, should be included with the request.
...for more informat
ion and possible values, see the referrer-policy http header page.
... example in the following snippet, we create a new request using the request.request() constructor (for an image file in the same directory as the script), then save the request referrer policy in a variable: var myrequest = new request('flowers.jpg'); var myreferrer = myrequest.referrerpolicy; // returns "" by default specificat
ions specificat
ion status comment fetchthe definit
ion of 'referrerpolicy' in that specificat
ion.
... living standard initial definit
ion ...
ResizeObserverEntry.contentRect - Web APIs
note that this is better supported than resizeobserverentry.borderboxsize or resizeobserverentry.contentboxsize, but it is left over from an earlier implementat
ion of the resize observer api, is still included in the spec for web compat reasons, and may be deprecated in future vers
ions.
...this uses a simple feature detect
ion test to see if the browser supports the newer resizeobserverentry.contentboxsize property — if so, it uses that to get the sizing data it needs.
...em.style.fontsize = math.max(1.5, entry.contentboxsize.inlinesize/200) + 'rem'; pelem.style.fontsize = math.max(1, entry.contentboxsize.inlinesize/600) + 'rem'; } else { h1elem.style.fontsize = math.max(1.5, entry.contentrect.width/200) + 'rem'; pelem.style.fontsize = math.max(1, entry.contentrect.width/600) + 'rem'; } } }); resizeobserver.observe(divelem); specificat
ions specificat
ion status comment resize observerthe definit
ion of 'contentrect' in that specificat
ion.
... editor's draft initial definit
ion.
ResizeObserverEntry.target - Web APIs
when the viewport size is changed, the box's rounded corners change in proport
ion to the size of the box.
... we could just implement this using border-radius with a percentage, but that quickly leads to ugly-looking elliptical corners; this solut
ion gives you nice square corners that scale with the box size.
...tentboxsize.inlinesize/10) + (entry.contentboxsize.blocksize/10)) + 'px'; } else { entry.target.style.borderradius = math.min(100, (entry.contentrect.width/10) + (entry.contentrect.height/10)) + 'px'; } } }); resizeobserver.observe(document.queryselector('div')); specificat
ions specificat
ion status comment resize observerthe definit
ion of 'target' in that specificat
ion.
... editor's draft initial definit
ion.
Response.redirected - Web APIs
in the code below, a textual message is inserted into an element when a redirect occurred during the fetch operat
ion.
... fetch("awesome-picture.jpg").then(funct
ion(response) { let elem = document.getelementbyid("warning-message-box"); if (response.redirected) { elem.innerhtml = "unexpected redirect"; } else { elem.innerhtml = ""; } return response.blob(); }).then(funct
ion(imageblob) { let imgobjecturl = url.createobjecturl(imageblob); document.getelementbyid("img-element-id").src = imgobjecturl; }); disallowing redirects because using redirected to manually filter out redirects can allow forgery of redirects, you should instead set the redirect mode to "error" in the init parameter when calling fetch(), like this: fetch("awesome-picture.jpg", ...
...{ redirect: "error" }).then(funct
ion(response) { return response.blob(); }).then(funct
ion(imageblob) { let imgobjecturl = url.createobjecturl(imageblob); document.getelementbyid("img-element-id").src = imgobjecturl; }); specificat
ions specificat
ion status comment fetchthe definit
ion of 'redirected' in that specificat
ion.
... living standard initial definit
ion ...
RsaHashedImportParams - Web APIs
the rsahashedimportparams dict
ionary of the web crypto api represents the object that should be passed as the algorithm parameter into subtlecrypto.importkey() or subtlecrypto.unwrapkey(), when importing any rsa-based key pair: that is, when the algorithm is identified as any of rsassa-pkcs1-v1_5, rsa-pss, or rsa-oaep.
... hash a domstring representing the name of the digest funct
ion to use.
... specificat
ions specificat
ion status comment web cryptography apithe definit
ion of 'subtlecrypto.rsahashedimportparams' in that specificat
ion.
... recommendat
ion ...
SVGAltGlyphDefElement - Web APIs
<div id="interfacediagram" style="display: inline-block; posit
ion: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; posit
ion: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectrat
io="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...
...;} warning: this interface was removed in the svg 2 specificat
ion.
... specificat
ions specificat
ion status comment scalable vector graphics (svg) 1.1 (second edit
ion)the definit
ion of 'svgaltglyphdefelement' in that specificat
ion.
... recommendat
ion initial definit
ion ...
format - Web APIs
if the font is in one of the formats listed in css2([css2], sect
ion15.3.5), then its value is the corresponding <string> parameter of the font.
... syntax string = myglyph.format; myglyph.format = string; value the format values listed below are taken from css2([css2], sect
ion15.3.5).
... string font format examples of common extens
ions truedoc-pfr truedoc™ portable font resource .pfr embedded-opentype embedded opentype .eot type-1 postscript™ type 1 .pfb, .pfa truetype truetype .ttf opentype opentype, including truetype open .ttf truetype-gx truetype with gx extens
ions - speedo speedo - intellifont intellifont - example myglyph.format = "truedoc-pfr"; specificat
ions specificat
ion status comment scalable vector graphics (svg) 1.1 (second edit
ion)the definit
ion of 'format' in that specificat
ion.
... recommendat
ion ...
SVGAltGlyphItemElement - Web APIs
<div id="interfacediagram" style="display: inline-block; posit
ion: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; posit
ion: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectrat
io="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:...
... all;} warning: this interface was removed in the svg 2 specificat
ion.
... specificat
ions specificat
ion status comment scalable vector graphics (svg) 1.1 (second edit
ion)the definit
ion of 'svgaltglyphitemelement' in that specificat
ion.
... recommendat
ion initial definit
ion ...
SVGAnimatedPathData - Web APIs
methods none properties svgpathseglist animatednormalizedpathseglist svgpathseglist animatedpathseglist svgpathseglist normalizedpathseglist svgpathseglist pathseglist normative document svg 1.1 (2nd edit
ion) properties this interface also inherits properties from its parent, svgpathelement.
... name type descript
ion animatednormalizedpathseglist svgpathseglist provides access to the current animated contents of the 'd' attribute in a form where all path data commands are expressed in terms of the following subset of svgpathseg types: svg_pathseg_moveto_abs (m), svg_pathseg_lineto_abs (l), svg_pathseg_curveto_cubic_abs (c) and svg_pathseg_closepath (z).
... browser compatibility desktop mobile chrome edge firefox internet explorer opera safari android webview chrome for android firefox for android opera for android safari on
ios samsung internet svganimatedpathdata chrome ?
... safari
ios ?
SVGAnimatedPoints - Web APIs
addit
ionally, the points attribute on the original element accessed via the xml dom (e.g., using the getattribute() method call) will reflect any changes made to the svganimatedpoints.points attribut.
... interface overview also implement none methods none properties readonly svgpointlist points readonly svgpointlist animatedpoints normative document svg 1.1 (2nd edit
ion) properties name type descript
ion points svgpointlist provides access to the base (i.e., static) contents of the points attribute.
... desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on
iossamsung internetsvganimatedpointschrome ?
... safari
ios ?
SVGAnimatedString.animVal - Web APIs
internet explorer 9 supports script-based svg animat
ion but it does not support declarative-based svg animat
ion.
... syntax var = object.animval specificat
ions specificat
ion status comment scalable vector graphics (svg) 1.1 (second edit
ion) recommendat
ion scalable vector graphics (svg) 2 candidate recommendat
ion browser compatibility the compatibility table on this page is generated from structured data.
... desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on
iossamsung internetanimvalchrome full support yesedge full support 12firefox full support yesie no support noopera full support yessafari full support yeswebview android full support yeschrome android no...
... support nofirefox android full support yesopera android full support yessafari
ios full support yessamsung internet android no support nolegend full support full support no support no support ...
targetElement - Web APIs
the svganimat
ionelement.targetelement property refers to the element which is being animated.
... syntax var targetelement = someelement.targetelement; specificat
ions specificat
ion status comment svg animat
ions level 2the definit
ion of 'svganimat
ionelement.targetelement' in that specificat
ion.
... scalable vector graphics (svg) 1.1 (second edit
ion)the definit
ion of 'svganimat
ionelement.targetelement' in that specificat
ion.
... recommendat
ion initial definit
ion ...
SVGDefsElement - Web APIs
<div id="interfacediagram" style="display: inline-block; posit
ion: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; posit
ion: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectrat
io="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2...
... specificat
ions specificat
ion status comment scalable vector graphics (svg) 2the definit
ion of 'svgdefselement' in that specificat
ion.
... candidate recommendat
ion replaced the inheritance from svgelementsvgtests, svglangspace, svgexternalresourcesrequired, svgstylable, and svgtransformable by svggraphicselement scalable vector graphics (svg) 1.1 (second edit
ion)the definit
ion of 'svgdefselement' in that specificat
ion.
... recommendat
ion initial definit
ion ...
SVGDescElement - Web APIs
<div id="interfacediagram" style="display: inline-block; posit
ion: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; posit
ion: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectrat
io="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2...
... specificat
ions specificat
ion status comment scalable vector graphics (svg) 2the definit
ion of 'svgdescelement' in that specificat
ion.
... candidate recommendat
ion removed the inheritance from svglangspace and svgstylable scalable vector graphics (svg) 1.1 (second edit
ion)the definit
ion of 'svgdescelement' in that specificat
ion.
... recommendat
ion initial definit
ion ...
SVGFEComponentTransferElement - Web APIs
<div id="interfacediagram" style="display: inline-block; posit
ion: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; posit
ion: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectrat
io="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="no...
... specificat
ions specificat
ion status comment filter effects module level 1the definit
ion of 'svgfecomponenttransferelement' in that specificat
ion.
... working draft no change scalable vector graphics (svg) 1.1 (second edit
ion)the definit
ion of 'svgfecomponenttransferelement' in that specificat
ion.
... recommendat
ion initial definit
ion ...
SVGFEDiffuseLightingElement - Web APIs
<div id="interfacediagram" style="display: inline-block; posit
ion: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; posit
ion: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectrat
io="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/...
... specificat
ions specificat
ion status comment filter effects module level 1the definit
ion of 'svgfediffuselightingelement' in that specificat
ion.
... working draft no change scalable vector graphics (svg) 1.1 (second edit
ion)the definit
ion of 'svgfediffuselightingelement' in that specificat
ion.
... recommendat
ion initial definit
ion ...
SVGFEFloodElement - Web APIs
<div id="interfacediagram" style="display: inline-block; posit
ion: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; posit
ion: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectrat
io="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="...
... specificat
ions specificat
ion status comment filter effects module level 1the definit
ion of 'svgfefloodelement' in that specificat
ion.
... working draft no change scalable vector graphics (svg) 1.1 (second edit
ion)the definit
ion of 'svgfefloodelement' in that specificat
ion.
... recommendat
ion initial definit
ion ...
SVGFEMergeElement - Web APIs
<div id="interfacediagram" style="display: inline-block; posit
ion: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; posit
ion: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectrat
io="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="...
... specificat
ions specificat
ion status comment filter effects module level 1the definit
ion of 'svgfemergeelement' in that specificat
ion.
... working draft no change scalable vector graphics (svg) 1.1 (second edit
ion)the definit
ion of 'svgfemergeelement' in that specificat
ion.
... recommendat
ion initial definit
ion ...
SVGFEMergeNodeElement - Web APIs
<div id="interfacediagram" style="display: inline-block; posit
ion: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; posit
ion: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectrat
io="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="1...
... specificat
ions specificat
ion status comment filter effects module level 1the definit
ion of 'svgfemergenodeelement' in that specificat
ion.
... working draft no change scalable vector graphics (svg) 1.1 (second edit
ion)the definit
ion of 'svgfemergenodeelement' in that specificat
ion.
... recommendat
ion initial definit
ion ...
SVGFEOffsetElement - Web APIs
<div id="interfacediagram" style="display: inline-block; posit
ion: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; posit
ion: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectrat
io="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1...
... specificat
ions specificat
ion status comment filter effects module level 1the definit
ion of 'svgfeoffsetelement' in that specificat
ion.
... working draft no change scalable vector graphics (svg) 1.1 (second edit
ion)the definit
ion of 'svgfeoffsetelement' in that specificat
ion.
... recommendat
ion initial definit
ion ...
SVGFEPointLightElement - Web APIs
<div id="interfacediagram" style="display: inline-block; posit
ion: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; posit
ion: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectrat
io="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1=...
... specificat
ions specificat
ion status comment filter effects module level 1the definit
ion of 'svgfepointlightelement' in that specificat
ion.
... working draft no change scalable vector graphics (svg) 1.1 (second edit
ion)the definit
ion of 'svgfepointlightelement' in that specificat
ion.
... recommendat
ion initial definit
ion ...
SVGFESpecularLightingElement - Web APIs
<div id="interfacediagram" style="display: inline-block; posit
ion: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; posit
ion: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectrat
io="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none...
... specificat
ions specificat
ion status comment filter effects module level 1the definit
ion of 'svgfespecularlightingelement' in that specificat
ion.
... working draft no change scalable vector graphics (svg) 1.1 (second edit
ion)the definit
ion of 'svgfespecularlightingelement' in that specificat
ion.
... recommendat
ion initial definit
ion ...
SVGFESpotLightElement - Web APIs
<div id="interfacediagram" style="display: inline-block; posit
ion: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; posit
ion: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectrat
io="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="1...
... specificat
ions specificat
ion status comment filter effects module level 1the definit
ion of 'svgfespotlightelement' in that specificat
ion.
... working draft no change scalable vector graphics (svg) 1.1 (second edit
ion)the definit
ion of 'svgfespotlightelement' in that specificat
ion.
... recommendat
ion initial definit
ion ...
SVGFETileElement - Web APIs
<div id="interfacediagram" style="display: inline-block; posit
ion: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; posit
ion: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectrat
io="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25...
... specificat
ions specificat
ion status comment filter effects module level 1the definit
ion of 'svgfetileelement' in that specificat
ion.
... working draft no change scalable vector graphics (svg) 1.1 (second edit
ion)the definit
ion of 'svgfetileelement' in that specificat
ion.
... recommendat
ion initial definit
ion ...
SVGFilterPrimitiveStandardAttributes - Web APIs
<div id="interfacediagram" style="display: inline-block; posit
ion: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; posit
ion: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectrat
io="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">svgfilterprimitivestan...
... specificat
ions specificat
ion status comment filter effects module level 1the definit
ion of 'svgfilterprimitivestandardattributes' in that specificat
ion.
... working draft no change scalable vector graphics (svg) 1.1 (second edit
ion)the definit
ion of 'svgfilterprimitivestandardattributes' in that specificat
ion.
... recommendat
ion initial definit
ion ...
SVGFitToViewBox - Web APIs
svg fit to view box interface the svgfittoviewbox interface is used to reflect the viewbox and preserveaspectrat
io attributes, and is mixed in to other interfaces for elements that support these two attributes.
... interface overview also implement none methods none properties svganimatedpreserveaspectrat
io preserveaspectrat
io svganimatedrect viewbox normative document svg 1.1 (2nd edit
ion) properties name type descript
ion preserveaspectrat
io svganimatedpreserveaspectrat
io corresponds to attribute preserveaspectrat
io on the given element.
... browser compatibility desktop mobile chrome edge firefox internet explorer opera safari android webview chrome for android firefox for android opera for android safari on
ios samsung internet svgfittoviewbox chrome ?
... safari
ios ?
SVGForeignObjectElement - Web APIs
<div id="interfacediagram" style="display: inline-block; posit
ion: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; posit
ion: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectrat
io="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121...
... specificat
ions specificat
ion status comment scalable vector graphics (svg) 2the definit
ion of 'svgforeignobjectelement' in that specificat
ion.
... candidate recommendat
ion replaced the inheritance from svgelement, svgtests, svglangspace, svgexternalresourcesrequired, svgstylable, and svgtransformable by svggraphicselement and svgurireference scalable vector graphics (svg) 1.1 (second edit
ion)the definit
ion of 'svgforeignobjectelement' in that specificat
ion.
... recommendat
ion initial definit
ion ...
SVGGlyphElement - Web APIs
<div id="interfacediagram" style="display: inline-block; posit
ion: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; posit
ion: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectrat
io="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</te...
...xt></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} warning: this interface was removed in the svg 2 specificat
ion.
... specificat
ions specificat
ion status comment scalable vector graphics (svg) 1.1 (second edit
ion)the definit
ion of 'svgglyphelement' in that specificat
ion.
... recommendat
ion initial definit
ion ...
SVGLinearGradientElement - Web APIs
<div id="interfacediagram" style="display: inline-block; posit
ion: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; posit
ion: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectrat
io="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line...
... specificat
ions specificat
ion status comment scalable vector graphics (svg) 2the definit
ion of 'svglineargradientelement' in that specificat
ion.
... candidate recommendat
ion no change scalable vector graphics (svg) 1.1 (second edit
ion)the definit
ion of 'svglineargradientelement' in that specificat
ion.
... recommendat
ion initial definit
ion ...
SVGMPathElement - Web APIs
<div id="interfacediagram" style="display: inline-block; posit
ion: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; posit
ion: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectrat
io="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" ...
... specificat
ions specificat
ion status comment svg animat
ions level 2the definit
ion of 'svgmpathelement' in that specificat
ion.
... scalable vector graphics (svg) 1.1 (second edit
ion)the definit
ion of 'svgmpathelement' in that specificat
ion.
... recommendat
ion initial definit
ion ...
SVGMetadataElement - Web APIs
<div id="interfacediagram" style="display: inline-block; posit
ion: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; posit
ion: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectrat
io="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1...
... specificat
ions specificat
ion status comment scalable vector graphics (svg) 2the definit
ion of 'svgmetadataelement' in that specificat
ion.
... candidate recommendat
ion no change scalable vector graphics (svg) 1.1 (second edit
ion)the definit
ion of 'svgmetadataelement' in that specificat
ion.
... recommendat
ion initial definit
ion ...
SVGPolygonElement - Web APIs
<div id="interfacediagram" style="display: inline-block; posit
ion: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; posit
ion: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectrat
io="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 ...
... specificat
ions specificat
ion status comment scalable vector graphics (svg) 2the definit
ion of 'svgpolygonelement' in that specificat
ion.
... candidate recommendat
ion replaced the inheritance from svgelementsvgtests, svglangspace, svgexternalresourcesrequired, svgstylable, and svgtransformable by svggeometryelement scalable vector graphics (svg) 1.1 (second edit
ion)the definit
ion of 'svgpolygonelement' in that specificat
ion.
... recommendat
ion initial definit
ion ...
SVGPolylineElement - Web APIs
<div id="interfacediagram" style="display: inline-block; posit
ion: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; posit
ion: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectrat
io="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-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...
... specificat
ions specificat
ion status comment scalable vector graphics (svg) 2the definit
ion of 'svgpolylineelement' in that specificat
ion.
... candidate recommendat
ion replaced the inheritance from svgelementsvgtests, svglangspace, svgexternalresourcesrequired, svgstylable, and svgtransformable by svggeometryelement scalable vector graphics (svg) 1.1 (second edit
ion)the definit
ion of 'svgpolylineelement' in that specificat
ion.
... recommendat
ion initial definit
ion ...
SVGRadialGradientElement - Web APIs
<div id="interfacediagram" style="display: inline-block; posit
ion: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; posit
ion: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectrat
io="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line...
... specificat
ions specificat
ion status comment scalable vector graphics (svg) 2the definit
ion of 'svgradialgradientelement' in that specificat
ion.
... candidate recommendat
ion no change scalable vector graphics (svg) 1.1 (second edit
ion)the definit
ion of 'svgradialgradientelement' in that specificat
ion.
... recommendat
ion initial definit
ion ...
Screen.availHeight - Web APIs
example if your web applicat
ion needs to open a new window, such as a tool palette which can contain multiple panels, and wants to posit
ion it so that it occupies the entire vertical space available, you can do so using code similar to what's seen here.
... on a windows system, this would funct
ion similarly, by opening the window and sizing it vertically so it uses all available vertical space, leaving room for the taskbar and any other interface elements that reserve space.
... specificat
ions specificat
ion status comment css object model (cssom) view modulethe definit
ion of 'screen.availheight' in that specificat
ion.
... working draft initial definit
ion.
Screen.pixelDepth - Web APIs
per the cssom, some implementat
ions return 24 for compatibility reasons.
... see the browser compatibility sect
ion for those that don't.
... syntax let depth = window.screen.pixeldepth example // if there is not adequate bit depth // choose a simpler color if ( window.screen.pixeldepth > 8 ) { document.style.color = "#faebd7"; } else { document.style.color = "#ffffff"; } specificat
ions specificat
ion status comment css object model (cssom) view modulethe definit
ion of 'screen.pixeldepth' in that specificat
ion.
... working draft initial definit
ion.
Sensor - Web APIs
see feature-policy for implementat
ion instruct
ions.
... accelerometer ambientlightsensor gyroscope linearaccelerat
ionsensor magnetometer orientat
ionsensor properties sensor.activated read only returns a boolean indicating whether the sensor is active.
... specificat
ions specificat
ion status comment generic sensor apithe definit
ion of 'sensor' in that specificat
ion.
... candidate recommendat
ion initial definit
ion.
SensorErrorEvent.error - Web APIs
the error read-only property of the sensorerrorevent interface returns the domexcept
ion object passed in the event's contructor.
... syntax var domexcept
ion = sensorerrorevent.error; value a domexcept
ion.
... specificat
ions specificat
ion status comment generic sensor apithe definit
ion of 'error' in that specificat
ion.
... candidate recommendat
ion initial definit
ion.
SensorErrorEvent - Web APIs
the sensorerrorevent interface of the sensor apis provides informat
ion about errors thrown by a sensor or related interface.
... properties sensorerrorevent.error read only returns the domexcept
ion object passed in the event's contructor.
... specificat
ions specificat
ion status comment generic sensor apithe definit
ion of 'sensorerrorevent' in that specificat
ion.
... candidate recommendat
ion initial definit
ion.
Server-sent events - Web APIs
tradit
ionally, a web page has to send a request to the server to receive new data; that is, the page requests data from the server.
... interfaces eventsource defines all the features that handle connecting to a server, receiving events/data, errors, closing a connect
ion, etc.
... examples simple sse demo using php specificat
ion specificat
ion status comment html living standardthe definit
ion of 'server-sent events' in that specificat
ion.
... 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 applicat
ion powered by server-sent events and its code on github.
ServiceWorkerContainer.oncontrollerchange - Web APIs
the oncontrollerchange property of the serviceworkercontainer interface is an event handler fired whenever a controllerchange event occurs — when the document's associated serviceworkerregistrat
ion acquires a new active worker.
... syntax serviceworkercontainer.oncontrollerchange = funct
ion(controllerchangeevent) { ...
... } example // tbd specificat
ions specificat
ion status comment service workersthe definit
ion of 'serviceworkercontainer: oncontrollerchange' in that specificat
ion.
... working draft initial definit
ion.
ServiceWorkerContainer.startMessages() - Web APIs
explanat
ion by default, all messages sent from a page's controlling service worker to the page (using client.postmessage()) are queued while the page is loading, and get dispatched once the page's html document has been loaded and parsed (i.e.
... examples if('serviceworker' in navigator) { navigator.serviceworker .register('/sw.js') .then(funct
ion() { console.log('service worker registered'); }); } // ...
...}); navigator.serviceworker.startmessages(); specificat
ions specificat
ion status comment service workersthe definit
ion of 'serviceworkercontainer: startmessages()' in that specificat
ion.
... working draft initial definit
ion.
ServiceWorkerGlobalScope: install event - Web APIs
the install event of the serviceworkerglobalscope interface is fired when a serviceworkerregistrat
ion acquires a new serviceworkerregistrat
ion.installing worker.
... bubbles no cancelable no interface extendableevent event handler property serviceworkerglobalscope.oninstall examples the following snippet shows how an install event handler can be used to populate a cache with a number of responses, which the service worker can then use to serve assets offline: this.addeventlistener('install', funct
ion(event) { event.waituntil( caches.open('v1').then(funct
ion(cache) { return cache.add( '/sw-test/', '/sw-test/index.html', '/sw-test/style.css', '/sw-test/app.js', '/sw-test/image-list.js', '/sw-test/star-wars-logo.jpg', '/sw-test/gallery/', '/sw-test/gallery/bountyhunters.jpg', '/sw-test/gallery/mylittlevader.jpg', ...
... '/sw-test/gallery/snowtroopers.jpg' ); }) ); }); you can also set up the event handler using the serviceworkerglobalscope.oninstall property: globalscope.oninstall = funct
ion(event) { ...
... }; specificat
ions specificat
ion status comment service workersthe definit
ion of 'install' in that specificat
ion.
ServiceWorkerGlobalScope: message event - Web APIs
the service worker can opt
ionally send a response back via the client.postmessage(), corresponding to the controlled page.
... bubbles no cancelable no interface extendablemessageevent event handler property onmessage examples in the below example a page gets a handle to the serviceworker object via serviceworkerregistrat
ion.active, and then calls its postmessage() funct
ion.
... // in the page being controlled if (navigator.serviceworker) { navigator.serviceworker.register('service-worker.js'); navigator.serviceworker.addeventlistener('message', event => { // event is a messageevent object console.log(`the service worker sent me a message: ${event.data}`); }); navigator.serviceworker.ready.then( registrat
ion => { registrat
ion.active.postmessage("hi service worker"); }); } the service worker can receive the message by listening to the message event: // in the service worker addeventlistener('message', event => { // event is an extendablemessageevent object console.log(`the client sent me a message: ${event.data}`); event.source.postmessage("hi client"); }); specificat
ions specificat
ion status service workers...
...the definit
ion of 'message' in that specificat
ion.
ServiceWorkerGlobalScope.onactivate - Web APIs
this happens after installat
ion, when the page to be controlled by the service worker refreshes.
... syntax serviceworkerglobalscope.onactivate = funct
ion(event) { ...
... then.addeventlistener('activate', funct
ion(event) { var cachewhitelist = ['v2']; event.waituntil( caches.foreach(funct
ion(cache, cachename) { if (cachewhitelist.indexof(cachename) == -1) { return caches.delete(cachename); } }) ); }); specificat
ions specificat
ion status comment service workersthe definit
ion of 'event handlers' in that specificat
ion.
... working draft initial definit
ion ...
ServiceWorkerMessageEvent - Web APIs
the serviceworkermessageevent interface of the serviceworker api contains informat
ion about an event sent to a serviceworkercontainer target.
...the event object is accessed via the handler funct
ion of a message event, when fired by a message received from a service worker.
... navigator.serviceworker.ready.then(funct
ion(reg) { ...
... // set up a message channel to communicate with the sw var channel = new messagechannel(); channel.port1.onmessage = funct
ion(e) { console.log(e); handlechannelmessage(e.data); } mysw = reg.active; mysw.postmessage('hello', [channel.port2]); }); ...
ServiceWorkerState - Web APIs
no funct
ional events are dispatched until the state becomes activated.
... activated the service worker in this state is considered an active worker ready to handle funct
ional events.
... specificat
ions specificat
ion status comment service workersthe definit
ion of 'serviceworkerstate' in that specificat
ion.
... working draft initial definit
ion.
SourceBuffer.appendWindowEnd - Web APIs
except
ions the following except
ions may be thrown when setting a new value for this property.
... except
ion explanat
ion invalidaccesserror an attempt was made to set the value to less than or equal to sourcebuffer.appendwindowstart, or nan.
... example tbd specificat
ions specificat
ion status comment media source extens
ionsthe definit
ion of 'appendwindowend' in that specificat
ion.
... recommendat
ion initial definit
ion.
SourceBuffer.changeType() - Web APIs
one scenar
io in which this is helpful is to support adapting the media source to changing bandwidth availability, by transit
ioning from one codec to another as resource constraints change.
... except
ions typeerror the specified string is empty, rather than indicating a valid mime type.
... invalidstateerror the sourcebuffer is not a member of the parent media source's sourcebuffers list, or the buffer's updating property indicates that a prev
iously queued appendbuffer() or remove() is still being processed.
... usage notes if the parent mediasource is in its "ended" readystate, calling changetype() will transit
ion the media source to the "open" readystate and fire a simple event named sourceopen at the parent media source.
SourceBuffer.timestampOffset - Web APIs
except
ions the following except
ions may be thrown when setting a new value for this property.
... except
ion explanat
ion invalidstateerror one or more of the sourcebuffer objects in mediasource.sourcebuffers are being updated (i.e.
... example tbd specificat
ions specificat
ion status comment media source extens
ionsthe definit
ion of 'timestampoffset' in that specificat
ion.
... recommendat
ion initial definit
ion.
SourceBufferList: indexed property getter - Web APIs
[].) syntax var mysourcebuffer = sourcebufferlist[index]; parameters index the index posit
ion of the sourcebuffer object you want to return.
... except
ions no specific except
ions are thrown, but if the supplied index is great than or equal to sourcebufferlist.length, the operat
ion will return undefined.
... specificat
ions specificat
ion status comment media source extens
ionsthe definit
ion of 'sourcebuffer() getter' in that specificat
ion.
... recommendat
ion initial definit
ion.
SourceBufferList - Web APIs
[]) or funct
ions such as foreach() for example.
... <div id="interfacediagram" style="display: inline-block; posit
ion: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; posit
ion: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectrat
io="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/sou...
... specificat
ions specificat
ion status comment media source extens
ionsthe definit
ion of 'sourcebufferlist' in that specificat
ion.
... recommendat
ion initial definit
ion.
SpeechGrammar - Web APIs
the speechgrammar interface of the web speech api represents a set of words or patterns of words that we want the recognit
ion service to recognize.
... speechgrammar.weight opt
ional sets and returns the weight of the speechgrammar object.
...ors; public <color> = aqua | azure | beige | bisque | black | blue | brown | chocolate | coral | crimson | cyan | fuchsia | ghostwhite | gold | goldenrod | gray | green | indigo | ivory | khaki | lavender | lime | linen | magenta | maroon | moccasin | navy | olive | orange | orchid | peru | pink | plum | purple | red | salmon | sienna | silver | snow | tan | teal | thistle | tomato | turquoise | v
iolet | white | yellow ;' var recognit
ion = new speechrecognit
ion(); var speechrecognit
ionlist = new speechgrammarlist(); speechrecognit
ionlist.addfromstring(grammar, 1); recognit
ion.grammars = speechrecognit
ionlist; console.log(speechrecognit
ionlist[0].src); // should return the same as the contents of the grammar variable console.log(speechrecognit
ionlist[0].weight); // should return 1 - the sam...
... specificat
ions specificat
ion status comment web speech apithe definit
ion of 'speechgrammar' in that specificat
ion.
SpeechSynthesis.onvoiceschanged - Web APIs
ent handler that will run when the list of speechsynthesisvoice objects that would be returned by the speechsynthesis.getvoices() method has changed (when the voiceschanged event fires.) this may occur when speech synthesis is being done on the server-side and the voices list is being determined asynchronously, or when client-side voices are installed/uninstalled while a speech synthesis applicat
ion is running.
... syntax speechsynthesisinstance.onvoiceschanged = funct
ion() { ...
... var voices = []; funct
ion populatevoicelist() { voices = synth.getvoices(); for(i = 0; i < voices.length ; i++) { var opt
ion = document.createelement('opt
ion'); opt
ion.textcontent = voices[i].name + ' (' + voices[i].lang + ')'; if(voices[i].default) { opt
ion.textcontent += ' -- default'; } opt
ion.setattribute('data-lang', voices[i].lang); opt
ion.setattribute('data-name', voices[i].nam...
...e); voiceselect.appendchild(opt
ion); } } populatevoicelist(); if (speechsynthesis.onvoiceschanged !== undefined) { speechsynthesis.onvoiceschanged = populatevoicelist; } specificat
ions specificat
ion status comment web speech apithe definit
ion of 'onvoiceschanged' in that specificat
ion.
SpeechSynthesisEvent - Web APIs
the speechsynthesisevent interface of the web speech api contains informat
ion about the current state of speechsynthesisutterance objects that have been processed in the speech service.
... speechsynthesisevent.charindex read only returns the index posit
ion of the character in the speechsynthesisutterance.text that was being spoken when the event was triggered.
... examples utterthis.onpause = funct
ion(event) { var char = event.utterance.text.charat(event.charindex); console.log('speech paused at character ' + event.charindex + ' of "' + event.utterance.text + '", which is "' + char + '".'); } utterthis.onboundary = funct
ion(event) { console.log(event.name + ' boundary reached after ' + event.elapsedtime + ' milliseconds.'); } specificat
ions specificat
ion status comme...
...nt web speech apithe definit
ion of 'speechsynthesisevent' in that specificat
ion.
SpeechSynthesisVoice - Web APIs
every speechsynthesisvoice has its own relative speech service including informat
ion about language, name and uri.
... speechsynthesisvoice.voiceuri read only returns the type of uri and locat
ion of the speech synthesis service for this voice.
... funct
ion populatevoicelist() { voices = synth.getvoices(); for(i = 0; i < voices.length ; i++) { var opt
ion = document.createelement('opt
ion'); opt
ion.textcontent = voices[i].name + ' (' + voices[i].lang + ')'; if(voices[i].default) { opt
ion.textcontent += ' -- default'; } opt
ion.setattribute('data-lang', voices[i].lang); opt
ion.setattribute('data-name', voices[i].name); voiceselect.appendchild(opt
ion); } } populatevoicelist(); if (speechsynthesis.onvoiceschanged !== undefined) { speechsynthesis.onvoiceschanged = populatevoicelist; } inputform.onsubmit = funct
ion(event) { event.preventdefault(); var utterthis = new speechsynthesisutterance(inputtxt.value); ...
...var selectedopt
ion = voiceselect.selectedopt
ions[0].getattribute('data-name'); for(i = 0; i < voices.length ; i++) { if(voices[i].name === selectedopt
ion) { utterthis.voice = voices[i]; } } utterthis.pitch = pitch.value; utterthis.rate = rate.value; synth.speak(utterthis); utterthis.onpause = funct
ion(event) { var char = event.utterance.text.charat(event.charindex); console.log('speech paused at character ' + event.charindex + ' of "' + event.utterance.text + '", which is "' + char + '".'); } inputtxt.blur(); } specificat
ions specificat
ion status comment web speech apithe definit
ion of 'speechsynthesisvoice' in that specificat
ion.
StaticRange.endOffset - Web APIs
the endoffset property of the staticrange interface returns the offset into the end node of the range's end posit
ion.
... specificat
ions specificat
ion status comment domthe definit
ion of 'endoffset' in that specificat
ion.
... living standard static rangethe definit
ion of 'endoffset' in that specificat
ion.
... editor's draft initial definit
ion.
StaticRange.startContainer - Web APIs
syntax var node = staticnode.startcontainer value the dom node inside which the start posit
ion of the range is found.
... specificat
ions specificat
ion status comment domthe definit
ion of 'startcontainer ' in that specificat
ion.
... living standard static rangethe definit
ion of 'startcontainer' in that specificat
ion.
... editor's draft initial definit
ion.
StaticRange.startOffset - Web APIs
the read-only startoffset property of the staticrange interface returns the offset into the start node of the range's start posit
ion.
... specificat
ions specificat
ion status comment domthe definit
ion of 'startoffset' in that specificat
ion.
... living standard static rangethe definit
ion of 'startoffset' in that specificat
ion.
... editor's draft initial definit
ion.
StorageQuota.queryInfo - Web APIs
the queryinfo() property of the storagequota interface returns a storageinfo object containting the current data usage and available quota informat
ion for the applicat
ion.
... syntax storagequota.queryinfo().then(funct
ion(storageinfo) { ...
... specificat
ions specificat
ion status comment quota management apithe definit
ion of 'queryinfo()' in that specificat
ion.
... obsolete initial definit
ion.
StorageQuota.requestPersistentQuota - Web APIs
the requestpersistentquota() property of the storagequota interface requests persistent storage for the requesting applicat
ion and returns a promise to an instance of storageinfo.
... syntax storagequota.requestpersistentquota().then(funct
ion(storageinfo) { ...
... specificat
ions specificat
ion status comment quota management apithe definit
ion of 'requestpersistentquota()' in that specificat
ion.
... obsolete initial definit
ion.
StyleSheet.disabled - Web APIs
} specificat
ion specificat
ion status comment css object model (cssom)the definit
ion of 'stylesheet.disabled' in that specificat
ion.
... working draft no change from document object model (dom) level 2 style specificat
ion.
... document object model (dom) level 2 style specificat
ionthe definit
ion of 'stylesheet.disabled' in that specificat
ion.
... obsolete initial definit
ion.
SubmitEvent.submitter - Web APIs
while this is often an <input> element whose type or a <button> whose type is submit, it could be some other element which has initiated a submiss
ion process.
... if the submiss
ion was not triggered by a button of some kind, the value of submitter is null.
...with that in hand, we can call a processorder() funct
ion to handle the order, passing along the form and the handler id.
... specificat
ions specificat
ion status comment html living standardthe definit
ion of 'submitevent.submitter' in that specificat
ion.
Text.replaceWholeText() - Web APIs
a domexcept
ion with the value no_modificat
ion_err is thrown if one of the text nodes being replaced is read only.
... the returned node is the current node unless the current node is read only, in which case the returned node is a newly created text node of the same type which has been inserted at the locat
ion of the replacement.
... specificat
ions specificat
ion status comment document object model (dom) level 3 core specificat
ionthe definit
ion of 'text' in that specificat
ion.
... obsolete initial definit
ion.
TextDecoder.prototype.decode() - Web APIs
syntax b1 = decoder.decode(buffer, opt
ions); b2 = decoder.decode(buffer); b3 = decoder.decode(); parameters buffer opt
ional is either an arraybuffer or an arraybufferview containing the text to decode.
... opt
ions opt
ional is a textdecodeopt
ions dict
ionary with the property: stream a boolean flag indicating that addit
ional data will follow in subsequent calls to decode().
...decoded value: <span id="decoded-value"></span></p> javascript const encoder = new textencoder(); const array = encoder.encode('€'); // uint8array(3) [226, 130, 172] document.getelementbyid('encoded-value').textcontent = array; const decoder = new textdecoder(); const str = decoder.decode(array); // string "€" document.getelementbyid('decoded-value').textcontent = str; result specificat
ions specificat
ion status comment encodingthe definit
ion of 'textdecoder.decode()' in that specificat
ion.
... living standard initial definit
ion.
TextEncoder() - Web APIs
syntax encoder = new textencoder(); parameters textencoder() takes no parameters since firefox 48 and chrome 53 note: pr
ior to firefox 48 and chrome 53, an encoding type label was accepted as a paramer to the textencoder object, since then both browers have removed support for any encoder type other than utf-8, to match the spec.
... except
ions textencoder() throws no except
ions since firefox 48 and chrome 53 note: pr
ior to firefox 48 and chrome 53 an except
ion would be thrown for an unknown encoding type.
... specificat
ions specificat
ion status comment encodingthe definit
ion of 'textencoder()' in that specificat
ion.
... living standard initial definit
ion ...
TextMetrics - Web APIs
the textmetrics interface represents the dimens
ions of a piece of text in the canvas; a textmetrics() instance can be retrieved using the canvasrenderingcontext2d.measuretext() method.
...ngboxascent', 'actualboundingboxascent', 'emheightascent', 'hangingbaseline']; const baselinesbelowalphabetic = ['ideographicbaseline', 'emheightdescent', 'actualboundingboxdescent', 'fontboundingboxdescent']; const baselines = [...baselinesabovealphabetic, ...baselinesbelowalphabetic]; ctx.font = '25px serif'; ctx.strokestyle = 'red'; baselines.foreach(funct
ion (baseline, index) { let text = 'abcdefghijklmnop (' + baseline + ')'; let textmetrics = ctx.measuretext(text); let y = 50 + index * 50; ctx.beginpath(); ctx.filltext(text, 0, y); let liney = y - math.abs(textmetrics[baseline]); if (baselinesbelowalphabetic.includes(baseline)) { liney = y + math.abs(textmetrics[baseline]); } ctx.moveto(0, liney); ctx.lineto(550, liney); ...
...ctx.stroke(); }); result measuring text width when measuring the x-direct
ion of a piece of text, the sum of actualboundingboxleft and actualboundingboxright can be wider than the width of the inline box (width), due to slanted/italic fonts where characters overhang their advance width.
... const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); const text = 'abcdefghijklmnop'; ctx.font = 'italic 50px serif'; const textmetrics = ctx.measuretext(text); console.log(textmetrics.width); // 459.8833312988281 console.log(math.abs(textmetrics.actualboundingboxleft) + math.abs(textmetrics.actualboundingboxright)); // 462.8833333333333 specificat
ions specificat
ion html living standardthe definit
ion of 'textmetrics' in that specificat
ion.
TextTrack - Web APIs
the texttrack interface—part of the api for handling webvtt (text tracks on media presentat
ions)—describes and controls the text track associated with a particular <track> element.
...track cues are active if the current playback posit
ion of the media is between the cues' start and end times.
... thus, for displayed cues such as capt
ions or subtitles, the active cues are currently being displayed.
... example tbd specificat
ions specificat
ion status comment html living standardthe definit
ion of 'texttrack' in that specificat
ion.
TextTrackList.onaddtrack - Web APIs
syntax texttracklist.onaddtrack = eventhandler; value set onaddtrack to a funct
ion that accepts as input a trackevent object which indicates in its track property which video track has been added to the media.
... example this snippet establishes a handler for the addtrack event that calls a funct
ion, addtotracklist(), passing in the videotrack object representing the newly-added track.
... in this scenar
io, that funct
ion's role is to add the new track to a list of video tracks available to choose from.
... document.queryselector("video").texttracks.onaddtrack = funct
ion(event) { addtotracklist(event.track); }; specificat
ions specificat
ion status comment html living standardthe definit
ion of 'texttracklist: onaddtrack' in that specificat
ion.
TextTrackList - Web APIs
the individual tracks can be accessed using array syntax or funct
ions such as foreach() for example.
... usage notes in addit
ion to being able to obtain direct access to the text tracks present on a media element, texttracklist lets you set event handlers on the addtrack and removetrack events, so that you can detect when tracks are added to or removed from the media element's stream.
... var texttracks = document.queryselector("video").texttracks; monitoring track count changes in this example, we have an app that displays informat
ion about the number of channels available.
... texttracks.onaddtrack = updatetrackcount; texttracks.onremovetrack = updatetrackcount; funct
ion updatetrackcount(event) { trackcount = texttracks.length; drawtrackcountindicator(trackcount); } specificat
ions specificat
ion status comment html living standardthe definit
ion of 'textracklist' in that specificat
ion.
TimeEvent - Web APIs
the timeevent interface, a part of svg smil animat
ion, provides specific contextual informat
ion associated with time events.
... <div id="interfacediagram" style="display: inline-block; posit
ion: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; posit
ion: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectrat
io="xminymin meet"><a xlink:href="/docs/web/api/event" target="_top"><rect x="1" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="38.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">event</text></a><polyline points="76,25 86,20 86,30 76,25" stroke="#d4dde4" fill="none"/><line x1="86" y1="25" x2="116" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/timeevent" target="...
...ght="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="161" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">timeevent</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties timeevent.detail read only is a long that specifies some detail informat
ion about the event, depending on the type of the event.
... for this event type, indicates the repeat number for the animat
ion.
TimeRanges.end() - Web APIs
except
ions index_size_err a domexcept
ion thrown if the specified index doesn't correspond to an existing range.
... example given a video element with the id "myvideo": var v = document.getelementbyid("myvideo"); var buf = v.buffered; var numranges = buf.length; if (buf.length == 1) { // only one range if (buf.start(0) == 0 && buf.end(0) == v.durat
ion) { // the one range starts at the beginning and ends at // the end of the video, so the whole thing is loaded } } this example looks at the time ranges and looks to see if the entire video has been loaded.
... specificat
ions specificat
ion status comment html living standardthe definit
ion of 'timeranges.end()' in that specificat
ion.
... living standard initial definit
ion ...
Window.onpaint - Web APIs
not working in gecko-based applicat
ions currently, see notes sect
ion!
... syntax window.onpaint = funcref; funcref is a handler funct
ion.
... notes onpaint doesn't work currently, and it is quest
ionable whether this event is going to work at all, see bug 239074.
... specificat
ion this is not part of any specificat
ion.
Window.releaseEvents() - Web APIs
syntax window.releaseevents(eventtype) eventtype is a combinat
ion 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.
... specificat
ion this is not part of any specificat
ion.
... desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on
iossamsung internetreleaseevents deprecatednon-standardchrome full support yesedge full support 12firefox full support yesie ?
... yessafari full support yeswebview android full support yeschrome android full support yesfirefox android full support yesopera android full support yessafari
ios full support yessamsung internet android full support yeslegend full support full support compatibility unknown compatibility unknownnon-standard.
Window: resize event - Web APIs
see resize observer to read the draft document, and github issues to read the on-going discuss
ions.
... <p>resize the browser window to fire the <code>resize</code> event.</p> <p>window height: <span id="height"></span></p> <p>window width: <span id="width"></span></p> const heightoutput = document.queryselector('#height'); const widthoutput = document.queryselector('#width'); funct
ion reportwindowsize() { heightoutput.textcontent = window.innerheight; widthoutput.textcontent = window.innerwidth; } window.onresize = reportwindowsize; addeventlistener equivalent you could set up the event handler using the addeventlistener() method: window.addeventlistener('resize', reportwindowsize); specificat
ions specificat
ion status document object model (do...
...m) level 3 events specificat
ionthe definit
ion of 'resize' in that specificat
ion.
... obsolete css object model (cssom) view modulethe definit
ion of 'resize' in that specificat
ion.
Window.screenLeft - Web APIs
in this example we are using screenleft/screentop plus window.requestanimat
ionframe() to constantly redraw the circle in the same physical posit
ion on the screen, even if the window posit
ion is moved.
... initialleft = window.screenleft + canvaselem.offsetleft; initialtop = window.screentop + canvaselem.offsettop; funct
ion posit
ionelem() { let newleft = window.screenleft + canvaselem.offsetleft; let newtop = window.screentop + canvaselem.offsettop; let leftupdate = initialleft - newleft; let topupdate = initialtop - newtop; ctx.fillstyle = 'rgb(0, 0, 0)'; ctx.fillrect(0, 0, width, height); ctx.fillstyle = 'rgb(0, 0, 255)'; ctx.beginpath(); ctx.arc(leftupdate + (width/2), topupdate + (height/2) + 35, 50, degtorad(0), degtorad(360), false); ctx.fill(); pelem.textcontent = 'window.screenleft: ' + window.screenleft + ', window.screentop: ' + window.screentop; window.requestanimat
ionframe(posit
ionelem); } window.requestanimat
ionframe(posit
ionelem); also in the code...
... if(!window.screenleft) { window.screenleft = window.screenx; window.screentop = window.screeny; } specificat
ions specificat
ion status comment css object model (cssom) view modulethe definit
ion of 'window.screenleft' in that specificat
ion.
... working draft initial definit
ion.
Window.screenTop - Web APIs
in this example we are using screenleft/screentop plus window.requestanimat
ionframe() to constantly redraw the circle in the same physical posit
ion on the screen, even if the window posit
ion is moved.
... initialleft = window.screenleft + canvaselem.offsetleft; initialtop = window.screentop + canvaselem.offsettop; funct
ion posit
ionelem() { let newleft = window.screenleft + canvaselem.offsetleft; let newtop = window.screentop + canvaselem.offsettop; let leftupdate = initialleft - newleft; let topupdate = initialtop - newtop; ctx.fillstyle = 'rgb(0, 0, 0)'; ctx.fillrect(0, 0, width, height); ctx.fillstyle = 'rgb(0, 0, 255)'; ctx.beginpath(); ctx.arc(leftupdate + (width/2), topupdate + (height/2) + 35, 50, degtorad(0), degtorad(360), false); ctx.fill(); pelem.textcontent = 'window.screenleft: ' + window.screenleft + ', window.screentop: ' + window.screentop; window.requestanimat
ionframe(posit
ionelem); } window.requestanimat
ionframe(posit
ionelem); also in the code...
... if(!window.screenleft) { window.screenleft = window.screenx; window.screentop = window.screeny; } specificat
ions specificat
ion status comment css object model (cssom) view modulethe definit
ion of 'window.screentop' in that specificat
ion.
... working draft initial definit
ion.
Window.screenX - Web APIs
in this example we are using window.screenleft/window.screentop plus window.requestanimat
ionframe() to constantly redraw the circle in the same physical posit
ion on the screen, even if the window posit
ion is moved.
... initialleft = window.screenleft + canvaselem.offsetleft; initialtop = window.screentop + canvaselem.offsettop; funct
ion posit
ionelem() { let newleft = window.screenleft + canvaselem.offsetleft; let newtop = window.screentop + canvaselem.offsettop; let leftupdate = initialleft - newleft; let topupdate = initialtop - newtop; ctx.fillstyle = 'rgb(0, 0, 0)'; ctx.fillrect(0, 0, width, height); ctx.fillstyle = 'rgb(0, 0, 255)'; ctx.beginpath(); ctx.arc(leftupdate + (width/2), topupdate + (height/2) + 35, 50, degtorad(0), degtorad(360), false); ctx.fill(); pelem.textcontent = 'window.screenleft: ' + window.screenleft + ', window.screentop: ' + window.screentop; window.requestanimat
ionframe(posit
ionelem); } window.requestanimat
ionframe(posit
ionelem); these work in ex...
... if(!window.screenleft) { window.screenleft = window.screenx; window.screentop = window.screeny; } specificat
ions specificat
ion status comment css object model (cssom) view modulethe definit
ion of 'window.screenx' in that specificat
ion.
... working draft initial definit
ion.
Window.screenY - Web APIs
in this example we are using window.screenleft/window.screentop plus window.requestanimat
ionframe() to constantly redraw the circle in the same physical posit
ion on the screen, even if the window posit
ion is moved.
... initialleft = window.screenleft + canvaselem.offsetleft; initialtop = window.screentop + canvaselem.offsettop; funct
ion posit
ionelem() { let newleft = window.screenleft + canvaselem.offsetleft; let newtop = window.screentop + canvaselem.offsettop; let leftupdate = initialleft - newleft; let topupdate = initialtop - newtop; ctx.fillstyle = 'rgb(0, 0, 0)'; ctx.fillrect(0, 0, width, height); ctx.fillstyle = 'rgb(0, 0, 255)'; ctx.beginpath(); ctx.arc(leftupdate + (width/2), topupdate + (height/2) + 35, 50, degtorad(0), degtorad(360), false); ctx.fill(); pelem.textcontent = 'window.screenleft: ' + window.screenleft + ', window.screentop: ' + window.screentop; window.requestanimat
ionframe(posit
ionelem); } window.requestanimat
ionframe(posit
ionelem); these work in ex...
... if(!window.screenleft) { window.screenleft = window.screenx; window.screentop = window.screeny; } specificat
ions specificat
ion status comment css object model (cssom) view modulethe definit
ion of 'window.screeny' in that specificat
ion.
... working draft initial definit
ion.
Window.scrollX - Web APIs
syntax var x = window.scrollx; value in practice, the returned value is a double-precis
ion floating-point value indicating the number of pixels the document is currently scrolled horizontally from the origin, where a positive value means the content is scrolled to the left.
... example this example checks the current horizontal scroll posit
ion of the document.
...addit
ionally, older vers
ions of internet explorer (< 9) do not support either property and must be worked around by checking other non-standard properties.
...window.pageyoffset : (document.documentelement || document.body.parentnode || document.body).scrolltop; specificat
ion specificat
ion status comment css object model (cssom) view modulethe definit
ion of 'window.scrollx' in that specificat
ion.
WindowEventHandlers.onmessage - Web APIs
syntax window.addeventlistener('message', funct
ion(event) { ...
... }) window.onmessage = funct
ion(event) { ...
... } specificat
ions specificat
ion status comment html living standardthe definit
ion of 'onmessage' in that specificat
ion.
... living standard initial definit
ion.
WindowEventHandlers.onpopstate - Web APIs
the popstate event is only triggered by performing a browser act
ion, such as clicking on the back button (or calling history.back() in javascript), when navigating between two history entries for the same document.
... syntax window.onpopstate = funcref; funcref is a handler funct
ion.
... examples for example, a page at http://example.com/example.html running the following code will generate alerts as indicated: window.onpopstate = funct
ion(event) { alert("locat
ion: " + document.locat
ion + ", state: " + json.stringify(event.state)); }; history.pushstate({page: 1}, "title 1", "?page=1"); history.pushstate({page: 2}, "title 2", "?page=2"); history.replacestate({page: 3}, "title 3", "?page=3"); history.back(); // alerts "locat
ion: http://example.com/example.html?page=1, state: {"page":1}" history.back(); // alerts "locat
ion: http://example.com/example.html, state: null history.go(2); // alerts "locat
ion: http://example.com/example.html?page=3, state: {"page":3} note that even though the original history entry (for http://example.com/example.html) has no state object a...
... specificat
ions specificat
ion status comment html living standardthe definit
ion of 'onpopstate' in that specificat
ion.
WindowOrWorkerGlobalScope.caches - Web APIs
this object enables funct
ionality such as storing assets for offline use, and generating custom responses to requests.
... this.addeventlistener('install', funct
ion(event) { event.waituntil( caches.open('v1').then(funct
ion(cache) { return cache.addall([ '/sw-test/', '/sw-test/index.html', '/sw-test/style.css', '/sw-test/app.js', '/sw-test/image-list.js', '/sw-test/star-wars-logo.jpg', '/sw-test/gallery/', '/sw-test/gallery/bountyhunters.jpg', '/sw-test/gallery/mylittlevader.jpg', '/sw-test/gallery/snowtroopers.jpg' ]); }) ); }); specificat
ions specificat
ion status comment service ...
...workersthe definit
ion of 'caches' in that specificat
ion.
... service workers working draft initial definit
ion.
WindowOrWorkerGlobalScope.clearInterval() - Web APIs
the clearinterval() method of the windoworworkerglobalscope mixin cancels a timed, repeating act
ion which was prev
iously established by a call to setinterval().
... syntax scope.clearinterval(intervalid) parameters intervalid the identifier of the repeated act
ion you want to cancel.
... specificat
ions specificat
ion status comment html living standardthe definit
ion of 'windoworworkerglobalscope.clearinterval()' in that specificat
ion.
... html living standardthe definit
ion of 'clearinterval()' in that specificat
ion.
WorkerGlobalScope.self - Web APIs
example if you called console.log(self); inside a worker, you will get a worker global scope of the same type as that worker object written to the console — something like the following: dedicatedworkerglobalscope { undefined: undefined, infinity: infinity, math: mathconstructor, nan: nan, intl: object…} infinity: infinity array: funct
ion array() { [native code] } arguments: null caller: null isarray: funct
ion isarray() { [native code] } length: 1 name: "array" observe: funct
ion observe() { [native code] } prototype: array[0] unobserve: funct
ion unobserve() { [native code] } __proto__: funct
ion empty() {} <funct
ion scope> arraybuffer: funct
ion arraybuffer() { [native...
... code] } blob: funct
ion blob() { [native code] } boolean: funct
ion boolean() { [native code] } dataview: funct
ion dataview() { [native code] } date: funct
ion date() { [native code] } dedicatedworkerglobalscope: funct
ion dedicatedworkerglobalscope() { [native code] } error: funct
ion error() { [native code] } // etc.
...we also maintain a list of funct
ions and classes available to web workers.
... specificat
ions specificat
ion status comment html living standardthe definit
ion of 'self' in that specificat
ion.
WritableStreamDefaultController - Web APIs
writablestreamdefaultcontroller instances are created automatically during writablestream construct
ion.
... methods writablestreamdefaultcontroller.error() causes any future interact
ions with the associated stream to error.
... } }); specificat
ions specificat
ion status comment streamsthe definit
ion of 'writablestreamdefaultcontroller' in that specificat
ion.
... living standard initial definit
ion.
WritableStreamDefaultWriter.abort() - Web APIs
syntax var promise = writablestreamdefaultwriter.abort(reason); parameters reason opt
ional a domstring representing a human-readable reason for the abort.
... except
ions typeerror the stream you are trying to abort is not a writablestream, or it is locked.
... // abort the stream when desired writer.abort.then((reason) => { console.log(reason); }) specificat
ions specificat
ion status comment streamsthe definit
ion of 'abort()' in that specificat
ion.
... living standard initial definit
ion.
XDomainRequest - Web APIs
xdomainrequest is an implementat
ion of http access control (cors) that worked in internet explorer 8 and 9.
... example if(window.xdomainrequest){ var xdr = new xdomainrequest(); xdr.open("get", "http://example.com/api/method"); xdr.onprogress = funct
ion () { //progress }; xdr.ontimeout = funct
ion () { //timeout }; xdr.onerror = funct
ion () { //error occurred }; xdr.onload = funct
ion() { //success(xdr.responsetext); } settimeout(funct
ion () { xdr.send(); }, 0); } note: the xdr.send() call is wrapped in a timeout (see window.settimeout() to prevent an issue with the interface where some requests are los...
... note: the xdr.onprogress event should always be defined, even as an empty funct
ion, or xdomainrequest may not fire onload for duplicate requests.
... specificat
ions this interface and its methods are non-standard.
XMLDocument - Web APIs
<div id="interfacediagram" style="display: inline-block; posit
ion: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; posit
ion: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectrat
io="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-...
... specificat
ions specificat
ion status comment domthe definit
ion of 'xmldocument' in that specificat
ion.
... dom4the definit
ion of 'xmldocument' in that specificat
ion.
... obsolete initial definit
ion.
XMLHttpRequest.response - Web APIs
the value is null if the request is not yet complete or was unsuccessful, with the except
ion that when reading text data using a responsetype of "text" or the empty string (""), the response can contain the response so far while the request is still in the loading readystate (3).
... example this example presents a funct
ion, load(), which loads and processes a page from the server.
... it works by creating an xmlhttprequest object and creating a listener for readystatechange events such that that when readystate changes to done (4), the response is obtained and passed into the callback funct
ion provided to load().
... var url = 'somepage.html'; //a local page funct
ion load(url, callback) { var xhr = new xmlhttprequest(); xhr.onreadystatechange = funct
ion() { if (xhr.readystate === 4) { callback(xhr.response); } } xhr.open('get', url, true); xhr.send(''); } specificat
ions specificat
ion status comment xmlhttprequest living standard whatwg living standard ...
XMLHttpRequest.timeout - Web APIs
timeout shouldn't be used for synchronous xmlhttprequests requests used in a document environment or it will throw an invalidaccesserror except
ion.
... example var xhr = new xmlhttprequest(); xhr.open('get', '/server', true); xhr.timeout = 2000; // time in milliseconds xhr.onload = funct
ion () { // request finished.
...}; xhr.ontimeout = funct
ion (e) { // xmlhttprequest timed out.
...}; xhr.send(null); specificat
ions specificat
ion status comment xmlhttprequest living standard whatwg living standard ...
XMLHttpRequestEventTarget.onabort - Web APIs
the xmlhttprequesteventtarget.onabort is the funct
ion called when an xmlhttprequest transact
ion is aborted, such as when the xmlhttprequest.abort() funct
ion is called.
... syntax xmlhttprequest.onabort = callback; values callback is the funct
ion to be executed when the transact
ion is aborted.
... example var xmlhttp = new xmlhttprequest(), method = 'get', url = 'https://developer.mozilla.org/'; xmlhttp.open(method, url, true); xmlhttp.onabort = funct
ion () { console.log('** the request was aborted'); }; xmlhttp.send(); //..
... xmlhttp.abort(); // this will invoke our onabort handler above specificat
ions specificat
ion status comment xmlhttprequest living standard whatwg living standard ...
XPathNSResolver - Web APIs
the xpathnsresolver interface permits prefix strings in an xpath express
ion to be properly bound to namespace uri strings.
... the xpathevaluator interface can construct an implementat
ion of xpathnsresolver from a node, or the interface may be implemented by any applicat
ion.
... specificat
ions specificat
ion status comment document object model (dom) level 3 xpath specificat
ionthe definit
ion of 'xpathnsresolver' in that specificat
ion.
... recommendat
ion initial definit
ion ...
XPathResult.iterateNext() - Web APIs
except
ions type_err in case xpathresult.resulttype is not unordered_node_iterator_type or ordered_node_iterator_type, an xpathexcept
ion of type type_err is thrown.
... invalid_state_err if the document is mutated since the result was returned, an xpathexcept
ion of type invalid_state_err is thrown.
...iv>xpath example</div> <div>tag names of the matched nodes: <output></output></div> javascript var xpath = "//div"; var result = document.evaluate(xpath, document, null, xpathresult.any_type, null); var node = null; var tagnames = []; while(node = result.iteratenext()) { tagnames.push(node.localname); } document.queryselector("output").textcontent = tagnames.join(", "); result specificat
ions specificat
ion status comment document object model (dom) level 3 xpath specificat
ionthe definit
ion of 'xpathresult.iteratenext()' in that specificat
ion.
... recommendat
ion initial definit
ion ...
XPathResult.snapshotItem() - Web APIs
the snapshotitem() method of the xpathresult interface returns an item of the snapshot collect
ion or null in case the index is not within the range of nodes.
... except
ions type_err in case xpathresult.resulttype is not unordered_node_snapshot_type or ordered_node_snapshot_type, an xpathexcept
ion of type type_err is thrown.
...></output></div> javascript var xpath = "//div"; var result = document.evaluate(xpath, document, null, xpathresult.ordered_node_snapshot_type, null); var node = null; var tagnames = []; for(var i = 0; i < result.snapshotlength; i++) { var node = result.snapshotitem(i); tagnames.push(node.localname); } document.queryselector("output").textcontent = tagnames.join(", "); result specificat
ions specificat
ion status comment document object model (dom) level 3 xpath specificat
ionthe definit
ion of 'xpathresult.snapshotitem()' in that specificat
ion.
... recommendat
ion initial definit
ion ...
XRInputSourceArray.keys() - Web APIs
examples this example snippet gets the list of inputs for a sess
ion and tries to handle each type of input device it supports using.
... for (const inputidx of xrsess
ion.inputsources.keys()) { /* the keys are the indexes into the list of inputs */ checkinput(xrsess
ion.inputsources[inputidx]); } here, for...of is used to iterate over each of the keys.
... for each key, the input is retrieved using the index with array notat
ion: xrsess
ion.inputsources[inputidx].
... specificat
ions specificat
ion status comment webxr device apithe definit
ion of 'xrinputsourcearray' in that specificat
ion.1 working draft xrinputsourcearray interface [1] see iterator-like methods in informat
ion contained in a webidl file for informat
ion on how an iterable declarat
ion in an interface definit
ion causes entries(), foreach(), keys(), and values() methods to be exposed from objects that implement the interface.
XRInputSourceEvent.inputSource - Web APIs
this informat
ion lets you handle the event appropriately given the particulars of the user input device being manipulated.
...this event indicates an act
ion the user has taken using a webxr input controller, such as a hand controller, mot
ion sensing device, or other input apparatus.
... xrsess
ion.onselect = event => { let source = event.inputsource; if (source.targetraymode == "gaze") { /* handle select
ion using a gaze input */ } }; specificat
ions specificat
ion status comment webxr device apithe definit
ion of 'xrinputsourceevent.inputsource' in that specificat
ion.
... working draft initial definit
ion.
XRInputSourceEventInit.inputSource - Web APIs
the xrinputsourceeventinit dict
ionary's inputsource property is used when calling the xrinputsourceevent() constructor to specify the xrinputsource from which the newly-created event is being sent.
... examples this example creates a new select event and sends it to the xrsess
ion.
... let event = new xrinputsourceevent("select", { frame: eventframe, inputsource: source }; if (event) { xrsess
ion.dispatchevent(event); } specificat
ions specificat
ion status comment webxr device apithe definit
ion of 'xrinputsourceeventinit.inputsource' in that specificat
ion.
... working draft initial definit
ion.
XRInputSourcesChangeEvent() - Web APIs
eventinitdict an object conforming to the xrinputsourceschangeeventinit dict
ionary, prodividing the initial values for the event.
... event types inputsourceschange delivered to the xrsess
ion when the set of input devices available to it changes.
... let iscevent = new xrinputsourceschangeevent("inputsourceschange", { sess
ion: xrsess
ion, added: [newinputsource], removed: [] }); specificat
ions specificat
ion status comment webxr device apithe definit
ion of 'xrinputsourceschangeevent()' in that specificat
ion.
... working draft initial definit
ion.
XRInputSourcesChangeEvent.removed - Web APIs
the read-only xrinputsourceschangeevent property removed is an array of zero or more xrinputsource objects representing the input sources which have been removed from the xrsess
ion.
... xrsess
ion.oninputsourcescchange = event => { for (let input of event.added) { if (input.targetraymode == "tracked-pointer") { addedpointerdevice(input); } } for (let input of event.removed) { if (input.targetraymode == "tracked-pointer") { removedpointerdevice(input); } } }; specificat
ions specificat
ion status comment webxr device apithe de...
...finit
ion of 'xrinputsourceschangeevent.removed' in that specificat
ion.
... working draft initial definit
ion.
XRInputSourcesChangeEventInit.removed - Web APIs
the xrinputsourceschangeeventinit property removed is an array of zero or more xrinputsource objects, each representing one input source which has been removed from the xrsess
ion.
... syntax let inputsourceseventinit = { sess
ion: xrsess
ion, added: [newdevice1, ..., newdevicen], removed: [removeddevice1, ..., newdevicen], }; myinputsourceschangeevent = new xrinputsourceschangeeventinit("inputsourceschange", inputsourceseventinit); myinputsourceschangeevent = new xrinputsourceschangeeventinit("inputsourceschange", { sess
ion: xrsess
ion, added: addeddevicelist, removed: removeddevicelist }); value an array of zero or more xrinputsource objects, each representing one input device removed from the xr system.
... specificat
ions specificat
ion status comment webxr device apithe definit
ion of 'xrinputsourceschangeeventinit.removed' in that specificat
ion.
... working draft initial definit
ion.
XRInputSourcesChangeEventInit - Web APIs
the xrinputsourceschangeeventinit dict
ionary is used to provide opt
ions to the xrinputsourceschangeevent() constructor in order to set the initial state of the new xrinputsourceschangeevent object.
... sess
ion read only the xrsess
ion to which the event applies.
... examples <tbd> specificat
ions specificat
ion status comment webxr device apithe definit
ion of 'xrinputsourceschangeeventinit' in that specificat
ion.
... working draft initial definit
ion.
XRReferenceSpaceEventInit - Web APIs
the xrreferencespaceeventinit dict
ionary is used when calling the xrreferencespaceevent() constructor to provide the values for its properties.
... usage notes all of this dict
ionary's properties must have valid values set on them before calling the xrreferencespaceevent() constructor.
... let refspaceevent = new xrreferencespaceevent("reset", { referencespace: myrefspace, transform: mytransform }); specificat
ions specificat
ion status comment webxr device apithe definit
ion of 'xrreferencespaceeventinit' in that specificat
ion.
... working draft initial definit
ion.
XRRenderState.inlineVerticalFieldOfView - Web APIs
the inlineverticalfieldofview read-only property of the xrrenderstate interface defines the angle of the field of view in radians used when computing project
ion matrices for "inline" xrsess
ion objects.
... this opt
ion must be null for immersive sess
ions.
... specificat
ions specificat
ion status comment unknownthe definit
ion of 'xrrenderstate.inlineverticalfieldofview' in that specificat
ion.
... unknown initial definit
ion.
XRRenderState.inlineVerticalFieldOfView - Web APIs
the read-only inlineverticalfieldofview property of the xrrenderstate interface returns the default vertical field of view for "inline" sess
ions and null for all immersive sess
ions.
... syntax var inlineverticalfieldofview = xrrenderstate.inlineverticalfieldofview; value a number for "inline" sess
ions, which represents the default field of view, and null for immersive sess
ions.
... specificat
ions specificat
ion status comment webxr device apithe definit
ion of 'xrrenderstate.inlineverticalfieldofview' in that specificat
ion.
... working draft initial definit
ion.
XRSystem: devicechange event - Web APIs
bubbles no cancelable no interface event event handler xrsystem.ondevicechange usage notes devicechange events are not delivered if the document which owns the xrsystem object has been granted permiss
ion to do so through the xr-spatial-tracking feature policy.
... if (navigator.xr) { navigator.xr.addeventlistener("devicechange", event => { navigator.xr.issess
ionsupported("immersive-vr") .then(immersiveok) => { if (immersiveok) { enablexrbutton.disabled = false; } else { enablexrbutton.disabled = true; } }); }); } when devicechange is received, the handler set up in this code calls the xr method issess
ionsupported() to find out if there's a device available that can handle immersive vr presentat
ions.
...*/ }; } specificat
ions specificat
ion status comment webxr device apithe definit
ion of 'devicechange event' in that specificat
ion.
... working draft initial definit
ion.
msCaching - Web APIs
do not use it on product
ion sites facing the web: it will not work for every user.
... there may also be large incompatibilities between implementat
ions and the behav
ior may change in the future.
... syntax cachestate = object.mscaching values type: domstring property value descript
ion auto disables caching for stream or ms-stream data.
... see also mscachingenabled microsoft api extens
ions ...
msthumbnailclick - Web APIs
do not use it on product
ion sites facing the web: it will not work for every user.
... there may also be large incompatibilities between implementat
ions and the behav
ior may change in the future.
... example funct
ion thumbnailclickhandler(evt) { alert ("clicked button: " + evt.buttonid); } document.addeventlistener('msthumbnailclick', thumbnailclickhandler); example 2 // adds an overlay icon on your app pinned to the taskbar window.external.mssitemodeseticonoverlay(iconuri, tooltip); // removes an overlay icon window.external.mssitemodecleariconoverlay(); // pinned icons on your taskbar can be instr...
...ucted to trigger specific events on your site from the taskbar // add an event handlerdocument.addeventlistener('msthumbnailclick', onbuttonclicked, false); // add the buttons var btnplay = window.external.mssitemodeaddthumbbarbutton(iconuri, tooltip); // refresh the taskbar window.external.mssitemodeshowthumbbar(); // call a javascript funct
ion when the button is pressed funct
ion onbuttonclicked(e) { switch (e.buttonid) { case btnplay: play(); break;} } see also microsoft api extens
ions ...
Using the aria-label attribute - Accessibility
value string possible effects on user agents and assistive technology note: opin
ions may differ on how assistive technology should handle this technique.
... the informat
ion provided above is one of those opin
ions and therefore not normative.
... attributes, including aria-label declarat
ions, are ignored by most automatic translat
ion services.
... used by aria roles all elements of the base markup related aria techniques using the aria-labelledby attribute compatibility tbd: add support informat
ion for common ua and at product combinat
ions addit
ional resources wai-aria specificat
ion for aria-label ...
Using the aria-valuemin attribute - Accessibility
value string representat
ion of a number possible effects on user agents and assistive technology if aria-valuemin is not less than or equal to the value of aria-valuemax, this creates an error condit
ion that will be handled by the assistive technology.
... note: opin
ions may differ on how assistive technology should handle this technique.
... the informat
ion provided above is one of those opin
ions and therefore not normative.
... <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 informat
ion for common ua and at product combinat
ions addit
ional resources wai-aria specificat
ion for the aria-valuemin attribute ...
Using ARIA: Roles, states, and properties - Accessibility
addit
ion of aria semantics only exposes extra informat
ion to a browser's accessibility api, and does not affect a page's dom.
... roles widget roles button checkbox gridcell link menuitem menuitemcheckbox menuitemrad
io opt
ion progressbar rad
io scrollbar searchbox separator (when focusable) slider spinbutton switch tab tabpanel textbox treeitem composite roles the techniques below describe each composite role as well as their required and opt
ional child roles.
... combobox grid (including row, gridcell, rowheader, columnheader roles) listbox (including opt
ion role) menu menubar rad
iogroup (see rad
io role) tablist (including tab and tabpanel roles) tree treegrid document structure roles applicat
ion article cell columnheader definit
ion directory document feed figure group heading img list listitem math none note presentat
ion row rowgroup rowheader separator table term textbox toolbar tooltip landmark roles banner complementary contentinfo form main navigat
ion reg
ion search live reg
ion roles alert log marquee status timer window roles alertdialog dialog states and properties widget attributes aria-autocomplete aria-checked aria-current aria-disabled aria-errormessa...
...ge aria-expanded aria-haspopup aria-hidden aria-invalid aria-label aria-level aria-modal aria-multiline aria-multiselectable aria-orientat
ion aria-placeholder aria-pressed aria-readonly aria-required aria-selected aria-sort aria-valuemax aria-valuemin aria-valuenow aria-valuetext live reg
ion attributes aria-live aria-relevant aria-atomic aria-busy drag & drop attributes aria-dropeffect aria-dragged relat
ionship 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 properties x-ms-aria-flowfrom ...
Robust - Accessibility
note: to read the w3c definit
ions 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.
... to pass this criter
ion, make sure that your html is as valid as possible.
... when using semantic elements correctly for their intended purpose, this criter
ion should be passed automatically.
... understanding status messages note: also see the wcag descript
ion for guideline 4.1: compatible: maximize compatibility with current and future user agents, including assistive technologies.
-moz-user-focus - CSS: Cascading Style Sheets
initial valuenoneapplies toall elementsinheritednocomputed valueas specifiedanimat
ion typediscrete note: this property doesn't work for xul <xul:textbox> elements, because the textbox itself never takes focus.
...you can stop the textbox from taking keyboard focus by setting its tab index to -1, and from taking mouse focus by preventing the default act
ion of mousedown events.
... formal definit
ion initial valuenoneapplies toall elementsinheritednocomputed valueas specifiedanimat
ion typediscrete formal syntax ignore | normal | select-after | select-before | select-menu | select-same | select-all | none examples html <input class="ignored" value="the user cannot focus on this element."> css .ignored { -moz-user-focus: ignore; } specificat
ions not part of any standard.
... a similar property, user-focus, was proposed in early drafts of a predecessor of the css3 ui specificat
ion, but was rejected by the working group.
-webkit-mask-repeat-x - CSS: Cascading Style Sheets
the mask-posit
ion property is ignored unless only one image can be displayed without clipping.
...example: an image with an original width of 260px, repeated three times, might stretch until each repetit
ion is 300px wide, and then another image will be added.
... formal definit
ion initial valuerepeatapplies toall elementsinheritednocomputed valueas specifiedanimat
ion typediscrete formal syntax repeat | no-repeat | space | round examples using a repeating or non-repeating mask image .exampleone { -webkit-mask-image: url('mask.png'); -webkit-mask-repeat-x: repeat; } .exampletwo { -webkit-mask-image: url('mask.png'); -webkit-mask-repeat-x: no-repeat; } using multiple mask images you can specify a different <repeat-style> for each mask image, separated by commas: .examplethree { -webkit-mask-image: url('mask1.png'), url('mask2.png'); -webkit-mask-repeat-x: repeat, space; } each image is matched with the corresponding repeat style, from first specified to last.
... specificat
ions not part of any standard.
-webkit-overflow-scrolling - CSS: Cascading Style Sheets
the speed and durat
ion of the continued scrolling is proport
ional to how vigorous the scroll gesture was.
... formal definit
ion initial valueautoapplies toscrolling boxesinheritedyescomputed valueas specifiedanimat
ion typediscrete formal syntax auto | touch examples html <div class="scroll-touch"> <p> this paragraph has momentum scrolling </p> </div> <div class="scroll-auto"> <p> this paragraph does not.
... </p> </div> css div { width: 100%; overflow: auto; } p { width: 200%; background: #f5f9fa; border: 2px solid #eaf2f4; padding: 10px; } .scroll-touch { -webkit-overflow-scrolling: touch; /* lets it scroll lazy */ } .scroll-auto { -webkit-overflow-scrolling: auto; /* stops scrolling immediately */ } results specificat
ions not part of any standard.
... apple has a descript
ion in the safari css reference.
-webkit-print-color-adjust - CSS: Cascading Style Sheets
the -webkit-print-color-adjust property is a non-standard css extens
ion that can be used to force printing of background colors and images in browsers based on the webkit engine.
... values economy normal behav
ior.
... formal definit
ion value not found in db!
... examples forcing white-on-black printing article { -webkit-print-color-adjust: exact; background: #222; color: #eee; } specificat
ions not part of any standard, though there is a proposal in the csswg wiki to standardize it.
-webkit-text-fill-color - CSS: Cascading Style Sheets
formal definit
ion initial valuecurrentcolorapplies toall elementsinheritedyescomputed valuecomputed coloranimat
ion typea color formal syntax <color>where <color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color>where <rgb()> = rgb( <percentage>{3} [ / <alpha-value> ]?
...)where <alpha-value> = <number> | <percentage><hue> = <number> | <angle> examples changing the fill color css p { margin: 0; font-size: 3em; -webkit-text-fill-color: green; } html <p>this text is green.</p> results specificat
ions specificat
ion status comment compatibility standardthe definit
ion of '-webkit-text-fill-color' in that specificat
ion.
... living standard initial standardizat
ion safari css reference '-webkit-text-fill-color' in that document.
... non-standard unofficial documentat
ion initial definit
ion ...
monochrome - CSS: Cascading Style Sheets
class="mono">your device supports monochrome pixels!</p> <p class="no-mono">your device doesn't support monochrome pixels.</p> css p { display: none; } /* any monochrome device */ @media (monochrome) { p.mono { display: block; color: #333; } } /* any non-monochrome device */ @media (monochrome: 0) { p.no-mono { display: block; color: #ee3636; } } result specificat
ions specificat
ion status comment media queries level 4the definit
ion of 'monochrome' in that specificat
ion.
... candidate recommendat
ion the value can now be negative, in which case it computes to false.
... media queriesthe definit
ion of 'monochrome' in that specificat
ion.
... recommendat
ion initial definit
ion.
update - CSS: Cascading Style Sheets
slow the layout may change dynamically according to the usual rules of css, but the output device is not able to render or display changes quickly enough for them to be perceived as a smooth animat
ion.
... fast the layout may change dynamically according to the usual rules of css, and the output device is not unusually constrained in speed, so regularly-updating things like css animat
ions can be used.
... examples html <p>if this text animates for you, you are using a fast-updating device.</p> css @keyframes jiggle { from { transform: translatey(0); } to { transform: translatey(25px); } } @media (update: fast) { p { animat
ion: 1s jiggle linear alternate infinite; } } result specificat
ions specificat
ion status comment media queries level 4the definit
ion of 'update' in that specificat
ion.
... candidate recommendat
ion initial definit
ion.
width - CSS: Cascading Style Sheets
examples html <div>watch this element as you resize your viewport's width.</div> css /* exact width */ @media (width: 360px) { div { color: red; } } /* minimum width */ @media (min-width: 35rem) { div { background: yellow; } } /* maximum width */ @media (max-width: 50rem) { div { border: 2px solid blue; } } result specificat
ions specificat
ion status comment media queries level 4the definit
ion of 'width' in that specificat
ion.
... candidate recommendat
ion the value can now be negative, in which case it computes to false.
... media queriesthe definit
ion of 'width' in that specificat
ion.
... recommendat
ion initial definit
ion.
bleed - CSS: Cascading Style Sheets
<length> specifies by how far outward, in each direct
ion, the bleed area extends past the page box.
... values may be negative, but there may be implementat
ion-specific limits.
... formal definit
ion related at-rule@pageinitial valueautocomputed valueas specified formal syntax auto | <length> examples setting a page bleed of 1cm @page { bleed: 1cm; } specificat
ions specificat
ion status comment css paged media module level 3the definit
ion of 'bleed' in that specificat
ion.
... working draft initial definit
ion ...
height - CSS: Cascading Style Sheets
formal definit
ion 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.
... if the height of the containing block is not specified explicitly (i.e., it depends on content height), and this element is not absolutely posit
ioned, the percentage value is treated as 0.max-height: the percentage is calculated with respect to the height of the generated box's containing block.
... if the height of the containing block is not specified explicitly (i.e., it depends on content height), and this element is not absolutely posit
ioned, the percentage value is treated as none.computed valueas each of the properties of the shorthand:min-height: the percentage as specified or the absolute lengthmax-height: 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 height @viewport { height: 500px; } specificat
ions specificat
ion status comment css device adaptat
ionthe definit
ion of '"height" descriptor' in that specificat
ion.
... working draft initial definit
ion ...
Adjacent sibling combinator - CSS: Cascading Style Sheets
/* paragraphs that come immediately after any image */ img + p { font-weight: bold; } syntax former_element + target_element { style properties } examples css li:first-of-type + li { color: red; } html <ul> <li>one</li> <li>two!</li> <li>three</li> </ul> result specificat
ions specificat
ion status comment selectors level 4the definit
ion of 'next-sibling combinator' in that specificat
ion.
... selectors level 3the definit
ion of 'adjacent sibling combinator' in that specificat
ion.
... recommendat
ion css level 2 (revis
ion 1)the definit
ion of 'adjacent sibling selectors' in that specificat
ion.
... recommendat
ion initial definit
ion.
Resizing background images with background-size - CSS: Cascading Style Sheets
the background-size css property lets you resize the background image of an element, overriding the default behav
ior of tiling the image at its full size by specifying the width and/or height of the image.
...try resizing the example below to see this in act
ion.
...ontain { background-image: url(https://www.mozilla.org/media/img/logos/firefox/logo-quantum.9c5e96634f92.png); background-size: contain; width: 160px; height: 160px; border: 2px solid; color: pink; resize: both; overflow: scroll; } result cover the cover value specifies that the background image should be sized so that it is as small as possible while ensuring that both dimens
ions are greater than or equal to the corresponding size of the container.
... try resizing the example below to see this in act
ion.
Mastering margin collapsing - CSS: Cascading Style Sheets
the top and bottom margins of blocks are sometimes combined (collapsed) into a single margin whose size is the largest of the individual margins (or just one of them, if they are equal), a behav
ior known as margin collapsing.
... note that the margins of floating and absolutely posit
ioned elements never collapse.
... <p>this paragraph has a <code>.4rem</code> margin between it and the text above.</p> <p>my bottom margin collapses with my parent, yielding a bottom margin of <code>2rem</code>.</p> </div> <p>i am <code>2rem</code> below the element above.</p> css div { margin: 2rem 0; background: lavender; } p { margin: .4rem 0 1.2rem 0; background: yellow; } result specificat
ions specificat
ion status comment css level 2 (revis
ion 1)the definit
ion of 'margin collapsing' in that specificat
ion.
... recommendat
ion initial definit
ion.
Styling Columns - CSS: Cascading Style Sheets
perhaps in future vers
ions of the specificat
ion it might be.
...this property was originally defined in the multi-column layout specificat
ion.
... however, it is now defined in box alignment in order to unify gaps between boxes in other specificat
ions such as css grid layout.
... column rules the specificat
ion defines column-rule-width, column-rule-style and column-rule-color, providing a shorthand column-rule.
Implementing image sprites in CSS - CSS: Cascading Style Sheets
rather than include each image as a separate image file, it is much more memory- and bandwidth-friendly to send them as a single image; using background posit
ion as a way to distinguish between individual images in the same image file, so the number of http requests is reduced.
... implementat
ion suppose an image is given to every item with class toolbtn: .toolbtn { background: url(myfile.png); display: inline-block; height: 20px; width: 20px; } a background posit
ion can be added either as two x, y values after the url()() in the background, or as background-posit
ion.
... for example: #btn1 { background-posit
ion: -20px 0px; } #btn2 { background-posit
ion: -40px 0px; } this would move the element with the id 'btn1' 20 pixels to the left and the element with the id 'btn2' 40 pixels to the left (assuming they have the class toolbtn assigned and are affected by the image rule above).
... similarly, you can also make hover states with: #btn:hover { background-posit
ion: <pixels shifted right>px <pixels shifted down>px; } ...
CSS Overflow - CSS: Cascading Style Sheets
this is the overflow of painting effects which do not affect layout or otherwise extend the scrollable overflow reg
ion, such as box shadows, border images, text decorat
ion, overhanging glyphs, outlines, etc.
... reference css properties overflow overflow-block overflow-inline overflow-x overflow-y text-overflow block-overflow line-clamp max-lines continue non-standard properties -webkit-line-clamp specificat
ions specificat
ion status comment css overflow module level 3the definit
ion of 'overflow' in that specificat
ion.
... working draft changed syntax to allow one or two keywords instead of only one css level 2 (revis
ion 1)the definit
ion of 'overflow' in that specificat
ion.
... recommendat
ion initial definit
ion.
Stacking without the z-index property - CSS: Cascading Style Sheets
when the z-index property is not specified on any element, elements are stacked in the following order (from bottom to top): the background and borders of the root element descendant non-posit
ioned blocks, in order of appearance in the html descendant posit
ioned elements, in order of appearance in the html keep in mind, when the order property alters rendering from the "order of appearance in the html" within flex containers, it similarly affects the order for stacking context.
... in the example below, elements #1 through #4 are posit
ioned elements.
... source code for the example html <div id="abs1" class="absolute"> <b>div #1</b><br />posit
ion: absolute;</div> <div id="rel1" class="relative"> <b>div #2</b><br />posit
ion: relative;</div> <div id="rel2" class="relative"> <b>div #3</b><br />posit
ion: relative;</div> <div id="abs2" class="absolute"> <b>div #4</b><br />posit
ion: absolute;</div> <div id="sta1" class="static"> <b>div #5</b><br />posit
ion: static;</div> css b { font-family: sans-serif; } div { padding: 10px; border: 1px dashed; text-align: center; } .static { posit
ion: static; height: 80px; background-color: #ffc; border-color: #996; } .absolute { posit
ion: absolute; width: ...
...150px; height: 350px; background-color: #fdd; border-color: #900; opacity: 0.7; } .relative { posit
ion: 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; } ...
CSS Ruby Layout - CSS: Cascading Style Sheets
css ruby layout is a module of css that provides the rendering model and formatting controls related to the display of ruby annotat
ion.
... ruby annotat
ion is a form of interlinear annotat
ion, consisting of short runs of text alongside the base text.
... they are typically used in east asian documents to indicate pronunciat
ion or to provide a short annotat
ion.
... reference properties ruby-align ruby-posit
ion specificat
ions specificat
ion status comment css ruby layout module level 1 working draft initial definit
ion ...
CSS Scroll Snap - CSS: Cascading Style Sheets
css scroll snap is a module of css that introduces scroll snap posit
ions, which enforce the scroll posit
ions that a scroll container’s scrollport may end at after a scrolling operat
ion has completed.
... note: the prev
ious vers
ion of this module was called scroll snap points and has been deprecated.
... css scroll snap is the current implementat
ion.
...ck-end css properties on children scroll-snap-align scroll-margin scroll-margin-top scroll-margin-right scroll-margin-bottom scroll-margin-left scroll-margin-inline scroll-margin-inline-start scroll-margin-inline-end scroll-margin-block scroll-margin-block-start scroll-margin-block-end guides basic concepts of css scroll snap browser compatibility and scroll snap specificat
ion specificat
ion status comment css scroll snap module level 1 candidate recommendat
ion initial definit
ion ...
CSS data types - CSS: Cascading Style Sheets
css data types define typical values (including keywords and units) accepted by css properties and funct
ions.
... index the data types defined by the set of css specificat
ions include the following: <angle> <angle-percentage> <angular-color-hint> <angular-color-stop> <attr-fallback> <attr-name> <basic-shape> <blend-mode> <calc-product> <calc-sum> <calc-value> <color> <color-stop> <color-stop-angle> <counter-style> <custom-ident> <dimens
ion> <filter-funct
ion> <flex> <frequency> <frequency-percentage> <gradient> <ident> <image> <integer> <length> <length-percentage> <number> <number-percentage> <percentage> <posit
ion> <quote> <rat
io> <resolut
ion> <shape-box> <shape-radius> <string> <time> <time-percentage> <ti...
...ming-funct
ion> <toggle-value> <transform-funct
ion> <type-or-unit> <url> <url-modifier> <zero> specificat
ions specificat
ion status comment css values and units module level 4 editor's draft css values and units module level 3 candidate recommendat
ion initial definit
ion.
... see also css units and values introduct
ion to css: values and units ...
Selector list - CSS: Cascading Style Sheets
#main, .content, article { font-size: 1.1em; } selector list invalidat
ion a downside to using selector lists is that the following aren't equivalent: h1 { font-family: sans-serif } h2:maybe-unsupported { font-family: sans-serif } h3 { font-family: sans-serif } h1, h2:maybe-unsupported, h3 { font-family: sans-serif } this is because a single unsupported selector in a selector list invalidates the whole rule.
... h1 { font-family: sans-serif } h2:maybe-unsupported { font-family: sans-serif } h3 { font-family: sans-serif } :is(h1, h2:maybe-unsupported, h3) { font-family: sans-serif } specificat
ions specificat
ion status comment selectors level 4the definit
ion of 'selector lists' in that specificat
ion.
... working draft renamed to "selector list" css level 1the definit
ion of 'grouping' in that specificat
ion.
... recommendat
ion initial definit
ion ...
background-blend-mode - CSS: Cascading Style Sheets
formal definit
ion initial valuenormalapplies toall elements.
...it also applies to ::first-letter and ::first-line.inheritednocomputed valueas specifiedanimat
ion typediscrete formal syntax <blend-mode>#where <blend-mode> = normal | multiply | screen | overlay | darken | lighten | color-dodge | color-burn | hard-light | soft-light | difference | exclus
ion | hue | saturat
ion | color | luminosity examples <div id="div"></div> <select id="select"> <opt
ion>normal</opt
ion> <opt
ion>multiply</opt
ion> <opt
ion selected>screen</opt
ion> <opt
ion>overlay</opt
ion> <opt
ion>darken</opt
ion> <opt
ion>lighten</opt
ion> <opt
ion>color-dodge</opt
ion> <opt
ion>color-burn</opt
ion> <opt
ion>hard-light</opt
ion> <opt
ion>soft-light</opt
ion> <o...
...pt
ion>difference</opt
ion> <opt
ion>exclus
ion</opt
ion> <opt
ion>hue</opt
ion> <opt
ion>saturat
ion</opt
ion> <opt
ion>color</opt
ion> <opt
ion>luminosity</opt
ion> </select> #div { width: 300px; height: 300px; background: url('https://mdn.mozillademos.org/files/8543/br.png'),url('https://mdn.mozillademos.org/files/8545/tr.png'); background-blend-mode: screen; } document.getelementbyid("select").onchange = funct
ion(event) { document.getelementbyid("div").style.backgroundblendmode = document.getelementbyid("select").selectedopt
ions[0].innerhtml; } console.log(document.getelementbyid('div')); specificat
ions specificat
ion status comment compositing and blending level 1the definit
ion of 'background-blend-mode' in that specificat
ion.
... candidate recommendat
ion initial definit
ion ...
block-size - CSS: Cascading Style Sheets
a related property is inline-size, which defines the other dimens
ion of the element.
... initial valueautoapplies tosame as width and heightinheritednopercentagesblock-size of containing blockcomputed valuesame as width and heightanimat
ion typea length, percentage or calc(); syntax values the block-size property takes the same values as the width and height properties.
... formal definit
ion initial valueautoapplies tosame as width and heightinheritednopercentagesblock-size of containing blockcomputed valuesame as width and heightanimat
ion typea length, percentage or calc(); formal syntax <'width'> examples block size with vertical text html <p class="exampletext">example text</p> css .exampletext { writing-mode: vertical-rl; background-color: yellow; block-size: 200px; } result specificat
ions specificat
ion status comment css logical properties and values level 1the definit
ion of 'block-size' in that specificat
ion.
... editor's draft initial definit
ion ...
border-collapse - CSS: Cascading Style Sheets
formal definit
ion initial valueseparateapplies totable and inline-table elementsinheritedyescomputed valueas specifiedanimat
ion typediscrete formal syntax collapse | separate examples a colorful table of browser engines html <table class="separate"> <capt
ion><code>border-collapse: separate</code></capt
ion> <tbody> <tr><th>browser</th> <th>layout engine</th></tr> <tr><td class="fx">firefox</td> ...
...<td class="gk">gecko</td></tr> <tr><td class="ed">edge</td> <td class="tr">edgehtml</td></tr> <tr><td class="sa">safari</td> <td class="wk">webkit</td></tr> <tr><td class="ch">chrome</td> <td class="bk">blink</td></tr> <tr><td class="op">opera</td> <td class="bk">blink</td></tr> </tbody> </table> <table class="collapse"> <capt
ion><code>border-collapse: collapse</code></capt
ion> <tbody> <tr><th>browser</th> <th>layout engine</th></tr> <tr><td class="fx">firefox</td> <td class="gk">gecko</td></tr> <tr><td class="ed">edge</td> <td class="tr">edgehtml</td></tr> <tr><td class="sa">safari</td> <td class="wk">webkit</td></tr> <tr><td class="ch">chrome</td> <td class="bk">blink</td></tr> <tr><td class="op">opera</td> <td class="bk">blink</td></tr> </tb...
...order: dashed 5px; } table th, table td { border: solid 3px; } .fx { border-color: orange blue; } .gk { border-color: black red; } .ed { border-color: blue gold; } .tr { border-color: aqua; } .sa { border-color: silver blue; } .wk { border-color: gold blue; } .ch { border-color: red yellow green blue; } .bk { border-color: navy blue teal aqua; } .op { border-color: red; } result specificat
ions specificat
ion status comment css level 2 (revis
ion 1)the definit
ion of 'border-collapse' in that specificat
ion.
... recommendat
ion initial definit
ion ...
border-spacing - CSS: Cascading Style Sheets
note: the border-spacing property is equivalent to the deprecated cellspacing <table> attribute, except that it has an opt
ional second value that can be used to set different horizontal and vertical spacing.
... formal definit
ion initial value0applies totable and inline-table elementsinheritedyescomputed valuetwo absolute lengthsanimat
ion typediscrete formal syntax <length> <length>?
... <table> <tr> <td>1</td><td>2</td><td>3</td> </tr> <tr> <td>4</td><td>5</td><td>6</td> </tr> <tr> <td>7</td><td>8</td><td>9</td> </tr> </table> css table { border-spacing: 1em .5em; padding: 0 2em 1em 0; border: 1px solid orange; } td { width: 1.5em; height: 1.5em; background: #d2d2d2; text-align: center; vertical-align: middle; } result specificat
ions specificat
ion status comment css level 2 (revis
ion 1)the definit
ion of 'border-spacing' in that specificat
ion.
... recommendat
ion initial definit
ion.
box-orient - CSS: Cascading Style Sheets
see flexbox for informat
ion about the current standard.
... descript
ion html dom elements lay out their contents along the inline-axis by default.
... formal definit
ion initial valueinline-axis (horizontal in xul)applies toelements with a css display value of box or inline-boxinheritednocomputed valueas specifiedanimat
ion typediscrete formal syntax horizontal | vertical | inline-axis | block-axis | inherit examples setting horizontal box orientat
ion here, he box-orient property will cause the two <p> sect
ions in the example to display in the same line.
... css div.example { display: -moz-box; /* mozilla */ display: -webkit-box; /* webkit */ display: box; /* as specified */ /* children should be oriented vertically */ -moz-box-orient: horizontal; /* mozilla */ -webkit-box-orient: horizontal; /* webkit */ box-orient: horizontal; /* as specified */ } result specificat
ions not part of any standard.
counter-set - CSS: Cascading Style Sheets
y-counter -1; /* set "counter1" to 1, and "counter2" to 4 */ counter-set: counter1 1 counter2 4; /* cancel any counter that could have been set in less specific rules */ counter-set: none; /* global values */ counter-set: inherit; counter-set: initial; counter-set: unset; the counter-set property is specified as either one of the following: a <custom-ident> naming the counter, followed opt
ionally by an <integer>.
... formal definit
ion initial valuenoneapplies toall elementsinheritednocomputed valueas specifiedanimat
ion typediscrete formal syntax [ <custom-ident> <integer>?
... ]+ | none examples setting named counters h1 { counter-set: chapter sect
ion 1 page; /* sets the chapter and page counters to 0, and the sect
ion counter to 1 */ } specificat
ions specificat
ion status comment css lists module level 3the definit
ion of 'counter-set' in that specificat
ion.
... working draft initial definit
ion.
brightness() - CSS: Cascading Style Sheets
the brightness() css funct
ion applies a linear multiplier to the input image, making it appear brighter or darker.
... its result is a <filter-funct
ion>.
...the lacuna value for interpolat
ion is 1.
... examples setting brightness using numbers and percentages brightness(0%) /* completely black */ brightness(0.4) /* 40% brightness */ brightness(1) /* no effect */ brightness(200%) /* double brightness */ specificat
ions specificat
ion status filter effects module level 1the definit
ion of 'brightness()' in that specificat
ion.
contrast() - CSS: Cascading Style Sheets
the contrast() css funct
ion adjusts the contrast of the input image.
... its result is a <filter-funct
ion>.
...the lacuna value for interpolat
ion is 1.
... examples setting contrast using numbers and percentages contrast(0) /* completely gray */ contrast(65%) /* 65% contrast */ contrast(1) /* no effect */ contrast(200%) /* double contrast */ specificat
ions specificat
ion status filter effects module level 1the definit
ion of 'contrast()' in that specificat
ion.
<flex> - CSS: Cascading Style Sheets
the fr unit represents a fract
ion of the leftover space in the grid container.
... as with all css dimens
ions, there is no space between the unit and the number.
... examples 1fr /* using an integer value */ 2.5fr /* using a float value */ specificat
ions specificat
ion status comment css grid layoutthe definit
ion of '<flex>' in that specificat
ion.
... candidate recommendat
ion initial definit
ion.
font-language-override - CSS: Cascading Style Sheets
for example, a lot of fonts have a special character for the digraph fi that merge the dot on the "i" with the "f." however, if the language is set to turkish the typeface will likely know not to use the merged glyph; turkish has two vers
ions of the "i," one with a dot (i) and one without (ı), and using the ligature would incorrectly transform a dotted "i" into a dotless "i." the font-language-override property lets you override the typeface behav
ior for a specific language.
... formal definit
ion initial valuenormalapplies toall elements.
... it also applies to ::first-letter and ::first-line.inheritedyescomputed valueas specifiedanimat
ion typediscrete formal syntax normal | <string> examples using danish glyphs html <p class="para1">default language setting.</p> <p class="para2">this is a string with the <code>font-language-override</code> set to danish.</p> css p.para1 { font-language-override: normal; } p.para2 { font-language-override: "dan"; } result specificat
ions specificat
ion status comment css fonts module level 4the definit
ion of 'font-language-override' in that specificat
ion.
... working draft initial definit
ion.
font-smooth - CSS: Cascading Style Sheets
the font-smooth css property controls the applicat
ion of anti-aliasing when fonts are rendered.
... auto - allow the browser to select an optimizat
ion for font smoothing, typically grayscale.
... formal definit
ion initial valueautoapplies toall elementsinheritedyescomputed valueas specifiedanimat
ion typediscrete formal syntax auto | never | always | <absolute-size> | <length>where <absolute-size> = xx-small | x-small | small | medium | large | x-large | xx-large | xxx-large examples basic usage example the following example shows the safari/chromium and firefox equivalents that turn on font-smoothing on macos.
... for those of you not on a macos system, here is a screenshot (the live vers
ion appears later on): html <p>without font smoothing</p> <p class="smoothed">with font smoothing</p> css html { background-color: black; color: white; font-size: 3rem; } p { text-align: center; } .smoothed { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } result specificat
ions not part of any standard.
grid-template-areas - CSS: Cascading Style Sheets
unless those cells form a rectangle, the declarat
ion is invalid.
... formal definit
ion initial valuenoneapplies togrid containersinheritednocomputed valueas specifiedanimat
ion typediscrete formal syntax none | <string>+ examples specifying named grid areas html <sect
ion id="page"> <header>header</header> <nav>navigat
ion</nav> <main>main area</main> <footer>footer</footer> </sect
ion> css #page { display: grid; width: 100%; height: 250px; grid-template-areas: "head head" "nav main" "nav foot"; grid-template-rows: 50px 1fr 30px; grid-template-columns: 150px 1fr; } #page > header { grid-area: head; background-color: #8ca0ff; } #page > nav { grid-area: nav; background-color: #ffa08c; } #page > main { grid-area: main; background-color: #ffff64; } #page > footer { grid-...
...area: foot; background-color: #8cffa0; } result specificat
ions specificat
ion status comment css grid layoutthe definit
ion of 'grid-template-areas' in that specificat
ion.
... candidate recommendat
ion initial definit
ion ...
ident - CSS: Cascading Style Sheets
nono79 a mix of alphanumeric characters and numbers ground-level a mix of alphanumeric characters and a dash -test a dash followed by alphanumeric characters --toto a custom-property like identifier _internal an underscore followed by alphanumeric characters \22 toto a unicode character followed by a sequence of alphanumeric characters bili\.bob a correctly escaped per
iod invalid identifiers 34rem it must not start with a decimal digit.
... specificat
ions specificat
ion status comment css values and units module level 4the definit
ion of '<ident>' in that specificat
ion.
... editor's draft css values and units module level 3the definit
ion of '<ident>' in that specificat
ion.
... candidate recommendat
ion ...
initial-letter - CSS: Cascading Style Sheets
numeric values */ initial-letter: 1.5; /* initial letter occupies 1.5 lines */ initial-letter: 3.0; /* initial letter occupies 3 lines */ initial-letter: 3.0 2; /* initial letter occupies 3 lines and sinks 2 lines */ /* global values */ initial-letter: inherit; initial-letter: initial; initial-letter: unset; syntax the keyword value normal, or a <number> opt
ionally followed by an <integer>.
... formal definit
ion initial valuenormalapplies to::first-letter pseudo-elements and inline-level first child of a block containerinheritednocomputed valueas specifiedanimat
ion typediscrete formal syntax normal | [ <number> <integer>?
...e html <p class="normal">initial letter is normal</p> <p class="onefive">initial letter occupies 1.5 lines</p> <p class="three">initial letter occupies 3 lines</p> css .normal { -webkit-initial-letter: normal; initial-letter: normal; } .onefive { -webkit-initial-letter: 1.5; initial-letter: 1.5; } .three { -webkit-initial-letter: 3.0; initial-letter: 3.0; } result specificat
ions specificat
ion status comment css inline layoutthe definit
ion of 'initial-letter' in that specificat
ion.
... working draft initial definit
ion ...
Initial value - CSS: Cascading Style Sheets
the initial value of a css property is its default value, as listed in its definit
ion table in the specificat
ion.
... specificat
ions specificat
ion status comment css cascade 4 formal definit
ion.
... css level 2 (revis
ion 1)the definit
ion of 'initial value' in that specificat
ion.
... recommendat
ion implicit definit
ion.
inset - CSS: Cascading Style Sheets
the inset css property, though part of the logical specificat
ion, doesn't define logical block or inline offsets, and instead defines physical offsets, regardless of the element's writing mode, direct
ionality, and text orientat
ion.
...formal definit
ion initial valueautoapplies toposit
ioned elementsinheritednopercentageslogical-height of containing blockcomputed valuesame as box offsets: top, right, bottom, left properties except that direct
ions are logicalanimat
ion 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; posit
ion: relative; } .exampletext { writing-mode: sideways-rl; posit
ion: absolute; inset: 20px 40px 30px 10px; background-color: #c8c800; } result specificat
ions specificat
ion status comment css logical properties and values level 1the definit
ion of 'inset' in that specificat
ion.
... editor's draft initial definit
ion ...
line-height-step - CSS: Cascading Style Sheets
values <length> the specified <length> is used in the calculat
ion of the line box height step.
... formal definit
ion initial value0applies toblock containersinheritedyescomputed valueabsolute <length>animat
ion typediscrete formal syntax <length> examples setting step unit for line box height in the following example, the height of line box in each paragraph is rounded up to the step unit.
... :root { font-size: 12pt; --my-grid: 18pt; line-height-step: var(--my-grid); } h1 { font-size: 20pt; margin-top: calc(2 * var(--my-grid)); } the result of these rules is shown below in the following screenshot: specificat
ions specificat
ion status comment css rhythmic sizingthe definit
ion of 'line-height-step' in that specificat
ion.
... working draft initial definit
ion.
list-style-image - CSS: Cascading Style Sheets
syntax /* keyword values */ list-style-image: none; /* <url> values */ list-style-image: url('starsolid.gif'); /* global values */ list-style-image: inherit; list-style-image: initial; list-style-image: unset; values <url> locat
ion of image to use as the marker.
... formal definit
ion initial valuenoneapplies tolist itemsinheritedyescomputed valuenone or the image with its uri made absoluteanimat
ion typediscrete formal syntax <url> | none examples setting list item images html <ul> <li>item 1</li> <li>item 2</li> </ul> css ul { list-style-image: url("https://mdn.mozillademos.org/files/11981/starsolid.gif"); } result specificat
ions specificat
ion status comment css lists module level 3the definit
ion of 'list-style-image' in that specificat
ion.
... css level 2 (revis
ion 1)the definit
ion of 'list-style-image' in that specificat
ion.
... recommendat
ion initial definit
ion ...
mask-type - CSS: Cascading Style Sheets
formal definit
ion initial valueluminanceapplies to<mask> elementsinheritednocomputed valueas specifiedanimat
ion typediscrete formal syntax luminance | alpha examples setting an alpha mask html <div class="redsquare"></div> <svg vers
ion="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="0" height="0"> <defs> <mask id="m" maskcontentunits="objectboundingbox" ...
... style="mask-type:alpha"> <rect x=".1" y=".1" width=".8" height=".8" fill="red" fill-opacity="0.7"/> </mask> </defs> </svg> css .redsquare { height: 100px; width: 100px; background-color: rgb(128, 128, 128); border: solid 1px black; mask: url("#m"); } result setting a luminance mask html <div class="redsquare"></div> <svg vers
ion="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="0" height="0"> <defs> <mask id="m" maskcontentunits="objectboundingbox" style="mask-type:luminance"> <rect x=".1" y=".1" width=".8" height=".8" fill="red" fill-opacity="0.7"/> </mask> </defs> </svg> css .redsquare { height: 100px; width: 100px; background-color: rgb(128, 128, 128); bor...
...der: solid 1px black; mask: url("#m"); mask-type:luminance; } result specificat
ions specificat
ion status comment css masking module level 1the definit
ion of 'mask-type' in that specificat
ion.
... candidate recommendat
ion initial definit
ion.
max-inline-size - CSS: Cascading Style Sheets
it relates to max-block-size, which defines the other dimens
ion of the element.
... formal definit
ion initial value0applies tosame as width and heightinheritednopercentagesinline-size of containing blockcomputed valuesame as max-width and max-heightanimat
ion typea length, percentage or calc(); formal syntax <'max-width'> examples setting max inline size in pixels html <p class="exampletext">example text</p> css .exampletext { writing-mode: vertical-rl; background-color: yellow; b...
...lock-size: 100%; max-inline-size: 200px; } result specificat
ions specificat
ion status comment css logical properties and values level 1the definit
ion of 'max-inline-size' in that specificat
ion.
... editor's draft initial definit
ion ...
overflow-inline - CSS: Cascading Style Sheets
hidden content is clipped if necessary to fit the inline dimens
ion in the padding box.
... scroll content is clipped if necessary to fit in the padding box in the inline dimens
ion.
... formal definit
ion initial valueautoapplies toblock-containers, flex containers, and grid containersinheritednocomputed valueas specified, except with visible/clip computing to auto/hidden respectively if one of overflow-x or overflow-y is neither visible nor clipanimat
ion typediscrete formal syntax visible | hidden | clip | scroll | auto examples setting inline overflow behav
ior html <ul> <li><code>overf...
...quivalent to <code>scroll</code> <div id="div4"> abcdefghijklmopqrstuvwxyzabcdefghijklmopqrstuvwxyz </div> </li> </ul> css #div1, #div2, #div3, #div4 { border: 1px solid black; width: 250px; margin-bottom: 12px; } #div1 { overflow-inline: hidden;} #div2 { overflow-inline: scroll;} #div3 { overflow-inline: visible;} #div4 { overflow-inline: auto;} result specificat
ions specificat
ion status comment css overflow module level 3the definit
ion of 'overflow-inline' in that specificat
ion.
padding-inline-end - CSS: Cascading Style Sheets
the padding-inline-end css property defines the logical inline end padding of an element, which maps to a physical padding depending on the element's writing mode, direct
ionality, and text orientat
ion.
... descript
ion this property corresponds to the padding-top, padding-right, padding-bottom, or padding-left property depending on the values defined for writing-mode, direct
ion, and text-orientat
ion.
... formal definit
ion initial value0applies toall elementsinheritednopercentageslogical-width of containing blockcomputed valueas <length>animat
ion typea length formal syntax <'padding-left'> examples setting inline end padding for vertical text html <div> <p class="exampletext">example text</p> </div> css div { background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: vertical-lr; padding-inline-end: 20px; background-color: #c8c800; } specificat
ions specificat
ion status comment css logical properties and values level 1the definit
ion of 'padding-inline-end' in that specificat
ion.
... editor's draft initial definit
ion ...
padding-inline-start - CSS: Cascading Style Sheets
the padding-inline-start css property defines the logical inline start padding of an element, which maps to a physical padding depending on the element's writing mode, direct
ionality, and text orientat
ion.
... descript
ion this property corresponds to the padding-top, padding-right, padding-bottom, or padding-left property depending on the values defined for writing-mode, direct
ion, and text-orientat
ion.
... formal definit
ion initial value0applies toall elementsinheritednopercentageslogical-width of containing blockcomputed valueas <length>animat
ion typea length formal syntax <'padding-left'> examples setting inline start padding for vertical text html <div> <p class="exampletext">example text</p> </div> css div { background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: vertical-lr; padding-inline-start: 20px; background-color: #c8c800; } specificat
ions specificat
ion status comment css logical properties and values level 1the definit
ion of 'padding-inline-start' in that specificat
ion.
... editor's draft initial definit
ion ...
padding-inline - CSS: Cascading Style Sheets
the padding-inline css shorthand property defines the logical inline start and end padding of an element, which maps to physical padding properties depending on the element's writing mode, direct
ionality, and text orientat
ion.
... descript
ion values for this property correspond to the padding-top and padding-bottom, or padding-right, and padding-left property depending on the values defined for writing-mode, direct
ion, and text-orientat
ion.
... formal definit
ion initial value0applies toall elementsinheritednopercentageslogical-width of containing blockcomputed valueas <length>animat
ion typediscrete formal syntax <'padding-left'>{1,2} examples setting inline padding for 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; padding-inline: 20px 40px; background-color: #c8c800; } result specificat
ions specificat
ion status comment css logical properties and values level 1the definit
ion of 'padding-inline' in that specificat
ion.
... editor's draft initial definit
ion ...
row-gap (grid-row-gap) - CSS: Cascading Style Sheets
<percentage> values are relative to the dimens
ion of the element.
... formal definit
ion initial valuenormalapplies tomulti-column elements, flex containers, grid containersinheritednopercentagesrefer to corresponding dimens
ion of the content areacomputed valueas specified, with <length>s made absolute, and normal computing to zero except on multi-column elementsanimat
ion typea length, percentage or calc(); formal syntax normal | <length-percentage>where <length-percentage> = <length> | <percentage> examples flex layout html <div id="flexbox"> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> </div> css #flexbox { display: flex; flex-wrap: wrap; width: 300px; row-gap: 20px; } #flexbox > div { border: 1px solid green; background-color: lime; flex: 1 1 auto; width: 100px; height: 50px; } resul...
...t grid layout html <div id="grid"> <div></div> <div></div> <div></div> </div> css #grid { grid-row-gap: 20px; } #grid { display: grid; height: 200px; grid-template-columns: 200px; grid-template-rows: repeat(3, 1fr); row-gap: 20px; } #grid > div { border: 1px solid green; background-color: lime; } result specificat
ions specificat
ion status comment css box alignment module level 3the definit
ion of 'row-gap' in that specificat
ion.
... working draft initial definit
ion ...
ruby-align - CSS: Cascading Style Sheets
the ruby-align css property defines the distribut
ion of the different ruby elements over the base.
... formal definit
ion initial valuespace-aroundapplies toruby bases, ruby annotat
ions, ruby base containers, ruby annotat
ion containersinheritedyescomputed valueas specifiedanimat
ion typediscrete formal syntax start | center | space-between | space-around examples ruby aligned at the start of the base text html <ruby> <rb>this is a long text to check</rb> <rp>(</rp><rt>short ruby</rt><rp>)</rp> </ruby>...
...lements html <ruby> <rb>this is a long text to check</rb> <rp>(</rp><rt>short ruby</rt><rp>)</rp> </ruby> css ruby { ruby-align: space-between; } result extra space distributed between and around ruby elements html <ruby> <rb>this is a long text to check</rb> <rp>(</rp><rt>short ruby</rt><rp>)</rp> </ruby> css ruby { ruby-align: space-around; } result specificat
ions specificat
ion status comment css ruby layout module level 1the definit
ion of 'ruby-align' in that specificat
ion.
... working draft initial definit
ion ...
scroll-margin-block - CSS: Cascading Style Sheets
the scroll-margin-block shorthand property sets the scroll margins of an element in the block dimens
ion.
... descript
ion the scroll-margin values represent outsets defining the scroll snap area that is used for snapping this box to the snapport.
... formal definit
ion initial value0applies toall elementsinheritednocomputed valueas specifiedanimat
ion typeby computed value type formal syntax <length>{1,2} specificat
ions specificat
ion status comment css scroll snap module level 1the definit
ion of 'scroll-margin-block' in that specificat
ion.
... candidate recommendat
ion initial definit
ion ...
scroll-margin-inline-end - CSS: Cascading Style Sheets
the scroll-margin-inline-end property defines the margin of the scroll snap area at the end of the inline dimens
ion that is used for snapping this box to the snapport.
... formal definit
ion initial value0applies toall elementsinheritednocomputed valueas specifiedanimat
ion typeby computed value type formal syntax <length> examples simple demonstrat
ion this example implements something very similar to the interactive example above, except that here we'll explain to you how it's implemented.
... result try it for yourself: specificat
ions specificat
ion status comment css scroll snap module level 1the definit
ion of 'scroll-margin-inline-end' in that specificat
ion.
... candidate recommendat
ion initial definit
ion ...
scroll-margin-inline-start - CSS: Cascading Style Sheets
the scroll-margin-inline-start property defines the margin of the scroll snap area at the start of the inline dimens
ion that is used for snapping this box to the snapport.
... formal definit
ion initial value0applies toall elementsinheritednocomputed valueas specifiedanimat
ion typeby computed value type formal syntax <length> examples simple demonstrat
ion this example implements something very similar to the interactive example above, except that here we'll explain to you how it's implemented.
... result try it for yourself: specificat
ions specificat
ion status comment css scroll snap module level 1the definit
ion of 'scroll-margin-inline-start' in that specificat
ion.
... candidate recommendat
ion initial definit
ion ...
scroll-margin - CSS: Cascading Style Sheets
descript
ion you can see the effect of scroll-margin by scrolling to a point partway between two of the "pages" of the example's content.
... formal definit
ion initial value0applies toall elementsinheritednocomputed valueas specifiedanimat
ion typeby computed value type formal syntax <length>{1,4} examples simple demonstrat
ion this example implements something very similar to the interactive example above, except that here we'll explain to you how it's implemented.
... result try it for yourself: specificat
ions specificat
ion status comment css scroll snap module level 1the definit
ion of 'scroll-margin' in that specificat
ion.
... candidate recommendat
ion initial definit
ion ...
shape-margin - CSS: Cascading Style Sheets
formal definit
ion initial value0applies tofloatsinheritednopercentagesrefer to the width of the containing blockcomputed valueas specified, but with relative lengths converted into absolute lengthsanimat
ion typea length, percentage or calc(); formal syntax <length-percentage>where <length-percentage> = <length> | <percentage> examples adding a margin to a polygon html <sect
ion> <div class="shape"></div> we...
... are not quite sure of any one thing in b
iology; our knowledge of geology is relatively very slight, and the economic laws of society are uncertain to every one except some individual who attempts to set them forth; but before the world was fash
ioned the square on the hypotenuse was equal to the sum of the squares on the other two sides of a right triangle, and it will be so after this world is dead; and the inhabitant of mars, if he exists, probably knows its truth as we know it.</sect
ion> css sect
ion { max-width: 400px; } .shape { float: left; width: 150px; height: 150px; background-color: maroon; clip-path: polygon(0 0, 150px 150px, 0 150px); shape-outside: polygon(0 0, 150px 150px, 0 150px); shape-margin: 20px; } result specificat
ions specificat
ion sta...
...tus comment css shapes module level 1the definit
ion of 'shape-margin' in that specificat
ion.
... candidate recommendat
ion initial definit
ion ...
unset - CSS: Cascading Style Sheets
or: green; } p { color: red; } .bar p { color: unset; } result border html <p>this text has a red border.</p> <div> <p>this text has a red border.</p> </div> <div class="bar"> <p>this text has a black border (initial default, not inherited).</p> </div> css div { border: 1px solid green; } p { border: 1px solid red; } .bar p { border-color: unset; } result specificat
ions specificat
ion status comment css cascading and inheritance level 4the definit
ion of 'unset' in that specificat
ion.
... candidate recommendat
ion no changes from level 3.
... css cascading and inheritance level 3the definit
ion of 'unset' in that specificat
ion.
... candidate recommendat
ion initial definit
ion.
exsl:object-type() - EXSLT
xslt/xpath reference: xslt elements, exslt funct
ions, xpath funct
ions, xpath axes exsl:object-type() returns a string that indicates the type of the specified object.
... note: most xslt object types can be coerced into each other safely; however, certain coercs
ions to raise error condit
ions.
...this funct
ion lets authors of named templates and extens
ion funct
ions easily provide flexibility in parameter values.
... returns the object's type, which will be one of the following: string number boolean node-set rtf external specificat
ions exslt - exsl:object-type ...
<bgsound>: The Background Sound element (obsolete) - HTML: Hypertext Markup Language
the internet explorer only html background sound element (<bgsound>) sets up a sound file to play in the background while the page is used; use <aud
io> instead.
...in order to embed aud
io in a web page, you should be using the <aud
io> element.
... example <bgsound src="sound1.mid"> <bgsound src="sound2.au" loop="infinite"> usage notes historically, the <embed> element could be used with aud
io player plug-ins to play aud
io in the background in most browsers.
... however, even this is no longer appropriate, and you should use <aud
io> instead, since it's more capable, more compatible, and doesn't require plug-ins.
manifest - HTML: Hypertext Markup Language
the manifest attribute of <html> element specifies a url of a applicat
ion cache manifest that is downloaded in the early stages of page load.
... the manifest attribute has only effect during early stages of page load, thus changing it via regular dom interfaces has no effect, window.applicat
ioncache interface instead.
... specificat
ions specificat
ion status comment html5the definit
ion of '<html> manifest attribute' in that specificat
ion.
... recommendat
ion added support for the manifest attribute and deprecated it later ...
<image>: The obsolete Image element - HTML: Hypertext Markup Language
the obsolete html image element (<image>) is an obsolete remnant of an ancient vers
ion of html lost in the mists of time; use the standard <img> element instead.
... ser
iously, the specificat
ion even literally uses the words "don't ask" when describing this element.
... while some browsers will attempt to automatically convert this into an <img> element, they won't always do so, and won't always succeed when they try, due to var
ious ways in which the opt
ions can be interpreted.
... specificat
ions this might have once been part of a specificat
ion, but nobody seems to remember.
<listing> - HTML: Hypertext Markup Language
implementat
ion note: up to gecko 1.9.2 inclusive, firefox implements the htmlspanelement interface for this element.
... desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on
iossamsung internetlisting deprecatedchrome no support noedge no support nofirefox no support nonotes no support nonotes notes before firefox 4, this element implemented the htmlspanelement interface instead of the standard htmlelement interface.ie ...
... no support nofirefox android no support nonotes no support nonotes notes before firefox 4, this element implemented the htmlspanelement interface instead of the standard htmlelement interface.opera android no support nosafari
ios no support nosamsung internet android no support nolegend no support no supportdeprecated.
...not for use in new websites.see implementat
ion notes.see implementat
ion notes.
<shadow>: The obsolete Shadow Root element - HTML: Hypertext Markup Language
the html <shadow> element—an obsolete part of the web components technology suite—was intended to be used as a shadow dom insert
ion point.
... content categories transparent content permitted content flow content tag omiss
ion none, both the starting and ending tag are mandatory.
... // the prev
ious markup will not be displayed unless // <shadow> is used below.
... specificat
ions this element is no longer defined by any specificat
ions.
<strike> - HTML: Hypertext Markup Language
example <strike>: <strike>today's special: salmon</strike> sold out<br /> <s>: <s>today's special: salmon</s> sold out the result of this code is: specificat
ions specificat
ion status comment html5the definit
ion of '<strike>' in that specificat
ion.
... recommendat
ion make obsolete in favor of <del> and <s>.
... html 4.01 specificat
ionthe definit
ion of '<strike>' in that specificat
ion.
... recommendat
ion make deprecated in favor of <del> and <s>.
inputmode - HTML: Hypertext Markup Language
decimal fract
ional numeric input keyboard containing the digits and decimal separator for the user's locale (typically .
...for instance, the return/submit key may be labeled "search", along with possible other optimizat
ions.
...typically includes the @ character as well as other optimizat
ions.
... specificat
ions specificat
ion status comment html living standardthe definit
ion of 'inputmode' in that specificat
ion.
itemref - HTML: Hypertext Markup Language
itemref provides a list of element ids (not itemids) elsewhere in the document, with addit
ional properties the itemref attribute can only be specified on elements that have an itemscope attribute specified.
...it is merely a syntactic construct to aid authors in adding annotat
ions to pages where the data to be annotated does not follow a convenient tree structure.
...mprop="name">amanda</span> </p> <div id="b" itemprop="band" itemscope itemref="c"></div> <div id="c"> <p>band: <span itemprop="name">jazz band</span> </p> <p>size: <span itemprop="size">12</span> players</p> </div> structured data (in json-ld format) { "@id": "amanda", "name": "amanda", "band": { "@id": "b", "name": "jazz band", "size": 12 } } result specificat
ions specificat
ion status comment html microdatathe definit
ion of 'itemref' in that specificat
ion.
... working draft html living standardthe definit
ion of 'itemref' in that specificat
ion.
Inline elements - HTML: Hypertext Markup Language
since this is a presentat
ional characteristic it is nowadays specified by css in the flow layout.
...block-level elements: a demonstrat
ion this is most easily demonstrated with a simple example.
... changing element levels you can change the visual presentat
ion of an element using the css display property.
... list of "inline" elements the following elements are inline by default (although block and inline elements are no longer defined in html 5, use content categories instead): <a> <abbr> <acronym> <aud
io> (if it has visible controls) <b> <bdi> <bdo> <big> <br> <button> <canvas> <cite> <code> <data> <datalist> <del> <dfn> <em> <embed> <i> <iframe> <img> <input> <ins> <kbd> <label> <map> <mark> <meter> <noscript> <object> <output> <picture> <progress> <q> <ruby> <s> <samp> <script> <select> <slot> <small> <span> <strong> <sub> <sup> <svg> <template> <tex...
Accept - HTTP
using content negotiat
ion, the server then selects one of the proposals, uses it and informs the client of its choice with the content-type response header.
... header type request header forbidden header name no cors-safelisted request header yes, with the addit
ional restrict
ion that values can't contain a cors-unsafe request header byte: 0x00-0x1f (except 0x09 (ht)), "():<>?@[\]{}, and 0x7f (del).
... syntax accept: <mime_type>/<mime_subtype> accept: <mime_type>/* accept: */* // multiple types, weighted with the quality value syntax: accept: text/html, applicat
ion/xhtml+xml, applicat
ion/xml;q=0.9, image/webp, */*;q=0.8 directives <mime_type>/<mime_subtype> a single, precise mime type, like text/html.
... examples accept: text/html accept: image/* // general default accept: */* // default for navigat
ion requests accept: text/html, applicat
ion/xhtml+xml, applicat
ion/xml;q=0.9, */*;q=0.8 specificat
ions specificat
ion title rfc 7231, sect
ion 5.3.2: accept hypertext transfer protocol (http/1.1): semantics and context ...
Access-Control-Allow-Credentials - HTTP
credentials are cookies, authorizat
ion headers or tls client certificates.
... the access-control-allow-credentials header works in conjunct
ion with the xmlhttprequest.withcredentials property or with the credentials opt
ion in the request() constructor of the fetch api.
... examples allow credentials: access-control-allow-credentials: true using xhr with credentials: var xhr = new xmlhttprequest(); xhr.open('get', 'http://example.com/', true); xhr.withcredentials = true; xhr.send(null); using fetch with credentials: fetch(url, { credentials: 'include' }) specificat
ions specificat
ion status comment fetchthe definit
ion of 'access-control-allow-credentials' in that specificat
ion.
... living standard initial definit
ion ...
Content-Language - HTTP
multiple language tags are also possible, as well as applying the content-language header to var
ious media types and not only to textual documents.
... header type entity header forbidden header name no cors-safelisted response header yes cors-safelisted request header yes, with the addit
ional restrict
ion that values can only be 0-9, a-z, a-z, space or *,-.;=.
...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 opt
ionally 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).
... content-language: de, en specificat
ions specificat
ion title rfc 7231, sect
ion 3.1.3.2: content-language hypertext transfer protocol (http/1.1): semantics and content ...
Cross-Origin-Opener-Policy - HTTP
this allows you to have more control over references to a window than rel=noopener, which only affects outgoing navigat
ions.
... same-origin-allow-popups retains references to newly opened windows or tabs which either don't set coop or which opt out of isolat
ion by setting a coop of unsafe-none.
... examples certain features depend on cross-origin isolat
ion certain features like sharedarraybuffer objects or performance.now() with unthrottled timers are only available if your document has a coop header with the value same-origin value set.
... to check if cross-origin isolat
ion has been successful, you can test against the crossoriginisolated property available to window and worker contexts: if (crossoriginisolated) { // post sharedarraybuffer } else { // do something else } specificat
ions specificat
ion html living standardthe definit
ion of 'cross-origin-opener-policy header' in that specificat
ion.
Feature-Policy: accelerometer - HTTP
the http feature-policy header accelerometer directive controls whether the current document is allowed to gather informat
ion about the accelerat
ion of the device through the accelerometer interface.
... specificat
ions specificat
ion status comment feature policy editor's draft initial definit
ion.
... accelerometerthe definit
ion of 'accelerometer' in that specificat
ion.
... candidate recommendat
ion ...
Feature-Policy: autoplay - HTTP
when this policy is enabled and there were no user gestures, the promise returned by htmlmediaelement.play() will reject with a domexcept
ion.
... the autoplay attribute on <aud
io> and <video> elements will be ignored.
... for more details on autoplay and autoplay blocking, see the article autoplay guide for media and web aud
io apis.
... specificat
ions specificat
ion status comment feature policy editor's draft initial definit
ion.
Feature-Policy: battery - HTTP
the http feature-policy header battery directive controls whether the current document is allowed to gather informat
ion about the accelerat
ion of the device through the batterymanager interface obtained via navigator.getbattery().
... specificat
ions specificat
ion status comment feature policy editor's draft initial definit
ion.
... battery status apithe definit
ion of 'feature policy integrat
ion' in that specificat
ion.
... candidate recommendat
ion ...
Feature-Policy: publickey-credentials-get - HTTP
the http feature-policy header publickey-credentials-get directive controls whether the current document is allowed to access web authentcat
ion api to create new public-key credentials, i.e, via navigator.credentials.get({publickey: ..., ...}).
... specificat
ions specificat
ion status comment feature policy editor's draft initial definit
ion.
... web authenticat
ion level 2 editor's draft.
... definit
ion of publickey-credentials-get directive, default allowlist.
If-Modified-Since - HTTP
the if-modified-since request http header makes the request condit
ional: the server will send back the requested resource, with a 200 status, only if it has been last modified after the given date.
... if the request has not been modified since, the response will be a 304 without any body; the last-modified response header of a prev
ious request will contain the date of last modificat
ion.
... when used in combinat
ion with if-none-match, it is ignored, unless the server doesn't support if-none-match.
... examples if-modified-since: wed, 21 oct 2015 07:28:00 gmt specificat
ions specificat
ion title rfc 7232, sect
ion 3.3: if-modified-since hypertext transfer protocol (http/1.1): condit
ional requests ...
Pragma - HTTP
the pragma http/1.0 general header is an implementat
ion-specific header that may have var
ious effects along the request-response chain.
... header type general header, but response behav
ior is not specified and thus implementat
ion-specific.
...forces caches to submit the request to the origin server for validat
ion before releasing a cached copy.
... examples pragma: no-cache specificat
ions specificat
ion title rfc 7234, sect
ion 5.4: pragma hypertext transfer protocol (http/1.1): caching ...
Sec-Fetch-User - HTTP
the sec-fetch-user fetch metadata header indicates whether or not a navigat
ion request was triggered by a user activat
ion.
... ?0 the navigat
ion request was triggered by a user activat
ion.
... ?1 the navigat
ion request was triggered by something other than a user activat
ion.
... examples todo specificat
ions specificat
ion title fetch metadata request headers the sec-fetch-user http request header ...
Server - HTTP
avoid overly-detailed server values, as they can reveal informat
ion that might make it (slightly) easier for attackers to exploit known security holes.
... how much detail to include is an interesting balance to strike; exposing the os vers
ion is probably a bad idea, as ment
ioned in the earlier warning about overly-detailed values.
... however, exposed apache vers
ions helped browsers work around a bug those vers
ions had with content-encoding combined with range.
... examples server: apache/2.4.1 (unix) specificat
ions specificat
ion title rfc 7231, sect
ion 7.4.2: server hypertext transfer protocol (http/1.1): semantics and content ...
Vary - HTTP
it is used by the server to indicate which headers it used when selecting a representat
ion of a resource in a content negotiat
ion algorithm.
...for example, if you are serving different content to mobile users, it can help you to avoid that a cache may mistakenly serve a desktop vers
ion of your site to your mobile users.
... it can help google and other search engines to discover the mobile vers
ion of a page, and might also tell them that no cloaking is intended.
... vary: user-agent specificat
ions specificat
ion title rfc 7231, sect
ion 7.1.4: vary hypertext transfer protocol (http/1.1): semantics and content ...
X-Forwarded-For - HTTP
this header is used for debugging, statistics, and generating locat
ion-dependent content and by design it exposes privacy sensitive informat
ion, such as the ip address of the client.
... a standardized vers
ion of this header is the http forwarded header.
... examples x-forwarded-for: 2001:db8:85a3:8d3:1319:8a2e:370:7348 x-forwarded-for: 203.0.113.195 x-forwarded-for: 203.0.113.195, 70.41.3.18, 150.172.238.178 other non-standard forms: # used for some google services x-proxyuser-ip: 203.0.113.19 specificat
ions not part of any current specificat
ion.
... the standardized vers
ion of this header is forwarded.
X-Forwarded-Host - HTTP
this header is used for debugging, statistics, and generating locat
ion-dependent content and by design it exposes privacy sensitive informat
ion, such as the ip address of the client.
... a standardized vers
ion of this header is the http forwarded header.
... examples x-forwarded-host: id42.example-cdn.com specificat
ions not part of any current specificat
ion.
... the standardized vers
ion of this header is forwarded.
DELETE - HTTP
y may successful response has body may safe no idempotent yes cacheable no allowed in html forms no syntax delete /file.html http/1.1 example request delete /file.html http/1.1 responses if a delete method is successfully applied, there are several response status codes possible: a 202 (accepted) status code if the act
ion will likely succeed but has not yet been enacted.
... a 204 (no content) status code if the act
ion has been enacted and no further informat
ion is to be supplied.
... a 200 (ok) status code if the act
ion has been enacted and the response message includes a representat
ion describing the status.
... http/1.1 200 ok date: wed, 21 oct 2015 07:28:00 gmt <html> <body> <h1>file deleted.</h1> </body> </html> specificat
ions specificat
ion title rfc 7231, sect
ion 4.3.5: delete hypertext transfer protocol (http/1.1): semantics and content ...
302 Found - HTTP
the hypertext transfer protocol (http) 302 found redirect status response code indicates that the resource requested has been temporarily moved to the url given by the locat
ion header.
... even if the specificat
ion requires the method (and the body) not to be altered when the redirect
ion is performed, not all user-agents conform here - you can still find this type of bugged software out there.
...this is useful when you want to give a response to a put method that is not the uploaded resource but a confirmat
ion message such as: 'you successfully uploaded xyz'.
... status 302 found specificat
ions specificat
ion title rfc 7231, sect
ion 6.4.3: 302 found hypertext transfer protocol (http/1.1): semantics and content ...
401 Unauthorized - HTTP
the http 401 unauthorized client error status response code indicates that the request has not been applied because it lacks valid authenticat
ion credentials for the target resource.
... this status is sent with a www-authenticate header that contains informat
ion on how to authorize correctly.
... this status is similar to 403, but in this case, authenticat
ion is possible.
... status 401 unauthorized example response http/1.1 401 unauthorized date: wed, 21 oct 2015 07:28:00 gmt www-authenticate: basic realm="access to staging site" specificat
ions specificat
ion title rfc 7235, sect
ion 3.1: 401 unauthorized http/1.1: authenticat
ion ...
406 Not Acceptable - HTTP
the hypertext transfer protocol (http) 406 not acceptable client error response code indicates that the server cannot produce a response matching the list of acceptable values defined in the request's proactive content negotiat
ion headers, and that the server is unwilling to supply a default representat
ion.
... proactive content negotiat
ion headers include: accept accept-charset accept-encoding accept-language in practice, this error is very rarely used.
... if a server returns such an error status, the body of the message should contain the list of the available representat
ions of the resources, allowing the user to choose among them.
... status 406 not acceptable specificat
ions specificat
ion title rfc 7231, sect
ion 6.5.6: 406 not acceptable hypertext transfer protocol (http/1.1): semantics and content ...
451 Unavailable For Legal Reasons - HTTP
the hypertext transfer protocol (http) 451 unavailable for legal reasons client error response code indicates that the user requested a resource that is not available due to legal reasons, such as a web page for which a legal act
ion has been issued.
... note: the link header might also contain a rel="blocked-by" relat
ion identifying the entity and implementing blockage, not any other entity mandating it.
...this includes the name of the person or organizat
ion that made a legal demand resulting in the content's removal.
... http/1.1 451 unavailable for legal reasons link: <https://spqr.example.org/legislat
ione>; 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> specificat
ions specificat
ion title rfc 7725: 451 unavailable for legal reasons an http status code to report legal obstacles ...
501 Not Implemented - HTTP
the hypertext transfer protocol (http) 501 not implemented server error response code means that the server does not support the funct
ionality required to fulfill the request.
... this status can also send a retry-after header, telling the requester when to check back to see if the funct
ionality is supported by then.
... if the server does recognize the method, but intent
ionally does not support it, the appropriate response is 405 method not allowed.
... status 501 not implemented specificat
ions specificat
ion title rfc 7231, sect
ion 6.6.2: 501 not implemented hypertext transfer protocol (http/1.1): semantics and content ...
508 Loop Detected - HTTP
the hypertext transfer protocol (http) 508 loop detected response status code may be given in the context of the web distributed authoring and vers
ioning (webdav) protocol.
... it indicates that the server terminated an operat
ion because it encountered an infinite loop while processing a request with "depth: infinity".
... this status indicates that the entire operat
ion failed.
... status 508 loop detected specificat
ions specificat
ion title rfc 5842, sect
ion 7.2: 508 loop detected web distributed authoring and vers
ioning ...
510 Not Extended - HTTP
the hypertext transfer protocol (http) 510 not extended response status code is sent in the context of the http extens
ion framework, defined in rfc 2774.
... in that specificat
ion a client may send a request that contains an extens
ion declarat
ion, that describes the extens
ion to be used.
... if the server receives such a request, but any described extens
ions are not supported for the request, then the server responds with the 510 status code.
... status 510 not extended specificat
ions specificat
ion title rfc 2774, sect
ion 7: 510 not extended an http extens
ion framework ...
Quantifiers - JavaScript
quantifiers indicate numbers of characters or express
ions to match.
...will match "<foo>" examples repeated pattern var wordendingwithas = /\w+a+\b/; var delicatemessage = "this is spartaaaaaaa"; console.table(delicatemessage.match(wordendingwithas)); // [ "spartaaaaaaa" ] counting characters var singleletterword = /\b\w\b/g; var notsolongword = /\b\w{1,6}\b/g; var loooongword = /\b\w{13,}\b/g; var sentence = "why do i have to learn multiplicat
ion table?"; console.table(sentence.match(singleletterword)); // ["i"] console.table(sentence.match(notsolongword)); // [ "why", "do", "i", "have", "to", "learn", "table" ] console.table(sentence.match(loooongword)); // ["multiplicat
ion"] opt
ional character var britishtext = "he asked his neighbour a favour."; var americantext = "he asked his neighbor a favor."; var regexpending = /\w+o...
... opt
ionally followed by a "u" // r followed by an "r" console.table(britishtext.match(regexpending)); // ["neighbour", "favour"] console.table(americantext.match(regexpending)); // ["neighbor", "favor"] greedy versus non-greedy var text = "i must be getting somewhere near the centre of the earth."; var greedyregexp = /[\w ]+/; // [\w ] a letter of the latin alphabet or a whitespace // + one or several times console.log(text.match(greedyregexp)[0]); // "i must be getting somewhere near the centre of the earth" // almost all of the text matches (leaves out the dot character) var nongreedyregexp = /[\w ]+?/; // notice the quest
ion mark console.log(text.match(nongreedyregexp)); // "i" // the match is the...
... smallest one possible specificat
ions specificat
ion ecmascript (ecma-262)the definit
ion of 'regexp: quantifiers' in that specificat
ion.
extends - JavaScript
the extends keyword is used in class declarat
ions or class express
ions to create a class that is a child of another class.
...} descript
ion the extends keyword can be used to subclass custom classes as well as built-in objects.
... the .prototype of the extens
ion must be an object or null.
... class mydate extends date { getformatteddate() { var months = ['jan', 'feb', 'mar', 'apr', 'may', 'jun', 'jul', 'aug', 'sep', 'oct', 'nov', 'dec']; return this.getdate() + '-' + months[this.getmonth()] + '-' + this.getfullyear(); } } specificat
ions specificat
ion ecmascript (ecma-262)the definit
ion of 'extends' in that specificat
ion.
Warning: String.x is deprecated; use String.prototype.x instead - JavaScript
the javascript warning about string generics occurs in firefox vers
ions pr
ior to 68.
...javascript execut
ion won't be halted.
... examples deprecated syntax var num = 15; string.replace(num, /5/, '2'); standard syntax var num = 15; string(num).replace(/5/, '2'); shim the following is a shim to provide support to non-supporting browsers: /*globals define*/ // assumes all supplied string instance methods already present // (one may use shims for these if not available) (funct
ion() { 'use strict'; var i, // we could also build the array of methods with the following, but the // getownpropertynames() method is non-shimable: // object.getownpropertynames(string).filter(funct
ion(methodname) { // return typeof string[methodname] === 'funct
ion'; // }); methods = [ 'contains', 'substring', 'tolowercase', 'touppercase', 'charat', 'ch...
...arcodeat', 'indexof', 'lastindexof', 'startswith', 'endswith', 'trim', 'trimleft', 'trimright', 'tolocalelowercase', 'normalize', 'tolocaleuppercase', 'localecompare', 'match', 'search', 'slice', 'replace', 'split', 'substr', 'concat', 'localecompare' ], methodcount = methods.length, assignstringgeneric = funct
ion(methodname) { var method = string.prototype[methodname]; string[methodname] = funct
ion(arg1) { return method.apply(arg1, array.prototype.slice.call(arguments, 1)); }; }; for (i = 0; i < methodcount; i++) { assignstringgeneric(methods[i]); } }()); ...
SyntaxError: illegal character - JavaScript
the javascript except
ion "illegal character" occurs when there is an invalid or unexpected token that doesn't belong at this posit
ion in the code.
... there is an invalid or unexpected token that doesn't belong at this posit
ion in the code.
... use an editor that supports syntax highlighting and carefully check your code against mismatches like a minus sign ( - ) versus a dash ( – ) or simple quotes ( " ) vs non-standard quotat
ion marks ( “ ).
...famous examples of this are quotes, the minus or semicolon (greek quest
ionmark (u+37e) looks same).
RangeError: invalid array length - JavaScript
the javascript except
ion "invalid array length" occurs when creating an array or an arraybuffer which has a length which is either negative or larger or equal to 232, or when setting the array.length property to a value which is either negative or larger or equal to 232.
... an invalid array length might appear in these situat
ions: when creating an array or an arraybuffer which has a length which is either negative or larger or equal to 232, or when setting the array.length property to a value which is either negative or larger or equal to 232.
... if you are creating an array, using the constructor, you probably want to use the literal notat
ion instead, as the first argument is interpreted as the length of the array.
... // set 2^32 to the length property valid cases [ math.pow(2, 40) ] // [ 1099511627776 ] [ -1 ] // [ -1 ] new arraybuffer(math.pow(2, 32) - 1) new arraybuffer(0) let a = []; a.length = math.max(0, a.length - 1); let b = new array(math.pow(2, 32) - 1); b.length = math.min(0xffffffff, b.length + 1); // 0xffffffff is the hexadecimal notat
ion for 2^32 - 1 // which can also be written as (-1 >>> 0) ...
SyntaxError: JSON.parse: bad parsing - JavaScript
the javascript except
ions thrown by json.parse() occur when string failed to be parsed as json.
...iteral syntaxerror: json.parse: bad character in string literal syntaxerror: json.parse: bad unicode escape syntaxerror: json.parse: bad escape character syntaxerror: json.parse: unterminated string syntaxerror: json.parse: no number after minus sign syntaxerror: json.parse: unexpected non-digit syntaxerror: json.parse: missing digits after decimal point syntaxerror: json.parse: unterminated fract
ional number syntaxerror: json.parse: missing digits after exponent indicator syntaxerror: json.parse: missing digits after exponent sign syntaxerror: json.parse: exponent part is missing a number syntaxerror: json.parse: unexpected end of data syntaxerror: json.parse: unexpected keyword syntaxerror: json.parse: unexpected character syntaxerror: json.parse: end of data while reading object contents ...
...bject syntaxerror: json.parse: expected ',' or '}' after property-value pair in object literal syntaxerror: json.parse: property names must be double-quoted strings syntaxerror: json.parse: expected property name or '}' syntaxerror: json.parse: unexpected character syntaxerror: json.parse: unexpected non-whitespace character after json data syntaxerror: json.parse error: invalid character at posit
ion {0} (edge) error type syntaxerror what went wrong?
... json.parse('{"foo": 01}'); // syntaxerror: json.parse: expected ',' or '}' after property value // in object at line 1 column 2 of the json data json.parse('{"foo": 1.}'); // syntaxerror: json.parse: unterminated fract
ional number // at line 1 column 2 of the json data instead write just 1 without a zero and use at least one digit after a decimal point: json.parse('{"foo": 1}'); json.parse('{"foo": 1.0}'); ...
SyntaxError: missing ) after argument list - JavaScript
the javascript except
ion "missing ) after argument list" occurs when there is an error with how a funct
ion is called.
... there is an error with how a funct
ion is called.
... examples because there is no "+" operator to concatenate the string, javascript expects the argument for the log funct
ion to be just "pi: ".
...ist you can correct the log call by adding the "+" operator: console.log('pi: ' + math.pi); // "pi: 3.141592653589793" unterminated strings console.log('"java" + "script" = \"' + 'java' + 'script\"); // syntaxerror: missing ) after argument list here javascript thinks that you meant to have ); inside the string and ignores it, and it ends up not knowing that you meant the ); to end the funct
ion console.log.
SyntaxError: missing ; before statement - JavaScript
the javascript except
ion "missing ; before statement" occurs when there is a semicolon (;) missing somewhere and can't be added by automatic semicolon insert
ion (asi).
...some of them are affected by automatic semicolon insert
ion (asi), but in this case you need to provide a semicolon, so that javascript can parse the source code correctly.
...for example: var foo = 'tom's bar'; // syntaxerror: missing ; before statement you can use double quotes, or escape the apostrophe: var foo = "tom's bar"; var foo = 'tom\'s bar'; declaring properties with var you cannot declare properties of an object or array with a var declarat
ion.
...error missing ; before statement instead, omit the var keyword: var obj = {}; obj.foo = 'hi'; var array = []; array[0] = 'there'; bad keywords if you come from another programming language, it is also common to use keywords that don't mean the same or have no meaning at all in javascript: def print(info){ console.log(info); }; // syntaxerror missing ; before statement instead, use funct
ion instead of def: funct
ion print(info){ console.log(info); }; ...
TypeError: "x" is not a non-null object - JavaScript
the javascript except
ion "is not a non-null object" occurs when an object is expected somewhere and wasn't provided.
... message typeerror: invalid descriptor for property {x} (edge) typeerror: "x" is not a non-null object (firefox) typeerror: property descript
ion must be an object: "x" (chrome) typeerror: invalid value used in weak set (chrome) error type typeerror what went wrong?
...you must provide a proper object in the given situat
ion.
... examples property descriptor expected when methods like object.create() or object.defineproperty() and object.defineproperties() are used, the opt
ional descriptor parameter expects a property descriptor object.
SyntaxError: missing variable name - JavaScript
the javascript except
ion "missing variable name" occurs way too often as naming things is so hard.
... check to ensure the prev
ious lines / declarat
ion does not end with a comma instead of a semi-colon.
...sorry :( var debugger = "whoop"; // syntaxerror: missing variable name declaring multiple variables pay special attent
ion to commas when declaring multiple variables.
... var x, y = "foo", var x, = "foo" var first = document.getelementbyid('one'), var second = document.getelementbyid('two'), // syntaxerror: missing variable name the fixed vers
ion: var x, y = "foo"; var x = "foo"; var first = document.getelementbyid('one'); var second = document.getelementbyid('two'); arrays array literals in javascript need square brackets around the values.
TypeError: invalid 'instanceof' operand 'x' - JavaScript
the javascript except
ion "invalid 'instanceof' operand" occurs when the right hand side operands of the instanceof operator isn't used with a constructor object, i.e.
... message typeerror: invalid 'instanceof' operand "x" (firefox) typeerror: "x" is not a funct
ion (firefox) typeerror: right-hand side of 'instanceof' is not an object (chrome) typeerror: right-hand side of 'instanceof' is not callable (chrome) error type typeerror what went wrong?
... examples instanceof vs typeof "test" instanceof ""; // typeerror: invalid 'instanceof' operand "" 42 instanceof 0; // typeerror: invalid 'instanceof' operand 0 funct
ion foo() {} var f = foo(); // foo() is called and returns undefined var x = new foo(); x instanceof f; // typeerror: invalid 'instanceof' operand f x instanceof x; // typeerror: x is not a funct
ion to fix these errors, you will either need to replace the instanceof operator with the typeof operator, or to make sure you use the funct
ion name, instead of the result of its evaluat
ion.
... typeof "test" == "string"; // true typeof 42 == "number" // true funct
ion foo() {} var f = foo; // do not call foo.
Array.prototype.join() - JavaScript
syntax arr.join([separator]) parameters separator opt
ional specifies a string to separate each pair of adjacent elements of the array.
... descript
ion the string convers
ions of all array elements are joined into one string.
... var a = ['wind', 'water', 'fire']; a.join(); // 'wind,water,fire' a.join(', '); // 'wind, water, fire' a.join(' + '); // 'wind + water + fire' a.join(''); // 'windwaterfire' joining an array-like object the following example joins array-like object (arguments), by calling funct
ion.prototype.call on array.prototype.join.
... funct
ion f(a, b, c) { var s = array.prototype.join.call(arguments); console.log(s); // '1,a,true' } f(1, 'a', true); //expected output: "1,a,true" specificat
ions specificat
ion ecmascript (ecma-262)the definit
ion of 'array.prototype.join' in that specificat
ion.
Array.prototype.pop() - JavaScript
descript
ion the pop method removes the last element from an array and returns that value to the caller.
... pop is intent
ionally generic; this method can be called or applied to objects resembling arrays.
... array.prototype.shift() has similar behav
ior to pop, but applied to the first element in an array.
... var myfish = {0:'angel', 1:'clown', 2:'mandarin', 3:'sturgeon', length: 4}; var popped = array.prototype.pop.call(myfish); //same syntax for using apply( ) console.log(myfish); // {0:'angel', 1:'clown', 2:'mandarin', length: 3} console.log(popped); // 'sturgeon' specificat
ions specificat
ion ecmascript (ecma-262)the definit
ion of 'array.prototype.pop' in that specificat
ion.
Array.prototype.toString() - JavaScript
descript
ion the array object overrides the tostring method of object.
... javascript calls the tostring method automatically when an array is to be represented as a text value or when an array is referred to in a string concatenat
ion.
... ecmascript 5 semantics starting in javascript 1.8.5 (firefox 4), and consistent with ecmascript 5th edit
ion semantics, the tostring() method is generic and can be used with any object.
... examples using tostring const array1 = [1, 2, 'a', '1a']; console.log(array1.tostring()); // expected output: "1,2,a,1a" specificat
ions specificat
ion ecmascript (ecma-262)the definit
ion of 'array.prototype.tostring' in that specificat
ion.
Atomics.store() - JavaScript
the static atomics.store() method stores a given value at the given posit
ion in the array and returns that value.
... index the posit
ion in the typedarray to store a value in.
... except
ions throws a typeerror, if typedarray is not one of the allowed integer types.
... examples using store() var sab = new sharedarraybuffer(1024); var ta = new uint8array(sab); atomics.store(ta, 0, 12); // 12 specificat
ions specificat
ion ecmascript (ecma-262)the definit
ion of 'atomics.store' in that specificat
ion.
Boolean.prototype.toString() - JavaScript
descript
ion the boolean object overrides the tostring method of the object object; it does not inherit object.prototype.tostring().
... for boolean objects, the tostring method returns a string representat
ion of the object.
... javascript calls the tostring() method automatically when a boolean is to be represented as a text value or when a boolean is referred to in a string concatenat
ion.
... examples using tostring() in the following code, flag.tostring() returns "true": var flag = new boolean(true); var myvar = flag.tostring(); specificat
ions specificat
ion ecmascript (ecma-262)the definit
ion of 'boolean.prototype.tostring' in that specificat
ion.
Date.prototype.setUTCMonth() - JavaScript
dayvalue opt
ional.
... descript
ion if you do not specify the dayvalue parameter, the value returned from the getutcdate() method is used.
... if a parameter you specify is outside of the expected range, setutcmonth() attempts to update the date informat
ion in the date object accordingly.
... examples using setutcmonth() var thebigday = new date(); thebigday.setutcmonth(11); specificat
ions specificat
ion ecmascript (ecma-262)the definit
ion of 'date.prototype.setutcmonth' in that specificat
ion.
Date.prototype.setUTCSeconds() - JavaScript
msvalue opt
ional.
... descript
ion if you do not specify the msvalue parameter, the value returned from the getutcmilliseconds() method is used.
... if a parameter you specify is outside of the expected range, setutcseconds() attempts to update the date informat
ion in the date object accordingly.
... examples using setutcseconds() var thebigday = new date(); thebigday.setutcseconds(20); specificat
ions specificat
ion ecmascript (ecma-262)the definit
ion of 'date.prototype.setutcseconds' in that specificat
ion.
Generator - JavaScript
the generator object is returned by a generator funct
ion and it conforms to both the iterable protocol and the iterator protocol.
...instead, a generator instance can be returned from a generator funct
ion: funct
ion* generator() { yield 1; yield 2; yield 3; } const gen = generator(); // "generator { }" instance methods generator.prototype.next() returns a value yielded by the yield express
ion.
... examples an infinite iterator funct
ion* infinite() { let index = 0; while (true) { yield index++; } } const generator = infinite(); // "generator { }" console.log(generator.next().value); // 0 console.log(generator.next().value); // 1 console.log(generator.next().value); // 2 // ...
... specificat
ions specificat
ion ecmascript (ecma-262)the definit
ion of 'generator objects' in that specificat
ion.
InternalError - JavaScript
example cases are mostly when something is too large, e.g.: "too many switch cases", "too many parentheses in regular express
ion", "array initializer too large", "too much recurs
ion".
... examples too much recurs
ion this recursive funct
ion runs 10 times, as per the exit condit
ion.
... funct
ion loop(x) { if (x >= 10) // "x >= 10" is the exit condit
ion return; // do stuff loop(x + 1); // the recursive call } loop(0); setting this condit
ion to an extremely high value, won't work: funct
ion loop(x) { if (x >= 1000000000000) return; // do stuff loop(x + 1); } loop(0); // internalerror: too much recurs
ion for more informat
ion, see internalerror: too much recurs
ion.
... specificat
ions not part of any standard.
Intl.Collator.prototype.compare() - JavaScript
descript
ion the compare getter funct
ion returns a number indicating how string1 and string2 compare to each other according to the sort order of this collator object: a negative value if string1 comes before string2; a positive value if string1 comes after string2; 0 if they are considered equal.
... examples using compare for array sort use the compare getter funct
ion for sorting arrays.
... note that the funct
ion is bound to the collator from which it was obtained, so it can be passed directly to array.prototype.sort().
... var a = ['offenbach', 'Österreich', 'odenwald']; var collator = new intl.collator('de-u-co-phonebk'); a.sort(collator.compare); console.log(a.join(', ')); // → "odenwald, Österreich, offenbach" using compare for array search use the compare getter funct
ion for finding matching strings in arrays: var a = ['congrès', 'congres', 'assemblée', 'poisson']; var collator = new intl.collator('fr', { usage: 'search', sensitivity: 'base' }); var s = 'congres'; var matches = a.filter(v => collator.compare(v, s) === 0); console.log(matches.join(', ')); // → "congrès, congres" specificat
ions specificat
ion ecmascript internat
ionalizat
ion api (ecma-402)the definit
ion of 'intl.collator.prototype.compare' in that specificat
ion.
Intl.DisplayNames.prototype.of() - JavaScript
the of() method receives a code and returns a string based on the locale and opt
ions provided when instantiating intl.displaynames.
... syntax displaynames.of(code); parameters code the code to provide depends on the type: if the type is "reg
ion", code should be either an iso-3166 two letters reg
ion code, or a three digits un m49 geographic reg
ions.
... if the type is "language", code should be a languagecode ["-" scriptcode] ["-" reg
ioncode ] *("-" variant ) subsequence of the unicode_language_id grammar in uts 35's unicode language and locale identifiers grammar.
... examples using the of method let reg
ionnames = new intl.displaynames(['en'], {type: 'reg
ion'}); reg
ionnames.of('419'); // "latin america" let languagenames = new intl.displaynames(['en'], {type: 'language'}); languagenames.of('fr'); // "french" let currencynames = new intl.displaynames(['en'], {type: 'currency'}); currencynames.of('eur'); // "euro" specificat
ions specificat
ion intl.displaynamesthe definit
ion of 'of()' in that specificat
ion.
Intl.ListFormat.prototype.format() - JavaScript
the format() method returns a string with a language-specific representat
ion of the list.
... syntax listformat.format([list]); parameters list an iterable object, such as an array return value a language-specific formatted string representing the elements of the list descript
ion the format() method returns a string that has been formatted based on parameters provided in the intl.listformat object.
... the locales and opt
ions parameters customize the behav
ior of format() and let applicat
ions specify the language convent
ions that should be used to format the list.
... const list = ['motorcycle', 'bus', 'car']; console.log(new intl.listformat('en-gb', { style: 'long', type: 'conjunct
ion' }).format(list)); // > motorcycle, bus and car console.log(new intl.listformat('en-gb', { style: 'short', type: 'disjunct
ion' }).format(list)); // > motorcycle, bus or car console.log(new intl.listformat('en-gb', { style: 'narrow', type: 'unit' }).format(list)); // > motorcycle bus car specificat
ions specificat
ion intl.listformatthe definit
ion of 'format()' in that specificat
ion.
Intl.ListFormat.prototype.formatToParts() - JavaScript
the intl.listformat.prototype.formattoparts() method returns an array of objects representing the different components that can be used to format a list of values in a locale-aware fash
ion.
... descript
ion whereas intl.listformat.prototype.format() returns a string being the formated vers
ion of the list (according to the given locale and style opt
ions), formattoparts() returns an array of the different components of the formated string.
... the locale and style opt
ions used for formatting are given when constructing the intl.listformat instance.
... examples using formattoparts const fruits = ['apple', 'orange', 'pineapple']; const mylistformat = new intl.listformat('en-gb', { style: 'long', type: 'conjunct
ion' }); console.table(mylistformat.formattoparts(fruits)); // [ // { "type": "element", "value": "apple" }, // { "type": "literal", "value": ", " }, // { "type": "element", "value": "orange" }, // { "type": "literal", "value": ", and " }, // { "type": "element", "value": "pineapple" } // ] specificat
ions specificat
ion intl.listformatthe definit
ion of 'formattoparts()' in that specificat
ion.
Intl.Locale() constructor - JavaScript
syntax new intl.locale(tag [, opt
ions]) parameters tag the unicode locale identifier string.
... opt
ions an object that contains configurat
ion for the locale.
... examples basic usage at its very simplest, the intl.locale constructor takes a locale identifier string as its argument: let us = new intl.locale('en-us'); using the locale constructor with an opt
ions object the constructor also takes an opt
ional configurat
ion object argument, which can contain any of several extens
ion types.
... for example, set the hourcycle property of the configurat
ion object to your desired hour cycle type, and then pass it into the constructor: let us12hour = new intl.locale("en-us", {hourcycle: "h12"}); console.log(us12hour.hourcycle); // prints "h12" specificat
ions specificat
ion ecmascript internat
ionalizat
ion api (ecma-402) ...
Intl.Locale.prototype.language - JavaScript
descript
ion language is one of the core features of a locale.
... the unicode specificat
ion treats the language identifier of a locale as the language and the reg
ion together (to make a distict
ion between dialects and variat
ions, e.g.
... let langstr = new intl.locale("en-latn-us"); console.log(langstr.language); // prints "en" overriding language via the configurat
ion object while the language subtag must be specified, the locale constructor takes a configurat
ion object, which can override the language subtag.
... let langobj = new intl.locale("en-latn-us", {language: "es"}); console.log(langobj.language); // prints "es" specificat
ions specificat
ion ecmascript internat
ionalizat
ion api (ecma-402) ...
Intl.Locale.prototype.script - JavaScript
descript
ion a script, sometimes called writing system, is one of the core attributes of a locale.
...there are except
ions to this rule, however, and it is important to indicate the script whenever possible, in order to have a complete unicode language identifier.
... let scriptstr = new intl.locale("en-latn-us"); console.log(scriptstr.script); // prints "latn" setting the script via the configurat
ion object the locale constructor takes a configurat
ion object, which can be used to set the script subtag and property.
... let scriptobj = new intl.locale("fr-fr", {script: "latn"}); console.log(scriptobj.script); // prints "latn" specificat
ions specificat
ion ecmascript internat
ionalizat
ion api (ecma-402) ...
Intl.Locale.prototype.toString() - JavaScript
descript
ion the locale object is a javascript representat
ion of a concept unicode locale identifier.
... informat
ion about a particular locale (language, script, calendar type, etc.) can be encoded in a locale identifier string.
...the tostring method allows locale instances to be provided as an argument to existing intl constructors, serialized in json, or any other context where an exact string representat
ion is useful.
... examples using tostring let mylocale = new intl.locale("fr-latn-fr", {hourcycle: "h24", calendar: "gregory"}); console.log(mylocale.basename); // prints "fr-latn-fr" console.log(mylocale.tostring()); // prints "fr-latn-fr-u-ca-gregory-hc-h24" specificat
ions specificat
ion ecmascript internat
ionalizat
ion api (ecma-402) ...
Intl.RelativeTimeFormat.prototype.formatToParts() - JavaScript
syntax relativetimeformat.formattoparts(value, unit) parameters value numeric value to use in the internat
ionalized relative time message.
... unit unit to use in the relative time internat
ionalized message.
... descript
ion the intl.relativetimeformat.prototype.formattoparts method is a vers
ion of the format method which it returns an array of objects which represent "parts" of the object, separating the formatted number into its consituent parts and separating it from other surrounding text.
...examples using formattoparts const rtf = new intl.relativetimeformat("en", { numeric: "auto" }); // format relative time using the day unit rtf.formattoparts(-1, "day"); // > [{ type: "literal", value: "yesterday"}] rtf.formattoparts(100, "day"); // > [{ type: "literal", value: "in " }, // > { type: "integer", value: "100", unit: "day" }, // > { type: "literal", value: " days" }] specificat
ions specificat
ion status comment ecmascript internat
ionalizat
ion api (ecma-402)the definit
ion of 'relativetimeformat.formattoparts()' in that specificat
ion.
Math.PI - JavaScript
the math.pi property represents the rat
io of the circumference of a circle to its diameter, approximately 3.14159: math.pi=π≈3.14159\mathtt{\mi{math.pi}} = \pi \approx 3.14159 the source for this interactive example is stored in a github repository.
... property attributes of math.pi writable no enumerable no configurable no descript
ion because pi is a static property of math, you always use it as math.pi, rather than as a property of a math object you created (math is not a constructor).
... examples using math.pi the following funct
ion uses math.pi to calculate the circumference of a circle with a passed radius.
... funct
ion calculatecircumference(radius) { return math.pi * (radius + radius); } calculatecircumference(1); // 6.283185307179586 specificat
ions specificat
ion ecmascript (ecma-262)the definit
ion of 'math.pi' in that specificat
ion.
Math.abs() - JavaScript
the math.abs() funct
ion returns the absolute value of a number, that is math.abs(x)=|x|={xifx>00ifx=0-xifx<0{\mathtt{\operatorname{math.abs}(z)}} = {|z|} = \begin{cases} x & \text{if} \quad x \geq 0 \\ x & \text{if} \quad x < 0 \end{cases} the source for this interactive example is stored in a github repository.
... descript
ion because abs() is a static method of math, you always use it as math.abs(), rather than as a method of a math object you created (math is not a constructor).
... examples behav
ior of math.abs() passing an empty object, an array with more than one member, a non-numeric string or undefined/empty variable returns nan.
... math.abs('-1'); // 1 math.abs(-2); // 2 math.abs(null); // 0 math.abs(''); // 0 math.abs([]); // 0 math.abs([2]); // 2 math.abs([1,2]); // nan math.abs({}); // nan math.abs('string'); // nan math.abs(); // nan specificat
ions specificat
ion ecmascript (ecma-262)the definit
ion of 'math.abs' in that specificat
ion.
Math.acosh() - JavaScript
the math.acosh() funct
ion returns the hyperbolic arc-cosine of a number, that is ∀x≥1,math.acosh(x)=arcosh(x)= the unique y≥0such thatcosh(y)=x\forall x \geq 1, \mathtt{\operatorname{math.acosh}(x)} = \operatorname{arcosh}(x) = \text{ the unique } \; y \geq 0 \; \text{such that} \; \cosh(y) = x the source for this interactive example is stored in a github repository.
... descript
ion because acosh() is a static method of math, you always use it as math.acosh(), rather than as a method of a math object you created (math is no constructor).
... polyfill for all x≥1x \geq 1, we have arcosh(x)=ln(x+x2-1)\operatorname {arcosh} (x) = \ln \left(x + \sqrt{x^{2} - 1} \right) and so this can be emulated with the following funct
ion: math.acosh = math.acosh || funct
ion(x) { return math.log(x + math.sqrt(x * x - 1)); }; examples using math.acosh() math.acosh(-1); // nan math.acosh(0); // nan math.acosh(0.5); // nan math.acosh(1); // 0 math.acosh(2); // 1.3169578969248166 for values less than 1 math.acosh() returns nan.
... specificat
ions specificat
ion ecmascript (ecma-262)the definit
ion of 'math.acosh' in that specificat
ion.
Math.asinh() - JavaScript
the math.asinh() funct
ion returns the hyperbolic arcsine of a number, that is math.asinh(x)=arsinh(x)= the unique ysuch thatsinh(y)=x\mathtt{\operatorname{math.asinh}(x)} = \operatorname{arsinh}(x) = \text{ the unique } \; y \; \text{such that} \; \sinh(y) = x the source for this interactive example is stored in a github repository.
... descript
ion because asinh() is a static method of math, you always use it as math.asinh(), rather than as a method of a math object you created (math is not a constructor).
... polyfill math.asinh can be emulated with the following funct
ion: if (!math.asinh) math.asinh = funct
ion(x) { var absx = math.abs(x), w if (absx < 3.725290298461914e-9) // |x| < 2^-28 return x if (absx > 268435456) // |x| > 2^28 w = math.log(absx) + math.ln2 else if (absx > 2) // 2^28 >= |x| > 2 w = math.log(2 * absx + 1 / (math.sqrt(x * x + 1) + absx)) else var t = x * x, w = math.log1p(absx + t / (1 + math.sqrt(1 + t))) return x > 0 ?
... examples using math.asinh() math.asinh(1); // 0.881373587019543 math.asinh(0); // 0 specificat
ions specificat
ion ecmascript (ecma-262)the definit
ion of 'math.asinh' in that specificat
ion.
Math.atan() - JavaScript
the math.atan() funct
ion returns the arctangent (in radians) of a number, that is math.atan(x)=arctan(x)= the unique y∊[-π2;π2]such thattan(y)=x\mathtt{\operatorname{math.atan}(x)} = \arctan(x) = \text{ the unique } \; y \in \left[-\frac{\pi}{2}; \frac{\pi}{2}\right] \, \text{such that} \; \tan(y) = x the source for this interactive example is stored in a github repository.
... descript
ion the math.atan() method returns a numeric value between -π2-\frac{\pi}{2} and π2\frac{\pi}{2} radians.
...in this case, math.atan2() with 0 as the second argument may be a better solut
ion.
... specificat
ions specificat
ion ecmascript (ecma-262)the definit
ion of 'math.atan' in that specificat
ion.
Math.atanh() - JavaScript
the math.atanh() funct
ion returns the hyperbolic arctangent of a number, that is ∀x∊(-1,1),math.atanh(x)=arctanh(x)= the unique ysuch thattanh(y)=x\forall x \in \left( -1, 1 \right), \mathtt{\operatorname{math.atanh}(x)} = \operatorname{arctanh}(x) = \text{ the unique } \; y \; \text{such that} \; \tanh(y) = x the source for this interactive example is stored in a github repository.
... descript
ion because atanh() is a static method of math, you always use it as math.atanh(), rather than as a method of a math object you created (math is not a constructor).
... polyfill for |x|<1\left|x\right| < 1, we have artanh(x)=12ln(1+x1-x)\operatorname {artanh} (x) = \frac{1}{2}\ln \left( \frac{1 + x}{1 - x} \right) so this can be emulated by the following funct
ion: math.atanh = math.atanh || funct
ion(x) { return math.log((1+x)/(1-x)) / 2; }; examples using math.atanh() math.atanh(-2); // nan math.atanh(-1); // -infinity math.atanh(0); // 0 math.atanh(0.5); // 0.5493061443340548 math.atanh(1); // infinity math.atanh(2); // nan for values greater than 1 or less than -1, nan is returned.
... specificat
ions specificat
ion ecmascript (ecma-262)the definit
ion of 'math.atanh' in that specificat
ion.
Math.cbrt() - JavaScript
the math.cbrt() funct
ion returns the cube root of a number, that is math.cbrt(x)=x3=the uniqueysuch thaty3=x\mathtt{math.cbrt(x)} = \sqrt[3]{x} = \text{the unique} \; y \; \text{such that} \; y^3 = x the source for this interactive example is stored in a github repository.
... descript
ion because cbrt() is a static method of math, you always use it as math.cbrt(), rather than as a method of a math object you created (math is not a constructor).
... polyfill for all x≥0x \geq 0, have x3=x1/3\sqrt[3]{x} = x^{1/3} so this can be emulated by the following funct
ion: if (!math.cbrt) { math.cbrt = (funct
ion(pow) { return funct
ion cbrt(x){ // ensure negative numbers remain negative: return x < 0 ?
... -pow(-x, 1/3) : pow(x, 1/3); }; })(math.pow); // localize math.pow to increase efficiency } examples using math.cbrt() math.cbrt(nan); // nan math.cbrt(-1); // -1 math.cbrt(-0); // -0 math.cbrt(-infinity); // -infinity math.cbrt(0); // 0 math.cbrt(1); // 1 math.cbrt(infinity); // infinity math.cbrt(null); // 0 math.cbrt(2); // 1.2599210498948732 specificat
ions specificat
ion ecmascript (ecma-262)the definit
ion of 'math.cbrt' in that specificat
ion.
Math.floor() - JavaScript
the math.floor() funct
ion returns the largest integer less than or equal to a given number.
... descript
ion because floor() is a static method of math, you always use it as math.floor(), rather than as a method of a math object you created (math is not a constructor).
... */ funct
ion decimaladjust(type, value, exp) { // if the exp is undefined or zero...
... 1); // 50 round10(-55.55, -1); // -55.5 round10(-55.551, -1); // -55.6 round10(-55, 1); // -50 round10(-55.1, 1); // -60 // floor floor10(55.59, -1); // 55.5 floor10(59, 1); // 50 floor10(-55.51, -1); // -55.6 floor10(-51, 1); // -60 // ceil ceil10(55.51, -1); // 55.6 ceil10(51, 1); // 60 ceil10(-55.59, -1); // -55.5 ceil10(-59, 1); // -50 specificat
ions specificat
ion ecmascript (ecma-262)the definit
ion of 'math.floor' in that specificat
ion.
Math.log10() - JavaScript
the math.log10() funct
ion returns the base 10 logarithm of a number, that is ∀x>0,math.log10(x)=log10(x)=the uniqueysuch that10y=x\forall x > 0, \mathtt{\operatorname{math.log10}(x)} = \log_10(x) = \text{the unique} \; y \; \text{such that} \; 10^y = x the source for this interactive example is stored in a github repository.
... descript
ion if the value of x is less than 0, the return value is always nan.
... this funct
ion is the equivalent of math.log(x) / math.log(10).
... examples using math.log10() math.log10(2); // 0.3010299956639812 math.log10(1); // 0 math.log10(0); // -infinity math.log10(-2); // nan math.log10(100000); // 5 polyfill this can be emulated with the following funct
ion: math.log10 = math.log10 || funct
ion(x) { return math.log(x) * math.log10e; }; specificat
ions specificat
ion ecmascript (ecma-262)the definit
ion of 'math.log10' in that specificat
ion.
Math.pow() - JavaScript
the math.pow() funct
ion returns the base to the exponent power, that is, baseexponent.
... descript
ion the math.pow() funct
ion returns the base to the exponent power, that is, baseexponent, the base and the exponent are in decimal numeral system.
... examples using math.pow() // simple math.pow(7, 2); // 49 math.pow(7, 3); // 343 math.pow(2, 10); // 1024 // fract
ional exponents math.pow(4, 0.5); // 2 (square root of 4) math.pow(8, 1/3); // 2 (cube root of 8) math.pow(2, 0.5); // 1.4142135623730951 (square root of 2) math.pow(2, 1/3); // 1.2599210498948732 (cube root of 2) // signed exponents math.pow(7, -2); // 0.02040816326530612 (1/49) math.pow(8, -1/3); // 0.5 // signed bases math.pow(-7, 2); // 49 (squares are positive) math.pow(-7, 3); // -343 (cubes can be negative) math.pow(-7, ...
...0.5); // nan (negative numbers don't have a real square root) // due to "even" and "odd" roots laying close to each other, // and limits in the floating number precis
ion, // negative bases with fract
ional exponents always return nan math.pow(-7, 1/3); // nan specificat
ions specificat
ion ecmascript (ecma-262)the definit
ion of 'math.pow' in that specificat
ion.
Math.tan() - JavaScript
the math.tan() funct
ion returns the tangent of a number.
... descript
ion the math.tan() method returns a numeric value that represents the tangent of the angle.
... examples using math.tan() math.tan(1); // 1.5574077246549023 because the math.tan() funct
ion accepts radians, but it is often easier to work with degrees, the following funct
ion accepts a value in degrees, converts it to radians and returns the tangent.
... funct
ion gettandeg(deg) { var rad = deg * math.pi/180; return math.tan(rad); } specificat
ions specificat
ion ecmascript (ecma-262)the definit
ion of 'math.tan' in that specificat
ion.
Math.tanh() - JavaScript
the math.tanh() funct
ion returns the hyperbolic tangent of a number, that is tanhx=sinhxcoshx=ex-e-xex+e-x=e2x-1e2x+1\tanh x = \frac{\sinh x}{\cosh x} = \frac {e^x - e^{-x}} {e^x + e^{-x}} = \frac{e^{2x} - 1}{e^{2x}+1} syntax math.tanh(x) parameters x a number.
... descript
ion because tanh() is a static method of math, you always use it as math.tanh(), rather than as a method of a math object you created (math is not a constructor).
... polyfill this can be emulated with the help of the math.exp() funct
ion: math.tanh = math.tanh || funct
ion(x){ var a = math.exp(+x), b = math.exp(-x); return a == infinity ?
...-1 : (a - b) / (a + b); } examples using math.tanh() math.tanh(0); // 0 math.tanh(infinity); // 1 math.tanh(1); // 0.7615941559557649 specificat
ions specificat
ion ecmascript (ecma-262)the definit
ion of 'math.tanh' in that specificat
ion.
Number.MIN_SAFE_INTEGER - JavaScript
property attributes of number.min_safe_integer writable no enumerable no configurable no descript
ion the min_safe_integer constant has a value of -9007199254740991 (-9,007,199,254,740,991 or about -9 quadrill
ion).
... the reasoning behind that number is that javascript uses double-precis
ion floating-point format numbers as specified in ieee 754 and can only safely represent numbers between -(253 - 1) and 253 - 1.
... see number.issafeinteger() for more informat
ion.
... examples using min_safe_integer number.min_safe_integer // -9007199254740991 -(math.pow(2, 53) - 1) // -9007199254740991 specificat
ions specificat
ion ecmascript (ecma-262)the definit
ion of 'number.min_safe_integer' in that specificat
ion.
Number.parseFloat() - JavaScript
if this argument is not a string, then it is converted to one using the tostring abstract operat
ion.
... polyfill if (number.parsefloat === undefined) { number.parsefloat = parsefloat; } examples number.parsefloat vs parsefloat this method has the same funct
ionality as the global parsefloat() funct
ion: number.parsefloat === parsefloat; // true this method is also part of ecmascript 2015.
... (its purpose is modularizat
ion of globals.) see parsefloat() for more detail and examples.
... specificat
ions specificat
ion ecmascript (ecma-262)the definit
ion of 'number.parsefloat' in that specificat
ion.
Number.parseInt() - JavaScript
if this argument is not a string, then it is converted to one using the tostring abstract operat
ion.
... radix opt
ional an integer between 2 and 36 that represents the radix (the base in mathematical numeral systems) of the string.
... polyfill if (number.parseint === undefined) { number.parseint = window.parseint } examples number.parseint vs parseint this method has the same funct
ionality as the global parseint() funct
ion: number.parseint === parseint // true and is part of ecmascript 2015 (its purpose is modularizat
ion of globals).
... specificat
ions specificat
ion ecmascript (ecma-262)the definit
ion of 'number.parseint' in that specificat
ion.
Object.getOwnPropertyNames() - JavaScript
descript
ion object.getownpropertynames() returns an array whose elements are strings corresponding to the enumerable and non-enumerable properties found directly in a given object obj.
...// logs ["0", "1", "2"] // logging property names and values using array.foreach object.getownpropertynames(obj).foreach( funct
ion (val, idx, array) { console.log(val + ' -> ' + obj[val]); } ); // logs // 0 -> a // 1 -> b // 2 -> c // non-enumerable property var my_obj = object.create({}, { getfoo: { value: funct
ion() { return this.foo; }, enumerable: false } }); my_obj.foo = 1; console.log(object.getownpropertynames(my_obj).sort()); // logs ["foo", "getfoo"] if you want only the enumerable properties,...
... items on the prototype chain are not listed: funct
ion parentclass() {} parentclass.prototype.inheritedmethod = funct
ion() {}; funct
ion childclass() { this.prop = 5; this.method = funct
ion() {}; } childclass.prototype = new parentclass; childclass.prototype.prototypemethod = funct
ion() {}; console.log( object.getownpropertynames( new childclass() // ["prop", "method"] ) ); get non-enumerable properties only this uses the array.prototype.filter() funct
ion to remove the enumerable keys (obtained with object.keys()) from a list of all keys (obtained with object.getownpropertynames()...
... var target = myobject; var enum_and_nonenum = object.getownpropertynames(target); var enum_only = object.keys(target); var nonenum_only = enum_and_nonenum.filter(funct
ion(key) { var indexinenum = enum_only.indexof(key); if (indexinenum == -1) { // not found in enum_only keys, // meaning that the key is non-enumerable, // so return true so we keep this in the filter return true; } else { return false; } }); console.log(nonenum_only); specificat
ions specificat
ion ecmascript (ecma-262)the definit
ion of 'object.getownpropertynames' in that specificat
ion.
Object.is() - JavaScript
descript
ion object.is() determines whether two values are the same value.
...the == operator applies var
ious coerc
ions to both sides (if they are not the same type) before testing for equality (resulting in such behav
ior as "" == false being true), but object.is doesn't coerce either value.
... polyfill if (!object.is) { object.is = funct
ion(x, y) { // samevalue algorithm if (x === y) { // steps 1-5, 7-10 // steps 6.b-6.e: +0 != -0 return x !== 0 || 1 / x === 1 / y; } else { // step 6.a: nan == nan return x !== x && y !== y; } }; } examples using object.is object.is('foo', 'foo'); // true object.is(window, window); // true object.is('foo', 'bar'); // false object.is([], []); // false var foo = { a: 1 }; var bar = { a: 1 }; object.is(foo, foo); // true object.is(foo, bar); // false object.is(...
...null, null); // true // special cases object.is(0, -0); // false object.is(-0, -0); // true object.is(nan, 0/0); // true specificat
ions specificat
ion ecmascript (ecma-262)the definit
ion of 'object.is' in that specificat
ion.
Object.prototype.isPrototypeOf() - JavaScript
in the express
ion "object instanceof afunct
ion", the object prototype chain is checked against afunct
ion.prototype, not against afunct
ion itself.
... descript
ion the isprototypeof() method allows you to check whether or not an object exists within another object's prototype chain.
... examples using isprototypeof this example demonstrates that baz.prototype, bar.prototype, foo.prototype and object.prototype exist in the prototype chain for object baz: funct
ion foo() {} funct
ion bar() {} funct
ion baz() {} bar.prototype = object.create(foo.prototype); baz.prototype = object.create(bar.prototype); var baz = new baz(); console.log(baz.prototype.isprototypeof(baz)); // true console.log(bar.prototype.isprototypeof(baz)); // true console.log(foo.prototype.isprototypeof(baz)); // true console.log(object.prototype.isprototypeof(baz)); // true isprototypeof() method, along with the instanceof operator particularly comes in handy if you have code that can only funct
ion when dealing with objects descended from a specific prototype chain, e.g., to guarantee that certain meth...
... for example, check if baz object descends from foo.prototype: if (foo.prototype.isprototypeof(baz)) { // do something safe } specificat
ions specificat
ion ecmascript (ecma-262)the definit
ion of 'object.prototype.isprototypeof' in that specificat
ion.
Object.prototype.propertyIsEnumerable() - JavaScript
descript
ion every object has a propertyisenumerable method.
... this method can determine whether the specified property in an object can be enumerated by a for...in loop, with the except
ion of properties inherited through the prototype chain.
...inherited properties var a = []; a.propertyisenumerable('constructor'); // returns false funct
ion firstconstructor() { this.property = 'is not enumerable'; } firstconstructor.prototype.firstmethod = funct
ion() {}; funct
ion secondconstructor() { this.method = funct
ion() { return 'is enumerable'; }; } secondconstructor.prototype = new firstconstructor; secondconstructor.prototype.constructor = secondconstructor; var o = new secondconstructor(); o.arbitraryproperty = 'is enumerable'; o...
...'property'); // returns true // these return false as they are on the prototype which // propertyisenumerable does not consider (even though the last two // are iteratable with for-in) o.propertyisenumerable('prototype'); // returns false (as of js 1.8.1/ff3.6) o.propertyisenumerable('constructor'); // returns false o.propertyisenumerable('firstmethod'); // returns false specificat
ions specificat
ion ecmascript (ecma-262)the definit
ion of 'object.prototype.propertyisenumerable' in that specificat
ion.
Object.prototype.toLocaleString() - JavaScript
descript
ion object's tolocalestring returns the result of calling tostring().
... this funct
ion is provided to give objects a generic tolocalestring method, even though not all may use it.
... objects overriding tolocalestring array: array.prototype.tolocalestring() number: number.prototype.tolocalestring() date: date.prototype.tolocalestring() typedarray: typedarray.prototype.tolocalestring() bigint: bigint.prototype.tolocalestring() examples array tolocalestring() override on array objects, tolocalestring() can be used to print array values as a string, opt
ionally with locale-specific identifiers (such as currency symbols) appended to them: for example: const testarray = [4, 7, 10]; let europrices = testarray.tolocalestring('fr', { style: 'currency', currency: 'eur'}); // "4,00 €,7,00 €,10,00 €" date tolocalestring() override on date objects, tolocalestring() is used to print out date displays more suitable for specific locales: for exampl...
...with the correct separators: for example: const testnumber = 2901234564; // "2901234564" let denumber = testnumber.tolocalestring('de'); // "2.901.234.564" let frnumber = testnumber.tolocalestring('fr'); // "2 901 234 564" specificat
ions specificat
ion ecmascript (ecma-262)the definit
ion of 'object.prototype.tolocalestring' in that specificat
ion.
handler.deleteProperty() - JavaScript
syntax const p = new proxy(target, { deleteproperty: funct
ion(target, property) { } }); parameters the following parameters are passed to the deleteproperty() method.
... descript
ion the handler.deleteproperty() method is a trap for the delete operator.
... intercept
ions this trap can intercept these operat
ions: property delet
ion: delete proxy[foo] and delete proxy.foo reflect.deleteproperty() invariants if the following invariants are v
iolated, the proxy will throw a typeerror: a property cannot be deleted, if it exists as a non-configurable own property of the target object.
... const p = new proxy({}, { deleteproperty: funct
ion(target, prop) { if (prop in target){ delete target[prop] console.log('property removed: ' + prop) return true } else { console.log('property not found: ' + prop) return false } } }) let result p.a = 10 console.log('a' in p) // true result = delete p.a // "property removed: a" console.log(result) // true console.log('a' in p) // false result = delete p.a // "property not found: a" console.log(result) // false specificat
ions specificat
ion ecmascript (ecma-262)the definit
ion of '[[delete]]' in that specificat
ion.
RangeError - JavaScript
descript
ion a rangeerror is thrown when trying to pass a value as an argument to a funct
ion that does not allow a range that includes the value.
... this can be encountered when: passing a value that is not one of the allowed string values to string.prototype.normalize(), or when attempting to create an array of an illegal length with the array constructor, or when passing bad values to the numeric methods number.prototype.toexponential(), number.prototype.tofixed() or number.prototype.toprecis
ion().
... examples using rangeerror (for numeric values) funct
ion check(n) { if( !(n >= -500 && n <= 500) ) { throw new rangeerror("the argument must be between -500 and 500.") } } try { check(2000) } catch(error) { if (error instanceof rangeerror) { // handle the error } } using rangeerror (for non-numeric values) funct
ion check(value) { if(["apple", "banana", "carrot"].includes(value) === false) { ...
... throw new rangeerror('the argument must be an "apple", "banana", or "carrot".') } } try { check("cabbage") } catch(error) { if(error instanceof rangeerror) { // handle the error } } specificat
ions specificat
ion ecmascript (ecma-262)the definit
ion of 'rangeerror' in that specificat
ion.
Reflect.defineProperty() - JavaScript
except
ions a typeerror, if target is not an object.
... descript
ion the reflect.defineproperty method allows precise addit
ion to or modificat
ion of a property on an object.
... examples using reflect.defineproperty() let obj = {} reflect.defineproperty(obj, 'x', {value: 7}) // true obj.x // 7 checking if property definit
ion has been successful with object.defineproperty, which returns an object if successful, or throws a typeerror otherwise, you would use a try...catch block to catch any error that occurred while defining a property.
... ] because reflect.defineproperty returns a boolean success status, you can just use an if...else block here: if (reflect.defineproperty(target, property, attributes)) { // success } else { // failure } specificat
ions specificat
ion ecmascript (ecma-262)the definit
ion of 'reflect.defineproperty' in that specificat
ion.
Reflect.deleteProperty() - JavaScript
it is like the delete operator as a funct
ion.
... except
ions a typeerror, if target is not an object.
... descript
ion the reflect.deleteproperty method allows you to delete a property on an object.
... // true obj // { y: 2 } let arr = [1, 2, 3, 4, 5] reflect.deleteproperty(arr, '3') // true arr // [1, 2, 3, undefined, 5] // returns true if no such property exists reflect.deleteproperty({}, 'foo') // true // returns false if a property is unconfigurable reflect.deleteproperty(object.freeze({foo: 1}), 'foo') // false specificat
ions specificat
ion ecmascript (ecma-262)the definit
ion of 'reflect.deleteproperty' in that specificat
ion.
Reflect.setPrototypeOf() - JavaScript
it sets the prototype (i.e., the internal [[prototype]] property) of a specified object to another object or to null, and returns true if the operat
ion was successful, or false otherwise.
... except
ions a typeerror, if target is not an object or if prototype is neither an object nor null.
... descript
ion the reflect.setprototypeof method changes the prototype (i.e.
...let target = {} let proto = object.create(target) reflect.setprototypeof(target, proto) // false specificat
ions specificat
ion ecmascript (ecma-262)the definit
ion of 'reflect.setprototypeof' in that specificat
ion.
RegExp.prototype.ignoreCase - JavaScript
the ignorecase property indicates whether or not the "i" flag is used with the regular express
ion.
... ignorecase is a read-only property of an individual regular express
ion instance.
... property attributes of regexp.prototype.ignorecase writable no enumerable no configurable yes descript
ion the value of ignorecase is a boolean and true if the "i" flag was used; otherwise, false.
... examples using ignorecase var regex = new regexp('foo', 'i'); console.log(regex.ignorecase); // true specificat
ions specificat
ion ecmascript (ecma-262)the definit
ion of 'regexp.prototype.ignorecase' in that specificat
ion.
RegExp.input ($_) - JavaScript
the non-standard input property is a static property of regular express
ions that contains the string against which a regular express
ion is matched.
... descript
ion the input property is static, it is not a property of an individual regular express
ion object.
... the value of the input property is modified whenever the searched string on the regular express
ion is changed and that string is matching.
... examples using input and $_ var re = /hi/g; re.test('hi there!'); regexp.input; // "hi there!" re.test('foo'); // new test, non-matching regexp.$_; // "hi there!" re.test('hi world!'); // new test, matching regexp.$_; // "hi world!" specificat
ions specificat
ion legacy regexp features in javascript ...
RegExp.leftContext ($`) - JavaScript
the non-standard leftcontext property is a static and read-only property of regular express
ions that contains the substring preceding the most recent match.
... descript
ion the leftcontext property is static, it is not a property of an individual regular express
ion object.
...use the bracket notat
ion for property access.
... examples using leftcontext and $` var re = /world/g; re.test('hello world!'); regexp.leftcontext; // "hello " regexp['$`']; // "hello " specificat
ions specificat
ion legacy regexp features in javascript ...
RegExp.prototype.multiline - JavaScript
the multiline property indicates whether or not the "m" flag is used with the regular express
ion.
... multiline is a read-only property of an individual regular express
ion instance.
... property attributes of regexp.prototype.multiline writable no enumerable no configurable yes descript
ion the value of multiline is a boolean and is true if the "m" flag was used; otherwise, false.
... examples using multiline var regex = new regexp('foo', 'm'); console.log(regex.multiline); // true specificat
ions specificat
ion ecmascript (ecma-262)the definit
ion of 'regexp.prototype.multiline' in that specificat
ion.
RegExp.rightContext ($') - JavaScript
the non-standard rightcontext property is a static and read-only property of regular express
ions that contains the substring following the most recent match.
... descript
ion the rightcontext property is static, it is not a property of an individual regular express
ion object.
...use the bracket notat
ion for property access.
... examples using rightcontext and $' var re = /hello/g; re.test('hello world!'); regexp.rightcontext; // " world!" regexp["$'"]; // " world!" specificat
ions specificat
ion legacy regexp features in javascript ...
RegExp.prototype.toString() - JavaScript
the tostring() method returns a string representing the regular express
ion.
... descript
ion the regexp object overrides the tostring() method of the object object; it does not inherit object.prototype.tostring().
... for regexp objects, the tostring() method returns a string representat
ion of the regular express
ion.
... examples using tostring() the following example displays the string value of a regexp object: var myexp = new regexp('a+b+c'); console.log(myexp.tostring()); // logs '/a+b+c/' var foo = new regexp('bar', 'g'); console.log(foo.tostring()); // logs '/bar/g' empty regular express
ions and escaping starting with ecmascript 5, an empty regular express
ion returns the string "/(?:)/" and line terminators such as "\n" are escaped: new regexp().tostring(); // "/(?:)/" new regexp('\n').tostring() === '/\n/'; // true, pr
ior to es5 new regexp('\n').tostring() === '/\\n/'; // true, starting with es5 specificat
ions specificat
ion ecmascript (ecma-262)the definit
ion of 'regexp.prototype.tostring' in that specificat
ion.
String.prototype.anchor() - JavaScript
also, the html specificat
ion no longer allows the <a> element to have a name attribute, so this method doesn't even create valid markup.
... return value a string beginning with an <a name="name"> start tag, then the text str, and then an </a> end tag descript
ion don't use this method.
...also, the html specificat
ion no longer allows the <a> element to have a name attribute, so this method doesn't even create valid markup.
... examples using anchor() var mystring = 'table of contents'; document.body.innerhtml = mystring.anchor('contents_anchor'); will output the following html: <a name="contents_anchor">table of contents</a> specificat
ions specificat
ion ecmascript (ecma-262)the definit
ion of 'string.prototype.anchor' in that specificat
ion.
String.prototype.endsWith() - JavaScript
length opt
ional if provided, it is used as the length of str.
... descript
ion this method lets you determine whether or not a string ends with another string.
... polyfill this method has been added to the ecmascript 6 specificat
ion and may not be available in all javascript implementat
ions yet.
... however, you can polyfill string.prototype.endswith() with the following snippet: if (!string.prototype.endswith) { string.prototype.endswith = funct
ion(search, this_len) { if (this_len === undefined || this_len > this.length) { this_len = this.length; } return this.substring(this_len - search.length, this_len) === search; }; } examples using endswith() let str = 'to be, or not to be, that is the quest
ion.' console.log(str.endswith('quest
ion.')) // true console.log(str.endswith('to be')) // false console.log(str.endswith('to be', 19)) // true specificat
ions specificat
ion ecmascript (ecma-262)the definit
ion of 'string.prototype.endswith' in that specificat
ion.
String.fromCharCode() - JavaScript
descript
ion this method returns a string and not a string object.
...a valid combinat
ion of two surrogates used to represent a supplementary character is known as a surrogate pair.
... while there is a mathematical relat
ionship between the supplementary code point value (e.g.
...a surrogate pair): string.fromcharcode(0xd83c, 0xdf03); // code point u+1f303 "night with string.fromcharcode(55356, 57091); // stars" == "\ud83c\udf03" string.fromcharcode(0xd834, 0xdf06, 0x61, 0xd834, 0xdf07); // "\ud834\udf06a\ud834\udf07" specificat
ions specificat
ion ecmascript (ecma-262)the definit
ion of 'string.fromcharcode' in that specificat
ion.
String.fromCodePoint() - JavaScript
except
ions a rangeerror is thrown if an invalid unicode code point is given (e.g.
... descript
ion this method returns a string (and not a string object).
... use the code below for a polyfill: if (!string.fromcodepoint) (funct
ion(stringfromcharcode) { var fromcodepoint = funct
ion(_) { var codeunits = [], codelen = 0, result = ""; for (var index=0, len = arguments.length; index !== len; ++index) { var codepoint = +arguments[index]; // correctly handles all cases including `nan`, `-infinity`, `+infinity` // the surrounding `!(...)` is required to correctly handle `nan` cases // the (codepoint>>>0) === c...
...d83c, 0xdf03); // code point u+1f303 "night with string.fromcharcode(55356, 57091); // stars" == "\ud83c\udf03" string.fromcodepoint(), on the other hand, can return 4-byte supplementary characters, as well as the more common 2-byte bmp characters, by specifying their code point (which is equivalent to the utf-32 code unit): string.fromcodepoint(0x1f303); // or 127747 in decimal specificat
ions specificat
ion ecmascript (ecma-262)the definit
ion of 'string.fromcodepoint' in that specificat
ion.
String.prototype.repeat() - JavaScript
except
ions rangeerror: repeat count must be non-negative.
... polyfill this method has been added to the ecmascript 2015 specificat
ion and may not be available in all javascript implementat
ions yet.
... however, you can polyfill string.prototype.repeat() with the following snippet: if (!string.prototype.repeat) { string.prototype.repeat = funct
ion(count) { 'use strict'; if (this == null) throw new typeerror('can\'t convert ' + this + ' to object'); var str = '' + this; // to convert string to integer.
... return str; } } examples using repeat 'abc'.repeat(-1) // rangeerror 'abc'.repeat(0) // '' 'abc'.repeat(1) // 'abc' 'abc'.repeat(2) // 'abcabc' 'abc'.repeat(3.5) // 'abcabcabc' (count will be converted to integer) 'abc'.repeat(1/0) // rangeerror ({ tostring: () => 'abc', repeat: string.prototype.repeat }).repeat(2) // 'abcabc' (repeat() is a generic method) specificat
ions specificat
ion ecmascript (ecma-262)the definit
ion of 'string.prototype.repeat' in that specificat
ion.
String.prototype.toUpperCase() - JavaScript
except
ions typeerror when called on null or undefined, for example, string.prototype.touppercase.call(undefined).
... descript
ion the touppercase() method returns the value of the string converted to uppercase.
... examples basic usage console.log('alphabet'.touppercase()); // 'alphabet' convers
ion of non-string this values to strings this method will convert any non-string value to a string, when you set its this to a value that is not a string: const a = string.prototype.touppercase.call({ tostring: funct
ion tostring() { return 'abcdef'; } }); const b = string.prototype.touppercase.call(true); // prints out 'abcdef true'.
... console.log(a, b); specificat
ions specificat
ion ecmascript (ecma-262)the definit
ion of 'string.prototype.touppercase' in that specificat
ion.
String.prototype.trimStart() - JavaScript
descript
ion the trimstart() / trimleft() methods return the string stripped of whitespace from its left end.
... aliasing for consistency with funct
ions like string.prototype.padstart the standard method name is trimstart.
...in some engines this means: string.prototype.trimleft.name === "trimstart"; polyfill //https://github.com/fab
iovergani/js-polyfill_string-trimstart (funct
ion(w){ var string=w.string, proto=string.prototype; (funct
ion(o,p){ if(p in o?o[p]?false:true:true){ var r=/^\s+/; o[p]=o.trimleft||funct
ion(){ return this.replace(r,'') } } })(proto,'trimstart'); })(window); /* es6: (w=>{ const string=w.string, proto=string.prototype; ((o,p)=>{ if(p in o?o[p]?false:true:true){ const r=/^\s+/; o[p]=o.trimleft||funct
ion(){ return this.replace(r,'') } } })(pr...
...oto,'trimstart'); })(window); */ examples using trimstart() the following example displays the lowercase string 'foo ': var str = ' foo '; console.log(str.length); // 8 str = str.trimstart(); console.log(str.length); // 5 console.log(str); // 'foo ' specificat
ions specificat
ion ecmascript (ecma-262)the definit
ion of ' string.prototype.trimstart' in that specificat
ion.
Symbol.asyncIterator - JavaScript
descript
ion the symbol.asynciterator symbol is a builtin symbol that is used to access an object's @@asynciterator method.
... const myasynciterable = { async* [symbol.asynciterator]() { yield "hello"; yield "async"; yield "iterat
ion!"; } }; (async () => { for await (const x of myasynciterable) { console.log(x); // expected output: // "hello" // "async" // "iterat
ion!" } })(); when creating an api, remember that async iterables are designed to represent something iterable — like a stream of data or a list —, not to completely replace callbacks and events in ...
...most situat
ions.
... specificat
ions specificat
ion ecmascript (ecma-262)the definit
ion of 'symbol.asynciterator' in that specificat
ion.
Symbol.search - JavaScript
the symbol.search well-known symbol specifies the method that returns the index within a string that matches the regular express
ion.
... this funct
ion is called by the string.prototype.search() method.
... for more informat
ion, see regexp.prototype[@@search]() and string.prototype.search().
... no enumerable no configurable no examples custom string search class caseinsensitivesearch { constructor(value) { this.value = value.tolowercase(); } [symbol.search](string) { return string.tolowercase().indexof(this.value); } } console.log('foobar'.search(new caseinsensitivesearch('bar'))); // expected output: 3 specificat
ions specificat
ion ecmascript (ecma-262)the definit
ion of 'symbol.search' in that specificat
ion.
Symbol.split - JavaScript
the symbol.split well-known symbol specifies the method that splits a string at the indices that match a regular express
ion.
... this funct
ion is called by the string.prototype.split() method.
... for more informat
ion, see regexp.prototype[@@split]() and string.prototype.split().
... writable no enumerable no configurable no examples custom reverse split class reversesplit { [symbol.split](string) { const array = string.split(' '); return array.reverse(); } } console.log('another one bites the dust'.split(new reversesplit())); // expected output: [ "dust", "the", "bites", "one", "another" ] specificat
ions specificat
ion ecmascript (ecma-262)the definit
ion of 'symbol.split' in that specificat
ion.
Symbol.toPrimitive - JavaScript
the symbol.toprimitive is a symbol that specifies a funct
ion valued property that is called to convert an object to a corresponding primitive value.
... descript
ion with the help of the symbol.toprimitive property (used as a funct
ion value), an object can be converted to a primitive value.
... the funct
ion is called with a string argument hint, which specifies the preferred type of the result primitive value.
...var obj2 = { [symbol.toprimitive](hint) { if (hint == 'number') { return 10; } if (hint == 'string') { return 'hello'; } return true; } }; console.log(+obj2); // 10 -- hint is "number" console.log(`${obj2}`); // "hello" -- hint is "string" console.log(obj2 + ''); // "true" -- hint is "default" specificat
ions specificat
ion ecmascript (ecma-262)the definit
ion of 'symbol.toprimitive' in that specificat
ion.
TypedArray.prototype.subarray() - JavaScript
syntax typedarray.subarray([begin [,end]]) parameters begin opt
ional element to begin at.
... end opt
ional element to end at.
... descript
ion the range specified by begin and end is clamped to the valid index range for the current array; if the computed length of the new array would be negative, it's clamped to zero.
... examples using the subarray method var buffer = new arraybuffer(8); var uint8 = new uint8array(buffer); uint8.set([1,2,3]); console.log(uint8); // uint8array [ 1, 2, 3, 0, 0, 0, 0, 0 ] var sub = uint8.subarray(0,4); console.log(sub); // uint8array [ 1, 2, 3, 0 ] specificat
ions specificat
ion ecmascript (ecma-262)the definit
ion of 'typedarray.prototype.subarray' in that specificat
ion.
WeakMap() constructor - JavaScript
the weakmap() constructor creates weakmap objects which are a collect
ions of key/value pairs in which the keys are weakly referenced.
... you can learn more about weakmaps in the sect
ion weakmap object in keyed collect
ions.
... examples using weakmap const wm1 = new weakmap(), wm2 = new weakmap(), wm3 = new weakmap(); const o1 = {}, o2 = funct
ion() {}, o3 = window; wm1.set(o1, 37); wm1.set(o2, 'azerty'); wm2.set(o1, o2); // a value can be anything, including an object or a funct
ion wm2.set(o3, undefined); wm2.set(wm1, wm2); // keys and values can be any objects.
... wm1.get(o2); // "azerty" wm2.get(o2); // undefined, because there is no key for o2 on wm2 wm2.get(o3); // undefined, because that is the set value wm1.has(o2); // true wm2.has(o2); // false wm2.has(o3); // true (even if the value itself is 'undefined') wm3.set(o1, 37); wm3.get(o1); // 37 wm1.has(o1); // true wm1.delete(o1); wm1.has(o1); // false specificat
ions specificat
ion ecmascript (ecma-262)the definit
ion of 'weakmap constructor' in that specificat
ion.
WebAssembly.Table.prototype.length - JavaScript
var table = new webassembly.table({ element: "anyfunc", initial: 2, maximum: 10 }); you can then grow the table by 1 with the following: console.log(table.length); // "2" console.log(table.grow(1)); // "2" console.log(table.length); // "3" specificat
ions specificat
ion webassembly javascript interfacethe definit
ion of 'length' in that specificat
ion.
... desktopmobileserverchromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox 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 ...
... 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 implementat
ion notes.see implementat
ion notes.
encodeURI() - JavaScript
the encodeuri() funct
ion encodes a uri by replacing each instance of certain characters by one, two, three, or four escape sequences representing the utf-8 encoding of the character (will only be four escape sequences for characters composed of two "surrogate" characters).
... descript
ion the encodeuri() funct
ion does not encode characters that have special meaning (reserved characters) for a uri.
...also, encodeuri() does not encode a few addit
ional characters, known as "unreserved marks", which do not have a reserved purpose but are allowed in a uri "as is".
...uence" console.log(encodeuri('\ud800')); // lone low surrogate throws "urierror: malformed uri sequence" console.log(encodeuri('\udfff')); encoding for ipv6 if one wishes to follow the more recent rfc3986 for urls, which makes square brackets reserved (for ipv6) and thus not encoded when forming something which could be part of a url (such as a host), the following code snippet may help: funct
ion fixedencodeuri(str) { return encodeuri(str).replace(/%5b/g, '[').replace(/%5d/g, ']'); } specificat
ions specificat
ion ecmascript (ecma-262)the definit
ion of 'encodeuri' in that specificat
ion.
Bitwise AND (&) - JavaScript
the bitwise and operator (&) returns a 1 in each bit posit
ion for which the corresponding bits of both operands are 1s.
... syntax a & b descript
ion the operands are converted to 32-bit integers and expressed by a series of bits (zeroes and ones).
... the truth table for the and operat
ion is: a b a and b 0 0 0 0 1 0 1 0 0 1 1 1 .
... examples using bitwise and // 5: 00000000000000000000000000000101 // 2: 00000000000000000000000000000010 5 & 2; // 0 specificat
ions specificat
ion ecmascript (ecma-262)the definit
ion of 'bitwise and express
ion' in that specificat
ion.
Bitwise NOT (~) - JavaScript
syntax ~a descript
ion the operands are converted to 32-bit integers and expressed by a series of bits (zeroes and ones).
... the truth table for the not operat
ion is: a not a 0 1 1 0 9 (base 10) = 00000000000000000000000000001001 (base 2) -------------------------------- ~9 (base 10) = 11111111111111111111111111110110 (base 2) = -10 (base 10) bitwise noting any number x yields -(x + 1).
... note that due to using 32-bit representat
ion for numbers both ~-1 and ~4294967295 (232-1) results in 0.
... examples using bitwise not ~0; // -1 ~-1; // 0 ~1; // -2 specificat
ions specificat
ion ecmascript (ecma-262)the definit
ion of 'unary not express
ion' in that specificat
ion.
Bitwise OR (|) - JavaScript
the bitwise or operator (|) returns a 1 in each bit posit
ion for which the corresponding bits of either or both operands are 1s.
... syntax a | b descript
ion the operands are converted to 32-bit integers and expressed by a series of bits (zeroes and ones).
... the truth table for the or operat
ion is: a b a or b 0 0 0 0 1 1 1 0 1 1 1 1 .
... examples using bitwise or // 9 (00000000000000000000000000001001) // 14 (00000000000000000000000000001110) 14 | 9; // 15 (00000000000000000000000000001111) specificat
ions specificat
ion ecmascript (ecma-262)the definit
ion of 'bitwise or express
ion' in that specificat
ion.
Bitwise XOR (^) - JavaScript
the bitwise xor operator (^) returns a 1 in each bit posit
ion for which the corresponding bits of either but not both operands are 1s.
... syntax a ^ b descript
ion the operands are converted to 32-bit integers and expressed by a series of bits (zeroes and ones).
... the truth table for the xor operat
ion is: a b a xor b 0 0 0 0 1 1 1 0 1 1 1 0 .
... examples using bitwise xor // 9 (00000000000000000000000000001001) // 14 (00000000000000000000000000001110) 14 ^ 9; // 7 (00000000000000000000000000000111) specificat
ions specificat
ion ecmascript (ecma-262)the definit
ion of 'bitwise xor express
ion' in that specificat
ion.
Equality (==) - JavaScript
syntax x == y descript
ion the equality operators (== and !=) use the abstract equality comparison algorithm to compare two operands.
... the most notable difference between this operator and the strict equality (===) operator is that the strict equality operator does not attempt type convers
ion.
... examples comparison with no type convers
ion 1 == 1; // true "hello" == "hello"; // true comparison with type convers
ion "1" == 1; // true 1 == "1"; // true 0 == false; // true 0 == null; // false 0 == undefined; // false 0 == !!null; // true, look at logical not operator 0 == !!undefined; // true, look at logical not operator null == undefined; // true const number1 = new number(3); const number2 = new number(3); number1 == 3; // true number1 == number2; // false comparison of objects const object1 = {"key": "value"} const object2 = {"key": "value"}; object1 == object2 // false object2 == objec...
...g2); // true console.log(string1 == string3); // true console.log(string2 == string3); // true console.log(string3 == string4); // false console.log(string4 == string4); // true comparing dates and strings const d = new date('december 17, 1995 03:24:00'); const s = d.tostring(); // for example: "sun dec 17 1995 03:24:00 gmt-0800 (pacific standard time)" console.log(d == s); //true specificat
ions specificat
ion ecmascript (ecma-262)the definit
ion of 'equality operators' in that specificat
ion.
Grouping operator ( ) - JavaScript
the grouping operator ( ) controls the precedence of evaluat
ion in express
ions.
... syntax ( ) descript
ion the grouping operator consists of a pair of parentheses around an express
ion or sub-express
ion to override the normal operator precedence so that express
ions with lower precedence can be evaluated before an express
ion with higher pr
iority.
... examples using the grouping operator overriding multiplicat
ion and divis
ion first, then addit
ion and subtract
ion to evaluate addit
ion first.
... var a = 1; var b = 2; var c = 3; // default precedence a + b * c // 7 // evaluated by default like this a + (b * c) // 7 // now overriding precedence // addit
ion before multiplicat
ion (a + b) * c // 9 // which is equivalent to a * c + b * c // 9 specificat
ions specificat
ion ecmascript (ecma-262)the definit
ion of 'the grouping operator' in that specificat
ion.
Inequality (!=) - JavaScript
syntax x != y descript
ion the inequality operator checks whether its operands are not equal.
... it is the negat
ion of the equality operator so the following two lines will always give the same result: x != y !(x == y) for details of the comparison algorithm, see the page for the equality operator.
... like the equality operator, the inequality operator will attempt to convert and compare operands of different types: 3 != "3"; // false to prevent this, and require that different types are considered to be different, use the strict inequality operator instead: 3 !== "3"; // true examples comparison with no type convers
ion 1 != 2; // true "hello" != "hola"; // true 1 != 1; // false "hello" != "hello"; // false comparison with type convers
ion "1" != 1; // false 1 != "1"; // false 0 != false; // false 0 != null; // true 0 != undefined; // true 0 != !!null; // false, look at logical not operator 0 != !!undefined; // false, look at logical not operator null != undefined; // false const num...
...ber1 = new number(3); const number2 = new number(3); number1 != 3; // false number1 != number2; // true comparison of objects const object1 = {"key": "value"} const object2 = {"key": "value"}; object1 != object2 // true object2 != object2 // false specificat
ions specificat
ion ecmascript (ecma-262)the definit
ion of 'equality operators' in that specificat
ion.
Logical nullish assignment (??=) - JavaScript
syntax expr1 ??= expr2 descript
ion short-circuit evaluat
ion the nullish coalescing operator is evaluated left to right, it is tested for possible short-circuit evaluat
ion using the following rule: (some express
ion that is neither null nor undefined) ??
... expr is short-circuit evaluated to the left-hand side express
ion if the left-hand side proves to be neither null nor undefined.
... short circuit means that the expr part above is not evaluated, hence any side effects of doing so do not take effect (e.g., if expr is a funct
ion call, the calling never takes place).
...y; examples using logical nullish assignment funct
ion config(opt
ions) { opt
ions.durat
ion ??= 100; opt
ions.speed ??= 25; return opt
ions; } config({ durat
ion: 125 }); // { durat
ion: 125, speed: 25 } config({}); // { durat
ion: 100, speed: 25 } specificat
ions specificat
ion logical assignment operatorsthe definit
ion of 'assignment operators' in that specificat
ion.
Right shift (>>) - JavaScript
since the new leftmost bit has the same value as the prev
ious leftmost bit, the sign bit (the leftmost bit) does not change.
... syntax a >> b descript
ion this operator shifts the first operand the specified number of bits to the right.
...since the new leftmost bit has the same value as the prev
ious leftmost bit, the sign bit (the leftmost bit) does not change.
... -9 (base 10): 11111111111111111111111111110111 (base 2) -------------------------------- -9 >> 2 (base 10): 11111111111111111111111111111101 (base 2) = -3 (base 10) examples using right shift 9 >> 2; // 2 -9 >> 2; // -3 specificat
ions specificat
ion ecmascript (ecma-262)the definit
ion of 'bitwise shift operators' in that specificat
ion.
background_color - Web app manifests
type string mandatory no the background_color member defines a placeholder background color for the applicat
ion page to display before its stylesheet is loaded.
... therefore background_color should match the background-color css property in the site’s stylesheet for a smooth transit
ion between launching the web applicat
ion and loading the site's content.
... examples "background_color": "red" specificat
ion specificat
ion status comment feedback web app manifestthe definit
ion of 'background_color' in that specificat
ion.
... working draft initial definit
ion.
categories - Web app manifests
type array of strings mandatory no the categories member is an array of strings defining the names of categories that the applicat
ion supposedly belongs to.
... note: categories are used only as hints for catalogs or stores listing web applicat
ions.
... example "categories": ["books", "educat
ion", "medical"] specificat
ion specificat
ion status comment feedback web app manifestthe definit
ion of 'categories' in that specificat
ion.
... working draft initial definit
ion.
dir - Web app manifests
type string mandatory no the base direct
ion in which to display direct
ion-capable members of the manifest.
... the dir member can be set to one of the following values: auto — text direct
ion is determined by the user agent ltr — left to right rtl — right to left the direct
ionality-capable members are: name short_name descript
ion note: if the value is omitted or set to auto, the browser will use the unicode bidirect
ional algorithm to make a best guess about the text's direct
ion.
... example "dir": "rtl", "lang": "ar", "short_name": "!أنا من التطبيق" specificat
ion specificat
ion status comment feedback web app manifestthe definit
ion of 'dir' in that specificat
ion.
... working draft initial definit
ion.
iarc_rating_id - Web app manifests
type string mandatory no the iarc_rating_id member is a string that represents the internat
ional age rating coalit
ion (iarc) certificat
ion code of the web applicat
ion.
... it is intended to be used to determine which ages the web applicat
ion is appropriate for.
... examples "iarc_rating_id": "e84b072d-71b3-4d3e-86ae-31a8ce4e53b7" specificat
ion specificat
ion status comment feedback web app manifestthe definit
ion of 'iarc_rating_id' in that specificat
ion.
... working draft initial definit
ion.
name - Web app manifests
type string mandatory yes the name member is a string that represents the name of the web applicat
ion as it is usually displayed to the user (e.g., amongst a list of other applicat
ions, or as a label for an icon).
... name is direct
ionality-capable, which means it can be displayed left-to-right or right-to-left based on the values of the dir and lang manifest members.
... examples simple name in left-to-right language: "name": "awesome applicat
ion" right-to-left name in arabic: "dir": "rtl", "lang": "ar", "name": "!أنا من التطبيق" specificat
ion specificat
ion status comment feedback web app manifestthe definit
ion of 'name' in that specificat
ion.
... working draft initial definit
ion.
serviceworker - Web app manifests
examples "serviceworker": { "src": "./serviceworker.js", "scope": "/app", "type": "", "update_via_cache": "none" } values service worker contain the following values (only src is required): member descript
ion src the url to download the service worker script from.
... scope a string representing a url that defines a service worker's registrat
ion scope; that is, what range of urls a service worker can control.
... this is usually a relative url, relative to the base url of the applicat
ion.
... by default, the scope value for a service worker registrat
ion is set to the directory where the service worker script is located.
short_name - Web app manifests
type string mandatory no the short_name member is a string that represents the name of the web applicat
ion displayed to the user if there is not enough space to display name (e.g., as a label for an icon on the phone home screen).
... short_name is direct
ionality-capable, which means it can be displayed left-to-right or right-to-left based on the value of the dir and lang manifest members.
... examples simple short_name in left-to-right language: "name": "awesome applicat
ion", "short_name": "awesome app" short_name in arabic, which will be displayed right-to-left: "dir": "rtl", "lang": "ar", "name": "تطبيق رائع", "short_name": "رائع" specificat
ion specificat
ion status comment feedback web app manifestthe definit
ion of 'short_name' in that specificat
ion.
... working draft initial definit
ion.
<mphantom> - MathML
the mathml <mphantom> element is rendered invisibly, but dimens
ions (such as height, width, and baseline posit
ion) are still kept.
... examples sample rendering: rendering in your browser: x + y + z <math> <mrow> <mi> x </mi> <mo> + </mo> <mphantom> <mi> y </mi> <mo> + </mo> </mphantom> <mi> z </mi> </mrow> </math> specificat
ions specificat
ion status comment mathml 3.0the definit
ion of 'mphantom' in that specificat
ion.
... recommendat
ion current specificat
ion mathml 2.0the definit
ion of 'mphantom' in that specificat
ion.
... recommendat
ion initial specificat
ion ...
PWA developer guide - Progressive web apps (PWAs)
in the articles listed here, you'll find guides about every aspect of development specific to the great
ion of progressive web applicat
ions (pwas).
... for all other documentat
ion about web development, which generally pertains to pwas as well, see our primary web development documentat
ion.
...<<<--- web app basics introduct
ion and getting started with pwa development some descript
ion installing and uninstalling web apps an introductory guide to how a web app can be installed on the user's device...
... using service workers to run offline descript
ion alerting the user using notificat
ions descript
ion creating a web app from an existing site descript
ion advanced topics pushing data from the server to your web applicat
ion some descript
ion resource management descript
ion integrat
ion with the host device descript
ion security and privacy descript
ion gaming topics for web app developers descript
ion polishing web apps web api equivalents for common native apis some descript
ion platform-specific tips and issues descript
ion web applicat
ion performance guide descript
ion ensuring a good user experience descript
ion related topics some topic some descript
ion ...
Applying SVG effects to HTML content - SVG: Scalable Vector Graphics
for example, you can resize the circle in the clip path established above: funct
ion toggleradius() { var circle = document.getelementbyid("circle"); circle.r.baseval.value = 0.40 - circle.r.baseval.value; } example: filtering this demonstrates applying a filter to html content using svg.
...for example, to apply a blur effect, you might use: <svg height="0"> <filter id="f1"> <fegaussianblur stddeviat
ion="3"/> </filter> </svg> you could also apply a color matrix: <svg height="0"> <filter id="f2"> <fecolormatrix values="0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0"/> </filter> </svg> and some more filters: <svg height="0"> <filter id="f3"> <f...
...econvolvematrix filterres="100 100" style="color-interpolat
ion-filters:srgb" order="3" kernelmatrix="0 -1 0 -1 4 -1 0 -1 0" preservealpha="true"/> </filter> <filter id="f4"> <fespecularlighting surfacescale="5" specularconstant="1" specularexponent="10" lighting-color="white"> <fepointlight x="-5000" y="-10000" z="20000"/> </fespecularlighting> </filter> <filter id="f5"> <fecolormatrix values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 1 0 0 0" style="color-interpolat
ion-filters:srgb"/> </filter> </svg> the five filters are applied using the following css: p.target { filter:url(#f3); } p.target:hover { filter:url(#f5); } b.target { filter:url(#f1); } b.target:...
... <p class="blur">time to clean my glasses</p> <svg height="0"> <defs> <filter id="wherearemyglasses" x="0" y="0"> <fegaussianblur in="sourcegraphic" stddeviat
ion="1"/> </filter> </defs> </svg> you can apply the svg and the css filter in the same class: .blur { filter: url(#wherearemyglasses); } blurring is computat
ion heavy, so ensure to use it sparingly, especially in elements that get scrolled or animated.
amplitude - SVG: Scalable Vector Graphics
the amplitude attribute controls the amplitude of the gamma funct
ion of a component transfer element when its type attribute is gamma.
... four elements are using this attribute: <fefunca>, <fefuncb>, <fefuncg>, and <fefuncr> usage notes value <number> default value 1 animatable yes specificat
ions specificat
ion status comment filter effects module level 1the definit
ion of 'amplitude' in that specificat
ion.
... working draft no change scalable vector graphics (svg) 1.1 (second edit
ion)the definit
ion of 'amplitude' in that specificat
ion.
... recommendat
ion initial definit
ion ...
attributeName - SVG: Scalable Vector Graphics
the attributename attribute indicates the name of the css property or attribute of the target element that is going to be changed during an animat
ion.
... specificat
ions specificat
ion status comment svg animat
ions level 2the definit
ion of 'attributename' in that specificat
ion.
... editor's draft no change scalable vector graphics (svg) 1.1 (second edit
ion)the definit
ion of 'attributename' in that specificat
ion.
... recommendat
ion initial definit
ion ...
azimuth - SVG: Scalable Vector Graphics
the azimuth attribute specifies the direct
ion angle for the light source on the xy plane (clockwise), in degrees from the x axis.
...<fediffuselighting> <fedistantlight azimuth="240" /> </fediffuselighting> </filter> <circle cx="100" cy="100" r="80" style="filter: url(#distantlight1);" /> <circle cx="100" cy="100" r="80" style="filter: url(#distantlight2); transform: translatex(240px);" /> </svg> usage notes value <number> default value 0 animatable yes specificat
ions specificat
ion status comment filter effects module level 1the definit
ion of 'azimuth' in that specificat
ion.
... working draft no change scalable vector graphics (svg) 1.1 (second edit
ion)the definit
ion of 'azimuth' in that specificat
ion.
... recommendat
ion initial definit
ion ...
baseProfile - SVG: Scalable Vector Graphics
the attribute does not specify any processing restrict
ions; it can be considered metadata.
... only one element is using this attribute: <svg> context notes value profile name default value none animatable no example <svg width="120" height="120" vers
ion="1.1" xmlns="http://www.w3.org/2000/svg" baseprofile="full"> ...
... </svg> specificat
ions specificat
ion status comment scalable vector graphics (svg) 1.1 (second edit
ion)the definit
ion of 'baseprofile' in that specificat
ion.
... recommendat
ion initial definit
ion ...
u2 - SVG: Scalable Vector Graphics
the u2 attribute specifies list of unicode characters (refer to the descript
ion of the unicode attribute of the <glyph> element for a descript
ion of how to express individual unicode characters) and/or ranges of unicode characters, which identify a set of possible second glyphs in a kerning pair.
...the total set of possible second glyphs in the kerning pair is the un
ion of glyphs specified by the u2 and g2 attributes.
... specificat
ions specificat
ion status comment scalable vector graphics (svg) 1.1 (second edit
ion)the definit
ion of 'u2' in that specificat
ion.
... recommendat
ion initial definit
ion ...
unicode - SVG: Scalable Vector Graphics
it is often useful to refer to characters using xml character references expressed in hexadecimal notat
ion or decimal notat
ion.
... for example, unicode="ffl" could be expressed as xml character references in hexadecimal notat
ion as unicode="ffl" or in decimal notat
ion as unicode="ffl".
... specificat
ions specificat
ion status comment scalable vector graphics (svg) 1.1 (second edit
ion)the definit
ion of 'unicode' in that specificat
ion.
... recommendat
ion initial definit
ion ...
xlink:arcrole - SVG: Scalable Vector Graphics
the xlink:arcrole attribute specifies a contextual role for the element and corresponds to the rdf primer not
ion of a property.
...for example, a resource might generically represent a "person," but in the context of a particular arc it might have the role of "mother" and in the context of a different arc it might have the role of "daughter." twentytwo elements are using this attribute: <a>, <altglyph>, <animate>, <animatecolor>, <animatemot
ion>, <animatetransform>, <color-profile>, <cursor>, <feimage>, <filter>, <font-face-uri>, <glyphref>, <image>, <lineargradient>, <mpath>, <pattern>, <radialgradient>, <script>, <set>, <textpath>, <tref>, <use> usage notes value <iri> default value none animatable no <iri> this value specifies an iri reference that identifies some resource that describ...
... specificat
ions specificat
ion status comment scalable vector graphics (svg) 1.1 (second edit
ion)the definit
ion of 'xlink:arcrole' in that specificat
ion.
... recommendat
ion initial definit
ion ...
xml:space - SVG: Scalable Vector Graphics
specificat
ions specificat
ion status comment scalable vector graphics (svg) 2the definit
ion of 'xml:space' in that specificat
ion.
... candidate recommendat
ion deprecates the attribute and suggests to use white-space instead.
... scalable vector graphics (svg) 1.1 (second edit
ion)the definit
ion of 'xml:space' in that specificat
ion.
... recommendat
ion initial definit
ion ...
zoomAndPan - SVG: Scalable Vector Graphics
magnificat
ion in this context means the effect of a supplemental scale and translate transformat
ion on the outermost svg document fragment.
... panning represents a translat
ion (i.e., a shift) transformat
ion on an svg document fragment in response to a user interface act
ion.
..." y="0" width="100%" height="100%"> <fediffuselighting in="sourcegraphic" zoomandpan="1"> <fepointlight x="60" y="60" z="20" /> </fediffuselighting> </filter> <rect x="0" y="0" width="200" height="200" style="filter: url(#diffuselighting);" /> </svg> usage notes value disable | magnify default value magnify animatable no specificat
ions specificat
ion status comment scalable vector graphics (svg) 1.1 (second edit
ion)the definit
ion of 'zoomandpan' in that specificat
ion.
... recommendat
ion initial definit
ion ...
<defs> - SVG: Scalable Vector Graphics
0%" stop-color="red" /> </lineargradient> </defs> <!-- using my graphical objects --> <use x="5" y="5" xlink:href="#mycircle" fill="url('#mygradient')" /> </svg> attributes global attributes core attributes most notably: id lang styling attributes class, style event attributes global event attributes, document element event attributes, graphical event attributes presentat
ion attributes most notably: clip-path, clip-rule, color, color-interpolat
ion, color-rendering, cursor, display, fill, fill-opacity, fill-rule, filter, mask, opacity, pointer-events, shape-rendering, stroke, stroke-dasharray, stroke-dashoffset, stroke-linecap, stroke-linejoin, stroke-miterlimit, stroke-opacity, stroke-width, transform, vector-effect, visibility usage notes categoriescontainer el...
...ement, structural elementpermitted contentany number of the following elements, in any order:animat
ion elementsdescriptive elementsshape elementsstructural elementsgradient elements<a>, <altglyphdef>, <clippath>, <color-profile>, <cursor>, <filter>, <font>, <font-face>, <foreignobject>, <image>, <marker>, <mask>, <pattern>, <script>, <style>, <switch>, <text>, <view> specificat
ions specificat
ion status comment scalable vector graphics (svg) 2the definit
ion of '<defs>' in that specificat
ion.
... candidate recommendat
ion no change scalable vector graphics (svg) 1.1 (second edit
ion)the definit
ion of '<defs>' in that specificat
ion.
... recommendat
ion initial definit
ion ...
<feBlend> - 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 presentat
ion attributes filter primitive attributes class style specific attributes in in2 mode dom interface this element implements the svgfeblendelement interface.
...od result="floodfill" x="0" y="0" width="100%" height="100%" flood-color="green" flood-opacity="1"/> <feblend in="sourcegraphic" in2="floodfill" mode="multiply"/> </filter> </defs> <image xlink:href="//developer.mozilla.org/files/6457/mdn_logo_only_color.png" x="10%" y="10%" width="80%" height="80%" style="filter:url(#spotlight);"/> </svg> result specificat
ions specificat
ion status comment filter effects module level 1the definit
ion of '<feblend>' in that specificat
ion.
... working draft outsourced blend modes to compositing and blending level 1 scalable vector graphics (svg) 1.1 (second edit
ion)the definit
ion of '<feblend>' in that specificat
ion.
... recommendat
ion initial definit
ion ...
<feDistantLight> - SVG: Scalable Vector Graphics
usage context categorieslight source elementpermitted contentany number of the following elements, in any order:<animate>, <set> attributes global attributes core attributes specific attributes azimuth elevat
ion dom interface this element implements the svgfedistantlightelement interface.
... specificat
ions specificat
ion status comment filter effects module level 1the definit
ion of '<fedistantlight>' in that specificat
ion.
... working draft no change scalable vector graphics (svg) 1.1 (second edit
ion)the definit
ion of '<fedistantlight>' in that specificat
ion.
... recommendat
ion initial definit
ion ...
<feImage> - SVG: Scalable Vector Graphics
the <feimage> svg filter primitive fetches image data from an external source and provides the pixel data as output (meaning if the external source is an svg image, it is rasterized.) usage context categoriesfilter primitive elementpermitted contentany number of the following elements, in any order:<animate>, <animatetransform>, <set> attributes global attributes core attributes presentat
ion attributes filter primitive attributes xlink attributes class style externalresourcesrequired specific attributes preserveaspectrat
io xlink:href dom interface this element implements the svgfeimageelement interface.
... example svg <svg viewbox="0 0 200 200" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <defs> <filter id="image"> <feimage xlink:href="/files/6457/mdn_logo_only_color.png"/> </filter> </defs> <rect x="10%" y="10%" width="80%" height="80%" style="filter:url(#image);"/> </svg> result specificat
ions specificat
ion status comment filter effects module level 1the definit
ion of '<feimage>' in that specificat
ion.
... scalable vector graphics (svg) 1.1 (second edit
ion)the definit
ion of '<feimage>' in that specificat
ion.
... recommendat
ion initial definit
ion ...
<feMerge> - SVG: Scalable Vector Graphics
usage context categoriesfilter primitive elementpermitted contentany number of the following elements, in any order:<femergenode> example svg <svg width="200" height="200" xmlns="http://www.w3.org/2000/svg"> <filter id="feoffset" x="-40" y="-20" width="100" height="200"> <feoffset in="sourcegraphic" dx="60" dy="60" /> <fegaussianblur stddeviat
ion="5" result="blur2" /> <femerge> <femergenode in="blur2" /> <femergenode in="sourcegraphic" /> </femerge> </filter> <rect x="40" y="40" width="100" height="100" style="stroke: #000000; fill: green; filter: url(#feoffset);" /> </svg> result attributes global attributes core attributes presentat
ion attributes filter primitive attributes class style speci...
... specificat
ions specificat
ion status comment filter effects module level 1the definit
ion of '<femerge>' in that specificat
ion.
... working draft no change scalable vector graphics (svg) 1.1 (second edit
ion)the definit
ion of '<femerge>' in that specificat
ion.
... recommendat
ion initial definit
ion ...
<feMergeNode> - SVG: Scalable Vector Graphics
categoriesnonepermitted contentany number of the following elements, in any order:<animate>, <set> example <svg width="200" height="200" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <filter id="feoffset" x="-40" y="-20" width="100" height="200"> <feoffset in="sourcegraphic" dx="60" dy="60" /> <fegaussianblur in="sourcegraphic" stddeviat
ion="5" result="blur2" /> <femerge> <femergenode in="blur2" /> <femergenode in="sourcegraphic" /> </femerge> </filter> <rect x="40" y="40" width="100" height="100" style="stroke: #000000; fill: green; filter: url(#feoffset);" /> <rect x="40" y="40" width="100" height="100" style="stroke: #000000; fill: green;" /> </svg> result ...
... specificat
ions specificat
ion status comment filter effects module level 1the definit
ion of '<femergenode>' in that specificat
ion.
... working draft scalable vector graphics (svg) 1.1 (second edit
ion)the definit
ion of '<femergenode>' in that specificat
ion.
... recommendat
ion initial definit
ion ...
<feMorphology> - 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 presentat
ion attributes filter primitive attributes class style specific attributes in operator radius dom interface this element implements the svgfemorphologyelement interface.
...<femorphology operator="erode" radius="1"/> </filter> <filter id="dilate"> <femorphology operator="dilate" radius="2"/> </filter> </svg> <p>normal text</p> <p id="thin">thinned text</p> <p id="thick">fattened text</p> css p { margin: 0; font-family: arial, helvetica, sans-serif; font-size: 3em; } #thin { filter: url(#erode); } #thick { filter: url(#dilate); } specificat
ions specificat
ion status comment filter effects module level 1the definit
ion of '<femorphology>' in that specificat
ion.
... working draft no change scalable vector graphics (svg) 1.1 (second edit
ion)the definit
ion of '<femorphology>' in that specificat
ion.
... recommendat
ion initial definit
ion ...
<feOffset> - 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 presentat
ion attributes filter primitive attributes class style specific attributes in dx dy dom interface this element implements the svgfeoffsetelement interface.
... width="200" height="200" xmlns="http://www.w3.org/2000/svg"> <defs> <filter id="offset" width="180" height="180"> <feoffset in="sourcegraphic" dx="60" dy="60" /> </filter> </defs> <rect x="0" y="0" width="100" height="100" stroke="black" fill="green"/> <rect x="0" y="0" width="100" height="100" stroke="black" fill="green" filter="url(#offset)"/> </svg> result specificat
ions specificat
ion status comment filter effects module level 1the definit
ion of '<feoffset>' in that specificat
ion.
... working draft no change scalable vector graphics (svg) 1.1 (second edit
ion)the definit
ion of '<feoffset>' in that specificat
ion.
... recommendat
ion initial definit
ion ...
<feTile> - 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 presentat
ion attributes filter primitive attributes class style specific attributes in dom interface this element implements the svgfetileelement interface.
...nk="http://www.w3.org/1999/xlink"> <defs> <filter id="tile" x="0" y="0" width="100%" height="100%"> <fetile in="sourcegraphic" x="50" y="50" width="100" height="100" /> <fetile/> </filter> </defs> <image xlink:href="/files/6457/mdn_logo_only_color.png" x="10%" y="10%" width="80%" height="80%" style="filter:url(#tile);"/> </svg> result specificat
ions specificat
ion status comment filter effects module level 1the definit
ion of '<fetile>' in that specificat
ion.
... working draft no change scalable vector graphics (svg) 1.1 (second edit
ion)the definit
ion of '<fetile>' in that specificat
ion.
... recommendat
ion initial definit
ion ...
<filter> - SVG: Scalable Vector Graphics
usage context categoriesnonepermitted contentany number of the following elements, in any order:descriptive elementsfilter primitive elements<animate>, <set> attributes global attributes core attributes presentat
ion attributes xlink attributes class style externalresourcesrequired specific attributes x y width height filterres filterunits primitiveunits xlink:href dom interface this element implements the svgfilterelement interface.
... example svg <svg width="230" height="120" xmlns="http://www.w3.org/2000/svg"> <filter id="blurme"> <fegaussianblur stddeviat
ion="5"/> </filter> <circle cx="60" cy="60" r="50" fill="green" /> <circle cx="170" cy="60" r="50" fill="green" filter="url(#blurme)" /> </svg> result screenshotlive sample specificat
ions specificat
ion status comment filter effects module level 1the definit
ion of '<filter>' in that specificat
ion.
... working draft scalable vector graphics (svg) 1.1 (second edit
ion)the definit
ion of '<filter>' in that specificat
ion.
... recommendat
ion initial definit
ion ...
<glyph> - SVG: Scalable Vector Graphics
usage context categoriestext content elementpermitted contentany number of the following elements, in any order:animat
ion elementsdescriptive elementsshape elementsstructural elementsgradient elements<a>, <altglyphdef>, <clippath>, <color-profile>, <cursor>, <filter>, <font>, <font-face>, <foreignobject>, <image>, <marker>, <mask>, <pattern>, <script>, <style>, <switch>, <text>, <view> attributes global attributes core attributes presentat
ion attributes class style specific attributes d horiz-adv-x vert-origin-x vert-origin-y vert-adv-y unicode glyph-name orientat
ion arabic-form lang dom interface this element implements the svgglyphelement interface.
... example svg <svg width="400px" height="300px" vers
ion="1.1" xmlns="http://www.w3.org/2000/svg"> <!-- example copied from https://www.w3.org/tr/svg/fonts.html#glyphelement --> <defs> <font id="font1" horiz-adv-x="1000"> <font-face font-family="super sans" font-weight="bold" font-style="normal" units-per-em="1000" cap-height="600" x-height="400" ascent="700" descent="300" alphabetic="0" mathematical="350" ideographic="400" hanging="500"> <font-face-src> <font-face-name name="super sans bold"/> </font-face-src> </font-face> <missing-glyph><path d="m0,0h200v200h-200z"/></missing-glyph> <glyph unicode="!" horiz-adv-x="80" d="m0,0h200v200h-200z"></glyph> <glyph unicode="@" d="m0,50l100,300l400,100...
...z"></glyph> </font> </defs> <text x="100" y="100" style="font-family: 'super sans', helvetica, sans-serif; font-weight: bold; font-style: normal">text using embe@dded font!</text> </svg> result specificat
ions specificat
ion status comment scalable vector graphics (svg) 1.1 (second edit
ion)the definit
ion of '<glyph>' in that specificat
ion.
... recommendat
ion initial definit
ion ...
<glyphRef> - SVG: Scalable Vector Graphics
the glyphref element provides a single possible glyph to the referencing <altglyph> substitut
ion.
... usage context categoriestext content elementpermitted contentempty attributes global attributes core attributes » presentat
ion attributes » xlink attributes » class style specific attributes x y dx dy glyphref format xlink:href dom interface this element implements the svgglyphrefelement interface.
... specificat
ions specificat
ion status comment scalable vector graphics (svg) 1.1 (second edit
ion)the definit
ion of '<glyphref>' in that specificat
ion.
... recommendat
ion initial definit
ion ...
<mask> - SVG: Scalable Vector Graphics
value type: <length> ; default value: 120%; animatable: yes global attributes core attributes most notably: id styling attributes class, style condit
ional processing attributes most notably: requiredextens
ions, systemlanguage presentat
ion attributes most notably: clip-path, clip-rule, color, display, fill, fill-opacity, fill-rule, filter, mask, opacity, shape-rendering, stroke, stroke-dasharray, stroke-dashoffset, stroke-linecap, stroke-linejoin, stroke-miterlimit, stroke-opacity, stroke-width, transform, vector-effect, visibility usage not...
...es categoriescontainer elementpermitted contentany number of the following elements, in any order:animat
ion elementsdescriptive elementsshape elementsstructural elementsgradient elements<a>, <altglyphdef>, <clippath>, <color-profile>, <cursor>, <filter>, <font>, <font-face>, <foreignobject>, <image>, <marker>, <mask>, <pattern>, <script>, <style>, <switch>, <text>, <view> specificat
ions specificat
ion status comment css masking module level 1the definit
ion of '<mask>' in that specificat
ion.
... candidate recommendat
ion scalable vector graphics (svg) 1.1 (second edit
ion)the definit
ion of '<mask>' in that specificat
ion.
... recommendat
ion initial definit
ion ...
<stop> - SVG: Scalable Vector Graphics
the svg <stop> element defines a color and its posit
ion to use on a gradient.
... value type: <opacity>; default value: 1; animatable: yes global attributes core attributes most notably: id styling attributes class, style event attributes global event attributes, document element event attributes presentat
ion attributes most notably: color, display, stop-color, stop-opacity, visibility usage notes categoriesgradient elementpermitted contentany number of the following elements, in any order:<animate>, <animatecolor>, <set> specificat
ions specificat
ion status comment scalable vector graphics (svg) 2the definit
ion of '<stop>' in that specificat
ion.
... candidate recommendat
ion scalable vector graphics (svg) 1.1 (second edit
ion)the definit
ion of '<stop>' in that specificat
ion.
... recommendat
ion initial definit
ion ...
<title> — the SVG accessible name element - SVG: Scalable Vector Graphics
the <title> element provides an accessible, short-text descript
ion of any svg container element or graphics element.
...th="8" height="8"> <title>i'm a square</title> </rect> </svg> attributes this element only includes global attributes global attributes core attributes most notably: id styling attributes class, style event attributes global event attributes, document element event attributes usage notes categoriesdescriptive elementpermitted contentany elements or character data specificat
ions specificat
ion status comment scalable vector graphics (svg) 2the definit
ion of '<title>' in that specificat
ion.
... candidate recommendat
ion scalable vector graphics (svg) 1.1 (second edit
ion)the definit
ion of '<title>' in that specificat
ion.
... recommendat
ion initial definit
ion ...
<view> - SVG: Scalable Vector Graphics
usage context categoriesnonepermitted contentany number of the following elements, in any order:descriptive elements attributes global attributes aria attributes » core attributes » global event attributes » externalresourcesrequired specific attributes viewbox preserveaspectrat
io zoomandpan viewtarget example svg <svg width="600" height="200" viewbox="0 0 600 200" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <defs> <radialgradient id="gradient"> <stop offset="0%" stop-color="#8cffa0" /> <stop offset="100%" stop-color="#8ca0ff" /> </radialgradient> </defs> <circle r="50" cx="180" cy="50" style="fill:url(#gradient)"/> ...
... specificat
ions specificat
ion status comment scalable vector graphics (svg) 2the definit
ion of '<view>' in that specificat
ion.
... candidate recommendat
ion scalable vector graphics (svg) 1.1 (second edit
ion)the definit
ion of '<view>' in that specificat
ion.
... recommendat
ion initial definit
ion ...
Linking - SVG: Scalable Vector Graphics
when svg documents are embedded within a parent html document using the tag: page1.html: <html> <body> <p>this is a svg button:</p> <object width="100" height="50" type="image/svg+xml" data="button.svg"/> </body> </html> button.svg: <?xml vers
ion="1.1" encoding="utf-8"?> <svg xmlns="http://www.w3.org/2000/svg"> <a xlink:href="page2.html" target="_top"> <g> <!-- button graphical elements here --> </g> </a> </svg> the specificat
ion says that the browser should navigate to the html document page2.html when the button graphics are clicked.
... however, target does not work with mozilla's implementat
ion of the svg <a> element in firefox 1.5.
... (the problem will be fixed in firefox 2.0.) anyway, the resultant behav
ior in moz svg is that page2.html will be loaded into the frame where the svg button was (i.e.
... to get around this, requires a little ugly javascript hacking: button.svg: <?xml vers
ion="1.1" encoding="utf-8"?> <svg xmlns="http://www.w3.org/2000/svg"> <g onclick="top.document.href='page2.html'" cursor="pointer"> <!-- button graphical elements here --> </g> </svg> example for an example of this solut
ion at work see www.codedread.com.
Patterns - SVG: Scalable Vector Graphics
« prev
iousnext » patterns patterns are arguably one of the more confusing fill types to use in svg.
...like gradients, the <pattern> element should be put in the <defs> sect
ion of your svg file.
...all three of the preceding examples are shown below on a rectangle that has been slightly elongated to a height of 300px, but i should note that it's not an exhaustive picture, and there are other opt
ions available depending on your applicat
ion.
... « prev
iousnext » ...
SVG Tutorial - SVG: Scalable Vector Graphics
if you just want to draw beautiful images, you might find more useful resources at inkscape's documentat
ion page.
... another good introduct
ion to svg is provided by the w3c's svg primer.
... introducing svg from scratch introduct
ion getting started posit
ions basic shapes paths fills and strokes gradients patterns texts basic transformat
ions clipping and masking other content in svg filter effects svg fonts svg image tag tools for svg svg and css the following topics are more advanced and hence should get their own tutorials.
... scripting svg with javascript tbd svg filters tutorial tbd animat
ions with smil in svg tbd creating fonts in svg tbd ...
boolean - XPath
xslt/xpath reference: xslt elements, exslt funct
ions, xpath funct
ions, xpath axes the boolean funct
ion evaluates an express
ion and returns true or false.
... syntax boolean( express
ion ) arguments express
ion the express
ion to be evaluated.
... the express
ion can refer to numbers and node-sets as well as booleans.
... returns boolean true or false after evaluating express
ion.
lang - XPath
xslt/xpath reference: xslt elements, exslt funct
ions, xpath funct
ions, xpath axes the lang funct
ion determines whether the context node matches the given language and returns boolean true or false.
... syntax lang(string ) arguments string the language code or localizat
ion (language and country) code to be matched.
...if the language cannot be determined (no ancestor has an xml:lang attribute), this funct
ion will return false.
... if the given string does not specify a country code, this funct
ion will match nodes of that language with any country code.
not - XPath
xslt/xpath reference: xslt elements, exslt funct
ions, xpath funct
ions, xpath axes the not funct
ion evaluates a boolean express
ion and returns the opposite value.
... syntax not(express
ion ) arguments express
ion the express
ion is evaluated exactly as if it were passed as an argument to the boolean() funct
ion.
... returns true for an express
ion that evaluates to false; false for an express
ion that evaluates to true.
... notes this funct
ion should behave similarly to the boolean() funct
ion except that it returns the opposite value.
translate - XPath
xslt/xpath reference: xslt elements, exslt funct
ions, xpath funct
ions, xpath axes the translate funct
ion evaluates a string and a set of characters to translate and returns the translated string.
... notes xpath notes that the translate funct
ion is not a sufficient solut
ion for case convers
ion in all languages.
... a future vers
ion of xpath may provide addit
ional funct
ions for case convers
ion.
... however, this is the closest we have at present to a funct
ion that can convert a string to uppercase or lowercase.
Window: userproximity event - Archive of obsolete content
bubbles no cancelable no interface userproximityevent target defaultview (window) default act
ion none event handler property window.onuserroximity specificat
ion proximity sensor note: this event has been disabled by default in firefox 62, behind the device.sensors.proximity.enabled preference (bug 1462308).
... other properties property type descript
ion near read only boolean the current user proximity state.
... specificat
ions specificat
ion status proximity sensorthe definit
ion of 'proximity events' in that specificat
ion.
base64 - Archive of obsolete content
var base64 = require("sdk/base64"); var encodeddata = base64.encode("hello, world"); var decodeddata = base64.decode(encodeddata); globals funct
ions encode(data, charset) creates a base-64 encoded ascii string from a string of binary data.
... parameters data : string the data to encode charset : string the charset of the string to encode (opt
ional).
... parameters data : string the encoded data charset : string the charset of the string to encode (opt
ional).
moveByOffset - Archive of obsolete content
if isselecting is true, then the select
ion is also adjusted.
... if isselectingrange is also true, then the new item is selected in addit
ion to any currently selected items.
... if isselectingrange is false, any existing select
ion is cleared.
showPopup - Archive of obsolete content
there are two ways of specifying where the popup appears, either at a specific screen posit
ion, or relative to some element in the window.
...if x and y are -1, the popup will be posit
ioned relative to the element specified as the first argument.
... to have a popup appear relative to another element yet still offset by some number of pixels, determine the actual screen posit
ion 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.
Methods - Archive of obsolete content
« xul reference home acceptdialog additemtoselect
ion addpane addprogresslistener addsess
ion addtab addtabsprogresslistener advance advanceselectedtab appendcustomtoolbar appendgroup appenditem appendnotificat
ion blur cancel canceldialog centerwindowonscreen checkadjacentelement clearresults clearselect
ion click close collapsetoolbar contains decrease decreasepage docommand ensureelementisvisible ensureindexisvisible ensureselectedelementisvisible expandtoolbar extra1 extra2 focus getbrowseratindex getbrowserfordocument getbrowserfortab getbrowserindexfordocument getbutton getdefaultsess
ion geteditor getelementsbyattribute getelementsbyattributens getformattedstring gethtmleditor getindexoffi...
...rstvisiblerow getindexofitem getitematindex getnextitem getnotificat
ionbox getnotificat
ionwithvalue getnumberofvisiblerows getpagebyid getprev
iousitem getresultat getresultcount getresultvalueat getrowcount getsearchat getselecteditem getsess
ion getsess
ionbyname getsess
ionresultat getsess
ionstatusat getsess
ionvalueat getstring goback gobackgroup godown goforward goforwardgroup gohome goto gotoindex goup hidepopup increase increasepage insertitem insertitemat invertselect
ion loadgroup loadonetab loadtabs loaduri loaduriwithflags makeeditable movebyoffset moveto movetoalertposit
ion onsearchcomplete ontextentered ontextreverted openpopup openpopupatscreen opensubdialog openwindow preferencefo...
...relement reload reloadalltabs reloadtab reloadwithflags removeallitems removeallnotificat
ions removealltabsbut removecurrentnotificat
ion removecurrenttab removeitemat removeitemfromselect
ion removenotificat
ion removeprogresslistener removesess
ion removetab removetabsprogresslistener removetransientnotificat
ions replacegroup reset rewind scrollbyindex scrollbypixels scrolltoindex select selectall selectitem selectitemrange selecttabatindex setselect
ionrange showpane showpopup sizeto startediting stop stopediting swapdocshells syncsess
ions timedselect toggleitemselect
ion related dom element methods dom:element.addeventlistener dom:element.appendchild dom:element.comparedocumentposit
ion dom:element.dispatche...
canRewind - Archive of obsolete content
« xul reference canrewind type: boolean this property is set to true if the user can press the back button to go to the prev
ious page.
... if this property is false, the user cannot navigate to the prev
ious page.
...set to false to disallow moving to the prev
ious page.
XUL Reference - Archive of obsolete content
« xul reference « alphabetical list of all xul elements act
ion arrowscrollbox assign bbox binding bindings box broadcaster broadcasterset button browser checkbox capt
ion clicktoscroll colorpicker column columns commandset command condit
ions content datepicker deck descript
ion dialog dialogheader dropmarker editor grid grippy groupbox hbox iframe image key keyset label listbox listcell listcol listcols listhead listheader listitem member menu menubar menuitem menulist menupopup menuseparator notificat
ion notificat
ionbox observes overlay page panel param popupset preference preferences prefpane prefwindow progressmeter query queryset rad
io rad
iogroup resizer richlistbox richlistitem row rows rule scale sc...
... categorical list of all xul elements « xul reference « windows window wizard wizardpage titlebar window structure --- menus and popups --- toolbars toolbar toolbarbutton toolbargrippy toolbaritem toolbarpallete toolbarseperator toolbarspring tabs and grouping tab tabbox tabpanel tabpanels tabs controls --- text and images label capt
ion image lists --- trees --- layout --- templates --- scripting --- helper elements other xul lists dialog overlay page window wizard wizardpage preference preferences prefpane prefwindow browser tabbrowser editor iframe titlebar resizer statusbar statusbarpanel dialogheader notificat
ion notificat
ionbox menubar menu menuitem menu...
...separator menupopup panel tooltip popupset toolbar toolbarbutton toolbargrippy toolbaritem toolbarpalette toolbarseparator toolbarset toolbarspacer toolbarspring toolbox tabbox tabs tab tabpanels tabpanel groupbox capt
ion separator spacer button checkbox colorpicker datepicker menulist progressmeter rad
io rad
iogroup scale splitter textbox textbox (firefox autocomplete) textbox (mozilla autocomplete) timepicker descript
ion label image listbox listitem listcell listcol listcols listhead listheader richlistbox richlistitem tree treecell treechildren treecol treecols treeitem treerow treeseparator box hbox vbox bbox deck stack grid columns column rows row scrollbox act
ion assign binding bindings condit
ions content member...
binding - Archive of obsolete content
that name can then be used within the act
ion of a rule.
... properties object, predicate, subject examples fixme: (example needed) attributes inherited from xul element align, allowevents, allownegativeassert
ions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, posit
ion, preference-editable, querytype, ref, removeelement, sortdirect
ion, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties object type: string the object of the element.
...ontextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposit
ion, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaul...
broadcaster - Archive of obsolete content
more informat
ion is available in the broadcasters and observers xul tutorial.
... examples (example needed) attributes inherited from xul element align, allowevents, allownegativeassert
ions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, posit
ion, preference-editable, querytype, ref, removeelement, sortdirect
ion, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hi...
...dden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposit
ion, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceur...
broadcasterset - Archive of obsolete content
more informat
ion is available in the xul tutorial.
... examples (example needed) attributes inherited from xul element align, allowevents, allownegativeassert
ions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, posit
ion, preference-editable, querytype, ref, removeelement, sortdirect
ion, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hi...
...dden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposit
ion, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceur...
column - Archive of obsolete content
more informat
ion is available in the xul tutorial.
... attributes inherited from xul element align, allowevents, allownegativeassert
ions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, posit
ion, preference-editable, querytype, ref, removeelement, sortdirect
ion, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, hei...
...ght, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposit
ion, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupname...
commandset - Archive of obsolete content
in addit
ion, this element can hold a command updater which is used to update commands when certain events occur.
... more informat
ion is available in the xul tutorial.
...textmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposit
ion, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaul...
grippy - Archive of obsolete content
more informat
ion is available in the xul tutorial.
... examples (example needed) attributes inherited from xul element align, allowevents, allownegativeassert
ions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, posit
ion, preference-editable, querytype, ref, removeelement, sortdirect
ion, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hi...
...dden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposit
ion, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceur...
menubar - Archive of obsolete content
more informat
ion is available in the xul tutorial.
... attributes grippyhidden, statusbar properties accessibletype, statusbar examples <menubar id="sample-menubar"> <menu id="act
ion-menu" label="act
ion"> <menupopup id="act
ion-popup"> <menuitem label="new"/> <menuitem label="save" disabled="true"/> <menuitem label="close"/> <menuseparator/> <menuitem label="quit"/> </menupopup> </menu> <menu id="edit-menu" label="edit"> <menupopup id="edit-popup"> <menuitem label="undo"/> <menuitem label="redo"/> </menupopup> </menu> </menubar> attributes grippyhidden seamonkey only type: boolean when set to true, the grippy will be hidden.
...textmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposit
ion, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaul...
observes - Archive of obsolete content
more informat
ion is available in the xul tutorial.
... inherited from xul element align, allowevents, allownegativeassert
ions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, posit
ion, preference-editable, querytype, ref, removeelement, sortdirect
ion, sortresource, sortr...
...textmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposit
ion, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaul...
param - Archive of obsolete content
for more informat
ion, see query_parameters.
... type type: one of the values below the type of the parameter's value integer 32 bit integer int64 64 bit integer double double-precis
ion floating-point number string string literal, the default value properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , ...
..., ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposit
ion, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), re...
queryset - Archive of obsolete content
for more informat
ion, see multiple queries.
... attributes inherited from xul element align, allowevents, allownegativeassert
ions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, posit
ion, preference-editable, querytype, ref, removeelement, sortdirect
ion, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxhei...
...ght, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposit
ion, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize()...
resizer - Archive of obsolete content
th="16" height="16"/> <resizer dir="bottomleft" style="background: black; -moz-appearance: none;" element="button" left="0" bottom="0" width="16" height="16"/> <resizer dir="bottomright" style="background: black; -moz-appearance: none;" element="button" right="0" bottom="0" width="16" height="16"/> </stack> attributes dir type: one of the values below the direct
ion that the window is resized.
... inherited from xul element align, allowevents, allownegativeassert
ions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, posit
ion, preference-editable, querytype, ref, removeelement, sortdirect
ion, sortresource, sortr...
...textmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposit
ion, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaul...
row - Archive of obsolete content
more informat
ion is available in the xul tutorial.
... attributes inherited from xul element align, allowevents, allownegativeassert
ions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, posit
ion, preference-editable, querytype, ref, removeelement, sortdirect
ion, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, hei...
...ght, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposit
ion, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupname...
separator - Archive of obsolete content
it is funct
ionally equivalent to a spacer except it defaults to a small size (usually 1.5 ems).
... inherited from xul element align, allowevents, allownegativeassert
ions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, posit
ion, preference-editable, querytype, ref, removeelement, sortdirect
ion, sortresource, sortr...
...textmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposit
ion, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaul...
spacer - Archive of obsolete content
more informat
ion is available in the xul tutorial.
... examples <box> <button label="left"/> <spacer flex="1"/> <button label="right"/> </box> attributes inherited from xul element align, allowevents, allownegativeassert
ions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, posit
ion, preference-editable, querytype, ref, removeelement, sortdirect
ion, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, conte...
...xtmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposit
ion, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultn...
spinbuttons - Archive of obsolete content
spin buttons are not used as separate elements, but are used in combinat
ion with other elements to create a control that can be increased and decreased.
... attributes inherited from xul element align, allowevents, allownegativeassert
ions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, posit
ion, preference-editable, querytype, ref, removeelement, sortdirect
ion, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapse...
...textmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposit
ion, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaul...
tabpanels - Archive of obsolete content
more informat
ion is available in the xul tutorial.
... inherited from xul element align, allowevents, allownegativeassert
ions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, posit
ion, preference-editable, querytype, ref, removeelement, sortdirect
ion, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width...
... methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposit
ion, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaul...
toolbargrippy - Archive of obsolete content
more informat
ion is available in the xul tutorial.
... properties accessible examples (example needed) attributes inherited from xul element align, allowevents, allownegativeassert
ions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, posit
ion, preference-editable, querytype, ref, removeelement, sortdirect
ion, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties accessible type: nsiaccessible returns the accessibility object for the element.
...textmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposit
ion, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaul...
toolbaritem - Archive of obsolete content
the element is used, for example, to hold the locat
ion bar's textbox in firefox.
...enuitem label="train"/> </menupopup> </menulist> </toolbaritem> <toolbaritem id="sample-toolbutton-unified"> <toolbarbutton id="myext-button1" class="toolbarbutton-1" label="label1" /> <toolbarbutton id="myext-button2" class="toolbarbutton-1" label="labe2l" /> </toolbaritem> attributes inherited from xul element align, allowevents, allownegativeassert
ions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, posit
ion, preference-editable, querytype, ref, removeelement, sortdirect
ion, sortresource, sortr...
...textmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposit
ion, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaul...
toolbarseparator - Archive of obsolete content
it is funct
ionally equivalent to a normal separator but some themes may apply a different appearance.
... properties accessibletype examples <toolbox> <toolbar> <toolbarbutton label="button 1"/> <toolbarseparator /> <toolbarbutton label="button 2"/> </toolbar> </toolbox> attributes inherited from xul element align, allowevents, allownegativeassert
ions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, posit
ion, preference-editable, querytype, ref, removeelement, sortdirect
ion, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties a...
...ontextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposit
ion, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaul...
treechildren - Archive of obsolete content
more informat
ion is available in the xul tutorial.
... inherited from xul element align, allowevents, allownegativeassert
ions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, posit
ion, preference-editable, querytype, ref, removeelement, sortdirect
ion, sortresource, sortresource2, statustext, style, template, tooltip, tool...
...textmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposit
ion, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaul...
treecols - Archive of obsolete content
more informat
ion is available in the xul tutorial.
... inherited from xul element align, allowevents, allownegativeassert
ions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, posit
ion, preference-editable, querytype, ref, removeelement, sortdirect
ion, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties ac...
...textmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposit
ion, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaul...
treeseparator - Archive of obsolete content
for more informat
ion, see styling a tree.
... inherited from xul element align, allowevents, allownegativeassert
ions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, posit
ion, preference-editable, querytype, ref, removeelement, sortdirect
ion, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwid...
...th, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposit
ion, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), querysele...
xulauncher - Archive of obsolete content
#!/bin/bash -e # a simple bash script to create a minimal xulrunner dir structure and # needed meta files in /tmp, copy the xul-file over and start it # usage: # xulauncher xulfile.xul [opt
ions] ############################################################################## # check if theres atleast one parameter ############################################################################## if [ $# -lt 1 ] then echo "you need to give the xul file as first parameter" exit fi # check if 1st parameter is a file ############################################################################## if [ !
... -f "$1" ] then echo "\"$1\" is not a file" exit fi # define some variables ############################################################################## wd=/tmp ext=".xul" xulfile=`basename $1` xulname=${xulfile%$ext} xuldir="$wd/$xulname/chrome/$xulname/" xulprefdir="$wd/$xulname/defaults/preferences" xulappini="$wd/$xulname/applicat
ion.ini" xulmanifest="$wd/$xulname/chrome/chrome.manifest" xulprefs="$wd/$xulname/defaults/preferences/prefs.js" # make minimal directory structure ############################################################################## mkdir -p $xuldir mkdir -p $xulprefdir # create applicat
ion.ini file ############################################################################## echo " [app] vendor=xulauncher.sh name=$xulname vers
ion=0.0.1 buildid=`date +%y%m...
...%d` [gecko] minvers
ion=1.8 maxvers
ion=1.9 ">$xulappini # create chrome.manifest file ############################################################################## echo " content $xulname file:$xulname/ ">$xulmanifest # create prefs.js file ############################################################################## echo " pref(\"toolkit.defaultchromeuri\", \"chrome://$xulname/content/$xulfile\"); /* debugging prefs */ pref(\"browser.dom.window.dump.enabled\", true); pref(\"javascript.opt
ions.showinconsole\", true); pref(\"javascript.opt
ions.strict\", true); pref(\"nglayout.debug.disable_xul_cache\", true); pref(\"nglayout.debug.disable_xul_fastload\", true); ">$xulprefs # copy xul file to right locat
ion and run it #######################################################################...
Mozprocess - Archive of obsolete content
this documentat
ion is no longer maintained.
... for more informat
ion about mozprocess as part of the mozbase project, please see the mozbase project page.
...ectory for cmd; defaults to none env={}, # environment to use for the process; defaults to os.environ ) exit_code = process.waitforfinish(timeout=60) # seconds see an example in https://github.com/mozilla/mozbase/b...profilepath.py processhandler may be subclassed to handle process timeouts (by overriding the ontimeout() method), process complet
ion (by overriding onfinish()), and to process the command output (by overriding processoutputline()).
2006-11-17 - Archive of obsolete content
discuss
ions mozilla access to http?
... firefox 2.0 - window.focus() user quest
ions where the change in behav
iour in window.focus() is a bug or was intented.
... two quest
ions: (1) launching a separate intance of firefox.exe, and (2) programmatically closing a window user has two quest
ions about using adobe flex builder debugger in firefox 2.0.
Element: keypress event - Web APIs
examples of keys that produce a character value are alphabetic, numeric, and punctuat
ion keys.
... interface keyboardevent bubbles yes cancelable yes default act
ion varies: keypress event; launch text composit
ion system; blur and focus events; domactivate event; other event examples addeventlistener keypress example this example logs the keyboardevent.code value whenever you press a key after focussing the <input> element.
... <div> <label for="sample">focus the input and type something:</label> <input type="text" name="text" id="sample"> </div> <p id="log"></p> const log = document.getelementbyid('log'); const input = document.queryselector('input'); input.addeventlistener('keypress', logkey); funct
ion logkey(e) { log.textcontent += ` ${e.code}`; } onkeypress equivalent input.onkeypress = logkey; specificat
ions specificat
ion status ui events working draft ...
Element: keyup event - Web APIs
since firefox 65, the keyup and keydown events are now fired during ime composit
ion, to improve cross-browser compatibility for cjkt users (bug 354358, also see keydown and keyup events are now fired during ime composit
ion for more useful details).
... to ignore all keyup events that are part of composit
ion, 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); funct
ion logkey(e) { log.textcontent += ` ${e.code}`; } onkeyup equivalent input.onkeyup = logkey; specificat
ions specificat
ion status ui events working draft ...
Element: mouseout event - Web APIs
html <ul id="test"> <li>item 1</li> <li>item 2</li> <li>item 3</li> </ul> javascript let test = document.getelementbyid("test"); // briefly make the list purple when the mouse moves off the // <ul> element test.addeventlistener("mouseleave", funct
ion( event ) { // highlight the mouseleave target event.target.style.color = "purple"; // reset the color after a short delay settimeout(funct
ion() { event.target.style.color = ""; }, 1000); }, false); // briefly make an <li> orange when the mouse moves off of it test.addeventlistener("mouseout", funct
ion( event ) { // highlight the mouseout target event.target.style.color = "ora...
...nge"; // reset the color after a short delay settimeout(funct
ion() { event.target.style.color = ""; }, 500); }, false); result specificat
ions specificat
ion status ui eventsthe definit
ion of 'mouseout' in that specificat
ion.
... working draft document object model (dom) level 3 events specificat
ionthe definit
ion of 'mouseout' in that specificat
ion.
Element: mouseover event - Web APIs
html <ul id="test"> <li>item 1</li> <li>item 2</li> <li>item 3</li> </ul> javascript let test = document.getelementbyid("test"); // this handler will be executed only once when the cursor // moves over the unordered list test.addeventlistener("mouseenter", funct
ion( event ) { // highlight the mouseenter target event.target.style.color = "purple"; // reset the color after a short delay settimeout(funct
ion() { event.target.style.color = ""; }, 500); }, false); // this handler will be executed every time the cursor // is moved over a different list item test.addeventlistener("mouseover", funct
ion( event ) { // highlight the mouseover target ...
... event.target.style.color = "orange"; // reset the color after a short delay settimeout(funct
ion() { event.target.style.color = ""; }, 500); }, false); result specificat
ions specificat
ion status ui eventsthe definit
ion of 'mouseover' in that specificat
ion.
... working draft document object model (dom) level 3 events specificat
ionthe definit
ion of 'mouseover' in that specificat
ion.
Element.name - Web APIs
name can be used in the document.getelementsbyname() method, a form and with the form elements collect
ion.
... when used with a form or elements collect
ion, it may return a single element or a collect
ion.
... syntax htmlelement.name = string let elname = htmlelement.name let fcontrol = htmlformelement.elementname let controlcollect
ion = htmlformelement.elements.elementname example <form act
ion="" name="forma"> <input type="text" value="foo"> </form> <script type="text/javascript"> // get a reference to the first element in the form let formelement = document.forms['forma'].elements[0] // give it a name formelement.name = 'inputa' // show the value of the input alert(document.forms['forma'].elements['inputa'].value) </script> notes in internet explorer (ie), the name property of dom objects created using document.createelement() can't be set or modified.
Element.scrollIntoViewIfNeeded() - Web APIs
this method is a proprietary variat
ion of the standard element.scrollintoview() method.
... syntax todo parameters opt_center is an opt
ional boolean value with a default value of true: if true, the element will be aligned so it is centered within the visible area of the scrollable ancestor.
... example var element = document.getelementbyid("my-el"); element.scrollintoviewifneeded(); element.scrollintoviewifneeded(true); // centers the element in the visible area specificat
ions not part of any specificat
ion.
Element.scrollLeftMax - Web APIs
syntax var pxl = element.scrollleftmax; specificat
ions this property is not part of any specificat
ion.
... desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on
iossamsung internetscrollleftmax non-standardchrome no support noedge no support nofirefox full support 16ie no support noopera no support nosafari no support nowebview...
... android no support nochrome android no support nofirefox android full support 16opera android no support nosafari
ios no support nosamsung internet android no support nolegend full support full support no support no supportnon-standard.
Element.setAttribute() - Web APIs
see the example below for a practical demonstrat
ion.
... except
ions invalidcharactererror the specified attribute name contains one or more characters which are not valid in attribute names.
...g with attr nodes directly (seldom used) dom level 2 namespace-aware methods for dealing with attr nodes directly (seldom used) setattribute (dom 1) setattributens setattributenode setattributenodens getattribute (dom 1) getattributens getattributenode getattributenodens hasattribute (dom 2) hasattributens - - removeattribute (dom 1) removeattributens removeattributenode - specificat
ions specificat
ion status comment domthe definit
ion of 'setattribute()' in that specificat
ion.
Element.setCapture() - Web APIs
<html> <head> <title>mouse capture example</title> <style type="text/css"> #mybutton { border: solid black 1px; color: black; padding: 2px; box-shadow: black 2px 2px; } </style> <script type="text/javascript"> funct
ion init() { var btn = document.getelementbyid("mybutton"); if (btn.setcapture) { btn.addeventlistener("mousedown", mousedown, false); btn.addeventlistener("mouseup", mouseup, false); } else { document.getelementbyid("output").innerhtml = "sorry, there appears to be no setcapture support on this browser"; } } funct
ion mousedown(e) { ...
... e.target.setcapture(); e.target.addeventlistener("mousemove", mousemoved, false); } funct
ion mouseup(e) { e.target.removeeventlistener("mousemove", mousemoved, false); } funct
ion mousemoved(e) { var output = document.getelementbyid("output"); output.innerhtml = "posit
ion: " + e.clientx + ", " + e.clienty; } </script> </head> <body onload="init()"> <p>this is an example of how to use mouse capture on elements in gecko 2.0.</p> <p><a id="mybutton" href="#">test me</a></p> <div id="output">no events yet</div> </body> </html> view live examples notes the element may not be scrolled completely to the top or bottom, depending on the layout of other elements.
... specificat
ion based on internet explorer's implementat
ion.
Element.shadowRoot - Web APIs
inside the <custom-square> element's class definit
ion we include some life cycle callbacks that make a call to an external funct
ion, updatestyle(), which actually applies the size and color to the element.
... connectedcallback() { console.log('custom square element added to page.'); updatestyle(this); } attributechangedcallback(name, oldvalue, newvalue) { console.log('custom square element attributes changed.'); updatestyle(this); } in the updatestyle() funct
ion itself, we get a reference to the shadow dom using element.shadowroot.
... from here we use standard dom traversal techniques to find the <style> element inside the shadow dom and then update the css found inside it: funct
ion updatestyle(elem) { const shadow = elem.shadowroot; const childnodes = array.from(shadow.childnodes); childnodes.foreach(childnode => { if (childnode.nodename === 'style') { childnode.textcontent = ` div { width: ${elem.getattribute('l')}px; height: ${elem.getattribute('l')}px; background-color: ${elem.getattribute('c')}; } `; } }); } specificat
ions specificat
ion status comment domthe definit
ion of 'shadowroot' in that specificat
ion.
ElementTraversal - Web APIs
specificat
ions specificat
ion status comment domthe definit
ion of 'childnode' in that specificat
ion.
... living standard splitted the elementtraversal interface in parentnode and childnode element traversal specificat
ionthe definit
ion of 'elementtraversal' in that specificat
ion.
... obsolete initial definit
ion ...
Encoding API - Web APIs
the encoding api provides a mechanism for handling text in var
ious character encodings, including legacy non-utf-8 encodings.
... stringview – a c-like representat
ion of strings based on typed arrays.
... specificat
ions specificat
ion status comment encoding living standard initial definit
ion.
Event.defaultPrevented - Web APIs
syntax var defaultwasprevented = event.defaultprevented; value a boolean, where true indicates that the default user agent act
ion was prevented, and false indicates that it was not.
... html <p><a id="link1" href="#link1">visit link 1</a></p> <p><a id="link2" href="#link2">try to visit link 2</a> (you can't)</p> <p id="log"></p> javascript funct
ion stoplink(event) { event.preventdefault(); } funct
ion logclick(event) { const log = document.getelementbyid('log'); if (event.target.tagname === 'a') { if (event.defaultprevented) { log.innertext = 'sorry, but you cannot visit this link!\n' + log.innertext; } else { log.innertext = 'visiting link...\n' + log.innertext; } } } const a = document.getelementbyid('link2'); a.addeventlistener('click', stoplink); document.addeventlistener('click', logclick); re...
...sult specificat
ions specificat
ion status comment domthe definit
ion of 'event.defaultprevented()' in that specificat
ion.
Event.isTrusted - Web APIs
the istrusted read-only property of the event interface is a boolean that is true when the event was generated by a user act
ion, and false when the event was created or modified by a script or dispatched via eventtarget.dispatchevent().
... syntax var eventistrusted = event.istrusted; value boolean example if (e.istrusted) { /* the event is trusted */ } else { /* the event is not trusted */ } specificat
ion specificat
ion status comment domthe definit
ion of 'event.istrusted' in that specificat
ion.
... living standard document object model (dom) level 3 events specificat
ionthe definit
ion of 'trusted events' in that specificat
ion.
EventListener.handleEvent() - Web APIs
specificat
ions specificat
ion status comment domthe definit
ion of 'eventlistener.handleevent()' in that specificat
ion.
... document object model (dom) level 2 events specificat
ionthe definit
ion of 'eventlistener.handleevent()' in that specificat
ion.
... obsolete initial definit
ion.
SharedWorkerGlobalScope.name - Web APIs
the name read-only property of the sharedworkerglobalscope interface returns the name that the sharedworker was (opt
ionally) given when it was created.
... example if a shared worker is created using a constructor with a name opt
ion: var myworker = new sharedworker("worker.js", { name : "mysharedworker" }); the sharedworkerglobalscope will now have a name of "mysharedworker", returnable by running self.name from inside the shared worker.
... specificat
ions specificat
ion status comment html living standardthe definit
ion of 'name' in that specificat
ion.
SourceBuffer.appendBuffer() - Web APIs
except
ions none.
... specificat
ions specificat
ion status comment media source extens
ionsthe definit
ion of 'appendbuffer()' in that specificat
ion.
... recommendat
ion initial definit
ion.
SourceBuffer.appendBufferAsync() - Web APIs
example this simplified example async funct
ion, fillsourcebuffer(), takes as input parameters buffersource, buffer, and a sourcebuffer to which to append the source media from the buffer.
... async funct
ion fillsourcebuffer(buffer, msbuffer) { try { while(true) { await msbuffer.appendbufferasync(buffer); } } catch(e) { handleexcept
ion(e); } } specificat
ions not currently part of any specificat
ion.
... specificat
ion status comment media source extens
ions recommendat
ion initial definit
ion; does not include this method.
SourceBuffer.remove() - Web APIs
except
ions except
ion explanat
ion invalidaccesserror the mediasource.durat
ion property is equal to nan, the start parameter is negative or greater than mediasource.durat
ion, or the end parameter is less than or equal to start or equal to nan.
... specificat
ions specificat
ion status comment media source extens
ionsthe definit
ion of 'remove()' in that specificat
ion.
... recommendat
ion initial definit
ion.
SourceBuffer.removeAsync() - Web APIs
example this example establishes an asynchronous funct
ion, emptysourcebuffer(), which simply clears the contents of the specified sourcebuffer.
... async funct
ion emptysourcebuffer(msbuffer) { await msbuffer.removeasync(0, infinity).catch(funct
ion(e) { handleexcept
ion(e); } } specificat
ions not currently part of the mse specificat
ion.
... specificat
ion status comment media source extens
ions recommendat
ion initial definit
ion.
SourceBuffer.trackDefaults - Web APIs
the trackdefaults property of the sourcebuffer interface specifies the default values to use if kind, label, and/or language informat
ion is not available in the initializat
ion segment of the media to be appended to the sourcebuffer.
... except
ions the following except
ions may be thrown when setting a new value for this property.
... except
ion explanat
ion invalidstateerror one or more of the sourcebuffer objects in mediasource.sourcebuffers are being updated (i.e.
SourceBuffer.updating - Web APIs
whether an sourcebuffer.appendbuffer(), sourcebuffer.appendstream(), or sourcebuffer.remove() operat
ion is currently in progress.
... example tbd specificat
ions specificat
ion status comment media source extens
ionsthe definit
ion of 'updating' in that specificat
ion.
... recommendat
ion initial definit
ion.
SpeechGrammar.weight - Web APIs
the opt
ional weight property of the speechgrammar interface sets and returns the weight of the speechgrammar object.
...ors; public <color> = aqua | azure | beige | bisque | black | blue | brown | chocolate | coral | crimson | cyan | fuchsia | ghostwhite | gold | goldenrod | gray | green | indigo | ivory | khaki | lavender | lime | linen | magenta | maroon | moccasin | navy | olive | orange | orchid | peru | pink | plum | purple | red | salmon | sienna | silver | snow | tan | teal | thistle | tomato | turquoise | v
iolet | white | yellow ;' var recognit
ion = new speechrecognit
ion(); var speechrecognit
ionlist = new speechgrammarlist(); speechrecognit
ionlist.addfromstring(grammar, 1); recognit
ion.grammars = speechrecognit
ionlist; console.log(speechrecognit
ionlist[0].src); // should return the same as the contents of the grammar variable console.log(speechrecognit
ionlist[0].weight); // should return 1 - the sam...
... specificat
ions specificat
ion status comment web speech apithe definit
ion of 'weight' in that specificat
ion.
SpeechGrammarList.addFromString() - Web APIs
weight opt
ional a float representing the weight of the grammar relative to other grammars present in the speechgrammarlist.
... the weight means the importance of this grammar, or the likelihood that it will be recognised by the speech recognit
ion service.
...ors; public <color> = aqua | azure | beige | bisque | black | blue | brown | chocolate | coral | crimson | cyan | fuchsia | ghostwhite | gold | goldenrod | gray | green | indigo | ivory | khaki | lavender | lime | linen | magenta | maroon | moccasin | navy | olive | orange | orchid | peru | pink | plum | purple | red | salmon | sienna | silver | snow | tan | teal | thistle | tomato | turquoise | v
iolet | white | yellow ;' var recognit
ion = new speechrecognit
ion(); var speechrecognit
ionlist = new speechgrammarlist(); speechrecognit
ionlist.addfromstring(grammar, 1); recognit
ion.grammars = speechrecognit
ionlist; specificat
ions specificat
ion status comment web speech apithe definit
ion of 'addfromstring()' in that specificat
ion.
SpeechGrammarList - Web APIs
the speechgrammarlist interface of the web speech api represents a list of speechgrammar objects containing words or patterns of words that we want the recognit
ion service to recognize.
... examples in our simple speech color changer example, we create a new speechrecognit
ion object instance using the speechrecognit
ion() constructor, create a new speechgrammarlist, add our grammar string to it using the speechgrammarlist.addfromstring method, and set it to be the grammar that will be recognised by the speechrecognit
ion instance using the speechrecognit
ion.grammars property.
...ors; public <color> = aqua | azure | beige | bisque | black | blue | brown | chocolate | coral | crimson | cyan | fuchsia | ghostwhite | gold | goldenrod | gray | green | indigo | ivory | khaki | lavender | lime | linen | magenta | maroon | moccasin | navy | olive | orange | orchid | peru | pink | plum | purple | red | salmon | sienna | silver | snow | tan | teal | thistle | tomato | turquoise | v
iolet | white | yellow ;' var recognit
ion = new speechrecognit
ion(); var speechrecognit
ionlist = new speechgrammarlist(); speechrecognit
ionlist.addfromstring(grammar, 1); recognit
ion.grammars = speechrecognit
ionlist; specificat
ions specificat
ion status comment web speech apithe definit
ion of 'speechgrammarlist()' in that specificat
ion.
SpeechSynthesis.getVoices() - Web APIs
example javascript funct
ion populatevoicelist() { if(typeof speechsynthesis === 'undefined') { return; } var voices = speechsynthesis.getvoices(); for(var i = 0; i < voices.length; i++) { var opt
ion = document.createelement('opt
ion'); opt
ion.textcontent = voices[i].name + ' (' + voices[i].lang + ')'; if(voices[i].default) { opt
ion.textcontent += ' -- default'; } opt
ion.setattribute...
...('data-lang', voices[i].lang); opt
ion.setattribute('data-name', voices[i].name); document.getelementbyid("voiceselect").appendchild(opt
ion); } } populatevoicelist(); if (typeof speechsynthesis !== 'undefined' && speechsynthesis.onvoiceschanged !== undefined) { speechsynthesis.onvoiceschanged = populatevoicelist; } html <select id="voiceselect"></select> specificat
ions specificat
ion status comment web speech apithe definit
ion of 'getvoices()' in that specificat
ion.
... draft initial definit
ion ...
SpeechSynthesis - Web APIs
the speechsynthesis interface of the web speech api is the controller interface for the speech service; this can be used to retrieve informat
ion about the synthesis voices available on the device, start and pause speech, and other commands besides.
... window.speechsynthesis; var inputform = document.queryselector('form'); var inputtxt = document.queryselector('.txt'); var voiceselect = document.queryselector('select'); var pitch = document.queryselector('#pitch'); var pitchvalue = document.queryselector('.pitch-value'); var rate = document.queryselector('#rate'); var ratevalue = document.queryselector('.rate-value'); var voices = []; funct
ion populatevoicelist() { voices = synth.getvoices(); for(i = 0; i < voices.length ; i++) { var opt
ion = document.createelement('opt
ion'); opt
ion.textcontent = voices[i].name + ' (' + voices[i].lang + ')'; if(voices[i].default) { opt
ion.textcontent += ' -- default'; } opt
ion.setattribute('data-lang', voices[i].lang); opt
ion.setattribute('data-name', voices[i].nam...
...e); voiceselect.appendchild(opt
ion); } } populatevoicelist(); if (speechsynthesis.onvoiceschanged !== undefined) { speechsynthesis.onvoiceschanged = populatevoicelist; } inputform.onsubmit = funct
ion(event) { event.preventdefault(); var utterthis = new speechsynthesisutterance(inputtxt.value); var selectedopt
ion = voiceselect.selectedopt
ions[0].getattribute('data-name'); for(i = 0; i < voices.length ; i++) { if(voices[i].name === selectedopt
ion) { utterthis.voice = voices[i]; } } utterthis.pitch = pitch.value; utterthis.rate = rate.value; synth.speak(utterthis); inputtxt.blur(); } specificat
ions specificat
ion status comment web speech apithe definit
ion of 'speechsynthesis' in that specificat
ion.
SpeechSynthesisErrorEvent - Web APIs
the speechsynthesiserrorevent interface of the web speech api contains informat
ion about any errors that occur while processing speechsynthesisutterance objects in the speech service.
... inputform.onsubmit = funct
ion(event) { event.preventdefault(); var utterthis = new speechsynthesisutterance(inputtxt.value); var selectedopt
ion = voiceselect.selectedopt
ions[0].getattribute('data-name'); for(i = 0; i < voices.length ; i++) { if(voices[i].name === selectedopt
ion) { utterthis.voice = voices[i]; } } synth.speak(utterthis); utterthis.onerror = funct
ion(event) { console.log('an ...
...error has occurred with the speech synthesis: ' + event.error); } inputtxt.blur(); } specificat
ions specificat
ion status comment web speech apithe definit
ion of 'speechsynthesiserrorevent' in that specificat
ion.
SpeechSynthesisUtterance.onboundary - Web APIs
the onboundary property of the speechsynthesisutterance interface represents an event handler that will run when the spoken utterance reaches a word or sentence boundary (when the boundary event fires.) syntax speechsynthesisutteranceinstance.onboundary = funct
ion() { ...
... inputform.onsubmit = funct
ion(event) { event.preventdefault(); var utterthis = new speechsynthesisutterance(inputtxt.value); var selectedopt
ion = voiceselect.selectedopt
ions[0].getattribute('data-name'); for(i = 0; i < voices.length ; i++) { if(voices[i].name === selectedopt
ion) { utterthis.voice = voices[i]; } } synth.speak(utterthis); utterthis.onboundary = funct
ion(event) { console.log(event.name + ' boundary reached after ' + event.elapsedtime + ' milliseconds.'); } inputtxt.blur(); } specificat
ions ...
...specificat
ion status comment web speech apithe definit
ion of 'onboundary' in that specificat
ion.
SpeechSynthesisUtterance.onend - Web APIs
the onend property of the speechsynthesisutterance interface represents an event handler that will run when the utterance has finished being spoken (when the end event fires.) syntax speechsynthesisutteranceinstance.onend = funct
ion() { ...
... inputform.onsubmit = funct
ion(event) { event.preventdefault(); var utterthis = new speechsynthesisutterance(inputtxt.value); var selectedopt
ion = voiceselect.selectedopt
ions[0].getattribute('data-name'); for(i = 0; i < voices.length ; i++) { if(voices[i].name === selectedopt
ion) { utterthis.voice = voices[i]; } } synth.speak(utterthis); utterthis.onend = funct
ion(event) { console.log('utterance has finished being spoken after ' + event.elapsedtime + ' milliseconds.'); } inputtxt.blur(); } specificat
ions ...
...specificat
ion status comment web speech apithe definit
ion of 'onend' in that specificat
ion.
Int32Array() constructor - JavaScript
once established, you can reference elements in the array using the object's methods, or using standard array index syntax (that is, using bracket notat
ion).
... buffer, byteoffset, length when called with a buffer, and opt
ionally a byteoffset and a length argument, a new typed array view is created that views the specified arraybuffer.
...e.log(int32.length); // 2 console.log(int32.bytes_per_element); // 4 // from an array var arr = new int32array([21,31]); console.log(arr[1]); // 31 // from another typedarray var x = new int32array([21, 31]); var y = new int32array(x); console.log(y[0]); // 21 // from an arraybuffer var buffer = new arraybuffer(16); var z = new int32array(buffer, 0, 4); // from an iterable var iterable = funct
ion*(){ yield* [1,2,3]; }(); var int32 = new int32array(iterable); // int32array[1, 2, 3] specificat
ions specificat
ion ecmascript (ecma-262)the definit
ion of 'typedarray constructors' in that specificat
ion.
Int8Array() constructor - JavaScript
once established, you can reference elements in the array using the object's methods, or using standard array index syntax (that is, using bracket notat
ion).
... buffer, byteoffset, length when called with a buffer, and opt
ionally a byteoffset and a length argument, a new typed array view is created that views the specified arraybuffer.
... console.log(int8.length); // 2 console.log(int8.bytes_per_element); // 1 // from an array var arr = new int8array([21,31]); console.log(arr[1]); // 31 // from another typedarray var x = new int8array([21, 31]); var y = new int8array(x); console.log(y[0]); // 21 // from an arraybuffer var buffer = new arraybuffer(8); var z = new int8array(buffer, 1, 4); // from an iterable var iterable = funct
ion*(){ yield* [1,2,3]; }(); var int8 = new int8array(iterable); // int8array[1, 2, 3] specificat
ions specificat
ion ecmascript (ecma-262)the definit
ion of 'typedarray constructors' in that specificat
ion.
Intl.DateTimeFormat.prototype.formatRange() - JavaScript
the intl.datetimeformat.prototype.formatrange() formats a date range in the most concise way based on the locale and opt
ions provided when instantiating intl.datetimeformat object.
... syntax intl.datetimeformat.prototype.formatrange(startdate, enddate) examples basic formatrange usage this method receives two dates and formats the date range in the most concise way based on the locale and opt
ions provided when instantiating intl.datetimeformat.
...:00 am' // > '1/10/07, 10:00 – 11:00 am' // > '1/10/07, 10:00 am – 1/20/07, 10:00 am' let fmt2 = new intl.datetimeformat("en", { year: 'numeric', month: 'short', day: 'numeric' }); console.log(fmt2.format(date1)); console.log(fmt2.formatrange(date1, date2)); console.log(fmt2.formatrange(date1, date3)); // > 'jan 10, 2007' // > 'jan 10, 2007' // > 'jan 10 – 20, 2007' specificat
ions specificat
ion intl.datetimeformat.formatrangethe definit
ion of 'formatrange()' in that specificat
ion.
Intl.ListFormat - JavaScript
intl.listformat.prototype.formattoparts() returns an array of objects representing the different components that can be used to format a list of values in a locale-aware fash
ion.
... const list = ['motorcycle', 'bus', 'car']; console.log(new intl.listformat('en-gb', { style: 'long', type: 'conjunct
ion' }).format(list)); // > motorcycle, bus and car console.log(new intl.listformat('en-gb', { style: 'short', type: 'disjunct
ion' }).format(list)); // > motorcycle, bus or car console.log(new intl.listformat('en-gb', { style: 'narrow', type: 'unit' }).format(list)); // > motorcycle bus car using formattoparts the following example shows how to create a list formatter returning formatted parts const list = ['motorcycle', 'bus', 'car']; console.log(new intl.listformat('en-gb', { style: 'long', type: 'conjunct
ion' }).formattoparts(list)); // [ { "type": "e...
...lement", "value": "motorcycle" }, // { "type": "literal", "value": ", " }, // { "type": "element", "value": "bus" }, // { "type": "literal", "value": ", and " }, // { "type": "element", "value": "car" } ]; specificat
ions specificat
ion intl.listformatthe definit
ion of 'listformat' in that specificat
ion.
Intl.PluralRules.select() - JavaScript
return value a string representing the pluralizat
ion category of the number, can be one of zero, one, two, few, many or other.
... descript
ion this funct
ion selects a pluralizat
ion category according to the locale and formatting opt
ions of a pluralrules object.
... examples using select() new intl.pluralrules('ar-eg').select(0); // → 'zero' new intl.pluralrules('ar-eg').select(1); // → 'one' new intl.pluralrules('ar-eg').select(2); // → 'two' new intl.pluralrules('ar-eg').select(6); // → 'few' new intl.pluralrules('ar-eg').select(18); // → 'many' specificat
ions specificat
ion ecmascript internat
ionalizat
ion api (ecma-402)the definit
ion of 'intl.pluralrules.select()' in that specificat
ion.
Intl.PluralRules - JavaScript
instance methods intl.pluralrules.prototype.resolvedopt
ions() returns a new object with properties reflecting the locale and collat
ion opt
ions computed during initializat
ion of the object.
... examples using locales this example shows some of the variat
ions in localized plural rules.
... in order to get the format of the language used in the user interface of your applicat
ion, make sure to specify that language (and possibly some fallback languages) using the locales argument: // arabic has different plural rules new intl.pluralrules('ar-eg').select(0); // → 'zero' new intl.pluralrules('ar-eg').select(1); // → 'one' new intl.pluralrules('ar-eg').select(2); // → 'two' new intl.pluralrules('ar-eg').select(6); // → 'few' new intl.pluralrules('ar-eg').select(18); // → 'many' specificat
ions specificat
ion ecmascript internat
ionalizat
ion api (ecma-402)the definit
ion of 'intl.pluralrules' in that specificat
ion.
Intl.RelativeTimeFormat - JavaScript
instance methods intl.relativetimeformat.prototype.format() formats a value and a unit according to the locale and formatting opt
ions of the given intl.relativetimeformat object.
... intl.relativetimeformat.prototype.resolvedopt
ions() returns a new object with properties reflecting the locale and formatting opt
ions computed during initializat
ion of the object.
...rtf.formattoparts(-1, "day"); // > [{ type: "literal", value: "yesterday"}] rtf.formattoparts(100, "day"); // > [{ type: "literal", value: "in " }, // > { type: "integer", value: "100", unit: "day" }, // > { type: "literal", value: " days" }] specificat
ions specificat
ion status comment ecmascript internat
ionalizat
ion api (ecma-402)the definit
ion of 'relativetimeformat' in that specificat
ion.
Map.prototype[@@iterator]() - JavaScript
the initial value of the @@iterator property is the same funct
ion object as the initial value of the entries method.
... syntax mymap[symbol.iterator] return value the map iterator funct
ion, which is the entries() funct
ion by default.
..."] console.log(mapiter.next().value) // [object, "baz"] using [@@iterator]() with for..of const mymap = new map() mymap.set('0', 'foo') mymap.set(1, 'bar') mymap.set({}, 'baz') for (const entry of mymap) { console.log(entry) } // ["0", "foo"] // [1, "bar"] // [{}, "baz"] for (const [key, value] of mymap) { console.log(`${key}: ${value}`) } // 0: foo // 1: bar // [object]: baz specificat
ions specificat
ion ecmascript (ecma-262)the definit
ion of 'map.prototype[@@iterator]()' in that specificat
ion.
get Map[@@species] - JavaScript
descript
ion the species accessor property returns the default constructor for map objects.
... examples species in ordinary objects the species property returns the default constructor funct
ion, which is the map constructor for map objects: map[symbol.species]; // funct
ion map() species in derived objects in a derived collect
ion object (e.g.
...however, you might want to overwrite this, in order to return parent map objects in your derived class methods: class mymap extends map { // overwrite mymap species to the parent map constructor static get [symbol.species]() { return map; } } specificat
ions specificat
ion ecmascript (ecma-262)the definit
ion of 'get map [ @@species ]' in that specificat
ion.
Map.prototype.size - JavaScript
descript
ion the value of size is an integer representing how many entries the map object has.
... a set accessor funct
ion for size is undefined; you can not change this property.
... examples using size var mymap = new map(); mymap.set('a', 'alpha'); mymap.set('b', 'beta'); mymap.set('g', 'gamma'); mymap.size // 3 specificat
ions specificat
ion ecmascript (ecma-262)the definit
ion of 'map.prototype.size' in that specificat
ion.
Math.acos() - JavaScript
the math.acos() funct
ion returns the arccosine (in radians) of a number, that is ∀x∊[-1;1],math.acos(x)=arccos(x)= the unique y∊[0;π]such thatcos(y)=x\forall x \in [{-1};1],\;\mathtt{\operatorname{math.acos}(x)} = \arccos(x) = \text{ the unique } \; y \in [0; \pi] \, \text{such that} \; \cos(y) = x the source for this interactive example is stored in a github repository.
... descript
ion the math.acos() method returns a numeric value between 0 and π radians for x between -1 and 1.
... specificat
ions specificat
ion ecmascript (ecma-262)the definit
ion of 'math.acos' in that specificat
ion.
Math.asin() - JavaScript
the math.asin() funct
ion returns the arcsine (in radians) of a number, that is ∀x∊[-1;1],math.asin(x)=arcsin(x)= the unique y∊[-π2;π2]such thatsin(y)=x\forall x \in [{-1};1],\;\mathtt{\operatorname{math.asin}(x)} = \arcsin(x) = \text{ the unique } \; y \in \left[-\frac{\pi}{2}; \frac{\pi}{2}\right] \, \text{such that} \; \sin(y) = x the source for this interactive example is stored in a github repository.
... descript
ion the math.asin() method returns a numeric value between -π2-\frac{\pi}{2} and π2\frac{\pi}{2} radians for x between -1 and 1.
... specificat
ions specificat
ion ecmascript (ecma-262)the definit
ion of 'math.asin' in that specificat
ion.
Math.cos() - JavaScript
the math.cos() static funct
ion returns the cosine of the specified angle, which must be specified in radians.
... descript
ion the math.cos() method returns a numeric value between -1 and 1, which represents the cosine of the angle.
... examples using math.cos() math.cos(0); // 1 math.cos(1); // 0.5403023058681398 math.cos(math.pi); // -1 math.cos(2 * math.pi); // 1 specificat
ions specificat
ion ecmascript (ecma-262)the definit
ion of 'math.cos' in that specificat
ion.
Math.cosh() - JavaScript
the math.cosh() funct
ion returns the hyperbolic cosine of a number, that can be expressed using the constant e: math.cosh(x)=ex+e-x2\mathtt{\operatorname{math.cosh(x)}} = \frac{e^x + e^{-x}}{2} the source for this interactive example is stored in a github repository.
... descript
ion because cosh() is a static method of math, you always use it as math.cosh(), rather than as a method of a math object you created (math is not a constructor).
... polyfill this can be emulated with the help of the math.exp() funct
ion: math.cosh = math.cosh || funct
ion(x) { return (math.exp(x) + math.exp(-x)) / 2; } or using only one call to the math.exp() funct
ion: math.cosh = math.cosh || funct
ion(x) { var y = math.exp(x); return (y + 1 / y) / 2; }; examples using math.cosh() math.cosh(0); // 1 math.cosh(1); // 1.5430806348152437 math.cosh(-1); // 1.5430806348152437 specificat
ions specificat
ion ecmascript (ecma-262)the definit
ion of 'math.cosh' in that specificat
ion.
Math.exp() - JavaScript
the math.exp() funct
ion returns ex, where x is the argument, and e is euler's number (also known as napier's constant), the base of the natural logarithms.
... descript
ion because exp() is a static method of math, you always use it as math.exp(), rather than as a method of a math object you created (math is not a constructor).
... examples using math.exp() math.exp(-1); // 0.36787944117144233 math.exp(0); // 1 math.exp(1); // 2.718281828459045 specificat
ions specificat
ion ecmascript (ecma-262)the definit
ion of 'math.exp' in that specificat
ion.
Math.expm1() - JavaScript
the math.expm1() funct
ion returns ex - 1, where x is the argument, and e the base of the natural logarithms.
... descript
ion because expm1() is a static method of math, you always use it as math.expm1(), rather than as a method of a math object you created (math is not a constructor).
... polyfill this can be emulated with the help of the math.exp() funct
ion: math.expm1 = math.expm1 || funct
ion(x) { return math.exp(x) - 1; }; examples using math.expm1() math.expm1(-1); // -0.6321205588285577 math.expm1(0); // 0 math.expm1(1); // 1.718281828459045 specificat
ions specificat
ion ecmascript (ecma-262)the definit
ion of 'math.expm1' in that specificat
ion.
Math.min() - JavaScript
the static funct
ion math.min() returns the lowest-valued number passed into it, or nan if any parameter isn't a number and can't be converted into one.
... descript
ion because min() is a static method of math, you always use it as math.min(), rather than as a method of a math object you created (math is not a constructor).
... specificat
ions specificat
ion ecmascript (ecma-262)the definit
ion of 'math.min' in that specificat
ion.
Math.sin() - JavaScript
the math.sin() funct
ion returns the sine of a number.
... descript
ion the math.sin() method returns a numeric value between -1 and 1, which represents the sine of the angle given in radians.
... examples using math.sin() math.sin(0); // 0 math.sin(1); // 0.8414709848078965 math.sin(math.pi / 2); // 1 specificat
ions specificat
ion ecmascript (ecma-262)the definit
ion of 'math.sin' in that specificat
ion.
Math.sinh() - JavaScript
the math.sinh() funct
ion returns the hyperbolic sine of a number, that can be expressed using the constant e: math.sinh(x)=ex-e-x2\mathtt{\operatorname{math.sinh(x)}} = \frac{e^x - e^{-x}}{2} the source for this interactive example is stored in a github repository.
... descript
ion because sinh() is a static method of math, you always use it as math.sinh(), rather than as a method of a math object you created (math is not a constructor).
... polyfill this can be emulated with the help of the math.exp() funct
ion: math.sinh = math.sinh || funct
ion(x) { return (math.exp(x) - math.exp(-x)) / 2; } or using only one call to the math.exp() funct
ion: math.sinh = math.sinh || funct
ion(x) { var y = math.exp(x); return (y - 1 / y) / 2; } examples using math.sinh() math.sinh(0); // 0 math.sinh(1); // 1.1752011936438014 specificat
ions specificat
ion ecmascript (ecma-262)the definit
ion of 'math.sinh' in that specificat
ion.
Math.sqrt() - JavaScript
the math.sqrt() funct
ion returns the square root of a number, that is ∀x≥0,math.sqrt(x)=x=the uniquey≥0such thaty2=x\forall x \geq 0, \mathtt{math.sqrt(x)} = \sqrt{x} = \text{the unique} \; y \geq 0 \; \text{such that} \; y^2 = x the source for this interactive example is stored in a github repository.
... descript
ion if the value of x is negative, math.sqrt() returns nan.
... examples using math.sqrt() math.sqrt(9); // 3 math.sqrt(2); // 1.414213562373095 math.sqrt(1); // 1 math.sqrt(0); // 0 math.sqrt(-1); // nan math.sqrt(-0); // -0 specificat
ions specificat
ion ecmascript (ecma-262)the definit
ion of 'math.sqrt' in that specificat
ion.
Number.MAX_VALUE - JavaScript
property attributes of number.max_value writable no enumerable no configurable no descript
ion the max_value property has a value of approximately 1.79e+308, or 21024.
...if the result is less than or equal to max_value, the func1 funct
ion is called; otherwise, the func2 funct
ion is called.
... if (num1 * num2 <= number.max_value) { func1(); } else { func2(); } specificat
ions specificat
ion ecmascript (ecma-262)the definit
ion of 'number.max_value' in that specificat
ion.
Number.MIN_VALUE - JavaScript
property attributes of number.min_value writable no enumerable no configurable no descript
ion the min_value property is the number closest to 0, not the most negative number, that javascript can represent.
...if the result is greater than or equal to min_value, the func1 funct
ion is called; otherwise, the func2 funct
ion is called.
... if (num1 / num2 >= number.min_value) { func1(); } else { func2(); } specificat
ions specificat
ion ecmascript (ecma-262)the definit
ion of 'number.min_value' in that specificat
ion.
Number.NEGATIVE_INFINITY - JavaScript
property attributes of number.negative_infinity writable no enumerable no configurable no descript
ion the value of number.negative_infinity is the same as the negative value of the global object's infinity property.
... you might use the number.negative_infinity property to indicate an error condit
ion that returns a finite number in case of success.
... var smallnumber = (-number.max_value) * 2; if (smallnumber === number.negative_infinity) { smallnumber = returnfinite(); } specificat
ions specificat
ion ecmascript (ecma-262)the definit
ion of 'number.negative_infinity' in that specificat
ion.
Number.POSITIVE_INFINITY - JavaScript
property attributes of number.positive_infinity writable no enumerable no configurable no descript
ion the value of number.positive_infinity is the same as the value of the global object's infinity property.
... you might use the number.positive_infinity property to indicate an error condit
ion that returns a finite number in case of success.
... var bignumber = number.max_value * 2; if (bignumber == number.positive_infinity) { bignumber = returnfinite(); } specificat
ions specificat
ion ecmascript (ecma-262)the definit
ion of 'number.positive_infinity' in that specificat
ion.
Number.isInteger() - JavaScript
descript
ion if the target value is an integer, return true, otherwise return false.
... polyfill number.isinteger = number.isinteger || funct
ion(value) { return typeof value === 'number' && isfinite(value) && math.floor(value) === value; }; examples using isinteger number.isinteger(0); // true number.isinteger(1); // true number.isinteger(-100000); // true number.isinteger(99999999999999999999999); // true number.isinteger(0.1); // false number.isinteger(math.pi); // false number.isinteger(nan); // false number.isinteger(infinity); // false number.isinteger(-infinity); // false number.isinteger('10'); // false number.isinteger(true); // false number.isinteger(false); // f...
...alse number.isinteger([1]); // false number.isinteger(5.0); // true number.isinteger(5.000000000000001); // false number.isinteger(5.0000000000000001); // true specificat
ions specificat
ion ecmascript (ecma-262)the definit
ion of 'number.isinteger' in that specificat
ion.
Object.entries() - JavaScript
descript
ion object.entries() returns an array whose elements are arrays corresponding to the enumerable string-keyed property [key, value] pairs found directly upon object.
... polyfill to add compatible object.entries() support in older environments that do not natively support it, you can use any of the following: a demonstrat
ion implementat
ion of object.entries in the tc39/proposal-object-values-entries (if you don't need any support for ie); a polyfill in the es-shims/object.entries repositories; or, you can use the simple, ready-to-deploy polyfill listed below: if (!object.entries) { object.entries = funct
ion( obj ){ var ownprops = object.keys( obj ), i = ownprops.length, resarray = new array(i); // preallocate the array while (i--) resarray[i] = [ownprops[i], obj[ownprops[i]]]; return resarray; ...
... const obj = { foo: 'bar', baz: 42 }; object.entries(obj).foreach(([key, value]) => console.log(`${key}: ${value}`)); // "foo: bar", "baz: 42" specificat
ions specificat
ion ecmascript (ecma-262)the definit
ion of 'object.entries' in that specificat
ion.
Object.fromEntries() - JavaScript
descript
ion the object.fromentries() method takes a list of key-value pairs and returns a new object whose properties are given by those entries.
...ject: const map = new map([ ['foo', 'bar'], ['baz', 42] ]); const obj = object.fromentries(map); console.log(obj); // { foo: "bar", baz: 42 } converting an array to an object with object.fromentries, you can convert from array to object: const arr = [ ['0', 'a'], ['1', 'b'], ['2', 'c'] ]; const obj = object.fromentries(arr); console.log(obj); // { 0: "a", 1: "b", 2: "c" } object transformat
ions with object.fromentries, its reverse method object.entries(), and array manipulat
ion methods, you are able to transform objects like this: const object1 = { a: 1, b: 2, c: 3 }; const object2 = object.fromentries( object.entries(object1) .map(([ key, val ]) => [ key, val * 2 ]) ); console.log(object2); // { a: 2, b: 4, c: 6 } please do not add polyfills on mdn pages.
... for more details, refer to: https://discourse.mozilla.org/t/mdn-rfc-001-mdn-wiki-pages-shouldnt-be-a-distributor-of-polyfills/24500 specificat
ions specificat
ion ecmascript (ecma-262)the definit
ion of 'object.fromentries' in that specificat
ion.
Object.prototype.hasOwnProperty() - JavaScript
descript
ion all descendents of object inherit the hasownproperty method.
...value: ' + buz[name]); } else { console.log(name); // tostring or something else } } using hasownproperty as a property name javascript does not protect the property name hasownproperty; thus, if the possibility exists that an object might have a property with this name, it is necessary to use an external hasownproperty to get correct results: var foo = { hasownproperty: funct
ion() { return false; }, bar: 'here be dragons' }; foo.hasownproperty('bar'); // always returns false // use another object's hasownproperty // and call it with 'this' set to foo ({}).hasownproperty.call(foo, 'bar'); // true // it's also possible to use the hasownproperty property // from the object prototype for this purpose object.prototype.hasownproperty.call(foo, 'bar'); // true not...
... specificat
ions specificat
ion ecmascript (ecma-262)the definit
ion of 'object.prototype.hasownproperty' in that specificat
ion.
handler.getPrototypeOf() - JavaScript
descript
ion intercept
ions this trap can intercept these operat
ions: object.getprototypeof() reflect.getprototypeof() __proto__ object.prototype.isprototypeof() instanceof invariants if the following invariants are v
iolated, the proxy will throw a typeerror: getprototypeof() method must return an object or null.
... getprototypeof(target) { return array.prototype; } }); console.log( object.getprototypeof(p) === array.prototype, // true reflect.getprototypeof(p) === array.prototype, // true p.__proto__ === array.prototype, // true array.prototype.isprototypeof(p), // true p instanceof array // true ); two kinds of except
ions const obj = {}; const p = new proxy(obj, { getprototypeof(target) { return 'foo'; } }); object.getprototypeof(p); // typeerror: "foo" is not an object or null const obj = object.preventextens
ions({}); const p = new proxy(obj, { getprototypeof(target) { return {}; } }); object.getprototypeof(p); // typeerror: expected same prototype value specificat
ions ...
... specificat
ion ecmascript (ecma-262)the definit
ion of '[[getprototypeof]]' in that specificat
ion.
RangeError() constructor - JavaScript
syntax new rangeerror([message[, filename[, linenumber]]]) parameters message opt
ional human-readable descript
ion of the error.
... filename opt
ional the name of the file containing the code that caused the except
ion linenumber opt
ional the line number of the code that caused the except
ion examples using rangeerror (for numeric values) funct
ion check(n) { if( !(n >= -500 && n <= 500) ) { throw new rangeerror("the argument must be between -500 and 500.") } } try { check(2000) } catch(error) { if (error instanceof rangeerror) { // handle the error } } using rangeerror (for non-numeric values) funct
ion check(value) { if(["apple", "banana", "carrot"].includes(value) === false) { throw new rangeerror('the argument must be an "apple", "banana", or "carrot".') } } try { check("cabbage") } catch(error) { if(error instanceof rangeerror) { ...
... // handle the error } } specificat
ions specificat
ion ecmascript (ecma-262)the definit
ion of 'nativeerror constructors' in that specificat
ion.
TypedArray.prototype.sort() - JavaScript
syntax typedarray.sort([comparefunct
ion]) parameters comparefunct
ion opt
ional specifies a funct
ion that defines the sort order.
... let numbers = new uint8array([40, 1, 5, 200]); numbers.sort(); // uint8array [ 1, 5, 40, 200 ] // unlike plain arrays, a compare funct
ion is not required // to sort the numbers numerically.
... // regular arrays require a compare funct
ion to sort numerically: numbers = [40, 1, 5, 200]; numbers.sort(); // [1, 200, 40, 5] numbers.sort((a, b) => a - b); // compare numbers // [ 1, 5, 40, 200 ] specificat
ions specificat
ion ecmascript (ecma-262)the definit
ion of 'typedarray.prototype.sort' in that specificat
ion.
TypedArray.prototype.toLocaleString() - JavaScript
syntax typedarray.tolocalestring([locales [, opt
ions]]); parameters the locales and opt
ions arguments customize the behav
ior of the funct
ion and let applicat
ions specify the language whose formatting convent
ions should be used.
... in implementat
ions, which ignore the locales and opt
ions arguments, the locale used and the form of the string returned are entirely implementat
ion dependent.
... examples using tolocalestring var uint = new uint32array([2000, 500, 8123, 12, 4212]); uint.tolocalestring(); // if run in a de-de locale // "2.000,500,8.123,12,4.212" uint.tolocalestring('en-us'); // "2,000,500,8,123,12,4,212" uint.tolocalestring('ja-jp', { style: 'currency', currency: 'jpy' }); // "¥2,000,¥500,¥8,123,¥12,¥4,212" specificat
ions specificat
ion ecmascript (ecma-262)the definit
ion of 'typedarray.prototype.tolocalestring' in that specificat
ion.
Uint32Array() constructor - JavaScript
once established, you can reference elements in the array using the object's methods, or using standard array index syntax (that is, using bracket notat
ion).
... buffer, byteoffset, length when called with a buffer, and opt
ionally a byteoffset and a length argument, a new typed array view is created that views the specified arraybuffer.
...uint32.length); // 2 console.log(uint32.bytes_per_element); // 4 // from an array var arr = new uint32array([21,31]); console.log(arr[1]); // 31 // from another typedarray var x = new uint32array([21, 31]); var y = new uint32array(x); console.log(y[0]); // 21 // from an arraybuffer var buffer = new arraybuffer(16); var z = new uint32array(buffer, 0, 4); // from an iterable var iterable = funct
ion*(){ yield* [1,2,3]; }(); var uint32 = new uint32array(iterable); // uint32array[1, 2, 3] specificat
ions specificat
ion ecmascript (ecma-262)the definit
ion of 'typedarray constructors' in that specificat
ion.
Uint8Array() constructor - JavaScript
once established, you can reference elements in the array using the object's methods, or using standard array index syntax (that is, using bracket notat
ion).
... buffer, byteoffset, length when called with a buffer, and opt
ionally a byteoffset and a length argument, a new typed array view is created that views the specified arraybuffer.
...le.log(uint8.length); // 2 console.log(uint8.bytes_per_element); // 1 // from an array var arr = new uint8array([21,31]); console.log(arr[1]); // 31 // from another typedarray var x = new uint8array([21, 31]); var y = new uint8array(x); console.log(y[0]); // 21 // from an arraybuffer var buffer = new arraybuffer(8); var z = new uint8array(buffer, 1, 4); // from an iterable var iterable = funct
ion*(){ yield* [1,2,3]; }(); var uint8 = new uint8array(iterable); // uint8array[1, 2, 3] specificat
ions specificat
ion ecmascript (ecma-262)the definit
ion of 'typedarray constructors' in that specificat
ion.
Uint8ClampedArray() constructor - JavaScript
once established, you can reference elements in the array using the object's methods, or using standard array index syntax (that is, using bracket notat
ion).
... buffer, byteoffset, length when called with a buffer, and opt
ionally a byteoffset and a length argument, a new typed array view is created that views the specified arraybuffer.
...nsole.log(uintc8.bytes_per_element); // 1 // from an array var arr = new uint8clampedarray([21,31]); console.log(arr[1]); // 31 // from another typedarray var x = new uint8clampedarray([21, 31]); var y = new uint8clampedarray(x); console.log(y[0]); // 21 // from an arraybuffer var buffer = new arraybuffer(8); var z = new uint8clampedarray(buffer, 1, 4); // from an iterable var iterable = funct
ion*(){ yield* [1,2,3]; }(); var uintc8 = new uint8clampedarray(iterable); // uint8clampedarray[1, 2, 3] specificat
ions specificat
ion ecmascript (ecma-262)the definit
ion of 'typedarray constructors' in that specificat
ion.
WeakRef.prototype.deref() - JavaScript
notes see the notes on weakrefs sect
ion of the weakref page for some important notes.
... examples using deref see the examples sect
ion of the weakref page for the complete example.
... const tick = () => { // get the element from the weak reference, if it still exists const element = this.ref.deref(); if (element) { element.textcontent = ++this.count; } else { // the element doesn't exist anymore console.log("the element is gone."); this.stop(); this.ref = null; } }; specificat
ions specificat
ion weakrefsthe definit
ion of 'weakref.prototype.deref()' in that specificat
ion.
Greater than (>) - JavaScript
syntax x > y descript
ion the operands are compared using the abstract relat
ional comparison algorithm.
... see the documentat
ion for the less than operator for a summary of this algorithm.
...true > false); // true console.log(false > true); // false console.log(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 specificat
ions specificat
ion ecmascript (ecma-262)the definit
ion of 'relat
ional operators' in that specificat
ion.
Greater than or equal (>=) - JavaScript
syntax x >= y descript
ion the operands are compared using the abstract relat
ional comparison algorithm.
... see the documentat
ion for the less than operator for a summary of this algorithm.
... // true console.log(true >= true); // true console.log(false >= true); // 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 specificat
ions specificat
ion ecmascript (ecma-262)the definit
ion of 'relat
ional operators' in that specificat
ion.
Less than or equal (<=) - JavaScript
syntax x <= y descript
ion the operands are compared using the abstract relat
ional comparison algorithm.
... see the documentat
ion for the less than operator for a summary of this algorithm.
...// false console.log(true <= true); // true console.log(false <= true); // true 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 specificat
ions specificat
ion ecmascript (ecma-262)the definit
ion of 'relat
ional operators' in that specificat
ion.
Strict inequality (!==) - JavaScript
syntax x !== y descript
ion the strict inequality operator checks whether its operands are not equal.
... it is the negat
ion of the strict equality operator so the following two lines will always give the same result: x !== y !(x === y) for details of the comparison algorithm, see the page for the strict equality operator.
...le.log(null !== null); // false comparing operands of different types console.log("3" !== 3); // true console.log(true !== 1); // true console.log(null !== undefined); // true comparing objects const object1 = { name: "hello" } const object2 = { name: "hello" } console.log(object1 !== object2); // true console.log(object1 !== object1); // false specificat
ions specificat
ion ecmascript (ecma-262)the definit
ion of 'equality operators' in that specificat
ion.
Unary plus (+) - JavaScript
syntax operator: +x descript
ion although unary negat
ion (-) also can convert non-numbers, unary plus is the fastest and preferred way of converting something into a number, because it does not perform any other operat
ions on the number.
... it can convert string representat
ions of integers and floats, as well as the non-string values true, false, and null.
... examples usage with numbers const x = 1; const y = -1; console.log(+x); // 1 console.log(+y); // -1 usage with non-numbers +true // 1 +false // 0 +null // 0 +funct
ion(val){ return val } // nan +1n // throws typeerror: cannot convert bigint value to number specificat
ions specificat
ion ecmascript (ecma-262)the definit
ion of 'unary plus operator' in that specificat
ion.
lang - Web app manifests
it specifies the primary language for the values of the manifest's direct
ionality-capable members, and together with dir determines their direct
ionality.
... examples "lang": "en-us" specificat
ion specificat
ion status comment feedback web app manifestthe definit
ion of 'lang' in that specificat
ion.
... working draft initial definit
ion.
scope - Web app manifests
type string mandatory no the scope member is a string that defines the navigat
ion scope of this web applicat
ion's applicat
ion context.
... examples if the scope is relative, the manifest url is used as a base url: "scope": "/app/" the following scope limits navigat
ion to the current site: "scope": "https://example.com/" finally, the following example limits navigat
ion to a subdirectory of the current site: "scope": "https://example.com/subdirectory/" specificat
ion specificat
ion status comment feedback web app manifestthe definit
ion of 'scope' in that specificat
ion.
... working draft initial definit
ion.
screenshots - Web app manifests
type object mandatory no the screenshots member defines an array of screenshots intended to showcase the applicat
ion.
... examples "screenshots" : [ { "src": "screenshot1.webp", "sizes": "1280x720", "type": "image/webp" }, { "src": "screenshot2.webp", "sizes": "1280x720", "type": "image/webp" } ] specificat
ion specificat
ion status comment feedback web app manifestthe definit
ion of 'screenshots' in that specificat
ion.
... working draft initial definit
ion.
start_url - Web app manifests
type string mandatory no the start_url member is a string that represents the start url of the web applicat
ion — the prefered url that should be loaded when the user launches the web applicat
ion (e.g., when the user taps on the web applicat
ion's icon from a device's applicat
ion menu or homescreen).
... "start_url": "../startpoint.html" specificat
ion specificat
ion status comment feedback web app manifestthe definit
ion of 'start_url' in that specificat
ion.
... working draft initial definit
ion.
dropmarker - Archive of obsolete content
examples properties accessibletype attributes inherited from xul element align, allowevents, allownegativeassert
ions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, posit
ion, preference-editable, querytype, ref, removeelement, sortdirect
ion, sortresource, sortr...
...textmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposit
ion, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaul...
listcol - Archive of obsolete content
er label="first"/> <listheader label="last"/> </listhead> <listcols> <listcol flex="1"/> <listcol/> </listcols> <listitem> <listcell label="buck"/> <listcell label="rogers"/> </listitem> <listitem> <listcell label="john"/> <listcell label="painter"/> </listitem> </listbox> attributes inherited from xul element align, allowevents, allownegativeassert
ions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, posit
ion, preference-editable, querytype, ref, removeelement, sortdirect
ion, sortresource, sortr...
...textmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposit
ion, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaul...
listcols - Archive of obsolete content
ample <!-- creates a two column listbox --> <listbox> <listcols> <listcol flex="1"/> <listcol flex="1"/> </listcols> <listitem> <listcell label="buck"/> <listcell label="rogers"/> </listitem> <listitem> <listcell label="john"/> <listcell label="painter"/> </listitem> </listbox> attributes inherited from xul element align, allowevents, allownegativeassert
ions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, posit
ion, preference-editable, querytype, ref, removeelement, sortdirect
ion, sortresource, sortr...
...textmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposit
ion, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaul...
page - Archive of obsolete content
examples (example needed) attributes inherited from xul element align, allowevents, allownegativeassert
ions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, posit
ion, preference-editable, querytype, ref, removeelement, sortdirect
ion, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width ...
...textmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposit
ion, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaul...
scrollcorner - Archive of obsolete content
examples (example needed) attributes inherited from xul element align, allowevents, allownegativeassert
ions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, posit
ion, preference-editable, querytype, ref, removeelement, sortdirect
ion, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width pr...
...textmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposit
ion, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaul...
statusbar - Archive of obsolete content
properties accessibletype examples <statusbar> <statusbarpanel label="left panel"/> <spacer flex="1"/> <progressmeter mode="determined" value="82"/> <statusbarpanel label="right panel"/> </statusbar> attributes inherited from xul element align, allowevents, allownegativeassert
ions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, posit
ion, preference-editable, querytype, ref, removeelement, sortdirect
ion, sortresource, sortr...
...ontextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposit
ion, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaul...
stringbundleset - Archive of obsolete content
examples (example needed) attributes inherited from xul element align, allowevents, allownegativeassert
ions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, posit
ion, preference-editable, querytype, ref, removeelement, sortdirect
ion, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties inherited properties align, , allowe...
...textmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposit
ion, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaul...
textnode - Archive of obsolete content
inherited from xul element align, allowevents, allownegativeassert
ions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, posit
ion, preference-editable, querytype, ref, removeelement, sortdirect
ion, sortresource, sortr...
...textmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposit
ion, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaul...
toolbarset - Archive of obsolete content
examples (example needed) attributes inherited from xul element align, allowevents, allownegativeassert
ions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, posit
ion, preference-editable, querytype, ref, removeelement, sortdirect
ion, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wai...
...ontextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposit
ion, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaul...
toolbarspacer - Archive of obsolete content
properties accessibletype examples (example needed) attributes inherited from xul element align, allowevents, allownegativeassert
ions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, posit
ion, preference-editable, querytype, ref, removeelement, sortdirect
ion, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties ...
...textmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposit
ion, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaul...
toolbarspring - Archive of obsolete content
properties accessibletype examples (example needed) attributes inherited from xul element align, allowevents, allownegativeassert
ions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, posit
ion, preference-editable, querytype, ref, removeelement, sortdirect
ion, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width ...
...ontextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposit
ion, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaul...
XULRunner/Old Releases - Archive of obsolete content
the windows and linux builds will run normal xulrunner applicat
ions, but the mac build uses cocoa widgets and will not run xulrunner applicat
ions.
...it has known security holes and should not be used in applicat
ions that deal with public web content.
toolkit.singletonWindowType - Archive of obsolete content
preference type: string specified by: default prefs of xulrunner applicat
ions default: none example: pref("toolkit.singletonwindowtype", "xulmine"); by default, the toolkit.defaultchromeuri preference will cause xulrunner to open a new main applicat
ion window each time an applicat
ion is invoked.
...more informat
ion on this can be found in bug 317811.
Format - Archive of obsolete content
firefox 1.5.0.5 planned release - 2006/07/26 discuss
ions firefox survey feedback requested rachel werner (mozilla corp marketing intern) requested feedback on a proposed user survey.
... the survey quest
ions and feedback are included in the thread.
2006-10-06 - Archive of obsolete content
discuss
ions w3c sets road map for web app accessibility the w3c introduced its wai-aria (web accessibility initiative for accessible rich internet applicat
ions) roadmap--a set of guidelines for developers to make accessible web content.
...other links of interest: roadmap for accessible rich internet applicat
ions (wai-aria roadmap) roles for accessible rich internet applicat
ions (wai-aria roles) states and properties module for accessible rich internet applicat
ions (wai-aria states and properties) making ajax work with screen readers meetings accessibility hackfest 2006 - october 10-12 in cambridge, ma (more details) participants include the mozilla foundat
ion, ibm, sun and novell to name a few.