Search completed in 0.98 seconds.
GlobalEventHandlers - Web APIs
the
globaleventhandlers mixin describes the event handlers common to several interfaces like htmlelement, document, or window.
... note:
globaleventhandlers is a mixin and not an interface; you can't actually create an object of type
globaleventhandlers.
... event handlers these event handlers are defined on the
globaleventhandlers mixin, and implemented by htmlelement, document, window, as well as by worker
globalscope for web workers.
...And 94 more matches
WorkerGlobalScope - Web APIs
the worker
globalscope interface of the web workers api is an interface representing the scope of any worker.
...each worker
globalscope has its own event loop.
... this interface is usually specialized by each worker type: dedicatedworker
globalscope for dedicated workers, sharedworker
globalscope for shared workers, and serviceworker
globalscope for serviceworker.
...And 36 more matches
ServiceWorkerGlobalScope - Web APIs
the serviceworker
globalscope interface of the serviceworker api represents the
global execution context of a service worker.
... developers should keep in mind that the serviceworker state is not persisted across the termination/restart cycle, so each event handler should assume it's being invoked with a bare, default
global state.
...an active service worker is automatically restarted to respond to events, such as serviceworker
globalscope.onfetch or serviceworker
globalscope.onmessage.
...And 20 more matches
WindowOrWorkerGlobalScope - Web APIs
the windoworworker
globalscope mixin describes several features common to the window and worker
globalscope interfaces.
... note: windoworworker
globalscope is a mixin and not an interface; you can't actually create an object of type windoworworker
globalscope.
... properties these properties are defined on the windoworworker
globalscope mixin, and implemented by window and worker
globalscope.
...And 16 more matches
JS_NewGlobalObject
this article covers features introduced in spidermonkey 17 create a new javascript object for use as a
global object.
... syntax jsobject * js_new
globalobject(jscontext *cx, const jsclass *clasp, jsprincipals *principals, js::onnew
globalhookoption hookoption, const js::compartmentoptions &options = js::compartmentoptions()); name type description cx jscontext * the context in which to create the new
global object.
... clasp jsclass * the class to use for the new
global object.
...And 15 more matches
DedicatedWorkerGlobalScope - Web APIs
the dedicatedworker
globalscope object (the worker
global scope) is accessible through the self keyword.
... some additional
global functions, namespaces objects, and constructors, not typically associated with the worker
global scope, but available on it, are listed in the javascript reference.
... properties this interface inherits properties from the worker
globalscope interface, and its parent eventtarget, and therefore implements properties from windowtimers, windowbase64, and windoweventhandlers.
...And 15 more matches
SharedWorkerGlobalScope - Web APIs
the sharedworker
globalscope object (the sharedworker
global scope) is accessible through the self keyword.
... some additional
global functions, namespaces objects, and constructors, not typically associated with the worker
global scope, but available on it, are listed in the javascript reference.
... properties this interface inherits properties from the worker
globalscope interface, and its parent eventtarget, and therefore implements properties from windowtimers, windowbase64, and windoweventhandlers.
...And 15 more matches
JS_GetGlobalObject
retrieves a context's
global object.
... (in javascript,
global variables are stored as properties of the
global object.) syntax jsobject * js_get
globalobject(jscontext *cx); name type description cx jscontext * the context from which to retrieve the
global object.
... description this function is obsolete: use js_get
globalforobject or js_get
globalforscopechain instead.
...And 13 more matches
WebAssembly.Global - JavaScript
a webassembly.
global object represents a
global variable instance, accessible from both javascript and importable/exportable across one or more webassembly.module instances.
... constructor webassembly.
global() creates a new
global object.
...
global instances all
global instances inherit from the
global() constructor's prototype object — this can be modified to affect all
global instances.
...And 12 more matches
Shell global objects
these are the
global objects that are set up automatically by the spidermonkey js command-line interpreter when you start the program.
...ons is an optional object that may have these properties: isrunonce use the isrunonce compiler option (default: false) noscriptrval use the no-script-rval compiler option (default: false) filename filename for error messages and debug info linenumber starting line number for error messages and debug info columnnumber starting column number for error messages and debug info
global global in which to execute the code newcontext if true, create and use a new cx (default: false) catchtermination if true, catch termination (failure without an exception value, as for slow scripts or out-of-memory) and return 'terminated' element if present with value v, convert v to an object o and mark the source as being attached to the dom element o.
...both objects are unwrapped first, so this can be used on objects from different
globals.
...And 10 more matches
Global attributes - HTML: Hypertext Markup Language
global attributes are attributes common to all html elements; they can be used on all elements, though they may have no effect on some elements.
...
global attributes may be specified on all html elements, even those not specified in the standard.
... in addition to the basic html
global attributes, the following
global attributes also exist: xml:lang and xml:base — these are inherited from the xhtml specifications and deprecated, but kept for compatibility purposes.
...And 10 more matches
JS_SetGlobalObject
set a context's
global object.
... syntax void js_set
globalobject(jscontext *cx, jsobject *obj); name type description cx jscontext * the context to configure.
... obj jsobject * pointer to the object to set as the
global object, or null.
...And 8 more matches
WindowOrWorkerGlobalScope.setInterval() - Web APIs
this method is defined by the windoworworker
globalscope mixin.
... return value the returned intervalid is a numeric, non-zero value which identifies the timer created by the call to setinterval(); this value can be passed to windoworworker
globalscope.clearinterval() to cancel the timeout.
...as a consequence, the this keyword for the called function is set to the window (or
global) object, it is not the same as the this value for the function that called settimeout.
...And 8 more matches
globalThis - JavaScript
the
global globalthis property contains the
global this value, which is akin to the
global object.
... property attributes of
globalthis writable yes enumerable no configurable yes description historically, accessing the
global object has required different syntax in different javascript environments.
...in node.js none of these work, and you must instead use
global.
...And 8 more matches
JS_NewCompartmentAndGlobalObject
this article covers features introduced in spidermonkey 1.8.1 js_newcompartmentand
globalobject has been removed in bug 755186.
... use js_new
globalobject instead.
... create a new
global object in a new compartment.
...And 7 more matches
nsIGlobalHistory3
docshell/base/nsi
globalhistory3.idlscriptable this interface provides information about
global history to gecko.
... 1.0 66 introduced gecko 1.8 obsolete gecko 9.0 inherits from: nsi
globalhistory2 last changed in gecko 1.9 (firefox 3) this interface was originally created as part of nsi
globalhistory2, but was split off during the transition to places.
...this function is preferred if nsi
globalhistory3 is available.
...And 6 more matches
WebAssembly.Global() constructor - JavaScript
a webassembly.
global() constructor creates a new
global object representing a
global variable instance, accessible from both javascript and importable/exportable across one or more webassembly.module instances.
... syntax new webassembly.
global(descriptor, value); parameters descriptor a
globaldescriptor dictionary object, which contains two properties: value: a usvstring representing the data type of the
global.
... mutable: a boolean value that determines whether the
global is mutable or not.
...And 6 more matches
JS_GetGlobalForScopeChain
this article covers features introduced in spidermonkey 1.8.5 returns the
global object for the active function on the context.
... renamed to js::current
globalornull.
... syntax jsobject * js_get
globalforscopechain(jscontext *cx); name type description cx jscontext * the context for which to return the
global object.
...And 5 more matches
JS::CurrentGlobalOrNull
this article covers features introduced in spidermonkey 31 return the
global object for the active function on the context.
... syntax jsobject * js::current
globalornull(jscontext *cx); name type description cx jscontext * the context for which to return the
global object.
... description js::current
globalornull() returns the
global object for whatever function is currently running on the context.
...And 4 more matches
CanvasRenderingContext2D.globalAlpha - Web APIs
the canvasrenderingcontext2d.
globalalpha property of the canvas 2d api specifies the alpha (transparency) value that is applied to shapes and images before they are drawn onto the canvas.
... syntax ctx.
globalalpha = value; options 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 previous value.
...And 4 more matches
JS_GetGlobalForCompartmentOrNull
this article covers features introduced in spidermonkey 17 return the
global object for the specified compartment.
... syntax jsobject * js_get
globalforcompartmentornull(jscontext *cx, jscompartment *c); name type description cx jscontext * the context for which to return the
global object.
... c jscompartment * the compartment for which to return the
global object.
...And 3 more matches
JS_GetGlobalForObject
returns the
global object for the given object.
... syntax jsobject * js_get
globalforobject(jscontext *cx, jsobject *obj); name type description cx jscontext * a context.
... description js_get
globalforobject returns the last non-null object on the parent chain of the input object.
...And 3 more matches
Components.utils.importGlobalProperties
system scopes such as jsms and frame scripts don't have certain objects, such as indexeddb and xmlhttprequest, that are available to dom window
globals.
...to import these objects into a sandbox, use the want
globalproperties option in the sandbox constructor.
...each string is the name of an object to import, and will be defined on the importing scope's
global.
...And 3 more matches
WindowOrWorkerGlobalScope.setTimeout() - Web APIs
the settimeout() method of the windoworworker
globalscope mixin (and successor to window.settimeout()) sets a timer which executes a function or specified piece of code once the timer expires.
...the usual rules for setting the this keyword for the called function apply, and if you have not set this in the call or with bind, it will default to the window (or
global) object.
...array.mymethod('1')}, 2.5*1000); // prints "one" after 2.5 seconds arrow functions are a possible alternative, too: settimeout(() => {myarray.mymethod()}, 2.0*1000); // prints "zero,one,two" after 2 seconds settimeout(() => {myarray.mymethod('1')}, 2.5*1000); // prints "one" after 2.5 seconds another possible way to solve the "this" problem is to replace the host settimeout() and setinterval()
global functions with ones that allow passing a this object and set it in the callback using function.prototype.call, e.g.: // enable setting 'this' in javascript timers var __nativest__ = window.settimeout, __nativesi__ = window.setinterval; window.settimeout = function (vcallback, ndelay /*, argumenttopass1, argumenttopass2, etc.
...And 3 more matches
nsIGlobalHistory2
docshell/base/nsi
globalhistory2.idlscriptable this interface provides information about
global history to gecko.
... it was split off from nsi
globalhistory during the transition to toolkit interfaces.
... inherits from: nsisupports last changed in gecko 1.7 this interface replaces and deprecates nsi
globalhistory method overview void adduri(in nsiuri auri, in boolean aredirect, in boolean atoplevel, in nsiuri areferrer); boolean isvisited(in nsiuri auri); void setpagetitle(in nsiuri auri, in astring atitle); methods adduri() add a uri to
global history.
...And 2 more matches
AudioWorkletGlobalScope - Web APIs
the audioworklet
globalscope interface of the web audio api represents a
global execution context for user-supplied code, which defines custom audioworkletprocessor-derived classes.
... each baseaudiocontext has a single audioworklet available under the audioworklet property, which runs its code in a single audioworklet
globalscope.
... as the
global execution context is shared across the current baseaudiocontext, it's possible to define any other variables and perform any actions allowed in worklets — apart from defining audioworkletprocessor-derived classes.
...And 2 more matches
WorkerGlobalScope.self - Web APIs
the self read-only property of the worker
globalscope interface returns a reference to the worker
globalscope itself.
... most of the time it is a specific scope like dedicatedworker
globalscope, sharedworker
globalscope, or serviceworker
globalscope.
... syntax var selfref = self; value a
global scope object (differs depending on the type of worker you are dealing with, as indicated above).
...And 2 more matches
RegExp.prototype.global - JavaScript
the
global property indicates whether or not the "g" flag is used with the regular expression.
...
global is a read-only property of an individual regular expression instance.
... property attributes of regexp.prototype.
global writable no enumerable no configurable yes description the value of
global is a boolean and true if the "g" flag was used; otherwise, false.
...And 2 more matches
JS_IsGlobalObject
this article covers features introduced in spidermonkey 24 determine if given object is a
global object.
... syntax bool js_is
globalobject(jsobject *obj); name type description obj jsobject * the object to examine.
... description js_is
globalobject returns true if obj is a
global object, false otherwise.
... see also mxr id search for js_is
globalobject js_new
globalobject bug 797821 ...
nsIDOMGlobalPropertyInitializer
dom/interfaces/base/nsidom
globalpropertyinitializer.idlscriptable an initializer for
global properties that lets them know about the window they're being attached to.
...an alternative way to expose an object to the web content is to add the property in response to the content-document-
global-created notification.
... method overview jsval init(in nsidomwindow window); methods init() jsval init( in nsidomwindow window ); parameters window the window to which the
global property is being attached.
... return value the initialized
global property.
CanvasRenderingContext2D.globalCompositeOperation - Web APIs
the canvasrenderingcontext2d.
globalcompositeoperation property of the canvas 2d api sets the type of compositing operation to apply when drawing new shapes.
... syntax ctx.
globalcompositeoperation = type; type is a string identifying which of the compositing or blending mode operations to use.
... types examples changing the composite operation this example uses the
globalcompositeoperation property to draw two rectangles that exclude themselves where they overlap.
... html <canvas id="canvas"></canvas> javascript const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); ctx.
globalcompositeoperation = 'xor'; ctx.fillstyle = 'blue'; ctx.fillrect(10, 10, 100, 100); ctx.fillstyle = 'red'; ctx.fillrect(50, 50, 100, 100); result specifications specification status comment html living standardthe definition of 'canvasrenderingcontext2d.
globalcompositeoperation' in that specification.
DedicatedWorkerGlobalScope.onmessage - Web APIs
the onmessage property of the dedicatedworker
globalscope interface represents an eventhandler to be called when the message event occurs and bubbles through the worker — i.e.
... var myworker = new worker("worker.js"); first.onchange = function() { myworker.postmessage([first.value,second.value]); console.log('message posted to worker'); } myworker.onmessage = function(e) { result.textcontent = e.data; console.log('message received from worker'); } in the worker.js script, a dedicatedworker
globalscope.onmessage handler is used to handle messages from the main script: onmessage = function(e) { console.log('message received from main script'); var workerresult = 'result: ' + (e.data[0] * e.data[1]); console.log('posting message back to main script'); postmessage(workerresult); } notice how in the main script, onmessage has to be called on myworker, whereas inside the worker script...
... you just need onmessage because the worker is effectively the
global scope (the dedicatedworker
globalscope, in this case).
... specifications specification status comment html living standardthe definition of 'dedicatedworker
globalscope.onmessage' in that specification.
Cross-global fetch usage - Web APIs
when a cross-origin fetch involving a relative url is initiated from an <iframe>, the relative url used to be resolved against the current
global location, rather than the iframe's location.
...to see it: you need a same-origin iframe that same-origin iframe needs to have a location with a different base url you have to use the fetch function cross-
global, e.g.
... frame.contentwindow.fetch() the url passed to fetch needs to be relative the problem in the past we would resolve the relative url against the current
global, for example: let absolute = new url(relative, window.location.href) this is not a problem as such.
... the solution in firefox 60 onwards, mozilla resolves the relative url against the
global that owns the fetch() function being used (see bug 1432272).
ServiceWorkerGlobalScope.onnotificationclick - Web APIs
the serviceworker
globalscope.onnotificationclick property is an event handler called whenever the notificationclick event is dispatched on the serviceworker
globalscope object, that is when a user clicks on a displayed notification spawned by serviceworkerregistration.shownotification().
... note: trying to create a notification inside the serviceworker
globalscope using the notification() constructor will throw an error.
... syntax serviceworker
globalscope.onnotificationclick = function(notificationevent) { ...
...this property is specified on the notifications_api even though it's part of serviceworker
globalscope.
WorkerGlobalScope.console - Web APIs
the console read-only property of the worker
globalscope interface returns a console object providing access to the browser console for the worker.
...so for example you could call console.log('test'); inside a worker (which would basically be the equivalent of self.console.log('test');, as these are being called on the worker scope, which can be referenced with worker
globalscope.self), to return a test message out to the browser console.
... if you are calling console.log() from a dedicatedworker
globalscope or other worker scope that acts on a single loaded window, that tab's web console will receive the logs.
... however, if you are calling console.log() from a sharedworker
globalscope, the
global browser console will receive the logs.
Components.utils.getGlobalForObject
this method is used to determine the
global object with which an object is associated.
... this is the
global object in place at the time the object was created, which is to say the
global object used when executing the script that created the object.
... syntax var
global = components.utils.get
globalforobject(obj); parameters obj an object whose corresponding
global object is to be retrieved; non-optional, must be object-valued example var obj = {}; function foo() { } var
global = this; var g1 = components.utils.get
globalforobject(foo); var g2 = components.utils.get
globalforobject(obj); // g1 ===
global, g2 ===
global, g1 === g2 // in a script in another window var
global2 = this; function bar() { } var obj2 = {}; // then, assuming bar refers to the function defined in that other window: var o1 = components.utils.get
globalforobject(bar); var o2 = components.utils.get
globalforobject(obj2); // o1 ===
global2, o2 ===
global2 ...
AudioWorkletGlobalScope.registerProcessor - Web APIs
the registerprocessor method of the audioworklet
globalscope interface registers a class constructor derived from audioworkletprocessor interface under a specified name.
... syntax audioworklet
globalscope.registerprocessor(name, processorctor); parameters name a string representing the name under which the processor will be registered.
... note: a key-value pair { name: constructor } is saved internally in the audioworklet
globalscope once the processor is registered.
DedicatedWorkerGlobalScope.name - Web APIs
the name read-only property of the dedicatedworker
globalscope interface returns the name that the worker was (optionally) given when it was created.
... this is the name that the worker() constructor can pass to get a reference to the dedicatedworker
globalscope.
... example if a worker is created using a constructor with a name option: var myworker = new worker("worker.js", { name : "myworker" }); the dedicatedworker
globalscope will now have a name of "myworker", returnable by running self.name from inside the worker.
DedicatedWorkerGlobalScope.postMessage() - Web APIs
the postmessage() method of the dedicatedworker
globalscope interface sends a message to the main thread that spawned it.
...sult); onmessage = function(e) { console.log('message received from main script'); var workerresult = 'result: ' + (e.data[0] * e.data[1]); console.log('posting message back to main script'); postmessage(workerresult); } in the main script, onmessage would have to be called on a worker object, whereas inside the worker script you just need onmessage because the worker is effectively the
global scope (dedicatedworker
globalscope).
... specifications specification status comment html living standardthe definition of 'dedicatedworker
globalscope.postmessage()' in that specification.
ServiceWorkerGlobalScope: activate event - Web APIs
the activate event of the serviceworker
globalscope interface is fired when a serviceworkerregistration acquires a new serviceworkerregistration.active worker.
... bubbles no cancelable no interface extendableevent event handler property serviceworker
globalscope.onactivate examples the following snippet shows how you could use an activate event handler to upgrade a cache.
...
globalscope.addeventlistener('activate', function(event) { var cachewhitelist = ['v2']; event.waituntil( caches.foreach(function(cache, cachename) { if (cachewhitelist.indexof(cachename) == -1) { return caches.delete(cachename); } }) ); }); you can also set up the event handler using the serviceworker
globalscope.onactivate property:
globalscope.onactivate = function(event) { ...
ServiceWorkerGlobalScope: install event - Web APIs
the install event of the serviceworker
globalscope interface is fired when a serviceworkerregistration acquires a new serviceworkerregistration.installing worker.
... bubbles no cancelable no interface extendableevent event handler property serviceworker
globalscope.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', function(event) { event.waituntil( caches.open('v1').then(function(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 serviceworker
globalscope.oninstall property:
globalscope.oninstall = function(event) { ...
ServiceWorkerGlobalScope.onpush - Web APIs
the serviceworker
globalscope.onpush event of the serviceworker
globalscope interface is fired whenever a push message is received by a service worker via a push server.
... syntax serviceworker
globalscope.onpush = function(pushevent) { ...
...this event is specified in the push api, but accessed through serviceworker
globalscope.
ServiceWorkerGlobalScope.onpushsubscriptionchange - Web APIs
the serviceworker
globalscope.onpushsubscriptionchange event of the serviceworker
globalscope interface is fired to indicate a change in push subscription that was triggered outside the application's control, e.g.
... syntax serviceworker
globalscope.onpushsubscriptionchange = function() { ...
... working draft initial definition (note: this event is specified in the push api, but accessed through serviceworker
globalscope.) ...
SharedWorkerGlobalScope.name - Web APIs
the name read-only property of the sharedworker
globalscope interface returns the name that the sharedworker was (optionally) given when it was created.
... this is the name that the sharedworker() constructor can pass to get a reference to the sharedworker
globalscope.
... example if a shared worker is created using a constructor with a name option: var myworker = new sharedworker("worker.js", { name : "mysharedworker" }); the sharedworker
globalscope will now have a name of "mysharedworker", returnable by running self.name from inside the shared worker.
WindowOrWorkerGlobalScope.atob() - Web APIs
the windoworworker
globalscope.atob() function decodes a string of data which has been encoded using base64 encoding.
... specifications specification status comment html living standardthe definition of 'windoworworker
globalscope.atob()' in that specification.
... living standard method moved to the windoworworker
globalscope mixin in the latest spec.
WindowOrWorkerGlobalScope.btoa() - Web APIs
the windoworworker
globalscope.btoa() method creates a base64-encoded ascii string from a binary string (i.e., a string object in which each character in the string is treated as a byte of binary data).
... specifications specification status comment html living standardthe definition of 'windoworworker
globalscope.btoa()' in that specification.
... living standard method moved to the windoworworker
globalscope mixin in the latest spec.
WindowOrWorkerGlobalScope.clearInterval() - Web APIs
the clearinterval() method of the windoworworker
globalscope mixin cancels a timed, repeating action which was previously established by a call to setinterval().
... specifications specification status comment html living standardthe definition of 'windoworworker
globalscope.clearinterval()' in that specification.
... living standard method moved to the windoworworker
globalscope mixin in the latest spec.
WindowOrWorkerGlobalScope.clearTimeout() - Web APIs
the cleartimeout() method of the windoworworker
globalscope mixin cancels a timeout previously established by calling settimeout().
... specifications specification status comment html living standardthe definition of 'windoworworker
globalscope.cleartimeout()' in that specification.
... living standard method moved to the windoworworker
globalscope mixin in the latest spec.
WindowOrWorkerGlobalScope.fetch() - Web APIs
the fetch() method of the windoworworker
globalscope mixin starts the process of fetching a resource from the network, returning a promise which is fulfilled once the response is available.
... windoworworker
globalscope is implemented by both window and worker
globalscope, which means that the fetch() method is available in pretty much any context in which you might want to fetch resources.
... living standard defined in a windoworworker
globalscope partial in the newest spec.
WindowOrWorkerGlobalScope.origin - Web APIs
the origin read-only property of the windoworworker
globalscope interface returns the origin of the
global scope, serialized as a string.
... examples executed from inside a worker script, the following snippet will log the worker's
global scope's origin to the console each time it receives a message onmessage = function() { console.log(self.origin); }; if the origin is not a scheme/host/port tuple (say you are trying to run it locally, i.e.
... specifications specification status comment html living standardthe definition of 'windoworworker
globalscope.origin' in that specification.
WorkerGlobalScope.performance - Web APIs
the performance read-only property of the worker
globalscope interface returns a performance object to be used on the worker.
... example if you called console.log(performance); inside a worker (which would basically be the equivalent of self.console.log(self.performance);, as these are being called on the worker scope, which can be referenced with worker
globalscope.self), you will get a workerperformance object written to the console — something like the following: workerperformance {now: function} __proto__: workerperformance constructor: function workerperformance() { [native code] } now: function now() { [native code] } __proto__: object you could use this performance object to return performance data, as you might do with a normal...
... recommendation defines worker
globalscope.performance.
JS_ClearNonGlobalObject
syntax void js_clearnon
globalobject(jscontext *cx, jsobject *obj); name type description cx jscontext * the context in which to clear the object.
... description js_clearnon
globalobject removes all of obj's own properties, except the special __proto__ and __parent__ properties, in a single operation.
GetGlobalMemoryService
« xpcom api reference summary the get
globalmemoryservice function returns a reference to xpcom's
global nsimemory object.
... static nsimemory* get
globalmemoryservice(); return values this function returns nsnull if the
global memory manager does not exist or could not be initialized.
GlobalEventHandlers.onanimationiteration - Web APIs
the onanimationiteration property of the
globaleventhandlers mixin is the eventhandler for processing animationiteration events.
... var box = document.getelementbyid("box"); var iterationcounter = 0; box.onanimationiteration = function(event) { box.style.animationplaystate = "paused"; document.getelementbyid("play").innerhtml = "start iteration #" + (iterationcounter+1); }; this sets up two
global variables: box, which references the "box" element that we're animating, and iterationcounter, which is initially zero, which indicates how many iterations of the animation have occurred.
GlobalEventHandlers.ondrag - Web APIs
a
global event handler for the drag event.
... <!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> function drag_handler(ev) { console.log("drag"); } function dragstart_handler(ev) { console.log("dragstart"); ev.datatransfer.setdata("text", ev.target.id); } function drop_handler(ev) { console.log("drop"); ev.currenttarget.style.b...
GlobalEventHandlers.ondragend - Web APIs
a
global event handler for the dragend event.
... <!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> function 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",...
GlobalEventHandlers.ondragenter - Web APIs
a
global event handler for the dragenter event.
... <!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> function 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.setdat...
GlobalEventHandlers.ondragexit - Web APIs
the
globaleventhandler.ondragexit property is an event handler for the dragexit event.
... <!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> function dragstart_handler(ev) { console.log("dragstart"); // change the source element's background color to signify drag has started ev.currenttar...
GlobalEventHandlers.ondragleave - Web APIs
a
global event handler for the dragleave event.
... <!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> function 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", ...
GlobalEventHandlers.ondragover - Web APIs
a
global event handler for the dragover event.
... <!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> function drag_handler(ev) { console.log("drag"); } function dragstart_handler(ev) { console.log("dragstart"); ev.datatransfer.setdata("text", ev.target.id); } function drop_handler(ev) { console.log("drop"); e...
GlobalEventHandlers.ondragstart - Web APIs
a
global event handler for the dragstart event.
... <!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> function drag_handler(ev) { console.log("drag"); } function dragstart_handler(ev) { console.log("dragstart"); ev.datatransfer.setdata("text", ev.target.id); } function drop_handler(ev) { console.log("drop...
GlobalEventHandlers.ondrop - Web APIs
a
global event handler for the drop event.
... <!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> function drag_handler(ev) { console.log("drag"); } function dragstart_handler(ev) { console.log("dragstart"); ev.datatransfer.setdata("text", ev.target.id); } function drop_handler(ev) { console.log("drop"); ev.currenttarget.style.ba...
GlobalEventHandlers.onerror - Web APIs
the onerror property of the
globaleventhandlers mixin is an eventhandler that processes error events.
... installing a
global error event handler is useful for automated collection of error reports.
GlobalEventHandlers.onselectionchange - Web APIs
the onselectionchange property of the
globaleventhandlers mixin is an eventhandler that processes selectionchange events.
... specifications specification status comment selection apithe definition of '
globaleventhandlers.onselectionchange' in that specification.
GlobalEventHandlers.onselectstart - Web APIs
the onselectstart property of the
globaleventhandlers mixin is an eventhandler that processes selectstart events.
... specifications specification status comment selection apithe definition of '
globaleventhandlers.onselectstart' in that specification.
ServiceWorkerGlobalScope.caches - Web APIs
the caches read-only property of the serviceworker
globalscope interface returns the cachestorage object associated with the service worker.
... specifications specification status comment service workersthe definition of 'serviceworker
globalscope.caches' in that specification.
ServiceWorkerGlobalScope: contentdelete event - Web APIs
the contentdelete event of the serviceworker
globalscope interface is fired when an item is removed from the indexed content via the user agent.
... self.addeventlistener('contentdelete', event => { event.waituntil( caches.open('cache-name').then(cache => { return promise.all([ cache.delete(`/icon/${event.id}`), cache.delete(`/content/${event.id}`) ]) }) ); }); you can also set up the event handler using the serviceworker
globalscope.ondelete property: self.oncontentdelete = (event) => { ...
ServiceWorkerGlobalScope.onactivate - Web APIs
the onactivate property of the serviceworker
globalscope interface is an event handler fired whenever an activate event occurs (when the service worker activates).
... syntax serviceworker
globalscope.onactivate = function(event) { ...
ServiceWorkerGlobalScope.oncontentdelete - Web APIs
the oncontentdelete property of the serviceworker
globalscope interface is an event handler fired when an item is removed from the indexed content via the user agent.
... syntax serviceworker
globalscope.oncontentdelete = function(event) { ...
ServiceWorkerGlobalScope.onfetch - Web APIs
the onfetch property of the serviceworker
globalscope interface is an event handler fired whenever a fetch event occurs (usually when the windoworworker
globalscope.fetch() method is called.) syntax serviceworker
globalscope.onfetch = function(fetchevent) { ...
... }; example this code snippet is from the service worker prefetch sample (see prefetch example live.) the serviceworker
globalscope.onfetch event handler listens for the fetch event.
ServiceWorkerGlobalScope.oninstall - Web APIs
the oninstall property of the serviceworker
globalscope interface is an event handler fired whenever an install event occurs (when the service worker installs).
... syntax serviceworker
globalscope.oninstall = function(event) { ...
ServiceWorkerGlobalScope.onmessage - Web APIs
the onmessage property of the serviceworker
globalscope interface is an event handler fired whenever a message event occurs — when incoming messages are received.
...(they used to be represented by serviceworkermessageevent objects, which have now been deprecated.) syntax serviceworker
globalscope.onmessage = function(extendablemessageevent) { ...
ServiceWorkerGlobalScope.onsync - Web APIs
the serviceworker
globalscope.onsync event of the serviceworker
globalscope interface is fired whenever a syncevent event occurs.
... syntax serviceworker
globalscope.onsync = function(syncevent) { ...
ServiceWorkerGlobalScope.registration - Web APIs
the registration read-only property of the serviceworker
globalscope interface returns a reference to the serviceworkerregistration object, which represents the service worker's registration.
... specifications specification status comment service workersthe definition of 'serviceworker
globalscope.registration' in that specification.
ServiceWorkerGlobalScope.skipWaiting() - Web APIs
the serviceworker
globalscope.skipwaiting() method of the serviceworker
globalscope forces the waiting service worker to become the active service worker.
... syntax serviceworker
globalscope.skipwaiting().then(function() { //do something }); returns a promise that immediately resolves with undefined.
SharedWorkerGlobalScope: connect event - Web APIs
the connect event is fired in shared workers at their sharedworker
globalscope when a new client connects.
... bubbles no cancelable no interface messageevent event handler property sharedworker
globalscope.onconnect examples this example shows a shared worker file — when a connection to the worker occurs from a main thread via a messageport, the onconnect event handler fires.
WindowOrWorkerGlobalScope.caches - Web APIs
the caches read-only property of the windoworworker
globalscope interface returns the cachestorage object associated with the current context.
... working draft defined in a windoworworker
globalscope partial in the newest spec.
WindowOrWorkerGlobalScope.indexedDB - Web APIs
the indexeddb read-only property of the windoworworker
globalscope mixin provides a mechanism for applications to asynchronously access the capabilities of indexed databases.
... recommendation defined in a windoworworker
globalscope partial in the newest spec.
WindowOrWorkerGlobalScope.isSecureContext - Web APIs
the issecurecontext read-only property of the windoworworker
globalscope interface returns a boolean indicating whether the current context is secure (true) or not (false).
... specifications specification status comment secure contextsthe definition of 'windoworworker
globalscope.issecurecontext' in that specification.
WorkerGlobalScope.location - Web APIs
the location read-only property of the worker
globalscope interface returns the workerlocation associated with the worker.
... example if you called the following in a document served at localhost:8000 console.log(location); inside a worker (which would basically be the equivalent of self.console.log(self.location);, as these are being called on the worker scope, which can be referenced with worker
globalscope.self), you will get a workerlocation object written to the console — something like the following: workerlocation {hash: "", search: "", pathname: "/worker.js", port: "8000", hostname: "localhost"…} hash: "" host: "localhost:8000" hostname: "localhost" href: "http://localhost:8000/worker.js" origin: "http://localhost:8000" pathname: "/worker.js" port: "8000" protocol: "h...
WorkerGlobalScope.navigator - Web APIs
the navigator read-only property of the worker
globalscope interface returns the workernavigator associated with the worker.
... example if you call the following console.log(navigator); inside a worker (which would basically be the equivalent of self.console.log(self.navigator);, as these are being called on the worker scope, which can be referenced with worker
globalscope.self), you will get a workernavigator object written to the console — something like the following: object {online: true, useragent: "mozilla/5.0 (macintosh; intel mac os x 10_10_1) ap…ml, like gecko) chrome/40.0.2214.93 safari/537.36", product: "gecko", platform: "macintel", appversion: "5.0 (macintosh; intel mac os x 10_10_1) applewebki…ml, like gecko) chrome/40.0.2214.93 safari/537...
WorkerGlobalScope.onerror - Web APIs
the onerror property of the worker
globalscope interface represents an eventhandler to be called when the error event occurs and bubbles through the worker.
...}; example the following code snippet shows an onerror handler set inside a worker: self.onerror = function() { console.log('there is an error inside your worker!'); } specifications specification status comment html living standardthe definition of 'worker
globalscope.onerror' in that specification.
WorkerGlobalScope.onlanguagechange - Web APIs
the onlanguagechange property of the worker
globalscope interface represents an eventhandler to be called when the languagechange event occurs and bubbles through the worker.
...}; example the following code snippet shows an onlanguagechange handler set inside a worker: self.onlanguagechange = function() { console.log('your preferred language settings have been changed'); } specifications specification status comment html living standardthe definition of 'worker
globalscope.onlanguagechange' in that specification.
WorkerGlobalScope.onoffline - Web APIs
the onoffline property of the worker
globalscope interface represents an eventhandler to be called when the offline event occurs and bubbles through the worker.
...}; example the following code snippet shows an onoffline handler set inside a worker: self.onoffline = function() { console.log('your worker is now offline'); } specifications specification status comment html living standardthe definition of 'worker
globalscope.onoffline' in that specification.
WorkerGlobalScope.ononline - Web APIs
the ononline property of the worker
globalscope interface represents an eventhandler to be called when the online event occurs and bubbles through the worker.
...}; example the following code snippet shows an ononline handler set inside a worker: self.ononline = function() { console.log('your worker is now online'); } specifications specification status comment html living standardthe definition of 'worker
globalscope.ononline' in that specification.
GlobalEventHandlers.onload - Web APIs
the onload property of the
globaleventhandlers mixin is an eventhandler that processes load events on a window, xmlhttprequest, <img> element, etc.
GlobalEventHandlers.onloadend - Web APIs
the onloadend property of the
globaleventhandlers mixin is an eventhandler representing the code to be called when the loadend event is raised (when progress has stopped on the loading of a resource.) syntax img.onloadend = funcref; value funcref is the handler function to be called when the resource's loadend event fires.
GlobalEventHandlers.onloadstart - Web APIs
the onloadstart property of the
globaleventhandlers mixin is an eventhandler representing the code to be called when the loadstart event is raised (when progress has begun on the loading of a resource.) syntax img.onloadstart = funcref; value funcref is the handler function to be called when the resource's loadstart event fires.
WorkerGlobalScope.close() - Web APIs
the close() method of the worker
globalscope interface discards any tasks queued in the worker
globalscope's event loop, effectively closing this particular scope.
WorkerGlobalScope.onclose - Web APIs
summary the onclose property of the worker
globalscope interface represents an eventhandler to be called when the close event occurs and bubbles through the worker.
Index - Web APIs
user-supplied code is run in the audioworklet
globalscope
global execution context in a separate web audio rendering thread along with other nodes, allowing for zero-latency audio processing.
... 203 audioworklet
globalscope api, audioworklet
globalscope, experimental, interface, reference, web audio api the audioworklet
globalscope interface of the web audio api represents a
global execution context for user-supplied code, which defines custom audioworkletprocessor-derived classes.
... each baseaudiocontext has a single audioworklet available under the audioworklet property, which runs its code in a single audioworklet
globalscope.
...And 177 more matches
Document - Web APIs
it provides functionality
globally to the document, like how to obtain the page's url and create new elements in the document.
... the document interface is extended with the
globaleventhandlers interface:
globaleventhandlers.onabort is an eventhandler representing the code to be called when the abort event is raised.
...
globaleventhandlers.onanimationcancel an eventhandler called when an animationcancel event is sent, indicating that a running css animation has been canceled.
...And 86 more matches
Debugger - Firefox Developer Tools
new debugger([
global, …]) create a debugger object, and apply its adddebuggee method to each of the given
global objects to add them as the initial debuggees.
... allowunobservedasmjs a boolean value indicating whether asm.js code running inside this debugger instance’s debuggee
globals is invisible to debugger api handlers and breakpoints.
... onnewscript(script,
global) new code, represented by the debugger.script instancescript, has been loaded in the scope of the debuggees.
...And 44 more matches
JSAPI User Guide
the spidermonkey universe in order to run any javascript code in spidermonkey, an application must have three key elements: a jsruntime, a jscontext, and a
global object.
...
global objects.
... lastly, the
global object contains all the classes, functions, and variables that are available for javascript code to use.
...And 39 more matches
Window - Web APIs
a
global variable, window, representing the window in which the script is running, is exposed to javascript code.
...however, the window interface is a suitable place to include these items that need to be
globally available.
... in a tabbed browser, each tab is represented by its own window object; the
global window seen by javascript code running within a given tab always represents the tab in which the code is running.
...And 34 more matches
Index
if scopechain is omitted, it creates a new function object in cx's
global.
... this can be helpful if funobj is an extant function that you wish to use as if it were enclosed by a newly-created
global object.
... 37 js::current
globalornull jsapi reference, reference, référence(2), spidermonkey js::current
globalornull() returns the
global object for whatever function is currently running on the context.
...And 31 more matches
Bytecode Descriptions
in a
global scope: typeof x compiles to getgname "x"; typeof.
...format: jof_ic other expressions
globalthis stack: ⇒ this push the
global this value.
... not to be confused with the
globalthis property on the
global.
...And 29 more matches
Extending a Protocol
now let's implement the method in ./dom/base/navigator.cpp - we add a little bit of error boilerplate stuff, as is customary: already_addrefed<promise> navigator::echo(const nsastring& astring, errorresult& arv) { if (!mwindow || !mwindow->getdocshell()) { arv.throw(ns_error_unexpected); return nullptr; } refptr<promise> echopromise = promise::create(mwindow->as
global(), arv); if (ns_warn_if(arv.failed())) { return nullptr; } // message passing magic will happen here!
...as dom apis have access to the window object, we generally want to use the "pwindow
global" protocol to manage things for us: this protocol is convinient because we can easily access it from the window object...
...as a heirarchy, this will look like this: this means that, pwindow
global.ipdl: manages: meaning that pwindow
global.ipdl is responsible managing the creation of instances of pecho children and the parent.
...And 26 more matches
HTML documentation index - HTML: Hypertext Markup Language
7
global attributes attribute, html, reference, web
global attributes are attributes common to all html elements; they can be used on all elements, though they may have no effect on some elements.
... 8 accesskey
global attributes, html, reference, accesskey the accesskey
global attribute provides a hint for generating a keyboard shortcut for the current element.
... 9 autocapitalize autocapitalize,
global attributes, html, reference the autocapitalize
global attribute is an enumerated attribute that controls whether and how text input is automatically capitalized as it is entered/edited by the user.
...And 25 more matches
Index
26 components.manager xpcom:language bindings, xpconnect components.manager is a convenience reflection of the
global native component manager service.
... 38 components.utils.get
globalforobject add-ons, developing mozilla, extensions, javascript, xpcom:language bindings, xpconnect this method is used to determine the
global object with which an object is associated.
... this is the
global object in place at the time the object was created, which is to say the
global object used when executing the script that created the object.
...And 22 more matches
Appendix D: Loading Scripts - Archive of obsolete content
the examples below which make use of the services
global assume that you're previously imported the services.jsm module.
... debuggable: development tools support debugging javascript loaded by script tags disadvantages scoping: scripts loaded via script tags share the
global scope with all other scripts loaded into the same window.
... advantages namespacing: since scripts executed via evalinsandbox run in a defined namespace,
global namespace contamination and the resultant extension compatibility issues are not usually a problem.
...And 21 more matches
Skinning XUL Files by Hand - Archive of obsolete content
when this day comes, skins defined in a
global skin file will be applied to a whole application -- like the mozilla browser -- so that all the various windows and parts will look consistent.
...mozilla's current
global skin defines this basic behavior for several classes of button.
... a button is styled by the
global skin when its class attribute is set to a class which is defined in the
global skin.
...And 21 more matches
Theme changes in Firefox 2 - Archive of obsolete content
global/about.css new file; css used in the application's about box.
...
global/alltabs-box-bkgnd.png new file; the background for the "all tabs" drop-down menu at the right side of the tab bar.
...
global/alltabs-box-overflow-bkgnd.png new file; the background for the "all tabs" drop-down menu when there are enough tabs to activate tab bar scrolling.
...And 21 more matches
var - JavaScript
the var statement declares a function-scoped or
globally-scoped variable, optionally initializing it to a value.
... the scope of a variable declared with var is its current execution context and closures thereof, which is either the enclosing function and functions declared within it, or, for variables declared outside any function,
global.
... in the
global context, a variable declared using var is added as a non-configurable property of the
global object.
...And 21 more matches
JSAPI Cookbook
::rootedstring somestring(cx, ...); v.setint32(0); // or: v = js::int32value(0); v.setdouble(0.5); // or: v = js::doublevalue(0.5); v.setstring(somestring); // or: v = js::stringvalue(somestring); v.setnull(); // or: v = js::nullvalue(); v.setundefined(); // or: v = js::undefinedvalue(); v.setboolean(false); // or: v = js::booleanvalue(false); finding the
global object many of these recipes require finding the current
global object first.
... // javascript var
global = this; there is a function, js_get
globalforscopechain(cx), that makes a best guess, and sometimes that is the best that can be done.
... but in a jsnative the correct way to do this is: /* jsapi */ bool mynative(jscontext *cx, unsigned argc, js::value *vp) { js::callargs args = js::callargsfromvp(argc, vp); jsobject *
global = js_get
globalforobject(cx, &args.callee()); ...
...And 18 more matches
How to embed the JavaScript engine
spidermonkey 24 // following code might be needed in some case // #define __stdc_limit_macros // #include <stdint.h> #include "jsapi.h" /* the class of the
global object.
... */ static jsclass
global_class = { "
global", jsclass_
global_flags, js_propertystub, js_deletepropertystub, js_propertystub, js_strictpropertystub, js_enumeratestub, js_resolvestub, js_convertstub, }; int main(int argc, const char *argv[]) { jsruntime *rt = js_newruntime(8l * 1024 * 1024, js_use_helper_threads); if (!rt) return 1; jscontext *cx = js_newcontext(rt, 8192); if (!cx) return 1; { // scope for our various stack objects (jsautorequest, rootedobject), so they all go // out of scope before we js_destroycontext.
... jsautorequest ar(cx); // in practice, you would want to exit this any // time you're spinning the event loop js::rootedobject
global(cx, js_new
globalobject(cx, &
global_class, nullptr)); if (!
global) return 1; js::rootedvalue rval(cx); { // scope for jsautocompartment jsautocompartment ac(cx,
global); js_initstandardclasses(cx,
global); const char *script = "'hello'+'world, it is '+new date()"; const char *filename = "noname"; int lineno = 1; bool ok = js_evaluatescript(cx,
global, script, strlen(script), filename, lineno, rval.address()); if (!ok) return 1; } jsstring *str = rval.tostring(); printf("%s\n", js_encodestring(cx, str)); } ...
...And 16 more matches
WebIDL bindings
returning null from getparentobject is allowed in situations in which it's ok to associate the resulting object with a random
global object for security purposes; this is not usually ok for things that are exposed to web content.
...static methods will be passed a const
globalobject& for the relevant
global and can get a jscontext* by calling context() on it.
... double dosomething(myclass* aotherinstance); already_addrefed<myinterface> dosomethingelse(optional<int32_t> amaybenumber, errorresult& rv); void dosomethingelse(myclass& aotherinstance, errorresult& rv); void dotheother(jscontext* cx, js::value asomething); void doyetanotherthing(bool aactuallydoit); static void staticoperation(const
globalobject& a
global, js::value asomething); } c++ reflections of webidl attributes a webidl attribute is turned into a pair of method calls for the getter and setter on the underlying c++ object.
...And 16 more matches
HTML attribute reference - HTML: Hypertext Markup Language
accesskey
global attribute keyboard shortcut to activate or add focus to the element.
... autocapitalize
global attribute sets whether input is automatically capitalized when entered by user autocomplete <form>, <input>, <select>, <textarea> indicates whether controls in this form can by default have their values automatically completed by the browser.
... class
global attribute often used with css to style elements with common properties.
...And 16 more matches
Debugger.Object - Firefox Developer Tools
nces are created by spidermonkey in the process of exposing debuggee’s behavior and state to the debugger, the debugger can use debugger.object.prototype.makedebuggeevalue to create debugger.object instances for given debuggee objects, or use debugger.object.prototype.copy and debugger.object.prototype.create to create new objects in debuggee compartments, allocated as if by particular debuggee
globals.
...
global a debugger.object instance referring to the
global object in whose scope the referent was allocated.
... this does not unwrap cross-compartment wrappers: if the referent is a wrapper, the result refers to the wrapper’s
global, not the wrapped object’s
global.
...And 15 more matches
nsIContentPrefService2
a preference need not have a domain, and in that case the preference is called a "
global" preference.
... this interface doesn't impart any special significance to
global preferences; they're simply name-value pairs that aren't associated with any particular domain.
... as a consumer of this interface, you might choose to let a
global preference override all non-
global preferences of the same name, for example, for whatever definition of "override" is appropriate for your use case.
...And 14 more matches
Debugger.Object - Firefox Developer Tools
tances are created by spidermonkey in the process of exposing debuggee's behavior and state to the debugger, the debugger can use debugger.object.prototype.makedebuggeevalue to create debugger.object instances for given debuggee objects, or use debugger.object.prototype.copy and debugger.object.prototype.create to create new objects in debuggee compartments, allocated as if by particular debuggee
globals.
...
global a debugger.object instance referring to the
global object in whose scope the referent was allocated.
... this does not unwrap cross-compartment wrappers: if the referent is a wrapper, the result refers to the wrapper's
global, not the wrapped object's
global.
...And 14 more matches
ui/button/toggle - Archive of obsolete content
like action buttons, you can control their state on a per-window or per-tab basis as well as
globally.
...at the root is the
global state, then there's a state you can set for each window, then a state you can set for each tab.
...initially the buttons in all tabs and windows will display the label value inherited from the
global state: browser: label = "my default" w1 t1 > displays "my default" t2 > displays "my default" w2 t3 > displays "my default" t4 > displays "my default" if you then set a label specific to t3 as "my t3 label", then set a label state specific to w2 as "my w2 label", then the button displayed when t3 is the active tab will still show "my t3 label", but the button displayed when t4 is the active tab will show "my w2 label": browser: label = "my default" w1 t1 > di...
...And 13 more matches
Modules - Archive of obsolete content
to improve encapsulation, each module should be defined in the scope of its own
global object.
...xulrunner adds a built-in object, known as components, to the
global scope.
...however, the following example shows how it can be used to load scripts from other locations: const { classes: cc interfaces: ci } = components; var instance = cc["@mozilla.org/moz/jssubscript-loader;1"]; var loader = instance.getservice(ci.mozijssubscriptloader); function loadscript(url) { loader.loadsubscript(url); } when a script is loaded, it is evaluated in the scope of the
global object of the script that loaded it.
...And 12 more matches
Writing Skinnable XUL and CSS - Archive of obsolete content
in our particular mozilla skin, there is a special package called
global.
... this package contains a special skin called the
global skin.
... if you wish for your package to blend in with the other packages, then the skin for your package should inherit information from the
global skin in order to reduce the amount of duplication across packages and in order to make the ui as a whole easier to skin.
...And 12 more matches
MCD, Mission Control Desktop, AKA AutoConfig - Archive of obsolete content
.identity.id1.draft_folder", "imap://" + env_user + "@imap-int.int-evry.fr/drafts"); lockpref("mail.identity.id1.drafts_folder_picker_mode", "0"); lockpref("mail.identity.id1.fcc_folder", "imap://" + env_user + "@imap-int.int-evry.fr/sent"); lockpref("mail.identity.id1.fcc_folder_picker_mode", "0"); lockpref("mail.identity.id1.organization", "int evry france"); lockpref("mail.identity.id1.override
global_pref", true); lockpref("mail.identity.id1.reply_to", ""); //imap lockpref("mail.server.server2.hostname", "imap-int.int-evry.fr"); lockpref("mail.server.server2.issecure", true); lockpref("mail.server.server2.login_at_startup", true); lockpref("mail.server.server2.max_cached_connections", 5); //lockpref("mail.server.server2.name", "jehan.procaccia@int-evry.fr"); lockpref("mail.server.server2.typ...
...mailnews.ui.threadpane.version", 5); /* 3) define here (because if set after "4)" below it doesn't work!) processldapvalues which is eventually called by getldapattributes() just below, check getldapattributes() code from $mozilla_home/defaults/autoconfig/prefcalls.js to see the inside call to "user defined" processldapvalues */ function processldapvalues(values) { if(values) { // set the
global var with the values returned from the ldap query ldap_values = values; var uid = getldapvalue(values, "uid"); var cn = getldapvalue(values, "cn"); var mail = getldapvalue(values, "mail"); var url = getldapvalue(values, "labeleduri"); // those ldap variables are only available in this processldapvalues context!
...esn't work !) processldapvalues which is eventually called by getldapattributes() just below, // check getldapattributes() code from $mozilla_home/defaults/autoconfig/prefcalls.js to see the inside call to "user defined" processldapvalues /* commented all this section about ldap calls, not supported in ff5 packages :-( function processldapvalues (values) { if(values) { // set the
global var with the values returned from the ldap query ldap_values = values; var uid = getldapvalue ( values ,"uid" ); var cn = getldapvalue ( values ,"cn" ); var mail = getldapvalue ( values ,"mail" ); var url = getldapvalue ( values ,"labeleduri" ); //debug with popup error messages doesn't work anymore :-( !!
...And 11 more matches
NSS API Guidelines
secport_decl_
global_ptr_class(classname, size) - same as above except classname can be used in other object files.
...exceptions to this include objects which are created on the fly, or as
global objects.
... next we examine
global data, including function local static structures.
...And 11 more matches
this - JavaScript
syntax this value a property of an execution context (
global, function or eval) that, in non–strict mode, is always a reference to an object and in strict mode can be any value.
... description
global context in the
global execution context (outside of any function), this refers to the
global object whether in strict mode or not.
... // in web browsers, the window object is also the
global object: console.log(this === window); // true a = 37; console.log(window.a); // 37 this.b = "mdn"; console.log(window.b) // "mdn" console.log(b) // "mdn" note: you can always easily get the
global object using the
global globalthis property, regardless of the current context in which your code is running.
...And 11 more matches
Message manager overview
these are like frame scripts, except they are
global to the child process.
... process scripts are most likely to be useful when an extension wants to run some code only once in the content process, to access some
global service: for example, to register an observer or a content policy.
... chrome process in the chrome process, there's a hierarchy of frame message managers: the
global frame message manager, window message managers, and browser message managers.
...And 10 more matches
JavaScript-DOM Prototypes in Mozilla
moreover, no specification guarantees that there will be a
globally available htmlimageelement, or that such object will be the constructor for any arbitrary image's [[prototype]].
...object.prototype | |.__proto__ | null if you have an instance of a htmldivelement in javascript, the following will hold true: div.__proto__ === htmldivelement.prototype which means that the following should also be true: div.__proto__ === div.constructor.prototype non standard no browser is required to provide modifiable __proto__, nor a
global node, nor provide any way to get at host objects nor their associated prototypes.
...during startup, the nsdomclassinfo code registers two different types of "
global names", these are names of properties of the
global object with special meaning to the dom code.
...And 9 more matches
Using the Places history service
the places history service ("navhistory") implements these history interfaces: nsi
globalhistory2: basic add page, is visited functionality used by the docshell when visiting and rendering pages.
... nsi
globalhistory3: adds extra functions for dealing with redirects and hints for rendering (gecko flags).
... differences from previous implementations the previous ns
globalhistory service stored one entry for each page in history.
...And 9 more matches
ui/button/action - Archive of obsolete content
by default, the button has
global state: that is, its properties are the same across all open windows and tabs, and updating them updates the button's state across all open windows and tabs.
...
globals constructors actionbutton(options) creates an action button.
... by default, a button's properties are
global, meaning that they are the same across all open windows and tabs, and that if you update these properties, then they are updated across all windows and tabs.
...And 8 more matches
JavaScript Daemons Management - Archive of obsolete content
|*| http://www.gnu.org/licenses/gpl-3.0.html |*| \*/ "use strict"; /**************************** * the daemon system * ****************************/ /* the
global "daemon" constructor */ function daemon (oowner, ftask, nrate, nlen, finit, fonstart) { if (!(this && this instanceof daemon)) { return; } if (arguments.length < 2) { throw new typeerror("daemon - not enough arguments"); } if (oowner) { this.owner = oowner }; this.task = ftask; if (isfinite(nrate) && nrate > 0) { this.rate = math.floor(nrate); } if (nlen > 0) { this.len...
...gth = math.floor(nlen); } if (fonstart) { this.onstart = fonstart; } if (finit) { this.onstop = finit; finit.call(oowner, this.index, this.length, this.backw); } } /* create the daemon.blank() constructor and the
global daemon.context object */ daemon.blank = function () {}; daemon.context = daemon.blank.prototype; /* make love with the gc :-) */ daemon.blank.prototype = /* important!
...totype.rate = 100; daemon.prototype.length = infinity; daemon.prototype.reversals = 0; daemon.prototype.onstart = null; daemon.prototype.onstop = null; /* these properties should be read-only after the creation of the daemon */ daemon.prototype.session = -1; daemon.prototype.index = 0; daemon.prototype.paused = true; daemon.prototype.backw = true; /* system required daemon
global object methods */ daemon.forcecall = function (odmn) { odmn.index += odmn.backw ?
...And 8 more matches
Index - Archive of obsolete content
22 self this article documents the self object that is available as a
global in content scripts.
...firefox 3 implements a
global microformats object that provides access to microformats.
...liveconnect gives your extension's javascript code (linked from or contained in xul code) access to 2 objects: java and packages (note that per this thread, although the new documentation for the liveconnect reimplementation states that these
globals will be deprecated (in the context of applets), "firefox and the java plug-in will continue to support the
global java/packages keywords, in particular in the context of firefox extensions.").
...And 8 more matches
/loader - Archive of obsolete content
globals: provides a set of
globals shared across modules loaded via this loader.
...
globals each module loaded via the loader instance is secured in own js sandbox.
...but sometimes it's convenient to define a set of common
globals that will be shared across modules.
...And 7 more matches
Creating a Skin - Archive of obsolete content
for this reason, we'll modify only the file findfile.css rather than the
global.css file.
... #find-button { list-style-image: url("chrome://
global/skin/checkbox/images/cbox-check.jpg"); font-weight: bold; } #cancel-button { list-style-image: url("chrome://
global/skin/icons/images/close-button.jpg"); } button:hover { color: #000066; } we add some images to the buttons and make the find button have bold text to indicate that it is the default button.
... creating a
global skin the skin created above is simple and only applies to the find files dialog.
...And 7 more matches
JS_NewObject
added in spidermonkey 1.8.1 clasp->flags must not have the jsclass_
global_flags bits set (use js_new
globalobject instead).
...the usual way to do this is to make jsclasses
global or static.
... previous behaviour obsolete since jsapi 45 here's how the process works in detail: first, we must identify a
global object.
...And 7 more matches
Using Web Workers - Web APIs
worker()) that runs a named javascript file — this file contains the code that will run in the worker thread; workers run in another
global context that is different from the current window.
... thus, using the window shortcut to get the current
global scope (instead of self) within a worker will return an error.
... the worker context is represented by a dedicatedworker
globalscope object in the case of dedicated workers (standard workers that are utilized by a single script; shared workers use sharedworker
globalscope).
...And 7 more matches
Grammar and types - JavaScript
this syntax can be used to declare both local and
global variables, depending on the execution context.
...this form creates an undeclared
global variable.
...undeclared
global variables can often lead to unexpected behavior.
...And 7 more matches
XUL Structure - Archive of obsolete content
for example, examining classic.jar: skin classic browser browser.css -- other browser skin files go here --
global --
global skin files go here -- .
...in the example above, a directory exists for theme related files for the browser and another for
global theme related files.
... the
global directory contains skin files that are general to all packages.
...And 6 more matches
Command line crash course - Learn web development
if you enter it in a new browser tab, you’ll (eventually) get redirected to /docs/web/api/windoworworker
globalscope/fetch.
... try running the following, and you’ll see that in fact there are three redirects happening before we reach the final page: curl /docs/web/api/fetch -l -i | grep location your output should look something like this (curl will first output some download counters and suchlike): location: /docs/web/api/fetch location: /docs/web/api/
globalfetch/
globalfetch.fetch() location: /docs/web/api/
globalfetch/fetch location: /docs/web/api/windoworworker
globalscope/fetch although contrived, we could take this result a little further and transform the location: line contents, adding the base origin to the start of each one so that we get complete urls printed out.
... try running this: curl /docs/web/api/fetch -l -i | grep location | awk '{ print "https://developer.mozilla.org" $2 }' your final output should look something like this: /docs/web/api/fetch /docs/web/api/
globalfetch/
globalfetch.fetch() /docs/web/api/
globalfetch/fetch /docs/web/api/windoworworker
globalscope/fetch by combining these commands we've customised the output to show the full urls that the mozilla server is redirecting through when we request the /docs/web/api/fetch url.
...And 6 more matches
Message manager overview
these are like frame scripts, except they are
global to the child process.
... process scripts are most likely to be useful when chrome code wants to run some code only once in the content process, to access some
global service: for example, to register an observer or a content policy.
... there are three different subtypes of frame message manager: the
global message manager, the window message manager, and the browser message manager.
...And 6 more matches
JS_GetParent
each object is assigned a parent when it is created: the standard library objects and functions all have the
global object as their parent.
... objects created by standard library functions, such as array.prototype.concat, have the
global object as their parent.
... for example, after d = new date, d has the same parent as date, ordinarily the
global object.
...And 6 more matches
JS_InitStandardClasses
obj js::handle<jsobject*> the
global object to initialize.
... this object must be of a jsclass that has the jsclass_
global_flags bits set.
... description js_initstandardclasses initializes the built-in javascript
global properties.
...And 6 more matches
DragEvent - Web APIs
globaleventhandlers
globaleventhandlers.ondrag a
global event handler for the drag event.
...
globaleventhandlers.ondragend a
global event handler for the dragend event.
...
globaleventhandlers.ondragenter a
global event handler for the dragenter event.
...And 6 more matches
PointerEvent - Web APIs
globaleventhandlers
globaleventhandlers.onpointerover a
global event handler for the pointerover event.
...
globaleventhandlers.onpointerenter a
global event handler for the pointerenter event.
...
globaleventhandlers.onpointerdown a
global event handler for the pointerdown event.
...And 6 more matches
Service Worker API - Web APIs
activation can happen sooner using serviceworker
globalscope.skipwaiting() and existing pages can be claimed by the active worker using clients.claim().
... extendableevent extends the lifetime of the install and activate events dispatched on the serviceworker
globalscope, as part of the service worker lifecycle.
... extendablemessageevent the event object of a message event fired on a service worker (when a channel message is received on the serviceworker
globalscope from another context) — extends the lifetime of such events.
...And 6 more matches
A re-introduction to JavaScript (JS tutorial) - JavaScript
you end up with dozens of functions in your
global namespace.
...if dot notation wasn't used for the call, this refers to the
global object.
...for example: var s = makeperson('simon', 'willison'); var fullname = s.fullname; fullname(); // undefined undefined when we call fullname() alone, without using s.fullname(), this is bound to the
global object.
...And 6 more matches
delete operator - JavaScript
any property declared with var cannot be deleted from the
global scope or from a function's scope.
... as such, delete cannot delete any functions in the
global scope (whether this is part from a function definition or a function expression).
... functions which are part of an object (apart from the
global scope) can be deleted with delete.
...And 6 more matches
Strict mode - JavaScript
first, strict mode makes it impossible to accidentally create
global variables.
... in normal javascript mistyping a variable in an assignment creates a new property on the
global object and continues to "work" (although future failure is possible: likely, in modern javascript).
... assignments, which would accidentally create
global variables, instead throw an error in strict mode: 'use strict'; // assuming no
global variable mistypedvariable exists mistypevariable = 17; // this line throws a referenceerror due to the // misspelling of variable second, strict mode makes assignments which would otherwise silently fail to throw an exception.
...And 6 more matches
Index - MDN Web Docs Glossary: Definitions of Web-related terms
172
global object codingscripting, glossary, needscontent a
global object is an object that always exists in the
global scope.
... 173
global scope codingscripting, glossary, needscontent in a programming environment, the
global scope is the scope that contains, and is visible in, all other scopes.
... 174
global variable codingscripting, glossary a
global variable is a variable that is declared in the
global scope in other words, a variable that is visible from all other scopes.
...And 5 more matches
Overview of Mozilla embedding APIs
the service manager exposes all of the available xpcom services - each service represents a
global object which provides some piece of functionality.
... nsmemory nsmemory::alloc nsmemory::realloc nsmemory::free this helper class provides static accessors to the
global nsmemory service.
... ns_get
globalcomponentmanager this function returns an instance of the component manager service.
...And 5 more matches
PRThreadScope
syntax #include <prthread.h> typedef enum prthreadscope { pr_local_thread, pr_
global_thread pr_
global_bound_thread } prthreadscope; enumerators pr_local_thread a local thread, scheduled locally by nspr within the process.
... pr_
global_thread a
global thread, scheduled by the host os.
... pr_
global_bound_thread a
global bound (kernel) thread, scheduled by the host os description an enumerator of type prthreadscope specifies how a thread is scheduled: either locally by nspr within the process (a local thread) or
globally by the host (a
global thread).
...And 5 more matches
Invariants
js_setparent can violate this, if the application is really that dumb, but generally every object is newer than its __parent__.) the tracejit must not trace into a function whose scope chain ends in a different
global object.
... (if it is a script function,
global names accessed in that function would refer to a different
global object.
... however, there is another internal api, js::switchtocompartment, that lets you break this invariant, and of course in xpconnect we use that from time to time when we know we aren't going to be creating any new objects (other than
global objects, which have no parent or prototype) or doing anything that might call back into native code that could create objects.
...And 5 more matches
JS::PersistentRooted
this article covers features introduced in spidermonkey 31 a copyable, assignable
global gc root type with arbitrary lifetime, an infallible constructor, and automatic unrooting on destruction.
...this is typically used for
global variables.
... js::persistentrooted<t> is a copyable, assignable
global gc root type with arbitrary lifetime, an infallible constructor, and automatic unrooting on destruction.
...And 5 more matches
SpiderMonkey 1.8.7
a compartment is a
global object, a context, and a set of related objects with no outside references (crosscompartment wrappers excepted).
...
global objects
global objects have been specialized, and must be be created with either js_new
globalobject or js_newcompartmentand
globalobject.
...
global objects must also have the jsclass_
global_flags flag set.
...And 5 more matches
Split object
the window object is the
global object for scripts in web pages.
...for performance, access to
global properties must be fast.
...but each web page must load with fresh
globals.
...And 5 more matches
nsIXPConnect
obsolete since gecko 2.0 void getxpcwrappednativejsclassinfo(out jsequalityop equality); nsixpconnectjsobjectholder holdobject(in jscontextptr ajscontext, in jsobjectptr aobject); void initclasses(in jscontextptr ajscontext, in jsobjectptr a
globaljsobj); nsixpconnectjsobjectholder initclasseswithnewwrapped
global(in jscontextptr ajscontext, in nsisupports acomobj, in nsiidref aiid, in nsiprincipal aprincipal, in nsisupports aextraptr, in pruint32 aflags); nsivariant jstovariant(in jscontextptr ctx, in jsval value); nsivariant jsvaltovariant(in jscontextptr cx, in jsvalptr ajsval); void movewrappers(in j...
... deferreleasesuntilaftergarbagecollection prbool obsolete since gecko 1.9 pendingexception nsiexception constants constant value description init_js_standard_classes 1 << 0 flag_system_
global_object 1 << 1 omit_components_object 1 << 2 xpc_xow_clearscope 1 tells updatexows() to clear the scope of all of the xows it finds.
... nsixpconnectjsobjectholder holdobject( in jscontextptr ajscontext, in jsobjectptr aobject ); parameters ajscontext missing description aobject missing description return value missing description exceptions thrown missing exception missing description initclasses() initializes classes on a
global object that has already been created.
...And 5 more matches
Enhanced Extension Installation - Archive of obsolete content
first it must locate the firefox executable, then run it with the -install-
global-extension command line flag, which installs from a xpi into the firefox application directory.
... there is no clean uninstall procedure, as the -install-
global-extension flag was designed only as a means to install items for all user profiles, not as a means for third party installers to register their components.
...omething like this: nsextensionsdatasource.prototype = { _composite // the composite that manages the two // datasources at the install locations for // read-only information requests _profileextensions // the rdf/xml datasource for the items at the // profile install location _
globalextensions // the rdf/xml datasource for the items at the //
global install location.
...And 4 more matches
Adding Style Sheets - Archive of obsolete content
the second line has always been: <?xml-stylesheet href="chrome://
global/skin/" type="text/css"?> this line indicates that we want to use the style provided by chrome://
global/skin/.
... in mozilla, this will be translated as the file
global.css, which contains default style information for xul elements.
...first, the modifed lines of findfile.xul: <?xml-stylesheet href="chrome://
global/skin/" type="text/css"?> <?xml-stylesheet href="findfile.css" type="text/css"?> ...
...And 4 more matches
Reference - Archive of obsolete content
; //function note that math is not a constructor function, but merely a
global object with methods and properties useful to perform various mathematical operations.
...like math, date is a
global object that contains useful methods (date.parse() and date.utc()).
...js article from the main page and
global objects page at least.
...And 4 more matches
Functions — reusable blocks of code - Learn web development
the top level outside all your functions is called the
global scope.
... values defined in the
global scope are accessible from everywhere in the code.
... the zoo keeper is like the
global scope — he or she has the keys to access every enclosure, to restock food, tend to sick animals, etc.
...And 4 more matches
Styling Vue components with CSS - Learn web development
global styles in single file components (.vue files).
... styling with external css files you can include external css files and apply them
globally to your app.
... adding
global styles to single file components now that we've reset our css to be uniform across browsers, we need to customize the styles a bit more.
...And 4 more matches
sslfnc.html
description the cipherprefsetdefault function enables or disables individual cipher suites
globally.
...ssl_restricted means the suite can be used by clients only when they are communicating with domestic server software or with international server software that presents a
global id certificate.
...government policy for servers with
global id certificates.
...And 4 more matches
JSClass.flags
(the jsclass.reserveslots hook also allocates reserved slots to objects.) mxr id search for jsclass_has_reserved_slots jsclass_
global_flags this flag is only relevant for the class of an object that is used as a
global object.
... (ecmascript specifies a single
global object, but in spidermonkey the
global object is the last object in the scope chain, which can be different objects at different times.
...js_executescript and similar apis set the
global object for the code they execute.
...And 4 more matches
JS_GetScopeChain
when you only used this function to retrieve the scope chain's
global, then you can use the function js_get
globalforscopechain.
...these objects represent the lexical scope of the currently executing statement or expression, not the call stack, so they include: the variable objects of any enclosing functions or let statements or expressions, and any objects selected by enclosing with statements, in order from the most-nested scope outward; lastly the
global object against which the function was created.
... note that cx's current
global object, as set by js_set
globalobject, is not guaranteed to be on the scope chain.
...And 4 more matches
JSAPI reference
obsolete since jsapi 27 enum jsversion jsversion_ecma_3 jsversion_1_6 jsversion_1_7 jsversion_1_8 jsversion_ecma_5 jsversion_default jsversion_unknown jsversion_latest js_getimplementationversion js_getversion js_setversionforcompartment added in spidermonkey 31 js_stringtoversion js_versiontostring js_setversion obsolete since jsapi 25 js::current
globalornull added in spidermonkey 31 js_get
globalforscopechain obsolete since jsapi 25 js_get
globalobject obsolete since jsapi 24 js_set
globalobject obsolete since jsapi 25 js_initclass js_initstandardclasses js_resolvestandardclass js_enumeratestandardclasses js_enumerateresolvedstandardclasses obsolete since jsapi 24 js_isrunning js_saveframechain js_restoreframechain js_is...
...assigning obsolete since javascript 1.8.5 js_isconstructing obsolete since jsapi 26 js_isconstructing_possiblywithgiventhisobject obsolete since jsapi 17 js_getscopechain obsolete since javascript 1.8.7 compartments: class jsautocompartment added in spidermonkey 24 js_new
globalobject added in spidermonkey 17 js_entercompartment added in spidermonkey 24 js_leavecompartment added in spidermonkey 24 js_getcompartmentprivate added in spidermonkey 1.8.5 js_setcompartmentprivate added in spidermonkey 1.8.5 js_get
globalforcompartmentornull added in spidermonkey 17 js_iteratecompartments added in spidermonkey 17 js_setdestroycompartmentcallback added in spidermonkey 17 js_setcompartmentnamecallback added in spidermonkey 17 js_newcompartmentand
globalobject added in spidermonkey 1.8...
...solete since jsapi 13 js_getexternalstringgctype obsolete since jsapi 13 js_newexternalstringwithclosure added in spidermonkey 6 obsolete since jsapi 13 js_getexternalstringclosure added in spidermonkey 6 obsolete since jsapi 13 objects typedef jsobject js_defineobject js_newobject js_newplainobject added in spidermonkey 38 js_newobjectforconstructor added in spidermonkey 1.8.5 js_new
globalobject added in spidermonkey 1.8 js_newobjectwithgivenproto js_new added in spidermonkey 1.8 js_is
globalobject added in jsapi 24 js_constructobject obsolete since jsapi 16 js_constructobjectwitharguments obsolete since jsapi 16 js_getclass js_getobjectprototype added in jsapi 17 js_getfunctionprototype added in spidermonkey 17 js_getarrayprototype added in spidermonkey 24 js_get...
...And 4 more matches
SpiderMonkey 1.8.5
a compartment is a
global object, a context, and a set of related objects with no outside references (crosscompartment wrappers excepted).
...
global objects
global objects have been specialized, and must be be created with either js_new
globalobject or js_newcompartmentand
globalobject.
...
global objects must also have the jsclass_
global_flags flag set.
...And 4 more matches
Places Developer Guide
string getitemguid(aitemid) obsolete since gecko 14.0 - returns a
globally unique identifier for the item.
... setitemguid(aitemid, aguid) obsolete since gecko 14.0 - returns a
globally unique identifier for the item.
...while nsinavhistory is the main interface for history, there are a couple of other interfaces available for legacy and context-specific uses: nsibrowserhistory - detailed page addition and removal methods nsi
globalhistory2 - simple page detection and addition nsi
globalhistory3 - for adding document redirects adding to history places provides a couple of interfaces for adding to, and editing the browsing history.
...And 4 more matches
Avoiding leaks in JavaScript XPCOM components
basics of memory management creating objects that are not a fixed size for the lifetime of the program (
global variables) or a fixed size for the lifetime of a function (stack variables) requires a system for dynamic memory allocation: a system that allocates memory from a space called the heap.
...the roots include things like
global variables and variables on the current call stack.
...for example, if an object's constructor adds the object to a list that is reachable from a
global variable and nothing ever removes it from the list, the object will never be destroyed since it is always reachable from the list.
...And 4 more matches
Observer Notifications
topic subject data description chrome-document-
global-created nsidomwindow null sent immediately after a chrome document window has been set up, but before any script code has been executed.
... this lets extensions inject api into chrome windows as needed (see nsidom
globalpropertyinitializer for an alternative method of doing this, which uses significantly less memory).
... content-document-
global-created nsidomwindow origin sent immediately after a web content document window has been set up, but before any script code has been executed.
...And 4 more matches
Browser storage limits and eviction criteria - Web APIs
the
global limit is calculated as 50% of free disk space.
... there's also another limit called group limit — this is defined as 20% of the
global limit, but it has a minimum of 10 mb and a maximum of 2 gb.
...for example: mozilla.org — group1, origin1 www.mozilla.org — group1, origin2 joe.blogs.mozilla.org — group1, origin3 firefox.com — group2, origin4 in this group, mozilla.org, www.mozilla.org, and joe.blogs.mozilla.org can aggregately use a maximum of 20% of the
global limit.
...And 4 more matches
A basic 2D WebGL animation example - Web APIs
the standard webgl
global gl_position is then set to the transformed and rotated vertex's position.
...since we're drawing a solid, untextured object with no lighting applied, this is exceptionally simple: <script id="fragment-shader" type="x-shader/x-fragment"> #ifdef gl_es precision highp float; #endif uniform vec4 u
globalcolor; void main() { gl_fragcolor = u
globalcolor; } </script> this starts by specifying the precision of the float type, as required.
... then we set the
global gl_fragcolor to the value of the uniform u
globalcolor, which is set by the javascript code to the color being used to draw the square.
...And 4 more matches
<input>: The Input (Form Input) element - HTML: Hypertext Markup Language
this element includes the
global attributes.
... attributes for the <input> element include
global html attributes and: attribute type or types description accept file hint for expected file type in file upload controls alt image alt attribute for the image type.
... id
global attribute valid for all elements, including all the input types, it defines a unique identifier (id) which must be unique in the whole document.
...And 4 more matches
Standard built-in objects - JavaScript
the term "
global objects" (or standard built-in objects) here is not to be confused with the
global object.
... here, "
global objects" refer to objects in the
global scope.
... the
global object itself can be accessed using the this operator in the
global scope.
...And 4 more matches
Chapter 5: Let's build a Firefox extension - Archive of obsolete content
listing 5: content for clock.xul <?xml version="1.0"?> <?xml-stylesheet href="chrome://
global/skin/"?> <dialog id="clockdialog" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" title="clock" buttons="accept" onload="initclock();"> <script type="application/javascript" src="chrome://helloworld/content/clock.js"/> <hbox align="center"> <label value="current time:" /> <textbox id="currenttime" /> </hbox> </dialog> listing 6: content for clock.
... listing 8: revisions to clock.xul <?xml version="1.0"?> <?xml-stylesheet href="chrome://
global/skin/"?> <!doctype dialog system "chrome://helloworld/locale/clock.dtd"> <dialog id="clockdialog" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" title="&helloworld.clock;" buttons="accept" onload="initclock();"> <script type="application/javascript" src="chrome://helloworld/content/clock.js" /> <hbox align="center"> <label value="&helloworld.currenttime;:" /...
... listing 10: additional content for chrome.manifest skin helloworld classic/1.0 skin/classic/ style chrome://browser/content/browser.xul chrome://helloworld/skin/overlay.css style chrome://
global/content/customizetoolbar.xul chrome://helloworld/skin/overlay.css register skin package (skin instruction) line 1 beginning skin is used to register the skin package; helloworld is the package name; skin/classic/ is the relative path to the folder containing the source files; classic/1.0 indicates that this skin package is meant for the firefox standard theme.
...And 3 more matches
Getting Started - Archive of obsolete content
delete the bolded text: original skin,install,url,jar:resource:/chrome/classic.jar!/skin/classic/
global/ modified skin,install,url,resource:/chrome/classic/skin/classic/
global/ once you have made these modifications, save them and run mozilla.
...the most important directory is \
global.
...go into \mozilla\chrome\classic\skin\classic\
global and open button.css in your favourite text editor.
...And 3 more matches
Creating a Window - Archive of obsolete content
the simplest xul file has the following structure: <?xml version="1.0"?> <?xml-stylesheet href="chrome://
global/skin/" type="text/css"?> <window id="findfile-window" title="find files" orient="horizontal" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <!-- other elements go here --> </window> this window will not do anything since it doesn't contain any ui elements.
... <?xml-stylesheet href="chrome://
global/skin/" type="text/css"?> this line is used to specify the style sheets to use for the file.
...in this case, we import the styles found in the
global part of a skin package.
...And 3 more matches
Document Object Model - Archive of obsolete content
in javascript, there is always a single
global object that is always available.
... you can refer to the properties and methods of the
global object without having to qualify them with an object.
... for example, if the
global object has a 'name' property, you can change the name with the code 'name = 7', without having to specify any object to use.
...And 3 more matches
Introducing a complete toolchain - Learn web development
if not, we'll get you to install prettier as a
global utility using the terminal right now.
... you can check whether you've already got it installed
globally using the following command: prettier -v if installed, you'll get a version number returned like 2.0.2; if not, it'll return something along the lines of "command not found".
... eslint is installed via npm, so as per discussions in chapter 2, you have the choice to install this tool locally or
globally.
...And 3 more matches
Command line options
"c:\program files\mozilla xulrunner\1.8.0.4\xulrunner\xulrunner.exe" --install-app "c:\users\billdo\desktop\myapplication.xpi" /opt/xulrunner/1.8.0.4/xulrunner/xulrunner --install-app ~/desktop/myapplication.xulapp /library/frameworks/xul.framework/xulrunner-bin --install-app ~/desktop/myapplication.xpi --register-
global registers xulrunner on the system for all users.
... --unregister-
global unregisters xulrunner for all users.
... add-ons gecko 1.9.2 note -install-
global-extension and -install-
global-theme have been removed from gecko 1.9.2 and upwards.
...And 3 more matches
Frame script environment
the frame script's
global is a contentframemessagemanager, giving it the following environment: content the dom window of the content loaded in the browser.
... in particular, note that a frame script accesses the dom window using content, not window: // frame script var links = content.document.getelementsbytagname("a"); all the frame scripts running in a tab share this
global.
... however, any top-level variables defined by a script are not stored on the
global: instead, top-level variables are stored in a special per-script object that delegates to the per-tab
global.
...And 3 more matches
Frame script environment
the frame script's
global is a contentframemessagemanager, giving it the following environment: content the dom window of the content loaded in the browser may be null (see below) docshell the nsidocshell associated with the browser.
... in particular, note that a frame script accesses the dom window using content, not window: // frame script var links = content.document.getelementsbytagname("a"); all of the frame scripts running in a tab share this
global.
... however, any top-level variables defined by a script are not stored on the
global: instead, top-level variables are stored in a special per-script object that delegates to the per-tab
global.
...And 3 more matches
Script security
in gecko, there's a separate compartment for every
global object.
... this means that each
global object and the objects associated with it live in their own region of memory.
... normal content windows are
globals, of course, but so are chrome windows, sandboxes, workers, the contentframemessagemanager in a frame script, and so on.
...And 3 more matches
Mozilla DOM Hacking Guide
this is used in
global resolve functions, when xpconnect has to find the member function to call.
... static jsval *sx_id: strings used in the
global resolve methods for comparison with the passed in arguments.
...getclassinfoinstance is used in the ns_interface_map_entry_content_classinfo macro, which is used to implement queryinterface for the nsiclassinfo interface in most of the dom classes, and in the ns_dom_interface_map_entry_classinfo macro, which is used to implement queryinterface for the nsiclassinfo interface in most
global object properties.
...And 3 more matches
Research and prep
ensure that your suggestions follow these parameters: search there are typically five search plug-ins listed for firefox desktop (only four for firefox mobile): generic search the default option should expose the quickest path to the best result on the world wide web for the user (indexing a large portion of the
global www).
...
global search the second position can be used for the next best local language provider, meaning coverage within the local language and/or locale (indexing a smaller portion of the www but producing better local language results).
... local search a good test is if you were to run a set of comparative queries; the secondary engine should produce the best local language results and the primary/default position should produce the best
global results.
...And 3 more matches
Introduction to NSPR
global threads are scheduled by the host os--not by nspr--either within a process or across processes on the entire host.
...
global threads correspond to native threads on the host os.
...it's usually not necessary to create a
global thread explicitly unless you are planning to port your code only to platforms that provide threading services with which you are familiar or unless the thread will be executing code that might directly call blocking os functions.
...And 3 more matches
JIT Optimization Strategies
it applies to property accesses on objects which are
global-like in that there is only one instance of them per program.
... this includes
global objects, object literals defined at the top-level of a script, and top-level function objects.
...unique (or "singleton") types are assigned to certain kinds of objects, like
global objects, top-level functions, and object literals declared at the top-level of a script.
...And 3 more matches
JS_SetOptions
mxr id search for jsoption_werror jsoption_varobjfix make js_evaluatescript() use the last object on its obj param's scope chain (that is, the
global object) as the ecma "variables object".
... the former creates a property on the
global object.
... with this flag, both create a
global property.
...And 3 more matches
Building the WebLock UI
as you can see, weblock is initialized as a
global javascript variable, available in the scope of these functions and others: var weblock = components.classes["@dougt/weblock"] .getservice() .queryinterface(components.interfaces.iweblock); in addition to this basic setup, you must also write javascript that uses the addsite method to add new sites to the white list.
...in this tutorial, focusing as it is on the weblock functionality (rather than the ui), we'll assume the strings we get from the ui itself are urls we actually want to write to the white list: function addthissite() { var tf = document.getelementbyid("dialog.input"); // weblock is
global and declared above weblock.addsite(tf.value); } this javascript function can be called directly from the xul widget, where the input string is retrieved as the value property of the textbox element.
...the "shell" for the xul file, then, looks like this: <?xml version="1.0"?> <?xml-stylesheet href="chrome://
global/skin/" type="text/css"?> <dialog id="weblock_ui" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" title="web lock manager" persist="screenx screeny" screenx="24" screeny="24"> </dialog> note that this part of the xul file also contains a stylesheet declaration, which imports css rules and applies them to particular parts of the interface.
...And 3 more matches
nsIFrameScriptLoader
methods void loadframescript(in astring aurl, in boolean aallowdelayedload, [optional] in boolean arunin
globalscope) void removedelayedframescript(in astring aurl); jsval getdelayedframescripts(); loadframescript() load a script in the remote frame.
... if this function is called on a chromemessagebroadcaster (for example, a
global frame message manager or a window message manager) then: loadframescript() will load the frame script independently into each applicable frame: every open frame in the given window for the window message manager, or every frame in every window for the
global message manager if aallowdelayedload is true, then the script will also be loaded into any applicable new frames opened after the loadframescript() call.
... arunin
globalscope boolean optional, defaults to false.
...And 3 more matches
Applying styles and colors - Web APIs
this is done by either setting the
globalalpha property or by assigning a semi-transparent color to the stroke and/or fill style.
...
globalalpha = transparencyvalue applies the specified transparency value to all future shapes drawn on the canvas.
... the
globalalpha property can be useful if you want to draw a lot of shapes on the canvas with similar transparency, but otherwise it's generally more useful to set the transparency on individual shapes when setting their colors.
...And 3 more matches
HTMLElement - Web APIs
"2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties inherits properties from its parent, element, and implements those from documentandelementeventhandlers, elementcssinlinestyle,
globaleventhandlers, htmlorforeignelement and toucheventhandlers.
... htmlelement.dir is a domstring, reflecting the dir
global attribute, representing the directionality of the element.
... htmlelement.dropzone read only returns a domsettabletokenlist reflecting the dropzone
global attribute and describing the behavior of the element regarding a drop operation.
...And 3 more matches
TouchEvent - Web APIs
globaleventhandlers the
globaleventhandlers mixin defines these events as
global events that are available on any element in the dom that the user can interact with.
...
globaleventhandlers.ontouchstart a
global event handler for the touchstart event.
...
globaleventhandlers.ontouchend a
global event handler for the touchend event.
...And 3 more matches
Functions and classes available to Web Workers - Web APIs
workers run in another
global context, dedicatedworker
globalscope, different from the current window.
... by default, methods and properties of window are not available to them, but dedicatedworker
globalscope, like window, implements windowtimers and windowbase64.
... comparison of the properties and methods of the different type of workers function dedicated workers shared workers service workers chrome workers outside workers atob() yes, on worker
globalscope yes, on worker
globalscope yes, on worker
globalscope yes, on worker
globalscope yes, on window btoa() yes, on worker
globalscope yes, on worker
globalscope yes, on worker
globalscope yes, on worker
globalscope yes, on window clearinterval() yes, on worker
globalscope yes, on worker
globalscope yes, on worker
globalscope yes, on worker
globalscope yes, on window cleartimeout() yes, on worker
globalscope yes, on worker
globalscope yes, on worker
globalscope yes, on worker
globalscope yes, on wind...
...And 3 more matches
Functions - JavaScript
the statement return specifies the value returned by the function: return number * number; primitive parameters (such as a number) are passed to functions by value; the value is passed to the function, but if the function changes the value of the parameter, this change is not reflected
globally or in the calling function.
... in other words, a function defined in the
global scope can access all variables defined in the
global scope.
... // the following variables are defined in the
global scope var num1 = 20, num2 = 3, name = 'chamahk'; // this function is defined in the
global scope function multiply() { return num1 * num2; } multiply(); // returns 60 // a nested function example function getscore() { var num1 = 2, num2 = 3; function add() { return name + ' scored ' + (num1 + num2); } return add(); } getscore(); // returns "chamahk scored 5" scope and the function stack recursion a function can refer to and call itself.
...And 3 more matches
Arrow function expressions - JavaScript
this.age = 0; setinterval(function growup() { // in non-strict mode, the growup() function defines `this` // as the
global object (because it's where growup() is executed.), // which is different from the `this` // defined by the person() constructor.
... var f = () => { 'use strict'; return this; }; f() === window; // or the
global object all other strict mode rules apply normally.
... strict mode should prevent creating
global variables when assigning to an undeclared identifier in a function.
...And 3 more matches
String.prototype.replaceAll() - JavaScript
syntax const newstr = str.replaceall(regexp|substr, newsubstr|function) when using a `regexp` you must have to set the
global ("g") flag; otherwise, it will throw a typeerror: "replaceall must be called with a
global regexp".
... parameters regexp (pattern) a regexp object or literal with the
global flag.
...a regexp without the
global ("g") flag will throw a typeerror: "replaceall must be called with a
global regexp".
...And 3 more matches
Symbol.for() - JavaScript
otherwise a new symbol gets created in the
global symbol registry with this key.
... description in contrast to symbol(), the symbol.for() function creates a symbol available in a
global symbol registry list.
...if no symbol with the given key is found, symbol.for() will create a new
global symbol.
...And 3 more matches
Using the WebAssembly JavaScript API - WebAssembly
globals webassembly has the ability to create
global variable instances, accessible from both javascript and importable/exportable across one or more webassembly.module instances.
... to create a webassembly
global instance from inside your javascript, you use the webassembly.
global() constructor, which looks like this: const
global = new webassembly.
global({value:'i32', mutable:true}, 0); you can see that this takes two parameters: an object that contains two properties describing the
global variable: value: its data type, which can be any data type accepted within webassembly modules — i32, i64, f32, or f64.
...in the following example we define a
global as a mutable i32 type, with a value of 0.
...And 3 more matches
Two Types of Scripts - Archive of obsolete content
api add-on code content script the
global objects defined in the core javascript language, such as math, array, and json.
... ✔ ✔ the require() and exports
globals defined by version 1.0 of the commonjs module specification.
... ✔ ✘ the console
global supplied by the sdk.
...And 2 more matches
Chapter 3: Introduction to XUL—How to build a more intuitive UI - Archive of obsolete content
<?xml version="1.0" encoding="utf-8"?> <?xml-stylesheet href="chrome://
global/skin/"?> <window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <!-- contents go here.
...by referring to a special style sheet within chrome://
global/skin/, we can make label and button sizes, window background color, etc, match the currently selected theme in firefox.
... <?xml version="1.0" encoding="utf-8"?> <?xml-stylesheet href="chrome://
global/skin/"?> <dialog xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" title="my dialog" buttons="accept,cancel" ondialogaccept="savevalues(); window.close();" ondialogcancel="window.close();"> <checkbox label="my option"/> </dialog> listing 8: a dialog figure 5: output from listing 8 note: the functions behind the dialog elements discussed here require "xpconn...
...And 2 more matches
JavaScript Object Management - Archive of obsolete content
« previousnext » chrome javascript in this section we'll look into how to handle javascript data effectively, beginning with chrome code, in ways which will prevent pollution of shared namespaces and conflicts with other add-ons resulting from such
global namespace pollution.
...we need the namespace to be a
global object that it can be used everywhere in the window chrome.
...this is a fundamental lesson: the chrome is not
global, it's window-specific.
...And 2 more matches
The Essentials of an Extension - Archive of obsolete content
the most common case is having one skin entry for the
global skin, classic/1.0, and multiple locale entries, one for each translation.
...all objects and variables we define in this javascript are
global, meaning that scripts in firefox and other extensions can see them and interact with them.
...what we do here is define a single
global object: xulschoolchrome.
...And 2 more matches
Getting Started - Archive of obsolete content
skin\classic\
global global contains almost all of the important css files that define the appearance of the suite.
...into this directory put a zip archive called my_theme.jar containing navigator,
global, communicator, editor, help, messenger, messenger-newsblog and mozapps directories from above.
...skin
global my_theme jar:chrome/my_theme.jar!/
global/ skin mozapps my_theme jar:chrome/my_theme.jar!/mozapps/ skin messenger my_theme jar:chrome/my_theme.jar!/messenger/ skin messenger-newsblog my_theme jar:chrome/my_theme.jar!/messenger-newsblog/ skin communicator my_theme jar:chrome/my_theme.jar!/communicator/ skin help my_theme jar:chrome/my_theme.jar!/help/ skin navigator my_theme jar:chrome/my_theme.jar...
...And 2 more matches
Creating a Skin for Firefox/Getting Started - Archive of obsolete content
skin\classic\
global global contains almost all of the important css files that define the appearance of the browser.
...into this directory put the browser,
global, communicator, help, and mozapps directories from above, as well as the icon.png and preview.png files.
... <rdf:li resource="urn:mozilla:skin:my_theme:communicator"/> <rdf:li resource="urn:mozilla:skin:my_theme:editor"/> <rdf:li resource="urn:mozilla:skin:my_theme:
global"/> <rdf:li resource="urn:mozilla:skin:my_theme:messenger"/> <rdf:li resource="urn:mozilla:skin:my_theme:navigator"/> save the file and exit the text editor.
...And 2 more matches
Updating Commands - Archive of obsolete content
if you include the script 'chrome://
global/content/
globaloverlay.js' in a xul file, you can call the godocommand method which executes the command passed as the argument.
...<script src="chrome://
global/content/
globaloverlay.js"/> <command id="cmd_paste" oncommand="godocommand('cmd_paste');"/> <button label="paste" command="cmd_paste"/> the example above will implement a paste button.
...in the example, the goupdatecommand method is called which is a function provided by the
globaloverlay.js script described earlier.
...And 2 more matches
Using Remote XUL - Archive of obsolete content
global web site navigation most web sites today have poor
global navigation (features for locating and visiting pages across the entire site).
... <?xml version="1.0"?> <?xml-stylesheet href="chrome://
global/skin/" type="text/css"?> <window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> ...
...the url we use, chrome://
global/skin/, is a reference to the default application stylesheet (a.k.a.
...And 2 more matches
Using the standard theme - Archive of obsolete content
you can either provide a complete custom styling, but most of the time you also want to be able to reuse the standard theme (also called the "
global skin") of the base application for non-custom elements, transparently with regard to which theme the user has currently chosen.
... applying the standard theme in order to use the theme currently chosen by the user of the base application (the so called "
global skin"), you have to add the following line to your xul file: <?xml-stylesheet href="chrome://
global/skin/" type="text/css"?> this imports the styles found in the <tt>
global/skin</tt> chrome directory and will make the standard xul widgets of your application use the selected chosen theme.
...if you are only going to use these
global style sheets, you of course do not need a <tt>skin</tt> directory in your extension package, and also do not have to register a style in the <tt>chrome.manifest</tt>.
...And 2 more matches
XULRunner 2.0 Release Notes - Archive of obsolete content
to register xulrunner with the system, open a command prompt and run xulrunner.exe --register-
global (to register for all users) or xulrunner.exe --register-user (to register for one user only).
...register xulrunner with the system by running xulrunner --register-
global (to install for all users, must be run as root) or xulrunner --register-user (to install for one user only).
...register xulrunner with the system by running xulrunner --register-
global (to install for all users, must be run as root) or xulrunner --register-user (to install for one user only).
...And 2 more matches
Building a Theme - Archive of obsolete content
an example of the content within a typical xpi file for a theme: example.xpi: /install.rdf /chrome.manifest /preview.png /icon.png /chrome/ browser/ communicator/
global/ mozapps/ we'll want to create a file structure similar to the one above for our tutorial, so let's begin by creating a folder for your theme somewhere on your hard disk (e.g.
...
global to chrome/
global mozapps to chrome/mozapps now that you've copied the
global and mozapps folders, a handful of other folders from the browser/omni.ja archive are required.
... browser to chrome/browser/ communicator to chrome/communicator/ you should end up with this directory structure: <ext path>/ /install.rdf /chrome.manifest /chrome/ browser/ communicator/
global/ mozapps/ after this, it would be a good idea to read the article setting up extension development environment and follow the directions there.
...And 2 more matches
Theme changes in Firefox 3 - Archive of obsolete content
changes in browser --- changes in
global all platforms the yellow background for the location bar has been deprecated; instead, themes should style the new #identity-box element depending on its verifieddomain/verifiedidentity class.
...the rule that's needed to show and hide the go button and other location bar icons is: #urlbar[pageproxystate="invalid"] > #urlbar-icons > :not(#go-button) , #urlbar[pageproxystate="valid"] > #urlbar-icons > #go-button { visibility: collapse; } images to add add the following images: chrome://
global/skin/icons/information-16.png used when presenting information notices.
... chrome://
global/skin/icons/warning-16.png used when displaying warnings.
...And 2 more matches
Client-side storage - Learn web development
we will use this in a few places, so we've declared it
globally here to make things easier.
...we do however need to pass the attribute through the
global built-in number() object as it is of datatype string, and therefore wouldn't be recognized by the database, which expects a number.
...le.log('taking videos from idb'); displayvideo(request.result.mp4, request.result.webm, request.result.name); } else { // fetch the videos from the network fetchvideofromnetwork(videos[i]); } }; } } the following snippet is taken from inside fetchvideofromnetwork() — here we fetch mp4 and webm versions of the video using two separate windoworworker
globalscope.fetch() requests.
...And 2 more matches
HTTP Cache
ays terminate with ',' a - when present the scope is belonging to an anonymous load b - when present the scope is in browser element load i - when present must have a decimal integer value that represents an app id the scope belongs to, otherwise there is no app (app id is considered 0) p - when present the scope is of a private browsing load, this never persists cachestorageservice keeps a
global hashtable mapped by the scope key.
... elements in this
global hashtable are hashtables of cache entries.
... so that when an entry is beeing looked up, first the
global hashtable is searched using the scope key.
...And 2 more matches
Power profiling overview
some are
global (whole-system) and some are per-process.
...these are
global (whole-system) measurements that are affected by running programs but also by other things such as (for laptops) how bright the monitor backlight is.
...some of these are measured on a
global basis, and some can be measured on a per-process basis.
...And 2 more matches
Components.utils.Sandbox
you can then use it with evalinsandbox() to make it the
global scope object for the specified script.
... want
globalproperties an array of strings.
... each string is the name of an object that you want to make available as a
global to code running in the sandbox.
...And 2 more matches
Components.utils.exportFunction
the exported function does not have to be added to the less privileged code's
global window object: it can be exported to any object in the target scope.
... exportfunction() is made available as a
global in sandboxes which have the wantexporthelpers option set in the sandbox() constructor.
...this does not have to be the
global window object: it could be any other object in the target window, or an object created by the caller.
...And 2 more matches
nsIBrowserHistory
toolkit/components/places/public/nsibrowserhistory.idlscriptable a browser-specific interface to
global history.
... inherits from: nsi
globalhistory2 last changed in gecko 22.0 (firefox 22.0 / thunderbird 22.0 / seamonkey 2.19) implemented by: @mozilla.org/browser/nav-history-service;1.
... attributes attribute type description count obsolete since gecko 15.0 pruint32 indicates if there are entries in
global history.
...And 2 more matches
nsIContentPrefService
specify null to get the preference from the
global preference space; those preferences apply to all sites.
...specify null to get the preferences from the
global preference space; those preferences apply to all sites.
...specify null to check for the preference in the
global preference space; those preferences apply to all sites.
...And 2 more matches
Using the clipboard
services.clipboard.setdata(trans, null, services.clipboard.k
globalclipboard); we get the system clipboard object and store it in the clip variable.
...the above code uses the constant k
globalclipboard for this, which refers to the
global clipboard.
...the code is put together below, with additional error checking: var copytext = "text to copy"; var trans = transferable(sourcewindow); trans.adddataflavor("text/unicode"); trans.settransferdata("text/unicode", supportsstring(copytext), copytext.length * 2); services.clipboard.setdata(trans, null, services.clipboard.k
globalclipboard); the complete function shown below copies some text to the clipboard as html, as well as making it a clickable hyperlink.
...And 2 more matches
Index
19 creating a gloda message query thunderbird 3, thunderbird this page describes how to programmatically create a message query using gloda, thunderbird's
global database.
..."gloda" is short for the thunderbird "
global database".
... training data is
global across all mail accounts within a profile training data is stored in a binary format, in a file named "training.dat".
...And 2 more matches
Working with windows in chrome code
technically speaking, it implements a number of interfaces, including nsidomjswindow and nsidomwindow, but it also contains the user-defined properties for
global variables and functions of the window.
...since different windows have separate dom documents and
global objects for scripts, you can't just use one
global javascript variable in scripts from different windows.
...todo: link to how to pass an xpcom object to a new window when it has a more useful example opener code: window.opendialog("chrome://test/content/progress.xul", "myprogress", "chrome,centerscreen", {status: "reading remote data", maxprogress: 50, progress: 10} ); progress.xul: <?xml version="1.0"?> <?xml-stylesheet href="chrome://
global/skin/" type="text/css"?> <window onload="onload();" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <script><![cdata[ var gstatus, gprogressmeter; var maxprogress = 100; function onload() { gstatus = document.getelementbyid("status"); gprogressmeter = document.getelementbyid("progressmeter"); if("arguments" in window && window.arguments.length > 0) { maxprogre...
...And 2 more matches
Web Console remoting - Firefox Developer Tools
] } notice that the consoleactor is also available as a
global actor.
... when you attach to the
global consoleactor you receive all of the network requests, page errors, and the other events from all of the tabs and windows, including chrome errors and network events.
...the console actor provides the lastprivatecontextexited notification: { "from": "conn0.console19", "type": "lastprivatecontextexited" } this notification is sent only when your client is attached to the
global console actor, it does not make sense for tab console actors.
...And 2 more matches
Using the Beacon API - Web APIs
navigator.sendbeacon() the beacon api's navigator.sendbeacon() method sends a beacon request to the server in the
global browsing context.
... window.onsubmit = function send_analytics() { var data = json.stringify({ location: location.href, time: date() }); navigator.sendbeacon('/analytics', data); }; workernavigator.sendbeacon() the beacon api's workernavigator.sendbeacon() method works identically to the usual method, but is accessible from worker
global scope.
... in the following example, a worker sends a beacon using the url and data from the
global context.
...And 2 more matches
Selection API - Web APIs
you can run code in response to the selection being changed, or a new selection being started, using the
globaleventhandlers.onselectionchange and
globaleventhandlers.onselectstart event handlers.
...
globaleventhandlers.onselectstart represents the event handler that is called when a selectstart event is fired on the current object (i.e.
...
globaleventhandlers.onselectionchange represents the event handler that is called when a selectionchange event is fired on the current object (i.e.
...And 2 more matches
onnotificationclose - Web APIs
the serviceworker
globalscope.onnotificationclose property is an event handler called whenever the notificationclose event is dispatched on the serviceworker
globalscope object, that is when a user closes a displayed notification spawned by serviceworkerregistration.shownotification().
... note: trying to create a notification inside the serviceworker
globalscope using the notification() constructor will throw an error.
... syntax serviceworker
globalscope.onnotificationclose = function(notificationevent) { ...
...And 2 more matches
TextEncoder.prototype.encodeInto() - Web APIs
(function(window){ "use strict"; var log = math.log; var ln2 = math.ln2; var clz32 = math.clz32 || function(x) {return 31 - log(x >>> 0) / ln2 | 0}; var fromcharcode = string.fromcharcode; var patchedu8array = window.uint8array || array; var textencoderprototype = textencoder["prototype"]; var
globaltextencoder = window["textencoder"]; var
globaltextencoderprototype; var
globaltextencoderinstance; ////////////////////////////////////////////////////////////////////////////////////// function encoderreplacer(nonasciichars){ // make the utf string into a binary utf-8 encoded string var point = nonasciichars.charcodeat(0)|0; if (0xd800 <= point && point <=...
...inputlength : read}; }; textencoderprototype["encodeinto"] = polyfill_encodeinto; if (!
globaltextencoder) { window["textencoder"] = textencoder; } else if (!(
globaltextencoderprototype =
globaltextencoder["prototype"])["encodeinto"]) {
globaltextencoderinstance = new
globaltextencoder;
globaltextencoderprototype["encodeinto"] = function(string, u8arr) { // unfortunately, there's no way i can think of to quickly extract the number of bits written and...
...there are still edge-cases which are possible // in many circumstances, we can use the faster native textencoder var res8 =
globaltextencoderinstance["encode"](string); var res8len = res8.length|0; if (res8len < u8len) { // if we dont have to worry about read/written u8arr.set( res8 ); return { "read": strlen, "written": res8.length|0 }; } } return polyfill_encodeinto(string, u8arr); };...
...And 2 more matches
Web Workers API - Web APIs
worker()) that runs a named javascript file — this file contains the code that will run in the worker thread; workers run in another
global context that is different from the current window.
... this context is represented by either a dedicatedworker
globalscope object (in the case of dedicated workers - workers that are utilized by a single script), or a sharedworker
globalscope (in the case of shared workers - workers that are shared between multiple scripts).
... worker
globalscope represents the generic scope of any worker (doing the same job as window does for normal web content).
...And 2 more matches
Web APIs
ionevent animationplaybackevent animationtimeline arraybufferview attr audiobuffer audiobuffersourcenode audioconfiguration audiocontext audiocontextlatencycategory audiocontextoptions audiodestinationnode audiolistener audionode audionodeoptions audioparam audioparamdescriptor audioparammap audioprocessingevent audioscheduledsourcenode audiotrack audiotracklist audioworklet audioworklet
globalscope audioworkletnode audioworkletnodeoptions audioworkletprocessor authenticatorassertionresponse authenticatorattestationresponse authenticatorresponse b baseaudiocontext basiccardrequest basiccardresponse batterymanager beforeinstallpromptevent beforeunloadevent biquadfilternode blob blobbuilder blobevent bluetooth bluetoothadvertisingdata bluetoothcharacteristicproperties b...
...ustomevent d domconfiguration domerror domexception domhighrestimestamp domimplementation domimplementationlist domlocator dommatrix dommatrixreadonly domobject domparser dompoint dompointinit dompointreadonly domquad domrect domrectreadonly domstring domstringlist domstringmap domtimestamp domtokenlist domuserdata datatransfer datatransferitem datatransferitemlist dedicatedworker
globalscope delaynode deprecationreportbody devicelightevent devicemotionevent devicemotioneventacceleration devicemotioneventrotationrate deviceorientationevent deviceproximityevent directoryentrysync directoryreadersync displaymediastreamconstraints document documentfragment documentorshadowroot documenttimeline documenttouch documenttype doublerange dragevent dynamicscompressornode e e...
...r filesystementry filesystementrysync filesystemfileentry filesystemflags filesystemsync focusevent fontface fontfaceset fontfacesetloadevent formdata formdataentryvalue formdataevent fullscreenoptions g gainnode gamepad gamepadbutton gamepadevent gamepadhapticactuator geolocation geolocationcoordinates geolocationposition geolocationpositionerror geometryutils gestureevent
globaleventhandlers gyroscope h htmlanchorelement htmlareaelement htmlaudioelement htmlbrelement htmlbaseelement htmlbasefontelement htmlbodyelement htmlbuttonelement htmlcanvaselement htmlcollection htmlcontentelement htmldlistelement htmldataelement htmldatalistelement htmldetailselement htmldialogelement htmldivelement htmldocument htmlelement htmlembedelement htmlfieldsetelement htmlfonteleme...
...And 2 more matches
Keyboard - Accessibility
see also tabindex
global html attribute
global event handlers: onkeydown
global event handlers: onkeyup avoid using tabindex attribute greater than zero the tabindex attribute indicates that an element is focusable using the keyboard.
... see also tabindex
global html attribute understanding focus order don't use tabindex greater than 0 clickable elements must be focusable and should have interactive semantics if an element can be clicked with a pointing device, such as a mouse, then it should also be focusable using the keyboard, and the user should be able to do something by interacting with it.
... see also tabindex
global html attribute
global event handlers: onkeydown
global event handlers: onkeyup interactive elements must be able to be activated using a keyboard if the user can interact with an element using touch or a pointing device, then the element should also support interacting using the keyboard.
...And 2 more matches
Functions - JavaScript
if the function changes the value of an argument, this change is not reflected
globally or in the calling function.
... the generatorfunction constructor note: generatorfunction is not a
global object, but could be obtained from generator function instance (see generatorfunction for more detail).
...on the other hand, a function defined by a function constructor does not inherit any scope other than the
global scope (which all functions inherit).
...And 2 more matches
Function - JavaScript
however, unlike eval, the function constructor creates functions that execute in the
global scope only.
... examples difference between function constructor and function declaration functions created with the function constructor do not create closures to their creation contexts; they always are created in the
global scope.
... when running them, they will only be able to access their own local variables and
global ones, not the ones from the scope in which the function constructor was created.
...And 2 more matches
Symbol - JavaScript
the symbol() function returns a value of type symbol, has static properties that expose several members of built-in objects, has static methods that expose the
global symbol registry, and resembles a built-in object class, but is incomplete as a constructor because it does not support the syntax "new symbol()".
... if you really want to create a symbol wrapper object, you can use the object() function: let sym = symbol('foo') typeof sym // "symbol" let symobj = object(sym) typeof symobj // "object" shared symbols in the
global symbol registry the above syntax using the symbol() function will not create a
global symbol that is available in your whole codebase.
... to create symbols available across files and even across realms (each of which has its own
global scope), use the methods symbol.for() and symbol.keyfor() to set and retrieve symbols from the
global symbol registry.
...And 2 more matches
eval() - JavaScript
description eval() is a function property of the
global object.
... var expression = new string('2 + 2'); eval(expression.tostring()); // returns 4 if you use the eval function indirectly, by invoking it via a reference other than eval, as of ecmascript 5 it works in the
global scope rather than the local scope.
... this means, for instance, that function declarations create
global functions, and that the code being evaluated doesn't have access to local variables within the scope where it's being called.
...And 2 more matches
undefined - JavaScript
the
global undefined property represents the primitive value undefined.
... syntax undefined description undefined is a property of the
global object.
... that is, it is a variable in
global scope.
...And 2 more matches
let - JavaScript
description let allows you to declare variables that are limited to the scope of a block statement, or expression on which it is used, unlike the var keyword, which defines a variable
globally, or locally to an entire function regardless of block scope.
... just like const the let does not create properties of the window object when declared
globally (in the top-most scope).
... console.log(x); // 2 } console.log(x); // 2 } function lettest() { let x = 1; { let x = 2; // different variable console.log(x); // 2 } console.log(x); // 1 } at the top level of programs and functions, let, unlike var, does not create a property on the
global object.
...And 2 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 functions 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.
... for example, this content script will fail with the error "themessage is not defined": var themessage = "hello from content script!"; anelement.setattribute("onclick", "alert(themessage);"); second, if you define an event listener by direct assignment to a
global event handler like onclick, then the assignment might be overridden by the page.
... accessing port in the content script in the content script the port object is available as a property of the
global self object.
... so to emit a message from a content script: self.port.emit("mycontentscriptmessage", mycontentscriptmessagepayload); to receive a message from the add-on code: self.port.on("myaddonmessage", function(myaddonmessagepayload) { // handle the message }); note that the
global self object is completely different from the self module, which provides an api for an add-on to access its data files and id.
Extension Etiquette - Archive of obsolete content
global variables, such as top-level declarations on scripts loaded into shared windows or web pages.
...scripts can be loaded into their own
globals, such as commonjs modules, javascript modules, or sandboxes, to avoid most
global variable and prototype conflicts.
...
global variables might all be defined as properties of the coolbeans object.
... call .noconflict(true) where applicable many common libraries which create
global variables provide a method called noconflict, or similar, which revert any
global variables they've declared, and return the object itself.
Jetpack Processes - Archive of obsolete content
privileged apis when script is evaluated in a jetpack process via a call to nsijetpack.evalscript(), the script's
global scope is endowed with the following privileged apis: sendmessage(amessagename [, v1 [, v2 [, ...]]]) similar to nsijetpack.sendmessage(), this function asynchronously sends a message to the chrome process.
...createsandbox() this creates a new javascript sandbox and returns its
global scope.
... this
global scope does not contain privileged apis, or any non-standard javascript objects for that matter, though new
globals can be endowed by simply attaching them to the
global scope as properties.
... evalinsandbox(asandbox, ascript) evaluates the given script contents in the given sandbox's
global scope.
Java in Firefox Extensions - Archive of obsolete content
note: the
global java object has been removed in gecko 16.0, so this page is out of date.
...liveconnect gives your extension's javascript code (linked from or contained in xul code) access to 2 objects: java and packages (note that per this thread, although the new documentation for the liveconnect reimplementation states that these
globals will be deprecated (in the context of applets), "firefox and the java plug-in will continue to support the
global java/packages keywords, in particular in the context of firefox extensions.").
...one example seems to be the fact that the "java"
global is not immediately available if the extension operates in a sidebar (using settimeout solved it at least).
...i've also experienced crashes in referencing the 'java'
global within the xul editor of the extension developer's extension which seems to point to some stability problem.
Migrate apps from Internet Explorer to Mozilla - Archive of obsolete content
mozilla does not support accessing an element through document.elementname or even through the element's name, which internet explorer does (also called
global namespace polluting).
... a cross-browser event handling example follows (note that it means you can't define a
global variable named event in your code): <div onclick="handleevent(event);">click me!</div> <script> function handleevent(aevent) { var myevent = window.event ?
...since there is no standard method of doing this, mozilla provides the same functionality in the
global javascript xmlhttprequest object.
...you can do this using the
global xsltprocessor javascript object.
PyDOM - Archive of obsolete content
globals and namespaces this is taken from a mail to the pyxpcom list - it should be expanded, but a copy-paste will do for now normal module semantics don't exist here.
... the
globals are 'bound' to the
global object (i.e., the window), instead of to a module's __dict__ as you expect in the python world.
... an event handler like: <button onclick="print foo"/> should be able to reference 'foo' via
globals as shown.
...ent.getelementbyid("some-button") button.foo = 0 and the button itself might look like: <button id="some-button" label="click here" onclick="event.target.foo += 1; print 'foo is now', event.target.foo"/> note that (a) we have stuck an arbitrary attribute on a dom element and (b) in all cases (e.g., event handler and top-level script), the dom node needs to be explicitly specified - the
globals are the window itself.
A XUL Bestiary - Archive of obsolete content
the chrome url, which appears in place of the http url in pointers like the following
global skin processing instruction: <?xml-stylesheet href="chrome://
global/skin/" type="text/css"?> specifies a chrome to be loaded by the gecko rendering engine.
...in other words, a chrome url like the
global pointer above picks up a file called
global.css, and the help pointer above could also be written as chrome://help/content, because the name of the package itself is "help." viewing chromes other than mozilla's there is a special flag you can use to start mozilla with some chrome other than the default.
...even prior to the skinning that takes place with the
global skin, which is loaded in almost every xul file you see in mozilla (and whose absence from your own xul files can make your work look strange, senseless, or invisible altogether), a xul.css file is loaded which provides some very basic presentational information for the widgets in the toolkit.
...though this is not yet in the browser, very soon it will be possible to change the look of a whole application dynamically, but only to the extent that the skin is actually defined in the main
global.css, or
global skin.
browser - Archive of obsolete content
attributes autocompleteenabled, autocompletepopup, autoscroll, disablehistory, disable
globalhistory, disablesecurity, droppedlinkhandler, homepage, showcaret, src, type properties accessibletype, cangoback, cangoforward, contentdocument, contentprincipal, contenttitle, contentvieweredit, contentviewerfile, contentwindow, currenturi, docshell, documentcharsetinfo, homepage, markupdocumentviewer, messagemanager, preferences, securityui, sessionhistory, webbrowserfind, webnavigation, w...
... disablehistory type: boolean disables both session and
global history for the docshell attached to the browser.
... disable
globalhistory type: boolean disables
global history for the docshell attached to the browser while keeping session history active.
... note: this is the xul method on <browser> / <tabbrowser>, not the
global function in chrome://browser/content/browser.js.
XULRunner 1.8.0.4 Release Notes - Archive of obsolete content
to register xulrunner with the system, open a command prompt and run xulrunner.exe --register-
global (to register for all users) or xulrunner.exe --register-user (to register for one user only).
... register xulrunner with the system by running xulrunner --register-
global (to install for all users, must be run as root) or xulrunner --register-user (to install for one user only).
... uninstalling xulrunner linux from a command prompt, run xulrunner --unregister-
global or xulrunner --unregister-user to unregister xulrunner just as you registered it during installation.
... windows from a command prompt, run xulrunner.exe --unregister-
global or xulrunner.exe --unregister-user to unregister xulrunner just as you registered it during installation.
XULRunner 1.9.1 Release Notes - Archive of obsolete content
to register xulrunner with the system, open a command prompt and run xulrunner.exe --register-
global (to register for all users) or xulrunner.exe --register-user (to register for one user only).
... register xulrunner with the system by running xulrunner --register-
global (to install for all users, must be run as root) or xulrunner --register-user (to install for one user only).
... uninstalling xulrunner linux from a command prompt, run xulrunner --unregister-
global or xulrunner --unregister-user to unregister xulrunner just as you registered it during installation.
... windows from a command prompt, run xulrunner.exe --unregister-
global or xulrunner.exe --unregister-user to unregister xulrunner just as you registered it during installation.
XULRunner 1.9.2 Release Notes - Archive of obsolete content
to register xulrunner with the system, open a command prompt and run xulrunner.exe --register-
global (to register for all users) or xulrunner.exe --register-user (to register for one user only).
...register xulrunner with the system by running xulrunner --register-
global (to install for all users, must be run as root) or xulrunner --register-user (to install for one user only).
... uninstalling xulrunner linux from a command prompt, run xulrunner --unregister-
global or xulrunner --unregister-user to unregister xulrunner just as you registered it during installation.
... windows from a command prompt, run xulrunner.exe --unregister-
global or xulrunner.exe --unregister-user to unregister xulrunner just as you registered it during installation.
XULRunner 1.9 Release Notes - Archive of obsolete content
to register xulrunner with the system, open a command prompt and run xulrunner.exe --register-
global (to register for all users) or xulrunner.exe --register-user (to register for one user only).
... register xulrunner with the system by running xulrunner --register-
global (to install for all users, must be run as root) or xulrunner --register-user (to install for one user only).
... uninstalling xulrunner linux from a command prompt, run xulrunner --unregister-
global or xulrunner --unregister-user to unregister xulrunner just as you registered it during installation.
... windows from a command prompt, run xulrunner.exe --unregister-
global or xulrunner.exe --unregister-user to unregister xulrunner just as you registered it during installation.
Mobile accessibility - Learn web development
global and local menus talkback allows you to access
global and local context menus, wherever you have navigated to on the device.
... the former provides
global options relating to the device as a whole, and the latter provides options relating just to the current app/screen you are in.
... to get to these menus: access the
global menu by quickly swiping down, and then right.
... for details on all the options available under the
global and local context menus, see use
global and local context menus.
Choosing the right approach - Learn web development
ssamsung internetsettimeoutchrome full support 30edge full support 12firefox full support 1 full support 1 full support 52notes notes setinterval now defined on windoworworker
globalscope mixin.ie full support 4opera full support 4safari full support 1webview android full support 4.4chrome android full support 30firefox android full suppor...
...t 4 full support 4 full support 52notes notes setinterval now defined on windoworworker
globalscope mixin.opera android full support 10.1safari ios full support 1samsung internet android full support 3.0supports parameters for callbackchrome full support yesedge full support 12firefox full support yesie full support 10opera full support ...
...samsung internetsetintervalchrome full support 30edge full support 12firefox full support 1 full support 1 full support 52notes notes setinterval now defined on windoworworker
globalscope mixin.ie full support 4opera full support 4safari full support 1webview android full support 4.4chrome android full support 30firefox android full suppor...
...t 4 full support 4 full support 52notes notes setinterval now defined on windoworworker
globalscope mixin.opera android full support 10.1safari ios full support 1samsung internet android full support 3.0supports parameters for callbackchrome full support yesedge full support 12firefox full support yesie full support 10opera full support ...
Starting our Svelte Todo list app - Learn web development
if you want to
globally disable this warning you can add this onwarn handler to your rollup.config.js file inside the configuration for the svelte plugin, like this: plugins: [ svelte({ dev: !production, css: css => { css.write('public/build/bundle.css'); }, // warnings are normally passed straight to rollup.
...replace the contents of the file public/
global.css with the following: /* resets */ *, *::before, *::after { box-sizing: border-box; } *:focus { outline: 3px dashed #228bec; outline-offset: 0; } html { font: 62.5% / 1.15 sans-serif; } h1, h2 { margin-bottom: 0; } ul { list-style: none; padding: 0; } button { border: none; margin: 0; padding: 0; width: auto; overflow: visible; background: transparent; color: inheri...
...size: 100%; line-height: 1.15; margin: 0; } button, input { overflow: visible; } input[type="text"] { border-radius: 0; } body { width: 100%; max-width: 68rem; margin: 0 auto; font: 1.6rem/1.25 arial, sans-serif; background-color: #f5f5f5; color: #4d4d4d; } @media screen and (min-width: 620px) { body { font-size: 1.9rem; line-height: 1.31579; } } /*end resets*/ /*
global styles */ .form-group > input[type="text"] { display: inline-block; margin-top: 0.4rem; } .btn { padding: 0.8rem 1rem 0.7rem; border: 0.2rem solid #4d4d4d; cursor: pointer; text-transform: capitalize; } .btn.toggle-btn { border-width: 1px; border-color: #d3d3d3; } .btn.toggle-btn[aria-pressed="true"] { text-decoration: underline; border-color: #4d4d4d; } .btn__danger { color...
...1px, 1px, 1px, 1px); white-space: nowrap; } [class*="stack"] > * { margin-top: 0; margin-bottom: 0; } .stack-small > * + * { margin-top: 1.25rem; } .stack-large > * + * { margin-top: 2.5rem; } @media screen and (min-width: 550px) { .stack-small > * + * { margin-top: 1.4rem; } .stack-large > * + * { margin-top: 2.8rem; } } .stack-exception { margin-top: 1.2rem; } /* end
global styles */ .todoapp { background: #fff; margin: 2rem 0 4rem 0; padding: 1rem; position: relative; box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 2.5rem 5rem 0 rgba(0, 0, 0, 0.1); } @media screen and (min-width: 550px) { .todoapp { padding: 4rem; } } .todoapp > * { max-width: 50rem; margin-left: auto; margin-right: auto; } .todoapp > form { max-width: 100%; } .todoapp > h1...
Getting started with Svelte - Learn web development
your browser will display something like this: application structure the starter template comes with the following structure: moz-todo-svelte ├── readme.md ├── package.json ├── package-lock.json ├── rollup.config.js ├── .gitignore ├── node_modules ├── public │ ├── favicon.ico │ ├── index.html │ ├──
global.css │ └── build │ ├── bundle.css │ ├── bundle.css.map │ ├── bundle.js │ └── bundle.js.map └── src ├── app.svelte └── main.js the contents are as follows: package.json and package-lock.json: contains information about the project that node.js/npm uses to keep it organized.
...
global.css: this file contains unscoped styles.
... note: you can override this behavior and apply styles to a selector
globally using the :
global(...) modifier (see the svelte <style> docs for more information).
... finally the file public/index.html includes the generated bundle.css and bundle.js files: <!doctype html> <html lang="en"> <head> <meta charset='utf-8'> <meta name='viewport' content='width=device-width,initial-scale=1'> <title>svelte app</title> <link rel='icon' type='image/png' href='/favicon.png'> <link rel='stylesheet' href='/
global.css'> <link rel='stylesheet' href='/build/bundle.css'> <script defer src='/build/bundle.js'></script> </head> <body> </body> </html> the minified version of bundle.js weighs a little more than 3kb, which includes the "svelte runtime" (just 300 lines of javascript code) and the app.svelte compiled component.
Working with Svelte stores - Learn web development
stores are
global global data repositories that hold values.
...in that case, moving to a
global data store might be a good option.
... the end result of this nifty trick is that you can access
global stores just as easily as using reactive local variables.
...you will get something like this: svelte stores provide a very simple and lightweight, but extremely powerful, way to handle complex app state from a
global data store in a reactive way.
Mozilla accessibility architecture
three levels of the accessibility cache there are three levels in the accessibility cache:
global cache of doc accessibles (g
globaldocaccessiblecache), used to get the accessible for any document.
...we must first get the document accessible from the
global cache for the node's document, and then use that document accessible's specific cache to check for an entry for the dom node.
...the weak pres shell is used to create a hash key to get the doc accessible from g
globaldocaccessiblecache.
... at program shutdown, when the nsaccessibilityservice observes ns_xpcom_shutdown_observer_id, it iterates through the doc accessibles in g
globaldocaccessiblecache and destroys all of the doc accessibles them.
Creating Sandboxed HTTP Connections
since nsistreamlistener does not cover cookies, the current channel being used will need to be stored as a
global, since another listener will be used for cookie notifications (covered in the next section).
...below is an example: //
global channel var gchannel; // init the channel // the io service var ioservice = components.classes["@mozilla.org/network/io-service;1"] .getservice(components.interfaces.nsiioservice); // create an nsiuri var uri = ioservice.newuri(myurlstring, null, null); // get a channel for that nsiuri gchannel = ioservice.newchannelfromuri(uri); // get an listener var listener = new streamlistener(callbackfunc); gchannel.notificationcallbacks = listener; gchannel.asyncopen(listener, null); function streamlistener(acallbackfunc) { this.mcallbackfunc = acallbackfunc; } streamlistener...
...aces.nsiinterfacerequestor) || aiid.equals(components.interfaces.nsichanneleventsink) || aiid.equals(components.interfaces.nsiprogresseventsink) || aiid.equals(components.interfaces.nsihttpeventsink) || aiid.equals(components.interfaces.nsistreamlistener)) return this; throw components.results.ns_nointerface; } }; quick note: storing the channel in a
global (especially in an extension) isn't a good idea, but was done to make the code easier to read.
...since the channel that causes the notification is passed in as the first argument, comparing it to the
globally stored channel (gchannel) in the previous section (which also gets updated each time a redirect happens).
Communicating with frame scripts
asynchronous messaging to send an asynchronous message the frame script uses the
global sendasyncmessage() function: // frame script sendasyncmessage("my-addon@me.org:my-e10s-extension-message"); sendasyncmessage() takes one mandatory parameter, which is the name of the message.
... synchronous messaging to send a synchronous message, the frame script uses the
global sendsyncmessage() function: // frame script sendsyncmessage("my-addon@me.org:my-e10s-extension-message"); when a chrome script receives a synchronous message, it should return a value from its message listener: // chrome script messagemanager.addmessagelistener("my-addon@me.org:my-e10s-extension-message", listener); function listener(message) { return "value from chrome"; } this value is t...
...if it's a browser message manager, you can use the message manager's sendasyncmessage method: // chrome script browser.messagemanager.sendasyncmessage("my-addon@me.org:message-from-chrome"); if you have a window or a
global message manager, you need to use the broadcastasyncmessage method: // chrome script window.messagemanager.broadcastasyncmessage("my-addon@me.org:message-from-chrome"); these methods takes one mandatory parameter, which is the message name.
... after the message name, you can pass detailed data as a string or a json-serializable object: // chrome script messagemanager.sendasyncmessage("my-addon@me.org:message-from-chrome", { details : "some more details" }); to receive a message from chrome, a frame script uses the
global addmessagelistener() function.
Performance
do some work on the window } function dosomething(message) { frame
global = message.target result = helper(frame
global.content, message.data) frame
global.sendasyncmessage("my-addon:response-from-child", {something: result}) } function addframe(frame
global) { frame
global.addmessagelistener("my-addon:request-from-parent", dosomething) } javascript modules are per-process singletons and thus all their objects are only initialized once, which makes them suitable f...
... but care must be taken to not leak references to the frame script
global when it is passed into a jsm.
...ted_symbols = ['getmaincopy']; var maincopy; services.cpmm.addmessagelistener("my-addon:update-configuration", function(message) { maincopy = message.data.newconfig; }) funtion getmaincopy() { return maincopy; } // framescript.js components.utils.import("resource://my-addon/processmodule.jsm") // getmaincopy() used by other functions don't register observers (and other callbacks to
global services) in a frame script bad: //framescript.js services.obs.addobserver("document-element-inserted", { observe: function(doc, topic, data) { if(doc.owner
global.top != content) return; // bail out if this is for another tab decoratedocument(doc); } }) observer notifications get fired for events that happen anywhere in the browser, they are not scoped to the current tab...
... better: content-document-
global-created notifications can be substituted with domwindowcreated events other observers and services should be registered in a process script or jsm instead load frame scripts on demand bad: // addon.js services.mm.loadframescript("framescript.js", /*delayed:*/ true) // stuff communicating with the framescript // framescript.js function onlyonceinabluemoon() { // we only need this du...
Process scripts
for example, if you call the
global frame message manager's loadframescript() function, then the script will be loaded separately into all open tabs.
... this can then cause a problem the frame scripts are interacting with a
global service in the content process.
...the following code uses the
global parent process message manager, which will load the script into the the chrome process and any child processes: // chrome code let ppmm = cc["@mozilla.org/parentprocessmessagemanager;1"] .getservice(ci.nsiprocessscriptloader); ppmm.loadprocessscript("chrome://whatever/process-script.js", true); ppmm.addmessagelistener("hello", function(msg) { ...
... }); the process script's
global is a child process message manager, which enables the process script to receive messages from the chrome side, and to send messages to the chrome side: // process-script.js if (services.appinfo.processtype == services.appinfo.process_type_content) { dump("welcome to the process script in a content process"); } else { dump("welcome to the process script in the main process"); } // message is sent using contentprocessmessagemanager sendasyncmessage("hello"); in this example, the dump() statement will run once in each content process as well as in the main process.
Embedding Tips
that returned from nsiwebbrowserprint::get
globalprintsettings) that you wish to print the page with.
...that returned from nsiwebbrowserprint::get
globalprintsettings()) that you wish to preview the page with.
... at startup use the category manager to register properties of the
global object in javascript like this: nscomptr<nsicategorymanager> catman = do_getservice(ns_categorymanager_contractid); if (!catman) return ns_error_failure; nsxpidlcstring previous; catman->addcategoryentry(javascript_
global_property_category, "my_prop_name", "my_prop_contract_id", pr_true, pr_true, getter_copies(previous)); this ...
... if you want to create your component multiple times within the browser window, you can use a javascript constructor instead of a javascript property: catman->addcategoryentry("javascript
global constructor", "my_prop_name", "my_prop_contract_id", pr_true, pr_true, getter_copies(previous)); that way you will be able to do: var my_comp = new my_prop_name(); this was taken from weirdal's excellent "burning chrome" article.
NSS 3.21 release notes
new in nss 3.21 new functionality certutil now supports a --rename option to change a nickname (bug 1142209) tls extended master secret extension (rfc 7627) is supported (bug 1117022) new info functions added for use during mid-handshake callbacks (bug 1084669) new functions in nss.h nss_optionset - sets nss
global options nss_optionget - gets the current value of nss
global options in secmod.h secmod_createmoduleex - create a new secmodmodule structure from module name string, module parameters string, nss specific parameters string, and nss configuration parameter string.
...
global ca 1 sha-1 fingerprint: 81:96:8b:3a:ef:1c:dc:70:f5:fa:32:69:c2:92:a3:63:5b:d1:23:d3 friendly name: digital signature trust co.
...
global ca 3 sha-1 fingerprint: ab:48:f3:33:db:04:ab:b9:c0:72:da:5b:0c:c1:d0:57:f0:36:9b:46 cn = utn - datacorp sgc sha-1 fingerprint: 58:11:9f:0e:12:82:87:ea:50:fd:d9:87:45:6f:4f:78:dc:fa:d6:d4 o = tÜrktrust bilgi İletişim ve bilişim güvenliği hizmetleri a.Ş.
...9:ad:23:d3:14:23:21:74:e4:0d:7f:9d:62:13:97:86:63:3a the following ca certificates were added cn = certification authority of wosign g2 sha1 fingerprint: fb:ed:dc:90:65:b7:27:20:37:bc:55:0c:9c:56:de:bb:f2:78:94:e1 cn = ca wosign ecc root sha1 fingerprint: d2:7a:d2:be:ed:94:c0:a1:3c:c7:25:21:ea:5d:71:be:81:19:f3:2b cn = oiste wisekey
global root gb ca sha1 fingerprint: 0f:f9:40:76:18:d3:d7:6a:4b:98:f0:a8:35:9e:0c:fd:27:ac:cc:ed the version number of the updated root ca list has been set to 2.6 bugs fixed in nss 3.21 this bugzilla query returns all the bugs fixed in nss 3.21: https://bugzilla.mozilla.org/buglist.cgi?resolution=fixed&classification=components&query_format=advanced&product=nss&target_milest...
Functions
since it will never need to walk the scope chain, its parent is the
global object.
...the function object's parent is the
global object.
...outside all functions, if a name definitely refers to a
global for which we have seen a var, const, or function declaration, then we emit a js_defvar instruction in the script prelude and access the
global using jsop_{get,set,call}gvar.
... this is fast if the
global either doesn't exist before the script runs (the script creates it) or it's a non-configurable data property (which amounts to the same thing).
JSPrincipals
obsolete since jsapi 12
globalprivilegesenabled jsbool (*)(jscontext *, jsprincipals *) flag indicating whether principals are enabled
globally.
... jsprincipals could be passed into the js engine through the js_new
globalobject function.
...
globalprivilegesenabled is a flag that indicates whether principals are enabled
globally.
... see also mxr id search for jsprincipals js_new
globalobject js_holdprincipals js_dropprincipals bug 715417 - removed getprincipalarray and
globalprivilegesenabled bug 728250 - added dump method, removed codebase, destroy, and subsume properties bug 884676 - changed refcount type to mozilla::atomic ...
Language bindings
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 operation, returning true or false respectively.components.lastresultcomponents.managercomponents.manager is a convenience reflection of the
global native component manager service.
... components.utils.get
globalforobjectthis method is used to determine the
global object with which an object is associated.
... this is the
global object in place at the time the object was created, which is to say the
global object used when executing the script that created the object.components.utils.getweakreferencethis method was introduced in firefox 3 and is used for obtaining a weak reference for an object.
...for example, you can import xpcomutils.jsm to avoid copy/pasting long xpcom component registration boilerplate in your component files.components.utils.import
globalpropertiesimports various objects into a system scope.components.utils.isxraywrapperwhen privileged javascript in gecko accesses objects belonging to less-privileged code (such as untrusted web content), it does so, by default, with "xray vision": a mechanism that filters out certain changes to the objects that could cause them to behave in unexpected ways.
mozIJSSubScriptLoader
it defaults to the
global object of the caller.
... note: undeclared variables in the loaded script will be created as
global variables in the caller (ie.: in the caller's
global object).
...it defaults to the
global object of the caller.
... note: undeclared variables in the loaded script will be created as
global variables in the caller (ie.: in the caller's
global object).
nsIModule
boolean canunload( in nsicomponentmanager acompmgr ); parameters acompmgr the
global component manager.
...void getclassobject( in nsicomponentmanager acompmgr, in nscidref aclass, in nsiidref aiid, [retval, iid_is(aiid)] out nsqiresult aresult ); parameters acompmgr the
global component manager.
...void registerself( in nsicomponentmanager acompmgr, in nsifile alocation, in string aloaderstr, in string atype ); parameters acompmgr the
global component manager.
...void unregisterself( in nsicomponentmanager acompmgr, in nsifile alocation, in string aloaderstr ); parameters acompmgr the
global component manager.
XUL Overlays
note: the master skin is not the same as the
global skin.
...(actually, the implementation is one step more complicated than this: base files overlay dialogoverlay.xul from the
global component directory, which in turn overlays a platform-specific xul file such as platformdialogoverlay.xul.
... the mechanism is the same, however.) any dialog that wants to overlay these buttons just declares the overlay at the top: <?xul-overlay href="chrome://
global/content/dialogoverlay.xul"?> and includes an empty box with an id of okcancelbuttons in the ui.
...e overlay's ok and cancel buttons at the bottom: <box align="horizontal" id="bx1" flex="100%" style="margin-bottom: 1em; width: 100%;"> <html:input type="checkbox" id="dialog.newwindow"/> <html:label for="dialog.newwindow">&openwin.label;</html:label> <spring flex="100%"/> </box> <box id="okcancelbuttons"/> for more detail, see the ok and cancel button definitions being referenced here in the
global component file platformdialogoverlay.xul.
Debugger-API - Firefox Developer Tools
environments may belong to a running stack frame, captured by a function closure, or reflect some
global object’s properties as variables.
... the debugger instance itself is not really a shadow of anything in the debuggee; rather, it maintains the set of
global objects which are to be considered debuggees.
... a debugger observes only execution taking place in the scope of these
global objects.
... gecko-specific features while the debugger core api deals only with concepts common to any javascript implementation, it also includes some gecko-specific features: [
global tracking][
global] supports debugging all the code running in a gecko instance at once—the ‘chrome debugging’ model.
CanvasRenderingContext2D - Web APIs
compositing canvasrenderingcontext2d.
globalalpha alpha value that is applied to shapes and images before they are composited onto the canvas.
... canvasrenderingcontext2d.
globalcompositeoperation with
globalalpha applied this sets how shapes and images are drawn onto the existing bitmap.
... canvasrenderingcontext2d.setalpha() use canvasrenderingcontext2d.
globalalpha instead.
... canvasrenderingcontext2d.setcompositeoperation() use canvasrenderingcontext2d.
globalcompositeoperation instead.
Compositing and clipping - Web APIs
we can, however, change this behaviour by setting the
globalcompositeoperation property.
...
globalcompositeoperation we can not only draw new shapes behind existing shapes but we can also use it to mask off certain areas, clear sections from the canvas (not limited to rectangles like the clearrect() method does) and more.
...
globalcompositeoperation = type this sets the type of compositing operation to apply when drawing new shapes, where type is a string identifying which of the twelve compositing operations to use.
... if we compare clipping paths to the
globalcompositeoperation property we've seen above, we see two compositing modes that achieve more or less the same effect in source-in and source-atop.
Introduction to the File and Directory Entries API - Web APIs
global methods of the asynchronous and synchronous apis.
... the asynchronous api has the following
global methods: requestfilesystem() and resolvelocalfilesystemurl().
... these methods are members of both the window object and the worker
global scope.
...these synchronous methods are members of the worker's
global scope only, not the window object.
Pinch zoom gestures - Web APIs
<style> div { margin: 0em; padding: 2em; } #target { background: white; border: 1px solid black; } </style>
global state supporting a two-pointer gesture requires preserving a pointer's event state during various event phases.
... this application uses two
global variables to cache the event state.
... //
global vars to cache event state var evcache = new array(); var prevdiff = -1; register event handlers event handlers are registered for the following pointer events: pointerdown, pointermove and pointerup.
... cache management this function helps manage the
global event caches evcache.
Push API - Web APIs
the service worker will be started as necessary to handle incoming push messages, which are delivered to the serviceworker
globalscope.onpush event handler.
... interfaces pushevent represents a push action, sent to the
global scope of a serviceworker.
... serviceworker
globalscope.onpush an event handler fired whenever a push event occurs; that is, whenever a server push message is received.
... serviceworker
globalscope.onpushsubscriptionchange an event handler fired whenever a pushsubscriptionchange event occurs; for example, when a push subscription has been invalidated, or is about to be invalidated (e.g.
SVGElement - Web APIs
8" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties also inherits properties from: documentandelementeventhandlers, element, elementcssinlinestyle,
globaleventhandlers, htmlorforeignelement, svgelementinstance svgelement.datasetread only a domstringmap object which provides a list of key/value pairs of named data attributes which correspond to custom data attributes attached to the element.
...this works just like html's htmlelement.dataset property and html's data-*
global attribute.
... methods this interface has no methods, but inherits methods from: documentandelementeventhandlers, element, elementcssinlinestyle,
globaleventhandlers, htmlorforeignelement, svgelementinstance events listen to these events using addeventlistener() or by assigning an event listener to the equivalent on...
... handler property defined on
globaleventhandlers or windoweventhandlers.
WebGLRenderingContext.getUniformLocation() - Web APIs
gl.useprogram(shaderprogram); uscalingfactor = gl.getuniformlocation(shaderprogram, "uscalingfactor"); u
globalcolor = gl.getuniformlocation(shaderprogram, "u
globalcolor"); urotationvector = gl.getuniformlocation(shaderprogram, "urotationvector") gl.uniform2fv(uscalingfactor, currentscale); gl.uniform2fv(urotationvector, currentrotation); gl.uniform4fv(u
globalcolor, [0.1, 0.7, 0.2, 1.0]); this code snippet is taken from the function animatescene() in "a basic 2d webgl animation example." see that...
... after setting the current shading program to shaderprogram, this code fetches the three uniforms "uscalingfactor", "u
globalcolor", and "urotationvector", calling getuniformlocation() once for each uniform.
... finally, the uniform u
globalcolor is set to the color [0.1, 0.7, 0.2, 1.0], the components in this 4-component vector represent the values of red, green, blue, and alpha, respectively.
... having done this, the next time the shading functions are called, their own variables named uscalingfactor, u
globalcolor, and urotationvector will all have the values provided by the javascript code.
Window.window - Web APIs
in web pages, the window object is also a
global object.
... this means:
global variables of your script are in fact properties of window: var
global = {data: 0}; alert(
global === window.
global); // displays "true" you can access built-in properties of the window object without having to type window.
...alert(window === window.window); // displays "true" the point of having the window property refer to the object itself, was likely to make it easy to refer to the
global object.
...for example, if we refer to "this.window.location.href", a javascript module could define a property called "window" inside of a class it defined (since no
global "window" variable exists for it by default) which could be created after passing in a window object to the module class' constructor.
<custom-ident> - CSS: Cascading Style Sheets
to prevent ambiguity, each property that uses <custom-ident> forbids the use of specific values: animation-name forbids the
global css values (unset, initial, and inherit), as well as none.
... counter-reset counter-increment forbids the
global css values (unset, initial, and inherit), as well as none.
... @counter-style list-style-type forbids the
global css values (unset, initial, and inherit), as well as the values none, inline, and outside.
... will-change forbids the
global css values (unset, initial, and inherit), as well as the values will-change, auto, scroll-position, and contents.
Writing forward-compatible websites - Developer guides
javascript prefix all
global variable access in onfoo attributes with “window.” when an event handler content attribute (onclick, onmouseover, and so forth) is used on html element, all name lookup in the attribute first happens on the element itself, then on the element's form if the element is a form control, then on the document, and then on the window (where the
global variables you have defined are).
...this happens even if there is a var ownerdocument declared in
global scope.
... what this means is that any time you access a
global variable in an event handler content attribute, including calling any function declared
globally, you can end up with a name collision if a specification adds a new dom property to elements or documents which has the same name as your function or variable, and a browser implements it.
... to avoid this, fully qualify
global variable access using "window.", like so: <script> function localname() { alert('function localname has been called'); } </script> <div onclick="window.localname()">clicking me should show an alert<div> don't concatenate scripts you don't control the "use strict;" directive in ecmascript, when used on the file level, applies to everything in the file.
itemid - HTML: Hypertext Markup Language
the itemid
global attribute provides microdata in the form of a unique,
global identifier of an item.
...also, itemid can only be specified on elements that possess an itemscope attribute whose corresponding itemtype refers to or defines a vocabulary that supports
global identifiers.
... the exact meaning of an itemtype's
global identifier is provided by the definition of that identifier within the specified vocabulary.
... the vocabulary defines whether several items with the same
global identifier can coexist and, if so, how items with the same identifier are handled.
itemtype - HTML: Hypertext Markup Language
the
global attribute itemtype specifies the url of the vocabulary that will be used to define itemprop's (item properties) in the data structure.
...they must only be specified on elements with an itemscope attribute, whose itemtype attribute specifies a vocabulary not supporting
global identifiers for items, as defined by that vocabulary's specification.
... the exact meaning of a
global identifier is determined by the vocabulary's specification.
... it is left to such specifications to define whether multiple items of the same
global identifier (whether on the same page or different pages) are allowed to exist, and what processing rules for that vocabulary are, with respect to handling the case of multiple items with the same id.
Numbers and dates - JavaScript
this includes using numbers written in various bases including decimal, binary, and hexadecimal, as well as the use of the
global math object to perform a wide variety of mathematical operations on numbers.
... same as the
global parsefloat() function.
... same as the
global parseint() function.
...more robust version of the original
global isnan().
Regular expressions - JavaScript
if escape strings are not already part of your pattern you can add them using string.replace: function escaperegexp(string) { return string.replace(/[.*+\-?^${}()|[\]\\]/g, '\\$&'); // $& means the whole matched string } the "g" after the regular expression is an option or flag that performs a
global search, looking in the whole string and returning all matches.
... advanced searching with flags regular expressions have six optional flags that allow for functionality like
global and case insensitive searching.
... regular expression flags flag description corresponding property g
global search.
... regexp.prototype.
global i case-insensitive search.
String.prototype.replace() - JavaScript
to perform a
global search and replace, include the g switch in the regular expression.
...(note: the above-mentioned special replacement patterns do not apply in this case.) note that the function will be invoked multiple times for each full match to be replaced if the regular expression in the first parameter is
global.
... using
global and ignore with replace()
global replace can only be done with a regular expression.
... in the following example, the regular expression includes the
global and ignore case flags which permits replace() to replace each occurrence of 'apples' in the string with 'oranges'.
WebAssembly - JavaScript
unlike most other
global objects, webassembly is not a constructor (it is not a function object).
... webassembly.
global() represents a
global variable instance, accessible from both javascript and importable/exportable across one or more webassembly.module instances.
...because the instantiatestreaming() function accepts a promise for a response object, you can directly pass it a windoworworker
globalscope.fetch() call, and it will pass the response into the function when it fulfills.
... 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.0
globalchrome full support 69edge no support nofirefox full support 62ie no support noopera no support nosafari no support nowebview andr...
Transitioning to strict mode - JavaScript
} f(42); this used to change a value on the
global object which is rarely the expected effect.
... if you really want to set a value to the
global object, pass it as an argument and explicitly assign it as a property: var
global = this; // in the top-level context, "this" always // refers to the
global object function f(x) { 'use strict'; var a = 12;
global.b = a + x * 35; } f(42); trying to delete a non-configurable property 'use strict'; delete object.prototype; // error!
... this in function calls in function calls like f(), the this value was the
global object.
...when a function was called with call or apply, if the value was a primitive value, this one was boxed into an object (or the
global object for undefined and null).
Understanding WebAssembly text format - WebAssembly
declaring
globals in webassembly webassembly has the ability to create
global variable instances, accessible from both javascript and importable/exportable across one or more webassembly.module instances.
... in webassembly text format, it looks something like this (see
global.wat in our github repo; also see
global.html for a live javascript example): (module (
global $g (import "js" "
global") (mut i32)) (func (export "get
global") (result i32) (
global.get $g)) (func (export "inc
global") (
global.set $g (i32.add (
global.get $g) (i32.const 1)))) ) this looks similar to what we've seen before, except that we specify a
global value using the keyword
global, and we also specify the keyword mut along with the value's datatype if we want it to be mutable.
... to create an equivalent value using javascript, you'd use the webassembly.
global() constructor: const
global = new webassembly.
global({value: "i32", mutable: true}, 0); webassembly memory the above example is a pretty terrible logging function: it only prints a single integer!
... in a normal compiled c program, you’d call a function to allocate some memory for the string, but since we’re just writing our own assembly here and we own the entire linear memory, we can just write the string contents into
global memory using a data section.
Interacting with page scripts - Archive of obsolete content
page scripts how to send messages between content scripts and page scripts sharing objects with page scripts there are two possible cases here: a content script might want to access an object defined by a page script a content script might want to expose an object to a page script access objects defined by page scripts to access page script objects from content scripts, you can use the
global unsafewindow object.
...instead, you need to use the
global cloneinto() function to clone the object into the page script's scope.
...from firefox 30 this sharing requires an extra step: the content script needs to explicitly clone the message payload into the page script's scope using the
global cloneinto() function: var messenger = document.getelementbyid("message"); messenger.addeventlistener("click", sendcustomevent, false); function sendcustomevent() { var greeting = {"greeting" : "hello world"}; var cloned = cloneinto(greeting, document.defaultview); var event = new customevent("addon-message", { bubbles: true, detail: cloned }); document.documentelement.dispatchevent(event...
Communicating using "port" - Archive of obsolete content
accessing port accessing port in the content script note that the
global self object is completely different from the self module, which provides an api for an add-on to access its data files and id.
... in the content script the port object is available as a property of the
global self object.
...for example, to receive the context message in a content script associated with a context menu object, you would call the on function attached to the
global self object: self.on("context", function() { // handle the message }); so the port property is essentially used here as a namespace for user-defined messages.
preferences/service - Archive of obsolete content
globals functions set(name, value) sets the application preference name to value.
... example: var prefs = require("sdk/preferences/service"); var name = "general.useragent.locale"; prefs.get(name); // is equal to "chrome://
global/locale/intl.properties" prefs.getlocalized(name) // is equal to "en-us" setlocalized(name, value) sets the localized application preference name to value.
... value : string preference value, a url to a properties file example: require("sdk/preferences/service").set("general.useragent.locale", "chrome://
global/locale/intl.properties"); example: setting
global preferences var { get, set } = require("sdk/preferences/service"); var { when: unload } = require("sdk/system/unload"); var oldvalue = get("browser.urlbar.autofill"); set("browser.urlbar.autofill", true); // by amo policy
global preferences must be changed back to their original value unload(function() { set("browser.urlbar.autofill", oldvalue); }); ...
jpm - Archive of obsolete content
jpm usage is: jpm [command] [options] jpm supports the following
global options: -h, --help - show a help message and exit -v, --version - print the jpm version number --addon-dir - directory for your source code, defaulting to the current directory installation jpm is distributed with the node package manager npm.
... installing jpm
globally npm install jpm --
global depending on your setup, you might need to run this as an administrator: sudo npm install jpm --
global installing jpm locally if you do not wish to, or are unable to, install jpm
globally, you may instead install it locally: cd $home && npm install jpm to run jpm from a terminal when installed locally, you must add the directory "$home/node_modules/.bin/" to your ...
...note that unlike cfx, jpm is available in every command prompt you start, as long as you installed it with the --
global flag.
Scrollbar - Archive of obsolete content
example assumes a structure like this: app/chrome/chrome.manifest app/chrome/skin/
global/ copy the scrollbars.css from xulrunner/chrome/classic.jar/skin/classic/
global to app/chrome/skin/
global/scrollbars.css open the app/chrome/chrome.manifest and add: skin app-
global standard/1.0 skin/
global/ override chrome://
global/skin/xulscrollbars.css chrome://app-
global/skin/scrollbars.css xulscrollbars.css are used for windows xp, and nativescrollbars.css on osx.
... so to make this work with osx, make an extra override: override chrome://
global/skin/nativescrollbars.css chrome://app-
global/skin/scrollbars.css change some color values inside the app/chrome/skin/
global/scrollbars.css to test that the css is used.
... example xul window: <?xml version="1.0"?> <?xml-stylesheet href="chrome://
global/skin/" type="text/css"?> <window id="samplewindow" width="320" height="240" xmlns="http://www.mozilla.org/keymaster/gat...re.is.only.xul"> <hbox flex="1"> <browser type="content" src="http://mozilla.org" flex="1"/> <scrollbar orient="vertical"/> </hbox> </window> ...
Intercepting Page Loads - Archive of obsolete content
this._loadhandler = function() {that._onpageload(); }; gbrowser.addeventlistener("load", this._loadhandler, true); gbrowser is a
global object that corresponds to the tabbrowser element in the main browser window.
... document loader service nsidocumentloader is nothing but a
global web progress listener.
...other extensions might add xul windows that allow navigation as well, so in those cases it's best to use a
global solution like this one.
Updating addons broken by private browsing changes - Archive of obsolete content
the
global private browsing service is actively being removed, and may not even exist as of firefox 21.
... nsirecentbadcertsservice: this is no longer a
global service, and has been renamed to nsirecentbadcerts.
...the supporting per-window private browsing article explains further about the equivalent notifications, which are all backwards compatible through to firefox 12 (and are sent side-by-side with the
global private browsing notifications in older versions).
Code snippets - Archive of obsolete content
mainwindow.gbrowser.addtab(url); } } partially corrupt a server components.utils.import("resource://services-sync/main.js"); components.utils.import("resource://services-sync/resource.js"); function deletepath(path) { let resource = new resource(weave.service.storageurl + path); resource.setheader("x-confirm-delete", "1"); return resource.delete(); } // delete meta/
global: deletepath("meta/
global"); // delete keys: deletepath("crypto/keys"); // delete server: deletepath(""); corrupt a single engine on the server let engine = "bookmarks"; components.utils.import("resource://services-sync/main.js"); components.utils.import("resource://services-sync/resource.js"); components.utils.import("resource://services-sync/util.js"); let r = new resource(weave.service.stora...
...geurl + "meta/
global"); let g = r.get(); let envelope = json.parse(g); let payload = json.parse(envelope.payload); payload.engines[engine].syncid = weave.utils.makeguid(); // or any other guid you like.
... bump meta/
global's modified time components.utils.import("resource://services-sync/main.js"); components.utils.import("resource://services-sync/resource.js"); function getpath(path) { let r = new resource(weave.service.storageurl + path); let g = r.get(); return [g, r]; }; let [g, r] = getpath("meta/
global"); r.put(g); delete and restore a record components.utils.import("resource://services-sync/main.js"...
GRE Registration - Archive of obsolete content
when installing a gre via the command line <tt>xulrunner.exe -register-
global</tt>, xulrunner will detect that there is already an installation at hklm/software/mozilla.org/gre/<version> and will try alternate keys <version>_1 _2 until an available key is found.
...xulrunner rpms/post-install scripts should register xulrunner as a gre by running <tt>xulrunner -register-
global</tt> and not hand-create a .conf file.
... the <tt>-register-
global</tt> flag has special fallback semantics so that multiple xulrunners of the same version can be installed without overwriting registration files.
Modularization techniques - Archive of obsolete content
file nssample3.cpp #include <iostream.h> #include "pratom.h" #include "nsrepository.h" #include "nsisample.h" #include "nssample.h" static ns_define_iid(kisupportsiid, ns_isupports_iid); static ns_define_iid(kifactoryiid, ns_ifactory_iid); static ns_define_iid(kisampleiid, ns_isample_iid); static ns_define_cid(ksamplecid, ns_sample_cid); <strong>/* *
globals */ static print32 glockcnt = 0; static print32 ginstancecnt = 0;</strong> /* * nssampleclass declaration */ class nssample: public nsisample { private: nsrefcnt mrefcnt; public: // constructor and destuctor nssample(); ~nssample(); // nsisupports methods ns_imethod queryinterface(const nsiid &aiid, void **aresult); ns_imethod_(nsrefcnt) addref(void);...
... nsresult refreshfoo(ifoo **afoo) { if (afoo == null || *afoo == null) { return ns_error_null_parameter; } if ((*afoo)->stale()) { ns_release(*afoo); *afoo = mfoo; ns_addref(*afoo); } return ns_ok; }
global and member variables both
global and member variables have lifetimes that can be changed by any number of functions.
... therefore one should call addref() on any
global or member variable that is being passed to a function, and call release() afterward.
Install script template - Archive of obsolete content
the keys are written according to the specification: http://mozilla.org/projects/plugins/first-install-problem.html and follows the plid specification: http://mozilla.org/projects/plugins/plugin-identifier.html **/ // define some
global variables var plugin_file = "npmyplugin.dll"; // this plugin consists of an xpt file because it is scriptable // http://mozilla.org/projects/plugins/scripting-plugins.html var component_file = "npmypluginscriptable.xpt"; var plugin_size = 2000; // (dll file) reserve a little extra so it is not required to update too often var component_size = 10; // (xpi file) reserve a little extra...
...current_user = "hkey_current_user"; var reg_moz_path = "software\\mozillaplugins"; // my own error code in case secondary installation fails var nosecondaryinstall = 1; // error return codes need some memory var err; // error return codes when we try and install to the current browser var errblock1; // error return codes when we try and do a secondary installation var errblock2 = 0; //
global variable containing our secondary install location var secondaryfolder; //special error values used by the cycore developers (www.cycore.com) who helped make this install script var exceptionoccurederror = -4711; var winregisnullerror = -4712; var invalidrootkeyerror = -4713; var registrykeynotwritableerror = -4714; //initinstall block //the installation is initialize...
...d here -- if we fail here, cancel the installation // initinstall is quite an overloaded method, but i have invoked it here with three strings // which are
globally defined err = initinstall(software_name, plid, version); if (err != 0) { // call initinstall again in case illegal characters in plid err = initinstall(software_name, software_name, version); if (err != 0) cancelinstall(err); } //addfiles to current browser block var pluginsfolder = getfolder("plugins"); //verify disk space if(verifydiskspace(pluginsfolder, plugin_size+component_size)) { // start installing plugin shared library reseterror(); // install the plugin shared library to the current browser's plugin directory errblock1 = addfile (plid, version, plugin_file, pluginsfolder, null); if (errblock1!=0) {...
Installer Script - Archive of obsolete content
registerchrome(content | delayed_chrome, getfolder(cf,"toolkit.xpi"),"content/
global/"); 44.
... registerchrome(skin | delayed_chrome, getfolder(cf,"modern.jar"),"skin/modern/
global/"); 50.
... registerchrome(skin | delayed_chrome, getfolder(cf,"classic.jar"),"skin/classic/
global/"); 56.
Index - Archive of obsolete content
100 disable
globalhistory no summary!
... 530 loaduri xul methods, xul reference note: this is the xul method on <browser> / <tabbrowser>, not the
global function in chrome://browser/content/browser.js.
... 1127 key reference, xul, xul elements, xul reference the key element defines a window-
global keyboard shortcut and must be placed inside a keyset element.
Creating toolbar buttons (Customize Toolbar Window) - Archive of obsolete content
to include the style on your chrome.manifest file: style chrome://
global/content/customizetoolbar.xul chrome://myextension/skin/toolbar-button.css if you are developing for firefox 1.0, attach it to the customize toolbar window (chrome://
global/content/customizetoolbar.xul) using skin/contents.rdf.
...www.mozilla.org/rdf/chrome#"> <seq about="urn:mozilla:skin:root"> <li resource="urn:mozilla:skin:classic/1.0"/> </seq> <description about="urn:mozilla:skin:classic/1.0"> <chrome:packages> <seq about="urn:mozilla:skin:classic/1.0:packages"> <li resource="urn:mozilla:skin:classic/1.0:myextension"/> </seq> </chrome:packages> </description> <seq about="urn:mozilla:stylesheets"> <li resource="chrome://
global/content/customizetoolbar.xul"/> </seq> <seq about="chrome://
global/content/customizetoolbar.xul"> <li>chrome://myextension/skin/toolbar-button.css</li> </seq> </rdf> the skin/contents.rdf file is denigrated in developing for later releases of firefox.
... extensions for firefox/thunderbird 1.5 and above should instead use something like this in their chrome.manifest: skin myextension classic/1.0 chrome/skin/ style chrome://
global/content/customizetoolbar.xul chrome://myextension/skin/toolbar-button.css ia take note of the packaging section in this article; you may need to include .jar references if you are delivering your extension as an .xpi file.
Window icons - Archive of obsolete content
these icons will override the
global icon files, which are located in app_dir/browser/chrome/icons/default.
... note: the
global icons override does not currently work due to bug bug 543490.
...
global icon files currently take precedence and bundles are only searched for icons which are not provided by the application.
tree - Archive of obsolete content
xul for the tree: <?xml version="1.0"?> <?xml-stylesheet href="chrome://
global/skin/" type="text/css"?> <?xml-stylesheet href="file://c:/main.css" type="text/css"?> <window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <row><button label="getrowvalues" oncommand="getrowcellvalues();"/></row> <tree flex="1" editable="true" id="mytree"> <treecols> <treecol label="active" type="checkbox" editable="true" /> <treecol label="name" flex="1" id...
...*/ list-style-image: url("chrome://
global/skin/checkbox/cbox-check.gif"); } treechildren::-moz-tree-checkbox(disabled) { /* disabled checkbox treecells.
...*/ list-style-image: url("chrome://
global/skin/checkbox/cbox-check-dis.gif") } treechildren::-moz-tree-row(selected) { background-color: #ffffaa; } treechildren::-moz-tree-row(odd) { background-color: #eeeeee; } treechildren::-moz-tree-row(odd, selected) { background-color: #ffffaa; } treechildren::-moz-tree-cell-text(selected) { color: #000000; } treechildren::-moz-tree-cell-text(odd, selected) { color: #000000; } treechildren::-moz-tree-row(hover) {background-color: #ffffaa !important;} treechildren:-moz-tree-column { border-right:1px solid rgb(220,220,220) !important; } the javascript to get the ...
XULRunner 1.8.0.1 Release Notes - Archive of obsolete content
to register xulrunner with the system, open a command prompt and run xulrunner.exe --register-
global (to register for all users) or xulrunner.exe --register-user (to register for one user only).
... register xulrunner with the system by running xulrunner --register-
global (to install for all users, must be run as root) or xulrunner --register-user (to install for one user only).
... uninstalling xulrunner windows/linux from a command prompt, run xulrunner --unregister-
global or xulrunner --unregister-user to unregister xulrunner just as you registered it during installation.
XULRunner tips - Archive of obsolete content
window url window type extension manager chrome://mozapps/content/extensions/extensions.xul?type=extensions extension:manager-extensions theme manager chrome://mozapps/content/extensions/extensions.xul?type=themes extension:manager-themes javascript console chrome://
global/content/console.xul
global:console about:config chrome://
global/content/config.xul developer extensions venkman need a custom build or a compatible extension need to edit compatibility in needs a method to start venkman (usually by overlaying the main xul file, similar to existing code for firefox, suite, etc.) the function toopenwindowbytype() needs to be defin...
... venkman uses "chrome://communicator/skin/" as an alias for "chrome://
global/skin/" and this alias was maintained in the xulrunner toolkit until xulrunner 1.9 was released.
... when using xulrunner 1.9 or greater, you can create your own alias in your chrome manifest add a "skin" line: skin communicator classic/1.0 skin/communicator/ add a skin folder named "communicator" and add a single css file named "communicator.css" with this content: @import url("chrome://
global/skin"); dom inspector to add dom inspector 2.0.* to your xulrunner 1.9.0.* application follow these steps: download the dom inspector (instead of clicking the "add to..." button, right-click and select "save link as...").
Common Firefox theme issues and solutions - Archive of obsolete content
the problem is commonly caused by a -moz-appearance:menulist style rule in chrome://
global/skin/menulist.css.
...to fix this issue you need to copy the following file from the latest version of firefox to your theme: chrome://
global/content/aboutmemory.css.
...source file: chrome://
global/skin/media/videocontrols.css the solution to this issue is to add the following name space to the second line of the file right after, and in addition to, the existing @namespace: @namespace html url("http://www.w3.org/1999/xhtml"); you can generate the error console message by going to mozilla's mission page.
Namespaces - Archive of obsolete content
qname is a
global constructor available in javascript implementations supporting e4x.
...the namespace
global constructor is very similar to qname.
...next is the
global xml object.
Common causes of memory leaks in extensions - Extensions
for example: var windows = []; function injavascriptcodemodule(window) { // forgetting or failing to pop the window again windows.push(window); } both of these cases can happen if you forget to declare local variables with var or let, which means they end up belonging to the
global scope.
... for example: function implicitdeclarationleak(window) { // implicit variable declaration in the js
global, holding a strong ref to the document doc = window.document; } implicitly declared variables can be avoided by using ecmascript 5's strict mode.
...another solution would be to use the setinterval()/settimeout() instances content windows provide, but there is a big drawback with this idea: if the user disables javascript
globally or locally (such as by using an add-on like noscript), then using the content window functions won't work.
Symbol - MDN Web Docs Glossary: Definitions of Web-related terms
global symbol registry there is a
global symbol registry holding all available symbols.
... the methods that access the registry are symbol.for() and symbol.keyfor(); these mediate between the
global symbol table (or "registry") and the run-time environment.
... the
global symbol registry is mostly built by javascript's compiler infrastructure, and the
global symbol registry's content is not available to javascript's run-time infrastructure, except through these reflective methods.
Sending form data - Learn web development
an http request consists of two parts: a header that contains a set of
global metadata about the browser's capabilities, and a body that can contain information necessary for the server to process the specific request.
... example: raw php php offers some
global objects to access the data.
... <?php // the
global $_post variable allows you to access the data sent with the post method by name // to access the data sent with the get method, you can use $_get $say = htmlspecialchars($_post['say']); $to = htmlspecialchars($_post['to']); echo $say, ' ', $to; ?> this example displays a page with the data we sent.
Package management basics - Learn web development
as we touched on in the previous article, dependencies can be installed
globally or locally to your project.
... although there tend to be more pros for installing
globally, the pros for installing locally are more important — such as code portability and version locking.
... in our previous chapter we installed prettier as a
global tool.
Chrome Worker Modules
this defines a
global value require(), that you may now use as follows: // import the module // (here, we import the core of os.file) let core = require("resource://gre/modules/osfile/osfile_shared_allthreads.jsm"); // we may now use module core.
...to make the value public, you just have to add it to either
global value exports, as follows: /* file mymodule.js */ let secretkey = "this is a secret"; let publickey = "this is public"; exports.key = publickey; // secretkey is not exported // publickey is exported with name "key" alternatively, if you prefer that style, you may write // variable |module| is a special
global introduced by require() module.exports = { key: publickey }; once this is done, we...
...in particular,
globals (string, math, object, self) and the worker
global scope itself (this) are shared between workers.
ESLint
here are some common issues: my script is imported into the
global browser.xul scope.
... add a line to tell eslint to use the frame-script environment: /* eslint-env mozilla/frame-script */ my script is a worker: add a line to tell eslint to use the worker environment: /* eslint-env worker */ or, to use a chrome worker environment: /* eslint-env mozilla/chrome-worker */ my file uses chrome/xbl specific
globals either, specify the
global at the top of the file: /*
globals mychrome
global */ or, add to the
global section toolkit/.eslintrc.js if it is widely used.
... you'll need to include the following just above it: /* import-
globals-from relative/path/to/file.js */ do_check_eq, add_task not defined in a test directory.
Limitations of chrome scripts
however, you must listen to content-document-
global-created and document-element-inserted in a frame script.
... to make the shim unnecessary: register event listeners on the
global object inside a frame script.
... javascript code modules (jsms) in single-process firefox, you can use javascript code modules (jsms) to maintain
global state.
Frame script loading and lifetime
the script just writes "foo" to the command line: // chrome script var mm = gbrowser.selectedbrowser.messagemanager; mm.loadframescript('data:,dump("foo\\n")', true); loadframescript() takes two mandatory parameters: a url that points to the frame script you want to load a boolean flag, allowdelayedload note: if the message manager is a
global frame message manager or a window message manager, loadframescript() may load the script multiple times, once in each applicable frame.
... to define the mapping between a chrome:// url and a frame script packaged with an extension, use a "chrome.manifest" file to register a chrome url: // chrome.manifest content my-e10s-extension chrome/content/ // chrome script mm.loadframescript("chrome://my-e10s-extension/content/content.js", true); allowdelayedload if the message manager is a
global frame message manager or a window message manager then: if allowdelayedload is true, the frame script will be loaded into any new frame, which has opened after the loadframescript() call.
...{ receivemessage: function() { console.log('incoming message from frame script:', amsg.data); } }, true // must set this argument to true, otherwise sending message from framescript will not work during and after the unload event on the contentmessagemanager triggers ); then in your frame script, listen for the unload event of the message manager (which is the
global this), and sending a message.
AddonManager
the addonmanager object is the
global api used to access information about add-ons installed in the application and to manipulate them.
... autoupdate_default indicates that the add-on should update automatically only if that's the
global default.
... scope_system 8 this add-on is installed somewhere
global to the system (installed for all users of the computer).
XPCOMUtils.jsm
return value a function that will return the factory for the components and can be assigned to nsgetfactory
global variable.
...} importrelative() imports a javascript code module given the calling javascript code module's
global object (you should specify this) and a path relative to that module.
... void importrelative( that, path, scope ); parameters that the javascript object of the calling javascript code module's
global scope.
Localization and Plurals
if you're here for pluralrule in the chrome/
global/intl.properties file, you'll need to figure out what plural rule to choose for your localization.
...if you don't know how many plural forms you need, check the pluralrule number in chrome/
global/intl.properties, and look up the corresponding entry in the following list of plural rules.
... components.utils.import("resource://gre/modules/pluralform.jsm"); methods: get these methods make use of the browser's current locale specified by chrome://
global/locale/intl.properties's pluralrule value.
Investigating leaks using DMD heap scan mode
if you are investigating a leak of www.example.com, then from $logdir you can do "grep ns
globalwindow cc-edges* | grep example.com".
... the result of that grep will contain output that looks something like this: cc-edges.15873.log:0x7f0897082c00 [rc=1285] ns
globalwindowinner # 2147483662 inner https://www.example.com/ * cc-edges.15873.log: the first part is the file name where it was found.
... the output will look something like this, after a message about loading progress: 0x7f0882fe3230 [fragmentorelement (xhtml) script https://www.example.com] --[[via hash] mlistenermanager]--> 0x7f0899b4e550 [eventlistenermanager] --[mlisteners event=onload listenertype=3 [i]]--> 0x7f0882ff8f80 [callbackobject] --[mincumbent
global]--> 0x7f0897082c00 [ns
globalwindowinner # 2147483662 inner https://www.example.com] root 0x7f0882fe3230 is a ref counted object with 1 unknown edge(s).
L20n Javascript API
alternatively, you can register callbacks to execute when the context is ready (or when
globals change and translations need to be updated) with ctx.localize.
... returns an object with the following properties: value: the string value of the entity, attributes: an object of evaluated attributes of the entity,
globals: a list of
global variables used while evaluating the entity, locale: locale code of the language the entity is in; it can be different than the first locale in the current fallback chain if the entity couldn't be evaluated and a fallback translation had to be used.
... the reason object can be: { locales: array<string> } if callback was invoked because of a change of the current locale (see requestlocales), {
global: string } if callback was invoked because the value of one of the
globals used in the translation of ids has changed.
nss tech note8
since nss 1.0, up until nss 3.4, there were two
global variables that contained the expected session lifetimes for ssl2 and ssl3 sessions.
...if zero, then the called cache function would compute the correct expiration time by adding the chosen timeout (from one of those two
global variables) to the sid's creationtime, giving the expirationtime.
... so, in nss 3.4, the
global variables ssl3_sid_timeout and ssl_sid_timeout were intended to become the definitions for the client cache only, and each server cache had its own new pair of variables for ssl2 and ssl3 session lifetimes, i.e., cache->ssl2timeout and cache->ssl3timeout.
JS::CloneFunctionObject
if scopechain is omitted, it creates a new function object in cx's
global.
... this can be helpful if funobj is an extant function that you wish to use as if it were enclosed by a newly-created
global object.
...js::clonefunctionobject takes care to choose a prototype that shares a
global object with the given parent whenever possible.
JS_GetArrayPrototype
this article covers features introduced in spidermonkey 24 retrieves the original, canonical array.prototype for an object's
global object.
... forobj js::handleobject an object from the
global whose array.prototype is being retrieved.
... note: this expression might have different values over time if the
global array property is modified, but this method returns only the original value.
JS_GetFunctionPrototype
this article covers features introduced in spidermonkey 17 retrieves the original, canonical function.prototype for an object's
global object.
... forobj js::handleobject an object from the
global whose function.prototype is being retrieved.
... note: this expression might have different values over time if the
global function property is modified, but this method returns only the original value.
JS_GetObjectPrototype
this article covers features introduced in spidermonkey 17 retrieves the original, canonical object.prototype for an object's
global object.
... forobj js::handleobject an object from the
global whose object.prototype is being retrieved.
... note: this expression might have different values over time if the
global object property is modified, but this method returns only the original value.
JS_InitCTypesClass
this article covers features introduced in spidermonkey 1.8.5 initialize the ctypes object on a
global object.
...syntax jsbool js_initctypesclass(jscontext *cx, jsobject *
global); name type description cx jscontext * the context.
...
global jsobject * the
global object.
JS_InitClass
obj js::handleobject pointer to the "
globals" object to use for initializing the class.
...so, for example, if this object is js_get
globalobject(cx), then javascript code will be able to see the new class as a
global name.
...jsextendedclass structs should usually be
global, and in this case the compiler automatically initializes these fields to null.
JS_NewRegExpObject
obj js::handleobject a pointer to a
global object.
... i jsreg_glob
global execution, creates array of matches.
...the flags from the built-in regexp constructor properties ignorecase,
global, multiline, and sticky are or'd in with the provided flags parameter.
Components.utils.evalInSandbox
the sandbox will become the
global scope object when you pass it to evalinsandbox(text, sandbox).
... for example: function double(n) { return n * 2; } // create new sandbox instance var mysandbox = new components.utils.sandbox("http://www.example.com/"); mysandbox.y = 5; // insert property 'y' with value 5 into
global scope.
... mysandbox.double = double; var result = components.utils.evalinsandbox("x = y + 2; double(x) + 3", mysandbox); console.log(result); // 17 console.log(mysandbox.x); // 7 operations on objects you insert into this sandbox
global scope do not carry privileges into the sandbox: mysandbox.foo = components; // this will give a "permission denied" error components.utils.evalinsandbox("foo.classes", mysandbox); optional arguments you can optionally specify the js version, filename, and line number of the code being evaluated.
Components.utils.import
scope an optional object to import onto; if omitted, the
global object is used.
... return value the module's
global object.
... example components.utils.import("resource://gre/modules/xpcomutils.jsm", this); difference from mozijssubscriptloader the differences from mozijssubscriptloader: the behavior when importing/loading the same code from different locations: the subscript loader evaluates the specified code each time it is invoked, with the caller's
global object.
nsIMsgWindow
to create an instance, use: msgwindow = components.classes["@mozilla.org/messenger/msgwindow;1"] .createinstance(components.interfaces.nsimsgwindow); in thunderbird the default message window is stored in the
global variable msgwindow.
...you should not store this in a
global variable.
... domwindow nsidomwindow the message window's
global chrome window object.
nsIPushService
you can use the
global nsiobserverservice to listen for these notifications.
... serviceworker
globalscope.onpush push-subscription-change null scope fired when the push server drops a subscription, or the subscription identifier changes.
... serviceworker
globalscope.onpushsubscriptionchange please make sure you listen for push-subscription-change.
nsIWorkerScope
dom/interfaces/threads/nsidomworkers.idlscriptable this interface represents the
global scope in which a worker's script runs.
... 1.0 66 introduced gecko 1.9.1 inherits from: nsiworker
globalscope last changed in gecko 1.9.2 (firefox 3.6 / thunderbird 3.1 / fennec 1.0) method overview void postmessage(in domstring amessage, [optional] in nsiworkermessageport amessageport); void close(); attributes attribute type description onclose nsidomeventlistener a listener object to be called when the worker stops running.
... see also using web workers nsiworkermessageevent nsiworkermessageport nsiworker
globalscope nsiabstractworker nsiworker ...
XPCOM Interface Reference
omdesktopnotificationcenternsidomelementnsidomeventnsidomeventgroupnsidomeventlistenernsidomeventtargetnsidomfilensidomfileerrornsidomfileexceptionnsidomfilelistnsidomfilereadernsidomfontfacensidomfontfacelistnsidomgeogeolocationnsidomgeopositionnsidomgeopositionaddressnsidomgeopositioncallbacknsidomgeopositioncoordsnsidomgeopositionerrornsidomgeopositionerrorcallbacknsidomgeopositionoptionsnsidom
globalpropertyinitializernsidomhtmlaudioelementnsidomhtmlformelementnsidomhtmlmediaelementnsidomhtmlsourceelementnsidomhtmltimerangesnsidomjswindownsidommousescrolleventnsidommoznetworkstatsnsidommoznetworkstatsdatansidommoznetworkstatsmanagernsidommoztoucheventnsidomnshtmldocumentnsidomnavigatordesktopnotificationnsidomnodensidomofflineresourcelistnsidomorientationeventnsidomparsernsidomprogresseventns...
...sultnsifeedresultlistenernsifeedtextconstructnsifilensifileinputstreamnsifileoutputstreamnsifilepickernsifileprotocolhandlernsifilespecnsifilestreamsnsifileurlnsifileutilitiesnsifileviewnsifocusmanagernsiformhistory2nsiframeloadernsiframeloaderownernsiframemessagelistenernsiframemessagemanagernsiframescriptloadernsigsettingscollectionnsigsettingsservicensigeolocationprovidernsigeolocationupdatensi
globalhistorynsi
globalhistory2nsi
globalhistory3nsihtmleditornsihttpheaderlistenernsihapticfeedbacknsihttpactivitydistributornsihttpactivityobservernsihttpchannelnsihttpchannelinternalnsihttpheadervisitornsihttpservernsihttpupgradelistenernsiidnservicensiiframeboxobjectnsiiniparsernsiiniparserfactorynsiiniparserwriternsiioservicensiidleservicensiinprocesscontentframemessagemanagernsiinputstreamnsiinputst...
...thandlerregistrarnsiwebnavigationnsiwebnavigationinfonsiwebpagedescriptornsiwebprogressnsiwebprogresslistenernsiwebprogresslistener2nsiwebsocketchannelnsiwebsocketlistenernsiwebappssupportnsiwifiaccesspointnsiwifilistenernsiwifimonitornsiwinaccessnodensiwinapphelpernsiwintaskbarnsiwindowcreatornsiwindowmediatornsiwindowwatchernsiwindowsregkeynsiwindowsshellservicensiworkernsiworkerfactorynsiworker
globalscopensiworkermessageeventnsiworkermessageportnsiworkerscopensiwritablepropertybagnsiwritablepropertybag2nsixformsmodelelementnsixformsnsinstanceelementnsixformsnsmodelelementnsixmlhttprequestnsixmlhttprequesteventtargetnsixmlhttprequestuploadnsixpcexceptionnsixpcscriptablensixpconnectnsixsltexceptionnsixsltprocessornsixsltprocessorobsoletensixulappinfonsixulbrowserwindownsixulbuilderlistenernsixu...
XPCOM Interface Reference by grouping
t nsiautocompletesearch console nsiconsolelistener nsiconsolemessage nsiconsoleservice document nsidocshell dom device nsidomgeogeolocation nsidomgeoposition nsidomgeopositionaddress nsidomgeopositioncallback nsidomgeopositioncoords nsidomgeopositionerror nsidomgeopositionerrorcallback nsidomgeopositionoptions nsidom
globalpropertyinitializer element nsidomchromewindow nsidomclientrect nsidomelement nsidomhtmlaudioelement nsidomhtmlformelement nsidomhtmlmediaelement nsidomhtmlsourceelement nsidomhtmltimeranges nsidomjswindow nsidomnode nsidomnshtmldocument nsidomstorageitem nsidomstoragemanager nsidomwindow nsidomwindow2 nsidomwindowinternal ...
...ylesheet nsistylesheetservice url nsiuri nsiurl util nsidomserializer nsidomxpathevaluator nsidomxpathexception nsidomxpathexpression nsidomxpathresult xslt nsixsltexception nsixsltprocessor download nsidownload nsidownloadmanager nsidownloadprogresslistener element internal nsiworker nsiworker
globalscope nsiworkermessageevent nsiworkermessageport nsiworkerscope tree nsitreeboxobject nsitreecolumn nsitreecolumns nsitreecontentview nsitreeselection nsitreeview xform nsixformsmodelelement nsixformsnsinstanceelement nsixformsnsmodelelement xmlhttprequest nsixmlhttprequesteventtarget favicon nsifavicondatacall...
... nsiauthmodule nsiauthprompt nsiauthpromptprovider nsiauthpromptwrapper nsiasyncverifyredirectcallback content nsicontentpolicy credentials nsilogininfo nsiloginmanager using nsiloginmanager nsiloginmanagerstorage nsiloginmetainfo history nsi
globalhistory nsi
globalhistory2 nsi
globalhistory3 ssl nsibadcertlistener2 system action nsicancelable application application nsiapplicationupdateservice nsiappshell nsiappshellservice nsiappstartup ...
Browser Console - Firefox Developer Tools
this means you can interact with all the browser's tabs using the gbrowser
global, and even with the xul used to specify the browser's user interface.
... controlling the browser the command line interpreter gets access to the tabbrowser object, through the gbrowser
global, and that enables you to control the browser through the command line.
... modifying the browser ui since the
global window object is the browser's chrome window, you can also modify the browser's user interface.
Debugger.Memory - Firefox Developer Tools
allocation site tracking the javascript engine marks each new object with the call stack at which it was allocated, if: the object is allocated in the scope of a
global object that is a debuggee of some debugger instancedbg; and dbg.memory.trackingallocationsites is set to true.
... a bernoulli trial succeeds, with probability equal to the maximum of d.memory.allocationsamplingprobability of all debugger instances d that are observing the
global that this object is allocated within the scope of.
... note that in the presence of multiple debugger instances observing the same allocations within a
global’s scope, the maximum allocationsamplingprobability of all the debuggers is used.
Debugger.Script - Firefox Developer Tools
global if the instance refers to a jsscript, a debugger.object instance referring to the
global object in whose scope this script runs.
... the result refers to the
global directly, not via a wrapper or a windowproxy (“outer window”, in firefox).
...disabling the debugger instance disables this breakpoint; and removing a
global from the debugger instance’s set of debuggees clears all the breakpoints belonging to that debugger instance in that
global’s scripts.
Compositing example - Web APIs
the output looks like this: compositing example this code sets up the
global values used by the rest of the program.
..."); p.textcontent = gcotext.pop(); dd.appendchild(p); var canvastodrawon = createcanvas(); var canvastodrawfrom = createcanvas(); var canvastodrawresult = createcanvas(); var ctx = canvastodrawresult.getcontext('2d'); ctx.clearrect(0, 0, width, height) ctx.save(); ctx.drawimage(canvas1, 0, 0, width/2, height/2); ctx.
globalcompositeoperation = pop; ctx.drawimage(canvas2, 0, 0, width/2, height/2); ctx.
globalcompositeoperation = "source-over"; ctx.fillstyle = "rgba(0,0,0,0.8)"; ctx.fillrect(0, height/2 - 20, width/2, 20); ctx.fillstyle = "#fff"; ctx.font = "14px arial"; ctx.filltext(pop, 5, height/2 - 5); ctx.restore(); var ctx = canvastodrawon.g...
... var lightmix = function() { var ctx = canvas2.getcontext("2d"); ctx.save(); ctx.
globalcompositeoperation = "lighter"; ctx.beginpath(); ctx.fillstyle = "rgba(255,0,0,1)"; ctx.arc(100, 200, 100, math.pi*2, 0, false); ctx.fill() ctx.beginpath(); ctx.fillstyle = "rgba(0,0,255,1)"; ctx.arc(220, 200, 100, math.pi*2, 0, false); ctx.fill() ctx.beginpath(); ctx.fillstyle = "rgba(0,255,0,1)"; ctx.arc(160, 100, 100, math.pi*2, 0, false); ctx.fil...
ExtendableEvent - Web APIs
the extendableevent interface extends the lifetime of the install and activate events dispatched on the
global scope as part of the service worker lifecycle.
...ect x="116" y="1" width="150" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="191" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">extendableevent</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} note: this interface is only available when the
global scope is a serviceworker
globalscope.
... examples this code snippet is from the service worker prefetch sample (see prefetch example live.) the code calls extendableevent.waituntil() in serviceworker
globalscope.oninstall, delaying treating the serviceworkerregistration.installing worker as installed until the passed promise resolves successfully.
Fetch API - Web APIs
for making a request and fetching a resource, use the windoworworker
globalscope.fetch() method.
... it is implemented in multiple interfaces, specifically window and worker
globalscope.
... fetch interfaces windoworworker
globalscope.fetch() the fetch() method used to fetch a resource.
In depth: Microtasks and the JavaScript runtime environment - Web APIs
there are three types of code that create a new execution context: the
global context is the execution context created to run the main body of your code; that is, any code that exists outside of a javascript function.
... upon starting the program, the
global context is created.
...by using the contexts and the context stack in this manner, many of the fundamentals of how a program operates can be managed, including local and
global variables, function calls and returns, and so forth.
Pointer events - Web APIs
interfaces the primary interface is the pointerevent interface which has a constructor plus several event types and associated
global event handlers.
... event types and
global event handlers pointer events have ten event types, seven of which have similar semantics to their mouse event counterparts (down, up, move, over, out, enter, and leave).
... below is a short description of each event type and its associated
global event handler.
Using Service Workers - Web APIs
if successful, the service worker is executed in a serviceworker
globalscope; this is basically a special kind of worker context, running off the main script execution thread, with no dom access.
...bear in mind therefore that you need to be careful with
global variables in the service worker script: each page doesn’t get its own unique worker.
...to do this, we use service worker’s brand new storage api — cache — a
global object on the service worker that allows us to store assets delivered by responses, and keyed by their requests.
Window.open() - Web APIs
best practices <script type="text/javascript"> var windowobjectreference = null; //
global variable function openffpromotionpopup() { if(windowobjectreference == null || windowobjectreference.closed) /* if the pointer to the window object in memory does not exist or if such pointer exists but the window was closed */ { windowobjectreference = window.open("http://www.spreadfirefox.com/", "promotefirefoxwindowname", "resizable,scrollbars,status"); /* then create i...
... you can also parameterize the function to make it versatile, functional in more situations, therefore re-usable in scripts and webpages: <script type="text/javascript"> var windowobjectreference = null; //
global variable function openrequestedpopup(url, windowname) { if(windowobjectreference == null || windowobjectreference.closed) { windowobjectreference = window.open(url, windowname, "resizable,scrollbars,status"); } else { windowobjectreference.focus(); }; } </script> (...) <p><a href="http://www.spreadfirefox.com/" target="promotefirefoxwindow" onclick="openrequestedpop...
...up(this.href, this.target); return false;" title="this link will create a new window or will re-use an already opened one" >promote firefox adoption</a></p> you can also make such function able to open only 1 secondary window and to reuse such single secondary window for other links in this manner: <script type="text/javascript"> var windowobjectreference = null; //
global variable var previousurl; /*
global variable that will store the url currently in the secondary window */ function openrequestedsinglepopup(url) { if(windowobjectreference == null || windowobjectreference.closed) { windowobjectreference = window.open(url, "singlesecondarywindowname", "resizable,scrollbars,status"); } else if(previousurl != url) { windowobjectreference = window.open...
init() - Web APIs
[noscript] void init( in nsiprincipal principal, in nsiscriptcontext scriptcontext, in nsi
globalobject
globalobject, in nsiuri baseuri, [optional] in nsiloadgroup loadgroup ); parameters principal the principal to use for the request; this must not be null.
...
globalobject the object to use as the
global for our request.
...if this is specified, it is used even if the
global has a window with a load group already established.
Date and time formats used in HTML - HTML: Hypertext Markup Language
global date and time strings a
global date and time string specifies a date and time as well as the time zone in which it occurs.
... a valid
global date and time string is the same format as a local date and time string, except it has a time zone string appended to the end, following the time.
... examples of valid
global date and time strings
global date and time string actual
global date and time date and time at prime meridian 2005-06-07t00:00z june 7, 2005 at midnight utc june 7, 2005 at midnight 1789-08-22t12:30:00.1-04:00 august 22, 1789 at a tenth of a second past 12:30 pm eastern daylight time (edt) august 22, 1789 at a tenth of a second past 4:30 pm ...
itemscope - HTML: Hypertext Markup Language
itemscope is a boolean
global attribute that defines the scope of associated metadata.
...you can use the id attribute to set a
global identifier for the new item.
... a
global identifier allows the item to relate to other items found on pages across the web.
Closures - JavaScript
they also provide a powerful way of managing your
global namespace.
... closure scope chain every closure has three scopes: local scope (own scope) outer functions scope
global scope a common mistake is not realizing that, in the case where the outer function is itself a nested function, access to the outer function's scope includes the enclosing scope of the outer function—effectively creating a chain of function scopes.
... //
global scope var e = 10; function sum(a){ return function(b){ return function(c){ // outer functions scope return function(d){ // local scope return a + b + c + d + e; } } } } console.log(sum(1)(2)(3)(4)); // log 20 // you can also write without anonymous functions: //
global scope var e = 10; function sum(a){ return function sum2(b){ return function sum3(c){ // outer functions scope return function sum4(d){ // local scope return a + b + c + d + e; } } } } var s = sum(1); var s1 = s(2); var s2 = s1(3); var s3 = s2(4); console.log(s3) //log 20 in the example above, there's a series of nested functions, all of which have access to the outer fun...
Memory Management - JavaScript
in this context, the notion of an "object" is extended to something broader than regular javascript objects and also contain function scopes (or the
global lexical scope).
...in javascript, the root is the
global object.
... cycles are no longer a problem in the first example above, after the function call returns, the two objects are no longer referenced by any resource that is reachable from the
global object.
TypeError: "x" is read-only - JavaScript
the javascript strict mode-only exception "is read-only" occurs when a
global variable or object property that was assigned to is a read-only property.
... the
global variable or object property that was assigned to is a read-only property.
... the
global variable undefined is also read-only, so you can't silence the infamous "undefined is not a function" error by doing this: 'use strict'; undefined = function() {}; // typeerror: "undefined" is read-only valid cases 'use strict'; var obj = object.freeze({name: 'score', points: 157}); obj = {name: obj.name, points: 0}; // replacing it with a new object works 'use strict'; var lung_count = 2...
AsyncFunction - JavaScript
note that asyncfunction is not a
global object.
... note: async functions created with the asyncfunction constructor do not create closures to their creation contexts; they are always created in the
global scope.
... when running them, they will only be able to access their own local variables and
global ones, not the ones from the scope in which the asyncfunction constructor was called.
GeneratorFunction - JavaScript
note that generatorfunction is not a
global object.
... note: generator function created with the generatorfunction constructor do not create closures to their creation contexts; they are always created in the
global scope.
... when running them, they will only be able to access their own local variables and
global ones, not the ones from the scope in which the generatorfunction constructor was called.
Infinity - JavaScript
the
global property infinity is a numeric value representing infinity.
... description infinity is a property of the
global object.
... in other words, it is a variable in
global scope.
NaN - JavaScript
the
global nan property is a value representing not-a-number.
... description nan is a property of the
global object.
... in other words, it is a variable in
global scope.
Number.isNaN() - JavaScript
it is a more robust version of the original,
global isnan().
... in comparison to the
global isnan() function, number.isnan() doesn't suffer the problem of forcefully converting the parameter to a number.
...these would have been true with
global isnan() number.isnan('nan'); // false number.isnan(undefined); // false number.isnan({}); // false number.isnan('blabla'); // false // these all return false number.isnan(true); number.isnan(null); number.isnan(37); number.isnan('37'); number.isnan('37.37'); number.isnan(''); number.isnan(' '); specifications specification ecmascript (ecma-262)the defin...
RegExp.prototype.exec() - JavaScript
javascript regexp objects are stateful when they have the
global or sticky flags set (e.g.
... true
global indicates if the g flag was used for a
global match.
... also, be sure that the
global flag ("g") is set, or it will also cause an infinite loop.
RegExp.prototype.test() - JavaScript
(this is similar to the string.prototype.match() method.) as with exec() (or in combination with it), test() called multiple times on the same
global regular expression instance will advance past the previous match.
...'hello world!'; const result = /^hello/.test(str); console.log(result); // true the following example logs a message which depends on the success of the test: function testinput(re, str) { let midstring; if (re.test(str)) { midstring = 'contains'; } else { midstring = 'does not contain'; } console.log(`${str} ${midstring} ${re.source}`); } using test() on a regex with the "
global" flag when a regex has the
global flag set, test() will advance the lastindex of the regex.
... the following example demonstrates this behaviour: const regex = /foo/g; // the "
global" flag is set // regex.lastindex is at 0 regex.test('foo') // true // regex.lastindex is now at 3 regex.test('foo') // false // regex.lastindex is at 0 regex.test('barfoo') // true // regex.lastindex is at 6 regex.test('foobar') //false // regex.lastindex is at 0 // (...and so on) specifications specification ecmascript (ecma-262)the definition of 'regexp.te...
RegExp - JavaScript
regexp.prototype.
global whether to test the regular expression against all possible matches in a string, or only against the first.
... let str = '#foo#' let regex = /foo/y regex.lastindex = 1 regex.test(str) // true regex.lastindex = 5 regex.test(str) // false (lastindex is taken into account with sticky flag) regex.lastindex // 0 (reset after match failure) the difference between the sticky flag and the
global flag with the sticky flag y, the next match has to happen at the lastindex position, while with the
global flag g, the match can happen at the lastindex position or later: re = /\d/y; while (r = re.exec("123 456")) console.log(r, "and re.lastindex", re.lastindex); // [ '1', index: 0, input: '123 456', groups: undefined ] and re.lastindex 1 // [ '2', index: 1, input: '123 456', groups: undefine...
... with the
global flag g, all 6 digits would be matched, not just 3.
String.prototype.match() - JavaScript
return value an array whose contents depend on the presence or absence of the
global (g) flag, or null if no matches are found.
... if you want to obtain capture groups and the
global flag is set, you need to use regexp.exec() or string.prototype.matchall() instead.
... using
global and ignore case flags with match() the following example demonstrates the use of the
global and ignore case flags with match().
Symbol.keyFor() - JavaScript
the symbol.keyfor(sym) method retrieves a shared symbol key from the
global symbol registry for the given symbol.
... return value a string representing the key for the given symbol if one is found on the
global registry; otherwise, undefined.
... examples using keyfor var
globalsym = symbol.for('foo'); // create a new
global symbol symbol.keyfor(
globalsym); // "foo" var localsym = symbol(); symbol.keyfor(localsym); // undefined // well-known symbols are not symbols registered // in the
global symbol registry symbol.keyfor(symbol.iterator) // undefined specifications specification ecmascript (ecma-262)the definition of 'symbol.keyfor' in that specification.
TypedArray - JavaScript
there is no
global property named typedarray, nor is there a directly visible typedarray constructor.
... instead, there are a number of different
global properties, whose values are typed array constructors for specific element types, listed below.
... this constructor is not directly exposed: there is no
global %typedarray% or typedarray property.
const - JavaScript
description this declaration creates a constant whose scope can be either
global or local to the block in which it is declared.
...
global constants do not become properties of the window object, unlike var variables.
... if (my_fav === 7) { // this is fine and creates a block scoped my_fav variable // (works equally well with let to declare a block scoped non const variable) let my_fav = 20; // my_fav is now 20 console.log('my favorite number is ' + my_fav); // this gets hoisted into the
global context and throws an error var my_fav = 20; } // my_fav is still 7 console.log('my favorite number is ' + my_fav); const needs to be initialized // throws an error // uncaught syntaxerror: missing initializer in const declaration const foo; const in objects and arrays const also works on objects and arrays.
context-menu - Archive of obsolete content
to communicate to the menu item associated with the content script, the content script can call the postmessage function attached to the
global self object, passing it some json-able data.
... label: "just a tigger, will never show up", contentscript: 'self.on("context", function(){self.postmessage(); return false;})', onmessage: function(){ var cmitems = getmostrecentbrowserwindow().document.queryselectorall(".addon-context-menu-item[value^='"+ uuidstr +"']"); for(var i=0; i < cmitems.length; i++) cmitems[i].tooltiptext = cmitems[i].value.substring(36); } });
globals constructors item(options) creates a labeled menu item that can perform an action when clicked.
page-mod - Archive of obsolete content
globals constructors pagemod(options) creates a page-mod.
...the pattern must match the entire url, not just a subset, and has
global, ignorecase, and multiline disabled.
self - Archive of obsolete content
note that the self module is completely different from the
global self object accessible to content scripts, which is used by a content script to communicate with the add-on code.
...
globals properties uri this property represents an add-on associated unique uri string.
simple-prefs - Archive of obsolete content
this means that they're visible in about:config, and they can be accessed using the
global simple-preferences module.
...
globals functions on(prefname, listener) registers an event listener that will be called when a preference is changed.
ui/sidebar - Archive of obsolete content
on the sidebar end of the conversation, sidebar scripts get a
global variable addon that contains a port for sending and receiving messages.
...you should see console output like: console.log: add-on: sidebar script got the message console.log: add-on: add-on script got the reply
globals constructors sidebar(options) creates a sidebar.
util/match-pattern - Archive of obsolete content
the expression is compiled with the
global, ignorecase, and multiline flags disabled.
...
globals constructors matchpattern(pattern) this constructor creates match pattern objects that can be used to test urls.
cfx - Archive of obsolete content
cfx usage is: cfx [options] command [command-specific options] "options" are
global options applicable to the tool itself or to all commands (for example --help).
... cfx supports the following
global options: -h, --help - show a help message and exit -v, --verbose - enable lots of output "command-specific options" are documented alongside the commands.
console - Archive of obsolete content
this overrides the
global preference if both preferences are set.
... when you run your add-on using jpm run (without --profile set) or jpm test, the
global extensions.sdk.console.loglevel preference is automatically set to "info".
Modifying Web Pages Based on URL - Archive of obsolete content
in the content script, port is a property of the
global self object.
... the content script now needs to look like this: // "self" is a
global object in content scripts // listen for a message, and replace the document's // contents with the message payload.
Modifying the Page Hosted by a Tab - Archive of obsolete content
in the content script, port is a property of the
global self object.
... the content script now needs to look like this: // "self" is a
global object in content scripts // listen for a "drawborder" self.port.on("drawborder", function(color) { document.body.style.border = "5px solid " + color; }); in the add-on script, we'll send the content script a "drawborder" message using the object returned from attach(): var self = require("sdk/self"); var tabs = require("sdk/tabs"); var button = require("sdk/ui/button/action").actionbutton({ id: "style-tab", label: "style tab", icon: "./icon-16.png", onclick: function() { var worker...
Boxes - Archive of obsolete content
make the box style="display: block" and the wrapping behavior will occur when the box is resized: <?xml version="1.0"?> <?xml-stylesheet href="chrome://
global/skin/" type="text/css"?> <window id="yourwindow" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <hbox style="display: block"> <label value="aaa"/> <label value="bbb"/> <label value="ccc"/> <label value="ddd"/> <label value="eee"/> <label value="fff"/> <label value="ggg"/> <label value="hhh"/> <label value="iii"/> <label value="jjj"/> <label value="kk...
...this keeps the image from stretching inside the box: <?xml version="1.0"?> <?xml-stylesheet href="chrome://
global/skin/" type="text/css"?> <window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <box align="start" style="display:block"> <image src="chrome://
global/skin/icons/error.png" style="padding:5px"/> <textbox /> <image src="chrome://
global/skin/icons/error.png" style="padding:5px"/> <button label="hello"/> <image src="chrome://
global/skin/icons/error.png" style="paddi...
Dialogs and Prompts - Archive of obsolete content
<?xml version="1.0"?> <?xml-stylesheet href="chrome://
global/skin/
global.css" type="text/css"?> <dialog xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" id="..." title="..." buttons="accept,cancel" ondialogaccept="return onaccept();" ondialogcancel="return oncancel();"> <script src="chrome://..."/> <!-- content --> </dialog> you need to implement onaccept and oncancel functions in your script.
... example: <?xml version="1.0"?> <?xml-stylesheet href="chrome://
global/skin/" type="text/css"?> <dialog xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" ondialogaccept="alert('ok!');"> <hbox> <label value="hey!"/> <spacer flex="1"/> <vbox> <button dlgtype="accept"/> <button dlgtype="cancel"/> </vbox> </hbox> </dialog> default button since firefox 1.5, there are defaultbutton attributes and properties on the <dialog> e...
Post data to window - Archive of obsolete content
preprocessing post data the apostdata argument of the (
global) loaduri(), opendialog(), and (tab)browser.loaduriwithflags() methods expects the post data in the form of an nsiinputstream (because they eventually call nsiwebnavigation.loaduri()) while post data can be created using nsimimeinputstream.
... posting data to the current tab there is a convenience method in
global scope (in firefox, chrome://browser/content/browser.js): loaduri(auri, areferrer, apostdata, aallowthirdpartyfixup); posting data to a new window window.opendialog('chrome://browser/content', '_blank', 'all,dialog=no', auri, aflags, areferrer, apostdata); ...
StringView - Archive of obsolete content
the code stringview.js "use strict"; /*\ |*| |*| :: number.isinteger() polyfill :: |*| |*| /docs/web/javascript/reference/
global_objects/number/isinteger |*| \*/ if (!number.isinteger) { number.isinteger = function isinteger (nval) { return typeof nval === "number" && isfinite(nval) && nval > -9007199254740992 && nval < 9007199254740992 && math.floor(nval) === nval; }; } /*\ |*| |*| stringview mdndeveloper network |*| |*| revision #12, march 21st, 2017 |*| |*| https://developer.mozilla.org/add-ons/code_snippet...
... notes when you include the script stringview.js into a page, no variables other than stringview itself will be added to the
global scope.
Custom about: URLs - Archive of obsolete content
this example can be easily modified, just modify the
global const at in the //
globals section.
... const {classes: cc, interfaces: ci, manager: cm, results: cr, utils: cu, constructor: cc} = components; cm.queryinterface(ci.nsicomponentregistrar); components.utils.import("resource://gre/modules/services.jsm"); //
globals const aboutpage_description = 'this is my custom about page'; const aboutpage_id = 'aa132730-2278-11e5-867f-0800200c9a66'; // make sure you generate a unique id from https://www.famkruithof.net/uuid/uuidgen const aboutpage_word = 'myaboutpage' const aboutpage_uri = 'data:text/html,hi this is the page that is shown when navigate to about:myaboutpage'; // const aboutpage_uri = 'chrome://myaboutadd...
How to convert an overlay extension to restartless - Archive of obsolete content
it's available in the
global for a window, but in jsm you'll need to fetch it from an interface: const xmlhttprequest = components.constructor("@mozilla.org/xmlextras/xmlhttprequest;1", "nsixmlhttprequest"); here's how to load a file using it: function loadfile(url,type,returnresult) { var request = new xmlhttprequest(); request.open("get", url, true); // async=true ...
... step 7: manually handle
global css stylesheets any
global css style sheets which you are using will need to be registered upon load and unregistered when your extension is unloaded.
JXON - Archive of obsolete content
if you want a complete bidirectional jxon library (modelled on the json
global object), skip to the dedicated paragraph (but please read the note about the const statement compatibility).
... usage the obtained non-native jxon
global object will have two methods: method description jxon.build(document[, verbosity[, freeze[, nesteattributes]]]) returns a javascript object based on the given xml document.
List of Mozilla-Based Applications - Archive of obsolete content
font management tool firecast digital signage and interactive kiosk tools also used in firecast easystart mozilla firefox web browser web browser usage stats from
global stats fossamail email client for windows platform, based on mozilla thunderbird developed by moonchild productions, creator of the pale moon web browser flickr uploadr image upload tool see flickr uploadr: open source and powered by xulrunner foxkeh clock clock frizione javascript development, testing and deployment environment uses moz...
...illa rhino geckofx embeddable gecko gjs javascript bindings for gnome
globalmojo browser that raises money for your favorite causes gluescript a javascript engine which can be used as a general purpose language uses mozilla spidermonkey and formerly called wxjavascript gnome operating system gnome 3 will use spidermonkey through gjs google adwords editor editor google gadgets for linux google’s desktop widget engine uses xulrunner according to the build instructions grani grain sizing assessment tool according to this wiki page grani is based on xul and xpcom daim gwt-mosaic-xul xul builder for google web tools hachette's multimedia encyclopedia ...
Notes on HTML Reflow - Archive of obsolete content
initial, incremental, resize, and style change reflows may each be performed as an immediate "
global" reflow from the presentation shell: an initial reflow is performed when the presentation shell is initialized to flow the shell's initial frame hierarchy.
... a style change reflow is performed when the presentation shell's
global stylistic information is changed; e.g., addition or removal of a style sheet, a change to the shell's default font.
contents.rdf - Archive of obsolete content
chrome:description="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:description> <!-- version information.
...--> <rdf:description chrome:skinversion="1.0" about="urn:mozilla:skin:myskin/1.0:communicator"/> <rdf:description chrome:skinversion="1.0" about="urn:mozilla:skin:myskin/1.0:editor"/> <rdf:description chrome:skinversion="1.0" about="urn:mozilla:skin:myskin/1.0:
global"/> <rdf:description chrome:skinversion="1.0" about="urn:mozilla:skin:myskin/1.0:messenger"/> <rdf:description chrome:skinversion="1.0" about="urn:mozilla:skin:myskin/1.0:navigator"/> </rdf:rdf> ...
Drag and Drop Example - Archive of obsolete content
first, we'll add the wrapper scripts: <script src="chrome://
global/content/nsdraganddrop.js"/> <script src="chrome://
global/content/nstransferable.js"/> <script src="dragboard.js"/> an additional script file dragboard.js is included which will contain the code we will write ourselves.
...the final code is shown below: <window title="widget dragger" id="test-window" orient="horizontal" xmlns="http://www.mozilla.org/keymaster/gat...re.is.only.xul"> <script src="chrome://
global/content/nsdraganddrop.js"/> <script src="chrome://
global/content/nstransferable.js"/> <script src="dragboard.js"/> <stack id="board" style="width:300px; height: 300px; max-width: 300px; max-height: 300px" ondragover="nsdraganddrop.dragover(event, boardobserver)" ondragdrop="nsdraganddrop.drop(event, boardobserver)"> </stack> <vbox> <button label="button"...
Drag and Drop JavaScript Wrapper - Archive of obsolete content
this drag and drop interface is stored in the
global package, in the file chrome://
global/content/nsdraganddrop.js.
...<script src="chrome://
global/content/nsdraganddrop.js" /> <script src="chrome://
global/content/nstransferable.js" /> this drag and drop library creates an object stored in the variable nsdraganddrop.
JavaScript OS.Shared - Archive of obsolete content
global object os.shared.type properties void_t voidptr_t char jschar int unsigned_int int32_t uint32_t int64_t uint64_t long bool off_t size_t ssize_t fd (unix only) negativeone_or_fd (unix only) negativeone_or_nothing (unix only) string (unix only) null_or_string (unix only) handle (windows only) maybe_handle (windows only) dword (windows only) negative_or_dword (windows only) zero_or_dword (windows only) zero_or_nothing (windows only) declareffi() intn_t() uintn_t()instances of os.shared.type convert_from_c() releasewith() attrib...
...utes
global object os.shared.hollowstructure in_ptr out_ptr inout_ptr ...
The new nsString class implementation (1999) - Archive of obsolete content
in the new prototype nsstrimpl and nsstring classes, the allocator is an intrinsic member installed during construction of the string (by default they share a
global allocator).
... note: the com rules imply that everyone needs to use the same allocators, that they acquire via a
global com service called cogetmalloc().
XPJS Components Proposal - Archive of obsolete content
each .js file (let's call it a module) is started up and run in the context of a relatively 'raw' js
global object.
...it the module oks it then the xpjsmanager will release its root of the module's
global object and release any hold over the objects in the module.
onchange - Archive of obsolete content
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 radio/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/functions i.e.
... window, document, or any of the functions/objects/variables bound to the window object event object example <?xml version="1.0"?> <?xml-stylesheet href="chrome://
global/skin/" type="text/css"?> <window id="findfile-window" title="find files" orient="horizontal" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <script type="text/javascript"> function myfunction(e){ /* do something cool here or just say the below */ alert(e.target.nodename); } </script> <textbox id="find-text" onchange="return myfunction(event);"/> </window> ...
textbox.type - Archive of obsolete content
if you have <binding id="input" extends="chrome://
global/content/bindings/autocomplete.xml#autocomplete" >, then the textbox will have autocomplete type, regardless of tree's 'type' attribute.
... use <binding extends="chrome://
global/content/bindings/textbox.xml#textbox" > for ordinary textbox.
treecol.type - Archive of obsolete content
*/ list-style-image: url("chrome://
global/skin/checkbox/cbox-check.gif"); } treechildren::-moz-tree-checkbox(disabled) { /* disabled checkbox treecells.
...*/ list-style-image: url("chrome://
global/skin/checkbox/cbox-check-dis.gif"); } see also type ...
Introduction to XUL - Archive of obsolete content
so a xul file will begin <?xml version="1.0"?> <?xml-stylesheet href="chrome://
global/skin/xul.css" type="text/css"?> <!doctype window> <window xmlns:html="http://www.w3.org/1999/xhtml" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> the html namespace is of course the standard one.
... <?xml version="1.0"?> <?xml-stylesheet href="chrome://
global/skin/xul.css" type="text/css"?> <!doctype window> <window id="main-window" xmlns:html="http://www.w3.org/1999/xhtml" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <menubar> <menu label="file"> <menupopup> <menuitem label="hello world!" onclick="alert('hello world!\n');"/> </menupopup> </menu> </menubar> <html:iframe id="content...
textbox (Toolkit autocomplete) - Archive of obsolete content
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 radio/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/functions i.e.
... window, document, or any of the functions/objects/variables bound to the window object event object example <?xml version="1.0"?> <?xml-stylesheet href="chrome://
global/skin/" type="text/css"?> <window id="findfile-window" title="find files" orient="horizontal" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <script type="text/javascript"> function myfunction(e){ /* do something cool here or just say the below */ alert(e.target.nodename); } </script> <textbox id="find-text" onchange="return myfunction(event);"/> </window> oninput type: script code this event is sent when a user enters text in a textbox.
Textbox (XPFE autocomplete) - Archive of obsolete content
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 radio/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/functions i.e.
... window, document, or any of the functions/objects/variables bound to the window object event object example <?xml version="1.0"?> <?xml-stylesheet href="chrome://
global/skin/" type="text/css"?> <window id="findfile-window" title="find files" orient="horizontal" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <script type="text/javascript"> function myfunction(e){ /* do something cool here or just say the below */ alert(e.target.nodename); } </script> <textbox id="find-text" onchange="return myfunction(event);"/> </window> onerrorcommand type: script code this event handler is called when an error occurs when selecting a result from the popup.
Anonymous Content - Archive of obsolete content
sion of an editable menulist element, might be created as follows: xul: <menu class="dropbox"> <menupopup> <menuitem label="1000"/> <menuitem label="2000"/> </menupopup> </menu> css: menu.dropbox { -moz-binding: url('chrome://example/skin/example.xml#dropbox'); } xbl: <binding id="dropbox"> <content> <children/> <xul:textbox flex="1"/> <xul:button src="chrome://
global/skin/images/dropbox.jpg"/> </content> </binding> this example creates an input field with a button beside it.
...the resulting content would be: <menu class="dropbox"> <menupopup> <menuitem label="1000"/> <menuitem label="2000"/> </menupopup> <textbox flex="1"/> <button src="chrome://
global/skin/images/dropbox.jpg"/> </menu> includes attribute in some cases, you may wish to only include specific types of content and not others.
Creating Dialogs - Archive of obsolete content
example dialog source view <?xml version="1.0"?> <?xml-stylesheet href="chrome://
global/skin/
global.css" type="text/css"?> <dialog id="donothing" title="dialog example" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" buttons="accept,cancel" ondialogaccept="return dook();" ondialogcancel="return docancel();"> <script> function dook(){ alert("you pressed ok!"); return true; } function docancel(){ alert("you pressed cancel!
... example dialog with more features <?xml version="1.0"?> <?xml-stylesheet href="chrome://
global/skin/
global.css" type="text/css"?> <dialog id="mydialog" title="my dialog" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" onload="window.sizetocontent();" buttons="accept,cancel" buttonlabelaccept="set favourite" buttonaccesskeyaccept="s" ondialogaccept="return dosave();" buttonlabelcancel="cancel" buttonacces...
Element Positioning - Archive of obsolete content
note that the css
global skin of the xul application may also specify a min-width for the buttons and other elements, thus if simply setting the width property does not set the button width as you expect, try also to modify the button min-width property.
... example 5: source view <?xml version="1.0"?> <?xml-stylesheet href="chrome://
global/skin/" type="text/css"?> <window id="yesno" title="question" orient="horizontal" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <hbox> <button label="yes"/> <button label="no"/> </hbox> <hbox align="center"> <button label="maybe"/> <button label="perhaps"/> </hbox> </window> you can also use the style properties -moz-box-pack and -moz...
Install Scripts - Archive of obsolete content
in an html document, or a xul document, the window object is the root
global object.
...in an install script, there is no associated window, however the
global object will be an install object which contains a number of functions to customize the install process.
colorpicker - Archive of obsolete content
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 radio/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/functions i.e.
... window, document, or any of the functions/objects/variables bound to the window object event object example <?xml version="1.0"?> <?xml-stylesheet href="chrome://
global/skin/" type="text/css"?> <window id="findfile-window" title="find files" orient="horizontal" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <script type="text/javascript"> function myfunction(e){ /* do something cool here or just say the below */ alert(e.target.nodename); } </script> <textbox id="find-text" onchange="return myfunction(event);"/> </window> preference type: id connects the element to a corresponding preference.
command - Archive of obsolete content
if you include the script chrome://
global/content/
globaloverlay.js in your window, you can use the function godocommand function to invoke the command.
...see also: command attribute, commandset element attributes disabled, label, oncommand,reserved examples the following code will send a paste command (cmd_paste) to the currently focused element: // first include chrome://
global/content/
globaloverlay.js godocommand("cmd_paste"); example with two buttons <commandset><command id="cmd_openhelp" oncommand="alert('help');"/></commandset> <button label="help" command="cmd_openhelp"/> <button label="more help" command="cmd_openhelp"/> attributes disabled type: boolean indicates whether the element is disabled or not.
notificationbox - Archive of obsolete content
finding the current notification box within a firefox extension, you can retrieve the current notification box for a specific tab by calling the
global function getnotificationbox(): notifybox = chromewin.getnotificationbox(notifywindow) notifybox = getnotificationbox(notifywindow) // applies to current context's window object here, chromewin is the xul window (usually just window), and notifywindow is the web content window for the tab you want to find the notification box for.
... also it is possible to call function with the same name (they are different) of
global object gbrowser: notifybox = gbrowser.getnotificationbox() examples <notificationbox flex="1"> <browser src="http://www.mozilla.org"/> </notificationbox> there is a more complex code available in the code snippets area.
preference - Archive of obsolete content
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 radio/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/functions i.e.
... window, document, or any of the functions/objects/variables bound to the window object event object example <?xml version="1.0"?> <?xml-stylesheet href="chrome://
global/skin/" type="text/css"?> <window id="findfile-window" title="find files" orient="horizontal" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <script type="text/javascript"> function myfunction(e){ /* do something cool here or just say the below */ alert(e.target.nodename); } </script> <textbox id="find-text" onchange="return myfunction(event);"/> </window> readonly type: boolean if set to true, then the user cannot change the value of the element.
treecol - Archive of obsolete content
however, chrome://
global/skin/checkbox/cbox-check.gif is available in seamonkey on mac os x..
...*/ list-style-image: url("chrome://
global/skin/checkbox/cbox-check.gif"); } for example: create a css file.
window - Archive of obsolete content
without including the css file at "chrome://
global/skin/", the window will not be stylized and will be invisible and glitchy when opened as a dialog.
... attributes accelerated, chromemargin, disablechrome, disablefastfind, drawintitlebar, fullscreenbutton, height, hidechrome, id, lightweightthemes, lightweightthemesfooter, screenx, screeny, sizemode, title, width, windowtype examples <?xml version="1.0"?> <?xml-stylesheet href="chrome://
global/skin/" type="text/css"?> <!-- run this example using copy & paste in this live xul editor: https://github.com/km-200/xul --> <!-- extremely recommended to keep this css include!!
Debugging a XULRunner Application - Archive of obsolete content
inspired by http://article.gmane.org/gmane.comp.mozilla.devel.jsdebugger/859 i extracted venkman.jar, opened venkman\content\venkman\venkman-scripts.xul and changed: @@ -54,11 +54,11 @@ <script src="chrome://
global/content/nstransferable.js" /> <script src="chrome://
global/content/nsclipboard.js" /> <script src="chrome://
global/content/nsdraganddrop.js" /> - <script src="chrome://communicator/content/contentareautils.js" /> - <script src="chrome://communicator/content/contentareadd.js" /> - <script src="chrome://communicator/content/findutils.js" /> - <script src="chr...
...ome://browser/content/contentareautils.js" /> + <script src="chrome://
global/content/contentareautils.js" /> + <script src="chrome://
global/content/contentareadd.js" /> <script src="chrome://
global/content/findutils.js" /> + <script src="chrome://
global/content/contentareautils.js" /> + <script src="chrome://
global/content/findutils.js" /> <script src="chrome://
global/content/strres.js" /> ...
NP_Initialize - Archive of obsolete content
« gecko plugin api reference « plug-in side plug-in api summary provides
global initialization for a plug-in.
...np_initialize tells the plug-in that the browser has loaded it and provides
global initialization.
Sunbird Theme Tutorial - Archive of obsolete content
sunbird also contains communicator,
global, help and mozapps components.
...in your <tt>chrome.manifest</tt> file, add lines like this: skin communicator testing chrome/communicator/ skin
global testing chrome/
global/ skin help testing chrome/help/ skin mozapps testing chrome/mozapps/ replacing <tt>testing</tt> with your theme's one-word internal name as before.
contents.rdf - Archive of obsolete content
e:author="" chrome:authorurl="" chrome:description="" 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:description> <!-- version information.
...--> <rdf:description chrome:skinversion="1.5" about="urn:mozilla:skin:my_theme:browser"/> <rdf:description chrome:skinversion="1.5" about="urn:mozilla:skin:my_theme:communicator"/> <rdf:description chrome:skinversion="1.5" about="urn:mozilla:skin:my_theme:
global"/> <rdf:description chrome:skinversion="1.5" about="urn:mozilla:skin:my_theme:mozapps"/> <rdf:description chrome:skinversion="1.5" about="urn:mozilla:skin:my_theme:help"/> </rdf:rdf> ...
Theme changes in Firefox 3.5 - Archive of obsolete content
global/checkbox.css,
global/radio.css since bug 394892, radio buttons and checkboxes no longer have a minimum size on mac os x.
... supporting 3.5 features video/audio player: controlbar has to be styled (chrome://
global/skin/media/videocontrols.css) shadow effect for disabled text using text-shadow.
Scratchpad - Archive of obsolete content
any variables you declare outside of a function will be added to the
global object for that tab.
...once you've done this, the environment menu has a browser option; once that's selected, your scope is the entire browser rather than just the page content, as you will see from examining some
globals: window /* [object chromewindow] */ gbrowser /* [object xulelement] */ the scratchpad execution context is set to browser when a snippet file has // -sp-context: browser on the first line.
ECMAScript 2016 to ES.Next support in Mozilla - Archive of obsolete content
.prototype.padend() (firefox 48) object.getownpropertydescriptors() (firefox 50) async functions async function (firefox 52) async function expression (firefox 52) asyncfunction (firefox 52) await (firefox 52) trailing commas in function parameter lists (firefox 52) ecmascript 2018 spread in object literals and rest parameters (firefox 55) for await...of (firefox 57)
global_objects/sharedarraybuffer (firefox 57, with flags)
global_objects/promise/finally (firefox 58)
global_objects/regexp/dotall (not yet implemented; in other browsers) regexp lookbehind assertions (not yet implemented; in other browsers) regexp unicode property escapes (not yet implemented; in other browsers) regexp named capture groups (not yet implemented; in other browsers) ecmascript 2019...
... additions to the arraybuffer object arraybuffer.transfer() (spec) new typedobject objects based on typed objects draft, and exposed via a
global typedobject object, e.g.
arguments.caller - Archive of obsolete content
function 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 function, but doesn't work anymore.
... function whocalled() { if (arguments.caller == null) console.log('i was called from the
global scope.'); else console.log(arguments.caller + ' called me!'); } specifications not part of any standard.
LiveConnect - Archive of obsolete content
older versions of gecko included special support for the java<->javascript bridge (such as the java and packages
global objects), but as of mozilla 16 (firefox 16 / thunderbird 16 / seamonkey 2.13) liveconnect functionality is provided solely by the oracle's java plugin.
... removal of java and packages
global objects in mozilla 16 see bug 748343 for the rationale and workarounds.
background-size - Archive of obsolete content
konqueror's
global market share is 0.05%, (< 5% of linux users).
...but we need facts, rather than assumptions.] btw, some time ago i'v listed opera in the property template table and removed netscape because netscape is gecko based and opera has a
global market share of > 2% (> 40% in some european countries).
Popup Window Controls - Archive of obsolete content
mozilla will attempt to suppress all calls to window.open() which occur in the following circumstances:
global script which is executed as the document is loading script executed as part of a onload event handler script executed in settimeout() or setinterval() what popup windows are not suppressed?
... detecting suppressed popups windows if a user has popup controls enabled for your site, any attempt to call window.open in
global script, in an onload handler or in settimeout() or setinterval() will return null rather than a reference to the opened window.
RDF in Mozilla FAQ - Archive of obsolete content
some examples of datasources that exist today are "browser bookmarks", "browser
global history", "imap mail accounts", "nntp news servers", and "rdf/xml files".
...statements about the same rdf resource can then be intermingled: for example, the "last visit date" of a particular website comes from the "browser
global history" datasource, and the "shortcut keyword" that you can type to reach that website comes from the "browser bookmarks" datasource.
Windows Media in Netscape - Archive of obsolete content
in netscape 7.1, plugins and activex controls are not exposed to the
global namespace, but rather as properties of the document object.
... accessing properties and controls from the document object works well with ie also, and thus, in order to deploy cross-platform code, avoiding syntax that makes use of
global namespace is important.
Anatomy of a video game - Game development
the first statement creates a function as a
global variable called main().
... building a better main loop in javascript there are two obvious issues with our previous main loop: main() pollutes the window object (where all
global variables are stored) and the example code did not leave us with a way to stop the loop unless the whole tab is closed or refreshed.
Building up a basic demo with the PlayCanvas engine - Game development
add the following code to the bottom of your second <script> element: var app = new pc.application(canvas); app.start(); the pc
global object contains all the playcanvas functions available in the engine.
...the first type is a directional light placed somewhere on the scene while the scond one reflects the light from the first type, so it looks more natural; this can be set
globally.
HTML basics - Learn web development
for example, if we wanted to turn the part of the following paragraph fragment into a list <p>at mozilla, we’re a
global community of technologists, thinkers, and builders working together ...
... </p> we could modify the markup to this <p>at mozilla, we’re a
global community of</p> <ul> <li>technologists</li> <li>thinkers</li> <li>builders</li> </ul> <p>working together ...
Object prototypes - Learn web development
you'll see other examples of prototype chain inheritance all over javascript — try looking for the methods and properties defined on the prototype of the string, date, number, and array
global objects, for example.
...that's because this will be referencing the
global scope in this case, not the function scope.
Beginning our React todo list - Learn web development
-size: 100%; line-height: 1.15; margin: 0; } button, input { overflow: visible; } input[type="text"] { border-radius: 0; } body { width: 100%; max-width: 68rem; margin: 0 auto; font: 1.6rem/1.25 arial, sans-serif; background-color: #f5f5f5; color: #4d4d4d; } @media screen and (min-width: 620px) { body { font-size: 1.9rem; line-height: 1.31579; } } /*end resets*/ /*
global styles */ .form-group > input[type="text"] { display: inline-block; margin-top: 0.4rem; } .btn { padding: 0.8rem 1rem 0.7rem; border: 0.2rem solid #4d4d4d; cursor: pointer; text-transform: capitalize; } .btn.toggle-btn { border-width: 1px; border-color: #d3d3d3; } .btn.toggle-btn[aria-pressed="true"] { text-decoration: underline; border-color: #4d4d4d; } .btn__danger { color...
...1px, 1px, 1px, 1px); white-space: nowrap; } [class*="stack"] > * { margin-top: 0; margin-bottom: 0; } .stack-small > * + * { margin-top: 1.25rem; } .stack-large > * + * { margin-top: 2.5rem; } @media screen and (min-width: 550px) { .stack-small > * + * { margin-top: 1.4rem; } .stack-large > * + * { margin-top: 2.8rem; } } .stack-exception { margin-top: 1.2rem; } /* end
global styles */ .todoapp { background: #fff; margin: 2rem 0 4rem 0; padding: 1rem; position: relative; box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 2.5rem 5rem 0 rgba(0, 0, 0, 0.1); } @media screen and (min-width: 550px) { .todoapp { padding: 4rem; } } .todoapp > * { max-width: 50rem; margin-left: auto; margin-right: auto; } .todoapp > form { max-width: 100%; } .todoapp > h1 ...
Deployment and next steps - Learn web development
note: you can
globally install vercel with npm i -g vercel so you don't have to use npx to run it.
...to do this, we just remove the leading slashes (/) from the /
global.css, /build/bundle.css, and /build/bundle.js urls, like this: <title>svelte to-do list</title> <link rel='icon' type='image/png' href='favicon.png'> <link rel='stylesheet' href='
global.css'> <link rel='stylesheet' href='build/bundle.css'> <script defer src='build/bundle.js'></script> do this now.
Getting started with Vue - Learn web development
to install the cli, run the following command in your terminal: npm install --
global @vue/cli or if you'd prefer to use yarn: yarn
global add @vue/cli once installed, to initialize a new project you can then open a terminal in the directory you want to create the project in, and run vue create <project-name>.
...this file is often where you register
global components or additional vue libraries.
Implementing feature detection - Learn web development
let's recap and look at the example we touched on in our handling common javascript problems — the geolocation api (which exposes available location data for the device the web browser is running on) has the main entry point for its use, a geolocation property available on the
global navigator object.
...it does this by making the
global modernizr object available to the page it is applied to, which contains results of the feature detects as true/false properties.
Handling common JavaScript problems - Learn web development
we only have three — showheroes, block, and window (the
global scope).
...as a quick example, the geolocation api (which exposes available location data for the device the web browser is running on) has a main entry point for its use — a geolocation property available on the
global navigator object.
Browser chrome tests
writing browser chrome tests browser chrome tests are snippets of javascript code that run in the browser window's
global scope.
...the eventutils helper functions are available on the eventutils object defined in the
global scope.
Chrome registration
to indicate that a package is platform-specific, add the "platform" modifier to the "content" line after the path, for example: content
global-platform jar:toolkit.jar!/toolkit/content/
global-platform/ platform once that is specified in your manifest you then ensure that under the directory
global-platform are subdirectories win (windows/os2), mac (os9/osx), or unix (everything else).
... overlay chrome://navigator/content/pageinfo.xul chrome://pippki/content/pageinfooverlay.xul application={92650c4d-4b8e-4d2a-b7eb-24ecf4f6b63a} overlay chrome://communicator/content/pref/preftree.xul chrome://pippki/content/prefoverlay.xul content pippki jar:pippki.jar!/content/pippki/ locale pippki en-us jar:en-us.jar!/locale/pippki/ content
global-platform jar:toolkit.jar!/content/
global-platform/ platform skin
global classic/1.0 jar:classic.jar!/skin/classic/
global/ override chrome://
global/content/neterror.xhtml jar:embedder.jar!/
global/content/neterror.xhtml content inspector jar:inspector.jar!/content/inspector/ instructions supported in bootstrapped add-ons the following instructions are su...
Experimental features in Firefox
nightly 53 yes developer edition 53 no beta 53 no release 53 no preference name dom.dialog_element.enabled
global attribute: inputmode our implementation of the inputmode
global attribute has been updated as per the whatwg spec (bug 1509527), but we still need to make other changes too, like making it available on contenteditable content.
... nightly 73 no developer edition 73 no beta 73 no release 73 no preference name dom.webgpu.enabled html dom api
global event: beforeinput the
global beforeinput event is sent to an <input> element—or any element whose contenteditable attribute is enabled—immediately before the element's value changes.
ChromeWorker
it works exactly like a standard worker, except that it has access to js-ctypes via a
global ctypes object available in the
global scope of the worker.
... see also using web workers using workers in javascript code modules worker sharedworker web workers specification worker
globalscope github :: chromeworker - a fully working demo addon using js-ctypes from a chrome worker.
CustomizableUI.jsm
the lifetime of your widget should be identical to the lifetime of the add-on - it's process-
global, so if you call createwidget on bootstrap's "startup" and destroywidget on bootstrap's "shutdown", that's enough.
... list-style-image: url("chrome://branding/content/icon32.png");'; //a 32px x 32px icon for when in toolbar css += ' }'; css += '}'; var cssenc = encodeuricomponent(css); var newuriparam = { aurl: 'data:text/css,' + cssenc, aorigincharset: null, abaseuri: null } var cssuri = services.io.newuri(newuriparam.aurl, newuriparam.aorigincharset, newuriparam.abaseuri); //store this in a
global var so you can call it when removing the widget sss.loadandregistersheet(cssuri, sss.author_sheet); /**************/ // when you want to remove this widget run this code: // sss.unregistersheet(cssuri, sss.author_sheet); //remove the style sheet we applied // customizableui.destroywidget('id_of_my_widget_within_customizableui_and_dom'); //remove the widget /**************/ createwidget - custom...
JNI.jsm
a note about firefox for android, this jsm file is already
globally imported and is available from the privileged window scope as window.jni.
... there also exists a jenv variable in the window scope, so if you need to run jni from the
global scope, use a different variable name then jenv.
OS.File.Info
instances of os.file.info may be obtained by: calling
global method os.file.stat() either from the main thread or from a worker thread; calling instance method stat() of os.file either from the main thread or from a worker thread.
...
global object os.file.info methods object tomsg(in os.file.info value) os.file.tomsg convert an instance of os.file.info to a form that can be serialized and transmitted between threads or processes.
Using JavaScript code modules
modules can also be used to create
global javascript singletons that previously required using javascript xpcom objects.
... scope 1: components.utils.import("resource://app/my_module.jsm"); bar = "foo"; alert(bar); // displays "foo" scope 2: components.utils.import("resource://app/my_module.jsm"); alert(bar); // displays "[object object]" the main effect of the by-value copy is that
global variables of simple types won't be shared across scopes.
Localizing with Mozilla Translator
|-- browser-region | `-- region.properties `-- ab-cd |-- alerts | `-- notificationnames.properties |-- autoconfig | `-- autoconfig.properties |-- cookie | |-- cookieacceptdialog.dtd | `-- cookieacceptdialog.properties |--
global | |-- about.dtd | |-- apppicker.dtd .
...al repositories the locale part looks like this: toolkit |-- locales | |-- en-us | | |-- chrome | | | |-- alerts | | | | `-- notificationnames.properties | | | |-- autoconfig | | | | `-- autoconfig.properties | | | |-- cookie | | | | |-- cookieacceptdialog.dtd | | | | `-- cookieacceptdialog.properties | | | |--
global | | | | |-- about.dtd | | | | |-- apppicker.dtd .
JS::PerfMeasurement
jsobject* js::registerperfmeasurement(jscontext* cx, jsobject*
global) you shouldn't need to use this function, but we mention it for completeness.
... it initializes the javascript wrapper interface for this api and pokes the constructor function into the
global object you provide.
Leak-hunting strategies and tips
because (1) large graphs of leaked objects tend to include some objects pointed to by
global variables that confuse gc-based leak detectors, which can make leaks look smaller (as in bug 99180) or hide them completely and (2) large graphs of leaked objects tend to hide smaller ones, it's much better to go after the large graphs of leaks first.
...seeing a leaked
globalwindowimpl, nsxulpd
globalobject, nsxbldoc
globalobject, or nsxpcwrappedjs is a sign that there could be significant numbers of js objects leaked.) for example, start with bringing up the mail window and closing the window without doing anything.
Memory reporting
size_t mystring::sizeofexcludingthis(mozilla::mallocsizeof amallocsizeof) const { return amallocsizeof(mbuffer); } size_t mystring::sizeofincludingthis(mozilla::mallocsizeof amallocsizeof) const { return amallocsizeof(this) + sizeofexcludingthis(amallocsizeof); } (note that sizeofexcludingthis and sizeofincludingthis aren't overrides of methods on a
global base class that is common to all reporters.
... and here's how you'd write a memory reporter if there was a single
global mystring object.
PR_SetConcurrency
virtual processors are actually
global threads, each of which is designed to support an arbitrary number oflocal threads.
... since
global threads are scheduled by the host operating system, this model is particularly applicable to multiprocessor architectures, where true parallelism is possible.
Threads
creating, joining, and identifying threads controlling thread priorities interrupting and yielding setting
global thread concurrency getting a thread's scope creating, joining, and identifying threads pr_createthread creates a new thread.
... setting
global thread concurrency pr_setconcurrency sets the number of
global threads used by nspr to create local threads.
Index
new certificate authorities enter the
global pki market, and in order to get started with their business, they might make deals with established cas and receive so-called cross-signing-certificates.
...the metadata file contains one entry per line, each with three fields: field #1: file specification, or + if you want to specify
global metadata (that is, metadata about the jar archive itself or all entries in the archive) field #2: the name of the data you are specifying; for example: install-script field #3: data corresponding to the name in field #2 for example, the -i option uses the equivalent of this line: + install-script: script.js this example associates a ...
NSS_3.12_release_notes.html
cu_parsecommandline bug 161326: need api to convert dotted oid format to/from octet representation bug 376737: cert_importcerts routinely sets valid_peer or valid_ca override trust flags bug 390381: libpkix rejects cert chain when root ca cert has no basic constraints bug 391183: rename libpkix error string number type to pkix error number types bug 397122: nss 3.12 alpha treats a key3.db with no
global salt as having no password bug 405966: unknown signature oid 1.3.14.3.2.29 causes sec_error_bad_signature, 3.11 ignores it bug 413010: cert_comparerdn may return a false match bug 417664: false positive crl revocation test on ppc/ppc64 nss_enable_pkix_verify=1 bug 404526: glibc detected free(): invalid pointer bug 300929: certificate policy extensions not supported bug 129303: nss needs to expose...
...rsa performance on amd64 bug 352439: reference leaks in modutil bug 369144: certutil needs option to generate subjectkeyid extension bug 391771: pk11_config_name and pk11_config_strings leaked on shutdown bug 401194: crash in lg_findobjects on win64 bug 405652: in the tls clienthello message the gmt_unix_time is incorrect bug 424917: performance regression with studio 12 compiler bug 391770: ocsp_
global.monitor is leaked on shutdown bug 403687: move pkix functions to certvfypkix.c, turn off ev_test_hack bug 428105: cert_setocsptimeout is not defined in any public header file bug 213359: enhance pk12util to extract certs from p12 file bug 329067: nss encodes cert distinguished name attributes with wrong string type bug 339906: sec_pkcs12_install_bags passes uninitialized variables to functions bu...
NSS 3.16.3 release notes
notable changes in nss 3.16.3 the following 1024-bit ca certificates were removed cn = entrust.net secure server certification authority sha1 fingerprint: 99:a6:9b:e6:1a:fe:88:6b:4d:2b:82:00:7c:b8:54:fc:31:7e:15:39 cn = gte cybertrust
global root sha1 fingerprint: 97:81:79:50:d8:1c:96:70:cc:34:d8:09:cf:79:44:31:36:7e:f4:74 ou = valicert class 1 policy validation authority sha1 fingerprint: e5:df:74:3c:b6:01:c4:9b:98:43:dc:ab:8c:e8:6a:81:10:9f:e4:8e ou = valicert class 2 policy validation authority sha1 fingerprint: 31:7a:2a:d0:7f:2b:33:5e:f5:a1:c3:4e:4b:57:e8:b7:d8:f1:fc:a6 ...
... ca 沃通根证书 sha1 fingerprint: 16:32:47:8d:89:f9:21:3a:92:00:85:63:f5:a4:a7:d3:12:40:8a:d6 cn = digicert assured id root g2 sha1 fingerprint: a1:4b:48:d9:43:ee:0a:0e:40:90:4f:3c:e0:a4:c0:91:93:51:5d:3f cn = digicert assured id root g3 sha1 fingerprint: f5:17:a2:4f:9a:48:c6:c9:f8:a2:00:26:9f:dc:0f:48:2c:ab:30:89 cn = digicert
global root g2 sha1 fingerprint: df:3c:24:f9:bf:d6:66:76:1b:26:80:73:fe:06:d1:cc:8d:4f:82:a4 cn = digicert
global root g3 sha1 fingerprint: 7e:04:de:89:6a:3e:66:6d:00:e6:87:d3:3f:fa:d9:3b:e8:3d:34:9e cn = digicert trusted root g4 sha1 fingerprint: dd:fb:16:cd:49:31:c9:73:a2:03:7d:3f:c8:3a:4d:7d:77:5d:05:e4 cn = quovadis root ca 1 g3 ...
NSS 3.17.3 release notes
the following ca certificates were removed cn = gte cybertrust
global root sha1 fingerprint: 97:81:79:50:d8:1c:96:70:cc:34:d8:09:cf:79:44:31:36:7e:f4:74 cn = thawte server ca sha1 fingerprint: 23:e5:94:94:51:95:f2:41:48:03:b4:d5:64:d2:a3:a3:f5:d8:8b:8c cn = thawte premium server ca sha1 fingerprint: 62:7f:8d:78:27:65:63:99:d2:7d:7f:90:44:c9:fe:b3:f3:3e:fa:9a cn = america online root certification aut...
...uthority sha1 fingerprint: af:e5:d2:44:a8:d1:19:42:30:ff:47:9f:e2:f8:97:bb:cd:7a:8c:b4 cn = usertrust rsa certification authority sha1 fingerprint: 2b:8f:1b:57:33:0d:bb:a2:d0:7a:6c:51:f7:0e:e9:0d:da:b9:ad:8e cn = usertrust ecc certification authority sha1 fingerprint: d1:cb:ca:5d:b2:d5:2a:7f:69:3b:67:4d:e5:f0:5a:1d:0c:95:7d:f0 cn =
globalsign ecc root ca - r4 sha1 fingerprint: 69:69:56:2e:40:80:f4:24:a1:e7:19:9f:14:ba:f3:ee:58:ab:6a:bb cn =
globalsign ecc root ca - r5 sha1 fingerprint: 1f:24:c6:30:cd:a4:18:ef:20:69:ff:ad:4f:dd:5f:46:3a:1b:69:aa the version number of the updated root ca list has been set to 2.2 bugs fixed in nss 3.17.3 this bugzilla query returns all the bugs fixed ...
NSS 3.54 release notes
73e0 the following ca certificates were removed: bug 1645199 - addtrust class 1 ca root sha-256 fingerprint: 8c7209279ac04e275e16d07fd3b775e80154b5968046e31f52dd25766324e9a7 bug 1645199 - addtrust external ca root sha-256 fingerprint: 687fa451382278fff0c8b11f8d43d576671c6eb2bceab413fb83d965d06d2ff2 bug 1641718 - luxtrust
global root 2 sha-256 fingerprint: 54455f7129c20b1447c418f997168f24c58fc5023bf5da5be2eb6e1dd8902ed5 bug 1639987 - staat der nederlanden root ca - g2 sha-256 fingerprint: 668c83947da63b724bece1743c31a0e6aed0db8ec5b31be377bb784f91b6716f bug 1618402 - symantec class 2 public primary certification authority - g4 sha-256 fingerprint: fe863d0822fe7a2353fa4...
... bug 1641718 - remove "luxtrust
global root 2" root certificate.
Python binding for NSS
the python
global interpreter lock (gil) is released prior to calling nss/nspr c functions and reaquired after the nss/nspr c function returns.
...also, any "
global" values which are set in python-nss are actually thread-local.
sslintro.html
initialization initialization includes setting up configuration files, setting
global defaults, and setting up callback functions.
...sets the
global callback function to obtain passwords for pkcs #11 modules.
Rhino Examples
multithreaded script execution dynamicscopes.java is a program that creates a single
global scope object and then shares it across multiple threads.
... sharing the
global scope allows both information to be shared across threads, and amortizes the cost of context.initstandardobjects by only performing that expensive operation once.
Rhino JavaScript compiler
each
global function in the source file is made a method of the generated class, overriding any methods in the base class by the same name.
...each
global function in the source file is made a method of the generated class, implementing any methods in the interface by the same name.
Performance Hints
for example, you could rewrite function sum(a) { result = 0; for (i=0; i < a.length; i++) result += a[i]; return result; } as function sum(a) { var result = 0; for (var i=0; i < a.length; i++) result += a[i]; return result; } this is not equivalent code because the second version does not modify
global variables result and i.
... however, if you don't intend for any other function to access these variables, then storing them
globally is probably wrong anyway (what if you called another function that had a loop like the one in sum!).
Scripting Java
for example: js> javastring.match(/a.*/) ava javaimporter constructor javaimporter is a new
global constructor that allows to omit explicit package names when scripting java: var swinggui = javaimporter(packages.javax.swing, packages.javax.swing.event, packages.javax.swing.border, java.awt.event, java.awt.point, java.awt.rectangle, ...
...the class provides additional importpackage() and importclass()
global functions for scripts but their extensive usage has tendency to pollute the
global name space with names of java classes and prevents loaded classes from garbage collection.
SpiderMonkey compartments
this allows the garbage collecting of individual compartments, in addition to
global collection.
... see also js_newcompartmentand
globalobject() js_entercrosscompartmentcall() js_leavecrosscompartmentcall() jsautocompartment invariants spidermonkey internals: thread safety andreas gal blog post bobby holley blog post sfink/contexts_and_compartments xpconnect security membranes ...
Hacking Tips
break 'mozilla::dom::canvasrenderingcontext2d::drawwindow(ns
globalwindow&, double, double, double, double, nsastring_internal const&, unsigned int, mozilla::errorresult&)' cont break 'presshell::renderdocument(nsrect const&, unsigned int, unsigned int, gfxcontext*)' set print object on set $x = <your x value> set $y = <your y value> print &((cairo_image_surface_t*)athebescontext->mdt.mrawptr->msurface).data[$y * ((cairo_image_surface_t*)athebescontext->mdt...
... example output might look as follows: 0x1234abcd b
global object ========== # zone 0x56789123 # compartment http://gmail.com [in zone 0x56789123] # compartment http://gmail.com/iframe [in zone 0x56789123] # arena allockind=3 size=64 0x1234abcd b object > 0x1234abcd b prop1 > 0xabcd1234 w prop2 0xabcd1234 w object > 0xdeadbeef b prop3 # arena allockind=5 size=72 0xdeadbeef w object > 0xabcd1234 w prop4 the output is textual.
Property cache
↓ o ----> o ----> o ----> o ^
global ^x' (----> indicates proto as before; downward arrows ↓ indicate the parent relation) method guarantee — if at time t0 the object x has shape s; and x has an own property p that is a method property (transparently joined function); and at time t1 an object y has shape s; and no shape-regenerating gc occurred; then at time t1 y's own property p is the same method property.
... does the
global object always have a unique shape?
JSClass.call
var custom = new specialcustomobject(); custom(); // the jsclass.call hook receives the
global object as the obj parameter.
... new custom(); // the jsclass.construct hook receives the
global object as the obj parameter.
JSSecurityCallbacks.contentSecurityPolicyAllows
description check whether runtime code generation is allowed for the current
global.
... jssecuritycallbacks.contentsecuritypolicyallows is invoked once per
global object upon the first attempt to evaluate js code from a string (either through eval or the function constructor).
JS_CloneFunctionObject
this can be helpful if funobj is an extant function that you wish to use as if it were enclosed by a newly-created
global object.
...js_clonefunctionobject takes care to choose a prototype that shares a
global object with the given parent whenever possible.
JS_ExecuteScript
in the simplest cases, this should just be the embedding's
global object.
...scopechain must not include the
global object on it; that's implicit.
JS_IsBuiltinEvalFunction
this article covers features introduced in spidermonkey 17 return whether the given function is the
global eval function.
... description js_isbuiltinevalfunction returns whether the given function is the
global eval function.
JS_IsBuiltinFunctionConstructor
this article covers features introduced in spidermonkey 17 return whether the given function is the
global function constructor.
... description js::iscallable returns whether the given function is the
global function constructor.
Profiling SpiderMonkey
make -c my-obj-dir/js/src other ways to profile for linux, there are
global jprof functions available.
...when we have js scriptable profiling options available for all tier 1 platforms, we'll look at adding
global start/stop profiling functions.
Web Replay
accesses on atomic variables/fields are recorded in a
global data stream, as if they were all protected by a
global lock.
... similarly, atomic accesses which were included in the recording will occur in the same order during replay, as if they were all protected by a single
global lock.
Places utilities for JavaScript
global objects there are a few
global objects and constants defined in utils.js.
... bookmarks nsinavbookmarksservice history nsinavhistoryservice
globalhistory nsibrowserhistory livemarks nsilivemarkservice annotations nsiannotationservice favicons nsifaviconservice microsummaries nsimicrosummaryservice tagging nsitaggingservice rdf nsirdfservice ptm nsiplacestransactionsservice clipboard nsiclipboard urifixup nsiurifixup special places these are essentially references to the id's of special folders within places.
XPCOM changes in Gecko 2.0
changed category names the xpcom category manager is used to register certain
global helper objects.
...therefore the following categories have changed: old name new name javascript
global constructor javascript-
global-constructor javascript
global constructor prototype alias javascript-
global-constructor-prototype-alias javascript
global property javascript-
global-property javascript
global privileged property javascript-
global-privileged-property javascript
global static nameset javascript-
global-static-nameset javascript
global dynamic nameset javascript-
global-dynamic-nameset javascript dom class javascript-dom-class javascript dom interface javascript-dom-interface xslt extension functions xslt-extension-functions but why?
Finishing the Component
for example, take a look at the nsiservicemanager: /** * the nsiservicemanager manager interface provides a means to obtain *
global services in an application.
... * * users of the service manager must first obtain a pointer to the *
global service manager by calling ns_getservicemanager.
Components.utils.createObjectIn
this function is made available as a
global in sandboxes which have the wantexporthelpers option set in the sandbox() constructor.
... to create an object with a specified name, use defineas: var foo = components.utils.createobjectin(mywindow, {defineas: "foo"}); now the target compartment's window has a new
global object named foo.
Components.utils
get
globalforobject() returns the
global object with which a given object is associated (through its prototype chain at birth, for example).
... import
globalproperties() specify a list of constructors to import into the scope.
Components object
or for constructor of components exception constructor for xpconnect exceptions id constructor for xpcom nsids interfaces array of interfaces by interface name interfacesbyid array of interfaces by iid issuccesscode function to determine if a given result code is a success code lastresult result code of most recent xpconnect call manager the
global xpcom component manager results array of known result codes by name returncode pending result for current call stack current javascript call stack utils provides access to several useful features utils.atline provides access to the value of the atline property in the javascript environment.
... utils.get
globalforobject returns the
global object with which a given object is associated (through its prototype chain at birth, for example).
nsMemory
these routines allow easy access to xpcom's
global nsimemory implementation without having to go through the service manager to get it.
... get
globalmemoryservice the get
globalmemoryservice function returns a reference to xpcom's
global nsimemory object.
IJSDebugger
method overview [implicit_jscontext] void addclass(); methods addclass() defines the
global debugger constructor.
... on return, the debugger object has been added to the
global context.
GetKeyBindings
« nsiaccessible page summary this method provides array of localized string of
global keyboard accelerator for the given action index supported by accessible.
...return values returns array of localized string of
global keyboard accelerator.
nsIAccessible
layout oriented methods nsiaccessible.getchildatpoint() to get child accessible from point nsiaccessible.getaccessibletoleft(), nsiaccessible.getaccessibletoright(), nsiaccessible.getaccessibleabove() or nsiaccessible.getaccessiblebelow() to get left, right, top or below placed accessible methods getkeybindings provides array of localized string of
global keyboard accelerator for the given action index supported by accessible.
... defaultkeybinding provides localized string of
global keyboard accelerator for default action, such as ctrl+o for open file.
nsIClipboard
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 supportsselectionclipboard(); boolean supportsfindclipboard(); constants most clipboard operations in firefox use k
globalclipboard, which is the one also used by the typical control-c/control-v keyboard shortcuts.
... k
globalclipboard 1 clipboard for
global use.
nsIComponentRegistrar
this value is intended as a human-readable name for the class and need not be
globally unique.
...this value is intended as a human-readable name for the class and need not be
globally unique.
nsIContentPrefObserver
this value is null if the preference was
global, applying to all web sites.
...this value is null if the preference is
global, applying to all web sites.
nsIMessageListenerManager
1.0 66 introduced gecko 17 inherits from: nsisupports last changed in gecko 41 (firefox 41 / thunderbird 41 / seamonkey 2.38) implemented by: @mozilla.org/
globalmessagemanager;1.
... to access this service, use: var
globalmm = components.classes["@mozilla.org/
globalmessagemanager;1"] .getservice(components.interfaces.nsimessagelistenermanager); method overview void addmessagelistener(in astring messagename, in nsimessagelistener listener, [optional] in boolean listenwhenclosed) void removemessagelistener(in astring messagename, in nsimessagelistener listener); void addweakmessagelistener(in astring messagename, in nsimessagelistener listener); void removeweakmessagelistener(in astring messagename, in nsimessagelistener listener); methods addmessagelistener() re...
nsINavBookmarksService
this method retrieves a
globally unique identifier for an item, meant to be used in sync scenarios.
... this method sets a
globally unique identifier.
nsIScriptableIO
for your convenience, this api is published through a
global io object.
... last changed in gecko 1.9 (firefox 3) inherits from: nsisupports a scriptable io object can be used in an extension or chrome code by referring to the
global io object.
nsIServiceManager
xpcom/components/nsiservicemanager.idlscriptable this interface provides a means to obtain
global services in an application.
... users of the service manager must first obtain a pointer to the
global service manager by calling ns_getservicemanager.
nsIStringBundleService
chrome://
global/locale/
global.properties return value a string bundle corresponding to the properties file.
...(automatically called for the memory-pressure and chrome-flush-caches
global observer topics.) void flushbundles(); parameters none.
nsIUUIDGenerator
xpcom/base/nsiuuidgenerator.idlscriptable this interface can be used to generate an id that can be considered
globally unique, often referred to as a uuid or guid.
... methods generateuuid() obtains a new uuid using appropriate platform-specific methods to obtain a nsid that can be considered to be
globally unique.
nsIXPCScriptable
last changed in gecko 1.9.1 (firefox 3.5 / thunderbird 3.0 / seamonkey 2.0) inherits from: nsisupports method overview void precreate(in nsisupports nativeobj, in jscontextptr cx, in jsobjectptr
globalobj, out jsobjectptr parentobj); void create(in nsixpconnectwrappednative wrapper, in jscontextptr cx, in jsobjectptr obj); void postcreate(in nsixpconnectwrappednative wrapper, in jscontextptr cx, in jsobjectptr obj); prbool addproperty(in nsixpconnectwrappednative wrapper, in jscontextptr cx, in jsobjectptr obj, in jsval id, in jsvalptr vp); prbool delproperty(in nsixpconnectwrappednativ...
... methods precreate() void precreate( in nsisupports nativeobj, in jscontextptr cx, in jsobjectptr
globalobj, out jsobjectptr parentobj ); parameters nativeobj cx
globalobj parentobj create() void create( in nsixpconnectwrappednative wrapper, in jscontextptr cx, in jsobjectptr obj ); parameters wrapper cx obj postcreate() void postcreate( in nsixpconnectwrappednative wrapper, in jscontextptr cx, in jsobjectptr obj ); parameters wrapper cx obj ...
Using IndexedDB in chrome
(see using indexeddb for an overview.) however, the apis can also be accessed from system-privileged javascript using the components.utils.import
globalproperties() function: components.utils.import
globalproperties(["indexeddb"]); // from here on, it's like using indexeddb from content var req = indexeddb.open("my-database"); // ...
... if you are creating a sandbox, and want indexeddb to be available in it, use the want
globalproperties option in the sandbox constructor: var options = { "want
globalproperties": ["indexeddb"] } var principal = cc["@mozilla.org/systemprincipal;1"].createinstance(ci.nsiprincipal); var sandbox = components.utils.sandbox(principal, options); // the sandbox will have access to indexeddb var sandboxscript = 'var req = indexeddb.open("my-database");'; components.utils.evalinsandbox(sandboxscript, sandbox); before firefox 33, you would access indexeddb from chrome code using the initwindowless method of the nsiindexeddatabasemanager service.
Creating a gloda message query
this content covers features introduced in thunderbird 3 this page describes how to programmatically create a message query using gloda, thunderbird's
global database.
... the max number of messages which are returned is governed by a preference: "mailnews.database.
global.search.msg.limit" although you can deal with the messages as they show up via the listener, the list of messages in the collection is available in collection.items.
Mail event system
notifypropertychanged then broadcasts this event to the mail session: mailsession->onintpropertychanged(this, ktotalmessagesatom, 4, 5); the mail session rebroadcasts this information to each of the
global listeners that has been registered with it.
... for each
global listener, it calls onintpropertychanged: listener->onintpropertychanged(folder, ktotalmessagesatom, 4, 5); the folder datasource is a listener on all folders and receives this notification.
Using Objective-C from js-ctypes
*/ // apple docs :: working with blocks - https://developer.apple.com/library/ios/documentation/cocoa/conceptual/programmingwithobjectivec/workingwithblocks/workingwithblocks.html var _nsconcrete
globalblock = ctypes.open(ctypes.libraryname('objc')).declare('_nsconcrete
globalblock', ctypes.voidptr_t); // //github.com/realityripple/uxp/blob/master/js/src/ctypes/library.cpp?offset=0#271 /** * the "block descriptor" is a static singleton struct.
...uct is seen here in docs: http://clang.llvm.org/docs/block-abi-apple.html var block_literal_1 = ctypes.structtype('block_literal_1', [ { isa: ctypes.voidptr_t }, { flags: ctypes.int32_t }, { reserved: ctypes.int32_t }, { invoke: ctypes.voidptr_t }, { descriptor: block_descriptor_1.ptr } ]); var block_const = { block_has_copy_dispose: 1 << 25, block_has_ctor: 1 << 26, block_is_
global: 1 << 28, block_has_stret: 1 << 29, block_has_signature: 1 << 30 }; // based on work from here: https://github.com/trueinteractions/tint2/blob/f6ce18b16ada165b98b07869314dad1d7bee0252/modules/bridge/core.js#l370-l394 var bl = block_literal_1(); // set the class of the instance bl.isa = _nsconcrete
globalblock; //
global flags bl.flags = block_const.block_has_stret; bl.reserved = 0; ...
Debugger.Frame - Firefox Developer Tools
"
global": a frame running
global code (javascript that is neither of the above).
...when non-null, this is an object, allocated in the same
global as the debugger, with array.prototype on its prototype chain, a non-writable length property, and properties whose names are array indices.
Tutorial: Set a breakpoint - Firefox Developer Tools
adddebuggerto
global(this); // create a 'debugger' instance.
... since both the scratchpad’s
global object and the debuggee window are now gone, the debugger instances will be garbage collected, since they can no longer have any visible effect on firefox’s behavior.
Migrating from Firebug - Firefox Developer Tools
this feature can
globally be enabled via the break on mutate button, or individually for each element and for different types of changes like attribute changes, content changes or element removal.
... examine variables the watch side panel in firebug displays the window object (the
global scope) by default.
Network request details - Firefox Developer Tools
ns; preload" }, { "name": "vary", "value": "accept-encoding,treat-as-untrusted,x-forwarded-proto,cookie,authorization,x-seven" }, { "name": "via", "value": "1.1 varnish (varnish/5.1), 1.1 varnish (varnish/5.1)" }, { "name": "x-analytics", "value": "ns=-1;special=badtitle;wmf-last-access=11-jun-2019;wmf-last-access-
global=11-jun-2019;https=1" }, { "name": "x-cache", "value": "cp1075 pass, cp1075 pass" }, { "name": "x-cache-status", "value": "pass" }, { "name": "x-client-ip", "value": "204.210.158.136" }, { "name": "x-content-type-options", "value": "nosniff" }, { "name": "x-firefox-sp...
... "name": "accept", "value": "*/*" }, { "name": "accept-encoding", "value": "gzip, deflate, br" }, { "name": "accept-language", "value": "en-us,en;q=0.5" }, { "name": "connection", "value": "keep-alive" }, { "name": "cookie", "value": "wmf-last-access=11-jun-2019; wmf-last-access-
global=11-jun-2019; mwphp7seed=5c9; geoip=us:ny:port_jervis:41.38:-74.67:v4" }, { "name": "dnt", "value": "1" }, { "name": "host", "value": "en.wikipedia.org" }, { "name": "referer", "value": "https://www.wikipedia.org/" }, { "name": "te", "value": "trailers" }, { "name": "...
Console messages - Firefox Developer Tools
the context menu for network messages includes a few extra items in addition the
globally-available ones: copy link location acts as you would expect, copying the url into the clipboard open in network panel switches context to the network tab, selects the request and shows you the details resend request sends the network request again.
... store as
global variable creates a
global variable (with a name like temp0, temp1, etc.) whose value is the selected object.
The JavaScript input interpreter - Firefox Developer Tools
there are three ways to select an iframe using cd(): you can pass the iframe dom element: var frame = document.getelementbyid("frame1"); cd(frame); you can pass a css selector that matches the iframe: cd("#frame1"); you can pass the iframe's
global window object: var frame = document.getelementbyid("frame1"); cd(frame.contentwindow); to switch the context back to the top-level window, call cd() with no arguments: cd(); for example, suppose we have a document that embeds an iframe: <!doctype html> <html> <head> <meta charset="utf-8"> </head> <body> <iframe id="frame1" src="static/frame/my-frame1.html"></iframe> </body> ...
...</html> the iframe defines a new function: <!doctype html> <html> <head> <meta charset="utf-8"> <script> function whoareyou() { return "i'm frame1"; } </script> </head> <body> </body> </html> you can switch context to the iframe like this: cd("#frame1"); now you'll see that the
global window's document is the iframe: and you can call the function defined in the iframe: helper commands the javascript command line provided by the web console offers a few built-in helper functions that make certain tasks easier.
AbstractRange - Web APIs
second, in order to support the mutability of the dom tree as much as possible, you need a way to represent positions relative to nodes in the tree, rather than simply
global positions within the entire document.
...rather than having to negotiate the dom figuring out what your
global offset refers to, the user agent (browser) can instead go directly to the node indicated by the starting position and start from there, working its way forward until it reaches the given offset into the ending node.
AudioWorkletProcessor - Web APIs
it lives in the audioworklet
globalscope and runs on the web audio rendering thread.
... processing audio an example algorithm of creating a custom audio processing mechanism is: create a separate file; in the file: extend the audioworkletprocessor class (see "deriving classes" section) and supply your own process() method in it; register the processor using audioworklet
globalscope.registerprocessor() method; load the file using addmodule() method on your audio context's audioworklet property; create an audioworkletnode based on the processor.
Beacon API - Web APIs
global context the beacon api's navigator.sendbeacon() method is used to send a beacon of data to the server in the
global browsing context.
... worker context the beacon api's navigator.sendbeacon() method is used to send a beacon of data to the server from the worker
global scope.
Cache - Web APIs
in the code example, caches is a property of the serviceworker
globalscope.
...this is an implementation of the windoworworker
globalscope mixin.
Basic animations - Web APIs
w image(); var earth = new image(); function init() { sun.src = 'https://mdn.mozillademos.org/files/1456/canvas_sun.png'; moon.src = 'https://mdn.mozillademos.org/files/1443/canvas_moon.png'; earth.src = 'https://mdn.mozillademos.org/files/1429/canvas_earth.png'; window.requestanimationframe(draw); } function draw() { var ctx = document.getelementbyid('canvas').getcontext('2d'); ctx.
globalcompositeoperation = 'destination-over'; ctx.clearrect(0, 0, 300, 300); // clear canvas ctx.fillstyle = 'rgba(0, 0, 0, 0.4)'; ctx.strokestyle = 'rgba(0, 153, 255, 0.4)'; ctx.save(); ctx.translate(150, 150); // earth var time = new date(); ctx.rotate(((2 * math.pi) / 60) * time.getseconds() + ((2 * math.pi) / 60000) * time.getmilliseconds()); ctx.translate(105, 0); ctx.fillrec...
... var x = math.random() * (innerwidth - 2 * r) + r; var y = math.random() * (innerheight - 2 * r) + r; var t = new ob(innerwidth / 2,innerheight / 2,5,"red",math.random() * 200 + 20,2); a.push(t); } //cn.style.backgroundcolor = "#700bc8"; c.linewidth = "2"; c.
globalalpha = 0.5; resize(); anim() } window.onresize = function() { resize(); } function resize() { cn.height = innerheight; cn.width = innerwidth; for (var i = 0; i < 101; i++) { var r = 30; var x = math.random() * (in...
Transformations - Web APIs
the current values of the following attributes: strokestyle, fillstyle,
globalalpha, linewidth, linecap, linejoin, miterlimit, linedashoffset, shadowoffsetx, shadowoffsety, shadowblur, shadowcolor,
globalcompositeoperation, font, textalign, textbaseline, direction, imagesmoothingenabled.
...); ctx.fillrect(0, 0, 150, 150); // draw a rectangle with default settings ctx.save(); // save the default state ctx.fillstyle = '#09f'; // make changes to the settings ctx.fillrect(15, 15, 120, 120); // draw a rectangle with new settings ctx.save(); // save the current state ctx.fillstyle = '#fff'; // make changes to the settings ctx.
globalalpha = 0.5; ctx.fillrect(30, 30, 90, 90); // draw a rectangle with new settings ctx.restore(); // restore previous state ctx.fillrect(45, 45, 60, 60); // draw a rectangle with restored settings ctx.restore(); // restore original state ctx.fillrect(60, 60, 30, 30); // draw a rectangle with restored settings } <canvas id="canvas" width="150" height="1...
console - Web APIs
the console object can be accessed from any
global object.
... window on browsing scopes and worker
globalscope as specific variants in workers via the property console.
Content Index API - Web APIs
serviceworker
globalscope.oncontentdelete an event handler fired whenever a contentdelete event occurs.
...they are accessible from the worker
globalscope.self property: // service worker script self.registration.index.add(item); self.registration.index.delete(item.id); const contentindexitems = self.registration.index.getall(); contentdelete event when an item is removed from the user agent interface, a contentdelete event is received by the service worker.
DOMHighResTimeStamp - Web APIs
it's calculated like this: if the script's
global object is a window, the time origin is determined as follows: if the current document is the first one loaded in the window, the time origin is the time at which the browser context was created.
... if the script's
global object is a worker
globalscope (that is, the script is running as a web worker), the time origin is the moment at which the worker was created.
Document: transitioncancel event - Web APIs
see
globaleventhandlers.ontransitioncancel for more information.
... bubbles yes cancelable no interface transitionevent event handler property
globaleventhandlers.ontransitioncancel the original target for this event is the element that had the transition applied.
EventTarget.addEventListener() - Web APIs
this is shown in the following example: <script> function logid() { console.log(this.id); } </script> <table id="my_table" onclick="logid();"><!-- when called, `this` will refer to the
global object --> ...
... </table> the value of this within logid() is a reference to the
global object window (or undefined in the case of strict mode.
FetchEvent.request - Web APIs
the serviceworker
globalscope.onfetch event handler listens for the fetch event.
... the code also handles exceptions thrown from the serviceworker
globalscope.fetch operation.
FetchEvent.respondWith() - Web APIs
for security reasons, there are a few
global rules: you can only return response objects of type "opaque" if the fetchevent.request object's mode is "no-cors".
... exceptions exception notes networkerror a network error is triggered on certain combinations of fetchevent.request.mode and response.type values, as hinted at in the "
global rules" listed above.
File and Directory Entries API - Web APIs
there are also two
global functions (which are not part of the specification at this time and are implemented only by google chrome).
... there are also two
global functions (which are not part of the specification at this time and are implemented only by google chrome).
HTMLElement: transitioncancel event - Web APIs
see
globaleventhandlers.ontransitioncancel for more information.
... bubbles yes cancelable no interface transitionevent event handler property
globaleventhandlers.ontransitioncancel examples this code gets an element that has a transition defined and adds a listener to the transitioncancel event: const transition = document.queryselector('.transition'); transition.addeventlistener('transitioncancel', () => { console.log('transition canceled'); }); the same, but using the ontransitioncancel property instead of addeventlistener(): const transition = document.queryselector('.transition'); transition.ontransitioncancel = () => { console.log('transition canceled'); }; live example in the following example, we have a simple <div> element, styled with a transition that includes a delay: <div class="...
Using microtasks in JavaScript with queueMicrotask() - Web APIs
in order to allow microtasks to be used by third-party libraries, frameworks, and polyfills, the queuemicrotask() method is exposed on the window and worker interfaces through the windoworworker
globalscope mixin.
... simply pass the javascript function to call while the context is handling microtasks into the queuemicrotask() method, which is exposed on the
global context as defined by either the window or worker interface, depending on the current execution context.
The HTML DOM API - Web APIs
htmlelement also adds all the
global event handlers.
... broadcastchannel dedicatedworker
globalscope messagechannel messageevent messageport sharedworker sharedworker
globalscope worker worker
globalscope workerlocation workernavigator websocket interfaces these interfaces, defined by the html specification, are used by the websockets_api.
File drag and drop - Web APIs
define the drop zone the target element of the drop event needs an ondrop
global event handler.
...to add this handler, you need to include a ondragover
global event handler: <div id="drop_zone" ondrop="drophandler(event);" ondragover="dragoverhandler(event);"> <p>drag one or more files to this drop zone ...</p> </div> lastly, an application may want to style the drop target element to visually indicate the element is a drop zone.
HTML Drag and Drop API - Web APIs
each drag event type has an associated
global event handler: event on event handler fires when… drag ondrag …a dragged item (element or text selection) is dragged.
... identify what is draggable making an element draggable requires adding the draggable attribute and the ondragstart
global event handler, as shown in the following code sample: <script> function dragstart_handler(ev) { // add the target element's id to the data transfer object ev.datatransfer.setdata("text/plain", ev.target.id); } window.addeventlistener('domcontentloaded', () => { // get the element by id const element = document.getelementbyid("p1"); // add the ondragstart event listener...
InstallEvent - Web APIs
the parameter passed into the oninstall handler, the installevent interface represents an install action that is dispatched on the serviceworker
globalscope of a serviceworker.
... examples this code snippet is from the service worker prefetch sample (see prefetch running live.) the code calls extendableevent.waituntil() in serviceworker
globalscope.oninstall and delays treating the serviceworkerregistration.installing worker as installed until the passed promise resolves successfully.
LocalFileSystemSync - Web APIs
the
global methods in the window object requestfilesystemsync() and resolvelocalfilesystemsyncurl() methods are exposed to the worker's
global scope.
...you access a sandboxed file system by requesting a localfilesystemsync object from within a web worker using this
global method, window.requestfilesystemsync().
MessageEvent - Web APIs
cross-worker/document messaging (see the above two entries, but also worker.postmessage(), worker.onmessage, serviceworker
globalscope.onmessage, etc.) broadcast channels (see broadcastchannel.postmessage()) and broadcastchannel.onmessage).
... myworker.port.postmessage([first.value,second.value]); console.log('message posted to worker'); } second.onchange = function() { myworker.port.postmessage([first.value,second.value]); console.log('message posted to worker'); } myworker.port.onmessage = function(e) { result1.textcontent = e.data; console.log('message received from worker'); } inside the worker we use the sharedworker
globalscope.onconnect handler to connect to the same port discussed above.
MouseEvent - Web APIs
mouseevent.screenx read only the x coordinate of the mouse pointer in
global (screen) coordinates.
... mouseevent.screeny read only the y coordinate of the mouse pointer in
global (screen) coordinates.
NotificationEvent - Web APIs
the parameter passed into the onnotificationclick handler, the notificationevent interface represents a notification click event that is dispatched on the serviceworker
globalscope of a serviceworker.
... note: this interface is specified in the notifications api, but accessed through serviceworker
globalscope.
Multi-touch interaction - Web APIs
<style> div { margin: 0em; padding: 2em; } #target1 { background: white; border: 1px solid black; } #target2 { background: white; border: 1px solid black; } #target3 { background: white; border: 1px solid black; } </style>
global state to support multi-touch interaction, preserving a pointer's event state during various event phases is required.
... cache management these functions manage the
global event caches evcache1, evcache2 and evcache3.
Request - Web APIs
e request() constructor (for an image file in the same directory as the script), then return some property values of the request: const request = new request('https://www.mozilla.org/favicon.ico'); const url = request.url; const method = request.method; const credentials = request.credentials; you could then fetch this request by passing the request object in as a parameter to a windoworworker
globalscope.fetch() call, for example: fetch(request) .then(response => response.blob()) .then(blob => { image.src = url.createobjecturl(blob); }); in the following snippet, we create a new request using the request() constructor with some initial data and body content for an api request which need a body payload: const request = new request('https://example.com', {method: 'post', body: '{"...
... you could then fetch this api request by passing the request object in as a parameter to a windoworworker
globalscope.fetch() call, for example and get the response: fetch(request) .then(response => { if (response.status === 200) { return response.json(); } else { throw new error('something went wrong on api server!'); } }) .then(response => { console.debug(response); // ...
SharedWorker() - Web APIs
name optional a domstring specifying an identifying name for the sharedworker
globalscope representing the scope of the worker, which is mainly useful for debugging purposes.
... name: a domstring specifying an identifying name for the sharedworker
globalscope representing the scope of the worker, which is mainly useful for debugging purposes.
SharedWorker - Web APIs
they implement an interface different than dedicated workers and have a different
global scope, sharedworker
globalscope.
... myworker.port.postmessage([first.value,second.value]); console.log('message posted to worker'); } second.onchange = function() { myworker.port.postmessage([first.value,second.value]); console.log('message posted to worker'); } myworker.port.onmessage = function(e) { result1.textcontent = e.data; console.log('message received from worker'); } inside the worker we use the sharedworker
globalscope.onconnect handler to connect to the same port discussed above.
Starting up and shutting down a WebXR session - Web APIs
there is a
global xrsystem object available for use by your document through the the navigator property xr, which returns the xrsystem object if suitable xr hardware is available for your use given the hardware available and your document's environment.
...the
global variable webxrpolyfill is used only to retain a reference to the polyfill in order to ensure that it remains available until you no longer need it.
Example and tutorial: Simple synth keyboard - Web APIs
let audiocontext = new (window.audiocontext || window.webkitaudiocontext)(); let osclist = []; let mastergainnode = null; audiocontext is set to reference the
global audiocontext object (or webkitaudiocontext if necessary).
... let notefreq = null; let customwaveform = null; let sineterms = null; let cosineterms = null; finally,
global variables that will be used when constructing waveforms are created: notefreq will be an array of arrays; each array represents one octave, each of which contains one entry for each note in that octave.
Web Audio API - Web APIs
audioworkletprocessor the audioworkletprocessor interface represents audio processing code running in a audioworklet
globalscope that generates, processes, or analyses audio directly, and can pass messages to the corresponding audioworkletnode.
... audioworklet
globalscope the audioworklet
globalscope interface is a worklet
globalscope-derived object representing a worker context in which an audio processing script is run; it is designed to enable the generation, processing, and analysis of audio data directly using javascript in a worklet thread rather than on the main thread.
Web Authentication API - Web APIs
authenticator returns data to browser - the new public key, a
globally unique credential id, and other attestation data are returned to the browser where they become the attestationobject.
... browser creates final data, application sends response to server - the create() promise resolves to an publickeycredential, which has a publickeycredential.rawid that is the
globally unique credential id along with a response that is the authenticatorattestationresponse containing the authenticatorresponse.clientdatajson and authenticatorattestationresponse.attestationobject.
Window.controllers - Web APIs
by default, a window's controller contains the code that supports the
global window commands.
... chrome code can add controllers (to be used in conjunction with the godocommand and goupdatecommand functions in
globaloverlay.js).
Window.self - Web APIs
by using self, you can refer to the
global scope in a way that will work not only in a window context (self will resolve to window.self) but also in a worker context (self will then resolve to worker
globalscope.self).
... if (window.parent.frames[0] != window.self) { // this window is not the first frame in the list } furthermore, when executing in the active document of a browsing context, window is a reference to the current
global object and thus all of the following are equivalent: var w1 = window; var w2 = self; var w3 = window.window; var w4 = window.self; // w1, w2, w3, w4 all strictly equal, but only w2 will function in workers specifications specification status comment html living standardthe definition of 'window.self' in that specification.
Window: transitioncancel event - Web APIs
see
globaleventhandlers.ontransitioncancel for more information.
... bubbles yes cancelable no interface transitionevent event handler property
globaleventhandlers.ontransitioncancel the original target for this event is the element that had the transition applied.
WindowEventHandlers.onhashchange - Web APIs
living standard html 5.1the definition of '
globaleventhandlers' in that specification.
... recommendation html5the definition of '
globaleventhandlers' in that specification.
WindowEventHandlers.onunload - Web APIs
living standard html 5.1the definition of '
globaleventhandlers' in that specification.
... recommendation html5the definition of '
globaleventhandlers' in that specification.
Worker.onmessage - Web APIs
from the dedicatedworker
globalscope.postmessage method).
...n script: onmessage = function(e) { console.log('message received from main script'); var workerresult = 'result: ' + (e.data[0] * e.data[1]); console.log('posting message back to main script'); postmessage(workerresult); } notice how in the main script, onmessage has to be called on myworker, whereas inside the worker script you just need onmessage because the worker is effectively the
global scope (dedicatedworker
globalscope).
Worker.prototype.postMessage() - Web APIs
the worker can send back information to the thread that spawned it using the dedicatedworker
globalscope.postmessage method.
... syntax worker.postmessage(message, [transfer]); parameters message the object to deliver to the worker; this will be in the data field in the event delivered to the dedicatedworker
globalscope.onmessage handler.
ARIA Screen Reader Implementors Guide - Accessibility
interpreting wai-aria live region markup live changes are hints: in general live region markup is provided by the author as hints, and the assistive technology may allow for
global, site or even region-specific settings, as well as heuristics to help with live changes on pages that have no wai-aria hints.
... allow
global settings to turn off the presentation of live changes, present all live changes, use markup, or be "smart" (use heuristics) details for processing via platform accessibility apis we hope browser manufacturers will work to provide consistent implementations.
Specificity - CSS: Cascading Style Sheets
#myid#myid span { color: yellow; } .myclass.myclass span { color: orange; } how !important can be used: a) overriding inline styles your
global css file that sets visual aspects of your site
globally may be overwritten by inline styles defined directly on individual elements.
... in this case, you could set certain styles in your
global css file as !important, thus overriding inline styles set directly on elements.
Using CSS custom properties (variables) - CSS: Cascading Style Sheets
for example, the same color might be used in hundreds of different places, requiring
global search and replace if that color needs to change.
...a common best practice is to define custom properties on the :root pseudo-class, so that it can be applied
globally across your html document: :root { --main-bg-color: brown; } however, this doesn't always have to be the case: you maybe have a good reason for limiting the scope of your custom properties.
mix-blend-mode - CSS: Cascading Style Sheets
al; 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: exclusion; mix-blend-mode: hue; mix-blend-mode: saturation; 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.
...x"></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> <div class="note">blending
globally (blend with the background)</div> <div class="row"> <div class="cell"> normal <div class="container normal"> <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"></el...
text-underline-position - CSS: Cascading Style Sheets
syntax /* single keyword */ text-underline-position: auto; text-underline-position: under; text-underline-position: left; text-underline-position: right; /* multiple keywords */ text-underline-position: under left; text-underline-position: right under; /*
global values */ text-underline-position: inherit; text-underline-position: initial; text-underline-position: unset; syntax values auto the user agent uses its own algorithm to place the line at or under the alphabetic baseline.
... the live example looks like this: setting text-underline-position
globally because the text-underline-position property inherits and is not reset by the text-decoration shorthand property, it may be appropriate to set its value at a
global level.
regexp:match() - EXSLT
the character flags are: g
global match the submatches from every match in the string are returned.
...if the match isn't a
global one, the first match element has the value of the portion of the string matched by the entire regular expression.
Overview of events and handlers - Developer guides
some notable events are: note: this list of events will need work to make relevant; that work is awaiting some
global reorganization work on the documents.
... the
global object window emits an event called 'load' when the page has finished rendering, meaning that all resources have been downloaded and acted upon, so that the scripts have been run and the images displayed, the
global object window emits an event called 'resize' when the height or the width of the browser window is changed by a user, the dom object document representing the html document emits an event called 'domcontentloaded' when the document has finished loading, the dom node objects such as div or button emit an event called 'click' when the user presses the mouse button while the mouse pointer is on top...
<area> - HTML: Hypertext Markup Language
implicit aria role link when href attribute is present, otherwise no corresponding role permitted aria roles no role permitted dom interface htmlareaelement attributes this element's attributes include the
global attributes.
...this attribute is
global in html5.
<dl>: The Description List element - HTML: Hypertext Markup Language
implicit aria role no corresponding role permitted aria roles group, list, none, presentation dom interface htmldlistelement attributes this element only includes the
global attributes.
...this can be useful when using microdata, or when
global attributes apply to a whole group, or for styling purposes.
<input type="button"> - HTML: Hypertext Markup Language
to add a keyboard shortcut to a button — just as you would with any <input> for which it makes sense — you use the accesskey
global attribute.
... disabling and enabling a button to disable a button, simply specify the disabled
global attribute on it, like so: <input type="button" value="disable me" disabled> you can enable and disable buttons at run time by simply setting disabled to true or false.
<input type="reset"> - HTML: Hypertext Markup Language
adding a reset keyboard shortcut to add a keyboard shortcut to a submit button — just as you would with any <input> for which it makes sense — you use the accesskey
global attribute.
... disabling and enabling a reset button to disable a reset button, simply specify the disabled
global attribute on it, like so: <input type="reset" value="disabled" disabled> you can enable and disable buttons at run time by simply setting disabled to true or false; in javascript this looks like btn.disabled = true or btn.disabled = false.
<input type="submit"> - HTML: Hypertext Markup Language
to add a keyboard shortcut to a submit button — just as you would with any <input> for which it makes sense — you use the accesskey
global attribute.
... disabling and enabling a submit button to disable a submit button, simply specify the disabled
global attribute on it, like so: <input type="submit" value="disabled" disabled> you can enable and disable buttons at run time by simply setting disabled to true or false; in javascript this looks like btn.disabled = true or btn.disabled = false.
<input type="text"> - HTML: Hypertext Markup Language
spellcheck spellcheck is a
global attribute which is used to indicate whether or not to enable spell checking for an element.
... note: this has been standardized as the
global attribute enterkeyhint, but is not yet widely implemented.
<input type="url"> - HTML: Hypertext Markup Language
spellcheck spellcheck is a
global attribute which is used to indicate whether or not to enable spell checking for an element.
... note: this has been standardized as the
global attribute enterkeyhint, but is not yet widely implemented.
<time> - HTML: Hypertext Markup Language
implicit aria role no corresponding role permitted aria roles any dom interface htmltimeelement attributes like all other html elements, this element supports the
global attributes.
... valid datetime values a valid year string 2011 a valid month string 2011-11 a valid date string 2011-11-18 a valid yearless date string 11-18 a valid week string 2011-w47 a valid time string 14:54 14:54:39 14:54:39.929 a valid local date and time string 2011-11-18t14:54:39.929 2011-11-18 14:54:39.929 a valid
global date and time string 2011-11-18t14:54:39.929z 2011-11-18t14:54:39.929-0400 2011-11-18t14:54:39.929-04:00 2011-11-18 14:54:39.929z 2011-11-18 14:54:39.929-0400 2011-11-18 14:54:39.929-04:00 a valid duration string pt4h18m3s examples simple example html <p>the concert starts at <time datetime="2018-07-07t20:00:00">20:00</time>.</p> output datetime example html <p>the concert too...
class - HTML: Hypertext Markup Language
the class
global attribute is a space-separated list of the case-sensitive classes of the element.
...from html 4.01 specification, class is now a true
global attribute.
dir - HTML: Hypertext Markup Language
the dir
global attribute is an enumerated attribute that indicates the directionality of the element's text.
... recommendation snapshot of html living standard, from html 4.01 specification it added the auto value, and is now a true
global attribute.
lang - HTML: Hypertext Markup Language
the lang
global attribute helps define the language of an element: the language that non-editable elements are written in, or the language that the editable elements should be written in by the user.
...it also is a true
global attribute.
style - HTML: Hypertext Markup Language
the style
global attribute contains css styling declarations to be applied to the element.
...from html 4.01 specification, it is now a true
global attribute.
tabindex - HTML: Hypertext Markup Language
the tabindex
global attribute indicates that its element can be focused, and where it participates in sequential keyboard navigation (usually with the tab key, hence the name).
...from html 4.01 specification, the attribute is now supported on all elements (
global attributes).
title - HTML: Hypertext Markup Language
the title
global attribute contains text representing advisory information related to the element it belongs to.
...from html 4.01 specification, it is now a true
global attribute.
HTML reference - HTML: Hypertext Markup Language
this html reference describes all elements and attributes of html, including
global attributes that apply to all elements.
...
global attributes
global attributes are attributes common to all html elements; they can be used on all elements, though they may have no effect on some elements.
Content Security Policy (CSP) - HTTP
as an ultimate form of protection, sites that want to never allow scripts to be executed can opt to
globally disallow script execution.
... status-code the http status code of the resource on which the
global object was instantiated.
Details of the object model - JavaScript
using the instanceof function defined above, these expressions are true: instanceof(chris, engineer) instanceof(chris, workerbee) instanceof(chris, employee) instanceof(chris, object) but the following expression is false: instanceof(chris, salesperson)
global information in constructors when you create constructors, you need to be careful if you set
global information in the constructor.
...you could use the following definition for employee: var idcounter = 1; function employee(name, dept) { this.name = name || ''; this.dept = dept || 'general'; this.id = idcounter++; } with this definition, when you create a new employee, the constructor assigns it the next id in sequence and then increments the
global id counter.
Using Promises - JavaScript
promise rejection events whenever a promise is rejected, one of two events is sent to the
global scope (generally, this is either the window or, if being used in a web worker, it's the worker or other worker-based interface).
...these handlers are
global per context, so all errors will go to the same event handlers, regardless of source.
JavaScript technologies overview - JavaScript
among other things, ecmascript defines: language syntax (parsing rules, keywords, control flow, object literal initialization, ...) error handling mechanisms (throw, try...catch, ability to create user-defined error types) types (boolean, number, string, function, object, ...) the
global object.
... in a browser, this
global object is the window object, but ecmascript only defines the apis not specific to browsers, e.g.
Classes - JavaScript
static eat() { return this; } } let obj = new animal(); obj.speak(); // the animal object let speak = obj.speak; speak(); // undefined animal.eat() // class animal let eat = animal.eat; eat(); // undefined if we rewrite the above using traditional function-based syntax in non–strict mode, then this method calls is automatically bound to the initial this value, which by default is the
global object.
... function animal() { } animal.prototype.speak = function() { return this; } animal.eat = function() { return this; } let obj = new animal(); let speak = obj.speak; speak(); //
global object (in non–strict mode) let eat = animal.eat; eat(); //
global object (in non-strict mode) instance properties instance properties must be defined inside of class methods: class rectangle { constructor(height, width) { this.height = height; this.width = width; } } static (class-side) data properties and prototype data properties must be defined outside of the classbody declaration: rectangle.staticwidth = 20; rectangle.prototype.prototypewidth = 25; field declarations public and private field declar...
Error.prototype.stack - JavaScript
the stack string proceeds from the most recent calls to earlier ones, leading back to the original
global scope call.
... description each step will be separated by a newline, with the first part of the line being the function name (if not a call from the
global scope), then by an at (@) sign, the file location (except when the function is the error constructor as the error is being thrown), a colon, and, if there is a file location, the line number.
Function.prototype.apply() - JavaScript
note that this may not be the actual value seen by the method: if the method is a function in non-strict mode code, null and undefined will be replaced with the
global object, and primitive values will be boxed.
... in the following example we will create a
global function method called construct, which will enable you to use an array-like object with a constructor instead of an arguments list.
Function.prototype.bind() - JavaScript
creating a bound function from the function, using the original object, neatly solves this problem: this.x = 9; // 'this' refers to
global 'window' object here in a browser const module = { x: 81, getx: function() { return this.x; } }; module.getx(); // returns 81 const retrievex = module.getx; retrievex(); // returns 9; the function gets invoked at the
global scope // create a new function with 'this' bound to module // new programmers might confuse the //
global variable 'x' with module's property 'x' const boundgetx =...
... = addarguments.bind(null, 37); const list2 = leadingthirtysevenlist(); // [37] const list3 = leadingthirtysevenlist(1, 2, 3); // [37, 1, 2, 3] const result2 = addthirtyseven(5); // 37 + 5 = 42 const result3 = addthirtyseven(5, 10); // 37 + 5 = 42 // (the second argument is ignored) with settimeout() by default within window.settimeout(), the this keyword will be set to the window (or
global) object.
Function.prototype.call() - JavaScript
if the method is a function in non-strict mode, null and undefined will be replaced with the
global object, and primitive values will be converted to objects.
...if the first argument is not passed, the value of this is bound to the
global object.
Number.isFinite() - JavaScript
description in comparison to the
global isfinite() function, this method doesn't forcibly convert the parameter to a number.
...umber.isfinite = function(value) { return typeof value === 'number' && isfinite(value); } examples using isfinite number.isfinite(infinity); // false number.isfinite(nan); // false number.isfinite(-infinity); // false number.isfinite(0); // true number.isfinite(2e64); // true number.isfinite('0'); // false, would've been true with //
global isfinite('0') number.isfinite(null); // false, would've been true with //
global isfinite(null) specifications specification ecmascript (ecma-262)the definition of 'number.isinteger' in that specification.
Number.parseFloat() - JavaScript
polyfill if (number.parsefloat === undefined) { number.parsefloat = parsefloat; } examples number.parsefloat vs parsefloat this method has the same functionality as the
global parsefloat() function: number.parsefloat === parsefloat; // true this method is also part of ecmascript 2015.
... (its purpose is modularization of
globals.) see parsefloat() for more detail and examples.
Number - JavaScript
number.parsefloat(string) this is the same as the
global parsefloat() function.
... number.parseint(string, [radix]) this is the same as the
global parseint() function.
instanceof - JavaScript
this means that they have different built-ins (different
global object, different constructors, etc.).
...unlike standard javascript
globals, the test obj instanceof xpcominterface works as expected, even if obj is from a different scope.
Web video codec guide - Web media technologies
images from wikipedia there are two general types of motion compensation:
global motion compensation and block motion compensation.
...
global motion compensation generally adjusts for camera movements such as tracking, dolly movements, panning, tilting, rolling, and up and down movements.
Codecs used by WebRTC - Web media technologies
other audio codecs codec name browser compatibility g.722 chrome, firefox, safari ilbc[1] chrome, safari isac[2] chrome, safari [1] internet low bitrate codec (ilbc) is an open-source narrow-band codec developed by
global ip solutions and now google, designed specifically for streaming voice audio.
... [2] the internet speech audio codec (isac) is another codec developed by
global ip solutions and now owned by google, which has open-sourced it.
SVG Event Attributes - SVG: Scalable Vector Graphics
the
global event attributes are available on all svg elements.
... attributes animation event attributes onbegin, onend, onrepeat document event attributes onabort, onerror, onresize, onscroll, onunload document element event attributes oncopy, oncut, onpaste
global event attributes oncancel, oncanplay, oncanplaythrough, onchange, onclick, onclose, oncuechange, ondblclick, ondrag, ondragend, ondragenter, ondragexit, ondragleave, ondragover, ondragstart, ondrop, ondurationchange, onemptied, onended, onerror, onfocus, oninput, oninvalid, onkeydown, onkeypress, onkeyup, onload, onloadeddata, onloadedmetadata, onloadstart, onmousedown, onmouseenter, onmouseleave, onmousemove, onmouseout, onmouseover, onmouseup, onmousewheel, onpause, on...
<metadata> - SVG: Scalable Vector Graphics
usage context categoriesdescriptive elementpermitted contentany elements or character data attributes
global attributes core attributes
global event attributes specific attributes none dom interface this element implements the svgmetadataelement interface.
... candidate recommendation allowed
global event attributes on the element.
Web Components
extensions for creating custom built-in elements the is
global html attribute: allows you to specify that a standard html element should behave like a registered custom built-in element.
... the slot
global html attribute assigns a slot in a shadow dom shadow tree to an element.
<xsl:variable> - XSLT: Extensible Stylesheet Language Transformations
xslt/xpath reference: xslt elements, exslt functions, xpath functions, xpath axes the <xsl:variable> element declares a
global or local variable in a stylesheet and gives it a value.
...if it occurs as a top-level element, the variable is
global in scope, and can be accessed throughout the document.
WebAssembly
webassembly.
global() a webassembly.
global object represents a
global variable instance, accessible from both javascript and importable/exportable across one or more webassembly.module instances.
... 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.0
globalchrome full support 69edge no support nofirefox full support 62ie no support noopera no support nosafari full support 13.1webview ...
Communicating With Other Scripts - Archive of obsolete content
from firefox 30 this sharing requires an extra step: the content script needs to explicitly clone the message payload into the page script's scope using the
global cloneinto() function: var messenger = document.getelementbyid("message"); messenger.addeventlistener("click", sendcustomevent, false); function sendcustomevent() { var greeting = {"greeting" : "hello world"}; var cloned = cloneinto(greeting, document.defaultview); var event = document.createevent('customevent'); event.initcustomevent("addon-message", true, true, cloned); document.docu...
port - Archive of obsolete content
each end of the conversation has access to a port: the content script via the
global self property, and the main add-on code via a worker object associated with the sdk module you've used to attach the content script, such as page-mod or page-worker.
Communicating using "postMessage" - Archive of obsolete content
handling message events in the content script to send a message from a content script, you use the postmessage function of the
global self object: self.postmessage(contentscriptmessage); this takes a single parameter, the message payload, which may be any json-serializable value.
base64 - Archive of obsolete content
var base64 = require("sdk/base64"); var encodeddata = base64.encode("hello, world"); var decodeddata = base64.decode(encodeddata);
globals functions encode(data, charset) creates a base-64 encoded ascii string from a string of binary data.
clipboard - Archive of obsolete content
var clipboard = require("sdk/clipboard"); clipboard.set("data:image/png;base64,ivborw0kggoaaaansuheugaaacaaaaagcaya" + "aabzenr0aaaasuleqvryhe3o0qkaiawd0eyqe3q993aq3cbsukpygfsnty" + "n5ugbqpk0baadgp0brdwxwlweaaaaagpsa3rzdaaaaahgpcgrpganzq2fg" + "bwrr9aaaaabjru5erkjggg%3d%3d", "text");
globals functions set(data, datatype) replace the contents of the user's clipboard with the provided data.
l10n - Archive of obsolete content
globals functions get(identifier, count, placeholder1...n) this function takes a string parameter which it uses as an identifier to look up and return a localized string in the locale currently set for firefox.
private-browsing - Archive of obsolete content
to do this with the sdk, you can listen to the system event named "last-pb-context-exited": var events = require("sdk/system/events"); function listener(event) { console.log("last private window closed"); } events.on("last-pb-context-exited", listener);
globals functions isprivate(object) function to check whether the given object is private.
dev/panel - Archive of obsolete content
connecting volcan.js provides a
global connect() function that takes a messageport connected to the debugger server, and returns a promise which is fulfilled with an object representing the root actor: volcan.connect(debuggee).then(gotroot); function gotroot(root) { // can use root actor here } actors actors in the remote debugging protocol are volcan.js objects.
event/core - Archive of obsolete content
all listeners of the specific type can be easily removed (only two argument must be passed): off(target, 'message'); also, removing all registered listeners is possible (only one argument must be passed): off(target);
globals functions on(target, type, listener) registers an event listener that is called every time events of the specified type is emitted on the given event target.
frame/utils - Archive of obsolete content
execution of scripts may easily be enabled: let { open } = require('sdk/window/utils'); let { create } = require('sdk/frame/utils'); let window = open('data:text/html,top'); let frame = create(window.document, { uri: 'data:text/html,<script>console.log("running");</script>', allowjavascript: true }); }
globals functions create(document, options) creates a xul browser element in a privileged document.
io/byte-streams - Archive of obsolete content
ename)) { var bytereader = fileio.open(filename, "rb"); if (!bytereader.closed) { data = bytereader.read(); bytereader.close(); } } return data; } function writebinarydatatofile(data, filename) { var fileio = require("sdk/io/file"); var bytewriter = fileio.open(filename, "wb"); if (!bytewriter.closed) { bytewriter.write(data); bytewriter.close(); } }
globals constructors bytereader(inputstream) creates a binary input stream that reads bytes from a backing stream.
io/text-streams - Archive of obsolete content
xists(filename)) { var textreader = fileio.open(filename, "r"); if (!textreader.closed) { text = textreader.read(); textreader.close(); } } return text; } function writetexttofile(text, filename) { var fileio = require("sdk/io/file"); var textwriter = fileio.open(filename, "w"); if (!textwriter.closed) { textwriter.write(text); textwriter.close(); } }
globals constructors textreader(inputstream, charset) creates a buffered input stream that reads text from a backing stream using a given text encoding.
loader/sandbox - Archive of obsolete content
load(scope, 'resource://path/to/my/script.js'); load(scope, 'file:///path/to/script.js'); load(scope, 'data:,var a = 5;');
globals functions sandbox(source) make a new sandbox that inherits principals from source.
places/bookmarks - Archive of obsolete content
the second query's properties // are and'd together, so results that are in the platform's unsorted // bookmarks folder, and are also tagged with 'mozilla', get returned // as well in this query });
globals constructors bookmark(options) creates an unsaved bookmark instance.
places/history - Archive of obsolete content
h 'javascript' { query: "javascript", from: lastweek }], // we want to order chronologically by visit date { sort: "date" } ).on("end", function (results) { // results is an array of objects containing visit data, // sorted by visit date, with all entries from more than a week ago // that contain 'ruby', *in addition to* entries from this last week // that contain 'javascript' });
globals functions search(queries, options) queries can be performed on history entries by passing in one or more query options.
platform/xpcom - Archive of obsolete content
function to register factories and services: xpcom.register(factory); you can use the corresponding unregister() function to unregister them, whether or not you have disabled automatic unregistration: xpcom.unregister(factory); you can find out whether a factory or service has been registered by using the isregistered() function: if (xpcom.isregistered(factory)) xpcom.unregister(factory);
globals constructors factory(options) parameters options : object required options: name type component constructor constructor for the component this factory creates.
remote/parent - Archive of obsolete content
{ // `this` is bound to the frame the event came from let frame = this; frame.port.emit("pageshow"); }, true); // main.js const { frames, remoterequire } = require("sdk/remote/parent"); remoterequire("./remote.js", module); // the first argument is the frame the message came from frames.port.on("pageshow", (frame) => { console.log(frame.frameelement.currenturi.host + ": pageshow"); });
globals functions remoterequire(id, module = null) loads a module in any existing and future child processes.
system/events - Archive of obsolete content
var events = require("sdk/system/events"); var { ci } = require("chrome"); function listener(event) { var channel = event.subject.queryinterface(ci.nsihttpchannel); channel.setrequestheader("user-agent", "mybrowser/1.0", false); } events.on("http-on-modify-request", listener);
globals functions emit(type, event) send an event to observer service parameters type : string the event type.
system/unload - Archive of obsolete content
globals functions ensure(object, name) calling ensure() on an object does two things: it replaces a destructor method with a wrapper method that will never call the destructor more than once.
test/assert - Archive of obsolete content
for example: var a = 1; exports["test value of a"] = function(assert) { assert.ok(a == 1, "test that a is 1"); } require("sdk/test").run(exports);
globals constructors assert(logger) create a new assert object.
test/utils - Archive of obsolete content
require('sdk/test/utils'); let { search } = require('sdk/places/bookmarks'); exports.testcountbookmarks = function (assert, done) { search().on('end', function (results) { assert.equal(results, 0, 'should be no bookmarks'); done(); }); }; before(exports, function (name, assert, done) { removeallbookmarksasync(function () { done(); }); }); require('sdk/test').run(exports);
globals functions before(exports, beforefn) runs beforefn before each test in the file.
ui/frame - Archive of obsolete content
("click", function() { window.parent.postmessage({ "type" : "ping", "reason" : "they clicked me" }, "*"); }, true); // main.js var { frame } = require("sdk/ui/frame"); var frame = new frame({ url: "./frame.html" }); frame.on("message", pong); function pong(e) { if (e.data.type == "ping") { console.log(e.data.reason); e.source.postmessage("pong", event.origin); } }
globals constructors frame(options) creates an frame.
util/deprecate - Archive of obsolete content
globals functions deprecatefunction(fun, msg) dump to the console the error message given in the second argument, prefixed with "deprecated:", and print the stacktrace; then execute the function passed as first argument and returns its value.
util/list - Archive of obsolete content
globals constructors list(element1, element2, ...) constructor can takes any number of elements and creates an instance of list populated with the specified elements.
util/uuid - Archive of obsolete content
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 representation of a uuid to an nsid, pass the string representation to uuid(): let { uuid } = require('sdk/util/uuid'); let firefoxuuid = uuid('{ec8030f7-c20a-464f-9b0e-13a3a9e97384}');
globals functions uuid(stringid) generate a new uuid, or convert a string representation of a uuid to an nsid.
jpm-mobile - Archive of obsolete content
jpm usage is: jpm-mobile [command] [options] jpm supports the following
global options: -h, --help - show a help message and exit -v, --version - print the jpm version number installation jpm-mobile is distributed using the node package manager npm, so to get jpm-mobile you need to have npm installed, if you haven't already.
Logging - Archive of obsolete content
because dom objects aren't available to the main add-on code, the sdk provides its own
global console object with most of the same methods as the dom console, including methods to log error, warning, or informational messages.
Add-on SDK - Archive of obsolete content
tools reference reference documentation for the jpm tool used to develop, test and package add-ons, the console
global used for logging, and the package.json file.
Alerts and Notifications - Archive of obsolete content
on't implement nsialertsservice } } if you need to display a comparable alert on a platform that doesn't support nsialertsservice, you can do this: function popup(title, msg) { var image = null; var win = components.classes['@mozilla.org/embedcomp/window-watcher;1'] .getservice(components.interfaces.nsiwindowwatcher) .openwindow(null, 'chrome://
global/content/alerts/alert.xul', '_blank', 'chrome,titlebar=no,popup=yes', null); win.arguments = [image, title, msg, false, '']; } using notification box another way of non-modal notification and further interaction with users is using of xul elements notificationbox and notification (implicitly).
Canvas code snippets - Archive of obsolete content
ansform', 'translate']; var gettermethods = ['createpattern', 'drawfocusring', 'ispointinpath', 'measuretext', // drawfocusring not currently supported // the following might instead be wrapped to be able to chain their child objects 'createimagedata', 'createlineargradient', 'createradialgradient', 'getimagedata', 'putimagedata' ]; var props = ['canvas', 'fillstyle', 'font', '
globalalpha', '
globalcompositeoperation', 'linecap', 'linejoin', 'linewidth', 'miterlimit', 'shadowoffsetx', 'shadowoffsety', 'shadowblur', 'shadowcolor', 'strokestyle', 'textalign', 'textbaseline']; for (let m of methods) { let method = m; canvas2dcontext.prototype[method] = function() { this.ctx[method].apply(this.ctx, arguments); return this; }; } for (let m of...
Embedding SVG - Archive of obsolete content
<body> <p>hello</p> <svg:svg version="1.1" baseprofile="full" width="150" height="150"> <svg:rect x="10" y="10" width="100" height="100" fill="red"/> <svg:circle cx="50" cy="50" r="30" fill="blue"/> </svg:svg> <p>world</p> </body> </html> embedding into xul make sure you use the right namespace when embedding <?xml version="1.0"?> <?xml-stylesheet href="chrome://
global/skin/" type="text/css"?> <window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" xmlns:svg="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <!-- xul and svg go here --> </window> example: <?xml version="1.0"?> <?xml-stylesheet href="chrome://
global/skin/" type="text/css"?> <window xmlns="http://www.mozilla.org/keymaster/gatekeep...
Miscellaneous - Archive of obsolete content
const nob = 128; // number of bytes var buffer = ''; var prng = components.classes['@mozilla.org/security/random-generator;1']; var bytebucket = prng.getservice(components.interfaces.nsirandomgenerator).generaterandombytes(nob, buffer); detecting full screen mode on/off it works for that
global 'window' object at least.
Preferences - Archive of obsolete content
javascript wrappers for preferences system there are a few javascript wrappers to make your life easier: http://mozilla.doslash.org/prefutils chrome://
global/content/nsusersettings.js https://wiki.mozilla.org/labs/js_modules how to save preferences to save preferences into the default location: var prefservice = components.classes["@mozilla.org/preferences-service;1"] .getservice(components.interfaces.nsiprefservice); prefservice.savepreffile(null); checking for existence of a key if you try to get the value of a...
Tabbox - Archive of obsolete content
examples: .tabs-closebutton { list-style-image: url(http://mozilla.org/favicon.ico); } .tabs-closebutton { list-style-image: url("chrome://
global/skin/icons/close.gif"); } ...
View Source for XUL Applications - Archive of obsolete content
importing gviewsourceutils xul applications wanting to show the source code for documents should import the viewsourceutils.js script instead of attempting to open the viewsource.xul window themselves: <script type="application/javascript" src="chrome://
global/content/viewsourceutils.js"/> viewsourceutils.js exposes a gviewsourceutils
global into the scope of the window that imports that script.
Adding Toolbars and Toolbar Buttons - Archive of obsolete content
the way to include the file in the manifest is to add this line: style chrome://
global/content/customizetoolbar.xul chrome://xulschoolhello/skin/toolbar.css if you are using xbl bindings (explained way ahead) for your toolbar items, you'll have to include the css files for those as well, each in a new line like the one above.
Local Storage - Archive of obsolete content
of message being logged: this._logger.fatal("this is a fatal message."); this._logger.error("this is an error message."); this._logger.warn("this is a warning message."); this._logger.info("this is an info message."); this._logger.config("this is a config message."); this._logger.debug("this is a debug message."); this._logger.trace("this is a trace message."); you can filter the output of the
global logger or any specific logger instance by setting the level property.
Tabbed browser - Archive of obsolete content
getting access to the browser from main window code running in firefox's
global chromewindow, common for extensions that overlay into browser.xul, can access the tabbrowser element using the
global variable gbrowser.
Firefox addons developer guide - Archive of obsolete content
; make sure documentation is relevant for all platforms: gnu/linux, macos, windows; add anchor links to figures & listings; add credits to original authors and license; completed sometimes, interfaces names are misspelled: s/nsl/nsi; talk about fuel; titles of chapters and sub-headings should have caps for first letter of each word; we should add a part about bad and good practices (leaks,
global scopes, ...); add external resources (mozdev.org/community/books.html); add to chapter 3 or 5 more informations about overlay (how to overlay some interesting part of firefox like status bar, menus or toolbar) add previous/next at the end of each chapter questions: opensource appendix.
Adding preferences to an extension - Archive of obsolete content
<?xml version="1.0"?> <?xml-stylesheet href="chrome://
global/skin/" type="text/css"?> <prefwindow id="stockwatcher2-prefs" title="stockwatcher 2 options" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <prefpane id="sw2-stock-pane" label="stock settings"> <preferences> <preference id="pref_symbol" name="extensions.stockwatcher2.symbol" type="string"/> </preferences> <hbox align="center"> <label control="sym...
CSS3 - Archive of obsolete content
css style attributes recommendation since november 7th, 2013 formally defines the syntax of the content of the html style
global attribute.
Index of archived content - Archive of obsolete content
pport browser feature detection displaying notifications (deprecated) e4x e4x for templating processing xml with e4x e4x tutorial accessing xml children descendants and filters introduction namespaces the
global xml object iterator liveconnect liveconnect overview liveconnect reference jsexception jsobject msx emulator (jsmsx) old proxy api parallelarray prope...
MMgc - Archive of obsolete content
note that gcroot can be used either by subclassing, or by creating a gcroot and passing it the memory locations to treat as a root: /** subclassing constructor */ gcroot(gc *gc); /** general constructor */ gcroot(gc *gc, const void *object, size_t size); allocating objects allocating unmanaged objects is as simple as using
global operator new/delete, the same way you always have.
Using content preferences - Archive of obsolete content
the content preferences service, implemented by nsicontentprefservice, offers functions for setting and retrieving preferences for specific sites or in the
global preference space;
global preferences are used whenever a site-specific preference isn't available.
Creating a Firefox sidebar extension - Archive of obsolete content
chrome/content/emptysidebar.xul <?xml version="1.0"?> <?xml-stylesheet href="chrome://
global/skin/" type="text/css" ?> <?xml-stylesheet href="chrome://browser/skin/browser.css" type="text/css" ?> <!doctype page system "chrome://emptysidebar/locale/emptysidebar.dtd"> <page id="sbemptysidebar" title="&emptysidebar.title;" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" > <vbox flex="1"> <label id="atest" value="&emptysidebar.title;" /> </vbox> </page...
Specifying the appearance - Archive of obsolete content
"chrome://navigator/content/tb-busted.png"); } mozilla can have multiple sets of stylesheets that govern its appearance, and we don't want to have to add these rules to each set (and have our extension break when a new set gets installed), so we'll put this stylesheet in a file called tinderstatus.css in the same directory as navigator.xul and reference it at the top of that file right under the
global stylesheet reference: <?xml-stylesheet href="chrome://navigator/skin/" type="text/css"?> <?xml-stylesheet href="chrome://navigator/content/tinderstatus.css" type="text/css"?> our css rules use the list-style-image property to define an image to appear when our status bar panel, identified by its id attribute, has a given value for its status attribute.
chrome.manifest - Archive of obsolete content
copy the following text and paste it into a text file, then save that file as "chrome.manifest": skin
global my_theme jar:chrome/my_theme.jar!/
global/ skin mozapps my_theme jar:chrome/my_theme.jar!/mozapps/ skin messenger my_theme jar:chrome/my_theme.jar!/messenger/ skin messenger-newsblog my_theme jar:chrome/my_theme.jar!/messenger-newsblog/ skin communicator my_theme jar:chrome/my_theme.jar!/communicator/ skin help my_theme jar:chrome/my_theme.jar!/help/ skin navigator my_theme jar:chrome/my_theme.jar!/navigator/ skin editor my_theme jar:chrome/my_theme.jar!/editor/ ...
In-Depth - Archive of obsolete content
change: -moz-binding: url("chrome://
global/content/bindings/toolbar.xml#toolbar-primary"); to -moz-binding: url("chrome://communicator/skin/toolbar/toolbarbindings.xml#toolbar-primary"); now every toolbar has a spot for an image on the right hand side and we can start adding images, but first we need to make sure we can see the images that we add.
toolbarBindings.xml - Archive of obsolete content
copy the following text and paste it into a text file, then save that file as "toolbarbindings.xml": <bindings id="toolbarbindings"> <binding id="toolbar-primary" extends="chrome://
global/content/bindings/toolbar.xml#toolbar-primary"> <content> <xul:hbox class="toolbar-holder toolbar-primary-holder" flex="1" xbl:inherits="orient=tborient,buttonstyle"> <xul:hbox class="toolbar-button-box" flex="1"> <children/> </xul:hbox> <xul:image class="toolbar-primary-icon" xbl:inherits="buttonstyle"/> </xul:hbox> </content> </binding> </bindings> ...
Settings - Archive of obsolete content
because it is still under development, the api currently lives in the future and must be imported before it is used: specifying settings in a manifest to specify its settings, a jetpack defines a variable named manifest in its
global namespace before it imports the settings api.
Jetpack Snippets - Archive of obsolete content
-lite-compressed.js'); document.body.appendchild(firebug); (function(){if(window.firebug.version){firebug.init();}else{settimeout(arguments.callee);}})();void(firebug); ]]></script> </body></html>, width: 800, //wide enough to use firebug onselect: function(slide) { slide.slide(800, true); }}); calling into a slidebar from the
global jetpack scope jetpack.slidebar.append({ onready: function (slide) { // call out to a
global function, passing the slidebar object exinitslidebar(slide); }, ...});function exinitslidebar(aslidebar) { // this variable will now be
global slider = aslidebar;} // then, accessing the slidebar htmlvar tl = slider.contentdocument.getelementbyid("thumblist"); // or calling slidebar api me...
Settings - Archive of obsolete content
because it is still under development, the api currently lives in the future and must be imported before it is used: jetpack.future.import("storage.settings"); specifying settings in a manifest to specify its settings, a jetpack defines a variable named manifest in its
global namespace before it imports the settings api.
Makefile.mozextension.2 - Archive of obsolete content
real_install: $(cp) chrome/$(project).jar ~/.mozilla/default/32p27fdr.slt/chrome/ #################################### ###### define chrome_manifest content $(project) content/ overlay chrome://browser/content/browser.xul chrome://$(project)/content/overlay.xul locale $(project) en-us locale/ skin $(project) classic/1.0 skin/ style chrome://
global/content/customizetoolbar.xul chrome://$(project)/skin/overlay.css endef export chrome_manifest chrome.manifest: @echo generating $(project)/chrome.manifest @echo "$$chrome_manifest" > $(project)/chrome.manifest ###### #firefox {ec8030f7-c20a-464f-9b0e-13a3a9e97384} #thunderbird {3550f703-e582-4d05-9a08-453d09bdfdc6} #nvu {136c295a-4a5a-41cf-bf24-5cee526720d5} #mozilla suite {86c18b42-e4...
Microsummary XML grammar reference - Archive of obsolete content
see the reference core_javascript_1.5_reference:
global_objects:regexp for the details of the regular expression syntax valid for generators and the tutorial creating regular expressions for a microsummary generator for step by step instructions to writing regular expressions that match urls.
New Skin Notes - Archive of obsolete content
since i manage a number of sites for which i must respect quality standards at 800 pixels width for compatibility (we accept break 640 compatibility nowadays except for sites intended for pdas/ppcs), i find myself needing to use ctrl+- with the devmo wikki currently, not to change my
global settings of course, which are fine and factory-default, working well with the other sites i visit regularily or manage...
Space Manager Detailed Design - Archive of obsolete content
ect* abandrect); nsresult getbandavailablespace(const bandrect* aband, nscoord ay, const nssize& amaxsize, nsbanddata& aavailablespace) const; nsiframe* const mframe; // frame associated with the space manager nscoord mx, my; // translation from local to
global coordinate space bandlist mbandlist; // header/sentinel for circular linked list of band rects frameinfo* mframeinfomap; nsintervalset mfloatdamage; static print32 scachedspacemanagercount; static void* scachedspacemanagers[ns_space_manager_cache_size]; nsspacemanager(const nsspacemanager&); // no implementation void operator=(const nsspacemanager&); // no impleme...
Running Tamarin performance tests - Archive of obsolete content
performance test options there are a variety of options available with runtests.py - here is the help text followed by explanations for some options: $ ./runtests.py -h usage: runtests.py [options] [tests] -v --verbose enable additional output -e --avm avmplus command to use -a --asc compiler to use -g --
globalabc deprecated but still works - use builtin.abc (used to be location of
global.abc) -b --builtinabc location of builtin.abc -s --shellabc location of shell_toplevel.abc -x --exclude comma separated list of directories to skip -h --help display help and exit -t --notime do not generate timestamps (cleaner diffs) -f --forcerebuild force rebuild all test files -c -...
URIs and URLs - Archive of obsolete content
together these segments form the url spec with the following syntax: scheme://username:password@host:port/directory/filebasename.fileextension;param?query#ref for performance reasons the complete spec is stored in escaped form in the nsstandardurl object with pointers (position and length) to each basic segment and for the more
global segments like path and prehost for example.
Learn XPI Installer Scripting by Example - Archive of obsolete content
var cf = getfolder("chrome"); registerchrome(content | delayed_chrome, getfolder(cf,"toolkit.xpi"),"content/
global/"); registerchrome(content | delayed_chrome, getfolder(cf,"browser.xpi"),"content/communicator/"); registerchrome(content | delayed_chrome, getfolder(cf,"browser.xpi"),"content/editor/"); registerchrome(content | delayed_chrome, getfolder(cf,"browser.xpi"),"content/navigator/"); registerchrome(skin | delayed_chrome, getfolder(cf,"modern.jar"),"skin/modern/communicator/"); registerchrome(skin...
Accessing Files - Archive of obsolete content
var file = io.getfile("profile", "sample.txt"); the nsiscriptableio object is a
global object always available within an application or extension which provides a number of useful functions for dealing with files.
IO - Archive of obsolete content
var file = io.getfile("profile", "sample.txt"); the nsiscriptableio object is a
global object always available within an application or extension.
How to implement a custom XUL query processor component - Archive of obsolete content
here is an example of what our xul might look like when using a custom query processor: <?xml version="1.0"?> <?xml-stylesheet href="chrome://
global/skin/" type="text/css"?> <window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <grid> <columns> <column flex="1"/> <column flex="3"/> <column flex="2"/> <column flex="1"/> </columns> <rows datasources="dummy" ref="." querytype="simpledata"> <template> <row uri="?"> ...
Panels - Archive of obsolete content
<?xml-stylesheet href="chrome://
global/skin" type="text/css"?> <window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <button label="details" type="panel"> <panel id="search-panel"> <label control="name" value="name:"/> <textbox id="name"/> </panel> </button> </window> many panels will be associated with a button, as in this example.
PopupEvents - Archive of obsolete content
<menu label="edit"> <menupopup onpopupshowing="if (gdisallowed) event.preventdefault();"> <menuitem label="undo"/> <menuitem label="redo"/> </menupopup> </menu> in this example, a
global variable gdisallowed is checked and the preventdefault method is called.
instantApply - Archive of obsolete content
« xul referenceinstantapplytype: booleanyou can set this attribute to true to make the preference apply instantly, even when the
global setting is not to use instant apply.
Sorting and filtering a custom tree view - Archive of obsolete content
sort.xul <?xml version="1.0"?> <?xml-stylesheet href="chrome://
global/skin/" type="text/css"?> <!doctype window> <window title="sorting a custom tree view example" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" onload="init()"> <script type="application/javascript" src="sort.js"/> <hbox align="center" id="search-box"> <label accesskey="f" control="filter">filter</label> <textbox id="filter" oninput="inputfilter(event)" flex="1"/...
Code Samples - Archive of obsolete content
here are the names and uris of some windows: thunderbird configuration const name = "preferences:configmanager" const uri = "chrome://
global/content/config.xul" passwords const name = "toolkit:passwordmanager" const uri = chrome://messenger/content/preferenc...wpasswords.xul" mail & newsgroups const name = "mail:3pane" const uri = "chrome://messenger/content/" sunbird passwords* const name = "toolkit:passwordmanager" const uri ...
Custom toolbar button - Archive of obsolete content
copy the following content, and paste it into the new file: content custombutton chrome/ style chrome://
global/content/customizetoolbar.xul chrome://custombutton/content/button.css # firefox overlay chrome://browser/content/browser.xul chrome://custombutton/content/button.xul # thunderbird mail overlay chrome://messenger/content/messenger.xul chrome://custombutton/content/button.xul # thunderbird compose overlay chrome://messenger/content/messengercompose/messengercompose.xul chrome://custombutton/cont...
Tree Widget Changes - Archive of obsolete content
(do not set id of the column to be 'checked' it will cause problems with the css) treechildren::-moz-tree-checkbox(checked) { /* css for checked cells */ list-style-image: url("chrome://
global/skin/checkbox/cbox-check.gif"); } in addition, checkmark columns support editing: <tree editable="true"> <treecols> <treecol type="checkbox" editable="true"> ...
Adding Buttons - Archive of obsolete content
the code to add is shown in red below: <?xml version="1.0"?> <?xml-stylesheet href="chrome://
global/skin/" type="text/css"?> <window id="findfile-window" title="find files" orient="horizontal" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <button id="find-button" label="find"/> <button id="cancel-button" label="cancel"/> </window> you'll notice that the cancel button was added also.
Adding HTML Elements - Archive of obsolete content
here is an example as it might be added to the find file window: <?xml version="1.0"?> <?xml-stylesheet href="chrome://
global/skin/" type="text/css"?> <window id="findfile-window" title="find files" orient="horizontal" xmlns:html="http://www.w3.org/1999/xhtml" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> then, you can use html tags as you would normally, keeping in mind the following: you must add a html: prefix to the beginning of each tag, assuming you declared the html nam...
Box Model Details - Archive of obsolete content
a find text dialog example 5 : source view <?xml version="1.0"?> <?xml-stylesheet href="chrome://
global/skin/" type="text/css"?> <window id="findtext" title="find text" orient="horizontal" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <vbox flex="3"> <label control="t1" value="search text:"/> <textbox id="t1" style="min-width: 100px;" flex="1"/> </vbox> <vbox style="min-width: 150px;" flex="1" align="start"> <checkbox id="c1" label="ignore case"...
Creating a Wizard - Archive of obsolete content
an example wizard source <?xml version="1.0"?> <?xml-stylesheet href="chrome://
global/skin/" type="text/css"?> <wizard id="example-window" title="select a dog wizard" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <wizardpage> <description> this wizard will help you select the type of dog that is best for you." </description> <label value="why do you want a dog?"/> <menulist> <menupopup> <menuitem label="to scare pe...
Custom Tree Views - Archive of obsolete content
example custom tree source <?xml version="1.0"?> <?xml-stylesheet href="chrome://
global/skin/" type="text/css"?> <window title="tree example" id="tree-window" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" onload="setview();"> <script> //moz 1.8 var treeview = { rowcount : 10000, getcelltext : function(row,column){ if (column.id == "namecol") return "row "+row; else return "february 18"; }, settree: function(treebox){ this.t...
Introduction to XBL - Archive of obsolete content
xul (example.xul): <?xml version="1.0"?> <?xml-stylesheet href="chrome://
global/skin/" type="text/css"?> <?xml-stylesheet href="chrome://example/skin/example.css" type="text/css"?> <window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <box class="okcancelbuttons"/> </window> css (example.css): box.okcancelbuttons { -moz-binding: url('chrome://example/skin/example.xml#okcancel'); } xbl (example.xml): <?xml version="1.0"?> <bindings xmlns="...
Localization - Archive of obsolete content
<?xml version="1.0"?> <?xml-stylesheet href="chrome://
global/skin/" type="text/css"?> <?xml-stylesheet href="findfile.css" type="text/css"?> <!doctype window system "chrome://findfile/locale/findfile.dtd"> <window id="findfile-window" title="&findwindow.title;" persist="screenx screeny width height" orient="horizontal" onload="initsearchlist()" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <script src="findfile.js"/>...
Manifest Files - Archive of obsolete content
the browser.manifest file used by firefox looks like this: content branding jar:browser.jar!/content/branding/ xpcnativewrappers=yes content browser jar:browser.jar!/content/browser/ xpcnativewrappers=yes overlay chrome://
global/content/viewsource.xul chrome://browser/content/viewsourceoverlay.xul overlay chrome://
global/content/viewpartialsource.xul chrome://browser/content/viewsourceoverlay.xul overlay chrome://browser/content/pageinfo.xul chrome://pippki/content/pageinfooverlay.xul two packages are listed here, 'branding' and 'browser'.
More Wizards - Archive of obsolete content
wizard example source <?xml version="1.0"?> <?xml-stylesheet href="chrome://
global/skin/" type="text/css"?> <wizard id="thewizard" title="secret code wizard" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <script> function checkcode(){ document.getelementbyid('thewizard').canadvance = (document.getelementbyid('secretcode').value == "cabbage"); } </script> <wizardpage onpageshow="checkcode(); return true;"> <label value="enter the secret c...
Tree View Details - Archive of obsolete content
they are added near the end of the complete example, shown here: <?xml version="1.0"?> <?xml-stylesheet href="chrome://
global/skin/" type="text/css"?> <window onload="init();" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <tree id="elementlist" flex="1"> <treecols> <treecol id="element" label="element" primary="true" flex="1"/> </treecols> <treechildren/> </tree> <script> <![cdata[ var treeview = { childdata : { solids: ["silver", "gold", "lead"], liquids: ["mercu...
XBL Inheritance - Archive of obsolete content
example 1 : source <binding id="textboxwithhttp" extends="chrome://
global/content/bindings/textbox.xml#textbox"> <handlers> <handler event="keypress" keycode="vk_f4"> this.value="http://www"+value; </handler> </handlers> </binding> the xbl here extends from the xul textbox element.
XUL Questions and Answers - Archive of obsolete content
the following is the code they wrote: <?xml version="1.0"?> <?xml-stylesheet href="chrome://
global/skin/" type="text/css"?> <window id="test-window" title="check list test" xmlns:html="http://www.w3.org/1999/xhtml" xmlns="http://www.mozilla.org/keymaster/gat...re.is.only.xul"> <listbox rows="4"> <listhead> <listheader label="multi-column"/> </listhead> <listcols> <listcol flex="1"/> </listcols> <listitem> <listcell type="checkbox" value="1" label="vghkvghk"/> </list...
XUL Template Primer - Bindings - Archive of obsolete content
<?xml version="1.0"?> <?xml-stylesheet href="chrome://
global/skin" type="text/css"?> <window xmlns:html="http://www.w3.org/1999/xhtml" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" align="vertical"> <vbox datasources="friends.rdf" ref="urn:root"> <template> <rule> <conditions> <content uri="?uri"/> <triple subject="?uri" predicate="http://home.netscape.com/nc-rdf#friends" ...
XUL Event Propagation - Archive of obsolete content
the widget hierarchy consider the following xul file: <?xml version="1.0"?> <?xml-stylesheet href="chrome://
global/skin/" type="text/css"?> <window id="events" xmlns:html="http://www.w3.org/1999/xhtml" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" oncommand="alert('window handler')"> <vbox> <vbox style="background-color: lightgrey;" oncommand="alert('box handler')"> <menu class="menu" label="file" oncommand="alert('menu handler')"> <menupopup> <menuitem oncommand...
dialog - Archive of obsolete content
dir, buttondisabledaccept, buttonlabelaccept, buttonlabelcancel, buttonlabeldisclosure, buttonlabelextra1, buttonlabelextra2, buttonlabelhelp, buttonorient, buttonpack, buttons, defaultbutton, title properties buttons, defaultbutton methods acceptdialog, canceldialog, centerwindowonscreen, getbutton, movetoalertposition examples <?xml version="1.0"?> <?xml-stylesheet href="chrome://
global/skin/
global.css" type="text/css"?> <dialog id="donothing" title="dialog example" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" buttons="accept,cancel" buttonlabelcancel="cancel" buttonlabelaccept="save"> <dialogheader title="options" description="my preferences"/> <groupbox> <caption label="colour"/> <radiogroup> <radio label="red"/> <radio...
dialogheader - Archive of obsolete content
attributes crop, description, title examples <?xml version="1.0"?> <?xml-stylesheet href="chrome://
global/skin/
global.css" type="text/css"?> <dialog id="donothing" title="dialog example" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <dialogheader title="my dialog" description="example dialog"/> <!-- other widgets --> </dialog> attributes crop type: one of the values below if the label of the element is too big to fit in its given space, the text will be cropped on the side specified by the c...
key - Archive of obsolete content
« xul reference home [ examples | attributes | properties | methods | related ] the key element defines a window-
global keyboard shortcut and must be placed inside a keyset element.
prefwindow - Archive of obsolete content
lastselected, onbeforeaccept, ondialogaccept, ondialogcancel, ondialogdisclosure, ondialoghelp, onload, onunload, title, type properties buttons, currentpane, defaultbutton, lastselected, preferencepanes, type methods acceptdialog, addpane, canceldialog, centerwindowonscreen, getbutton, opensubdialog, openwindow, showpane examples <?xml version="1.0"?> <?xml-stylesheet href="chrome://
global/skin/" type="text/css"?> <prefwindow xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <prefpane id="saveoptions" label="backups"> <preferences> <preference id="pref-backup" name="myapp.mybackups" type="bool"/> <preference id="pref-backupduration" name="myapp.mybackups.duration" type="int"/> </preferences> <checkbox label="automatically save backups"...
tabbrowser - Archive of obsolete content
the properties of params are following: boolean inbackground boolean replace boolean allowthirdpartyfixup tab targettab number newindex object postdatas number usercontextid note: this is the xul method on <browser> / <tabbrowser>, not the
global function in chrome://browser/content/browser.js.
toolbox - Archive of obsolete content
properties accessible, customtoolbarcount, externaltoolbars, palette, toolbarset methods appendcustomtoolbar, collapsetoolbar, expandtoolbar examples <?xml version="1.0"?> <?xml-stylesheet href="chrome://
global/skin/" type="text/css"?> <window id="yourwindow" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" title="toolbox example" width="300"> <toolbox> <toolbar> <toolbarbutton label="back"/> <toolbarbutton label="forward"/> <toolbarbutton label="home"/> </toolbar> <toolbar> <toolbarbutton label="stop"/> <toolbarbutton label="reload"/> ...
wizard - Archive of obsolete content
attributes firstpage, lastpage, pagestep, title, windowtype properties canadvance, canrewind, currentpage, onfirstpage, onlastpage, pagecount, pageindex, pagestep, title, wizardpages methods advance, cancel, extra1, extra2, getbutton, getpagebyid, goto, rewind examples <?xml version="1.0"?> <?xml-stylesheet href="chrome://
global/skin/" type="text/css"?> <wizard id="thewizard" title="secret code wizard" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <script> function checkcode(){ document.getelementbyid('thewizard').canadvance = (document.getelementbyid('secretcode').value == "cabbage"); } </script> <wizardpage onpageshow="checkcode();"> <label value="enter the secret code:"/...
Building XULRunner with Python - Archive of obsolete content
the jsconsole can also be open and used from code, for example (in javascript) function openjavascriptconsole() { var wwatch = components.classes["@mozilla.org/embedcomp/window-watcher;1"] .getservice(components.interfaces.nsiwindowwatcher); wwatch.openwindow(null, "chrome://
global/content/console.xul", "_blank", "chrome,dialog=no,all", null); } // dump to the js console (xulrunner -jsconsole) function jsdump(str) { components.classes['@mozilla.org/consoleservice;1'] .getservice(components.interfaces.nsiconsoleservice) .logstringmessage(str); } function jserror(str) { components.utils.reporterror(str); } a final tip is ...
CommandLine - Archive of obsolete content
er-service;1"] .getservice(components.interfaces.nsiobserverservice); observerservice.notifyobservers(window.arguments[0], "commandline-args-changed", null); addeventlistener("unload", observer.unregister, false); finally, add a reference in your application window to the observer: chrome/content/window.xul <?xml version="1.0"?> <?xml-stylesheet href="chrome://
global/skin/" type="text/css"?> <window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" id="main" title="&window.title;" windowtype="xulmine" style="width: 300px; height: 350px;" persist="screenx screeny width height sizemode"> <script type="application/javascript" src="cmdline.js" /> ...
Creating XULRunner Apps with the Mozilla Build System - Archive of obsolete content
mk_add_options moz_build_projects="xulrunner mccoy" mk_add_options moz_objdir=@topsrcdir@/../mccoybase #
global options ac_add_options --enable-debug ac_add_options --disable-optimize # xulrunner options ac_add_app_options xulrunner --enable-application=xulrunner # mccoy options ac_add_app_options mccoy --enable-application=mccoy ac_add_app_options mccoy --with-libxul-sdk=../xulrunner/dist the first section tells mozilla what to build and where to put the resulting object files.
Dialogs in XULRunner - Archive of obsolete content
here is an example xul dialog: <?xml version="1.0"?> <?xml-stylesheet href="chrome://
global/skin/" type="text/css"?> <dialog id="mydialog" title="my dialog" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" onload="window.sizetocontent();" buttons="accept,cancel" buttonlabelaccept="set favorite" buttonaccesskeyaccept="s" ondialogaccept="return dosave();" buttonlabelcancel="cancel" buttonaccesskeycancel=...
Getting started with XULRunner - Archive of obsolete content
main.xul: <?xml version="1.0"?> <?xml-stylesheet href="chrome://
global/skin/" type="text/css"?> <window id="main" title="my app" width="300" height="300" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <script type="application/javascript" src="chrome://myapp/content/main.js"/> <caption label="hello world"/> <separator/> <button label="more >>" oncommand="showmore();"/> <separator/> <description id="more-text" hidden="true">this...
MacFAQ - Archive of obsolete content
be removed, all you need is the window.arguments[0]) <?xml version="1.0"?> <window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" id="myxul_hidden" windowtype="myxul:hiddenwindow" title="" width="0" height="0" persist="screenx screeny width height sizemode" > <!-- load the mozilla helpers --> <script type="application/javascript" src="chrome://
global/content/nsusersettings.js" /> <script><![cdata[ function debug(alogstring) { var mconsoleservice = components.classes["@mozilla.org/consoleservice;1"] .getservice(components.interfaces.nsiconsoleservice) mconsoleservice.logstringmessage("myxul: " + alogstring + "\n"); } function checkotherwindows() { var singletonwindowtype = nspref...
Windows and menus in XULRunner - Archive of obsolete content
here’s the css file: /*
global skin --------------------------------------------------- */ @import url(chrome://
global/skin/); /* toolbar ------------------------------------------------------- */ #open { list-style-image: url(chrome://basicapp/skin/open.png); -moz-box-orient: vertical; } #save { list-style-image: url(chrome://basicapp/skin/save.png); -moz-box-orient: vertical; } of course, you need to make sure th...
Archived Mozilla and build documentation - Archive of obsolete content
liveconnect gives your extension's javascript code (linked from or contained in xul code) access to 2 objects: java and packages (note that per this thread, although the new documentation for the liveconnect reimplementation states that these
globals will be deprecated (in the context of applets), "firefox and the java plug-in will continue to support the
global java/packages keywords, in particular in the context of firefox extensions.").
Introduction to SSL - Archive of obsolete content
government restrictions on products that support anything stronger than 40-bit encryption, disabling support for all 40-bit ciphers effectively restricts access to network browsers that are available only in the united states (unless the server involved has a special
global server id that permits the international client to "step up" to stronger encryption).
Theme changes in Firefox 4 - Archive of obsolete content
finally, you need to create a chrome.manifest file with the contents: skin browser classic/1.0 chrome/browser/ skin communicator classic/1.0 chrome/communicator/ skin
global classic/1.0 chrome/
global/ skin mozapps classic/1.0 chrome/mozapps/ this results in the following structure : /my_theme/chrome/browser/* /my_theme/chrome/communicator/* /my_theme/chrome/
global/* /my_theme/chrome/mozapps/* /my_theme/chrome.manifest /my_theme/icon.png /my_theme/install.rdf /my_theme/preview.png note: for more information (and how to package into a jar) consult...
-moz-binding - Archive of obsolete content
syntax /* <url> value */ -moz-binding: url(http://www.example.org/xbl/htmlbindings.xml#checkbox); /*
global values */ -moz-binding: inherited; -moz-binding: initial; -moz-binding: unset; values <url> the url for the xbl binding (including the fragment identifier).
-moz-border-bottom-colors - Archive of obsolete content
/* single <color> value */ -moz-border-bottom-colors: #f0f0f0; /* multiple <color> values */ -moz-border-bottom-colors: #f0f0f0 #a0a0a0 #505050 #000000; /*
global values */ -moz-border-bottom-colors: inherit; -moz-border-bottom-colors: initial; -moz-border-bottom-colors: unset; when an element has a border that is larger than a single css pixel, each line of pixels uses the next color specified in this property, from the outside in.
-moz-border-left-colors - Archive of obsolete content
/* single <color> value */ -moz-border-left-colors: #f0f0f0; /* multiple <color> values */ -moz-border-left-colors: #f0f0f0 #a0a0a0 #505050 #000000; /*
global values */ -moz-border-left-colors: inherit; -moz-border-left-colors: initial; -moz-border-left-colors: unset; when an element has a border that is larger than a single css pixel, each line of pixels uses the next color specified in this property, from the outside in.
-moz-border-right-colors - Archive of obsolete content
/* single <color> value */ -moz-border-right-colors: #f0f0f0; /* multiple <color> values */ -moz-border-right-colors: #f0f0f0 #a0a0a0 #505050 #000000; /*
global values */ -moz-border-right-colors: inherit; -moz-border-right-colors: initial; -moz-border-right-colors: unset; when an element has a border that is larger than a single css pixel, each line of pixels uses the next color specified in this property, from the outside in.
-moz-border-top-colors - Archive of obsolete content
/* single <color> value */ -moz-border-top-colors: #f0f0f0; /* multiple <color> values */ -moz-border-top-colors: #f0f0f0 #a0a0a0 #505050 #000000; /*
global values */ -moz-border-top-colors: inherit; -moz-border-top-colors: initial; -moz-border-top-colors: unset; when an element has a border that is larger than a single css pixel, each line of pixels uses the next color specified in this property, from the outside in.
-moz-stack-sizing - Archive of obsolete content
/* keyword values */ -moz-stack-sizing: auto; -moz-stack-sizing: ignore; /*
global values */ -moz-stack-sizing: inherit; -moz-stack-sizing: initial; -moz-stack-sizing: unset; if you wish to prevent the stack from resizing automatically to accommodate its children, you can set -moz-stack-sizing to ignore on the child element.
display-inside - Archive of obsolete content
/* keyword values */ display-inside: auto; display-inside: block; display-inside: table; display-inside: flex; display-inside: grid; display-inside: ruby; /*
global values */ display-inside: inherit; display-inside: initial; display-inside: unset; value not found in db!
display-outside - Archive of obsolete content
isplay-outside: table-row-group; display-outside: table-header-group; display-outside: table-footer-group; display-outside: table-row; display-outside: table-cell; display-outside: table-column-group; display-outside: table-column; display-outside: table-caption; display-outside: ruby-base; display-outside: ruby-text; display-outside: ruby-base-container; display-outside: ruby-text-container; /*
global values */ display-outside: inherit; display-outside: initial; display-outside: unset; value not found in db!
New in JavaScript 1.3 - Archive of obsolete content
--> new features in javascript 1.3 new
globals nan infinity undefined new methods isfinite() function.prototype.call() function.prototype.apply() date.utc() date.prototype.getfullyear() date.prototype.setfullyear() date.prototype.getmilliseconds() date.prototype.setmilliseconds() date.prototype.getutcfullyear() date.prototype.getutcmonth() date.prototype.getutcdate() date.prototype.getutchours() date.prototype.getutcmin...
ECMAScript 2015 support in Mozilla - Archive of obsolete content
startswith(), string.prototype.endswith() (firefox 17) string.prototype.includes() (firefox 40) (formerly string.prototype.contains() (firefox 17)) string.prototype.repeat() (firefox 24) string.prototype.normalize() (firefox 31) string.raw() (firefox 34) \u{xxxxxx} unicode code point escapes (firefox 40) new symbol object symbol (firefox 36) symbol.iterator (firefox 36) symbol.for() -
global symbol registry (firefox 36) symbol.match (firefox 40) symbol.species (firefox 41) symbol.toprimitive (firefox 44) symbol.prototype[@@toprimitive] (firefox 44) symbol.replace (firefox 49) symbol.search (firefox 49) symbol.split (firefox 49) symbol.hasinstance (firefox 50) typed arrays typed arrays are specified as part of ecmascript 2015 and no longer in their own specification.
LiveConnect Overview - Archive of obsolete content
use a try...catch statement such as the following to handle liveconnect exceptions in javascript 1.3 and earlier versions: try {
global.eval("foo.bar = 999;"); } catch (exception e) { if (e instanceof jsexception) { jscodefailed(); } else { othercodefailed(); } } in this example, the eval statement fails if foo is not defined.
Using the DOM File API in chrome code - Extensions
in bootstrap scope, this must be imported in like so: cu.import
globalproperties( [ "file" ] ) accessing a file by hard-coded pathname to reference a file by its path, you can simply use a string literal: var file = file.createfromfilename("path/to/some/file"); cross platform note: however using hard-coded paths raises cross platform issues since it uses a platform-dependent path separator (here "/").
Game promotion - Game development
attending events, both local and
global, gives you the ability to meet your fans face to face, as well as other members of the development community.
GLSL Shaders - Game development
the purpose of the vertex shader is to set up the gl_position variable — this is a special,
global, and built-in glsl variable.
Desktop gamepad controls - Game development
api status, browser and hardware support the gamepad api is still in working draft status, although browser support is already quite good — around 63%
global coverage, according to caniuse.com.
Visual typescript game engine - Game development
─ text.ts | | | | ├── texture.ts | | | ├── browser.ts | | | ├── math.ts | | | ├── position.ts | | | ├── resources.ts | | | ├── sound.ts | | | ├── system.ts | | | ├── view-port.ts | | | ├── visual-render.ts | | ├── interface/ | | | ├── drawi.ts | | | ├──
global.ts | | | ├── visual-components.ts | | ├── multiplatform/ | | | ├── mobile/ | | | | ├── player-controls.ts | | | ├──
global-event.ts | | ├── types/ | | | ├──
global.ts | | ├── engine-config.ts | | ├── ioc.ts | | ├── starter.ts | ├── icon/ ...
I18N - MDN Web Docs Glossary: Definitions of Web-related terms
(the w3c definition) among other things, i18n requires support for multiple character sets (usually via unicode) units of measure (currency, °c/°f, km/miles, etc.) time and date formats keyboard layouts text directions learn more general knowledge i18n on wikipedia technical reference i18n on w3c i18n on gala-
global.org learn about it i18n material on i18nguy.com ...
Scope - MDN Web Docs Glossary: Definitions of Web-related terms
for instance, the following is invalid: function examplefunction() { var x = "declared inside function"; // x can only be used in examplefunction console.log("inside function"); console.log(x); } console.log(x); // causes error however, the following code is valid due to the variable being declared outside the function, making it
global: var x = "declared outside function"; examplefunction(); function examplefunction() { console.log("inside function"); console.log(x); } console.log("outside function"); console.log(x); learn more general knowledge scope (computer science) on wikipedia ...
Semantics - MDN Web Docs Glossary: Definitions of Web-related terms
naming when approaching which markup to use, ask yourself, "what element(s) best describe/represent the data that i'm going to populate?" for example, is it a list of data?; ordered, unordered?; is it an article with sections and an aside of related information?; does it list out definitions?; is it a figure or image that needs a caption?; should it have a header and a footer in addition to the
global site-wide header and footer?; etc.
MDN Web Docs Glossary: Definitions of Web-related terms
flex container flex item flexbox forbidden header name forbidden response header name fork fragmentainer frame rate (fps) ftp ftu function fuzz testing g gaia garbage collection gecko general header gif gij git
global object
global scope
global variable glyph gonk google chrome gpl gpu graceful degradation grid grid areas grid axis grid cell grid column grid container grid lines grid row grid tracks guard gutters gzip compression ...
Organizing your CSS - Learn web development
break large stylesheets into multiple smaller ones in particular in cases where you have very different styles for distinct parts of the site, you might want to have a stylesheet that includes all the
global rules and then smaller ones that include the specific rules needed for those sections.
Styling tables - Learn web development
font-family: 'helvetica neue', helvetica, arial, sans-serif; } thead th, tfoot th { font-family: 'rock salt', cursive; } th { letter-spacing: 2px; } td { letter-spacing: 1px; } tbody td { text-align: center; } tfoot th { text-align: right; } there is nothing really specific to tables here; we are generally tweaking the font styling to make things easier to read: we have set a
global sans-serif font stack; this is purely a stylistic choice.
How CSS is structured - Learn web development
/* handle basic element styling */ /* -------------------------------------------------------------------------------------------- */ body { font: 1em/150% helvetica, arial, sans-serif; padding: 1em; margin: 0 auto; max-width: 33em; } @media (min-width: 70em) { /* let's special case the
global font size.
Advanced form styling - Learn web development
we've applied some
global normalizing css to all the controls and their labels, to get them to size in the same way, adopt their parent font, etc., as mentioned in the previous article: button, label, input, select, progress, meter { display: block; font-family: inherit; font-size: 100%; padding: 0; margin: 0; box-sizing: border-box; width: 100%; padding: 5px; height: 30px; } we also added some uniform...
CSS property compatibility table for form controls - Learn web development
rendering for each property there are two possible renderings: n (normal) indicates that the property is applied as it is t (tweaked) indicates that the property is applied with the extra rule below: * { /* turn off the native look and feel */ -webkit-appearance: none; appearance: none; /* for internet explorer */ background: none; } compatibility tables
global behaviors some behaviors are common to many browsers at a
global level: border, background, border-radius, height using one of these properties can partially or fully turn off the native look & feel of widgets on some browsers.
Document and website structure - Learn web development
if it is a child of <body> it defines the
global header of a webpage, but if it's a child of an <article> or <section> it defines a specific header for that section (try not to confuse this with titles and headings).
Build your own function - Learn web development
const msg = document.createelement('p'); msg.textcontent = 'this is a message box'; panel.appendchild(msg); const closebtn = document.createelement('button'); closebtn.textcontent = 'x'; panel.appendchild(closebtn); finally, we use an
globaleventhandlers.onclick event handler to make it so that when the button is clicked, some code is run to delete the whole panel from the page — to close the message box.
Drawing graphics - Learn web development
texture.wrapt = three.repeatwrapping; texture.repeat.set(2, 2); let geometry = new three.boxgeometry(2.4, 2.4, 2.4); let material = new three.meshlambertmaterial( { map: texture, shading: three.flatshading } ); cube = new three.mesh(geometry, material); scene.add(cube); draw(); }); there's a bit more to take in here, so let's go through it in stages: we first create a cube
global variable so we can access our cube from anywhere in the code.
Solve common problems in your JavaScript code - Learn web development
for example: function myfunction() { alert('this is my function.'); }; this code won't do anything unless you call it with the following statement: myfunction(); function scope remember that functions have their own scope — you can't access a variable value set inside a function from outside the function, unless you declared the variable
globally (i.e.
Introduction to automated testing - Learn web development
first, install gulp
globally (meaning, it will be available across all projects) using the following command: npm install --
global gulp-cli next, run the following command inside your npm project directory root to set up gulp as a dependency of your project: npm install --save-dev gulp now create a new file inside your project directory called gulpfile.js.
Accessibility/LiveRegionDevGuide
(at-spi only) a
global variable can be set in a document:load:complete event listener and reset in a object:state-changed:busy listener.
Gecko info for Windows accessibility vendors
get the current font being used -- this is better than using // the isimpledomnode css property methods, because it provides // a single font name, rather than a comma delineated list of possibilities hresult fontfamily([out] bstr *fontfamily); isimpledomdocument there is one isimpledomdocument interface for each xml or html document in gecko, which you can use to get important information
global to the document.
Adding a new event
then, the factory method should be implemented at the bottom of fooevent.cpp in the
global namespace.
Debugging on Mac OS X
# breakpoint set --name nsthread::processnextevent --thread-index 1 --auto-continue true --one-shot true breakpoint command add -s python # this script that we run does not work if we try to use the
global 'lldb' # object, since it is out of date at the time that the script runs (for # example, `lldb.target.executable.fullpath` is empty).
Makefile - variables
global_deps a list of common dependencies (makefile.in, autoconf.mk) that will force rebuilding.
The Firefox codebase: CSS Guidelines
when importing your stylesheets, it's best to import the content css before the theme css, that way the theme values get to override the content values (which is probably what you want), and you're going to want them both after the
global values, so your imports will look like this: <?xml-stylesheet href="chrome://
global/skin/
global.css" type="text/css"?> <?xml-stylesheet href="chrome://browser/content/path/module.css" type="text/css"?> <?xml-stylesheet href="chrome://browser/skin/path/module.css" type="text/css"?> [1] -moz-appearance is tricky.
Eclipse CDT Manual Setup
highlight (select) "cdt gcc build output parser", then in the "language settings provider options" that appear below, make sure that "share setting entries between projects (
global provider)" is not ticked.
mach
this means that you should avoid
global import statements as much as possible.
Error codes returned by Mozilla APIs
(0x805303ef) ns_error_dom_too_few_parameters_err (0x805303f0) ns_error_dom_bad_document_domain (0x805303f1) ns_error_dom_prop_access_denied (0x805303f2) ns_error_dom_xpconnect_access_denied (0x805303f3) ns_error_dom_bad_uri (0x805303f4) ns_error_dom_retval_undefined (0x805303f5) ns_error_dom_quota_reached (0x805303f6) an attempt was made to add data into the local or
global storage for a given domain that would exceed the amount allowed for that domain.
Cross Process Object Wrappers
passing cpows from frame scripts frame scripts can send messages to chrome using one of two
global functions: sendasyncmessage() or sendsyncmessage().
Limitations of frame scripts
the exceptions 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.
Limitations of frame scripts
the exceptions 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.
Firefox and the "about" protocol
the array maps most of the urls, like config to urls in the chrome: pseudo protocol, such as chrome://
global/content/config.xul.
Firefox UI considerations for web developers
how an icon is selected the new tab page chooses icons to use for top sites by trying a series of methods until it obtains an icon to use: a
global "top sites" list is checked.
Chrome-only API reference
it works exactly like a standard worker, except that it has access to js-ctypes via a
global ctypes object available in the
global scope of the worker.
overflow-clip-box-block
/* keyword values */ overflow-clip-box-block: padding-box; overflow-clip-box-block: content-box; /*
global values */ overflow-clip-box-block: inherited; overflow-clip-box-block: initial; overflow-clip-box-block: unset; note: on gecko, by default, padding-box is used everywhere, but <input type="text"> and similar use the value content-box.
overflow-clip-box-inline
/* keyword values */ overflow-clip-box-inline: padding-box; overflow-clip-box-inline: content-box; /*
global values */ overflow-clip-box-inline: inherited; overflow-clip-box-inline: initial; overflow-clip-box-inline: unset; note: on gecko, by default, padding-box is used everywhere, but <input type="text"> and similar use the value content-box.
overflow-clip-box
/* keyword values */ overflow-clip-box: padding-box; overflow-clip-box: content-box; /* two values */ overflow-clip-box: padding-box content-box; overflow-clip-box: content-box content-box; /*
global values */ overflow-clip-box: inherit; overflow-clip-box: initial; overflow-clip-box: unset; note: on gecko, by default, padding-box is used everywhere, but <input type="text"> and similar use the value content-box.
Implementing QueryInterface
it addrefs the resulting interface, not this, thus following the com-correct way (particularly important in aggregation) it uses nscomtypeinfo<t>::getiid() instead of ktiid thus saving a
global declaration and
global space it uses c 's static_cast, via ns_static_cast, which detects errors when you can't really get to the desired interface.
Introduction to Layout in Mozilla
(tables, blocks, xul boxes) reflow “
global” reflows initial, resize, style-change processed immediately via presshell method incremental reflows targeted at a specific frame dirty, content-changed, style-changed, user-defined nshtmlreflowcommand object encapsulates info queued and processed asynchronously, nsipressshell::appendreflowcommand, processreflowcommands incremental ref...
DownloadTarget
a downloadtarget object represents the target of a download, for example a file in the
global downloads directory, or a file in the system temporary directory.
Downloads.jsm
.spawn(function () { yield downloads.fetch("http://www.mozilla.org/", os.path.join(os.constants.path.tmpdir, "example-download.html")); console.log("example-download.html has been downloaded."); }).then(null, components.utils.reporterror); observing downloads this example logs a message every time a change occurs in one of the
global download lists.
Following the Android Toasts Tutorial from a JNI Perspective
this is the template that will follow our object of signatures: var my_jenv = null; try { my_jenv = jni.getforthread(); // do the jni work here } finally { if (my_jenv) { jni.unloadclasses(my_jenv); } } the reason we choose my_jenv for a variable name, and not jenv, is because the
global privileged window scope of firefox for android has a variable jenv already, and we don't want to mix.
OS.File.Error
} catch (ex) { if (ex instanceof os.file.error && ex.becausenosuchfile) { // the file does not exist } }
global object os.file.error methods overview the following functions are utility functions that may be used to construct instances of os.file.error, setting the platform-specific error number.
OS.File for the main thread
console.log('valopen:', valopen); var txttoappend = 'append some text \n'; var txtencoded = new textencoder().encode(txttoappend); valopen.write(txtencoded).then(valwrite => { console.log('valwrite:', valwrite); valopen.close().then(valclose => { console.log('valclose:', valclose); console.log('successfully appended'); }); }); });
global object os.file method overview promise<file> open(in string path, [optional] in object mode, [optional] in object options); promise<object> openunique(in string path, [optional] in object options); promise<void> copy(in string sourcepath, in string destpath, [optional] in object options); promise<bool> exists(in string path); promise<string> getcurre...
PopupNotifications.jsm
this anchorid must point to an element contained inside the popupnotification object's icon box (for firefox windows, the
global popupnotifications object uses the notification-popup-box element).
Promise.jsm
this module was used before dom promises were made
globally available in gecko 29.
PromiseWorker.jsm
the require.js file must be imported with worker
globalscope/importscripts().
Services.jsm
e etld nsieffectivetldservice effectivetld service focus nsifocusmanager focus manager io nsiioservice nsiioservice2 i/o service locale nsilocaleservice locale service logins nsiloginmanager password manager service metro nsiwinmetroutils 2 mm nsimessagebroadcaster nsiframescriptloader
global frame message manager3 obs nsiobserverservice observer service perms nsipermissionmanager permission manager service ppmm nsimessagebroadcaster nsiprocessscriptloader
global parent process message manager3 prefs nsiprefbranch nsiprefbranch2 nsiprefservice preferences service prompt nsipromptservice prompt servi...
Using workers in JavaScript code modules
it works exactly like a standard worker, except that it has access to js-ctypes via a
global ctypes object available in the
global scope of the worker obsolete since gecko 8.0 (firefox 8.0 / thunderbird 8.0 / seamonkey 2.5)this feature is obsolete.
Mozilla Port Blocking
530 courier 531 chat 532 netnews 540 uucp 556 remotefs 563 nntp+ssl 587 submission 601 syslog 636 ldap+ssl 993 imap+ssl 995 pop3+ssl 2049 nfs 4045 lockd 6000 x11 protocol specific exceptions each protocol handler can override the
global blocked ports to allow it's own protocol to function.
Mozilla Style System Documentation
nsstyledisplay*, sc->getstyledata(estylestruct_display)); there is also a (non-virtual) method on nsiframe to get the style data from a frame's style context (saving the refcounting needed to get the style context): const nsstyledisplay *display; frame->getstyledata(estylestruct_display, (const nsstylestruct*&)display); however, there are similar typesafe
global function templates that (should) compile to the same thing but use the type of the template parameter to pass the correct nsstylestructid parameter.
BloatView
this might indicate a
global variable or service.
GC and CC logs
most big leaks include an ns
globalwindow, so that's a good class to try if you don't have any better idea.
TraceMalloc
because this log includes the contents of heap blocks, leaksoup can analyze the graph of live objects and determine which allocations are roots (within that graph, of course -- stack allocations and
global variables don't count).
Performance
powermetrics (mac-only) powermetrics is a command-line utility that gathers and displays a wide range of
global and per-process measurements, including cpu usage, gpu usage, and various wakeups frequencies.
Phishing: a short definition
in 2014, the msci estimated an annual
global impact of phishing, and various forms of identity theft, to be as high as $5 billion usd.
NSPR Contributor Guide
the following are some general guidelines to use when implementing new features: don't export
global variables your code must be thread safe you must provide test cases that test all apis you are adding.
Atomic Operations
this chapter describes the
global functions you use to perform atomic operations.
Logging
this chapter describes the
global functions you use to perform logging.
NSPR Types
calling convention types are used for externally visible functions and
globals.
PR_CreateThread
scope specifies your preference for making the thread local (pr_local_thread),
global (pr_
global_thread) or
global bound (pr_
global_bound_thread).
PR_EXTERN
syntax #include <prtypes.h> pr_extern(type)prototype description pr_extern is used to define externally visible routines and
globals.
PR_GetThreadScope
syntax #include <prthread.h> prthreadscope pr_getthreadscope(void); returns a value of type prthreadscope indicating whether the thread is local or
global.
PR_IMPLEMENT
syntax #include <prtypes.h> pr_implement(type)implementation description pr_implement is used to define implementations of externally visible routines and
globals.
PR_SetLibraryPath
this allows an environment to express policy decisions
globally and lazily, rather than hardcoding and distributing the decisions throughout the code.
Process Initialization
this facility is recommended in situations where complicated
global initialization is required.
NSPR API Reference
ing-point integer type native os integer types miscellaneous types size type pointer difference types boolean types status type for return values threads threading types and constants threading functions creating, joining, and identifying threads controlling thread priorities controlling per-thread private data interrupting and yielding setting
global thread concurrency getting a thread's scope process initialization identity and versioning name and version constants initialization and cleanup module initialization locks lock type lock functions condition variables condition variable type condition variable functions monitors monitor type monitor functions cached monitors cached monitor functio...
An overview of NSS Internals
new certificate authorities enter the
global pki market, and in order to get started with their business, they might make deals with established cas and receive so-called cross-signing-certificates.
NSS 3.16.4 release notes
cn = gte cybertrust
global root sha1 fingerprint: 97:81:79:50:d8:1c:96:70:cc:34:d8:09:cf:79:44:31:36:7e:f4:74 in nss 3.16.3, the 1024-bit "entrust.net secure server certification authority" root ca certificate (sha1 fingerprint: 99:a6:9b:e6:1a:fe:88:6b:4d:2b:82:00:7c:b8:54:fc:31:7e:15:39) was removed.
NSS 3.18 release notes
the following ca certificates had the websites and code signing trust bits turned off ou = equifax secure certificate authority sha1 fingerprint: d2:32:09:ad:23:d3:14:23:21:74:e4:0d:7f:9d:62:13:97:86:63:3a cn = equifax secure
global ebusiness ca-1 sha1 fingerprint: 7e:78:4a:10:1c:82:65:cc:2d:e1:f1:6d:47:b4:40:ca:d9:0a:19:45 cn = tc trustcenter class 3 ca ii sha1 fingerprint: 80:25:ef:f4:6e:70:c8:d4:72:24:65:84:fe:40:3b:8a:8d:6a:db:f5 the following ca certificates were added cn = staat der nederlanden root ca - g3 sha1 fingerprint: d8:eb:6b:41:51:92:59:e0:f3:e7:85...
NSS 3.27 release notes
o = equifax, ou = equifax secure certificate authority sha-256 fingerprint: 08:29:7a:40:47:db:a2:36:80:c7:31:db:6e:31:76:53:ca:78:48:e1:be:bd:3a:0b:01:79:a7:07:f9:2c:f1:78 cn = equifax secure ebusiness ca-1 sha-256 fingerprint: cf:56:ff:46:a4:a1:86:10:9d:d9:65:84:b5:ee:b5:8a:51:0c:42:75:b0:e5:f9:4f:40:bb:ae:86:5e:19:f6:73 cn = equifax secure
global ebusiness ca-1 sha-256 fingerprint: 5f:0b:62:ea:b5:e3:53:ea:65:21:65:16:58:fb:b6:53:59:f4:43:28:0a:4a:fb:d1:04:d7:7d:10:f9:f0:4c:07 bugs fixed in nss 3.27 this bugzilla query returns all the bugs fixed in nss 3.27: https://bugzilla.mozilla.org/buglist.cgi?resolution=fixed&classification=components&query_format=advanced&product=nss&target_milestone=3.27 compatibility ...
NSS 3.28.1 release notes
:4f:62:30:4d:83:ce:c4:71:3a:19:c3:9c:01:1e:a4:6d:b4 cn = amazon root ca 3 sha-256 fingerprint: 18:ce:6c:fe:7b:f1:4e:60:b2:e3:47:b8:df:e8:68:cb:31:d0:2e:bb:3a:da:27:15:69:f5:03:43:b4:6d:b3:a4 cn = amazon root ca 4 sha-256 fingerprint: e3:5d:28:41:9e:d0:20:25:cf:a6:90:38:cd:62:39:62:45:8d:a5:c6:95:fb:de:a3:c2:2b:0b:fb:25:89:70:92 cn = luxtrust
global root 2 sha-256 fingerprint: 54:45:5f:71:29:c2:0b:14:47:c4:18:f9:97:16:8f:24:c5:8f:c5:02:3b:f5:da:5b:e2:eb:6e:1d:d8:90:2e:d5 cn = symantec class 1 public primary certification authority - g4 sha-256 fingerprint: 36:3f:3c:84:9e:ab:03:b0:a2:a0:f6:36:d7:b8:6d:04:d3:ac:7f:cf:e2:6a:0a:91:21:ab:97:95:f6:e1:76:df cn = symantec class 1 public primary certificati...
NSS 3.32 release notes
2:56:3f:49:84:4a:cf:c3:2b:7b:e4:b0:ff:59:9f:9e:8c:7a:f7 cn = cnnic root sha-256 fingerprint: e2:83:93:77:3d:a8:45:a6:79:f2:08:0c:c7:fb:44:a3:b7:a1:c3:79:2c:b7:eb:77:29:fd:cb:6a:8d:99:ae:a7 cn = comsign secured ca sha-256 fingerprint: 50:79:41:c7:44:60:a0:b4:70:86:22:0d:4e:99:32:57:2a:b5:d1:b5:bb:cb:89:80:ab:1c:b1:76:51:a8:44:d2 cn = geotrust
global ca 2 sha-256 fingerprint: ca:2d:82:a0:86:77:07:2f:8a:b6:76:4f:f0:35:67:6c:fe:3e:5e:32:5e:01:21:72:df:3f:92:09:6d:b7:9b:85 cn = secure certificate services sha-256 fingerprint: bd:81:ce:3b:4f:65:91:d1:1a:67:b5:fc:7a:47:fd:ef:25:52:1b:f9:aa:4e:18:b9:e3:df:2e:34:a7:80:3b:e8 cn = swisscom root ca 1 sha-256 fingerprint: 21:db:20:12:36:60:bb:2e:d4:1...
NSS 3.35 release notes
the websites (tls/ssl) trust bit was turned off for the following ca certificates: cn = chambers of commerce root sha-256 fingerprint: 0c:25:8a:12:a5:67:4a:ef:25:f2:8b:a7:dc:fa:ec:ee:a3:48:e5:41:e6:f5:cc:4e:e6:3b:71:b3:61:60:6a:c3 cn =
global chambersign root sha-256 fingerprint: ef:3c:b4:17:fc:8e:bf:6f:97:87:6c:9e:4e:ce:39:de:1e:a5:fe:64:91:41:d1:02:8b:7d:11:c0:b2:29:8c:ed significant changes to tls 1.3 were made, along with the update from draft -18 to draft -23: support for keyupdate was added.
NSS 3.39 release notes
the following ca certificates were added: ou =
globalsign root ca - r6 sha-256 fingerprint: 2cabeafe37d06ca22aba7391c0033d25982952c453647349763a3ab5ad6ccf69 cn = oiste wisekey
global root gc ca sha-256 fingerprint: 8560f91c3624daba9570b5fea0dbe36ff11a8323be9486854fb3f34a5571198d the following ca certificate was removed: cn = comsign sha-256 fingerprint: ae4457b40d9eda96677b0d3c92d57b5177...
NSS 3.41 release notes
463203ece94bcf9d3cc196bf09a5472 cn = gts root r2 sha-256 fingerprint: c45d7bb08e6d67e62e4235110b564e5f78fd92ef058c840aea4e6455d7585c60 cn = gts root r3 sha-256 fingerprint: 15d5b8774619ea7d54ce1ca6d0b0c403e037a917f131e8a04e1e6b7a71babce5 cn = gts root r4 sha-256 fingerprint: 71cca5391f9e794b04802530b363e121da8a3043bb26662fea4dca7fc951a4bd cn = uca
global g2 root sha-256 fingerprint: 9bea11c976fe014764c1be56a6f914b5a560317abd9988393382e5161aa0493c cn = uca extended validation root sha-256 fingerprint: d43af9b35473755c9684fc06d7d8cb70ee5c28e773fb294eb41ee71722924d24 the following ca certificates were removed: cn = ac raíz certicámara s.a.
NSS 3.45 release notes
bl_64fpu_3.so builds bug 1554336 - optimize away unneeded loop in mpi.c bug 1559906 - fipstest: use ckm_tls12_master_key_derive instead of vendor specific mechanism bug 1558126 - tls_aes_256_gcm_sha384 should be marked as fips compatible bug 1555207 - helloretryrequestcallback return code for rejecting 0-rtt bug 1556591 - eliminate races in uses of pk11_setwrapkey bug 1558681 - stop using a
global for anti-replay of tls 1.3 early data bug 1561510 - fix a bug where removing -arch xxx args from cc didn't work bug 1561523 - add a string for the new-ish error ssl_error_missing_post_handshake_auth_extension this bugzilla query returns all the bugs fixed in nss 3.45: https://bugzilla.mozilla.org/buglist.cgi?resolution=fixed&classification=components&query_format=advanced&product=nss&target_...
NSS Tools modutil
this section discusses the following keys:
global keysper-platform keysper-file keys
global keys forwardcompatible gives a list of platforms that are forward compatible.
NSS tools : signtool
the metadata file contains one entry per line, each with three fields: field #1: file specification, or + if you want to specify
global metadata (that is, metadata about the jar archive itself or all entries in the archive) field #2: the name of the data you are specifying; for example: install-script field #3: data corresponding to the name in field #2 for example, the -i option uses the equivalent of this line: + install-script: script.js this example associates a ...
Necko walkthrough
new nshttptransaction, and inits it with mrequesthead (the request headers) and muploadstream (which was created from the request data in channel setup) gets an nsiasyncinputstream (for the response; corresponds to the nspipeinputstream for the response stream pipe) passes it to nsinputstreampump nshttpchannel::ghttphandler->initiatetransaction (called from connect) this is the
global nshttphandler object, which adds the transaction to the nshttpconnectionmgr (one of these per nshttphandler).
Tutorial: Embedding Rhino
this is the same as runscript, but with the addition of two extra lines of code: object wrappedout = context.javatojs(system.out, scope); scriptableobject.putproperty(scope, "out", wrappedout); these lines add a
global variable out that is a javascript reflection of the system.out variable: $ java runscript2 "out.println(42)" 42.0 undefined using javascript objects from java after evaluating a script it's possible to query the scope for variables and functions, extracting values and calling javascript functions.
Rhino scopes and contexts
more on scopes the key things to determine in setting up scopes for your application are what scope should
global variables be created in when your script executes an assignment to an undefined variable, and what variables should your script have access to when it references a variable?
GC Rooting Guide
the simplest approach is to use js::persistentrooted (usable on anything with a trace method with the appropriate signature): js::persistentrooted<myowningstruct> immortalstruct; but note that js::persistentrooted in a struct or class is a rather dangerous thing to use -- it will keep a gc thing alive, and most gc things end up keeping their
global alive, so if your class/struct is reachable in any way from that
global, then nothing will ever be cleaned up by the gc.
Bytecodes
within the engine, all bytecode execute within a stack frame -- even
global (top-level) and eval code has a stack frame associated with it.
Tracing JIT
the trace monitor maintains some book-keeping information, as well as the collection of recorded fragments, held in a hashtable keyed by the interpreter's program counter and
global object shape at the time of recording.
Self-hosted builtins in SpiderMonkey
differences from normal javascript all self-hosted code is strict, so self-hosted functions invoked in a null or undefined scope won't be run in the scope of the
global object.
SpiderMonkey Internals
contains well-known string constants, their atoms, the
global atom hash table and related state, the js_atomize() function that turns a counted string of bytes into an atom, and literal pool (jsatommap) methods.
JIT Optimization Outcomes
singleton types are assigned to objects that are "one of a kind", such as
global objects, literal objects declared in the
global scope, and top-level function objects.
JS::Compile
obj js::handleobject the
global object, or null.
JS::CompileOptions
to counter this attack, html5 specifies that script errors should be sanitized ("muted") when the script is not same-origin with the
global for which it is loaded.
JSClass
ctforconstructor(cx, &printer_class, vp); */ if (!obj) return false; myprinter *p = new myprinter; if (p == null) { js_reportoutofmemory(cx); return false; } js_setprivate(cx, obj, p); args.rval().setobject(*obj); /* spidermonkey 31 or older * js_set_rval(cx, vp, object_to_jsval(obj)); */ return true; } { js_initclass(cx,
global, js::null(), &printer_class, printer_construct, 1, null, null, null, null); } see also mxr id search for jsclass jsclass.flags js_getclass js_initclass js_newobject js_newobjectforconstructor js_instanceof bug 638291 - added trace bug 702507 - removed jsclass_construct_prototype bug 726944 - removed xdrobject, reserved0 and reserved1 bug 886829 - made finalize option...
JSErrorReport
to counter this attack, html5 specifies that script errors should be sanitized ("muted") when the script is not same-origin with the
global for which it is loaded.
JSExtendedClass
jsclass and jsextendedclass structs should usually be
global, and in this case the compiler automatically initializes these fields to null.
JSObject
an object's parent is another object, usually either the
global object or an object that represents an activation record.
JSRuntime
it contains the
global object and the execution stack.
JS_AddExternalStringFinalizer
returns a nonnegative type index if there is room for finalizer in the
global gc finalizers table, else returns -1.
JS_BeginRequest
this "request model" is necessary to interlock with the
global garbage collector.
JS_GetErrorPrototype
description js_geterrorprototype returns the original value of error.prototype from the
global object of the current compartment of cx.
JS_GetGCParameter
jsgc_mode / "mode" select gc mode: jsgc_mode_
global (0) the gc runs all objects are visited in a singleslice.
JS_GetSecurityCallbacks
it allows the embedding to control certain aspects of js code execution based on security settings of the
global object the code is executed in.
JS_ResolveStandardClass
this api can be called directly from a
global object class's resolve op, to define standard classes lazily.
JS_THREADSAFE
multiple threads can end up accessing private data or c/c++
global variables at the same time.
JS_ValueToFunction
unless the function happens to be a native function, this means it isn't attached to any
global or enclosing scope, and therefore must not be treated like a real function.
Property attributes
added in spidermonkey 17 mxr id search for jsfun_constructor jsprop_redefine_nonconfigurable if set, will allow redefining a non-configurable property, but only on a non-dom
global.
JSDBGAPI
t jspd_alias jspd_argument jspd_variable jspd_exception 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_get
globaldebughooks js_setcontextdebughooks memory usage js_getobjecttotalsize js_getfunctiontotalsize js_getscripttotalsize system objects js_issystemobject js_newsystemobject profiling these functions can be used to profile a spidermonkey application using the mac profiler, shark.
Parser API
example: > var expr = reflect.parse("obj.foo + 42").body[0].expression > expr.left.property ({loc:null, type:"identifier", name:"foo"}) > expr.right ({loc:{source:null, start:{line:1, column:10}, end:{line:1, column:12}}, type:"literal", value:42}) it is also available since firefox 7; it can be imported into the
global object via: components.utils.import("resource://gre/modules/reflect.jsm") or into a specified object via: components.utils.import("resource://gre/modules/reflect.jsm", obj) built-in objects whether in spidermonkey shell or firefox (after importing), the
global singleton object reflect currently contains just the parse method.
SpiderMonkey 1.8.8
deleted apis js_get_class (use js_getclass instead) js_constructobject and js_constructobjectwitharguments (preferably use js_new instead, or use this reimplementation as a short-term fix) js_newcompartmentand
globalobject (use js_new
globalobject instead.) jspd_argument jsval_is_object() (use !jsval_is_primitive(v) to detect objects and jsval_is_null(v) to detect null).
SpiderMonkey 17
deleted apis js_get_class (use js_getclass instead) js_constructobject and js_constructobjectwitharguments (preferably use js_new instead, or use this reimplementation as a short-term fix) js_newcompartmentand
globalobject (use js_new
globalobject instead.) jspd_argument jsval_is_object() (use !jsval_is_primitive(v) to detect objects and jsval_is_null(v) to detect null).
SpiderMonkey 24
deleted apis js_get_class (use js_getclass instead) js_enumerateresolvedstandardclasses js_get
globalobject js_setcstringsareutf8 ...list other deleted apis...
SpiderMonkey 38
) jsval_is_int (bug 952650) jsval_is_null (bug 952650) jsval_is_number (bug 952650) jsval_is_primitive (bug 952650) jsval_is_string (bug 952650) jsval_is_void (bug 952650) jsval_to_boolean (bug 952650) jsval_to_double (bug 952650) jsval_to_gcthing (bug 952650) jsval_to_int (bug 952650) jsval_to_object (bug 952650) jsval_to_private (bug 952650) jsval_to_string (bug 952650) js_clearnon
globalobject (bug 1043281) js_clonefunctionobject (bug 1089026) js_compilefunction (bug 1089026) js_compileucfunction (bug 1089026) js_convertarguments (bug 1125784) js_convertargumentsva (bug 1125784) js_convertstub (bug 1103152) js_defineownproperty (bug 1017323) js_deletepropertystub (bug 1103152) js_doubletoint32 (bug 1112774) js_doubletouint32 (bug 1112774) js_enumeratestub (bug 1103152)...
SpiderMonkey 45
js_setcurrentembeddertimefunction (bug 1159507) js_getcurrentembeddertime (bug 1159507) js_mayresolvestandardclass (bug 1155946) js_getiteratorprototype (bug 1225392) js_
globallexicalscope (bug 1202902) js_hasextensiblelexicalscope (bug 1202902) js_extensiblelexicalscope (bug 1202902) js_initreflectparse (bug 987514) js::toprimitive (bug 1206168) js::getfirstargumentastypehint (bug 1054756) js::objecttocompletepropertydescriptor (bug 1144366) js_setimmutableprototype (bug 1211607) js_getownucpropertydescriptor (bug 1211607) js_hasownpropertybyid (bug 1211607) ...
Mozinfo
the top level attributes (os, version, bits, processor) are available as module
globals: if mozinfo.os == 'win': ...
Animated PNG graphics
removed num_frames from 'anim' chunk from 0.3 added 'actl', 'fdat', 'fctl' chunk descriptions as per the latest png-list discussion added section 4, "interactions with other png chunks"; described
global and local palettes and transparency changed 'offs' chunk section to refer to more general chunks updated 'adat' description to indicate that all frames must either be in a single chunk, or that the first chunk must have empty data.
Mork
these row ids are
global, even if defined in a table.
The Places database
it contains a reference to the moz_places table which contains the url and other
global statistics.
History Service Design
an additional property of a visit is the visit we have come from, this is used to track visit chains in
global history, so for example if clicking a link causes a redirect the from visit will allow to follow up the chain of visits.
Aggregating the In-Memory Datasource
aresult) return ns_error_null_pointer; if (aiid.equals(nscomtypeinfo<nsimyinterface>::getiid()) || aiid.equals(nscomtypeinfo<nsisupports>::getiid())) { *aresult = ns_static_cast(nsi
globalhistory*, this); } else if (aiid.equals(nscomtypeinfo<nsirdfdatasource>::getiid())) { return minner->queryinterface(aiid, aresult); } else { *aresult = nsnull; return ns_nointerface; } ns_addref(ns_static_cast(nsisupports*, aresult)); return ns_ok; } the only other thing that you'll need to be aware of is that you'll need to queryinterface() from nsisupports to nsirdfd...
An Overview of XPCOM
the requirements of a factory class can be handled in a strictly functional way, with state being held by
global variables, but there are benefits to using classes for factories.
Starting WebLock
for example, addsite is supposed to add the current url to the white list, but is the url an input parameter to the method, is it the topmost web page in the gecko application, or is it something more random-a url picked from
global history or that's been given context in some other way?
Components.isSuccessCode
const cc = components.classes; const ci = components.interfaces; const cr = components.results; //
global flags polled externally var copyfailed = false; var copyinprogress = false; function copybufferedstream(instream, outstream) { var copyobserver = { onstartrequest: function(request, context) { copyinprogress = true; }, onstoprequest: function(request, context, statuscode) { copyinprogress = false; // did the copy fail?
Components.manager
components.manager is a convenience reflection of the
global native component manager service.
Components.utils.cloneInto
example this add-on script creates an object, clones it into the content window and makes it a property of the content window
global: // add-on script var addonscriptobject = {"greeting" : "hello from add-on"}; contentwindow.addonscriptobject = cloneinto(addonscriptobject, contentwindow); scripts running in the page can now access the object: // page script button.addeventlistener("click", function() { console.log(window.addonscriptobject.greeting); // "hello from add-on" }, false); of course, you don't have to assign ...
Components.utils.evalInWindow
this function is made available as a
global in sandboxes which have the wantexporthelpers option set in the sandbox() constructor.
Components.utils.unload
example you can unload a module called mymodule.jsm using the following line of code: components.utils.unload("resource://myaddon/modules/mymodule.jsm"); note: currently components.utils.unload clears the
global object of an unloaded module.
Components.utils.unwaiveXrays
example suppose a page script adds an expando to its
global window: // page script foo = "i'm an expando"; by default, chrome code won't see foo, because it sees the content window with xray vision, but the chrome code can waive xray protection.
Components.utils.waiveXrays
example suppose a page script adds an expando to its
global window: // page script foo = "i'm an expando"; by default, chrome code won't see foo, because it sees the content window with xray vision, but the chrome code can waive xray protection: // chrome code // contentwindow is an xray var isxray = components.utils.isxraywrapper(gbrowser.contentwindow); // true // expandos are not visible in xrays var foo = gbrowser.contentwindow.foo; ...
NS_InitXPCOM2
some of the possible errors are documented below: ns_error_not_initialized indicates that static
globals were not yet initialized, which may happen if this method is called before xpcom's static initialization code executes.
NS_InitXPCOM3
some of the possible errors are documented below: ns_error_not_initialized indicates that static
globals were not yet initialized, which may happen if this method is called before xpcom's static initialization code executes.
Core XPCOM functions
xpcom provides a number of
global functions which are used to initialize and shut down the xpcom library, as well as to allocate memory, get access to services, and to instantiate interfaces.
XPCOM glue classes
these routines allow easy access to xpcom's
global nsimemory implementation without having to go through the service manager to get it.nspromiseflatcstringclass declarationnspromiseflatstringclass declarationnsrefptrrefptr (formerly known as nsrefptr, see bug 1207245) is a general class to implement reference counting pointers for objects.
mozIPlaceInfo
guid string read only: the
globally unique id of the place.
nsIAbstractWorker
see also using web workers nsiworkermessageport nsiworkermessageevent nsiworkerscope nsiworker
globalscope nsiworker ...
DefaultKeyBinding
« nsiaccessible page summary provides localized string of
global keyboard accelerator for default action, such as ctrl+o for open file (ctrl + o).
nsIAppShellService
note: when this method is successful, it fires the
global notification "xul-window-registered" void registertoplevelwindow( in nsixulwindow awindow ); parameters awindow the window to register.
nsIApplicationUpdateService
toolkit/mozapps/update/nsiupdateservice.idlscriptable this interface describes a
global application service that handles performing background update checks.
nsIDOMStorageItem
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) gecko 1.9.1 note starting in gecko 1.9.1 (firefox 3.5), this is only used for session storage; previously, it was also used for
global storage.
nsIDOMStorageList
dom/interfaces/storage/nsidomstoragelist.idlscriptable this interface is used to access the contextual storage areas used by
globalstorage by domain.
nsIDOMStorageWindow
attributes attribute type description
globalstorage nsidomstoragelist
global storage, accessible by domain.
nsIDOMWindow
globalstorage nsidomstoragelist
global storage, accessible by domain.
nsIDirectoryServiceProvider
example this code creates a
global, read-only string called currdir with the value of the current working directory.
nsIDownload
id unsigned long the id by which the download is identified uniquely in the database - not
globally unique.
nsIFaviconService
this function will also ignore the error page favicon uri (chrome://
global/skin/icons/warning-16.png).
nsIFileView
example <?xml version="1.0" ?> <?xml-stylesheet href="chrome://
global/skin/" type="text/css" ?> <window id="test" title="test" width="640" height="480" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <tree flex="1" id="ftree"> <treecols> <-- the default column type is size unless an appropriate id is passed, nsifileview relies on the treecols section --> <treecol id="filenamecolu...
nsIInstallLocation
constant value description priority_app_profile 0 priority_app_system_user 10 priority_xre_system_user 100 priority_app_system_
global 1000 priority_xre_system_
global 10000 methods getidforlocation() retrieves the guid for an item at the specified location.
nsIJetpack
when evaluated, the script's
global scope will include all privileged apis.
nsIMemory
ns_getmemorymanager returns the
global nsimemory instance.
nsIMessenger
to create an instance, use: messenger = components.classes["@mozilla.org/messenger;1"] .createinstance(components.interfaces.nsimessenger); in thunderbird, a
global nsimessenger object is defined as messenger via the createmessenger function in mailwindow.js.
nsIMicrosummaryGenerator
for generators installed via some other mechanism (for example an extension that dynamically creates generators), this uri is a urn in a form of the extension's own choosing, with the only restriction being that the uri be
globally unique.
nsIMsgCustomColumnHandler
ingforrow: function(ahdr) { return ""; }, isstring: function() {return true;}, getcellproperties: function(arow, acol, aprops) { }, getrowproperties: function(arow, aprops) { }, getimagesrc: function(arow, acol) {return null;}, getsortlongforrow: function(ahdr) {return 0;} } to attach it use the nsimsgdbview.addcolumnhandler() method (recall gdbview is the
global nsimsgdbview in thunderbird): gdbview.addcolumnhandler("newcolumn", columnhandler); after which it can be retrieved using the nsimsgdbview.getcolumnhandler() method: var handler = gdbview.getcolumnhandler("newcolumn"); and removed using the nsimsgdbview.removecolumnhandler() method: gdbview.removecolumnhandler("newcolumn"); method overview astring getsortstringforrow(in nsimsgdbhdr ahdr)...
nsIMsgDatabase
notify); copyhdrfromexistinghdr() nsimsgdbhdr copyhdrfromexistinghdr(in nsmsgkey key, in nsimsgdbhdr existinghdr, in boolean addhdrtodb); listallkeys() [noscript] void listallkeys(in nsmsgkeyarrayref outputkeys); enumeratemessages() nsisimpleenumerator enumeratemessages(); enumeratethreads() nsisimpleenumerator enumeratethreads(); synccounts() count the total and unread msgs, and adjust
global count if needed.
nsIMsgFilterCustomAction
defined in comm-central/ mailnews/ base/ search/ public/ nsimsgfiltercustomaction.idl interface nsimsgfiltercustomaction : nsisupports { /*
globally unique string to identify this filter action.
nsIMsgFolder
lastmessageloaded nsmsgkey unique id to the folder, it is not a
globally unique identifier.
nsIMsgIdentity
bccothers boolean bcclist astring dobcc boolean dobcclist astring draftfolder astring stationeryfolder astring showsavemsgdlg boolean directoryserver astring override
globalpref boolean autocompletetomydomain boolean if this is false, don't append the user's domain to an autocomplete address with no matches.
nsIMsgIncomingServer
by default this value is set to true via
global pref 'allows_specialfolders_usage' (mailnews.js).
nsIMsgSearchCustomTerm
defined in comm-central/ mailnews/ base/ search/ public/ nsimsgsearchcustomterm.idl attributes id /** *
globally unique string to identify this search term.
nsINavHistoryObserver
toolkit/components/places/nsinavhistoryservice.idlscriptable this interface is similar to the nsirdfobserver class, but is used to observe interactions on the
global history.
nsINavHistoryQueryOptions
toolkit/components/places/nsinavhistoryservice.idlscriptable represents the
global options for executing a query.
nsIObserverService
inherits from: nsisupports last changed in gecko 0.9.6 the xpcom nsobserverservice implements this interface to provide
global notifications for a variety of subsystems.
nsISHEntry
(prior to gecko 6.0 returned a json encoded string.) sticky boolean whether the content viewer is marked "sticky" windowstate nsisupports saved state of the
global window object.
nsIScreenManager
the coordinates must be specified using
global (screen) coordinates, and are in pixels.
nsIScriptableUnicodeConverter
if the other apis you are reading data from or writing data to don't require you to use this legacy representation, you should use textdecoder and textencoder (available to chrome javascript via components.utils.import
globalproperties) instead of this api.
nsISessionStore
for many extensions, those that overlay browser.xul, the appropriate window object for nsisessionstore is the
global object 'window'.
nsIUpdateManager
toolkit/mozapps/update/nsiupdateservice.idlscriptable this interface describes a
global application service that maintains a list of previously installed updates, as well as the currently in use update.
nsIUpdateTimerManager
toolkit/mozapps/update/nsiupdatetimermanager.idlscriptable this interface provides a
global application service that provides support for long-duration timers (on the order of many days, weeks, or even months).
nsIWindowMediator
the
global window object you're probably familiar with is of chromewindow type.
nsIWindowWatcher
ent, in string aurl, in string aname, in string afeatures, in nsisupports aarguments); void registernotification(in nsiobserver aobserver); void setwindowcreator(in nsiwindowcreator creator); void unregisternotification(in nsiobserver aobserver); attributes attribute type description activewindow nsidomwindow the watcher serves as a
global storage facility for the current active (front most non-floating-palette-type) window, storing and returning it on demand.
nsIWorkerMessageEvent
see also using web workers nsiworkermessageport nsiworker
globalscope nsiworkerscope nsiabstractworker nsiworker ...
nsIWorkerMessagePort
see also using web workers nsiworkermessageevent nsiworker
globalscope nsiworkerscope nsiabstractworker nsiworker ...
nsIXULBrowserWindow
inherits from: nsisupports last changed in gecko 2.0 (firefox 4 / thunderbird 3.3 / seamonkey 2.1) the xulbrowserwindow attribute exists on the nsixulwindow interface although both firefox and seamonkey also store their nsixulbrowserwindow reference in the
global xulbrowserwindow object accessible from javascript code.
nsIXULWindow
when the window is destroyed, it will fire a "xul-window-destroyed" notification through the
global observer service.
nsMsgNavigationType
for example to move forward a message, you would call: // assuming gdbview is a
global nsimsgdbview var resultid = new object(); var resultindex = new object(); var threadindex = new object(); gdbview.viewnavigate(components.interfaces.nsmsgnavigationtype.nextmessage, resultid, resultindex, threadindex, true); the nsmsgnavigationtype interface is defined as a
global variable in thunderbird: var nsmsgviewcommandtype = components.interfaces.nsmsgviewcommandtype; mailnews/base/public/nsimsgdbview.idlscriptable please add a summary to this article.
nsMsgViewCommandType
for example to mark a message read, you would call: // assuming gdbview is a
global nsimsgdbview gdbview.docommand(components.interfaces.nsmsgviewcommandtype.markmessagesread); mailnews/base/public/nsimsgdbview.idlscriptable please add a summary to this article.
XPCOM reference
core xpcom functionsxpcom provides a number of
global functions which are used to initialize and shut down the xpcom library, as well as to allocate memory, get access to services, and to instantiate interfaces.foldersthe folder classes all implement the nsimsgfolder interface.
Weak reference
i know this sounds more convenient, but the
global routine ns_getweakreference makes it easy to go from the target object to the weak reference; and nsiweakreference::queryreferent gives you the same functionality as queryinterface for getting back.
Filelink Providers
the xhtml page should have a function in the
global scope called onloadprovider.
Mail and RDF
what else do we store?) datasources are created when each window's javascript is loaded by declaring the datasource variables in the source javascript as
global variables.
Main Windows
at compile time these files are added to the toolkit directory so that their chrome addresses are in
global, the same as firefox’s.
UI Tour - Firefox Developer Tools
when the debugger's paused, you'll be able to expand this section to see all objects that are in scope at this point in the program: objects are organized by scope: the most local appears first, and the
global scope (window, in the case of page scripts) appears last.
Debugger.Source - Firefox Developer Tools
since the
global that created the worker is in a different thread, it is guaranteed not to be a debuggee of the debugger instance that owns this source; and thus the creating call is never “in debuggee code”.
Web console keyboard shortcuts - Firefox Developer Tools
ext autocomplete suggestion down arrow down arrow down arrow page up through autocomplete suggestions page up page up page up page down through autocomplete suggestions page down page down page down scroll to start of autocomplete suggestions home home home scroll to end of autocomplete suggestions end end end
global shortcuts these shortcuts work in all tools that are hosted in the toolbox.
AudioWorklet - Web APIs
the worklet's code is run in the audioworklet
globalscope
global execution context, using a separate web audio thread which is shared by the worklet and other audio nodes.
AudioWorkletNode() - Web APIs
a processor with the provided name must first be registered using the audioworklet
globalscope.registerprocessor() method.
AuthenticatorAssertionResponse.authenticatorData - Web APIs
this is a sequence of bytes with the following format: aaguid (16 bytes) - authenticator attestation
globally unique identifier, a unique number that identifies the model of the authenticator (not the specific instance of the authenticator) so that a relying party can understand the characteristics of the authenticator by looking up its metadata statement.
BaseAudioContext.decodeAudioData() - Web APIs
syntax older callback syntax: baseaudiocontext.decodeaudiodata(arraybuffer, successcallback, errorcallback); newer promise-based syntax: promise<decodeddata> baseaudiocontext.decodeaudiodata(arraybuffer); parameters arraybuffer an arraybuffer containing the audio data to be decoded, usually grabbed from xmlhttprequest, windoworworker
globalscope.fetch() or filereader.
CanvasRenderingContext2D.save() - Web APIs
the current values of the following attributes: strokestyle, fillstyle,
globalalpha, linewidth, linecap, linejoin, miterlimit, linedashoffset, shadowoffsetx, shadowoffsety, shadowblur, shadowcolor,
globalcompositeoperation, font, textalign, textbaseline, direction, imagesmoothingenabled.
Basic usage of canvas - Web APIs
the id attribute isn't specific to the <canvas> element but is one of the
global html attributes which can be applied to any html element (like class for instance).
Clipboard - Web APIs
the system clipboard is exposed through the
global navigator.clipboard property.
Clipboard API - Web APIs
accessing the clipboard instead of creating a clipboard object through instantiation, you access the system clipboard through the navigator.clipboard
global: navigator.clipboard.readtext().then( cliptext => document.queryselector(".editor").innertext += cliptext); this snippet fetches the text from the clipboard and appends it to the first element found with the class editor.
Console API - Web APIs
find out about these at: google chrome devtools implementation safari devtools implementation usage is very simple — the console object — available via window.console, or worker
globalscope.console in workers; accessible using just console — contains many methods that you can call to perform rudimentary debugging tasks, generally focused around logging various values to the browser's web console.
ContentIndex - Web APIs
they are accessible from the worker
globalscope.self property: // service worker script self.registration.index.add(item); self.registration.index.delete(item.id); const contentindexitems = self.registration.index.getall(); specifications specification status comment unknownthe definition of 'contentindex' in that specification.
DOMParser - Web APIs
@source https://gist.github.com/1129031 */ /*
global document, domparser*/ (function(domparser) { "use strict"; var proto = domparser.prototype, nativeparse = proto.parsefromstring; // firefox/opera/ie throw errors on unsupported types try { // webkit returns null on unsupported types if ((new domparser()).parsefromstring("", "text/html")) { // text/html parsing is natively supported return; } } catch (ex) {} proto.parsefroms...
DirectoryReaderSync - Web APIs
self.requestfilesystemsync = self.webkitrequestfilesystemsync || self.requestfilesystemsync; //
global for holding the list of entry file system urls.
Document.getElementById() - Web APIs
unlike some other element-lookup methods such as document.queryselector() and document.queryselectorall(), getelementbyid() is only available as a method of the
global document object, and not available as a method on all element objects in the dom.
Document.timeline - Web APIs
the time values for this timeline are calculated as a fixed offset from the
global clock such that the zero time corresponds to the navigationstart moment plus a signed delta known as the origin time.
Document: transitionstart event - Web APIs
bubbles yes cancelable no interface transitionevent event handler property
globaleventhandlers.ontransitionstart the original target for this event is the element that had the transition applied.
Document: wheel event - Web APIs
bubbles yes cancelable yes interface wheelevent event handler property
globaleventhandlers.onwheel this event replaces the non-standard deprecated mousewheel event.
Element.classList - Web APIs
string.prototype.trim polyfill if (!"".trim) string.prototype.trim = function(){ return this.replace(/^[\s]+|[\s]+$/g, ''); }; (function(window){"use strict"; // prevent
global namespace pollution if(!window.domexception) (domexception = function(reason){this.message = reason}).prototype = new error; var wsre = /[\11\12\14\15\40]/, wsindex = 0, checkifvalidclasslistentry = function(o, v) { if (v === "") throw new domexception( "failed to execute '" + o + "' on 'domtokenlist': the token provided must not be empty." ); if((wsindex=v.search(wsre))!==-1) throw new d...
Element.id - Web APIs
the id property of the element interface represents the element's identifier, reflecting the id
global attribute.
ExtendableMessageEvent - Web APIs
the extendablemessageevent interface of the service worker api represents the event object of a message event fired on a service worker (when a message is received on the serviceworker
globalscope from another context) — extends the lifetime of such events.
FederatedCredential - Web APIs
in supporting browsers, an instance of this class may be passed the credential received from the init object for
global fetch.
FederatedCredential - Web APIs
in browsers that support it, an instance of this interface may be passed in the credential member of the init object for
global fetch.
FetchEvent - Web APIs
this is the event type for fetch events dispatched on the service worker
global scope.
Fetch basic concepts - Web APIs
in a nutshell at the heart of fetch are the interface abstractions of http requests, responses, headers, and body payloads, along with a
global fetch method for initiating asynchronous resource requests.
Using Fetch - Web APIs
it also provides a
global fetch() method that provides an easy, logical way to fetch resources asynchronously across the network.
HTMLBodyElement - Web APIs
globaleventhandlers.onresize is an eventhandler representing the code to be called when the resize event is raised.
HTMLElement: input event - Web APIs
bubbles yes cancelable no interface inputevent event handler property
globaleventhandlers.oninput the event also applies to elements with contenteditable enabled, and to any element when designmode is turned on.
HTMLFormElement: formdata event - Web APIs
general info bubbles no cancelable no interface formdataevent event handler property
globaleventhandlers.onformdata examples // grab reference to form const formelem = document.queryselector('form'); // submit handler formelem.addeventlistener('submit', (e) => { // on form submission, prevent default e.preventdefault(); // construct a formdata object, which fires the formdata event new formdata(formelem); }); // formdata handler to retrieve data formelem.addeventlistener('formdata', (e) => { console.log('formdata fired')...
HTMLFormElement: reset event - Web APIs
bubbles yes (although specified as a simple event that doesn't bubble) cancelable yes interface event event handler property
globaleventhandlers.onreset examples this example uses eventtarget.addeventlistener() to listen for form resets, and logs the current event.timestamp whenever that occurs.
HTMLFormElement: submit event - Web APIs
bubbles yes (although specified as a simple event that doesn't bubble) cancelable yes interface submitevent event handler property
globaleventhandlers.onsubmit note that the submit event fires on the <form> element itself, and not on any <button> or <input type="submit"> inside it.
HTMLImageElement.x - Web APIs
let logbox = document.queryselector("pre"); let tbl = document.getelementbyid("userinfo") let log = msg => { logbox.innerhtml += `${msg}<br>`; } let cell = tbl.rows[1].cells[2]; let image = cell.queryselector("img"); log(`image's
global x: ${image.x}`); log(`image's
global y: ${image.y}`); this uses the <table>'s rows property to get a list of the rows in the table, from which it looks up row 1 (which, being a zero-based index, means the second row from the top).
HTMLImageElement.y - Web APIs
let logbox = document.queryselector("pre"); let tbl = document.getelementbyid("userinfo") let log = msg => { logbox.innerhtml += `${msg}<br>`; } let cell = tbl.rows[1].cells[2]; let image = cell.queryselector("img"); log(`image's
global x: ${image.x}`); log(`image's
global y: ${image.y}`); this uses the <table>'s rows property to get a list of the rows in the table, from which it looks up row 1 (which, being a zero-based index, means the second row from the top).
HTMLInputElement: invalid event - Web APIs
bubbles no cancelable yes interface event event handler property
globaleventhandlers.oninvalid this event can be useful for displaying a summary of the problems with a form on submission.
HTMLMediaElement: canplay event - Web APIs
bubbles no cancelable no interface event target element default action none event handler property
globaleventhandlers.oncanplay specification 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.
HTMLMediaElement: canplaythrough event - Web APIs
bubbles no cancelable no interface event target element default action none event handler property
globaleventhandlers.oncanplaythrough specification 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.
HTMLMediaElement: durationchange event - Web APIs
bubbles no cancelable no interface event target element default action none event handler property
globaleventhandlers.ondurationchange specification html5 media examples these examples add an event listener for the htmlmediaelement's durationchange event, then post a message when that event handler has reacted to the event firing.
HTMLMediaElement: emptied event - Web APIs
bubbles no cancelable no interface event target element default action none event handler property
globaleventhandlers.onemptied specification 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.
HTMLMediaElement: ended event - Web APIs
bubbles no cancelable no interface event target element default action none event handler property
globaleventhandlers.onended specification html5 media this event is also defined in media capture and streams and web audio api examples these examples add an event listener for the htmlmediaelement's ended event, then post a message when that event handler has reacted to the event firing.
HTMLMediaElement: loadeddata event - Web APIs
bubbles no cancelable no interface event target element default action none event handler property
globaleventhandlers.onloadeddata specification html5 media note that this event will not fire in mobile/tablet devices if data-saver is on in browser settings.
HTMLMediaElement: loadedmetadata event - Web APIs
bubbles no cancelable no interface event target element default action none event handler property
globaleventhandlers.onloadedmetadata specification html5 media additional properties property type description mozchannels read only int the number of channels.
HTMLMediaElement: pause event - Web APIs
general info bubbles no cancelable no interface event target element default action none event handler property
globaleventhandlers.onpause specification 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.
HTMLMediaElement: play event - Web APIs
bubbles no cancelable no interface event target element default action none event handler property
globaleventhandlers.onplay specification 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.
HTMLMediaElement: playing event - Web APIs
bubbles no cancelable no interface event target element default action none event handler property
globaleventhandlers.onplaying specification 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.
HTMLMediaElement: ratechange event - Web APIs
bubbles no cancelable no interface event target element default action none event handler property
globaleventhandlers.onratechange specification 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.
HTMLMediaElement: seeked event - Web APIs
bubbles no cancelable no interface event target element default action none event handler property
globaleventhandlers.onseeked specification html5 media examples these examples add an event listener for the htmlmediaelement's seeked event, then post a message when that event handler has reacted to the event firing.
HTMLMediaElement: seeking event - Web APIs
bubbles no cancelable no interface event target element default action none event handler property
globaleventhandlers.onseeking specification html5 media examples these examples add an event listener for the htmlmediaelement's seeking event, then post a message when that event handler has reacted to the event firing.
HTMLMediaElement: stalled event - Web APIs
bubbles no cancelable no interface event target element default action none event handler property
globaleventhandlers.onstalled specification 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.
HTMLMediaElement: suspend event - Web APIs
bubbles no cancelable no interface event target element default action none event handler property
globaleventhandlers.onsuspend specification 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.
HTMLMediaElement: timeupdate event - Web APIs
bubbles no cancelable no interface event target element default action none event handler property
globaleventhandlers.ontimeupdate specification 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.
HTMLMediaElement: volumechange event - Web APIs
bubbles no cancelable no interface event target element default action none event handler property
globaleventhandlers.onvolumechange specification 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.
HTMLMediaElement: waiting event - Web APIs
bubbles no cancelable no interface event target element default action none event handler property
globaleventhandlers.onwaiting specification 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.
HTMLTimeElement.dateTime - Web APIs
mm:ss yyyy-mm-dd hh:mm:ss.mmm yyyy-mm-ddthh:mm yyyy-mm-ddthh:mm:ss yyyy-mm-ddthh:mm:ss.mmm 2013-12-25 11:12 1972-07-25 13:43:07 1941-03-15 07:06:23.678 2013-12-25t11:12 1972-07-25t13:43:07 1941-03-15t07:06:23.678 valid time-zone offset string z +hhmm +hh:mm -hhmm -hh:mm z +0200 +04:30 -0300 -08:00 valid
global date and time string any combination of a valid local date and time string followed by a valid time-zone offset string 2013-12-25 11:12+0200 1972-07-25 13:43:07+04:30 1941-03-15 07:06:23.678z 2013-12-25t11:12-08:00 valid week string yyyy-www 2013-w46 four or more ascii digits yyyy 2013, 0001 valid duration string pddthhmmss pddthhmms...
IDBEnvironment - Web APIs
important: the indexeddb property that was previously defined in this mixin is instead now windoworworker
globalscope.indexeddb (that is, defined as a member of the windoworworker
globalscope mixin).
IndexedDB API - Web APIs
this is the interface implemented by the
global object indexeddb and is therefore the entry point for the api.
Timing element visibility with the Intersection Observer API - Web APIs
let's start with the
global variables: let contentbox; let nextarticleid = 1; let visibleads = new set(); let previouslyvisibleads = null; let adobserver; let refreshintervalid = 0; these are used as follows: contentbox a reference to the <main> element's htmlelement object in the dom.
KeyboardEvent - Web APIs
they can be delivered to any object which implements
globaleventhandlers, including element, document, and window.
LocalFileSystem - Web APIs
you access a sandboxed file system by requesting a localfilesystem object using this
global method, window.requestfilesystem().
MathMLElement - Web APIs
properties this interface has no properties, but inherits properties from: documentandelementeventhandlers, element, elementcssinlinestyle,
globaleventhandlers, htmlorforeignelement methods this interface has no methods, but inherits methods from: documentandelementeventhandlers, element, elementcssinlinestyle,
globaleventhandlers, htmlorforeignelement examples mathml <math xmlns="http://www.w3.org/1998/math/mathml"> <msqrt> <mi>x</mi> </msqrt> </math> javascript document.queryselector('msqrt').constructor.name; // mathmlelement specifications specification status comment mathmlelement interface ...
MediaDevices.getUserMedia() - Web APIs
it also happens if the user has specified that the current browsing instance is not permitted access to the device, the user has denied access for the current session, or the user has denied all access to user media devices
globally.
MediaDevices.ondevicechange - Web APIs
ner("click", function() { navigator.mediadevices.getusermedia({ video: { width: 160, height: 120, framerate: 30 }, audio: { samplerate: 44100, samplesize: 16, volume: 0.25 } }).then(stream => { videoelement.srcobject = stream; updatedevicelist(); }) .catch(err => log(err.name + ": " + err.message)); }, false); we set up
global variables that contain references to the <ul> elements that are used to list the audio and video devices: let audiolist = document.getelementbyid("audiolist"); let videolist = document.getelementbyid("videolist"); getting and drawing the device list now let's take a look at updatedevicelist() itself.
MediaDevices - Web APIs
example 'use strict'; // put variables in
global scope to make them available to the browser console.
MediaSession - Web APIs
a browser on that device might deliver the metadata provided by calling mediasession to the device in order to be controllable using the
global user interface.
Metadata - Web APIs
this interface isn't available through the
global scope; instead, you obtain a metadata object describing a filesystementry using the method filesystementry.getmetadata().
MouseEvent.screenX - Web APIs
the screenx read-only property of the mouseevent interface provides the horizontal coordinate (offset) of the mouse pointer in
global (screen) coordinates.
MouseEvent.screenY - Web APIs
the screeny read-only property of the mouseevent interface provides the vertical coordinate (offset) of the mouse pointer in
global (screen) coordinates.
Navigator - Web APIs
navigator.mediasession returns mediasession object which can be used to provide metadata that can be used by the browser to present information about the currently-playing media to the user, such as in a
global media controls ui.
NavigatorLanguage.languages - Web APIs
syntax preferredlanguages =
globalobj.navigator.languages examples navigator.language //"en-us" navigator.languages //["en-us", "zh-cn", "ja-jp"] specifications specification status comment html living standardthe definition of 'navigatorlanguage: languages' in that specification.
Node - Web APIs
endscan = false eachnode(parentnode, function(node){ if (endscan) { return false } // ignore anything which isn't a text node if (node.nodetype !== node.text_node) { return } if (typeof pattern === "string") { if (-1 !== node.textcontent.indexof(pattern)) { matches.push(node) } } else if (pattern.test(node.textcontent)) { if (!pattern.
global) { endscan = true matches = node } else { matches.push(node) } } }) return matches } for example, to find text nodes that contain typos: const typos = ["teh", "adn", "btu", "adress", "youre", "msitakes"] const pattern = new regexp("\\b(" + typos.join("|") + ")\\b", "gi") const mistakes = grep(document.body, pattern) console.log(mistakes) specifi...
Notifications API - Web APIs
serviceworker
globalscope includes the serviceworker
globalscope.onnotificationclick handler, for firing custom functions when a notification is clicked.
PaintWorklet - Web APIs
@supports (background: paint(id)) { background-image: paint(checkerboard); } specifications specification status comment css painting api level 1the definition of 'paintworklet
globalscope' in that specification.
PasswordCredential - Web APIs
in supporting browsers, an instance of this class may be passed the credential from the init object for
global fetch.
PasswordCredential - Web APIs
in supporting browsers an instance of this class may be passed in the credential member of the init object for
global fetch.
performance.now() - Web APIs
coop process-isolates your document and potential attackers can't access to your
global object if they were opening it in a popup, preventing a set of cross-origin attacks dubbed xs-leaks.
Performance API - Web APIs
high resolution time level 2 recommendation adds performance attribute on window and worker
globalscope.
Permissions.query() - Web APIs
the permissions.query() method of the permissions interface returns the state of a user permission on the
global scope.
Using the Permissions API - Web APIs
accessing the permissions api the navigator.permissions property has been added to the browser to allow access to the
global permissions object.
PromiseRejectionEvent - Web APIs
the promiserejectionevent interface represents events which are sent to the
global script context when javascript promises are rejected.
PublicKeyCredential.rawId - Web APIs
this identifier is expected to be
globally unique and is appointed for the current publickeycredential and its associated authenticatorassertionresponse.
PublicKeyCredential - Web APIs
publickeycredential.rawid read only secure context an arraybuffer that holds the
globally unique identifier for this publickeycredential.
RTCIceTransport.onselectedcandidatepairchange - Web APIs
the event handler can determine the current state by calling the transport's getselectedcandidatepair() method, which returns a rtcicecandidatepair whose rtcicecandidatepair.local and rtcicecandidatepair.
global properties specify rtcicecandidate objects describing the local and remote candidates that are currently being used.
Range() - Web APIs
the range() constructor returns a newly created range object whose start and end is the
global document object.
Range - Web APIs
constructor range() returns a range object with the
global document as its start and end.
Request() - Web APIs
example in our fetch request example (see fetch request live) we create a new request object using the constructor, then fetch it using a
globalfetch.fetch call.
Response - Web APIs
you can create a new response object using the response.response() constructor, but you are more likely to encounter a response object being returned as the result of another api operation—for example, a service worker fetchevent.respondwith, or a simple windoworworker
globalscope.fetch().
ServiceWorkerRegistration.showNotification() - Web APIs
buzz!', icon: '../images/touch/chrome-touch-icon-192x192.png', vibrate: [200, 100, 200, 100, 200, 100, 200], tag: 'vibration-sample' }); }); } }); } to invoke the above function at an appropriate time, you could use the serviceworker
globalscope.onnotificationclick event handler.
Streams API - Web APIs
this request could then be passed to a windoworworker
globalscope.fetch() to commence fetching the stream.
SyncEvent - Web APIs
the syncevent interface represents a sync action that is dispatched on the serviceworker
globalscope of a serviceworker.
TextTrack: cuechange event - Web APIs
bubbles no cancelable no interface event event handler property
globaleventhandlers.oncuechange examples on the texttrack you can set up a listener for the cuechange event on a texttrack using the addeventlistener() method: track.addeventlistener('cuechange', function () { let cues = track.activecues; // array of current cues }); or you can just set the oncuechange event handler property: track.oncuechange = function () { let cues = track.activecues; // array of current cues } on the track element the underlying texttrack, indicated by ...
Multi-touch interaction - Web APIs
<style> div { margin: 0em; padding: 2em; } #target1 { background: white; border: 1px solid black; } #target2 { background: white; border: 1px solid black; } #target3 { background: white; border: 1px solid black; } #target4 { background: white; border: 1px solid black; } </style>
global state tpcache is used to cache touch points for processing outside of the event where they were fired.
WakeLock - Web APIs
the system wake lock is exposed through the
global navigator.wakelock property.
Clearing with colors - Web APIs
your browser does not seem to support html5 canvas.</canvas> body { text-align : center; } canvas { display : block; width : 280px; height : 210px; margin : auto; padding : 0; border : none; background-color : black; } // run everything inside window load event handler, to make sure // dom is fully loaded and styled before trying to manipulate it, // and to not mess up the
global scope.
Data in WebGL - Web APIs
they're used to provide values that will be the same for everything drawn in the frame, such as lighting positions and magnitudes,
global transformation and perspective details, and so forth.
Animating textures in WebGL - Web APIs
in the code above, we confirm whether we got both of those events; if so, we set a
global variable, copyvideo, to true to indicate that it's safe to start copying the video to a texture.
WebGL best practices - Web APIs
(+/-2.0 max is probably not good enough for you) implicit defaults the vertex language has the following predeclared
globally scoped default precision statements: precision highp float; precision highp int; precision lowp sampler2d; precision lowp samplercube; the fragment language has the following predeclared
globally scoped default precision statements: precision mediump int; precision lowp sampler2d; precision lowp samplercube; in webgl 1, "highp float" support is optional in fragment shaders using highp pr...
Lifetime of a WebRTC session - Web APIs
network address translation (nat) is a standard which supports this address sharing by handling routing of data inbound and outbound to and from devices on a lan, all of which are sharing a single wan (
global) ip address.
Movement, orientation, and motion: A WebXR example - Web APIs
with the cube's
global orientation established, we then multiply that by the inverse of the view's transform matrix to get the final model view matrix—the matrix to apply to the object to both rotate it for its animation purposes, but to also move and reorient it to simulate the viewer's motion through the space.
Rendering and the WebXR frame animation callback - Web APIs
*/ const deltatime = (time - lastframetime) * 0.001; lastframetime = time; for (let view of pose.views) { /* render each view */ } } this maintains a
global (or an object property) called lastframetime which contains the previous frame's time of rendering.
Spaces and reference spaces: Spatial tracking in WebXR - Web APIs
(worldreferencespace); let newsession = navigator.xr.requestsession("immersive-vr", { requiredfeatures: "unbounded" }); worldreferencespace = await newsession.requestreferencespace("unbounded"); viewerpose = worldreferencespace.getoffsetreferencespace(viewerpose.transform); here, the viewer pose is obtained, with its transform defined relative to worldreferencespace, the current session's
global reference space.
Background audio processing using AudioWorklet - Web APIs
oks like this: class myaudioprocessor extends audioworkletprocessor { constructor() { super(); } process(inputlist, outputlist, parameters) { /* using the inputs (or not, as needed), write the output into each of the outputs */ return true; } }; registerprocessor("my-audio-processor", myaudioprocessor); after the implementation of the processor comes a call to the
global function registerprocessor(), which is only available within the scope of the audio context's audioworklet, which is the invoker of the processor script as a result of your call to audioworklet.addmodule().
Window.close() - Web APIs
//
global var to store a reference to the opened window var openedwindow; function openwindow() { openedwindow = window.open('moreinfo.htm'); } function closeopenedwindow() { openedwindow.close(); } closing the current window in the past, when you called the window object's close() method directly, rather than calling close() on a window instance, the browser closed the frontmost window, whether y...
Window.crypto - Web APIs
the read-only window.crypto property returns the crypto object associated to the
global object.
window.dump() - Web APIs
dump() is also available to xpcom components implemented in javascript, even though window is not the
global object in components.
Window.getComputedStyle() - Web APIs
the element.style object should be used to set styles on that element, or inspect styles directly added to it from javascript manipulation or the
global style attribute.
Window.isSecureContext - Web APIs
syntax var issecure = window.issecurecontext examples feature detection you can use feature detection to check whether they are in a secure context or not by using the issecurecontext boolean which is exposed on the
global scope.
Window.openDialog() - Web APIs
the variables specified in the javascript code which gets loaded from the dialog), it is not possible to pass return values back past the close operation using
globals (or any other constructs).
Window: rejectionhandled event - Web APIs
the rejectionhandled event is sent to the script's
global scope (usually window but also worker) whenever a javascript promise is rejected but after the promise rejection has been handled.
Window: transitionstart event - Web APIs
bubbles yes cancelable no interface transitionevent event handler property
globaleventhandlers.ontransitionstart the original target for this event is the element that had the transition applied.
Window: unhandledrejection event - Web APIs
the unhandledrejection event is sent to the
global scope of a script when a javascript promise that has no rejection handler is rejected; typically, this is the window, but may also be a worker.
WindowEventHandlers - Web APIs
properties the events properties, of the form onxyz, are defined on the windoweventhandlers, and implemented by window, and worker
globalscope for web workers.
Worker() - Web APIs
name: a domstring specifying an identifying name for the dedicatedworker
globalscope representing the scope of the worker, which is mainly useful for debugging purposes.
Worker - Web APIs
when a message is sent to the parent document from the worker via dedicatedworker
globalscope.postmessage.
WorkerLocation - Web APIs
such an object is initialized for each worker and is available via the worker
globalscope.location property obtained by calling self.location.
WorkerNavigator - Web APIs
such an object is initialized for each worker and is available via the worker
globalscope.navigator property obtained by calling window.self.navigator.
XRSession.requestAnimationFrame() - Web APIs
note: despite the obvious similarities between these methods and the
global requestanimationframe() function provided by the window interface, you must not treat these as interchangeable.
ARIA: dialog role - Accessibility
note that for non-modal dialogs there will have to be a
global keyboard shortcut that allows focus to be moved between opened dialogs and the main page.
Basic form hints - Accessibility
required and invalid fields note: now that required is available to more than 97% of users
globally, it is no longer recommended that you use both required and aria-required.
-moz-context-properties - CSS: Cascading Style Sheets
syntax /* keyword values */ -moz-context-properties: fill; -moz-context-properties: fill, stroke; /*
global values */ -moz-context-properties: inherit; -moz-context-properties: initial; -moz-context-properties: unset; values fill expose the fill value set on the image to the embedded svg.
-moz-float-edge - CSS: Cascading Style Sheets
/* keyword values */ -moz-float-edge: border-box; -moz-float-edge: content-box; -moz-float-edge: margin-box; -moz-float-edge: padding-box; /*
global values */ -moz-float-edge: inherit; -moz-float-edge: initial; -moz-float-edge: unset; syntax values border-box the height and width properties include the content, padding and border but not the margin.
-moz-image-region - CSS: Cascading Style Sheets
/* keyword value */ -moz-image-region: auto; /* <shape> value */ -moz-image-region: rect(0, 8px, 4px, 4px); /*
global values */ -moz-image-region: inherit; -moz-image-region: initial; -moz-image-region: unset; the syntax is similar to the clip property.
-moz-outline-radius - CSS: Cascading Style Sheets
/* one value */ -moz-outline-radius: 25px; /* two values */ -moz-outline-radius: 25px 1em; /* three values */ -moz-outline-radius: 25px 1em 12%; /* four values */ -moz-outline-radius: 25px 1em 12% 4mm; /*
global values */ -moz-outline-radius: inherit; -moz-outline-radius: initial; -moz-outline-radius: unset; constituent properties this property is a shorthand for the following css properties: -moz-outline-radius-bottomleft -moz-outline-radius-bottomright -moz-outline-radius-topleft -moz-outline-radius-topright syntax values elliptical outlines and <percentage> values follow the syntax described in border-radius.
-moz-user-focus - CSS: Cascading Style Sheets
/* keyword values */ -moz-user-focus: normal; -moz-user-focus: ignore; /*
global values */ -moz-user-focus: inherit; -moz-user-focus: initial; -moz-user-focus: unset; by setting its value to ignore, you can disable focusing the element, which means that the user will not be able to activate the element.
-moz-user-input - CSS: Cascading Style Sheets
/* keyword values */ -moz-user-input: none; -moz-user-input: enabled; -moz-user-input: disabled; /*
global values */ -moz-user-input: inherit; -moz-user-input: initial; -moz-user-input: unset; for elements that normally take user input, such as a <textarea>, the initial value of -moz-user-input is enabled.
-webkit-border-before - CSS: Cascading Style Sheets
/* border values */ -webkit-border-before: 1px; -webkit-border-before: 2px dotted; -webkit-border-before: medium dashed blue; /*
global values */ -webkit-border-before: inherit; -webkit-border-before: initial; -webkit-border-before: unset; -webkit-border-before can be used to set the values for one or more of: -webkit-border-before-width, -webkit-border-before-style, and -webkit-border-before-color.
-webkit-box-reflect - CSS: Cascading Style Sheets
/* direction values */ -webkit-box-reflect: above; -webkit-box-reflect: below; -webkit-box-reflect: left; -webkit-box-reflect: right; /* offset value */ -webkit-box-reflect: below 10px; /* mask value */ -webkit-box-reflect: below 0 linear-gradient(transparent, white); /*
global values */ -webkit-box-reflect: inherit; -webkit-box-reflect: initial; -webkit-box-reflect: unset; note: this feature is not intended to be used by web sites.
-webkit-line-clamp - CSS: Cascading Style Sheets
syntax /* keyword value */ -webkit-line-clamp: none; /* <integer> values */ -webkit-line-clamp: 3; -webkit-line-clamp: 10; /*
global values */ -webkit-line-clamp: inherit; -webkit-line-clamp: initial; -webkit-line-clamp: unset; none this value specifies that the content wonʼt be clamped.
-webkit-mask-attachment - CSS: Cascading Style Sheets
/* keyword values */ -webkit-mask-attachment: scroll; -webkit-mask-attachment: fixed; -webkit-mask-attachment: local; /* multiple values */ -webkit-mask-attachment: scroll, local; -webkit-mask-attachment: fixed, local, scroll; /*
global values */ -webkit-mask-attachment: inherit; -webkit-mask-attachment: initial; -webkit-mask-attachment: unset; syntax values scroll if scroll is specified, the mask image scrolls within the viewport along with the block that contains the mask image.
-webkit-mask-composite - CSS: Cascading Style Sheets
kit-mask-composite: clear; -webkit-mask-composite: copy; -webkit-mask-composite: source-over; -webkit-mask-composite: source-in; -webkit-mask-composite: source-out; -webkit-mask-composite: source-atop; -webkit-mask-composite: destination-over; -webkit-mask-composite: destination-in; -webkit-mask-composite: destination-out; -webkit-mask-composite: destination-atop; -webkit-mask-composite: xor; /*
global values */ -webkit-mask-composite: inherit; -webkit-mask-composite: initial; -webkit-mask-composite: unset; there is a standardized mask-composite property covering parts of this non-standard property using different keywords.
-webkit-mask-position-x - CSS: Cascading Style Sheets
/* keyword values */ -webkit-mask-position-x: left; -webkit-mask-position-x: center; -webkit-mask-position-x: right; /* <percentage> values */ -webkit-mask-position-x: 100%; -webkit-mask-position-x: -50%; /* <length> values */ -webkit-mask-position-x: 50px; -webkit-mask-position-x: -1cm; /* multiple values values */ -webkit-mask-position-x: 50px, 25%, -3em; /*
global values */ -webkit-mask-position-x: inherit; -webkit-mask-position-x: initial; -webkit-mask-position-x: unset; initial value0%applies toall elementsinheritednopercentagesrefer to the size of the box itselfcomputed valuefor <length> the absolute value, otherwise a percentageanimation typediscrete syntax values <length-percentage> a length indicating the position of the left edge of the imag...
-webkit-mask-position-y - CSS: Cascading Style Sheets
/* keyword values */ -webkit-mask-position-y: top; -webkit-mask-position-y: center; -webkit-mask-position-y: bottom; /* <percentage> values */ -webkit-mask-position-y: 100%; -webkit-mask-position-y: -50%; /* <length> values */ -webkit-mask-position-y: 50px; -webkit-mask-position-y: -1cm; /* multiple values values */ -webkit-mask-position-y: 50px, 25%, -3em; /*
global values */ -webkit-mask-position-y: inherit; -webkit-mask-position-y: initial; -webkit-mask-position-y: unset; initial value0%applies toall elementsinheritednopercentagesrefer to the size of the box itselfcomputed valuefor <length> the absolute value, otherwise a percentageanimation typediscrete syntax values <length-percentage> a length indicating the position of the top side of the image...
-webkit-mask-repeat-x - CSS: Cascading Style Sheets
/* keyword values */ -webkit-mask-repeat-x: repeat; -webkit-mask-repeat-x: no-repeat; -webkit-mask-repeat-x: space; -webkit-mask-repeat-x: round; /* multiple values */ -webkit-mask-repeat-x: repeat, no-repeat, space; /*
global values */ -webkit-mask-repeat-x: inherit; -webkit-mask-repeat-x: initial; -webkit-mask-repeat-x: unset; syntax values repeat the mask image is repeated both horizontally and vertically.
-webkit-mask-repeat-y - CSS: Cascading Style Sheets
/* keyword values */ -webkit-mask-repeat-y: repeat; -webkit-mask-repeat-y: no-repeat; -webkit-mask-repeat-y: space; -webkit-mask-repeat-y: round; /* multiple values */ -webkit-mask-repeat-y: repeat, no-repeat, space; /*
global values */ -webkit-mask-repeat-y: inherit; -webkit-mask-repeat-y: initial; -webkit-mask-repeat-y: unset; syntax values repeat the mask image is repeated vertically.
-webkit-print-color-adjust - CSS: Cascading Style Sheets
/* keyword values */ -webkit-print-color-adjust: economy; -webkit-print-color-adjust: exact; /*
global values */ -webkit-print-color-adjust: inherit; -webkit-print-color-adjust: initial; -webkit-print-color-adjust: unset; syntax the -webkit-print-color-adjust property is specified as one of the keyword values listed below.
-webkit-text-fill-color - CSS: Cascading Style Sheets
/* <color> values */ -webkit-text-fill-color: red; -webkit-text-fill-color: #000000; -webkit-text-fill-color: rgb(100, 200, 0); /*
global values */ -webkit-text-fill-color: inherit; -webkit-text-fill-color: initial; -webkit-text-fill-color: unset; syntax values <color> the foreground fill color of the element's text content.
-webkit-text-stroke-color - CSS: Cascading Style Sheets
/* <color> values */ -webkit-text-stroke-color: red; -webkit-text-stroke-color: #e08ab4; -webkit-text-stroke-color: rgb(200, 100, 0); /*
global values */ -webkit-text-stroke-color: inherit; -webkit-text-stroke-color: initial; -webkit-text-stroke-color: unset; syntax values <color> the color of the stroke.
-webkit-text-stroke-width - CSS: Cascading Style Sheets
syntax /* keyword values */ -webkit-text-stroke-width: thin; -webkit-text-stroke-width: medium; -webkit-text-stroke-width: thick; /* <length> values */ -webkit-text-stroke-width: 2px; -webkit-text-stroke-width: 0.1em; -webkit-text-stroke-width: 1mm; -webkit-text-stroke-width: 5pt; /*
global values */ -webkit-text-stroke-width: inherit; -webkit-text-stroke-width: initial; -webkit-text-stroke-width: unset; values <line-width> the width of the stroke.
-webkit-text-stroke - CSS: Cascading Style Sheets
/* width and color values */ -webkit-text-stroke: 4px navy; text-stroke: 4px navy; /*
global values */ -webkit-text-stroke: inherit; -webkit-text-stroke: initial; -webkit-text-stroke: unset; text-stroke: inherit; text-stroke: initial; text-stroke: unset; constituent properties this property is a shorthand for the following css properties: -webkit-stroke-color -webkit-stroke-width syntax values <length> the width of the stroke.
-webkit-touch-callout - CSS: Cascading Style Sheets
/* keyword values */ -webkit-touch-callout: default; -webkit-touch-callout: none; /*
global values */ -webkit-touch-callout: initial; -webkit-touch-callout: inherit; -webkit-touch-callout: unset; syntax values default the default callout is displayed.
::part() - CSS: Cascading Style Sheets
ed-custom-element::part(tab):hover:active { background-color: #0c0c0d33; } tabbed-custom-element::part(tab):focus { box-shadow: 0 0 0 1px #0a84ff inset, 0 0 0 1px #0a84ff, 0 0 0 4px rgba(10, 132, 255, 0.3); } tabbed-custom-element::part(active) { color: #0060df; border-color: #0a84ff !important; } javascript let template = document.queryselector("#tabbed-custom-element");
globalthis.customelements.define(template.id, class extends htmlelement { constructor() { super(); this.attachshadow({ mode: "open" }); this.shadowroot.appendchild(template.content); } }); result specifications specification status comment shadow partsthe definition of '::part' in that specification.
:root - CSS: Cascading Style Sheets
/* selects the root element of the document: <html> in the case of html */ :root { background: yellow; } syntax :root examples declaring
global css variables :root can be useful for declaring
global css variables: :root { --main-color: hotpink; --pane-padding: 5px 42px; } specifications specification status comment selectors level 4the definition of ':root' in that specification.
Mozilla CSS extensions - CSS: Cascading Style Sheets
pted] -moz-transform-style [prefixed version still accepted] -moz-transition [prefixed version still accepted] -moz-transition-delay [prefixed version still accepted] -moz-transition-duration [prefixed version still accepted] -moz-transition-property [prefixed version still accepted] -moz-transition-timing-function [prefixed version still accepted] -moz-user-select values
global values -moz-initial -moz-appearance button button-arrow-down button-arrow-next button-arrow-previous button-arrow-up button-bevel checkbox checkbox-container checkbox-label checkmenuitem dialog groupbox listbox menuarrow menucheckbox menuimage menuitem menuitemtext menulist menulist-button menulist-text menulist-textfield menupopup menuradio menuseparator -moz-...
align-content - CSS: Cascading Style Sheets
er end */ align-content: space-evenly; /* distribute items evenly items have equal space around them */ align-content: stretch; /* distribute items evenly stretch 'auto'-sized items to fit the container */ /* overflow alignment */ align-content: safe center; align-content: unsafe center; /*
global values */ align-content: inherit; align-content: initial; align-content: unset; values start the items are packed flush to each other against the start edge of the alignment container in the cross axis.
align-items - CSS: Cascading Style Sheets
e start */ align-items: end; /* pack items from the end */ align-items: flex-start; /* pack flex items from the start */ align-items: flex-end; /* pack flex items from the end */ /* baseline alignment */ align-items: baseline; align-items: first baseline; align-items: last baseline; /* overflow alignment (for positional alignment only) */ align-items: safe center; align-items: unsafe center; /*
global values */ align-items: inherit; align-items: initial; align-items: unset; values normal the effect of this keyword is dependent of the layout mode we are in: in absolutely-positioned layouts, the keyword behaves like start on replaced absolutely-positioned boxes, and as stretch on all other absolutely-positioned boxes.
align-self - CSS: Cascading Style Sheets
m flush at the end */ align-self: flex-start; /* put the flex item at the start */ align-self: flex-end; /* put the flex item at the end */ /* baseline alignment */ align-self: baseline; align-self: first baseline; align-self: last baseline; align-self: stretch; /* stretch 'auto'-sized items to fit the container */ /* overflow alignment */ align-self: safe center; align-self: unsafe center; /*
global values */ align-self: inherit; align-self: initial; align-self: unset; values auto computes to the parent's align-items value.
all - CSS: Cascading Style Sheets
syntax /*
global values */ all: initial; all: inherit; all: unset; /* css cascading and inheritance level 4 */ all: revert; the all property is specified as one of the css
global keyword values.
animation-direction - CSS: Cascading Style Sheets
syntax /* single animation */ animation-direction: normal; animation-direction: reverse; animation-direction: alternate; animation-direction: alternate-reverse; /* multiple animations */ animation-direction: normal, reverse; animation-direction: alternate, reverse, normal; /*
global values */ animation-direction: inherit; animation-direction: initial; animation-direction: unset; values normal the animation plays forwards each cycle.
animation-name - CSS: Cascading Style Sheets
syntax /* single animation */ animation-name: none; animation-name: test_05; animation-name: -specific; animation-name: sliding-vertically; /* multiple animations */ animation-name: test1, animation4; animation-name: none, -moz-specific, sliding; /*
global values */ animation-name: initial animation-name: inherit animation-name: unset values none a special keyword denoting no keyframes.
animation-play-state - CSS: Cascading Style Sheets
syntax /* single animation */ animation-play-state: running; animation-play-state: paused; /* multiple animations */ animation-play-state: paused, running, running; /*
global values */ animation-play-state: inherit; animation-play-state: initial; animation-play-state: unset; values running the animation is currently playing.
animation-timing-function - CSS: Cascading Style Sheets
ywords */ animation-timing-function: steps(4, jump-start); animation-timing-function: steps(10, jump-end); animation-timing-function: steps(20, jump-none); animation-timing-function: steps(5, jump-both); animation-timing-function: steps(6, start); animation-timing-function: steps(8, end); /* multiple animations */ animation-timing-function: ease, step-start, cubic-bezier(0.1, 0.7, 1.0, 0.1); /*
global values */ animation-timing-function: inherit; animation-timing-function: initial; animation-timing-function: unset; timing functions may be specified on individual keyframes in a @keyframes rule.
aspect-ratio - CSS: Cascading Style Sheets
syntax aspect-ratio: 1 / 1; /*
global values */ aspect-ratio: inherit; aspect-ratio: initial; aspect-ratio: unset; values <auto> replaced elements with an intrinsic aspect ratio use that aspect ratio, otherwise the box has no preferred aspect ratio.
backdrop-filter - CSS: Cascading Style Sheets
ckdrop-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.svg#filter) blur(4px) saturate(150%); /*
global values */ backdrop-filter: inherit; backdrop-filter: initial; backdrop-filter: unset; syntax values none no filter is applied to the backdrop.
backface-visibility - CSS: Cascading Style Sheets
(this property has no effect on 2d transforms, which have no perspective.) syntax /* keyword values */ backface-visibility: visible; backface-visibility: hidden; /*
global values */ backface-visibility: inherit; backface-visibility: initial; backface-visibility: unset; the backface-visibility property is specified as one of the keywords listed below.
background-attachment - CSS: Cascading Style Sheets
syntax /* keyword values */ background-attachment: scroll; background-attachment: fixed; background-attachment: local; /*
global values */ background-attachment: inherit; background-attachment: initial; background-attachment: unset; the background-attachment property is specified as one of the keyword values from the list below.
background-blend-mode - CSS: Cascading Style Sheets
syntax /* one value */ background-blend-mode: normal; /* two values, one per background */ background-blend-mode: darken, luminosity; /*
global values */ background-blend-mode: initial; background-blend-mode: inherit; background-blend-mode: unset; values <blend-mode> the blending mode to be applied.
background-clip - CSS: Cascading Style Sheets
syntax /* keyword values */ background-clip: border-box; background-clip: padding-box; background-clip: content-box; background-clip: text; /*
global values */ background-clip: inherit; background-clip: initial; background-clip: unset; values border-box the background extends to the outside edge of the border (but underneath the border in z-ordering).
background-color - CSS: Cascading Style Sheets
nd */ /* rgb value */ background-color: rgb(255, 255, 128); /* fully opaque */ background-color: rgba(117, 190, 218, 0.5); /* 50% transparent */ /* hsl value */ background-color: hsl(50, 33%, 25%); /* fully opaque */ background-color: hsla(50, 33%, 25%, 0.75); /* 75% transparent */ /* special keyword values */ background-color: currentcolor; background-color: transparent; /*
global values */ background-color: inherit; background-color: initial; background-color: unset; the background-color property is specified as a single <color> value.
background-origin - CSS: Cascading Style Sheets
syntax /* keyword values */ background-origin: border-box; background-origin: padding-box; background-origin: content-box; /*
global values */ background-origin: inherit; background-origin: initial; background-origin: unset; the background-origin property is specified as one of the keyword values listed below.
background-position-x - CSS: Cascading Style Sheets
-position-x: left; background-position-x: center; background-position-x: right; /* <percentage> values */ background-position-x: 25%; /* <length> values */ background-position-x: 0px; background-position-x: 1cm; background-position-x: 8em; /* side-relative values */ background-position-x: right 3px; background-position-x: left 25%; /* multiple values */ background-position-x: 0px, center; /*
global values */ background-position-x: inherit; background-position-x: initial; background-position-x: unset; the background-position-x property is specified as one or more values, separated by commas.
background-position-y - CSS: Cascading Style Sheets
sition-y: top; background-position-y: center; background-position-y: bottom; /* <percentage> values */ background-position-y: 25%; /* <length> values */ background-position-y: 0px; background-position-y: 1cm; background-position-y: 8em; /* side-relative values */ background-position-y: bottom 3px; background-position-y: bottom 10%; /* multiple values */ background-position-y: 0px, center; /*
global values */ background-position-y: inherit; background-position-y: initial; background-position-y: unset; the background-position-y property is specified as one or more values, separated by commas.
background-position - CSS: Cascading Style Sheets
es */ background-position: 25% 75%; /* <length> values */ background-position: 0 0; background-position: 1cm 2cm; background-position: 10ch 8em; /* multiple images */ background-position: 0 0, center; /* edge offsets values */ background-position: bottom 10px right 20px; background-position: right 3em bottom 10px; background-position: bottom 10px right; background-position: top right 10px; /*
global values */ background-position: inherit; background-position: initial; background-position: unset; the background-position property is specified as one or more <position> values, separated by commas.
background-repeat - CSS: Cascading Style Sheets
syntax /* keyword values */ background-repeat: repeat-x; background-repeat: repeat-y; background-repeat: repeat; background-repeat: space; background-repeat: round; background-repeat: no-repeat; /* two-value syntax: horizontal | vertical */ background-repeat: repeat space; background-repeat: repeat repeat; background-repeat: round space; background-repeat: no-repeat round; /*
global values */ background-repeat: inherit; background-repeat: initial; background-repeat: unset; values <repeat-style> the one-value syntax is a shorthand for the full two-value syntax: single value two-value equivalent repeat-x repeat no-repeat repeat-y no-repeat repeat repeat repeat repeat space space space ...
background-size - CSS: Cascading Style Sheets
-size: 12px; background-size: auto; /* two-value syntax */ /* first value: width of the image, second value: height */ background-size: 50% auto; background-size: 3em 25%; background-size: auto 6px; background-size: auto auto; /* multiple backgrounds */ background-size: auto, auto; /* not to be confused with `auto auto` */ background-size: 50%, 25%, 25%; background-size: 6px, auto, contain; /*
global values */ background-size: inherit; background-size: initial; background-size: unset; the background-size property is specified in one of the following ways: using the keyword values contain or cover.
block-size - CSS: Cascading Style Sheets
syntax /* <length> values */ block-size: 300px; block-size: 25em; /* <percentage> values */ block-size: 75%; /* keyword values */ block-size: max-content; block-size: min-content; block-size: fit-content(20em); block-size: auto; /*
global values */ block-size: inherit; block-size: initial; block-size: unset; if the writing mode is vertically oriented, the value of block-size relates to the width of the element; otherwise, it relates to the height of the element.
border-bottom-color - CSS: Cascading Style Sheets
syntax /* <color> values */ border-bottom-color: red; border-bottom-color: #ffbb00; border-bottom-color: rgb(255, 0, 0); border-bottom-color: hsla(100%, 50%, 25%, 0.75); border-bottom-color: currentcolor; border-bottom-color: transparent; /*
global values */ border-bottom-color: inherit; border-bottom-color: initial; border-bottom-color: unset; the border-bottom-color property is specified as a single value.
border-bottom-style - CSS: Cascading Style Sheets
syntax /* keyword values */ border-bottom-style: none; border-bottom-style: hidden; border-bottom-style: dotted; border-bottom-style: dashed; border-bottom-style: solid; border-bottom-style: double; border-bottom-style: groove; border-bottom-style: ridge; border-bottom-style: inset; border-bottom-style: outset; /*
global values */ border-bottom-style: inherit; border-bottom-style: initial; border-bottom-style: unset; the border-bottom-style property is specified as a single keyword chosen from those available for the border-style property.
border-bottom-width - CSS: Cascading Style Sheets
syntax /* keyword values */ border-bottom-width: thin; border-bottom-width: medium; border-bottom-width: thick; /* <length> values */ border-bottom-width: 10em; border-bottom-width: 3vmax; border-bottom-width: 6px; /*
global keywords */ border-bottom-width: inherit; border-bottom-width: initial; border-bottom-width: unset; values <line-width> defines the width of the border, either as an explicit nonnegative <length> or a keyword.
border-collapse - CSS: Cascading Style Sheets
syntax /* keyword values */ border-collapse: collapse; border-collapse: separate; /*
global values */ border-collapse: inherit; border-collapse: initial; border-collapse: unset; the border-collapse property is specified as a single keyword, which may be chosen from the list below.
border-color - CSS: Cascading Style Sheets
this property is a shorthand for the following css properties: border-bottom-color border-left-color border-right-color border-top-color syntax /* <color> values */ border-color: red; /* horizontal | vertical */ border-color: red #f015ca; /* top | vertical | bottom */ border-color: red rgb(240,30,50,.7) green; /* top | right | bottom | left */ border-color: red yellow green blue; /*
global values */ border-color: inherit; border-color: initial; border-color: unset; the border-color property may be specified using one, two, three, or four values.
border-end-end-radius - CSS: Cascading Style Sheets
/* <length> values */ /* with one value the corner will be a circle */ border-end-end-radius: 10px; border-end-end-radius: 1em; /* with two values the corner will be an ellipse */ border-end-end-radius: 1em 2em; /*
global values */ border-end-end-radius: inherit; border-end-end-radius: initial; border-end-end-radius: unset; for instance, in a horizontal-tb writing mode this property corresponds to the border-bottom-right-radius property.
border-end-start-radius - CSS: Cascading Style Sheets
/* <length> values */ /* with one value the corner will be a circle */ border-end-start-radius: 10px; border-end-start-radius: 1em; /* with two values the corner will be an ellipse */ border-end-start-radius: 1em 2em; /*
global values */ border-end-start-radius: inherit; border-end-start-radius: initial; border-end-start-radius: unset; for instance, in a horizontal-tb writing mode this property corresponds to the border-top-right-radius property.
border-image-outset - CSS: Cascading Style Sheets
syntax /* <length> value */ border-image-outset: 1rem; /* <number> value */ border-image-outset: 1.5; /* vertical | horizontal */ border-image-outset: 1 1.2; /* top | horizontal | bottom */ border-image-outset: 30px 2 45px; /* top | right | bottom | left */ border-image-outset: 7px 12px 14px 5px; /*
global values */ border-image-outset: inherit; border-image-outset: initial; border-image-outset: unset; the border-image-outset property may be specified as one, two, three, or four values.
border-image-repeat - CSS: Cascading Style Sheets
syntax /* keyword value */ border-image-repeat: stretch; border-image-repeat: repeat; border-image-repeat: round; border-image-repeat: space; /* vertical | horizontal */ border-image-repeat: round stretch; /*
global values */ border-image-repeat: inherit; border-image-repeat: initial; border-image-repeat: unset; the border-image-repeat property may be specified using one or two values chosen from the list of values below.
border-image-slice - CSS: Cascading Style Sheets
syntax /* all sides */ border-image-slice: 30%; /* vertical | horizontal */ border-image-slice: 10% 30%; /* top | horizontal | bottom */ border-image-slice: 30 30% 45; /* top | right | bottom | left */ border-image-slice: 7 12 14 5; /* using the `fill` keyword */ border-image-slice: 10% fill 7 12; /*
global values */ border-image-slice: inherit; border-image-slice: initial; border-image-slice: unset; the border-image-slice property may be specified using one to four <number-percentage> values to represent the position of each image slice.
border-image-source - CSS: Cascading Style Sheets
syntax /* keyword value */ border-image-source: none; /* <image> values */ border-image-source: url(image.jpg); border-image-source: linear-gradient(to top, red, yellow); /*
global values */ border-image-source: inherit; border-image-source: initial; border-image-source: unset; values none no border image is used.
border-image-width - CSS: Cascading Style Sheets
syntax /* keyword value */ border-image-width: auto; /* <length> value */ border-image-width: 1rem; /* <percentage> value */ border-image-width: 25%; /* <number> value */ border-image-width: 3; /* vertical | horizontal */ border-image-width: 2em 3em; /* top | horizontal | bottom */ border-image-width: 5% 15% 10%; /* top | right | bottom | left */ border-image-width: 5% 2em 10% auto; /*
global values */ border-image-width: inherit; border-image-width: initial; border-image-width: unset; the border-image-width property may be specified using one, two, three, or four values chosen from the list of values below.
border-left-color - CSS: Cascading Style Sheets
syntax /* <color> values */ border-left-color: red; border-left-color: #ffbb00; border-left-color: rgb(255, 0, 0); border-left-color: hsla(100%, 50%, 25%, 0.75); border-left-color: currentcolor; border-left-color: transparent; /*
global values */ border-left-color: inherit; border-left-color: initial; border-left-color: unset; the border-left-color property is specified as a single value.
border-left-style - CSS: Cascading Style Sheets
syntax /* keyword values */ border-left-style: none; border-left-style: hidden; border-left-style: dotted; border-left-style: dashed; border-left-style: solid; border-left-style: double; border-left-style: groove; border-left-style: ridge; border-left-style: inset; border-left-style: outset; /*
global values */ border-left-style: inherit; border-left-style: initial; border-left-style: unset; the border-left-style property is specified as a single keyword chosen from those available for the border-style property.
border-left-width - CSS: Cascading Style Sheets
syntax /* keyword values */ border-left-width: thin; border-left-width: medium; border-left-width: thick; /* <length> values */ border-left-width: 10em; border-left-width: 3vmax; border-left-width: 6px; /*
global keywords */ border-left-width: inherit; border-left-width: initial; border-left-width: unset; values <line-width> defines the width of the border, either as an explicit nonnegative <length> or a keyword.
border-radius - CSS: Cascading Style Sheets
adius: 10px / 20px; /* (first radius values) / top-left-and-bottom-right | top-right-and-bottom-left */ border-radius: 10px 5% / 20px 30px; /* (first radius values) / top-left | top-right-and-bottom-left | bottom-right */ border-radius: 10px 5px 2em / 20px 25px 30%; /* (first radius values) / top-left | top-right | bottom-right | bottom-left */ border-radius: 10px 5% / 20px 25em 30px 35em; /*
global values */ border-radius: inherit; border-radius: initial; border-radius: unset; the border-radius property is specified as: one, two, three, or four <length> or <percentage> values.
border-right-color - CSS: Cascading Style Sheets
syntax /* <color> values */ border-right-color: red; border-right-color: #ffbb00; border-right-color: rgb(255, 0, 0); border-right-color: hsla(100%, 50%, 25%, 0.75); border-right-color: currentcolor; border-right-color: transparent; /*
global values */ border-right-color: inherit; border-right-color: initial; border-right-color: unset; the border-right-color property is specified as a single value.
border-right-style - CSS: Cascading Style Sheets
syntax /* keyword values */ border-right-style: none; border-right-style: hidden; border-right-style: dotted; border-right-style: dashed; border-right-style: solid; border-right-style: double; border-right-style: groove; border-right-style: ridge; border-right-style: inset; border-right-style: outset; /*
global values */ border-right-style: inherit; border-right-style: initial; border-right-style: unset; the border-right-style property is specified as a single keyword chosen from those available for the border-style property.
border-right-width - CSS: Cascading Style Sheets
syntax /* keyword values */ border-right-width: thin; border-right-width: medium; border-right-width: thick; /* <length> values */ border-right-width: 10em; border-right-width: 3vmax; border-right-width: 6px; /*
global keywords */ border-right-width: inherit; border-right-width: initial; border-right-width: unset; values <line-width> defines the width of the border, either as an explicit nonnegative <length> or a keyword.
border-spacing - CSS: Cascading Style Sheets
syntax /* <length> */ border-spacing: 2px; /* horizontal <length> | vertical <length> */ border-spacing: 1cm 2em; /*
global values */ border-spacing: inherit; border-spacing: initial; border-spacing: unset; the border-spacing property may be specified as either one or two values.
border-start-end-radius - CSS: Cascading Style Sheets
/* <length> values */ /* with one value the corner will be a circle */ border-start-end-radius: 10px; border-start-end-radius: 1em; /* with two values the corner will be an ellipse */ border-start-end-radius: 1em 2em; /*
global values */ border-start-end-radius: inherit; border-start-end-radius: initial; border-start-end-radius: unset; for instance, in a horizontal-tb writing mode this property corresponds to the border-bottom-left-radius property.
border-start-start-radius - CSS: Cascading Style Sheets
/* <length> values */ /* with one value the corner will be a circle */ border-start-start-radius: 10px; border-start-start-radius: 1em; /* with two values the corner will be an ellipse */ border-start-start-radius: 1em 2em; /*
global values */ border-start-start-radius: inherit; border-start-start-radius: initial; border-start-start-radius: unset; for instance, in a horizontal-tb writing mode this property corresponds to the border-top-left-radius property.
border-style - CSS: Cascading Style Sheets
border-style: hidden; border-style: dotted; border-style: dashed; border-style: solid; border-style: double; border-style: groove; border-style: ridge; border-style: inset; border-style: outset; /* vertical | horizontal */ border-style: dotted solid; /* top | horizontal | bottom */ border-style: hidden double dashed; /* top | right | bottom | left */ border-style: none solid dotted dashed; /*
global values */ border-style: inherit; border-style: initial; border-style: unset; the border-style property may be specified using one, two, three, or four values.
border-top-color - CSS: Cascading Style Sheets
syntax /* <color> values */ border-top-color: red; border-top-color: #ffbb00; border-top-color: rgb(255, 0, 0); border-top-color: hsla(100%, 50%, 25%, 0.75); border-top-color: currentcolor; border-top-color: transparent; /*
global values */ border-top-color: inherit; border-top-color: initial; border-top-color: unset; the border-top-color property is specified as a single value.
border-top-style - CSS: Cascading Style Sheets
syntax /* keyword values */ border-top-style: none; border-top-style: hidden; border-top-style: dotted; border-top-style: dashed; border-top-style: solid; border-top-style: double; border-top-style: groove; border-top-style: ridge; border-top-style: inset; border-top-style: outset; /*
global values */ border-top-style: inherit; border-top-style: initial; border-top-style: unset; the border-top-style property is specified as a single keyword chosen from those available for the border-style property.
border-top-width - CSS: Cascading Style Sheets
syntax /* keyword values */ border-top-width: thin; border-top-width: medium; border-top-width: thick; /* <length> values */ border-top-width: 10em; border-top-width: 3vmax; border-top-width: 6px; /*
global keywords */ border-top-width: inherit; border-top-width: initial; border-top-width: unset; values <line-width> defines the width of the border, either as an explicit nonnegative <length> or a keyword.
border-width - CSS: Cascading Style Sheets
border-left-width border-right-width border-top-width syntax /* keyword values */ border-width: thin; border-width: medium; border-width: thick; /* <length> values */ border-width: 4px; border-width: 1.2rem; /* vertical | horizontal */ border-width: 2px 1.5em; /* top | horizontal | bottom */ border-width: 1px 2em 1.5cm; /* top | right | bottom | left */ border-width: 1px 2em 0 4rem; /*
global keywords */ border-width: inherit; border-width: initial; border-width: unset; the border-width property may be specified using one, two, three, or four values.
border - CSS: Cascading Style Sheets
constituent properties this property is a shorthand for the following css properties: border-color border-style border-width syntax /* style */ border: solid; /* width | style */ border: 2px dotted; /* style | color */ border: outset #f33; /* width | style | color */ border: medium dashed green; /*
global values */ border: inherit; border: initial; border: unset; the border property may be specified using one, two, or three of the values listed below.
bottom - CSS: Cascading Style Sheets
syntax /* <length> values */ bottom: 3px; bottom: 2.4em; /* <percentage>s of the height of the containing block */ bottom: 10%; /* keyword value */ bottom: auto; /*
global values */ bottom: inherit; bottom: initial; bottom: unset; values <length> a negative, null, or positive <length> that represents: for absolutely positioned elements, the distance to the bottom edge of the containing block.
box-align - CSS: Cascading Style Sheets
/* keyword values */ box-align: start; box-align: center; box-align: end; box-align: baseline; box-align: stretch; /*
global values */ box-lines: inherit; box-lines: initial; box-lines: unset; the direction of layout depends on the element's orientation: horizontal or vertical.
box-decoration-break - CSS: Cascading Style Sheets
the specified value will impact the appearance of the following properties: background border border-image box-shadow clip-path margin padding syntax /* keyword values */ box-decoration-break: slice; box-decoration-break: clone; /*
global values */ box-decoration-break: initial; box-decoration-break: inherit; box-decoration-break: unset; the box-decoration-break property is specified as one of the keyword values listed below.
box-direction - CSS: Cascading Style Sheets
/* keyword values */ box-direction: normal; box-direction: reverse; /*
global values */ box-direction: inherit; box-direction: initial; box-direction: unset; syntax the box-direction property is specified as one of the keyword values listed below.
box-flex-group - CSS: Cascading Style Sheets
/* <integer> values */ box-flex-group: 1; box-flex-group: 5; /*
global values */ box-flex-group: inherit; box-flex-group: initial; box-flex-group: unset; for flexible elements assigned to flex groups, the first flex group is 1 and higher values specify subsequent flex groups.
box-flex - CSS: Cascading Style Sheets
/* <number> values */ -moz-box-flex: 0; -moz-box-flex: 2; -moz-box-flex: 3.5; -webkit-box-flex: 0; -webkit-box-flex: 2; -webkit-box-flex: 3.5; /*
global values */ -moz-box-flex: inherit; -moz-box-flex: initial; -moz-box-flex: unset; -webkit-box-flex: inherit; -webkit-box-flex: initial; -webkit-box-flex: unset; syntax the box-flex property is specified as a <number>.
box-lines - CSS: Cascading Style Sheets
/* keyword values */ box-lines: single; box-lines: multiple; /*
global values */ box-lines: inherit; box-lines: initial; box-lines: unset; by default a horizontal box will lay out its children in a single row, and a vertical box will lay out its children in a single column.
box-ordinal-group - CSS: Cascading Style Sheets
/* <integer> values */ box-ordinal-group: 1; box-ordinal-group: 5; /*
global values */ box-ordinal-group: inherit; box-ordinal-group: initial; box-ordinal-group: unset; ordinal groups may be used in conjunction with the box-direction property to control the order in which the direct children of a box appear.
box-orient - CSS: Cascading Style Sheets
/* keyword values */ box-orient: horizontal; box-orient: vertical; box-orient: inline-axis; box-orient: block-axis; /*
global values */ box-orient: inherit; box-orient: initial; box-orient: unset; syntax the box-orient property is specified as one of the keyword values listed below.
box-pack - CSS: Cascading Style Sheets
/* keyword values */ box-pack: start; box-pack: center; box-pack: end; box-pack: justify; /*
global values */ box-pack: inherit; box-pack: initial; box-pack: unset; the direction of layout depends on the element's orientation: horizontal or vertical.
box-shadow - CSS: Cascading Style Sheets
*/ box-shadow: 60px -16px teal; /* offset-x | offset-y | blur-radius | color */ box-shadow: 10px 5px 5px black; /* offset-x | offset-y | blur-radius | spread-radius | color */ box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2); /* inset | offset-x | offset-y | color */ box-shadow: inset 5em 1em gold; /* any number of shadows, separated by commas */ box-shadow: 3px 3px red, -1em 0 0.4em olive; /*
global keywords */ box-shadow: inherit; box-shadow: initial; box-shadow: unset; specify a single box-shadow using: two, three, or four <length> values.
break-after - CSS: Cascading Style Sheets
ric break values */ break-after: auto; break-after: avoid; break-after: always; break-after: all; /* page break values */ break-after: avoid-page; break-after: page; break-after: left; break-after: right; break-after: recto; break-after: verso; /* column break values */ break-after: avoid-column; break-after: column; /* region break values */ break-after: avoid-region; break-after: region; /*
global values */ break-after: inherit; break-after: initial; break-after: unset; each possible break point (in other words, each element boundary) is affected by three properties: the break-after value of the previous element, the break-before value of the next element, and the break-inside value of the containing element.
break-before - CSS: Cascading Style Sheets
es */ break-before: auto; break-before: avoid; break-before: always; break-before: all; /* page break values */ break-before: avoid-page; break-before: page; break-before: left; break-before: right; break-before: recto; break-before: verso; /* column break values */ break-before: avoid-column; break-before: column; /* region break values */ break-before: avoid-region; break-before: region; /*
global values */ break-before: inherit; break-before: initial; break-before: unset; each possible break point (in other words, each element boundary) is affected by three properties: the break-after value of the previous element, the break-before value of the next element, and the break-inside value of the containing element.
break-inside - CSS: Cascading Style Sheets
/* keyword values */ break-inside: auto; break-inside: avoid; break-inside: avoid-page; break-inside: avoid-column; break-inside: avoid-region; /*
global values */ break-inside: inherit; break-inside: initial; break-inside: unset; each possible break point (in other words, each element boundary) is affected by three properties: the break-after value of the previous element, the break-before value of the next element, and the break-inside value of the containing element.
caption-side - CSS: Cascading Style Sheets
syntax /* directional values */ caption-side: top; caption-side: bottom; /* warning: non-standard values */ caption-side: left; caption-side: right; caption-side: top-outside; caption-side: bottom-outside; /*
global values */ caption-side: inherit; caption-side: initial; caption-side: unset; the caption-side property is specified as one of the keyword values listed below.
clear - CSS: Cascading Style Sheets
#container::after { content: ""; display: block; clear: both; } syntax /* keyword values */ clear: none; clear: left; clear: right; clear: both; clear: inline-start; clear: inline-end; /*
global values */ clear: inherit; clear: initial; clear: unset; values none is a keyword indicating that the element is not moved down to clear past floating elements.
clip-path - CSS: Cascading Style Sheets
; clip-path: stroke-box; clip-path: view-box; /* <basic-shape> values */ clip-path: inset(100px 50px); clip-path: circle(50px at 0 100px); clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); clip-path: 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'); /* box and shape values combined */ clip-path: padding-box circle(50px at 0 100px); /*
global values */ clip-path: inherit; clip-path: initial; clip-path: unset; the clip-path property is specified as one or a combination of the values listed below.
clip - CSS: Cascading Style Sheets
/* keyword value */ clip: auto; /* <shape> values */ clip: rect(1px 10em 3rem 2ch); clip: rect(1px, 10em, 3rem, 2ch); /*
global values */ clip: inherit; clip: initial; clip: unset; syntax note: where possible, authors are encouraged to use the newer clip-path property instead.
color - CSS: Cascading Style Sheets
/ color: rgb(34, 12, 64, 0.6); color: rgba(34, 12, 64, 0.6); color: rgb(34 12 64 / 0.6); color: rgba(34 12 64 / 0.3); color: rgb(34.0 12 64 / 60%); color: rgba(34.6 12 64 / 30%); /* <hsl()> values */ color: hsl(30, 100%, 50%, 0.6); color: hsla(30, 100%, 50%, 0.6); color: hsl(30 100% 50% / 0.6); color: hsla(30 100% 50% / 0.6); color: hsl(30.0 100% 50% / 60%); color: hsla(30.2 100% 50% / 60%); /*
global values */ color: inherit; color: initial; color: unset; the color property is specified as a single <color> value.
column-count - CSS: Cascading Style Sheets
syntax /* keyword value */ column-count: auto; /* <integer> value */ column-count: 3; /*
global values */ column-count: inherit; column-count: initial; column-count: unset; values auto the number of columns is determined by other css properties, such as column-width.
column-fill - CSS: Cascading Style Sheets
syntax /* keyword values */ column-fill: auto; column-fill: balance; column-fill: balance-all; /*
global values */ column-fill: inherit; column-fill: initial; column-fill: unset; the column-fill property is specified as one of the keyword values listed below.
column-gap (grid-column-gap) - CSS: Cascading Style Sheets
syntax /* keyword value */ column-gap: normal; /* <length> values */ column-gap: 3px; column-gap: 2.5em; /* <percentage> value */ column-gap: 3%; /*
global values */ column-gap: inherit; column-gap: initial; column-gap: unset; the column-gap property is specified as one of the values listed below.
column-rule-color - CSS: Cascading Style Sheets
syntax /* <color> values */ column-rule-color: red; column-rule-color: rgb(192, 56, 78); column-rule-color: transparent; column-rule-color: hsla(0, 100%, 50%, 0.6); /*
global values */ column-rule-color: inherit; column-rule-color: initial; column-rule-color: unset; the column-rule-color property is specified as a single <color> value.
column-rule-style - CSS: Cascading Style Sheets
syntax /* <'border-style'> values */ column-rule-style: none; column-rule-style: hidden; column-rule-style: dotted; column-rule-style: dashed; column-rule-style: solid; column-rule-style: double; column-rule-style: groove; column-rule-style: ridge; column-rule-style: inset; column-rule-style: outset; /*
global values */ column-rule-style: inherit; column-rule-style: initial; column-rule-style: unset; the column-rule-style property is specified as a single <'border-style'> value.
column-rule-width - CSS: Cascading Style Sheets
syntax /* keyword values */ column-rule-width: thin; column-rule-width: medium; column-rule-width: thick; /* <length> values */ column-rule-width: 1px; column-rule-width: 2.5em; /*
global values */ column-rule-width: inherit; column-rule-width: initial; column-rule-width: unset; the column-rule-width property is specified as a single <'border-width'> value.
column-rule - CSS: Cascading Style Sheets
syntax column-rule: dotted; column-rule: solid 8px; column-rule: solid blue; column-rule: thick inset blue; /*
global values */ column-rule: inherit; column-rule: initial; column-rule: unset; the column-rule property is specified as one, two, or three of the values listed below, in any order.
column-span - CSS: Cascading Style Sheets
/* keyword values */ column-span: none; column-span: all; /*
global values */ column-span: inherit; column-span: initial; column-span: unset; an element that spans more than one column is called a spanning element.
column-width - CSS: Cascading Style Sheets
syntax /* keyword value */ column-width: auto; /* <length> values */ column-width: 60px; column-width: 15.5em; column-width: 3.3vw; /*
global values */ column-width: inherit; column-width: initial; column-width: unset; the column-width property is specified as one of the values listed below.
columns - CSS: Cascading Style Sheets
constituent properties this property is a shorthand for the following css properties: column-count column-width syntax /* column width */ columns: 18em; /* column count */ columns: auto; columns: 2; /* both column width and count */ columns: 2 auto; columns: auto 12em; columns: auto auto; /*
global values */ columns: inherit; columns: initial; columns: unset; the columns property may be specified as one or two of the values listed below, in any order.
contain - CSS: Cascading Style Sheets
syntax /* keyword values */ contain: none; contain: strict; contain: content; contain: size; contain: layout; contain: style; contain: paint; /* multiple keywords */ contain: size paint; contain: size layout paint; /*
global values */ contain: inherit; contain: initial; contain: unset; the contain property is specified as either one of the following: using a single none, strict, or content keyword.
content - CSS: Cascading Style Sheets
apter_counter); content: counters(section_counter, "."); /* attr() value linked to the html attribute value */ content: attr(value string); /* language- and position-dependent keywords */ content: open-quote; content: close-quote; content: no-open-quote; content: no-close-quote; /* except for normal and none, several values can be used simultaneously */ content: open-quote chapter_counter; /*
global values */ content: inherit; content: initial; content: unset; syntax values none the pseudo-element is not generated.
counter-increment - CSS: Cascading Style Sheets
syntax /* increment "my-counter" by 1 */ counter-increment: my-counter; /* decrement "my-counter" by 1 */ counter-increment: my-counter -1; /* increment "counter1" by 1, and decrement "counter2" by 4 */ counter-increment: counter1 counter2 -4; /* do not increment/decrement anything: used to override less specific rules */ counter-increment: none; /*
global values */ counter-increment: inherit; counter-increment: initial; counter-increment: unset; the counter-increment property is specified as either one of the following: a <custom-ident> naming the counter, followed optionally by an <integer>.
counter-reset - CSS: Cascading Style Sheets
syntax /* set "my-counter" to 0 */ counter-reset: my-counter; /* set "my-counter" to -1 */ counter-reset: my-counter -1; /* set "counter1" to 1, and "counter2" to 4 */ counter-reset: counter1 1 counter2 4; /* cancel any reset that could have been set in less specific rules */ counter-reset: none; /*
global values */ counter-reset: inherit; counter-reset: initial; counter-reset: unset; the counter-reset property is specified as either one of the following: a <custom-ident> naming the counter, followed optionally by an <integer>.
counter-set - CSS: Cascading Style Sheets
syntax /* set "my-counter" to 0 */ counter-set: my-counter; /* set "my-counter" to -1 */ counter-set: my-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 optionally by an <integer>.
cursor - CSS: Cascading Style Sheets
syntax /* keyword value */ cursor: pointer; cursor: auto; /* url, with a keyword fallback */ cursor: url(hand.cur), pointer; /* url and coordinates, with a keyword fallback */ cursor: url(cursor1.png) 4 12, auto; cursor: url(cursor2.png) 2 2, pointer; /*
global values */ cursor: inherit; cursor: initial; cursor: unset; the cursor property is specified as zero or more <url> values, separated by commas, followed by a single mandatory keyword value.
direction - CSS: Cascading Style Sheets
syntax /* keyword values */ direction: ltr; direction: rtl; /*
global values */ direction: inherit; direction: initial; direction: unset; values ltr text and other elements go from left to right.
display - CSS: Cascading Style Sheets
global /*
global values */ display: inherit; display: initial; display: unset; description the individual pages for the different types of value that display can have set on it feature multiple examples of those values in action — see the syntax section.
empty-cells - CSS: Cascading Style Sheets
syntax /* keyword values */ empty-cells: show; empty-cells: hide; /*
global values */ empty-cells: inherit; empty-cells: initial; empty-cells: unset; the empty-cells property is specified as one of the keyword values listed below.
env() - CSS: Cascading Style Sheets
the difference is that, as well as being user-agent defined rather than user-defined, environment variables are
globally scoped to a document, whereas custom properties are scoped to the element(s) on which they are declared.
filter - CSS: Cascading Style Sheets
s.svg#filter-id"); /* <filter-function> values */ filter: blur(5px); filter: brightness(0.4); filter: contrast(200%); filter: drop-shadow(16px 16px 20px blue); filter: grayscale(50%); filter: hue-rotate(90deg); filter: invert(75%); filter: opacity(25%); filter: saturate(30%); filter: sepia(60%); /* multiple filters */ filter: contrast(175%) brightness(3%); /* use no filter */ filter: none; /*
global values */ filter: inherit; filter: initial; filter: unset; with a function, use the following: filter: <filter-function> [<filter-function>]* | none for a reference to an svg <filter> element, use the following: filter: url(file.svg#filter-element-id) interpolation if both the beginning and end filters have a function list of the same length without <url>, each of their filter functions ...
flex-basis - CSS: Cascading Style Sheets
syntax /* specify <'width'> */ flex-basis: 10em; flex-basis: 3px; flex-basis: auto; /* intrinsic sizing keywords */ flex-basis: fill; flex-basis: max-content; flex-basis: min-content; flex-basis: fit-content; /* automatically size based on the flex item’s content */ flex-basis: content; /*
global values */ flex-basis: inherit; flex-basis: initial; flex-basis: unset; the flex-basis property is specified as either the keyword content or a <'width'>.
flex-direction - CSS: Cascading Style Sheets
syntax /* the direction text is laid out in a line */ flex-direction: row; /* like <row>, but reversed */ flex-direction: row-reverse; /* the direction in which lines of text are stacked */ flex-direction: column; /* like <column>, but reversed */ flex-direction: column-reverse; /*
global values */ flex-direction: inherit; flex-direction: initial; flex-direction: unset; values the following values are accepted: row the flex container's main-axis is defined to be the same as the text direction.
flex-flow - CSS: Cascading Style Sheets
flex-direction flex-wrap syntax /* flex-flow: <'flex-direction'> */ flex-flow: row; flex-flow: row-reverse; flex-flow: column; flex-flow: column-reverse; /* flex-flow: <'flex-wrap'> */ flex-flow: nowrap; flex-flow: wrap; flex-flow: wrap-reverse; /* flex-flow: <'flex-direction'> and <'flex-wrap'> */ flex-flow: row nowrap; flex-flow: column wrap; flex-flow: column-reverse wrap-reverse; /*
global values */ flex-flow: inherit; flex-flow: initial; flex-flow: unset; values see flex-direction and flex-wrap for details on the values.
flex-grow - CSS: Cascading Style Sheets
syntax /* <number> values */ flex-grow: 3; flex-grow: 0.6; /*
global values */ flex-grow: inherit; flex-grow: initial; flex-grow: unset; the flex-grow property is specified as a single <number>.
flex-shrink - CSS: Cascading Style Sheets
syntax /* <number> values */ flex-shrink: 2; flex-shrink: 0.6; /*
global values */ flex-shrink: inherit; flex-shrink: initial; flex-shrink: unset; the flex-shrink property is specified as a single <number>.
flex-wrap - CSS: Cascading Style Sheets
syntax flex-wrap: nowrap; /* default value */ flex-wrap: wrap; flex-wrap: wrap-reverse; /*
global values */ flex-wrap: inherit; flex-wrap: initial; flex-wrap: unset; the flex-wrap property is specified as a single keyword chosen from the list of values below.
flex - CSS: Cascading Style Sheets
sis syntax /* keyword values */ flex: auto; flex: initial; flex: none; /* one value, unitless number: flex-grow */ flex: 2; /* one value, width/height: flex-basis */ flex: 10em; flex: 30%; flex: min-content; /* two values: flex-grow | flex-basis */ flex: 1 30px; /* two values: flex-grow | flex-shrink */ flex: 2 2; /* three values: flex-grow | flex-shrink | flex-basis */ flex: 2 2 10%; /*
global values */ flex: inherit; flex: initial; flex: unset; the flex property may be specified using one, two, or three values.
float - CSS: Cascading Style Sheets
syntax /* keyword values */ float: left; float: right; float: none; float: inline-start; float: inline-end; /*
global values */ float: inherit; float: initial; float: unset; the float property is specified as a single keyword, chosen from the list of values below.
font-family - CSS: Cascading Style Sheets
ns-serif; font-family: "goudy bookletter 1911", sans-serif; /* a generic family name only */ font-family: serif; font-family: sans-serif; font-family: monospace; font-family: cursive; font-family: fantasy; font-family: system-ui; font-family: ui-serif; font-family: ui-sans-serif; font-family: ui-monospace; font-family: ui-rounded; font-family: emoji; font-family: math; font-family: fangsong; /*
global values */ font-family: inherit; font-family: initial; font-family: unset; the font-family property lists one or more font families, separated by commas.
font-feature-settings - CSS: Cascading Style Sheets
syntax /* use the default settings */ font-feature-settings: normal; /* set values for opentype feature tags */ font-feature-settings: "smcp"; font-feature-settings: "smcp" on; font-feature-settings: "swsh" 2; font-feature-settings: "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-position.
font-language-override - CSS: Cascading Style Sheets
/* keyword value */ font-language-override: normal; /* <string> values */ font-language-override: "eng"; /* use english glyphs */ font-language-override: "trk"; /* use turkish glyphs */ /*
global values */ font-language-override: initial; font-language-override: inherit; font-language-override: unset; by default, html's lang attribute tells browsers to display glyphs designed specifically for that language.
font-optical-sizing - CSS: Cascading Style Sheets
syntax /* keyword values */ font-optical-sizing: none; font-optical-sizing: auto; /* default */ /*
global values */ font-optical-sizing: inherit; font-optical-sizing: initial; font-optical-sizing: unset; values none the browser will not modify the shape of glyphs for optimal viewing.
font-size-adjust - CSS: Cascading Style Sheets
/* use the specified font size */ font-size-adjust: none; /* use a font size that makes lowercase letters half the specified font size */ font-size-adjust: 0.5; /*
global values */ font-size-adjust: inherit; font-size-adjust: initial; font-size-adjust: unset; the property is useful since the legibility of fonts, especially at small sizes, is determined more by the size of lowercase letters than by the size of capital letters.
font-size - CSS: Cascading Style Sheets
syntax /* <absolute-size> values */ font-size: xx-small; font-size: x-small; font-size: small; font-size: medium; font-size: large; font-size: x-large; font-size: xx-large; font-size: xxx-large; /* <relative-size> values */ font-size: smaller; font-size: larger; /* <length> values */ font-size: 12px; font-size: 0.8em; /* <percentage> values */ font-size: 80%; /*
global values */ font-size: inherit; font-size: initial; font-size: unset; the font-size property is specified in one of the following ways: as one of the absolute-size or relative-size keywords as a <length> or a <percentage>, relative to the parent element's font size values xx-small, x-small, small, medium, large, x-large, xx-large, xxx-large absolute-size keywords, based on the user's de...
font-stretch - CSS: Cascading Style Sheets
/* keyword values */ font-stretch: ultra-condensed; font-stretch: extra-condensed; font-stretch: condensed; font-stretch: semi-condensed; font-stretch: normal; font-stretch: semi-expanded; font-stretch: expanded; font-stretch: extra-expanded; font-stretch: ultra-expanded; /* percentage values */ font-stretch: 50%; font-stretch: 100%; font-stretch: 200%; /*
global values */ font-stretch: inherit; font-stretch: initial; font-stretch: unset; syntax this property may be specified as a single keyword value or a single <percentage> value.
font-style - CSS: Cascading Style Sheets
syntax font-style: normal; font-style: italic; font-style: oblique; font-style: oblique 10deg; /*
global values */ font-style: inherit; font-style: initial; font-style: unset; the font-style property is specified as a single keyword chosen from the list of values below, which can optionally include an angle if the keyword is oblique.
font-variant-alternates - CSS: Cascading Style Sheets
t-variant-alternates: stylistic(user-defined-ident); font-variant-alternates: styleset(user-defined-ident); font-variant-alternates: character-variant(user-defined-ident); font-variant-alternates: swash(user-defined-ident); font-variant-alternates: ornaments(user-defined-ident); font-variant-alternates: annotation(user-defined-ident); font-variant-alternates: swash(ident1) annotation(ident2); /*
global values */ font-variant-alternates: initial; font-variant-alternates: inherit; font-variant-alternates: unset; the @font-feature-values at-rule can define names for alternative glyph functions (stylistic, styleset, character-variant, swash, ornament or annotation), associating the name with opentype parameters.
font-variant-caps - CSS: Cascading Style Sheets
syntax /* keyword values */ font-variant-caps: normal; font-variant-caps: small-caps; font-variant-caps: all-small-caps; font-variant-caps: petite-caps; font-variant-caps: all-petite-caps; font-variant-caps: unicase; font-variant-caps: titling-caps; /*
global values */ font-variant-caps: inherit; font-variant-caps: initial; font-variant-caps: unset; the font-variant-caps property is specified using a single keyword value from the list below.
font-variant-east-asian - CSS: Cascading Style Sheets
/* <east-asian-variant-values> */ font-variant-east-asian: simplified; /* <east-asian-variant-values> */ font-variant-east-asian: traditional; /* <east-asian-variant-values> */ font-variant-east-asian: full-width; /* <east-asian-width-values> */ font-variant-east-asian: proportional-width; /* <east-asian-width-values> */ font-variant-east-asian: ruby full-width jis83; /*
global values */ font-variant-east-asian: inherit; font-variant-east-asian: initial; font-variant-east-asian: unset; syntax values normal this keyword leads to the deactivation of the use of such alternate glyphs.
font-variant-ligatures - CSS: Cascading Style Sheets
tures: no-discretionary-ligatures; /* <discretionary-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-ligatures: no-contextual; /* <contextual-alt-values> */ /*
global values */ font-variant-ligatures: inherit; font-variant-ligatures: initial; font-variant-ligatures: unset; the font-variant-ligatures property is specified as one of the keyword values listed below.
font-variant-numeric - CSS: Cascading Style Sheets
-nums; /* <numeric-figure-values> */ font-variant-numeric: proportional-nums; /* <numeric-spacing-values> */ font-variant-numeric: tabular-nums; /* <numeric-spacing-values> */ font-variant-numeric: diagonal-fractions; /* <numeric-fraction-values> */ font-variant-numeric: stacked-fractions; /* <numeric-fraction-values> */ font-variant-numeric: oldstyle-nums stacked-fractions; /*
global values */ font-variant-numeric: inherit; font-variant-numeric: initial; font-variant-numeric: unset; this property can take one of two forms: either the keyword value normal or one or more of the other values listed below, space-separated, in any order.
font-variant-position - CSS: Cascading Style Sheets
/* keyword values */ font-variant-position: normal; font-variant-position: sub; font-variant-position: super; /*
global values */ font-variant-position: inherit; font-variant-position: initial; font-variant-position: unset; when the usage of these alternate glyphs is activated, if one character in the run doesn't have such a typographically-enhanced glyph, the whole set of characters of the run is rendered using a fallback method, synthesizing these glyphs.
font-variant - CSS: Cascading Style Sheets
constituent properties this property is a shorthand for the following css properties: font-variant-alternates font-variant-caps font-variant-east-asian font-variant-ligatures font-variant-numeric syntax font-variant: small-caps; font-variant: common-ligatures small-caps; /*
global values */ font-variant: inherit; font-variant: initial; font-variant: unset; values normal specifies a normal font face; each of the longhand properties has an initial value of normal.
font-variation-settings - CSS: Cascading Style Sheets
syntax /* use the default settings */ font-variation-settings: normal; /* set values for variable font axis names */ font-variation-settings: "xhgt" 0.7; /*
global values */ font-variation-settings: inherit; font-variation-settings: initial; font-variation-settings: unset; values this property's value can take one of two forms: normal text is laid out using default settings.
font-weight - CSS: Cascading Style Sheets
syntax /* keyword values */ font-weight: normal; font-weight: bold; /* keyword values relative to the parent */ font-weight: lighter; font-weight: bolder; /* numeric keyword values */ font-weight: 100; font-weight: 200; font-weight: 300; font-weight: 400;// normal font-weight: 500; font-weight: 600; font-weight: 700;// bold font-weight: 800; font-weight: 900; /*
global values */ font-weight: inherit; font-weight: initial; font-weight: unset; the font-weight property is specified using any one of the values listed below.
gap (grid-gap) - CSS: Cascading Style Sheets
syntax /* one <length> value */ gap: 20px; gap: 1em; gap: 3vmin; gap: 0.5cm; /* one <percentage> value */ 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 optionally by a value for <'column-gap'>.
grid-area - CSS: Cascading Style Sheets
values */ grid-area: 4 some-grid-area; grid-area: 4 some-grid-area / 2 another-grid-area; /* span && [ <integer> || <custom-ident> ] values */ grid-area: span 3; grid-area: span 3 / span some-grid-area; grid-area: 2 span / another-grid-area span; /*
global values */ grid-area: inherit; grid-area: initial; grid-area: unset; values auto is a keyword indicating that the property contributes nothing to the grid item’s placement, indicating auto-placement or a default span of 1.
grid-auto-columns - CSS: Cascading Style Sheets
content(5cm); grid-auto-columns: fit-content(20%); /* multiple track-size values */ grid-auto-columns: min-content max-content auto; grid-auto-columns: 100px 150px 390px; grid-auto-columns: 10% 33.3%; grid-auto-columns: 0.5fr 3fr 1fr; grid-auto-columns: minmax(100px, auto) minmax(max-content, 2fr) minmax(20%, 80vmax); grid-auto-columns: 100px minmax(100px, auto) 10% 0.5fr fit-content(400px); /*
global values */ grid-auto-columns: inherit; grid-auto-columns: initial; grid-auto-columns: unset; values <length> is a non-negative length.
grid-auto-flow - CSS: Cascading Style Sheets
syntax /* keyword values */ grid-auto-flow: row; grid-auto-flow: column; grid-auto-flow: dense; grid-auto-flow: row dense; grid-auto-flow: column dense; /*
global values */ grid-auto-flow: inherit; grid-auto-flow: initial; grid-auto-flow: unset; this property may take one of two forms: a single keyword: one of row, column, or dense.
grid-auto-rows - CSS: Cascading Style Sheets
rows: minmax(max-content, 2fr); grid-auto-rows: minmax(20%, 80vmax); /* multiple track-size values */ grid-auto-rows: min-content max-content auto; grid-auto-rows: 100px 150px 390px; grid-auto-rows: 10% 33.3%; grid-auto-rows: 0.5fr 3fr 1fr; grid-auto-rows: minmax(100px, auto) minmax(max-content, 2fr) minmax(20%, 80vmax); grid-auto-rows: 100px minmax(100px, auto) 10% 0.5fr fit-content(400px); /*
global values */ grid-auto-rows: inherit; grid-auto-rows: initial; grid-auto-rows: unset; values <length> is a non-negative length.
grid-column-end - CSS: Cascading Style Sheets
syntax /* keyword value */ grid-column-end: auto; /* <custom-ident> values */ grid-column-end: somegridarea; /* <integer> + <custom-ident> values */ grid-column-end: 2; grid-column-end: somegridarea 4; /* span + <integer> + <custom-ident> values */ grid-column-end: span 3; grid-column-end: span somegridarea; grid-column-end: 5 somegridarea span; /*
global values */ grid-column-end: inherit; grid-column-end: initial; grid-column-end: unset; values auto is a keyword indicating that the property contributes nothing to the grid item’s placement, indicating auto-placement, an automatic span, or a default span of 1.
grid-column-start - CSS: Cascading Style Sheets
syntax /* keyword value */ grid-column-start: auto; /* <custom-ident> value */ grid-column-start: somegridarea; /* <integer> + <custom-ident> values */ grid-column-start: 2; grid-column-start: somegridarea 4; /* span + <integer> + <custom-ident> values */ grid-column-start: span 3; grid-column-start: span somegridarea; grid-column-start: span somegridarea 5; /*
global values */ grid-column-start: inherit; grid-column-start: initial; grid-column-start: unset; this property is specified as a single <grid-line> value.
grid-row-end - CSS: Cascading Style Sheets
syntax /* keyword value */ grid-row-end: auto; /* <custom-ident> values */ grid-row-end: somegridarea; /* <integer> + <custom-ident> values */ grid-row-end: 2; grid-row-end: somegridarea 4; /* span + <integer> + <custom-ident> values */ grid-row-end: span 3; grid-row-end: span somegridarea; grid-row-end: 5 somegridarea span; /*
global values */ grid-row-end: inherit; grid-row-end: initial; grid-row-end: unset; values auto is a keyword indicating that the property contributes nothing to the grid item’s placement, indicating auto-placement, an automatic span, or a default span of 1.
grid-row-start - CSS: Cascading Style Sheets
syntax /* keyword value */ grid-row-start: auto; /* <custom-ident> values */ grid-row-start: somegridarea; /* <integer> + <custom-ident> values */ grid-row-start: 2; grid-row-start: somegridarea 4; /* span + <integer> + <custom-ident> values */ grid-row-start: span 3; grid-row-start: span somegridarea; grid-row-start: 5 somegridarea span; /*
global values */ grid-row-start: inherit; grid-row-start: initial; grid-row-start: unset; this property is specified as a single <grid-line> value.
grid-row - CSS: Cascading Style Sheets
omegridarea; grid-row: somegridarea / someothergridarea; /* <integer> + <custom-ident> values */ grid-row: somegridarea 4; grid-row: 4 somegridarea / 6; /* span + <integer> + <custom-ident> values */ grid-row: span 3; grid-row: span somegridarea; grid-row: 5 somegridarea span; grid-row: span 3 / 6; grid-row: span somegridarea / span someothergridarea; grid-row: 5 somegridarea span / 2 span; /*
global values */ grid-row: inherit; grid-row: initial; grid-row: unset; values auto is a keyword indicating that the property contributes nothing to the grid item’s placement, indicating auto-placement, an automatic span, or a default span of 1.
grid-template-areas - CSS: Cascading Style Sheets
syntax /* keyword value */ grid-template-areas: none; /* <string> values */ grid-template-areas: "a b"; grid-template-areas: "a b b" "a c d"; /*
global values */ grid-template-areas: inherit; grid-template-areas: initial; grid-template-areas: unset; values none the grid container doesn’t define any named grid areas.
grid-template-columns - CSS: Cascading Style Sheets
ll, 100px) 300px; grid-template-columns: minmax(100px, max-content) repeat(auto-fill, 200px) 20%; grid-template-columns: [linename1] 100px [linename2] repeat(auto-fit, [linename3 linename4] 300px) 100px; grid-template-columns: [linename1 linename2] 100px repeat(auto-fit, [linename1] 300px) [linename3]; /*
global values */ grid-template-columns: inherit; grid-template-columns: initial; grid-template-columns: unset; values none indicates that there is no explicit grid.
grid-template-rows - CSS: Cascading Style Sheets
t(auto-fill, 100px) 300px; grid-template-rows: minmax(100px, max-content) repeat(auto-fill, 200px) 20%; grid-template-rows: [linename1] 100px [linename2] repeat(auto-fit, [linename3 linename4] 300px) 100px; grid-template-rows: [linename1 linename2] 100px repeat(auto-fit, [linename1] 300px) [linename3]; /*
global values */ grid-template-rows: inherit; grid-template-rows: initial; grid-template-rows: unset; this property may be specified as: either the keyword value none or a <track-list> value or an <auto-track-list> value.
grid-template - CSS: Cascading Style Sheets
2] 70%; grid-template: fit-content(100px) / fit-content(40%); /* grid-template-areas grid-template-rows / grid-template-column values */ grid-template: "a a a" "b b b"; grid-template: "a a a" 20% "b b b" auto; grid-template: [header-top] "a a a" [header-bottom] [main-top] "b b b" 1fr [main-bottom] / auto 1fr auto; /*
global values */ grid-template: inherit; grid-template: initial; grid-template: unset; values none is a keyword that sets all three longhand properties to none, meaning there is no explicit grid.
grid - CSS: Cascading Style Sheets
/ <'grid-template-columns'> values */ grid: auto-flow / 200px; grid: auto-flow dense / 30%; grid: auto-flow 300px / repeat(3, [line1 line2 line3] 200px); grid: auto-flow dense 40% / [line1] minmax(20em, max-content); /*
global values */ grid: inherit; grid: initial; grid: unset; values <'grid-template'> defines the grid-template including grid-template-columns, grid-template-rows and grid-template-areas.
hanging-punctuation - CSS: Cascading Style Sheets
g-punctuation: last; hanging-punctuation: force-end; hanging-punctuation: allow-end; /* two keywords */ hanging-punctuation: first force-end; hanging-punctuation: first allow-end; hanging-punctuation: first last; hanging-punctuation: last force-end; hanging-punctuation: last allow-end; /* three keywords */ hanging-punctuation: first force-end last; hanging-punctuation: first allow-end last; /*
global values */ hanging-punctuation: inherit; hanging-punctuation: initial; hanging-punctuation: unset; syntax the hanging-punctuation property may be specified with one, two, or three values.
height - CSS: Cascading Style Sheets
syntax /* keyword value */ height: auto; /* <length> values */ height: 120px; height: 10em; /* <percentage> value */ height: 75%; /*
global values */ height: inherit; height: initial; height: unset; values <length> defines the height as an absolute value.
hyphens - CSS: Cascading Style Sheets
syntax /* keyword values */ hyphens: none; hyphens: manual; hyphens: auto; /*
global values */ hyphens: inherit; hyphens: initial; hyphens: unset; the hyphens property is specified as a single keyword value chosen from the list below.
image-orientation - CSS: Cascading Style Sheets
/* keyword values */ image-orientation: none; image-orientation: from-image; /* use exif data from the image */ /*
global values */ image-orientation: inherit; image-orientation: initial; image-orientation: unset; /* obsolete values.
image-rendering - CSS: Cascading Style Sheets
syntax /* keyword values */ image-rendering: auto; image-rendering: crisp-edges; image-rendering: pixelated; /*
global values */ image-rendering: inherit; image-rendering: initial; image-rendering: unset; values auto the scaling algorithm is ua dependent.
ime-mode - CSS: Cascading Style Sheets
/* keyword values */ ime-mode: auto; ime-mode: normal; ime-mode: active; ime-mode: inactive; ime-mode: disabled; /*
global values */ ime-mode: inherit; ime-mode: initial; ime-mode: unset; the ime-mode property is only partially and inconsistently implemented in browsers.
initial-letter-align - CSS: Cascading Style Sheets
/* keyword values */ initial-letter-align: auto; initial-letter-align: alphabetic; initial-letter-align: hanging; initial-letter-align: ideographic; /*
global values */ initial-letter-align: inherit; initial-letter-align: initial; initial-letter-align: unset; syntax one of the keyword values listed below.
initial-letter - CSS: Cascading Style Sheets
/* keyword values */ initial-letter: normal; /* 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> optionally followed by an <integer>.
inline-size - CSS: Cascading Style Sheets
syntax /* <length> values */ inline-size: 300px; inline-size: 25em; /* <percentage> values */ inline-size: 75%; /* keyword values */ inline-size: max-content; inline-size: min-content; inline-size: fit-content(20em); inline-size: auto; /*
global values */ inline-size: inherit; inline-size: initial; inline-size: unset; if the writing mode is vertically oriented, the value of inline-size relates to the height of the element; otherwise, it relates to the width of the element.
inset-block-end - CSS: Cascading Style Sheets
/* <length> values */ inset-block-end: 3px; inset-block-end: 2.4em; /* <percentage>s of the width or height of the containing block */ inset-block-end: 10%; /* keyword value */ inset-block-end: auto; /*
global values */ inset-block-end: inherit; inset-block-end: initial; inset-block-end: unset; syntax values the inset-block-end property takes the same values as the left property.
inset-block-start - CSS: Cascading Style Sheets
/* <length> values */ inset-block-start: 3px; inset-block-start: 2.4em; /* <percentage>s of the width or height of the containing block */ inset-block-start: 10%; /* keyword value */ inset-block-start: auto; /*
global values */ inset-block-start: inherit; inset-block-start: initial; inset-block-start: unset; syntax values the inset-block-start property takes the same values as the left property.
inset-block - CSS: Cascading Style Sheets
/* <length> values */ inset-block: 3px 10px; inset-block: 2.4em 3em; inset-block: 10px; /* value applied to start and end */ /* <percentage>s of the width or height of the containing block */ inset-block: 10% 5%; /* keyword value */ inset-block: auto; /*
global values */ inset-block: inherit; inset-block: initial; inset-block: unset; constituent properties this property is a shorthand for the following css properties: inset-block-end inset-block-start syntax values the inset-block property takes the same values as the left property.
inset-inline-end - CSS: Cascading Style Sheets
/* <length> values */ inset-inline-end: 3px; inset-inline-end: 2.4em; /* <percentage>s of the width or height of the containing block */ inset-inline-end: 10%; /* keyword value */ inset-inline-end: auto; /*
global values */ inset-inline-end: inherit; inset-inline-end: initial; inset-inline-end: unset; the shorthand for inset-inline-start and inset-inline-end is inset-inline.
inset-inline-start - CSS: Cascading Style Sheets
/* <length> values */ inset-inline-start: 3px; inset-inline-start: 2.4em; /* <percentage>s of the width or height of the containing block */ inset-inline-start: 10%; /* keyword value */ inset-inline-start: auto; /*
global values */ inset-inline-start: inherit; inset-inline-start: initial; inset-inline-start: unset; the shorthand for inset-inline-start and inset-inline-end is inset-inline.
inset-inline - CSS: Cascading Style Sheets
/* <length> values */ inset-inline: 3px 10px; inset-inline: 2.4em 3em; inset-inline: 10px; /* value applied to start and end */ /* <percentage>s of the width or height of the containing block */ inset-inline: 10% 5%; /* keyword value */ inset-inline: auto; /*
global values */ inset-inline: inherit; inset-inline: initial; inset-inline: unset; constituent properties this property is a shorthand for the following css properties: inset-inline-end inset-inline-start syntax values the inset-inline property takes the same values as the left property.
inset - CSS: Cascading Style Sheets
/* <length> values */ inset: 10px; /* value applied to all edges */ inset: 4px 8px; /* top/bottom left/right */ inset: 5px 15px 10px; /* top left/right bottom */ inset: 2.4em 3em 3em 3em; /* top right bottom left */ /* <percentage>s of the width (left/right) or height (top/bottom) of the containing block */ inset: 10% 5% 5% 5%; /* keyword value */ inset: auto; /*
global values */ inset: inherit; inset: initial; inset: unset; syntax values the inset property takes the same values as the left property.
isolation - CSS: Cascading Style Sheets
syntax /* keyword values */ isolation: auto; isolation: isolate; /*
global values */ isolation: inherit; isolation: initial; isolation: unset; the isolation property is specified as one of the keyword values listed below.
justify-content - CSS: Cascading Style Sheets
ify-content: space-evenly; /* distribute items evenly items have equal space around them */ justify-content: stretch; /* distribute items evenly stretch 'auto'-sized items to fit the container */ /* overflow alignment */ justify-content: safe center; justify-content: unsafe center; /*
global values */ justify-content: inherit; justify-content: initial; justify-content: unset; values start the items are packed flush to each other toward the start edge of the alignment container in the main axis.
justify-items - CSS: Cascading Style Sheets
stify-items: right; /* pack items from the right */ /* baseline alignment */ justify-items: baseline; justify-items: first baseline; justify-items: last baseline; /* overflow alignment (for positional alignment only) */ justify-items: safe center; justify-items: unsafe center; /* legacy alignment */ justify-items: legacy right; justify-items: legacy left; justify-items: legacy center; /*
global values */ justify-items: inherit; justify-items: initial; justify-items: unset; this property can take one of four different forms: basic keywords: one of the keyword values normal, auto, or stretch.
justify-self - CSS: Cascading Style Sheets
*/ 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 positional 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.
left - CSS: Cascading Style Sheets
syntax /* <length> values */ left: 3px; left: 2.4em; /* <percentage>s of the width of the containing block */ left: 10%; /* keyword value */ left: auto; /*
global values */ left: inherit; left: initial; left: unset; values <length> a negative, null, or positive <length> that represents: for absolutely positioned elements, the distance to the left edge of the containing block.
letter-spacing - CSS: Cascading Style Sheets
syntax /* keyword value */ letter-spacing: normal; /* <length> values */ letter-spacing: 0.3em; letter-spacing: 3px; letter-spacing: .3px; /*
global values */ letter-spacing: inherit; letter-spacing: initial; letter-spacing: unset; values normal the normal letter spacing for the current font.
line-break - CSS: Cascading Style Sheets
/* keyword values */ line-break: auto; line-break: loose; line-break: normal; line-break: strict; line-break: anywhere; /*
global values */ line-break: inherit; line-break: initial; line-break: unset; syntax values auto break text using the default line break rule.
line-height - CSS: Cascading Style Sheets
syntax /* keyword value */ line-height: normal; /* unitless values: use this number multiplied by the element's font size */ line-height: 3.5; /* <length> values */ line-height: 3em; /* <percentage> values */ line-height: 34%; /*
global values */ line-height: inherit; line-height: initial; line-height: unset; the line-height property is specified as any one of the following: a <number> a <length> a <percentage> the keyword normal.
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> location of image to use as the marker.
list-style-position - CSS: Cascading Style Sheets
syntax /* keyword values */ list-style-position: inside; list-style-position: outside; /*
global values */ list-style-position: inherit; list-style-position: initial; list-style-position: unset; the list-style-position property is specified as one of the keyword values listed below.
list-style-type - CSS: Cascading Style Sheets
* partial list of types */ list-style-type: disc; list-style-type: circle; list-style-type: square; list-style-type: decimal; list-style-type: georgian; list-style-type: trad-chinese-informal; list-style-type: kannada; /* <string> value */ list-style-type: '-'; /* identifier matching an @counter-style rule */ list-style-type: custom-counter-style; /* keyword value */ list-style-type: none; /*
global values */ list-style-type: inherit; list-style-type: initial; list-style-type: unset; the list-style-type property may be defined as any one of: a <custom-ident> value a symbols() value a <string> value the keyword none.
list-style - CSS: Cascading Style Sheets
r the following css properties: list-style-image list-style-position list-style-type syntax /* type */ list-style: square; /* image */ list-style: url('../img/shape.png'); /* position */ list-style: inside; /* type | position */ list-style: georgian inside; /* type | image | position */ list-style: lower-roman url('../img/shape.png') outside; /* keyword value */ list-style: none; /*
global values */ list-style: inherit; list-style: initial; list-style: unset; the list-style property is specified as one, two, or three keywords in any order.
margin-block-end - CSS: Cascading Style Sheets
syntax /* <length> values */ margin-block-end: 10px; /* an absolute length */ margin-block-end: 1em; /* relative to the text size */ margin-block-end: 5%; /* relative to the nearest block container's width */ /* keyword values */ margin-block-end: auto; /*
global values */ margin-block-end: inherit; margin-block-end: initial; margin-block-end: unset; it corresponds to the margin-top, margin-right, margin-bottom, or margin-left property depending on the values defined for writing-mode, direction, and text-orientation.
margin-block-start - CSS: Cascading Style Sheets
syntax /* <length> values */ margin-block-start: 10px; /* an absolute length */ margin-block-start: 1em; /* relative to the text size */ margin-block-start: 5%; /* relative to the nearest block container's width */ /* keyword values */ margin-block-start: auto; /*
global values */ margin-block-start: inherit; margin-block-start: initial; margin-block-start: unset; it corresponds to the margin-top, margin-right, margin-bottom, or margin-left property depending on the values defined for writing-mode, direction, and text-orientation.
margin-block - CSS: Cascading Style Sheets
/* <length> values */ margin-block: 10px 20px; /* an absolute length */ margin-block: 1em 2em; /* relative to the text size */ margin-block: 5% 2%; /* relative to the nearest block container's width */ margin-block: 10px; /* sets both start and end values */ /* keyword values */ margin-block: auto; /*
global values */ margin-block: inherit; margin-block: initial; margin-block: unset; these values corresponds to the margin-top and margin-bottom, or margin-right, and margin-left property depending on the values defined for writing-mode, direction, and text-orientation.
margin-bottom - CSS: Cascading Style Sheets
syntax /* <length> values */ margin-bottom: 10px; /* an absolute length */ margin-bottom: 1em; /* relative to the text size */ margin-bottom: 5%; /* relative to the nearest block container's width */ /* keyword values */ margin-bottom: auto; /*
global values */ margin-bottom: inherit; margin-bottom: initial; margin-bottom: unset; the margin-bottom property is specified as the keyword auto, or a <length>, or a <percentage>.
margin-inline-end - CSS: Cascading Style Sheets
syntax /* <length> values */ margin-inline-end: 10px; /* an absolute length */ margin-inline-end: 1em; /* relative to the text size */ margin-inline-end: 5%; /* relative to the nearest block container's width */ /* keyword values */ margin-inline-end: auto; /*
global values */ margin-inline-end: inherit; margin-inline-end: initial; margin-inline-end: unset; it relates to margin-block-start, margin-block-end, and margin-inline-start, which define the other margins of the element.
margin-inline-start - CSS: Cascading Style Sheets
syntax /* <length> values */ margin-inline-start: 10px; /* an absolute length */ margin-inline-start: 1em; /* relative to the text size */ margin-inline-start: 5%; /* relative to the nearest block container's width */ /* keyword values */ margin-inline-start: auto; /*
global values */ margin-inline-start: inherit; it relates to margin-block-start, margin-block-end, and margin-inline-end, which define the other margins of the element.
margin-inline - CSS: Cascading Style Sheets
/* <length> values */ margin-inline: 10px 20px; /* an absolute length */ margin-inline: 1em 2em; /* relative to the text size */ margin-inline: 5% 2%; /* relative to the nearest block container's width */ margin-inline: 10px; /* sets both start and end values */ /* keyword values */ margin-inline: auto; /*
global values */ margin-inline: inherit; margin-inline: initial; margin-inline: unset; this property corresponds to the margin-top and margin-bottom, or margin-right, and margin-left properties, depending on the values defined for writing-mode, direction, and text-orientation.
margin-left - CSS: Cascading Style Sheets
syntax /* <length> values */ margin-left: 10px; /* an absolute length */ margin-left: 1em; /* relative to the text size */ margin-left: 5%; /* relative to the nearest block container's width */ /* keyword values */ margin-left: auto; /*
global values */ margin-left: inherit; margin-left: initial; margin-left: unset; the margin-left property is specified as the keyword auto, or a <length>, or a <percentage>.
margin-right - CSS: Cascading Style Sheets
syntax /* <length> values */ margin-right: 20px; /* an absolute length */ margin-right: 1em; /* relative to the text size */ margin-right: 5%; /* relative to the nearest block container's width */ /* keyword values */ margin-right: auto; /*
global values */ margin-right: inherit; margin-right: initial; margin-right: unset; the margin-right property is specified as the keyword auto, or a <length>, or a <percentage>.
margin-top - CSS: Cascading Style Sheets
syntax /* <length> values */ margin-top: 10px; /* an absolute length */ margin-top: 1em; /* relative to the text size */ margin-top: 5%; /* relative to the nearest block container's width */ /* keyword values */ margin-top: auto; /*
global values */ margin-top: inherit; margin-top: initial; margin-top: unset; the margin-top property is specified as the keyword auto, or a <length>, or a <percentage>.
margin - CSS: Cascading Style Sheets
syntax /* apply to all four sides */ margin: 1em; margin: -3px; /* vertical | horizontal */ margin: 5% auto; /* top | horizontal | bottom */ margin: 1em auto 2em; /* top | right | bottom | left */ margin: 2px 1em 0 auto; /*
global values */ margin: inherit; margin: initial; margin: unset; the margin property may be specified using one, two, three, or four values.
mask-border-mode - CSS: Cascading Style Sheets
syntax /* keyword values */ mask-border-mode: luminance; mask-border-mode: alpha; /*
global values */ mask-border-mode: inherit; mask-border-mode: initial; mask-border-mode: unset; values luminance the luminance values of the mask border image are used as the mask values.
mask-border-outset - CSS: Cascading Style Sheets
syntax /* <length> value */ mask-border-outset: 1rem; /* <number> value */ mask-border-outset: 1.5; /* vertical | horizontal */ mask-border-outset: 1 1.2; /* top | horizontal | bottom */ mask-border-outset: 30px 2 45px; /* top | right | bottom | left */ mask-border-outset: 7px 12px 14px 5px; /*
global values */ mask-border-outset: inherit; mask-border-outset: initial; mask-border-outset: unset; the mask-border-outset property may be specified as one, two, three, or four values.
mask-border-repeat - CSS: Cascading Style Sheets
syntax /* keyword value */ mask-border-repeat: stretch; mask-border-repeat: repeat; mask-border-repeat: round; mask-border-repeat: space; /* vertical | horizontal */ mask-border-repeat: round stretch; /*
global values */ mask-border-repeat: inherit; mask-border-repeat: initial; mask-border-repeat: unset; the mask-border-repeat property may be specified using one or two values chosen from the list of values below.
mask-border-slice - CSS: Cascading Style Sheets
syntax /* all sides */ mask-border-slice: 30%; /* vertical | horizontal */ mask-border-slice: 10% 30%; /* top | horizontal | bottom */ mask-border-slice: 30 30% 45; /* top | right | bottom | left */ mask-border-slice: 7 12 14 5; /* using the `fill` keyword */ mask-border-slice: 10% fill 7 12; /*
global values */ mask-border-slice: inherit; mask-border-slice: initial; mask-border-slice: unset; the mask-border-slice property may be specified using one to four <number-percentage> values to represent the position of each image slice.
mask-border-source - CSS: Cascading Style Sheets
syntax /* keyword value */ mask-border-source: none; /* <image> values */ mask-border-source: url(image.jpg); mask-border-source: linear-gradient(to top, red, yellow); /*
global values */ mask-border-source: inherit; mask-border-source: initial; mask-border-source: unset; values none no mask border is used.
mask-border-width - CSS: Cascading Style Sheets
syntax /* keyword value */ mask-border-width: auto; /* <length> value */ mask-border-width: 1rem; /* <percentage> value */ mask-border-width: 25%; /* <number> value */ mask-border-width: 3; /* vertical | horizontal */ mask-border-width: 2em 3em; /* top | horizontal | bottom */ mask-border-width: 5% 15% 10%; /* top | right | bottom | left */ mask-border-width: 5% 2em 10% auto; /*
global values */ mask-border-width: inherit; mask-border-width: initial; mask-border-width: unset; the mask-border-width property may be specified using one, two, three, or four values chosen from the list of values below.
mask-clip - CSS: Cascading Style Sheets
mask-clip: border-box; mask-clip: margin-box; mask-clip: fill-box; mask-clip: stroke-box; mask-clip: view-box; /* keyword values */ mask-clip: no-clip; /* non-standard keyword values */ -webkit-mask-clip: border; -webkit-mask-clip: padding; -webkit-mask-clip: content; -webkit-mask-clip: text; /* multiple values */ mask-clip: padding-box, no-clip; mask-clip: view-box, fill-box, border-box; /*
global values */ mask-clip: inherit; mask-clip: initial; mask-clip: unset; syntax one or more of the keyword values listed below, separated by commas.
mask-composite - CSS: Cascading Style Sheets
/* keyword values */ mask-composite: add; mask-composite: subtract; mask-composite: intersect; mask-composite: exclude; /*
global values */ mask-composite: inherit; mask-composite: initial; mask-composite: unset; syntax one or more of the keyword values listed below, separated by commas.
mask-image - CSS: Cascading Style Sheets
/* keyword value */ mask-image: none; /* <mask-source> value */ mask-image: url(masks.svg#mask1); /* <image> values */ mask-image: linear-gradient(rgba(0, 0, 0, 1.0), transparent); mask-image: image(url(mask.png), skyblue); /* multiple values */ mask-image: image(url(mask.png), skyblue), linear-gradient(rgba(0, 0, 0, 1.0), transparent); /*
global values */ mask-image: inherit; mask-image: initial; mask-image: unset; syntax values none this keyword is interpreted as a transparent black image layer.
mask-mode - CSS: Cascading Style Sheets
/* keyword values */ mask-mode: alpha; mask-mode: luminance; mask-mode: match-source; /* multiple values */ mask-mode: alpha, match-source; /*
global values */ mask-mode: inherit; mask-mode: initial; mask-mode: unset; syntax the mask-mode property is specified as one or more of the keyword values listed below, separated by commas.
mask-origin - CSS: Cascading Style Sheets
gin: content-box; mask-origin: padding-box; mask-origin: border-box; mask-origin: margin-box; mask-origin: fill-box; mask-origin: stroke-box; mask-origin: view-box; /* multiple values */ mask-origin: padding-box, content-box; mask-origin: view-box, fill-box, border-box; /* non-standard keyword values */ -webkit-mask-origin: content; -webkit-mask-origin: padding; -webkit-mask-origin: border; /*
global values */ mask-origin: inherit; mask-origin: initial; mask-origin: unset; for elements rendered as a single box, this property specifies the mask positioning area.
mask-position - CSS: Cascading Style Sheets
/* keyword values */ mask-position: top; mask-position: bottom; mask-position: left; mask-position: right; mask-position: center; /* <position> values */ mask-position: 25% 75%; mask-position: 0px 0px; mask-position: 10% 8em; /* multiple values */ mask-position: top right; mask-position: 1rem 1rem, center; /*
global values */ mask-position: inherit; mask-position: initial; mask-position: unset; syntax one or more <position> values, separated by commas.
mask-repeat - CSS: Cascading Style Sheets
*/ mask-repeat: repeat-x; mask-repeat: repeat-y; mask-repeat: repeat; mask-repeat: space; mask-repeat: round; mask-repeat: no-repeat; /* two-value syntax: horizontal | vertical */ mask-repeat: repeat space; mask-repeat: repeat repeat; mask-repeat: round space; mask-repeat: no-repeat round; /* multiple values */ mask-repeat: space round, no-repeat; mask-repeat: round repeat, space, repeat-x; /*
global values */ mask-repeat: inherit; mask-repeat: initial; mask-repeat: unset; by default, the repeated images are clipped to the size of the element, but they can be scaled to fit (using round) or evenly distributed from end to end (using space).
mask-size - CSS: Cascading Style Sheets
o') */ mask-size: 50%; mask-size: 3em; mask-size: 12px; mask-size: auto; /* two-value syntax */ /* first value: width of the image, second value: height */ mask-size: 50% auto; mask-size: 3em 25%; mask-size: auto 6px; mask-size: auto auto; /* multiple values */ /* do not confuse this with mask-size: auto auto */ mask-size: auto, auto; mask-size: 50%, 25%, 25%; mask-size: 6px, auto, contain; /*
global values */ mask-size: inherit; mask-size: initial; mask-size: unset; note: if the value of this property is not set in a mask shorthand property that is applied to the element after the mask-size css property, the value of this property is then reset to its initial value by the shorthand property.
mask-type - CSS: Cascading Style Sheets
/* keyword values */ mask-type: luminance; mask-type: alpha; /*
global values */ mask-type: inherit; mask-type: initial; mask-type: unset; this property may be overridden by the mask-mode property, which has the same effect but applies to the element where the mask is used.
mask - CSS: Cascading Style Sheets
px */ mask: url(masks.svg#star) repeat-x; /* element within svg graphic used as horizontally repeated mask */ mask: url(masks.svg#star) stroke-box; /* element within svg graphic used as mask extending to the box enclosed by the stroke */ mask: url(masks.svg#star) exclude; /* element within svg graphic used as mask and combined with background using non-overlapping parts */ /*
global values */ mask: inherit; mask: initial; mask: unset; /* multiple masks */ mask: url(masks.svg#star) left / 16px repeat-y, /* element within svg graphic is used as a mask on the left-hand side with a width of 16px */ url(masks.svg#circle) right / 16px repeat-y; /* element within svg graphic is used as a mask on the right-hand side with a width of 16px */ values <mask-reference> set...
max-block-size - CSS: Cascading Style Sheets
syntax /* <length> values */ max-block-size: 300px; max-block-size: 25em; /* <percentage> values */ max-block-size: 75%; /* keyword values */ max-block-size: auto; max-block-size: max-content; max-block-size: min-content; max-block-size: fit-content(20em); /*
global values */ max-block-size: inherit; max-block-size: initial; max-block-size: unset; values the max-block-size property's value can be any value that's legal for the max-width and max-height properties: <length> defines the max-width as an absolute value.
max-height - CSS: Cascading Style Sheets
syntax /* <length> value */ max-height: 3.5em; /* <percentage> value */ max-height: 75%; /* keyword values */ max-height: none; max-height: max-content; max-height: min-content; max-height: fit-content(20em); /*
global values */ max-height: inherit; max-height: initial; max-height: unset; values <length> defines the max-height as an absolute value.
max-inline-size - CSS: Cascading Style Sheets
syntax /* <length> values */ max-inline-size: 300px; max-inline-size: 25em; /* <percentage> values */ max-inline-size: 75%; /* keyword values */ max-inline-size: auto; max-inline-size: max-content; max-inline-size: min-content; max-inline-size: fit-content(20em); /*
global values */ max-inline-size: inherit; max-inline-size: initial; max-inline-size: unset; values the max-inline-size property takes the same values as the max-width and max-height properties.
max-width - CSS: Cascading Style Sheets
syntax /* <length> value */ max-width: 3.5em; /* <percentage> value */ max-width: 75%; /* keyword values */ max-width: none; max-width: max-content; max-width: min-content; max-width: fit-content(20em); /*
global values */ max-width: inherit; max-width: initial; max-width: unset; values <length> defines the max-width as an absolute value.
min-block-size - CSS: Cascading Style Sheets
syntax /* <length> values */ min-block-size: 100px; min-block-size: 5em; /* <percentage> values */ min-block-size: 10%; /* keyword values */ min-block-size: max-content; min-block-size: min-content; min-block-size: fit-content(20em); /*
global values */ min-block-size: inherit; min-block-size: initial; min-block-size: unset; if the writing mode is vertically oriented, the value of min-block-size relates to the minimum width of the element; otherwise, it relates to the minimum height of the element.
min-height - CSS: Cascading Style Sheets
syntax /* <length> value */ min-height: 3.5em; /* <percentage> value */ min-height: 10%; /* keyword values */ min-height: max-content; min-height: min-content; min-height: fit-content(20em); /*
global values */ min-height: inherit; min-height: initial; min-height: unset; values <length> defines the min-height as an absolute value.
min-inline-size - CSS: Cascading Style Sheets
syntax /* <length> values */ min-inline-size: 100px; min-inline-size: 5em; /* <percentage> values */ min-inline-size: 10%; /* keyword values */ min-inline-size: max-content; min-inline-size: min-content; min-inline-size: fit-content(20em); /*
global values */ min-inline-size: inherit; min-inline-size: initial; min-inline-size: unset; if the writing mode is vertically oriented, the value of min-inline-size relates to the minimum height of the element; otherwise, it relates to the minimum width of the element.
min-width - CSS: Cascading Style Sheets
syntax /* <length> value */ min-width: 3.5em; /* <percentage> value */ min-width: 10%; /* keyword values */ min-width: max-content; min-width: min-content; min-width: fit-content(20em); /*
global values */ min-width: inherit; min-width: initial; min-width: unset; values <length> defines the min-width as an absolute value.
object-position - CSS: Cascading Style Sheets
syntax /* <position> values */ object-position: center top; object-position: 100px 50px; /*
global values */ object-position: inherit; object-position: initial; object-position: unset; values <position> from one to four values that define the 2d position of the element.
offset-anchor - CSS: Cascading Style Sheets
keyword values */ offset-anchor: top; offset-anchor: bottom; offset-anchor: left; offset-anchor: right; offset-anchor: center; offset-anchor: auto; /* <percentage> values */ offset-anchor: 25% 75%; /* <length> values */ offset-anchor: 0 0; offset-anchor: 1cm 2cm; offset-anchor: 10ch 8em; /* edge offsets values */ offset-anchor: bottom 10px right 20px; offset-anchor: right 3em bottom 10px; /*
global values */ offset-anchor: inherit; offset-anchor: initial; offset-anchor: unset; values auto offset-anchor is given the same value as the element's transform-origin, unless offset-path is none, in which case it takes its value from offset-position.
offset-path - CSS: Cascading Style Sheets
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 position of the box and proceeds in the direction defined by the specified angle similar to the css gradient angle where 0deg is up, with positive angles increasing in the clockwise direction, with the size value being simi...
offset-position - CSS: Cascading Style Sheets
et-position: left; offset-position: right; offset-position: center; /* <percentage> values */ offset-position: 25% 75%; /* <length> values */ offset-position: 0 0; offset-position: 1cm 2cm; offset-position: 10ch 8em; /* edge offsets values */ offset-position: bottom 10px right 20px; offset-position: right 3em bottom 10px; offset-position: bottom 10px right; offset-position: top right 10px; /*
global values */ offset-position: inherit; offset-position: initial; offset-position: unset; values auto the initial position is the position of the box specified by the position property.
order - CSS: Cascading Style Sheets
syntax /* <integer> values */ order: 5; order: -5; /*
global values */ order: inherit; order: initial; order: unset; since order is only meant to affect the visual order of elements and not their logical or tab order.
orphans - CSS: Cascading Style Sheets
/* <integer> values */ orphans: 2; orphans: 3; /*
global values */ orphans: inherit; orphans: initial; orphans: unset; in typography, an orphan is the first line of a paragraph that appears alone at the bottom of a page.
outline-color - CSS: Cascading Style Sheets
syntax /* <color> values */ outline-color: #f92525; outline-color: rgb(30,222,121); outline-color: blue; /* keyword value */ outline-color: invert; /*
global values */ outline-color: inherit; outline-color: initial; outline-color: unset; the outline-color property is specified as any one of the values listed below.
outline-offset - CSS: Cascading Style Sheets
syntax /* <length> values */ outline-offset: 3px; outline-offset: 0.2em; /*
global values */ outline-offset: inherit; outline-offset: initial; outline-offset: unset; values <length> the width of the space between the element and its outline.
outline-style - CSS: Cascading Style Sheets
syntax /* keyword values */ outline-style: auto; outline-style: none; outline-style: dotted; outline-style: dashed; outline-style: solid; outline-style: double; outline-style: groove; outline-style: ridge; outline-style: inset; outline-style: outset; /*
global values */ outline-style: inherit; outline-style: initial; outline-style: unset; the outline-style property is specified as any one of the values listed below.
outline-width - CSS: Cascading Style Sheets
syntax /* keyword values */ outline-width: thin; outline-width: medium; outline-width: thick; /* <length> values */ outline-width: 1px; outline-width: 0.1em; /*
global values */ outline-width: inherit; the outline-width property is specified as any one of the values listed below.
outline - CSS: Cascading Style Sheets
constituent properties this property is a shorthand for the following css properties: outline-color outline-style outline-width syntax /* style */ outline: solid; /* color | style */ outline: #f66 dashed; /* style | width */ outline: inset thick; /* color | style | width */ outline: green solid 3px; /*
global values */ outline: inherit; outline: initial; outline: unset; the outline property may be specified using one, two, or three of the values listed below.
overflow-anchor - CSS: Cascading Style Sheets
syntax /* keyword values */ overflow-anchor: auto; overflow-anchor: none; /*
global values */ overflow-anchor: inherit; overflow-anchor: initial; overflow-anchor: unset; values auto the element becomes a potential anchor when adjusting scroll position.
overflow-block - CSS: Cascading Style Sheets
syntax /* keyword values */ overflow-block: visible; overflow-block: hidden; overflow-block: scroll; overflow-block: auto; /*
global values */ overflow-block: inherit; overflow-block: initial; overflow-block: unset; the overflow-block property is specified as a single keyword chosen from the list of values below.
overflow-inline - CSS: Cascading Style Sheets
syntax /* keyword values */ overflow-inline: visible; overflow-inline: hidden; overflow-inline: scroll; overflow-inline: auto; /*
global values */ overflow-inline: inherit; overflow-inline: initial; overflow-inline: unset; the overflow-inline property is specified as a single keyword chosen from the list of values below.
overflow-wrap - CSS: Cascading Style Sheets
syntax /* keyword values */ overflow-wrap: normal; overflow-wrap: break-word; overflow-wrap: anywhere; /*
global values */ overflow-wrap: inherit; overflow-wrap: initial; overflow-wrap: unset; the overflow-wrap property is specified as a single keyword chosen from the list of values below.
overflow-x - CSS: Cascading Style Sheets
syntax /* keyword values */ overflow-x: visible; overflow-x: hidden; overflow-x: clip; overflow-x: scroll; overflow-x: auto; /*
global values */ overflow-x: inherit; overflow-x: initial; overflow-x: unset; the overflow-x property is specified as a single keyword chosen from the list of values below.
overflow-y - CSS: Cascading Style Sheets
syntax /* keyword values */ overflow-y: visible; overflow-y: hidden; overflow-y: clip; overflow-y: scroll; overflow-y: auto; /*
global values */ overflow-y: inherit; overflow-y: initial; overflow-y: unset; the overflow-y property is specified as a single keyword chosen from the list of values below.
overflow - CSS: Cascading Style Sheets
constituent properties this property is a shorthand for the following css properties: overflow-x overflow-y syntax /* keyword values */ overflow: visible; overflow: hidden; overflow: clip; overflow: scroll; overflow: auto; overflow: hidden visible; /*
global values */ overflow: inherit; overflow: initial; overflow: unset; the overflow property is specified as one or two keywords chosen from the list of values below.
overscroll-behavior-block - CSS: Cascading Style Sheets
/* keyword values */ overscroll-behavior-block: auto; /* default */ overscroll-behavior-block: contain; overscroll-behavior-block: none; /*
global values */ overscroll-behavior-block: inherit; overscroll-behavior-block: initial; overscroll-behavior-block: unset; syntax the overscroll-behavior-block property is specified as a keyword chosen from the list of values below.
overscroll-behavior-inline - CSS: Cascading Style Sheets
/* keyword values */ overscroll-behavior-inline: auto; /* default */ overscroll-behavior-inline: contain; overscroll-behavior-inline: none; /*
global values */ overscroll-behavior-inline: inherit; overscroll-behavior-inline: initial; overscroll-behavior-inline: unset; syntax the overscroll-behavior-inline property is specified as a keyword chosen from the list of values below.
overscroll-behavior-x - CSS: Cascading Style Sheets
/* keyword values */ overscroll-behavior-x: auto; /* default */ overscroll-behavior-x: contain; overscroll-behavior-x: none; /*
global values */ overscroll-behavior-x: inherit; overscroll-behavior-x: initial; overscroll-behavior-x: unset; syntax the overscroll-behavior-x property is specified as a keyword chosen from the list of values below.
overscroll-behavior-y - CSS: Cascading Style Sheets
/* keyword values */ overscroll-behavior-y: auto; /* default */ overscroll-behavior-y: contain; overscroll-behavior-y: none; /*
global values */ overscroll-behavior-y: inherit; overscroll-behavior-y: initial; overscroll-behavior-y: unset; initial valueautoapplies tonon-replaced block-level elements and non-replaced inline-block elementsinheritednocomputed valueas specifiedanimation typediscrete syntax the overscroll-behavior-y property is specified as a keyword chosen from the list of values below.
overscroll-behavior - CSS: Cascading Style Sheets
/* keyword values */ overscroll-behavior: auto; /* default */ overscroll-behavior: contain; overscroll-behavior: none; /* two values */ overscroll-behavior: auto contain; /*
global values */ overscroll-behavior: inherit; overscroll-behavior: initial; overscroll-behavior: unset; by default, mobile browsers tend to provide a "bounce" effect or even a page refresh when the top or bottom of a page (or other scroll area) is reached.
padding-block-end - CSS: Cascading Style Sheets
syntax /* <length> values */ padding-block-end: 10px; /* an absolute length */ padding-block-end: 1em; /* a length relative to the text size */ /* <percentage> value */ padding-block-end: 5%; /* a padding relative to the block container's width */ /*
global values */ padding-block-end: inherit; padding-block-end: initial; padding-block-end: unset; values the padding-block-end property takes the same values as the padding-left property.
padding-block-start - CSS: Cascading Style Sheets
syntax /* <length> values */ padding-block-start: 10px; /* an absolute length */ padding-block-start: 1em; /* a length relative to the text size */ /* <percentage> value */ padding-block-start: 5%; /* a padding relative to the block container's width */ /*
global values */ padding-block-start: inherit; padding-block-start: initial; padding-block-start: unset; values the padding-block-start property takes the same values as the padding-left property.
padding-block - CSS: Cascading Style Sheets
/* <length> values */ padding-block: 10px 20px; /* an absolute length */ padding-block: 1em 2em; /* relative to the text size */ padding-block: 10px; /* sets both start and end values */ /* <percentage> values */ padding-block: 5% 2%; /* relative to the nearest block container's width */ /*
global values */ padding-block: inherit; padding-block: initial; padding-block: unset; these values corresponds to the padding-top and padding-bottom, or padding-right, and padding-left property depending on the values defined for writing-mode, direction, and text-orientation.
padding-bottom - CSS: Cascading Style Sheets
syntax /* <length> values */ padding-bottom: 0.5em; padding-bottom: 0; padding-bottom: 2cm; /* <percentage> value */ padding-bottom: 10%; /*
global values */ padding-bottom: inherit; padding-bottom: initial; padding-bottom: unset; the padding-bottom property is specified as a single value chosen from the list below.
padding-inline-end - CSS: Cascading Style Sheets
syntax /* <length> values */ padding-inline-end: 10px; /* an absolute length */ padding-inline-end: 1em; /* a length relative to the text size */ /* <percentage> value */ padding-inline-end: 5%; /* a padding relative to the block container's width */ /*
global values */ padding-inline-end: inherit; padding-inline-end: initial; padding-inline-end: unset; values the padding-inline-end property takes the same values as the padding-left property.
padding-inline-start - CSS: Cascading Style Sheets
syntax /* <length> values */ padding-inline-start: 10px; /* an absolute length */ padding-inline-start: 1em; /* a length relative to the text size */ /* <percentage> value */ padding-inline-start: 5%; /* a padding relative to the block container's width */ /*
global values */ padding-inline-start: inherit; padding-inline-start: initial; padding-inline-start: unset; values the padding-inline-start property takes the same values as the padding-left property.
padding-inline - CSS: Cascading Style Sheets
/* <length> values */ padding-inline: 10px 20px; /* an absolute length */ padding-inline: 1em 2em; /* relative to the text size */ padding-inline: 10px; /* sets both start and end values */ /* <percentage> values */ padding-inline: 5% 2%; /* relative to the nearest block container's width */ /*
global values */ padding-inline: inherit; padding-inline: initial; padding-inline: unset; constituent properties this property is a shorthand for the following css properties: padding-inline-end padding-inline-start syntax values the padding-inline property takes the same values as the padding-left property.
padding-left - CSS: Cascading Style Sheets
syntax /* <length> values */ padding-left: 0.5em; padding-left: 0; padding-left: 2cm; /* <percentage> value */ padding-left: 10%; /*
global values */ padding-left: inherit; padding-left: initial; padding-left: unset; the padding-left property is specified as a single value chosen from the list below.
padding-right - CSS: Cascading Style Sheets
syntax /* <length> values */ padding-right: 0.5em; padding-right: 0; padding-right: 2cm; /* <percentage> value */ padding-right: 10%; /*
global values */ padding-right: inherit; padding-right: initial; padding-right: unset; the padding-right property is specified as a single value chosen from the list below.
padding-top - CSS: Cascading Style Sheets
syntax /* <length> values */ padding-top: 0.5em; padding-top: 0; padding-top: 2cm; /* <percentage> value */ padding-top: 10%; /*
global values */ padding-top: inherit; padding-top: initial; padding-top: unset; the padding-top property is specified as a single value chosen from the list below.
padding - CSS: Cascading Style Sheets
constituent properties this property is a shorthand for the following css properties: padding-bottom padding-left padding-right padding-top syntax /* apply to all four sides */ padding: 1em; /* vertical | horizontal */ padding: 5% 10%; /* top | horizontal | bottom */ padding: 1em 2em 2em; /* top | right | bottom | left */ padding: 5px 1em 0 2em; /*
global values */ padding: inherit; padding: initial; padding: unset; the padding property may be specified using one, two, three, or four values.
page-break-after - CSS: Cascading Style Sheets
/* keyword values */ page-break-after: auto; page-break-after: always; page-break-after: avoid; page-break-after: left; page-break-after: right; page-break-after: recto; page-break-after: verso; /*
global values */ page-break-after: inherit; page-break-after: initial; page-break-after: unset; this property applies to block elements that generate a box.
page-break-before - CSS: Cascading Style Sheets
/* keyword values */ page-break-before: auto; page-break-before: always; page-break-before: avoid; page-break-before: left; page-break-before: right; page-break-before: recto; page-break-before: verso; /*
global values */ page-break-before: inherit; page-break-before: initial; page-break-before: unset; syntax values auto initial value.
page-break-inside - CSS: Cascading Style Sheets
/* keyword values */ page-break-inside: auto; page-break-inside: avoid; /*
global values */ page-break-inside: inherit; page-break-inside: initial; page-break-inside: unset; syntax values auto initial value.
perspective-origin - CSS: Cascading Style Sheets
syntax /* one-value syntax */ perspective-origin: x-position; /* two-value syntax */ perspective-origin: x-position y-position; /* when both x-position and y-position are keywords, the following is also valid */ perspective-origin: y-position x-position; /*
global values */ perspective-origin: inherit; perspective-origin: initial; perspective-origin: unset; values x-position indicates the position of the abscissa of the vanishing point.
perspective - CSS: Cascading Style Sheets
syntax /* keyword value */ perspective: none; /* <length> values */ perspective: 20px; perspective: 3.5em; /*
global values */ perspective: inherit; perspective: initial; perspective: unset; values none indicates that no perspective transform is to be applied.
place-content - CSS: Cascading Style Sheets
flex-end center; /* baseline alignment */ /* justify-content does not take baseline values */ place-content: baseline center; place-content: first baseline space-evenly; place-content: last baseline right; /* distributed alignment */ place-content: space-between space-evenly; place-content: space-around space-evenly; place-content: space-evenly stretch; place-content: stretch space-evenly; /*
global values */ place-content: inherit; place-content: initial; place-content: unset; the first value is the align-content property value, the second the justify-content one.
place-items - CSS: Cascading Style Sheets
-items: center normal; place-items: start auto; place-items: end normal; place-items: self-start auto; place-items: self-end normal; place-items: flex-start auto; place-items: flex-end normal; place-items: left auto; place-items: right normal; /* baseline alignment */ place-items: baseline normal; place-items: first baseline auto; place-items: last baseline normal; place-items: stretch auto; /*
global values */ place-items: inherit; place-items: initial; place-items: unset; values auto the value used is the value of the justify-items property of the parents box, unless the box has no parent, or is absolutely positioned, in these cases, auto represents normal.
place-self - CSS: Cascading Style Sheets
ment */ 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 auto; /*
global values */ place-self: inherit; place-self: initial; place-self: unset; values auto computes to the parent's align-items value.
pointer-events - CSS: Cascading Style Sheets
inter-events: none; pointer-events: visiblepainted; /* svg only */ pointer-events: visiblefill; /* svg only */ pointer-events: visiblestroke; /* svg only */ pointer-events: visible; /* svg only */ pointer-events: painted; /* svg only */ pointer-events: fill; /* svg only */ pointer-events: stroke; /* svg only */ pointer-events: all; /* svg only */ /*
global values */ pointer-events: inherit; pointer-events: initial; pointer-events: unset; the pointer-events property is specified as a single keyword chosen from the list of values below.
quotes - CSS: Cascading Style Sheets
syntax /* keyword value */ quotes: none; quotes: auto; /* <string> values */ quotes: "«" "»"; /* set open-quote and close-quote to the french quotation marks */ quotes: "«" "»" "‹" "›"; /* set two levels of quotation marks */ /*
global values */ quotes: inherit; quotes: initial; quotes: unset; values none the open-quote and close-quote values of the content property produce no quotation marks.
resize - CSS: Cascading Style Sheets
syntax /* keyword values */ resize: none; resize: both; resize: horizontal; resize: vertical; resize: block; resize: inline; /*
global values */ resize: inherit; resize: initial; resize: unset; the resize property is specified as a single keyword value from the list below.
right - CSS: Cascading Style Sheets
syntax /* <length> values */ right: 3px; right: 2.4em; /* <percentage>s of the width of the containing block */ right: 10%; /* keyword value */ right: auto; /*
global values */ right: inherit; right: initial; right: unset; values <length> a negative, null, or positive <length> that represents: for absolutely positioned elements, the distance to the right edge of the containing block.
row-gap (grid-row-gap) - CSS: Cascading Style Sheets
syntax /* <length> values */ row-gap: 20px; row-gap: 1em; row-gap: 3vmin; row-gap: 0.5cm; /* <percentage> value */ row-gap: 10%; /*
global values */ row-gap: inherit; row-gap: initial; row-gap: unset; values <length-percentage> is the width of the gutter separating the rows.
ruby-align - CSS: Cascading Style Sheets
/* keyword values */ ruby-align: start; ruby-align: center; ruby-align: space-between; ruby-align: space-around; /*
global values */ ruby-align: inherit; ruby-align: initial; ruby-align: unset; syntax values start is a keyword indicating that the ruby will be aligned with the start of the base text.
ruby-position - CSS: Cascading Style Sheets
/* keyword values */ ruby-position: over; ruby-position: under; ruby-position: inter-character; /*
global values */ ruby-position: inherit; ruby-position: initial; ruby-position: unset; syntax values over is a keyword indicating that the ruby has to be placed over the main text for horizontal scripts and right to it for vertical scripts.
scroll-behavior - CSS: Cascading Style Sheets
syntax /* keyword values */ scroll-behavior: auto; scroll-behavior: smooth; /*
global values */ scroll-behavior: inherit; scroll-behavior: initial; scroll-behavior: unset; the scroll-behavior property is specified as one of the keyword values listed below.
scroll-margin-block-end - CSS: Cascading Style Sheets
syntax /* <length> values */ scroll-margin-block-end: 10px; scroll-margin-block-end: 1em; /*
global values */ scroll-margin-block-end: inherit; scroll-margin-block-end: initial; scroll-margin-block-end: unset; values <length> an outset from the block end edge of the scroll container.
scroll-margin-block-start - CSS: Cascading Style Sheets
syntax /* <length> values */ scroll-margin-block-start: 10px; scroll-margin-block-start: 1em; /*
global values */ scroll-margin-block-start: inherit; scroll-margin-block-start: initial; scroll-margin-block-start: unset; values <length> an outset from the block start edge of the scroll container.
scroll-margin-block - CSS: Cascading Style Sheets
constituent properties this property is a shorthand for the following css properties: scroll-margin-block-end scroll-margin-block-start syntax /* <length> values */ scroll-margin-block: 10px; scroll-margin-block: 1em .5em ; /*
global values */ scroll-margin-block: inherit; scroll-margin-block: initial; scroll-margin-block: unset; values <length> an outset from the corresponding edge of the scroll container.
scroll-margin-bottom - CSS: Cascading Style Sheets
syntax /* <length> values */ scroll-margin-bottom: 10px; scroll-margin-bottom: 1em; /*
global values */ scroll-margin-bottom: inherit; scroll-margin-bottom: initial; scroll-margin-bottom: unset; values <length> an outset from the bottom edge of the scroll container.
scroll-margin-inline-end - CSS: Cascading Style Sheets
syntax /* <length> values */ scroll-margin-inline-end: 10px; scroll-margin-inline-end: 1em; /*
global values */ scroll-margin-inline-end: inherit; scroll-margin-inline-end: initial; scroll-margin-inline-end: unset; values <length> an outset from the inline end edge of the scroll container.
scroll-margin-inline-start - CSS: Cascading Style Sheets
syntax /* <length> values */ scroll-margin-inline-start: 10px; scroll-margin-inline-start: 1em; /*
global values */ scroll-margin-inline-start: inherit; scroll-margin-inline-start: initial; scroll-margin-inline-start: unset; values <length> an outset from the inline start edge of the scroll container.
scroll-margin-inline - CSS: Cascading Style Sheets
constituent properties this property is a shorthand for the following css properties: scroll-margin-inline-end scroll-margin-inline-start syntax /* <length> values */ scroll-margin-inline: 10px; scroll-margin-inline: 1em .5em ; /*
global values */ scroll-margin-inline: inherit; scroll-margin-inline: initial; scroll-margin-inline: unset; values <length> an outset from the corresponding edge of the scroll container.
scroll-margin-left - CSS: Cascading Style Sheets
syntax /* <length> values */ scroll-margin-left: 10px; scroll-margin-left: 1em; /*
global values */ scroll-margin-left: inherit; scroll-margin-left: initial; scroll-margin-left: unset; values <length> an outset from the left edge of the scroll container.
scroll-margin-right - CSS: Cascading Style Sheets
syntax /* <length> values */ scroll-margin-right: 10px; scroll-margin-right: 1em; /*
global values */ scroll-margin-right: inherit; scroll-margin-right: initial; scroll-margin-right: unset; values <length> an outset from the right edge of the scroll container.
scroll-margin-top - CSS: Cascading Style Sheets
syntax /* <length> values */ scroll-margin-top: 10px; scroll-margin-top: 1em; /*
global values */ scroll-margin-top: inherit; scroll-margin-top: initial; scroll-margin-top: unset; values <length> an outset from the top edge of the scroll container.
scroll-margin - CSS: Cascading Style Sheets
constituent properties this property is a shorthand for the following css properties: scroll-margin-bottom scroll-margin-left scroll-margin-right scroll-margin-top syntax /* <length> values */ scroll-margin: 10px; scroll-margin: 1em .5em 1em 1em; /*
global values */ scroll-margin: inherit; scroll-margin: initial; scroll-margin: unset; values <length> an outset from the corresponding edge of the scroll container.
scroll-padding-block-end - CSS: Cascading Style Sheets
syntax /* keyword values */ scroll-padding-block-end: auto; /* <length> values */ scroll-padding-block-end: 10px; scroll-padding-block-end: 1em; scroll-padding-block-end: 10%; /*
global values */ scroll-padding-block-end: inherit; scroll-padding-block-end: initial; scroll-padding-block-end: unset; values <length-percentage> an inwards offset from the block end edge of the scrollport, as a valid length or a percentage.
scroll-padding-block-start - CSS: Cascading Style Sheets
syntax /* keyword values */ scroll-padding-block-start: auto; /* <length> values */ scroll-padding-block-start: 10px; scroll-padding-block-start: 1em; scroll-padding-block-start: 10%; /*
global values */ scroll-padding-block-start: inherit; scroll-padding-block-start: initial; scroll-padding-block-start: unset; values <length-percentage> an inwards offset from the block start edge of the scrollport, as a valid length or a percentage.
scroll-padding-block - CSS: Cascading Style Sheets
constituent properties this property is a shorthand for the following css properties: scroll-padding-block-end scroll-padding-block-start syntax /* keyword values */ scroll-padding-block: auto; /* <length> values */ scroll-padding-block: 10px; scroll-padding-block: 1em .5em; scroll-padding-block: 10%; /*
global values */ scroll-padding-block: inherit; scroll-padding-block: initial; scroll-padding-block: unset; values <length-percentage> an inwards offset from the corresponding edge of the scrollport, as a valid length or a percentage.
scroll-padding-bottom - CSS: Cascading Style Sheets
syntax /* keyword values */ scroll-padding-bottom: auto; /* <length> values */ scroll-padding-bottom: 10px; scroll-padding-bottom: 1em; scroll-padding-bottom: 10%; /*
global values */ scroll-padding-bottom: inherit; scroll-padding-bottom: initial; scroll-padding-bottom: unset; values <length-percentage> an inwards offset from the bottom edge of the scrollport, as a valid length or a percentage.
scroll-padding-inline-end - CSS: Cascading Style Sheets
syntax /* keyword values */ scroll-padding-inline-end: auto; /* <length> values */ scroll-padding-inline-end: 10px; scroll-padding-inline-end: 1em; scroll-padding-inline-end: 10%; /*
global values */ scroll-padding-inline-end: inherit; scroll-padding-inline-end: initial; scroll-padding-inline-end: unset; values <length-percentage> an inwards offset from the inline end edge of the scrollport, as a valid length or a percentage.
scroll-padding-inline-start - CSS: Cascading Style Sheets
syntax /* keyword values */ scroll-padding-inline-start: auto; /* <length> values */ scroll-padding-inline-start: 10px; scroll-padding-inline-start: 1em; scroll-padding-inline-start: 10%; /*
global values */ scroll-padding-inline-start: inherit; scroll-padding-inline-start: initial; scroll-padding-inline-start: unset; values <length-percentage> an inwards offset from the inline start edge of the scrollport, as a valid length or a percentage.
scroll-padding-inline - CSS: Cascading Style Sheets
constituent properties this property is a shorthand for the following css properties: scroll-padding-inline-end scroll-padding-inline-start syntax /* keyword values */ scroll-padding-inline: auto; /* <length> values */ scroll-padding-inline: 10px; scroll-padding-inline: 1em .5em; scroll-padding-inline: 10%; /*
global values */ scroll-padding-inline: inherit; scroll-padding-inline: initial; scroll-padding-inline: unset; values <length-percentage> an inwards offset from the corresponding edge of the scrollport, as a valid length or a percentage.
scroll-padding-left - CSS: Cascading Style Sheets
syntax /* keyword values */ scroll-padding-left: auto; /* <length> values */ scroll-padding-left: 10px; scroll-padding-left: 1em; scroll-padding-left: 10%; /*
global values */ scroll-padding-left: inherit; scroll-padding-left: initial; scroll-padding-left: unset; values <length-percentage> an inwards offset from the left edge of the scrollport, as a valid length or a percentage.
scroll-padding-right - CSS: Cascading Style Sheets
syntax /* keyword values */ scroll-padding-right: auto; /* <length> values */ scroll-padding-right: 10px; scroll-padding-right: 1em; scroll-padding-right: 10%; /*
global values */ scroll-padding-right: inherit; scroll-padding-right: initial; scroll-padding-right: unset; values <length-percentage> an inwards offset from the top edge of the scrollport, as a valid length or a percentage.
scroll-padding-top - CSS: Cascading Style Sheets
syntax /* keyword values */ scroll-padding-top: auto; /* <length> values */ scroll-padding-top: 10px; scroll-padding-top: 1em; scroll-padding-top: 10%; /*
global values */ scroll-padding-top: inherit; scroll-padding-top: initial; scroll-padding-top: unset; values <length-percentage> an inwards offset from the top edge of the scrollport, as a valid length or a percentage.
scroll-padding - CSS: Cascading Style Sheets
constituent properties this property is a shorthand for the following css properties: scroll-padding-bottom scroll-padding-left scroll-padding-right scroll-padding-top syntax /* keyword values */ scroll-padding: auto; /* <length> values */ scroll-padding: 10px; scroll-padding: 1em .5em 1em 1em; scroll-padding: 10%; /*
global values */ scroll-padding: inherit; scroll-padding: initial; scroll-padding: unset; values <length-percentage> an inwards offset from the corresponding edge of the scrollport, as a valid <length> or a <percentage>.
scroll-snap-align - CSS: Cascading Style Sheets
syntax /* keyword values */ scroll-snap-align: none; scroll-snap-align: start end; /* when two values set first is block, second inline */ scroll-snap-align: center; /*
global values */ scroll-snap-align: inherit; scroll-snap-align: initial; scroll-snap-align: unset; values none the box does not define a snap position in that axis.
scroll-snap-coordinate - CSS: Cascading Style Sheets
/* keyword value */ scroll-snap-coordinate: none; /* <position> values */ scroll-snap-coordinate: 50px 50px; /* single coordinate */ scroll-snap-coordinate: 100px 100px, 100px bottom; /* multiple coordinates */ /*
global values */ scroll-snap-coordinate: inherit; scroll-snap-coordinate: initial; scroll-snap-coordinate: unset; if the element has been transformed, the snap coordinates are likewise transformed, thus aligning the snap points with the element as it is displayed.
scroll-snap-destination - CSS: Cascading Style Sheets
/* <position> value */ scroll-snap-destination: 400px 600px; /*
global values */ scroll-snap-destination: inherit; scroll-snap-destination: initial; scroll-snap-destination: unset; syntax values <position> specifies the offset of the snap destination from the start edge of the scroll container’s visual viewport.
scroll-snap-points-x - CSS: Cascading Style Sheets
/* keyword value */ scroll-snap-points-x: none; /* repeating snap points */ scroll-snap-points-x: repeat(400px); /*
global values */ scroll-snap-points-x: inherit; scroll-snap-points-x: initial; scroll-snap-points-x: unset; syntax values none the scroll container does not define any snap points.
scroll-snap-points-y - CSS: Cascading Style Sheets
/* keyword value */ scroll-snap-points-y: none; /* repeated snap points */ scroll-snap-points-y: repeat(400px); /*
global values */ scroll-snap-points-y: inherit; scroll-snap-points-y: initial; scroll-snap-points-y: unset; syntax values none the scroll container does not define any snap points.
scroll-snap-stop - CSS: Cascading Style Sheets
/* keyword values */ scroll-snap-stop: normal; scroll-snap-stop: always; /*
global values */ scroll-snap-type: inherit; scroll-snap-type: initial; scroll-snap-type: unset; syntax values normal when the visual viewport of this element's scroll container is scrolled, it may "pass over" possible snap positions.
scroll-snap-type-x - CSS: Cascading Style Sheets
/* keyword values */ scroll-snap-type-x: none; scroll-snap-type-x: mandatory; scroll-snap-type-x: proximity; /*
global values */ scroll-snap-type-x: inherit; scroll-snap-type-x: initial; scroll-snap-type-x: unset; syntax values none when the visual viewport of this scroll container is scrolled horizontally, it must ignore snap points.
scroll-snap-type-y - CSS: Cascading Style Sheets
/* keyword values */ scroll-snap-type-y: none; scroll-snap-type-y: mandatory; scroll-snap-type-y: proximity; /*
global values */ scroll-snap-type-y: inherit; scroll-snap-type-y: initial; scroll-snap-type-y: unset; syntax values none when the visual viewport of this scroll container is scrolled vertically, it must ignore snap points.
scroll-snap-type - CSS: Cascading Style Sheets
/* 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; /* optional 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.
scrollbar-width - CSS: Cascading Style Sheets
initial valueautoapplies toscrolling boxesinheritednocomputed valueas specifiedanimation typediscrete syntax /* keyword values */ scrollbar-width: auto; scrollbar-width: thin; scrollbar-width: none; /*
global values */ scrollbar-width: inherit; scrollbar-width: initial; scrollbar-width: unset; values <scrollbar-width> defines the width of the scrollbar as a keyword.
shape-image-threshold - CSS: Cascading Style Sheets
/* <number> value */ shape-image-threshold: 0.7; /*
global values */ shape-image-threshold: inherit; shape-image-threshold: initial; shape-image-threshold: unset; syntax values <alpha-value> sets the threshold used for extracting a shape from an image.
shape-margin - CSS: Cascading Style Sheets
syntax /* <length> values */ shape-margin: 10px; shape-margin: 20mm; /* <percentage> value */ shape-margin: 60%; /*
global values */ shape-margin: inherit; shape-margin: initial; shape-margin: unset; values <length-percentage> sets the margin of the shape to a <length> value or to a <percentage> of the width of the element's containing block.
shape-outside - CSS: Cascading Style Sheets
pe-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(255, 255, 255, 0) 150px, red 150px); /*
global values */ shape-outside: initial; shape-outside: inherit; shape-outside: unset; the shape-outside property is specified using the values from the list below, which define the float area for float elements.
tab-size - CSS: Cascading Style Sheets
syntax /* <integer> values */ tab-size: 4; tab-size: 0; /* <length> values */ tab-size: 10px; tab-size: 2em; /*
global values */ tab-size: inherit; tab-size: initial; tab-size: unset; values <integer> a multiple of the advance width of the space character (u+0020) to be used as the width of tabs.
table-layout - CSS: Cascading Style Sheets
syntax /* keyword values */ table-layout: auto; table-layout: fixed; /*
global values */ table-layout: inherit; table-layout: initial; table-layout: unset; values auto by default, most browsers use an automatic table layout algorithm.
text-align-last - CSS: Cascading Style Sheets
syntax /* keyword values */ text-align-last: auto; text-align-last: start; text-align-last: end; text-align-last: left; text-align-last: right; text-align-last: center; text-align-last: justify; /*
global values */ text-align-last: inherit; text-align-last: initial; text-align-last: unset; values auto the affected line is aligned per the value of text-align, unless text-align is justify, in which case the effect is the same as setting text-align-last to start.
text-align - CSS: Cascading Style Sheets
syntax /* keyword values */ text-align: left; text-align: right; text-align: center; text-align: justify; text-align: justify-all; text-align: start; text-align: end; text-align: match-parent; /* character-based alignment in a table column */ text-align: "."; text-align: "." center; /* block alignment values (non-standard syntax) */ text-align: -moz-center; text-align: -webkit-center; /*
global values */ text-align: inherit; text-align: initial; text-align: unset; the text-align property is specified in one of the following ways: using the keyword values start, end, left, right, center, justify, justify-all, or match-parent.
text-combine-upright - CSS: Cascading Style Sheets
/* keyword values */ text-combine-upright: none; text-combine-upright: all; /* digits values */ text-combine-upright: digits; /* fits 2 consecutive digits horizontally inside vertical text */ text-combine-upright: digits 4; /* fits up to 4 consecutive digits horizontally inside vertical text */ /*
global values */ text-combine-upright: inherit; text-combine-upright: initial; text-combine-upright: unset; syntax values none there is no special processing.
text-decoration-color - CSS: Cascading Style Sheets
syntax /* <color> values */ text-decoration-color: currentcolor; text-decoration-color: red; text-decoration-color: #00ff00; text-decoration-color: rgba(255, 128, 128, 0.5); text-decoration-color: transparent; /*
global values */ text-decoration-color: inherit; text-decoration-color: initial; text-decoration-color: unset; values <color> the color of the line decoration.
text-decoration-line - CSS: Cascading Style Sheets
syntax /* single keyword */ text-decoration-line: none; text-decoration-line: underline; text-decoration-line: overline; text-decoration-line: line-through; text-decoration-line: blink; /* multiple keywords */ text-decoration-line: underline overline; /* two decoration lines */ text-decoration-line: overline underline line-through; /* multiple decoration lines */ /*
global values */ text-decoration-line: inherit; text-decoration-line: initial; text-decoration-line: unset; the text-decoration-line property is specified as none, or one or more space-separated values from the list below.
text-decoration-skip-ink - CSS: Cascading Style Sheets
syntax /* single keyword */ text-decoration-skip-ink: none; text-decoration-skip-ink: auto; text-decoration-skip-ink: all; /*
global keywords */ text-decoration-skip: inherit; text-decoration-skip: initial; text-decoration-skip: unset; values none underlines and overlines are drawn across the full length of the text content, including parts that cross over glyph descenders and ascenders.
text-decoration-skip - CSS: Cascading Style Sheets
/* keyword values */ text-decoration-skip: none; text-decoration-skip: objects; text-decoration-skip: spaces; text-decoration-skip: edges; text-decoration-skip: box-decoration; /* multiple keywords */ text-decoration-skip: objects spaces; text-decoration-skip: leading-spaces trailing-spaces; text-decoration-skip: objects edges box-decoration; /*
global values */ text-decoration-skip: inherit; text-decoration-skip: initial; text-decoration-skip: unset; syntax values none nothing is skipped.
text-decoration-style - CSS: Cascading Style Sheets
syntax /* keyword values */ text-decoration-style: solid; text-decoration-style: double; text-decoration-style: dotted; text-decoration-style: dashed; text-decoration-style: wavy; /*
global values */ text-decoration-style: inherit; text-decoration-style: initial; text-decoration-style: unset; values solid draws a single line.
text-decoration-thickness - CSS: Cascading Style Sheets
syntax /* single keyword */ text-decoration-thickness: auto; text-decoration-thickness: from-font; /* length */ text-decoration-thickness: 0.1em; text-decoration-thickness: 3px; /* percentage */ text-decoration-thickness: 10%; /*
global values */ text-decoration-thickness: inherit; text-decoration-thickness: initial; text-decoration-thickness: unset; values auto the browser chooses an appropriate width for the text decoration line.
text-emphasis-color - CSS: Cascading Style Sheets
/* initial value */ text-emphasis-color: currentcolor; /* <color> */ text-emphasis-color: #555; text-emphasis-color: blue; text-emphasis-color: rgba(90, 200, 160, 0.8); text-emphasis-color: transparent; /*
global values */ text-emphasis-color: inherit; text-emphasis-color: initial; text-emphasis-color: unset; syntax values <color> defines the color of the emphasis marks.
text-emphasis-position - CSS: Cascading Style Sheets
/* initial value */ text-emphasis-position: over right; /* keywords value */ text-emphasis-position: over left; text-emphasis-position: under right; text-emphasis-position: under left; text-emphasis-position: left over; text-emphasis-position: right under; text-emphasis-position: left under; /*
global values */ text-emphasis-position: inherit; text-emphasis-position: initial; text-emphasis-position: unset; syntax values over draw marks over the text in horizontal writing mode.
text-emphasis-style - CSS: Cascading Style Sheets
it may be computed to or rendered as 'f' only */ /* keyword values */ text-emphasis-style: filled; text-emphasis-style: open; text-emphasis-style: dot; text-emphasis-style: circle; text-emphasis-style: double-circle; text-emphasis-style: triangle; text-emphasis-style: filled sesame; text-emphasis-style: open sesame; /*
global values */ text-emphasis-style: inherit; text-emphasis-style: initial; text-emphasis-style: unset; syntax values none no emphasis marks.
text-emphasis - CSS: Cascading Style Sheets
it may be computed to or rendered as 'f' only */ /* keywords value */ text-emphasis: filled; text-emphasis: open; text-emphasis: filled sesame; text-emphasis: open sesame; /* keywords value combined with a color */ text-emphasis: filled sesame #555; /*
global values */ text-emphasis: inherit; text-emphasis: initial; text-emphasis: unset; values none no emphasis marks.
text-indent - CSS: Cascading Style Sheets
syntax /* <length> values */ text-indent: 3mm; text-indent: 40px; /* <percentage> value relative to the containing block width */ text-indent: 15%; /* keyword values */ text-indent: 5em each-line; text-indent: 5em hanging; text-indent: 5em hanging each-line; /*
global values */ text-indent: inherit; text-indent: initial; text-indent: unset; values <length> indentation is specified as an absolute <length>.
text-orientation - CSS: Cascading Style Sheets
syntax /* keyword values */ text-orientation: mixed; text-orientation: upright; text-orientation: sideways-right; text-orientation: sideways; text-orientation: use-glyph-orientation; /*
global values */ text-orientation: inherit; text-orientation: initial; text-orientation: unset; the text-orientation property is specified as a single keyword from the list below.
text-rendering - CSS: Cascading Style Sheets
/* keyword values */ text-rendering: auto; text-rendering: optimizespeed; text-rendering: optimizelegibility; text-rendering: geometricprecision; /*
global values */ text-rendering: inherit; text-rendering: initial; text-rendering: unset; note: the text-rendering property is an svg property that is not defined in any css standard.
text-shadow - CSS: Cascading Style Sheets
syntax /* offset-x | offset-y | blur-radius | color */ text-shadow: 1px 1px 2px black; /* color | offset-x | offset-y | blur-radius */ text-shadow: #fc0 1px 0 10px; /* offset-x | offset-y | color */ text-shadow: 5px 5px #558abb; /* color | offset-x | offset-y */ text-shadow: white 2px 5px; /* offset-x | offset-y /* use defaults for color and blur-radius */ text-shadow: 5px 10px; /*
global values */ text-shadow: inherit; text-shadow: initial; text-shadow: unset; this property is specified as a comma-separated list of shadows.
text-size-adjust - CSS: Cascading Style Sheets
/* keyword values */ text-size-adjust: none; text-size-adjust: auto; /* <percentage> value */ text-size-adjust: 80%; /*
global values */ text-size-adjust: inherit; text-size-adjust: initial; text-size-adjust: unset; because many websites have not been developed with small devices in mind, mobile browsers differ from desktop browsers in the way they render web pages.
text-transform - CSS: Cascading Style Sheets
syntax /* keyword values */ text-transform: none; text-transform: capitalize; text-transform: uppercase; text-transform: lowercase; text-transform: full-width; text-transform: full-size-kana; /*
global values */ text-transform: inherit; text-transform: initial; text-transform: unset; capitalize is a keyword that converts the first letter of each word to uppercase.
text-underline-offset - CSS: Cascading Style Sheets
syntax /* single keyword */ text-underline-offset: auto; /* length */ text-underline-offset: 0.1em; text-underline-offset: 3px; /* percentage */ text-underline-offset: 20%; /*
global values */ text-underline-offset: inherit; text-underline-offset: initial; text-underline-offset: unset; the text-underline-offset property is specified as a single value from the list below.
top - CSS: Cascading Style Sheets
syntax /* <length> values */ top: 3px; top: 2.4em; /* <percentage>s of the height of the containing block */ top: 10%; /* keyword value */ top: auto; /*
global values */ top: inherit; top: initial; top: unset; values <length> a negative, null, or positive <length> that represents: for absolutely positioned elements, the distance to the top edge of the containing block.
touch-action - CSS: Cascading Style Sheets
/* keyword values */ touch-action: auto; touch-action: none; touch-action: pan-x; touch-action: pan-left; touch-action: pan-right; touch-action: pan-y; touch-action: pan-up; touch-action: pan-down; touch-action: pinch-zoom; touch-action: manipulation; /*
global values */ touch-action: inherit; touch-action: initial; touch-action: unset; by default, panning (scrolling) and pinching gestures are handled exclusively by the browser.
transform-box - CSS: Cascading Style Sheets
/* keyword values */ transform-box: content-box; transform-box: border-box; transform-box: fill-box; transform-box: stroke-box; transform-box: view-box; /*
global values */ transform-box: inherit; transform-box: initial; transform-box: unset; syntax the transform-box property is specified as one of the keyword values listed below.
transform-origin - CSS: Cascading Style Sheets
-offset-keyword | x-offset-keyword */ transform-origin: top right; /* x-offset | y-offset | z-offset */ transform-origin: 2px 30% 10px; /* x-offset-keyword | y-offset | z-offset */ transform-origin: left 5px -3px; /* x-offset-keyword | y-offset-keyword | z-offset */ transform-origin: right bottom 2cm; /* y-offset-keyword | x-offset-keyword | z-offset */ transform-origin: bottom right 2cm; /*
global values */ transform-origin: inherit; transform-origin: initial; transform-origin: unset; the transform-origin property may be specified using one, two, or three values, where each value represents an offset.
transform-style - CSS: Cascading Style Sheets
syntax /* keyword values */ transform-style: flat; transform-style: preserve-3d; /*
global values */ transform-style: inherit; transform-style: initial; transform-style: unset; values flat indicates that the children of the element are lying in the plane of the element itself.
transform - CSS: Cascading Style Sheets
rm: translatez(2px); transform: scale(2, 0.5); transform: scale3d(2.5, 1.2, 0.3); transform: scalex(2); transform: scaley(0.5); transform: scalez(0.3); transform: skew(30deg, 20deg); transform: skewx(30deg); transform: skewy(1.07rad); /* multiple function 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-function> values.
transition-delay - CSS: Cascading Style Sheets
syntax /* <time> values */ transition-delay: 3s; transition-delay: 2s, 4ms; /*
global values */ transition-delay: inherit; transition-delay: initial; transition-delay: unset; values <time> denotes the amount of time to wait between a property's value changing and the start of the transition effect.
transition-duration - CSS: Cascading Style Sheets
syntax /* <time> values */ transition-duration: 6s; transition-duration: 120ms; transition-duration: 1s, 15s; transition-duration: 10s, 30s, 230ms; /*
global values */ transition-duration: inherit; transition-duration: initial; transition-duration: unset; values <time> is a <time> denoting the amount of time the transition from the old value of a property to the new value should take.
transition-property - CSS: Cascading Style Sheets
syntax /* keyword values */ transition-property: none; transition-property: all; /* <custom-ident> values */ transition-property: test_05; transition-property: -specific; transition-property: sliding-vertically; /* multiple values */ transition-property: test1, animation4; transition-property: all, height, color; transition-property: all, -moz-specific, sliding; /*
global values */ transition-property: inherit; transition-property: initial; transition-property: unset; values none no properties will transition.
transition-timing-function - CSS: Cascading Style Sheets
nsition-timing-function: steps(4, jump-start); transition-timing-function: steps(10, jump-end); transition-timing-function: steps(20, jump-none); transition-timing-function: steps(5, jump-both); transition-timing-function: steps(6, start); transition-timing-function: steps(8, end); /* multiple timing functions */ transition-timing-function: ease, step-start, cubic-bezier(0.1, 0.7, 1.0, 0.1); /*
global values */ transition-timing-function: inherit; transition-timing-function: initial; transition-timing-function: unset; values <timing-function> each <timing-function> represents the timing function to link to the corresponding property to transition, as defined in transition-property.
transition - CSS: Cascading Style Sheets
perty name | duration | delay */ transition: margin-right 4s 1s; /* property name | duration | timing function */ transition: margin-right 4s ease-in-out; /* property name | duration | timing function | delay */ transition: margin-right 4s ease-in-out 1s; /* apply to 2 properties */ transition: margin-right 4s, color 1s; /* apply to all changed properties */ transition: all 0.5s ease-out; /*
global values */ transition: inherit; transition: initial; transition: unset; the transition property is specified as one or more single-property transitions, separated by commas.
unicode-bidi - CSS: Cascading Style Sheets
/* keyword values */ unicode-bidi: normal; unicode-bidi: embed; unicode-bidi: isolate; unicode-bidi: bidi-override; unicode-bidi: isolate-override; unicode-bidi: plaintext; /*
global values */ unicode-bidi: inherit; unicode-bidi: initial; unicode-bidi: unset; syntax values normal the element does not offer an additional level of embedding with respect to the bidirectional algorithm.
user-modify - CSS: Cascading Style Sheets
/* keyword values */ user-modify: read-only; user-modify: read-write; user-modify: write-only; /*
global values */ user-modify: inherit; user-modify: initial; user-modify: unset; this property has been replaced by the contenteditable attribute.
user-select - CSS: Cascading Style Sheets
/* keyword values */ user-select: none; user-select: auto; user-select: text; user-select: contain; user-select: all; /*
global values */ user-select: inherit; user-select: initial; user-select: unset; /* mozilla-specific values */ -moz-user-select: none; -moz-user-select: text; -moz-user-select: all; /* webkit-specific values */ -webkit-user-select: none; -webkit-user-select: text; -webkit-user-select: all; /* doesn't work in safari; use only "none" or "text", or else it will allow typing in the <html> container */ /* microsoft-specific values */ -ms-user-select: none; -ms-user-selec...
vertical-align - CSS: Cascading Style Sheets
syntax /* keyword values */ vertical-align: baseline; vertical-align: sub; vertical-align: super; vertical-align: text-top; vertical-align: text-bottom; vertical-align: middle; vertical-align: top; vertical-align: bottom; /* <length> values */ vertical-align: 10em; vertical-align: 4px; /* <percentage> values */ vertical-align: 20%; /*
global values */ vertical-align: inherit; vertical-align: initial; vertical-align: unset; the vertical-align property is specified as one of the values listed below.
visibility - CSS: Cascading Style Sheets
syntax /* keyword values */ visibility: visible; visibility: hidden; visibility: collapse; /*
global values */ visibility: inherit; visibility: initial; visibility: unset; the visibility property is specified as one of the keyword values listed below.
white-space - CSS: Cascading Style Sheets
syntax /* keyword values */ white-space: normal; white-space: nowrap; white-space: pre; white-space: pre-wrap; white-space: pre-line; white-space: break-spaces; /*
global values */ white-space: inherit; white-space: initial; white-space: unset; the white-space property is specified as a single keyword chosen from the list of values below.
widows - CSS: Cascading Style Sheets
/* <integer> values */ widows: 2; widows: 3; /*
global values */ widows: inherit; widows: initial; widows: unset; in typography, a widow is the last line of a paragraph that appears alone at the top of a page.
width - CSS: Cascading Style Sheets
syntax /* <length> values */ width: 300px; width: 25em; /* <percentage> value */ width: 75%; /* keyword values */ width: max-content; width: min-content; width: fit-content(20em); width: auto; /*
global values */ width: inherit; width: initial; width: unset; the width property is specified as either: one of the following keyword values: min-content, max-content, fit-content, auto.
will-change - CSS: Cascading Style Sheets
/* keyword values */ will-change: auto; will-change: scroll-position; will-change: contents; will-change: transform; /* example of <custom-ident> */ will-change: opacity; /* example of <custom-ident> */ will-change: left, top; /* example of two <animateable-feature> */ /*
global values */ will-change: inherit; will-change: initial; will-change: unset; proper usage of this property can be a bit tricky: don't apply will-change to too many elements.
word-break - CSS: Cascading Style Sheets
syntax /* keyword values */ word-break: normal; word-break: break-all; word-break: keep-all; word-break: break-word; /* deprecated */ /*
global values */ word-break: inherit; word-break: initial; word-break: unset; the word-break property is specified as a single keyword chosen from the list of values below.
word-spacing - CSS: Cascading Style Sheets
syntax /* keyword value */ word-spacing: normal; /* <length> values */ word-spacing: 3px; word-spacing: 0.3em; /* <percentage> values */ word-spacing: 50%; word-spacing: 200%; /*
global values */ word-spacing: inherit; word-spacing: initial; word-spacing: unset; values normal the normal inter-word spacing, as defined by the current font and/or the browser.
writing-mode - CSS: Cascading Style Sheets
syntax /* keyword values */ writing-mode: horizontal-tb; writing-mode: vertical-rl; writing-mode: vertical-lr; /*
global values */ writing-mode: inherit; writing-mode: initial; writing-mode: unset; the writing-mode property is specified as one of the values listed below.
z-index - CSS: Cascading Style Sheets
syntax /* keyword value */ z-index: auto; /* <integer> values */ z-index: 0; z-index: 3; z-index: 289; z-index: -1; /* negative values to lower the priority */ /*
global values */ z-index: inherit; z-index: initial; z-index: unset; the z-index property is specified as either the keyword auto or an <integer>.
zoom - CSS: Cascading Style Sheets
/* keyword values */ zoom: normal; zoom: reset; /* <percentage> values */ zoom: 50%; zoom: 200%; /* <number> values */ zoom: 1.1; zoom: 0.7; /*
global values */ zoom: inherit; zoom: initial; zoom: unset; syntax values normal render this element at its normal size.
regexp:replace() - EXSLT
the character flags are: g -
global replace if this flag is specified, all occurrences of the regular expression within the originalstring are replaced.
regexp:test() - EXSLT
the character flags are: g
global match has no effect for this function; it's allowed for consistency with other regexp functions.
Getting Started - Developer guides
you can also add an always-different get parameter, like a timestamp or random number (see bypassing the cache) note 3: if the httprequest variable is used
globally, competing functions calling makerequest() can overwrite each other, causing a race condition.
Constraint validation - Developer guides
ion-related attributes in addition to the type attribute described above, the following attributes are used to describe basic constraints: attribute input types supporting the attribute possible values constraint description associated violation pattern text, search, url, tel, email, password a javascript regular expression (compiled with the ecmascript 5
global, ignorecase, and multiline flags disabled) the value must match the pattern.
<li> - HTML: Hypertext Markup Language
implicit aria role listitem when child of an ol, ul or menu permitted aria roles menuitem, menuitemcheckbox, menuitemradio, option, none, presentation, radio, separator, tab, treeitem dom interface htmllielement attributes this element includes the
global attributes.
<map> - HTML: Hypertext Markup Language
implicit aria role no corresponding role permitted aria roles no role permitted dom interface htmlmapelement attributes this element includes the
global attributes.
<menu> - HTML: Hypertext Markup Language
implicit aria role list permitted aria roles directory, group, listbox, menu, menubar, none, presentation, radiogroup, tablist, toolbar or tree dom interface htmlmenuelement attributes this element includes the
global attributes.
<menuitem> - HTML: Hypertext Markup Language
(if specified, the type attribute of the <menu> element must be popup; if missing, the parent element of the <menu> must itself be a <menu> in the popup menu state.) permitted aria roles none dom interface htmlmenuitemelement attributes this element includes the
global attributes; in particular title can be used to describe the command, or provide usage hints.
<object> - HTML: Hypertext Markup Language
implicit aria role no corresponding role permitted aria roles application, document, image dom interface htmlobjectelement attributes this element includes the
global attributes.
slot - HTML: Hypertext Markup Language
the slot
global attribute assigns a slot in a shadow dom shadow tree to an element: an element with a slot attribute is assigned to the slot created by the <slot> element whose name attribute's value matches that slot attribute's value.
translate - HTML: Hypertext Markup Language
the translate
global attribute is an enumerated attribute that is used to specify whether an element's translateable attribute values and its text node children should be translated when the page is localized, or whether to leave them unchanged.
Using HTTP cookies - HTTP
cookie-related regulations legislation or regulations that cover the use of cookies include: the general data privacy regulation (gdpr) in the european union the eprivacy directive in the eu the california consumer privacy act these regulations have
global reach, because they apply to any site on the world wide web that is accessed by users from these jurisdictions (the eu and california, with the caveat that california's law applies only to entities with gross revenue over 25 million usd, among other things.) these regulations include requirements such as: notifying users that your site uses cookies.
Content-Language - HTTP
examples indicating the language a document is written in the
global lang attribute is used on html elements to indicate the language of an entire html document or parts of it.
Content-Security-Policy - HTTP
the exception to this is if the worker script's origin is a
globally unique identifier (for example, if its url has a scheme of data or blob).
Cross-Origin-Opener-Policy - HTTP
coop will process-isolate your document and potential attackers can't access to your
global object if they were opening it in a popup, preventing a set of cross-origin attacks dubbed xs-leaks.
Indexed collections - JavaScript
if not provided, as with other cases where a function is invoked outside of an explicit object context, this will refer to the
global object (window) when using arrow function as callback, or undefined when using normal function as callback.
JavaScript modules - JavaScript
last but not least, let's make this clear — module features are imported into the scope of a single script — they aren't available in the
global scope.
Working with objects - JavaScript
delete myobj.a; console.log ('a' in myobj); // output: "false" you can also use delete to delete a
global variable if the var keyword was not used to declare the variable: g = 17; delete g; comparing objects in javascript, objects are a reference type.
Deprecated and obsolete features - JavaScript
the following are now properties of regexp instances, no longer of the regexp object: property description
global whether or not to test the regular expression against all possible matches in a string, or only against the first.
Warning: String.x is deprecated; use String.prototype.x instead - JavaScript
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) (function() { '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(function(methodname) { // return typeof string[me...
Method definitions - JavaScript
const bar = { foo0: function() { return 0 }, foo1() { return 1 }, ['foo' + 2]() { return 2 } } console.log(bar.foo0()) // 0 console.log(bar.foo1()) // 1 console.log(bar.foo2()) // 2 // a
global function function foo() { return 1 } let name = 'foo' console.log(window[name]()) // 1 specifications specification ecmascript (ecma-262)the definition of 'method definitions' in that specification.
arguments.callee - JavaScript
really bad solution as this (in conjunction with other arguments, callee, and caller issues) make inlining and tail recursion impossible in the general case (you can achieve it in select cases through tracing, etc., but even the best code is suboptimal due to checks that would not otherwise be necessary.) the other major issue is that the recursive call will get a different this value, e.g.: var
global = this; var sillyfunction = function(recursed) { if (!recursed) { return arguments.callee(true); } if (this !==
global) { alert('this is: ' + this); } else { alert('this is the
global'); } } sillyfunction(); ecmascript 3 resolved these issues by allowing named function expressions.
Array - JavaScript
the javascript array class is a
global object that is used in the construction of arrays; which are high-level, list-like objects.
Date - JavaScript
particularly useful are the functions that output the date and time in coordinated universal time (utc), the
global standard time defined by the world time standard.
Error - JavaScript
evalerror creates an instance representing an error that occurs regarding the
global function eval().
Math - JavaScript
description unlike many other
global objects, math is not a constructor.
Number.NEGATIVE_INFINITY - JavaScript
property attributes of number.negative_infinity writable no enumerable no configurable no description the value of number.negative_infinity is the same as the negative value of the
global object's infinity property.
Number.POSITIVE_INFINITY - JavaScript
property attributes of number.positive_infinity writable no enumerable no configurable no description the value of number.positive_infinity is the same as the value of the
global object's infinity property.
Number.parseInt() - JavaScript
polyfill if (number.parseint === undefined) { number.parseint = window.parseint } examples number.parseint vs parseint this method has the same functionality as the
global parseint() function: number.parseint === parseint // true and is part of ecmascript 2015 (its purpose is modularization of
globals).
Number.prototype.toLocaleString() - JavaScript
a check that works in all hosts, including those supporting ecma-262 prior to ed 5.1, is to test for the features specified in ecma-402 that are required to support regional options for number.prototype.tolocalestring directly: function tolocalestringsupportsoptions() { return !!(typeof intl == 'object' && intl && typeof intl.numberformat == 'function'); } this tests for a
global intl object, checks that it's not null and that it has a numberformat property that is a function.
Object.getOwnPropertySymbols() - JavaScript
examples using getownpropertysymbols var obj = {}; var a = symbol('a'); var b = symbol.for('b'); obj[a] = 'localsymbol'; obj[b] = '
globalsymbol'; var objectsymbols = object.getownpropertysymbols(obj); console.log(objectsymbols.length); // 2 console.log(objectsymbols); // [symbol(a), symbol(b)] console.log(objectsymbols[0]); // symbol(a) specifications specification ecmascript (ecma-262)the definition of 'object.getownpropertysymbols' in that specification.
Object.keys() - JavaScript
polyfill to add compatible object.keys support in older environments that do not natively support it, copy the following snippet: // from /docs/web/javascript/reference/
global_objects/object/keys if (!object.keys) { object.keys = (function() { 'use strict'; var hasownproperty = object.prototype.hasownproperty, hasdontenumbug = !({ tostring: null }).propertyisenumerable('tostring'), dontenums = [ 'tostring', 'tolocalestring', 'valueof', 'hasownproperty', 'isprototypeof', 'propertyisenu...
Proxy - JavaScript
{ name: 'firefox', type: 'browser' }, { name: 'seamonkey', type: 'browser' }] console.log(products.types); // ['browser', 'mailer'] console.log(products.number); // 3 a complete traps list example now in order to create a complete sample traps list, for didactic purposes, we will try to proxify a non-native object that is particularly suited to this type of operation: the doccookies
global object created by the "little framework" published on the document.cookie page.
RegExp() constructor - JavaScript
flags may contain any combination of the following characters: g (
global match) find all matches rather than stopping after the first match.
RegExp.prototype.compile() - JavaScript
flags if specified, flags can have any combination of the following values: g
global match i ignore case m multiline; treat beginning and end characters (^ and $) as working over multiple lines (i.e., match the beginning or end of each line (delimited by \n or \r), not only the very beginning or end of the whole input string) y sticky; matches only from the index indicated by the lastindex property of this regular expression in the target string (and does not attempt to match from any later indexes).
RegExpInstance.lastIndex - JavaScript
property attributes of regexpinstance.lastindex writable yes enumerable no configurable no description this property is set only if the regular expression instance used the g flag to indicate a
global search, or the y flag to indicate a sticky search.
Planned changes to shared memory - JavaScript
sharedarraybuffer objects are in principle always available, but unfortunately the constructor on the
global object is hidden, unless the two headers mentioned above are set, for compatibility with web content.
String.prototype.matchAll() - JavaScript
capture groups are ignored when using match() with the
global /g flag: let regexp = /t(e)(st(\d?))/g; let str = 'test1test2'; str.match(regexp); // array ['test1', 'test2'] using matchall, you can access capture groups easily: let array = [...str.matchall(regexp)]; array[0]; // ['test1', 'e', 'st1', '1', index: 0, input: 'test1test2', length: 4] array[1]; // ['test2', 'e', 'st2', '2', index: 5, input: 'test1test2', length: 4] specifications ...
Symbol.prototype.description - JavaScript
examples using description symbol('desc').tostring(); // "symbol(desc)" symbol('desc').description; // "desc" symbol('').description; // "" symbol().description; // undefined // well-known symbols symbol.iterator.tostring(); // "symbol(symbol.iterator)" symbol.iterator.description; // "symbol.iterator" //
global symbols symbol.for('foo').tostring(); // "symbol(foo)" symbol.for('foo').description; // "foo" specifications specification ecmascript (ecma-262)the definition of 'get symbol.prototype.description' in that specification.
Symbol.prototype.toString() - JavaScript
no string concatenation while you can call tostring() on symbols, you cannot use string concatenation with them: symbol('foo') + 'bar' // typeerror: can't convert symbol to string examples using tostring symbol('desc').tostring() // "symbol(desc)" // well-known symbols symbol.iterator.tostring() // "symbol(symbol.iterator) //
global symbols symbol.for('foo').tostring() // "symbol(foo)" specifications specification ecmascript (ecma-262)the definition of 'symbol.prototype.tostring' in that specification.
URIError - JavaScript
the urierror object represents an error when a
global uri handling function was used in a wrong way.
WebAssembly.compileStreaming() - JavaScript
because the compilestreaming() function accepts a promise for a response object, you can directly pass it a windoworworker
globalscope.fetch() call, and it will pass the response into the function when it fulfills.
WebAssembly.instantiateStreaming() - JavaScript
because the instantiatestreaming() function accepts a promise for a response object, you can directly pass it a windoworworker
globalscope.fetch() call, and it will pass the response into the function when it fulfills.
null - JavaScript
null is not an identifier for a property of the
global object, like undefined can be.
function declaration - JavaScript
typeof foo is function function declaration hoisting function declarations in javascript are hoisted to the top of the enclosing function or
global scope.
import - JavaScript
this runs the module's
global code, but doesn't actually import any values.
JavaScript reference - JavaScript
value properties infinity nan undefined
globalthis function properties eval() isfinite() isnan() parsefloat() parseint() decodeuri() decodeuricomponent() encodeuri() encodeuricomponent() fundamental objects object function boolean symbol error objects error aggregateerror evalerror internalerror rangeerror referenceerror syntaxerror typeerror urierror numbers & dates number bigint math date text processing string regexp indexed collections array int8arra...
How to make PWAs re-engageable using Notifications and Push - Progressive web apps (PWAs)
fetch('./register', { method: 'post', headers: { 'content-type': 'application/json' }, body: json.stringify({ subscription: subscription }), }); then the
globaleventhandlers.onclick function on the subscribe button is defined: document.getelementbyid('doit').onclick = function() { const payload = document.getelementbyid('notification-payload').value; const delay = document.getelementbyid('notification-delay').value; const ttl = document.getelementbyid('notification-ttl').value; fetch('./sendnotification', { method: 'post', ...
SVG Attribute reference - SVG: Scalable Vector Graphics
ng attributes begin, dur, end, min, max, restart, repeatcount, repeatdur, fill animation value attributes calcmode, values, keytimes, keysplines, from, to, by, autoreverse, accelerate, decelerate animation addition attributes additive, accumulate event attributes animation event attributes onbegin, onend, onrepeat document event attributes onabort, onerror, onresize, onscroll, onunload
global event attributes oncancel, oncanplay, oncanplaythrough, onchange, onclick, onclose, oncuechange, ondblclick, ondrag, ondragend, ondragenter, ondragexit, ondragleave, ondragover, ondragstart, ondrop, ondurationchange, onemptied, onended, onerror, onfocus, oninput, oninvalid, onkeydown, onkeypress, onkeyup, onload, onloadeddata, onloadedmetadata, onloadstart, onmousedown, onmouseenter, onmouseleav...
<a> - SVG: Scalable Vector Graphics
value type: <url> ; default value: none; animatable: yes
global attributes core attributes most notably: id, lang, tabindex styling attributes class, style conditional processing attributes most notably: requiredextensions, systemlanguage event attributes
global event attributes, document element event attributes, graphical event attributes presentation attributes most notably: clip-path, clip-rule, color, color-interpolation, color-rendering, cur...
<altGlyph> - SVG: Scalable Vector Graphics
value type: <iri> ; default value: none; animatable: no
global attributes core attributes most notably: id lang styling attributes class, style conditional processing attributes most notably: requiredextensions, systemlanguage event attributes
global event attributes, document element event attributes, graphical event attributes presentation attributes most notably: clip-path, clip-rule, color, color-interpolation, color-rendering, cursor, displa...
<altGlyphDef> - SVG: Scalable Vector Graphics
usage context categoriestext content elementpermitted contenteither: one or more <glyphref> elements, or one or more <altglyphitem> elements attributes
global attributes core attributes specific attributes none dom interface this element implements the svgaltglyphdefelement interface.
<altGlyphItem> - SVG: Scalable Vector Graphics
usage context categoriestext content elementpermitted contentone or more <glyphref> elements example attributes
global attributes core attributes specific attributes none dom interface this element implements the svgaltglyphitemelement interface.
<animate> - SVG: Scalable Vector Graphics
t="indefinite" /> </rect> </svg> attributes animation attributes animation timing attributes begin, dur, end, min, max, restart, repeatcount, repeatdur, fill animation value attributes calcmode, values, keytimes, keysplines, from, to, by other animation attributes most notably: attributename, additive, accumulate animation 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 this element implements the svganimateelement interface.
<animateColor> - SVG: Scalable Vector Graphics
usage context categoriesbasic shape element, graphics element, shape elementpermitted contentany number of the following elements, in any order:descriptive elements attributes
global attributes conditional processing attributes core attributes animation event attributes xlink attributes animation attribute target attributes animation timing attributes animation value attributes animation addition attributes externalresourcesrequired specific attributes by from to dom interface this element implements the svganimatecolorelement interface.
<animateMotion> - SVG: Scalable Vector Graphics
efault value for the calcmode attribute is paced animation attributes animation timing attributes begin, dur, end, min, max, restart, repeatcount, repeatdur, fill animation value attributes calcmode, values, keytimes, keysplines, from, to, by other animation attributes most notably: attributename, additive, accumulate animation 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 this element implements the svganimatemotionelement interface.
<animateTransform> - SVG: Scalable Vector Graphics
<polygon points="60,30 90,90 30,90"> <animatetransform attributename="transform" attributetype="xml" type="rotate" from="0 60 70" to="360 60 70" dur="10s" repeatcount="indefinite"/> </polygon> </svg> live sample attributes
global attributes conditional processing attributes » core attributes » animation event attributes » xlink attributes » animation attribute target attributes » animation timing attributes » animation value attributes » animation addition attributes » externalresourcesrequired specific attributes by from to type dom interface this element implements the svganimatetransformel...
<circle> - SVG: Scalable Vector Graphics
global attributes core attributes most notably: id, tabindex styling attributes class, style conditional processing attributes most notably: requiredextensions, systemlanguage event attributes
global event attributes, graphical event attributes presentation attributes most notably: clip-path, clip-rule, color, color-interpolation, color-rendering, cursor, display, fill, fill-opacity, fill-ru...
<clipPath> - SVG: Scalable Vector Graphics
value type: userspaceonuse|objectboundingbox ; default value: userspaceonuse; animatable: yes
global attributes core attributes most notably: id styling attributes class, style conditional processing attributes most notably: requiredextensions, systemlanguage presentation 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, strok...
<color-profile> - SVG: Scalable Vector Graphics
usage context categoriesnonepermitted contentany number of the following elements, in any order:descriptive elements attributes
global attributes core attributes » xlink attributes » specific attributes local name rendering-intent xlink:href dom interface this element implements the svgcolorprofileelement interface.
<cursor> - SVG: Scalable Vector Graphics
usage context categoriesnonepermitted contentany number of the following elements, in any order:descriptive elements attributes
global attributes conditional processing attributes core attributes xlink attributes externalresourcesrequired specific attributes x y xlink:href dom interface this element implements the svgcursorelement interface.
<defs> - SVG: Scalable Vector Graphics
ects to use --> <defs> <circle id="mycircle" cx="0" cy="0" r="5" /> <lineargradient id="mygradient" gradienttransform="rotate(90)"> <stop offset="20%" stop-color="gold" /> <stop offset="90%" 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 presentation attributes most notably: clip-path, clip-rule, color, color-interpolation, color-rendering, cursor, display, fill, fill-opacity, fill-rule, filter, mask, opacity, pointer-events, shape-render...
<desc> - SVG: Scalable Vector Graphics
</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 specifications specification status comment scalable vector graphics (svg) 2the definition of '<de...
<discard> - SVG: Scalable Vector Graphics
usage context categoriesanimation elementpermitted contentany number of the following elements, in any order:descriptive elements<script> attributes
global attributes conditional processing attributes core attributes aria attributes specific attributes begin href (but note that <discard> has never supported xlink:href) specifications specification status comment svg animations level 2the definition of '<discard>' in that specification.
<ellipse> - SVG: Scalable Vector Graphics
global attributes core attributes most notably: id, tabindex styling attributes class, style conditional processing attributes most notably: requiredextensions, systemlanguage event attributes
global event attributes, graphical event attributes presentation attributes most notably: clip-path, clip-rule, color, color-interpolation, color-rendering, cursor, display, fill, fill-opacity, fill-ru...
<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 presentation attributes filter primitive attributes class style specific attributes in in2 mode dom interface this element implements the svgfeblendelement interface.
<feColorMatrix> - SVG: Scalable Vector Graphics
usage context categoriesfilter primitive elementpermitted contentany number of the following elements, in any order:<animate>, <set> attributes
global attributes core attributes presentation attributes filter primitive attributes class style specific attributes in type values dom interface this element implements the svgfecolormatrixelement interface.
<feComponentTransfer> - SVG: Scalable Vector Graphics
usage context categoriesfilter primitive elementpermitted contentany number of the following elements, in any order:<fefunca>, <fefuncr>, <fefuncb>, <fefuncg> attributes
global attributes core attributes presentation attributes filter primitive attributes class style specific attributes in dom interface this element implements the svgfecomponenttransferelement interface.
<feComposite> - SVG: Scalable Vector Graphics
ormula: result = k1*i1*i2 + k2*i1 + k3*i2 + k4 where: i1 and i2 indicate the corresponding pixel channel values of the input image, which map to in and in2 respectively k1, k2, k3 and k4 indicate the values of the attributes with the same name usage context categoriesfilter primitive elementpermitted contentany number of the following elements, in any order:<animate>, <set> attributes
global attributes core attributes » presentation attributes » filter primitive attributes » class style specific attributes in in2 operator k1 k2 k3 k4 dom interface this element implements the svgfecompositeelement interface.
<feConvolveMatrix> - SVG: Scalable Vector Graphics
th the kernel's pixel grid) and assuming default values for attributes ‘divisor’, ‘targetx’ and ‘targety’, then resulting color value will be: (9* 0 + 8* 20 + 7* 40 + 6*100 + 5*120 + 4*140 + 3*200 + 2*220 + 1*240) / (9+8+7+6+5+4+3+2+1) usage context categoriesfilter primitive elementpermitted contentany number of the following elements, in any order:<animate>, <set> attributes
global attributes core attributes presentation attributes filter primitive attributes class style specific attributes in order kernelmatrix divisor bias targetx targety edgemode kernelunitlength preservealpha dom interface this element implements the svgfeconvolvematrixelement interface.
<feDiffuseLighting> - SVG: Scalable Vector Graphics
attributes
global attributes core attributes presentation attributes filter primitive attributes class style specific attributes in surfacescale diffuseconstant kernelunitlength dom interface this element implements the svgfediffuselightingelement interface.
<feDisplacementMap> - SVG: Scalable Vector Graphics
usage context categoriesfilter primitive elementpermitted contentany number of the following elements, in any order:<animate>, <set> attributes
global attributes core attributes presentation attributes filter primitive attributes class style specific attributes in in2 scale xchannelselector ychannelselector dom interface this element implements the svgfedisplacementmapelement interface.
<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 elevation dom interface this element implements the svgfedistantlightelement interface.
<feDropShadow> - SVG: Scalable Vector Graphics
value type: <number>; default value: 2; animatable: yes
global attributes core attributes most notably: id styling attributes class, style filter primitive attributes height, in, result, x, y, width presentation attributes most notably: flood-color, flood-opacity usage notes categoriesfilter primitive elementpermitted contentany number of the following elements, in any order:<animate>, <script>, <set> specifications specification s...
<feFlood> - SVG: Scalable Vector Graphics
usage context categoriesfilter primitive elementpermitted contentany number of the following elements, in any order:<animate>, <animatecolor>, <set> attributes
global attributes core attributes presentation attributes filter primitive attributes class style specific attributes flood-color flood-opacity dom interface this element implements the svgfefloodelement interface.
<feFuncA> - SVG: Scalable Vector Graphics
usage context categoriesnonepermitted contentany number of the following elements, in any order:<animate>, <set> attributes
global attributes core attributes transfer function attributes specific attributes none dom interface this element implements the svgfefuncaelement interface.
<feFuncB> - SVG: Scalable Vector Graphics
usage context categoriesnonepermitted contentany number of the following elements, in any order:<animate>, <set> attributes
global attributes core attributes transfer function attributes specific attributes none dom interface this element implements the svgfefuncbelement interface.
<feFuncG> - SVG: Scalable Vector Graphics
usage context categoriesnonepermitted contentany number of the following elements, in any order:<animate>, <set> attributes
global attributes core attributes transfer function attributes specific attributes none dom interface this element implements the svgfefuncgelement interface.
<feFuncR> - SVG: Scalable Vector Graphics
usage context categoriesnonepermitted contentany number of the following elements, in any order:<animate>, <set> attributes
global attributes core attributes transfer function attributes specific attributes none dom interface this element implements the svgfefuncrelement interface.
<feGaussianBlur> - SVG: Scalable Vector Graphics
usage context categoriesfilter primitive elementpermitted contentany number of the following elements, in any order:<animate>, <set> attributes
global attributes core attributes presentation attributes filter primitive attributes class style specific attributes in stddeviation edgemode dom interface this element implements the svgfegaussianblurelement interface.
<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 presentation attributes filter primitive attributes xlink attributes class style externalresourcesrequired specific attributes preserveaspectratio xlink:href dom interface this element implements the svgfeimageelement interface.
<feMerge> - SVG: Scalable Vector Graphics
0" width="100" height="200"> <feoffset in="sourcegraphic" dx="60" dy="60" /> <fegaussianblur stddeviation="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 presentation attributes filter primitive attributes class style specific attributes none dom interface this element implements the svgfemergeelement interface.
<feMergeNode> - SVG: Scalable Vector Graphics
"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 attributes
global attributes core attributes » specific attributes in dom interface this element implements the svgfemergenodeelement interface.
<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 presentation attributes filter primitive attributes class style specific attributes in operator radius dom interface this element implements the svgfemorphologyelement interface.
<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 presentation attributes filter primitive attributes class style specific attributes in dx dy dom interface this element implements the svgfeoffsetelement interface.
<fePointLight> - 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 x y z dom interface this element implements the svgfepointlightelement interface.
<feSpecularLighting> - SVG: Scalable Vector Graphics
attributes
global attributes core attributes presentation attributes filter primitive attributes class style specific attributes in surfacescale specularconstant specularexponent kernelunitlength dom interface this element implements the svgfespecularlightingelement interface.
<feSpotLight> - 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 x y z pointsatx pointsaty pointsatz specularexponent limitingconeangle dom interface this element implements the svgfespotlightelement interface.
<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 presentation attributes filter primitive attributes class style specific attributes in dom interface this element implements the svgfetileelement interface.
<feTurbulence> - SVG: Scalable Vector Graphics
usage context categoriesfilter primitive elementpermitted contentany number of the following elements, in any order:<animate>, <set> attributes
global attributes core attributes presentation attributes filter primitive attributes class style specific attributes basefrequency numoctaves seed stitchtiles type dom interface this element implements the svgfeturbulenceelement interface.
<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 presentation 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.
<font-face-format> - SVG: Scalable Vector Graphics
usage context categoriesfont elementpermitted contentempty attributes
global attributes core attributes specific attributes string dom interface this element implements the svgfontfaceformatelement interface.
<font-face-name> - SVG: Scalable Vector Graphics
usage context categoriesnonepermitted contentempty attributes
global attributes core attributes » specific attributes name dom interface this element implements the svgfontfacenameelement interface.
<font-face-src> - SVG: Scalable Vector Graphics
usage context categoriesfont elementpermitted contentone or more of the following elements, in any order:<font-face-name>, <font-face-uri> attributes
global attributes core attributes specific attributes none dom interface this element implements the svgfontfacesrcelement interface.
<font-face-uri> - SVG: Scalable Vector Graphics
usage context categoriesfont elementpermitted contentany number of the following elements, in any order:<font-face-format> attributes
global attributes core attributes xlink attributes specific attributes xlink:href dom interface this element implements the svgfontfaceurielement interface.
<font-face> - SVG: Scalable Vector Graphics
attributes
global attributes core attributes specific attributes font-family font-style font-variant font-weight font-stretch font-size unicode-range units-per-em panose-1 stemv stemh slope cap-height x-height accent-height ascent descent widths bbox ideographic alphabetic mathematical hanging v-ideographic v-alphabetic v-mathematical v-hanging underline-position underline-thickness strikethrough-position strikethrough-thickness overline-position overline-thickness dom interface this element implements ...
<font> - SVG: Scalable Vector Graphics
usage context categoriesfont elementpermitted contentany number of the following elements, in any order:descriptive elements<font-face>, <glyph>, <hkern>, <missing-glyph>, <vkern> attributes
global attributes core attributes presentation attributes class style externalresourcesrequired specific attributes horiz-origin-x horiz-origin-y horiz-adv-x vert-origin-x vert-origin-y vert-adv-y dom interface this element implements the svgfontelement interface.
<foreignObject> - SVG: Scalable Vector Graphics
global attributes core attributes most notably: id, tabindex styling attributes class, style conditional processing attributes most notably: requiredextensions, systemlanguage event attributes
global event attributes, graphical event attributes, document event attributes, document element event attributes presentation attributes most notably: clip-path, clip-rule, color, color-interpolation,...
<g> - SVG: Scalable Vector Graphics
html,body,svg { height:100% } <svg viewbox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"> <!-- using g to inherit presentation 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 conditional processing attributes most notably: requiredextensions, systemlanguage event attributes
global event attributes, graphical event attributes presentation attributes most notably: clip-path, clip-rule, color, color-interpolation, color-rendering, cursor, display, fill, fi...
<glyph> - SVG: Scalable Vector Graphics
ge context categoriestext content elementpermitted contentany number of the following elements, in any order:animation elementsdescriptive elementsshape elementsstructural elementsgradient elements<a>, <altglyphdef>, <clippath>, <color-profile>, <cursor>, <filter>, <font>, <font-face>, <foreignobject>, <image>, <marker>, <mask>, <pattern>, <script>, <style>, <switch>, <text>, <view> attributes
global attributes core attributes presentation attributes class style specific attributes d horiz-adv-x vert-origin-x vert-origin-y vert-adv-y unicode glyph-name orientation arabic-form lang dom interface this element implements the svgglyphelement interface.
<glyphRef> - SVG: Scalable Vector Graphics
usage context categoriestext content elementpermitted contentempty attributes
global attributes core attributes » presentation attributes » xlink attributes » class style specific attributes x y dx dy glyphref format xlink:href dom interface this element implements the svgglyphrefelement interface.
<hatch> - SVG: Scalable Vector Graphics
usage context categoriesnever-rendered element, paint server elementpermitted contentany number of the following elements, in any order:animation elementsdescriptive elements<hatchpath>, <script>, <style> attributes
global attributes core attributes
global event attributes presentation attributes style attributes specific attributes x y pitch rotate hatchunits hatchcontentunits transform href dom interface this element implements the svghatchelement interface.
<hatchpath> - SVG: Scalable Vector Graphics
usage context categoriesnonepermitted contentany number of the following elements, in any order:animation elementsdescriptive elements<script>, <style> attributes
global attributes core attributes
global event attributes presentation attributes style attributes specific attributes d offset dom interface this element implements the svghatchpathelement interface.
<hkern> - SVG: Scalable Vector Graphics
usage context categoriesfont elementpermitted contentempty attributes
global attributes core attributes specific attributes u1 g1 u2 g2 k dom interface this element implements the svghkernelement interface.
<image> - SVG: Scalable Vector Graphics
usage context categoriesgraphics element, graphics referencing elementpermitted contentany number of the following elements, in any order:animation elementsdescriptive elements attributes
global attributes conditional processing attributes core attributes graphical event attributes presentation attributes xlink attributes class style externalresourcesrequired transform specific attributes x: positions the image horizontally from the origin.
<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 conditional processing attributes most notably: requiredextensions, systemlanguage event attributes
global event attributes, graphical event attributes presentation attributes most notably: clip-path, clip-rule, color, color-interpolation, color-rendering, cursor, display, fill, fill-opacity, fill-ru...
<linearGradient> - SVG: Scalable Vector Graphics
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 presentation attributes most notably: clip-path, clip-rule, color, color-interpolation, color-rendering, cursor, display, fill, fill-opacity, fill-rule, filter, mask, opacity, pointer-events, shape-rendering, stroke, stroke-dasharray, st...
<marker> - SVG: Scalable Vector Graphics
value type: <list-of-numbers> ; default value: none; animatable: yes
global attributes core attributes most notably: id, tabindex styling attributes class, style conditional processing attributes most notably: requiredextensions, systemlanguage presentation attributes most notably: clip-path, clip-rule, color, color-interpolation, color-rendering, cursor, display, fill, fill-opacity, fill-rule, filter, mask, opacity, pointer-events, shape-rendering, stroke, str...
<mask> - SVG: Scalable Vector Graphics
value type: <length> ; default value: 120%; animatable: yes
global attributes core attributes most notably: id styling attributes class, style conditional processing attributes most notably: requiredextensions, systemlanguage presentation 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, strok...
<missing-glyph> - SVG: Scalable Vector Graphics
usage context categoriesnonepermitted contentany number of the following elements, in any order:animation elementsdescriptive elementsshape elementsstructural elementsgradient elements<a>, <altglyphdef>, <clippath>, <color-profile>, <cursor>, <filter>, <font>, <font-face>, <foreignobject>, <image>, <marker>, <mask>, <pattern>, <script>, <style>, <switch>, <text>, <view> attributes
global attributes core attributes presentation attributes class style specific attributes d horiz-adv-x vert-origin-x vert-origin-y vert-adv-y dom interface this element implements the svgmissingglyphelement interface.
<mpath> - SVG: Scalable Vector Graphics
usage context categoriesanimation elementpermitted contentany number of the following elements, in any order:descriptive elements attributes
global attributes core attributes » xlink attributes » externalresourcesrequired specific attributes xlink:href dom interface this element implements the svgmpathelement interface.
<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 conditional processing attributes most notably: requiredextensions, systemlanguage event attributes
global event attributes, graphical event attributes presentation attributes most notably: clip-path, clip-rule, color, color-interpolation, color-rendering, cursor, display, fill, fill-opacity, fill-ru...
<pattern> - SVG: Scalable Vector Graphics
value type: <length>|<percentage> ; default value: 0; animatable: yes
global attributes core attributes most notably: id, tabindex styling attributes class, style conditional processing attributes most notably: requiredextensions, systemlanguage presentation attributes most notably: clip-path, clip-rule, color, color-interpolation, color-rendering, cursor, display, fill, fill-opacity, fill-rule, filter, mask, opacity, pointer-events, shape-rendering, stroke, str...
<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 conditional processing attributes most notably: requiredextensions, systemlanguage event attributes
global event attributes, graphical event attributes presentation attributes most notably: clip-path, clip-rule, color, color-interpolation, color-rendering, cursor, display, fill, fill-opacity, fill-ru...
<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 conditional processing attributes most notably: requiredextensions, systemlanguage event attributes
global event attributes, graphical event attributes presentation attributes most notably: clip-path, clip-rule, color, color-interpolation, color-rendering, cursor, display, fill, fill-opacity, fill-ru...
<radialGradient> - SVG: Scalable Vector Graphics
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 presentation attributes most notably: clip-path, clip-rule, color, color-interpolation, color-rendering, cursor, display, fill, fill-opacity, fill-rule, filter, mask, opacity, pointer-events, shape-rendering, stroke, stroke-dasharray, st...
<rect> - SVG: Scalable Vector Graphics
global attributes core attributes most notably: id, tabindex styling attributes class, style conditional processing attributes most notably: requiredextensions, systemlanguage event attributes
global event attributes, graphical event attributes presentation attributes most notably: clip-path, clip-rule, color, color-interpolation, color-rendering, cursor, display, fill, fill-opacity, fill-ru...
<script> - SVG: Scalable Vector Graphics
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 specifications specification status comment scalable vector graphics (svg) 2the definition of '<script>' in that specification.
<set> - SVG: Scalable Vector Graphics
value type: <anything>; default value: none; animatable: no animation attributes animation timing attributes begin, dur, end, min, max, restart, repeatcount, repeatdur, fill other animation attributes most notably: attributename animation 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 categoriesanimation elementpermitted contentany number of the following elements, in any order:descriptive elements specifications specification status comment svg animations level 2the definiti...
<stop> - SVG: Scalable Vector Graphics
value type: <opacity>; default value: 1; animatable: yes
global attributes core attributes most notably: id styling attributes class, style event attributes
global event attributes, document element event attributes presentation attributes most notably: color, display, stop-color, stop-opacity, visibility usage notes categoriesgradient elementpermitted contentany number of the following elements, in any order:<animate>, <animatecolor>, <set> spe...
<style> - SVG: Scalable Vector Graphics
value type: <string>; 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 specifications specification status comment scalable vector graphics (svg) 2the definition of '<style>' in that specification.
<svg> - SVG: Scalable Vector Graphics
global attributes core attributes most notably: id, tabindex styling attributes class, style conditional processing attributes most notably: requiredextensions, systemlanguage event attributes
global event attributes, graphical event attributes, document event attributes, document element event attributes presentation attributes most notably: clip-path, clip-rule, color, color-interpolation,...
<switch> - SVG: Scalable Vector Graphics
usage context categoriescontainer elementpermitted contentany number of the following elements, in any order:animation elementsdescriptive elementsshape elements<a>, <foreignobject>, <g>, <image>, <svg>, <switch>, <text>, <use> attributes
global attributes conditional processing attributes core attributes graphical event attributes presentation attributes class style externalresourcesrequired transform dom interface this element implements the svgswitchelement interface.
<symbol> - SVG: Scalable Vector Graphics
value type: <length>|<percentage> ; 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, graphical event attributes presentation attributes most notably: clip-path, clip-rule, color, color-interpolation, color-rendering, cursor, display, fill, fill-opacity, fill-rule, filter, mask, opacity, pointer-events, shape-rendering, ...
<text> - SVG: Scalable Vector Graphics
value type: <length>|<percentage> ; default value: none; animatable: yes
global attributes core attributes most notably: id, tabindex styling attributes class, style, font-family, font-size, font-size-adjust, font-stretch, font-style, font-variant, font-weight conditional processing attributes most notably: requiredextensions, systemlanguage event attributes
global event attributes, graphical event attributes presentation attributes most notably: clip-path, clip-...
<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 conditional processing attributes most notably: requiredextensions, systemlanguage event attributes
global event attributes, graphical event attributes presentation attributes most notably: clip-path, clip-rule, color, color-interpolation, color-rendering, cursor, display, fill, fill-opacity, fill-ru...
<title> — the SVG accessible name element - SVG: Scalable Vector Graphics
html,body,svg { height:100% } <svg viewbox="0 0 20 10" xmlns="http://www.w3.org/2000/svg"> <circle cx="5" cy="5" r="4"> <title>i'm a circle</title> </circle> <rect x="11" y="1" width="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 specifications specification status comment scalable vector graphics (svg) 2the definition of '<ti...
<tref> - SVG: Scalable Vector Graphics
usage context categoriestext content element, text content child elementpermitted contentany number of the following elements, in any order:descriptive elements<animate>, <animatecolor>, <set> attributes
global attributes conditional processing attributes core attributes graphical event attributes presentation attributes xlink attributes class style externalresourcesrequired specific attributes xlink:href dom interface this element implements the svgtrefelement interface.
<tspan> - SVG: Scalable Vector Graphics
value type: <length>|<percentage> ; default value: none; animatable: yes
global attributes core attributes most notably: id, tabindex styling attributes class, style conditional processing attributes most notably: requiredextensions, systemlanguage event attributes
global event attributes, graphical event attributes presentation attributes most notably: clip-path, clip-rule, color, color-interpolation, color-rendering, cursor, display, dominant-baseline, fill, fi...
<use> - SVG: Scalable Vector Graphics
global attributes core attributes most notably: id, tabindex styling attributes class, style conditional processing attributes most notably: requiredextensions, systemlanguage event attributes
global event attributes, graphical event attributes presentation attributes most notably: clip-path, clip-rule, color, color-interpolation, color-rendering, cursor, display, fill, fill-opacity, fill-ru...
<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 preserveaspectratio zoomandpan viewtarget example svg <svg width="600" height="200" viewbox="0 0 600 200" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <defs> <radialgradient id="gradient"> <stop offset="0%" stop-color="#8cffa0" /> <stop offset="100%" stop-color="#8ca0ff" /> </radialgradient> </defs> <circle r="50" cx="180" cy="50" style="fill:url(#gradient)"/> <vie...
<vkern> - SVG: Scalable Vector Graphics
usage context categoriesfont elementpermitted contentempty attributes
global attributes core attributes specific attributes u1 g1 u2 g2 k dom interface this element implements the svgvkernelement interface.
SVG 2 support in Mozilla - SVG: Scalable Vector Graphics
n status unknown svgelement.getpresentationattribute() removed never implemented (prototype removed in bug 921456) svgcolor and svgicccolor removed never implemented svgelement.focus(), svgelement.blur() not implemented (bug 778654) svgelement.tabindex implemented (bug 778654) document.activeelement implementation status unknown
globaleventhandlers on svgelement implementation status unknown options dictionary attribute for svggraphicselement.getbbox() implemented behind the preference svg.new-getbbox.enabled (bug 999964, bug 1019326) allow leading and trailing whitespace in <length>, <angle>, <number> and <integer> implementation status unknown form feed (u+000c) in whitespace implementat...
Secure contexts - Web security
are not local, to be considered secure, must meet the following criteria: must be served over https:// or wss:// urls the security properties of the network channel used to deliver the resource must not be considered deprecated feature detection pages can use feature detection to check whether they are in a secure context or not by using the issecurecontext boolean, which is exposed on the
global scope.